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

.ladle/components.tsx

@@ -2,15 +2,25 @@ 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,
@@ -18,11 +28,38 @@ import {
   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",

src/components/Details.stories.tsx

@@ -7,35 +7,50 @@ import { StoryWrapper } from '.ladle/components';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const DetailsStory: Story<Parameters<typeof Details>> = () => (
+export const DetailsStory: Story<Parameters<typeof Details>[0]> = (args) => (
   <StoryWrapper>
     <Styled.Resizable>
-      <Details
-        items={[
-          {
-            key: 'item-1',
-            label: 'Item 1',
-            tooltip: 'leverage',
-            value: 'Value 1',
-          },
-          {
-            key: 'item-2',
-            label: 'Really really really long item name 2',
-            tooltip: 'liquidation-price',
-            value: 'Value 2',
-          },
-          {
-            key: 'item-3',
-            label: 'Item 3',
-            tooltip: 'realized-pnl',
-            value: 'Value 3',
-          },
-        ]}
-      />
+      <Details {...args} />
     </Styled.Resizable>
   </StoryWrapper>
 );
 
+DetailsStory.args = {
+  items: [
+    {
+      key: 'item-1',
+      label: 'Item 1',
+      tooltip: 'leverage',
+      value: 'Value 1',
+    },
+    {
+      key: 'item-2',
+      label: 'Really really really long item name 2',
+      tooltip: 'liquidation-price',
+      value: 'Value 2',
+    },
+    {
+      key: 'item-3',
+      label: 'Item 3',
+      tooltip: 'realized-pnl',
+      value: 'Value 3',
+    },
+  ],
+  showSubitems: false,
+  isLoading: false,
+  withOverflow: false,
+  withSeparators: false,
+};
+
+DetailsStory.argTypes = {
+  justifyItems: { options: ['start', 'end'], control: { type: 'select' }, defaultValue: 'start' },
+  layout: {
+    options: ['column', 'row', 'rowColumns', 'grid', 'stackColumn'],
+    control: { type: 'select' },
+    defaultValue: 'column',
+  },
+};
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Resizable = styled.section`

src/components/DropdownMenu.stories.tsx

@@ -4,8 +4,18 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
-  const exampleItems = [
+export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>[0]> = (args) => {
+  return (
+    <StoryWrapper>
+      <DropdownMenu {...args}>
+        <span>Menu</span>
+      </DropdownMenu>
+    </StoryWrapper>
+  );
+};
+
+DropdownMenuStory.args = {
+  items: [
     {
       value: '0',
       label: 'Item 0',
@@ -29,19 +39,9 @@ export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args)
       onSelect: () => alert('Item 3 action'),
       highlightColor: 'destroy',
     },
-  ];
-
-  return (
-    <StoryWrapper>
-      <DropdownMenu {...args} items={exampleItems}>
-        <span>Menu</span>
-      </DropdownMenu>
-    </StoryWrapper>
-  );
+  ],
 };
 
-DropdownMenuStory.args = {};
-
 DropdownMenuStory.argTypes = {
   align: {
     options: ['start', 'center', 'end'],

src/components/DropdownSelectMenu.stories.tsx

@@ -28,21 +28,22 @@ const exampleItems = [
   },
 ];
 
-export const DropdownSelectMenuStory: Story<Parameters<typeof DropdownSelectMenu>> = (args) => {
+export const DropdownSelectMenuStory: Story<
+  Pick<Parameters<typeof DropdownSelectMenu>[0], 'items' | 'align' | 'sideOffset' | 'disabled'>
+> = (args) => {
   const [item, setItem] = useState(exampleItems[0].value);
   return (
     <StoryWrapper>
-      <DropdownSelectMenu
-        items={exampleItems}
-        value={item}
-        onValueChange={(value) => setItem(value)}
-        {...args}
-      />
+      <DropdownSelectMenu value={item} onValueChange={(value) => setItem(value)} {...args} />
     </StoryWrapper>
   );
 };
 
-DropdownSelectMenuStory.args = {};
+DropdownSelectMenuStory.args = {
+  items: exampleItems,
+  sideOffset: 1,
+  disabled: false,
+};
 
 DropdownSelectMenuStory.argTypes = {
   align: {

src/components/Icon.stories.tsx

@@ -4,7 +4,7 @@ import { Icon, IconName } from '@/components/Icon';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const IconStory: Story<Parameters<typeof Icon>> = (args) => {
+export const IconStory: Story<Parameters<typeof Icon>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Icon {...args} />

src/components/Link.stories.tsx

@@ -6,7 +6,7 @@ import { Link } from '@/components/Link';
 import { StoryWrapper } from '.ladle/components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const LinkStory: Story<Parameters<typeof Link>> = (args) => {
+export const LinkStory: Story<Parameters<typeof Link>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Styled.Container>

src/components/NavigationMenu.stories.tsx

@@ -5,8 +5,24 @@ import { HashRouter } from 'react-router-dom';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const NavigationMenuStory: Story<Parameters<typeof NavigationMenu>> = (args) => {
-  const exampleItems = [
+export const NavigationMenuStory: Story<
+  Pick<Parameters<typeof NavigationMenu>[0], 'items' | 'orientation' | 'submenuPlacement'>
+> = (args) => {
+  return (
+    <StoryWrapper>
+      <HashRouter
+        children={
+          <NavigationMenu {...args}>
+            <span>Menu</span>
+          </NavigationMenu>
+        }
+      />
+    </StoryWrapper>
+  );
+};
+
+NavigationMenuStory.args = {
+  items: [
     {
       group: 'navigation',
       groupLabel: 'Views',
@@ -93,23 +109,9 @@ export const NavigationMenuStory: Story<Parameters<typeof NavigationMenu>> = (ar
         },
       ],
     },
-  ];
-
-  return (
-    <StoryWrapper>
-      <HashRouter
-        children={
-          <NavigationMenu {...args} items={exampleItems}>
-            <span>Menu</span>
-          </NavigationMenu>
-        }
-      />
-    </StoryWrapper>
-  );
+  ],
 };
 
-NavigationMenuStory.args = {};
-
 NavigationMenuStory.argTypes = {
   orientation: {
     options: ['vertical', 'horizontal'],

src/components/SearchInput.stories.tsx

@@ -7,7 +7,7 @@ import { StoryWrapper } from '.ladle/components';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { InputType } from './Input';
 
-export const SearchInputStory: Story<Parameters<typeof SearchInput>> = (args) => (
+export const SearchInputStory: Story<Parameters<typeof SearchInput>[0]> = (args) => (
   <StoryWrapper>
     <Styled.Container>
       <SearchInput placeholder="Search something..." type={InputType.Search} />

src/components/SearchSelectMenu.stories.tsx

@@ -6,7 +6,7 @@ import { SearchSelectMenu } from '@/components/SearchSelectMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>> = (args) => {
+export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>[0]> = (args) => {
   const [selectedItem, setSelectedItem] = useState<string>();
 
   const exampleItems = [
@@ -24,10 +24,7 @@ export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>> =
   return (
     <StoryWrapper>
       <Container>
-        <SearchSelectMenu
-          {...args}
-          items={exampleItems}
-        >
+        <SearchSelectMenu {...args} items={exampleItems}>
           {!selectedItem ? <span>Search and Select</span> : <span>{selectedItem}</span>}
         </SearchSelectMenu>
       </Container>

src/components/SelectMenu.stories.tsx

@@ -26,7 +26,7 @@ const exampleItems: { value: string; label: string }[] = [
   },
 ];
 
-export const SelectMenuStory: Story<Parameters<typeof SelectMenu>> = (args) => {
+export const SelectMenuStory: Story<Parameters<typeof SelectMenu>[0]> = (args) => {
   const [value, setValue] = useState(exampleItems[0].value);
   const [value2, setValue2] = useState(exampleItems[2].value);
 

src/components/Tabs.stories.tsx

@@ -13,29 +13,11 @@ enum TabItem {
   Item3 = 'Item3',
 }
 
-const TabItems = [
-  {
-    value: TabItem.Item1,
-    label: 'Item 1',
-    content: <div>Item 1 Content</div>,
-  },
-  {
-    value: TabItem.Item2,
-    label: 'Item 2',
-    content: <div>Item 2 Content</div>,
-  },
-  {
-    value: TabItem.Item3,
-    label: 'Item 3',
-    content: <div>Item 3 Content</div>,
-  },
-];
-
-export const TabsStory: Story<Parameters<typeof Tabs>> = (args) => {
+export const TabsStory: Story<Parameters<typeof Tabs>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Styled.Container>
-        <Tabs items={TabItems} {...args} />
+        <Tabs {...args} />
       </Styled.Container>
     </StoryWrapper>
   );
@@ -43,6 +25,23 @@ export const TabsStory: Story<Parameters<typeof Tabs>> = (args) => {
 
 TabsStory.args = {
   fullWidthTabs: false,
+  items: [
+    {
+      value: TabItem.Item1,
+      label: 'Item 1',
+      content: <div>Item 1 Content</div>,
+    },
+    {
+      value: TabItem.Item2,
+      label: 'Item 2',
+      content: <div>Item 2 Content</div>,
+    },
+    {
+      value: TabItem.Item3,
+      label: 'Item 3',
+      content: <div>Item 3 Content</div>,
+    },
+  ],
 };
 
 TabsStory.argTypes = {

src/components/Tag.stories.tsx

@@ -1,10 +1,10 @@
 import type { Story } from '@ladle/react';
 
-import { Tag } from '@/components/Tag';
+import { Tag, TagSign, TagSize, TagType } from '@/components/Tag';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const TagStory: Story<Parameters<typeof Tag>> = (args) => {
+export const TagStory: Story<Parameters<typeof Tag>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Tag {...args} />
@@ -14,4 +14,23 @@ export const TagStory: Story<Parameters<typeof Tag>> = (args) => {
 
 TagStory.args = {
   children: 'USDC',
+  isHighlighted: false,
+};
+
+TagStory.argTypes = {
+  size: {
+    options: Object.values(TagSize),
+    control: { type: 'select' },
+    defaultValue: TagSize.Small,
+  },
+  type: {
+    options: [...Object.values(TagType), undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
+  sign: {
+    options: [...Object.values(TagSign), undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
 };

src/components/Tag.tsx

@@ -1,20 +1,20 @@
 import styled, { css } from 'styled-components';
 
 export enum TagSize {
-  Small,
-  Medium,
+  Small = 'Small',
+  Medium = 'Medium',
 }
 
 export enum TagType {
-  Asset,
-  Side,
-  Number,
+  Asset = 'Asset',
+  Side = 'Side',
+  Number = 'Number',
 }
 
 export enum TagSign {
-  Positive,
-  Negative,
-  Neutral,
+  Positive = 'Positive',
+  Negative = 'Negative',
+  Neutral = 'Neutral',
 }
 
 type StyleProps = {

src/components/ToggleButton.stories.tsx

@@ -5,7 +5,7 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { StoryWrapper } from '.ladle/components';
 import { ToggleButton } from './ToggleButton';
 
-export const ToggleButtonStory: Story<Parameters<typeof ToggleButton>> = (args) => (
+export const ToggleButtonStory: Story<Parameters<typeof ToggleButton>[0]> = (args) => (
   <StoryWrapper>
     <ToggleButton {...args}>Toggle me</ToggleButton>
   </StoryWrapper>

src/components/ToggleGroup.stories.tsx

@@ -21,16 +21,22 @@ const ToggleGroupItems = [
   },
 ];
 
-export const ToggleGroupStory: Story<Parameters<typeof ToggleGroup>> = (args) => {
+export const ToggleGroupStory: Story<
+  Pick<Parameters<typeof ToggleGroup>[0], 'items' | 'size' | 'shape'>
+> = (args) => {
   const [value, setValue] = useState('0');
 
   return (
     <StoryWrapper>
-      <ToggleGroup items={ToggleGroupItems} value={value} onValueChange={setValue} {...args} />
+      <ToggleGroup value={value} onValueChange={setValue} {...args} />
     </StoryWrapper>
   );
 };
 
+ToggleGroupStory.args = {
+  items: ToggleGroupItems,
+};
+
 ToggleGroupStory.argTypes = {
   size: {
     options: Object.values(ButtonSize),

src/components/WithLabel.stories.tsx

@@ -9,7 +9,7 @@ import { StoryWrapper } from '.ladle/components';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const WithLabelStory: Story<Parameters<typeof WithLabel>> = (args) => {
+export const WithLabelStory: Story<Parameters<typeof WithLabel>[0]> = (args) => {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
 

src/components/WithReceipt.stories.tsx

@@ -3,32 +3,29 @@ import type { Story } from '@ladle/react';
 import { Button } from '@/components/Button';
 
 import { WithReceipt } from '@/components/WithReceipt';
-import { type DetailsItem } from './Details';
 
 import { StoryWrapper } from '.ladle/components';
 
-const items: DetailsItem[] = [
-  {
-    key: 'item-1',
-    label: 'Item 1',
-    value: 'Value 1',
-  },
-  {
-    key: 'item-2',
-    label: 'Item 2',
-    value: 'Value 2',
-  },
-  {
-    key: 'item-3',
-    label: 'Item 3',
-    value: 'Value 3',
-  },
-];
-
-export const WithReceiptStory: Story<Parameters<WithReceipt>> = (args) => (
+export const WithReceiptStory: Story<Omit<Parameters<typeof WithReceipt>[0], 'slotReceipt'>> = (
+  args
+) => (
   <StoryWrapper>
     <div style={{ width: 200 }}>
-      <WithReceipt {...args}>
+      <WithReceipt
+        slotReceipt={
+          <div
+            style={{
+              padding: '1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            Receipt Content
+          </div>
+        }
+        {...args}
+      >
         <Button>Hello there</Button>
       </WithReceipt>
     </div>
@@ -36,7 +33,7 @@ export const WithReceiptStory: Story<Parameters<WithReceipt>> = (args) => (
 );
 
 WithReceiptStory.args = {
-  items,
+  hideReceipt: false,
 };
 
 WithReceiptStory.argTypes = {

src/components/WithTooltip.stories.tsx

@@ -6,7 +6,7 @@ import { tooltipStrings } from '@/constants/tooltips';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const Tooltip: Story<Parameters<typeof WithTooltip>> = (args) => {
+export const Tooltip: Story<Parameters<typeof WithTooltip>[0]> = (args) => {
   return (
     <StoryWrapper>
       <WithTooltip {...args}>

src/views/PositionTile.stories.tsx

@@ -33,9 +33,11 @@ Styled.PositionInfoContainer = styled.div`
 
 PositionTileStory.args = {
   currentSize: 0.2,
-  oraclePrice: 1300,
+  notionalTotal: 1300,
   postOrderSize: 0.2,
   stepSizeDecimals: 3,
   symbol: 'ETH',
   tickSizeDecimals: 1,
+  isLoading: false,
+  showNarrowVariation: false,
 };