storybookjs / react-native

📓 Storybook for React Native!
https://storybook.js.org
MIT License
996 stars 141 forks source link

Arg types are no inferred correctly for type Story = StoryObj<typeof Component> #517

Closed mljlynch closed 8 months ago

mljlynch commented 8 months ago

Describe the bug A clear and concise description of what the bug is.

To Reproduce I have the following code:

import React from 'react';
import { Alert } from 'react-native';

import { Meta, StoryObj } from '@storybook/react-native';

import CloseButton from './CloseButton';

const meta: Meta<typeof CloseButton> = {
  component: CloseButton,
};
export default meta;
type Story = StoryObj<typeof CloseButton>;

const onPress = () => Alert.alert('Close Button Pressed');
export const Default: Story = {
  render: () => <CloseButton onPress={onPress} />,
};

export const White: Story = {
  render: () => <CloseButton onPress={onPress} color="white" />,
  parameters: {
    backgroundColor: 'black',
  },
};

export const Large = {
  render: ({ size }) => <CloseButton onPress={onPress} size={size} />,
  args: {
    size: 24,
  },
} satisfies Story;

But I'm getting a type error:

Type '{ size: number; }' is not assignable to type 'Partial<FunctionComponent<CloseButtonProps>>'.
  Object literal may only specify known properties, and 'size' does not exist in type 'Partial<FunctionComponent<CloseButtonProps>>'.ts(2322)
story.d.ts(106, 5): The expected type comes from property 'args' which is declared here on type 'Story'

Expected behavior

I would expect the types to be inferred from the component prop types

Library "@storybook/react-native": "^6.5.4",

dannyhw commented 8 months ago

Hey this should be working but it might be the type. I think theres a ComponentStoryObj type, maybe thats the one.

dannyhw commented 8 months ago

Heres an example from the example in this repo. The reason that theres is a difference is that in v6.5 of storybook CSF3 was in preview and later the types were simplified for v7. When v7 rn storybook goes out then it will have the simplified types too.

import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
import { Switch } from './Boolean';

const BooleanExample: ComponentMeta<typeof Switch> = {
  title: 'ControlExamples/Boolean Control',
  component: Switch,
};

export default BooleanExample;

type BooleanStory = ComponentStoryObj<typeof Switch>;

export const Basic: BooleanStory = {};

export const On: BooleanStory = { args: { on: true } };
mljlynch commented 8 months ago

Got it - this worked thanks!