reactjs - React.ReactNode som argument i storybook

Dette er min knappkomponenttype

import React from 'react'
export type ButtonProps = {
  label: string;
  color?:'primary' | 'secondary' | 'tertiary';
  size?:'mobile' | 'tablet' | 'desktop',
  handleClick?:()=>void,
  fullWidth?:boolean,
  loading?:boolean
  href?:string,
  icon?:React.ReactNode
  target?:'_blank' | '_parent'
  disabled?:boolean
}

Jeg bruker knappkomponent i Storybook.

Storybook-kode

import React from 'react';
import { Meta, StoryObj } from "@storybook/react";
import { Button as SampleButton } from "../../components";
import 'antd/dist/reset.css';

const buttonMeta: Meta<typeof SampleButton> = {
  title: "Components/Button",
  tags: ['autodocs'],
  component: SampleButton,
};

export default buttonMeta;

type Story = StoryObj<typeof buttonMeta>;

export const Primary: Story = {
  args: {
    label: "Testing",
    icon: React.createElement('h1', null, 'Icon')
  },
};

Akkurat nå bruker jeg React.createElement for å legge til et React-element for ikon i args, men hvis jeg bruker enkel tag av hvilken som helst HTML, får jeg en feil som sier at navnet {tag} ikke kan finnes.

Finnes det en måte å legge til HTML-tagger eller React-komponent/element til args i Storybook? I min neste komponent vil det være en betingelse der jeg må legge til et skjema som et child i args, og på denne måten (React.createElement) vil det bli veldig vanskelig.

Finnes det noen løsning eller en måte å fikse dette på.

For referanse

Storybook Hoved.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
  // ["../src/stories/**/*.stories.@(js|jsx|ts|tsx)"]
  stories: ["../src/stories/**/*.mdx", "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
    '@storybook/addon-docs'
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
      
    },
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["..\\public"],
};
export default config;

Feil

Svar #1

Du kan endre filnavn fra Button.stories.ts til Button.stories.tsx

Relaterte artikler