fix(components): fix typing of stories

trezor · Feb 13, 2025 · 3812b75 · 3812b75
1 parent 01a0053
commit 3812b75
Show file tree

Hide file tree

Showing 22 changed files with 69 additions and 46 deletions.
diff --git a/packages/components/src/components/Box/Box.stories.tsx b/packages/components/src/components/Box/Box.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Box: StoryObj = {
+export const Box: StoryObj<typeof BoxComponent> = {
     render: props => (
         <BoxComponent {...props}>
             <Content />

diff --git a/packages/components/src/components/BulletList/BulletList.stories.tsx b/packages/components/src/components/BulletList/BulletList.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const BulletList: StoryObj = {
+export const BulletList: StoryObj<typeof BulletListComponent> = {
     render: props => (
         <BulletListComponent {...props}>
             <BulletListComponent.Item title="Lorem ipsum" state="done">
@@ -40,7 +40,7 @@ export const BulletList: StoryObj = {
         isOrdered: true,
         bulletSize: 'large',
         width: 400,
-        margin: { vertical: spacings.lg, horizontal: 'auto ' },
+        margin: { vertical: spacings.lg, horizontal: 'auto' },
     },
     argTypes: {
         isOrdered: {

diff --git a/packages/components/src/components/Collapsible/Collapsible.stories.tsx b/packages/components/src/components/Collapsible/Collapsible.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Collapsible: StoryObj = {
+export const Collapsible: StoryObj<typeof CollapsibleComponent> = {
     render: args => (
         <CollapsibleComponent {...args}>
             <CollapsibleComponent.Toggle>

diff --git a/packages/components/src/components/Divider/Divider.stories.tsx b/packages/components/src/components/Divider/Divider.stories.tsx
@@ -15,7 +15,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Divider: StoryObj = {
+export const Divider: StoryObj<typeof DividerComponent> = {
     render: props => (
         <Container>
             <DividerComponent {...props} />

diff --git a/packages/components/src/components/Icon/Icon.stories.tsx b/packages/components/src/components/Icon/Icon.stories.tsx
@@ -6,13 +6,7 @@ import {
     icons as iconsDeprecated,
 } from '@suite-common/icons-deprecated';
 
-import {
-    Icon as IconComponent,
-    IconProps,
-    allowedIconFrameProps,
-    iconSizes,
-    iconVariants,
-} from './Icon';
+import { Icon as IconComponent, allowedIconFrameProps, iconSizes, iconVariants } from './Icon';
 import { getFramePropsStory } from '../../utils/frameProps';
 
 const meta: Meta = {
@@ -27,7 +21,7 @@ const allIcons = new Set(
     [...iconNames, ...iconsDeprecatedNames].sort((a, b) => a.localeCompare(b)),
 );
 
-export const Icon: StoryObj<IconProps> = {
+export const Icon: StoryObj<typeof IconComponent> = {
     args: {
         name: 'discover',
         variant: 'primary',
@@ -62,9 +56,12 @@ export const Icon: StoryObj<IconProps> = {
             control: 'color',
         },
         size: {
-            options: iconSizes,
+            options: Object.values(iconSizes),
             control: {
                 type: 'select',
+                labels: Object.fromEntries(
+                    Object.entries(iconSizes).map(([key, value]) => [value, `${key}: ${value}`]),
+                ),
             },
         },
         ...getFramePropsStory(allowedIconFrameProps).argTypes,

diff --git a/packages/components/src/components/Icon/icons.stories.tsx b/packages/components/src/components/Icon/icons.stories.tsx
@@ -160,9 +160,10 @@ export const AllIcons: StoryObj<IconProps> = {
             control: 'color',
         },
         size: {
-            options: iconSizes,
+            options: Object.values(iconSizes),
             control: {
                 type: 'select',
+                labels: iconSizes,
             },
         },
         ...getFramePropsStory(allowedIconFrameProps).argTypes,

diff --git a/packages/components/src/components/IconCircle/IconCircle.stories.tsx b/packages/components/src/components/IconCircle/IconCircle.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const IconCircle: StoryObj = {
+export const IconCircle: StoryObj<IconCircleProps> = {
     render: props => <IconCircleComponent {...(props as IconCircleProps)} />,
     args: {
         variant: 'primary',

diff --git a/packages/components/src/components/InfoItem/InfoItem.stories.tsx b/packages/components/src/components/InfoItem/InfoItem.stories.tsx
@@ -20,12 +20,8 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const InfoItem: StoryObj = {
-    render: props => (
-        <InfoItemComponent label={undefined} {...props}>
-            Lorem ipsum
-        </InfoItemComponent>
-    ),
+export const InfoItem: StoryObj<typeof InfoItemComponent> = {
+    render: props => <InfoItemComponent {...props}>Lorem ipsum</InfoItemComponent>,
     args: {
         ...getTextPropsStory(allowedInfoItemTextProps).args,
         ...getFramePropsStory(allowedInfoItemFrameProps).args,
@@ -77,6 +73,9 @@ export const InfoItem: StoryObj = {
             options: Object.values(spacings),
             control: {
                 type: 'select',
+                labels: Object.fromEntries(
+                    Object.entries(spacings).map(([key, value]) => [value, `${key}: ${value}`]),
+                ),
             },
         },
         ...getTextPropsStory(allowedInfoItemTextProps).argTypes,

diff --git a/packages/components/src/components/List/List.stories.tsx b/packages/components/src/components/List/List.stories.tsx
@@ -25,7 +25,7 @@ const iconProps = {
     variant: 'primary',
 } as Partial<IconProps>;
 
-export const List: StoryObj = {
+export const List: StoryObj<typeof ListComponent> = {
     render: props => (
         <ListComponent {...props}>
             <ListComponent.Item bulletComponent={<Icon name="butterfly" {...iconProps} />}>

diff --git a/packages/components/src/components/SubTabs/SubTabs.stories.tsx b/packages/components/src/components/SubTabs/SubTabs.stories.tsx
@@ -96,7 +96,7 @@ const SubTabsApp = (props: Partial<SubTabsProps>) => {
     );
 };
 
-export const SubTabs: StoryObj = {
+export const SubTabs: StoryObj<typeof SubTabsComponent> = {
     render: props => <SubTabsApp {...props} />,
     args: {
         ...getFramePropsStory(allowedSubTabsFrameProps).args,

diff --git a/packages/components/src/components/Tabs/Tabs.stories.tsx b/packages/components/src/components/Tabs/Tabs.stories.tsx
@@ -92,7 +92,7 @@ const TabsApp = (props: Partial<TabsProps>) => {
     );
 };
 
-export const Tabs: StoryObj = {
+export const Tabs: StoryObj<typeof TabsComponent> = {
     render: props => <TabsApp {...props} />,
     args: {
         hasBorder: true,

diff --git a/packages/components/src/components/buttons/Button/Button.stories.tsx b/packages/components/src/components/buttons/Button/Button.stories.tsx
@@ -76,12 +76,13 @@ export const Button: StoryObj<ButtonProps> = {
             },
         },
         icon: {
-            options: {
-                'No icon': null,
-                ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
-            },
+            options: [null, ...variables.ICONS],
             control: {
                 type: 'select',
+                labels: {
+                    'No icon': null,
+                    ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
+                },
             },
         },
         iconSize: {

diff --git a/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx b/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx
@@ -27,12 +27,13 @@ export const TextButton: StoryObj<TextButtonProps> = {
             },
         },
         icon: {
-            options: {
-                'No icon': null,
-                ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
-            },
+            options: [null, ...variables.ICONS],
             control: {
                 type: 'select',
+                labels: {
+                    'No icon': null,
+                    ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
+                },
             },
         },
         iconAlignment: {

diff --git a/packages/components/src/components/form/FormCell/FormCell.stories.tsx b/packages/components/src/components/form/FormCell/FormCell.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const FormCell: StoryObj = {
+export const FormCell: StoryObj<typeof FormCellComponent> = {
     render: props => (
         <FormCellComponent {...props}>
             <SkeletonRectangle width="100%" height={40} />

diff --git a/packages/components/src/components/form/Range/Range.stories.tsx b/packages/components/src/components/form/Range/Range.stories.tsx
@@ -47,7 +47,7 @@ export const Range: StoryObj<RangeProps> = {
         },
         labels: {
             control: {
-                type: 'array',
+                type: 'object',
             },
             table: {
                 type: {

diff --git a/packages/components/src/components/form/Range/RangeSegment.stories.tsx b/packages/components/src/components/form/Range/RangeSegment.stories.tsx
@@ -46,7 +46,7 @@ export const RangeSegment: StoryObj<RangeProps> = {
         },
         labels: {
             control: {
-                type: 'array',
+                type: 'object',
             },
             table: {
                 type: {

diff --git a/packages/components/src/components/form/SelectBar/SelectBar.stories.tsx b/packages/components/src/components/form/SelectBar/SelectBar.stories.tsx
@@ -34,7 +34,7 @@ const meta: Meta<typeof SelectBarComponent> = {
         },
         options: {
             control: {
-                type: 'array',
+                type: 'object',
             },
             table: {
                 type: {
@@ -43,8 +43,13 @@ const meta: Meta<typeof SelectBarComponent> = {
             },
         },
         selectedOption: {
+            options: Object.values(options).map(({ value }) => value),
             control: {
-                type: 'text',
+                type: 'select',
+                labels: options.reduce(
+                    (acc, option) => ({ ...acc, [option.value]: option.label }),
+                    {},
+                ),
             },
         },
         isDisabled: {
@@ -74,6 +79,13 @@ export const SelectBar: StoryObj<typeof SelectBarComponent> = {
         const [_, updateArgs] = useArgs<SelectBarProps<string>>();
         const setOption = (selectedOption: string) => updateArgs({ selectedOption });
 
-        return <SelectBarComponent {...args} onChange={setOption} options={options} />;
+        return (
+            <SelectBarComponent
+                {...args}
+                onChange={setOption}
+                options={options}
+                selectedOption={args.selectedOption as string | undefined}
+            />
+        );
     },
 };
diff --git a/packages/components/src/components/modals/DialogModal/DialogModal.stories.tsx b/packages/components/src/components/modals/DialogModal/DialogModal.stories.tsx
@@ -40,13 +40,19 @@ export const DialogModal: StoryObj<DialogModalProps> = {
             control: 'text',
         },
         bottomBarComponents: {
-            control: 'none',
+            control: {
+                type: undefined,
+            },
         },
         className: {
-            control: 'none',
+            control: {
+                type: undefined,
+            },
         },
         'data-testid': {
-            control: 'none',
+            control: {
+                type: undefined,
+            },
         },
         icon: {
             options: variables.ICONS,

diff --git a/packages/components/src/components/modals/Modal/Modal.stories.tsx b/packages/components/src/components/modals/Modal/Modal.stories.tsx
@@ -79,10 +79,14 @@ export const Modal: StoryObj<ModalProps> = {
             },
         },
         className: {
-            control: 'none',
+            control: {
+                type: undefined,
+            },
         },
         'data-testid': {
-            control: 'none',
+            control: {
+                type: undefined,
+            },
         },
     },
 };
diff --git a/packages/components/src/components/typography/Heading/Heading.stories.tsx b/packages/components/src/components/typography/Heading/Heading.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Heading: StoryObj = {
+export const Heading: StoryObj<typeof H1> = {
     render: props => (
         <Wrapper>
             <H1 {...props}>This is heading 1</H1>

diff --git a/packages/components/src/components/typography/Text/Text.stories.tsx b/packages/components/src/components/typography/Text/Text.stories.tsx
@@ -25,6 +25,7 @@ const meta: Meta = {
 export default meta;
 
 export const Text: StoryObj = {
+    // @ts-expect-error: the type of Textcomponent is union of objects and hence hard to fullfill
     render: props => (
         <Wrapper>
             <ColoredBlock>

diff --git a/packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx b/packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.stories.tsx
@@ -22,9 +22,10 @@ export const RotateDeviceImage: StoryObj<RotateDeviceImageProps> = {
     },
     argTypes: {
         deviceModel: {
-            options: DeviceModelInternal,
+            options: Object.values(DeviceModelInternal),
             control: {
                 type: 'select',
+                labels: DeviceModelInternal,
             },
         },
         deviceColor: {