Conditional props | Storybook | Page 1

Hey guys,

I'm having an issue with the types of conditional props.
So, I have the following props:

export type Props = {
  content?: (ReactElement | string) | (ReactElement | string)[] | undefined;
  className?: string;
} & ({ label: string; icon?: never } | { label?: never; icon: IconPathProps });

And in the story, it looks like this:

const ComponentStory: StoryFn<Props> = ({ label, content, icon, className }: Props) => {
  if (icon) {
    return <Component content={content} className={className} icon={icon} />;
  }

  return <Component content={content} label={label} className={className} />;
};

type StoryType = typeof ComponentStory;

type Story = StoryObj<StoryType>;

export const BoundStory: Story = {
  name: 'Component',
};

const meta: Meta<StoryType> = {
  title: 'Atoms/Component',
  component: ComponentStory,
  argTypes: {
    className: {
      control: 'text',
    },
    content: {
      control: 'text',
    },
    icon: {
      control: 'select',
      options: keys(icons), mapping: icons,
    },
    label: {
      control: 'text',
    },
  },
  args: {
    label: 'More info',
    content: [
      "content"
    ],
    className: undefined,
    icon: undefined,
  },
};

export default meta;

However, it's giving me a type error:

Type '{ content?: string | ReactElement<any, string | JSXElementConstructor<any>> | (string | ReactElement<any, string | JSXElementConstructor<any>>)[] | undefined; className?: string | undefined; } & { ...; }' is not assignable to type '{ label: string; icon?: undefined; }'.
                  Types of property 'label' are incompatible.
                    Type 'undefined' is not assignable to type 'string'.

38 const meta: Meta<StoryType> = {

I'm not sure how to work around this error. Any ideas?

#Conditional props