Stories for multiple component

[jude98]

Summary

Hi,

I’m currently working on a Storybook setup for my project, and I’m trying to use a story as a JSX element within another story. However, I’m encountering an error, and I’m not sure how to resolve it. Here are the details:

I’m defining a FormHandler component and creating a Storybook story for it. In one of the stories, I want to use another story (Disabled) as a JSX element within the inputField prop. However, I get the following errors:

JSX element type 'Disabled' does not have any construct or call signatures

'Disabled' cannot be used as a JSX component. Its type 'StoryAnnotations<ReactRenderer, MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, As>>' is not a valid JSX element type.

Additional information

Storybook version: v8.1
Project setup: React + Vite + Typescript
I was following the docs: stories for multiple components

Here is my story for the component:

import { Meta, StoryObj } from '@storybook/react';
import { FormHandler } from './FormHandler';
import { Disabled } from './Input.stories'; // Importing the story

const meta: Meta<typeof FormHandler> = {
  title: 'Components/FormHandler',
  component: FormHandler,
};

export default meta;

type Story = StoryObj<typeof FormHandler>;

export const Default: Story = {
  args: {
    inputField: <Disabled {...Disabled.args} />, // Using the story here
    label: 'Token Name',
  },
  render: (args) => <FormHandler {...args} />,
};

Here is my Disabled Story:

export const Disabled: Story = {
  args: {
    disabled: true,
    placeholder: 'Enter text...',
  },
  render: (args) => <Input {...args} />,
};

Prop type for my component:

interface FormHandlerProps {
  inputField: React.ReactNode;
  label: string;
}

Create a reproduction

No response

[dannyhw]

This seems unintentional

inputField: <Disabled {...Disabled.args} />,

you probably want to put <Input {...Disabled.args} />

[jude98]

Oh okay got it. So I was try with the documentation:
https://storybook.js.org/docs/writing-stories/stories-for-multiple-components

May I ask you that the as Input comes as a subcomponent to the FormHandler, and can I pass the Input as a subcomponent here?
Just trying out the subcomponents feature here

[dannyhw]

I see, yeah I don't have a lot of experience using that, seems like there are some caveats with using children.

Side note: You also don't need to always define a render function, the default render function already does what you are doing

I would check this comment here

The children arg, just like all args, needs to be JSON serializable. To avoid errors with your Storybook, you should:

Avoid using empty values
Use mapping if you want to adjust the value with controls
Use caution with components that include third party libraries
ℹ️
We're currently working on improving the overall experience for the children arg and allow you to edit children arg in a control and allow you to use other types of components in the near future. But for now you need to factor in this caveat when you're implementing your stories.