✨ fix(ladle): Fix ladle environment and parameter types in stories (#286

)

.ladle/components.tsx

@@ -2,27 +2,64 @@ import '@/polyfills';
 import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import styled from 'styled-components';
+import { WagmiConfig } from 'wagmi';
+import { GrazProvider } from 'graz';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { store } from '@/state/_store';
+import { SupportedLocales } from '@/constants/localization';
+
+import { AccountsProvider } from '@/hooks/useAccounts';
+import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
+import { DydxProvider } from '@/hooks/useDydxClient';
+import { DialogAreaProvider } from '@/hooks/useDialogArea';
+import { LocaleProvider } from '@/hooks/useLocaleSeparators';
+import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
+import { RestrictionProvider } from '@/hooks/useRestrictions';
+import { SubaccountProvider } from '@/hooks/useSubaccount';
 
 import { GlobalStyle } from '@/styles/globalStyle';
 
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
-
 import {
   AppTheme,
   AppThemeSystemSetting,
   AppColorMode,
   setAppThemeSetting,
   setAppColorMode,
 } from '@/state/configs';
-import { setLocaleLoaded } from '@/state/localization';
+
+import { setLocaleLoaded, setSelectedLocale } from '@/state/localization';
+import { store } from '@/state/_store';
+
+import { config } from '@/lib/wagmi';
 
 import '@/index.css';
 import './ladle.css';
 
+const queryClient = new QueryClient();
+
+const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
+  // eslint-disable-next-line react/display-name
+  return ({ children }: { children: React.ReactNode }) => (
+    <Component {...props}>{children}</Component>
+  );
+};
+
+const providers = [
+  wrapProvider(QueryClientProvider, { client: queryClient }),
+  wrapProvider(GrazProvider),
+  wrapProvider(WagmiConfig, { config }),
+  wrapProvider(LocaleProvider),
+  wrapProvider(RestrictionProvider),
+  wrapProvider(DydxProvider),
+  wrapProvider(AccountsProvider),
+  wrapProvider(SubaccountProvider),
+  wrapProvider(DialogAreaProvider),
+  wrapProvider(PotentialMarketsProvider),
+  wrapProvider(AppThemeAndColorModeProvider),
+];
+
 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [theme, setTheme] = useState(AppTheme.Classic);
   const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
@@ -33,9 +70,20 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   }, [theme, colorMode]);
 
   useEffect(() => {
+    store.dispatch(setSelectedLocale({ locale: SupportedLocales.EN }));
     store.dispatch(setLocaleLoaded(true));
   }, []);
 
+  const content = [...providers].reverse().reduce(
+    (children, Provider) => {
+      return <Provider>{children}</Provider>;
+    },
+    <StoryContent>
+      <GlobalStyle />
+      {children}
+    </StoryContent>
+  );
+
   return (
     <Provider store={store}>
       <StoryHeader>
@@ -79,10 +127,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
         </SelectMenu>
       </StoryHeader>
       <hr />
-      <AppThemeAndColorModeProvider>
-        <GlobalStyle />
-        <StoryContent>{children}</StoryContent>
-      </AppThemeAndColorModeProvider>
+      {content}
     </Provider>
   );
 };

package.json

@@ -118,7 +118,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@ladle/react": "^2.15.0",
+    "@ladle/react": "^4.0.2",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/luxon": "^3.3.0",