Component Story Format 3 to najnowszy standard dla Storybooka, wykorzystujący eksporty oparte na obiektach, a nie starsze `storiesOf` czy szablony funkcyjne. Redukuje to boilerplate i poprawia kompatybilność z narzędziami testującymi.

Czy to narzędzie obsługuje TypeScript?

Tak. Wygenerowany wynik zawiera standardowe interfejsy TypeScript i definicje typów dla `Meta` i `StoryObj`, aby zapewnić bezpieczeństwo typów w Twoim IDE.

Czy mogę dodać wiele historii naraz?

To narzędzie generuje plik bazowy z historią "Primary". Możesz ręcznie skopiować obiekt historii w edytorze, aby tworzyć warianty, takie jak stany "Disabled" lub "Loading".

Czy mój kod komponentu jest przesyłany?

Nie. Generator działa, pobierając dostarczone metadane i formatując je w ciąg znaków; żadne pliki nie są przesyłane i żadna analiza kodu nie jest wykonywana na serwerze.

Formatowanie i Kodowanie

Generator opowieści Storybook

CSF3 .stories.tsx file from a component name and props.

Runs in your browser

ComponentDefault args (key: value, one per line)Variants (comma-separated)

Button.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  title: "Components/Button",
  args: {
  variant: 'primary',
  size: 'md',
  children: 'Click me',
  },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "ghost"] },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {};

export const Primary: Story = {
  args: { variant: "primary" },
};
export const Secondary: Story = {
  args: { variant: "secondary" },
};
export const Ghost: Story = {
  args: { variant: "ghost" },
};

lines: 31chars: 653size: 653 B

live

Notka redakcyjna

Understanding · One story per component state.

Ten szczegółowy rozdział jest obecnie dostępny tylko w języku angielskim. Narzędzie konwersji powyżej działa w Twoim języku; długi artykuł objaśniający nie został jeszcze przetłumaczony.

Często zadawane pytania

Quick answers.

›What is CSF3?

Component Story Format 3 is the latest standard for Storybook, using object-based exports rather than the older `storiesOf` or functional templates. It reduces boilerplate and improves compatibility with testing tools.

›Does this tool support TypeScript?

Yes. The generated output includes standard TypeScript interfaces and type definitions for `Meta` and `StoryObj` to ensure type safety within your IDE.

›Can I add multiple stories at once?

This tool generates a base file with a Primary story. You can manually duplicate the story object in your editor to create variations like 'Disabled' or 'Loading' states.

›Is my component code uploaded?

No. The generator works by taking the metadata you provide and formatting it into a string; no files are uploaded and no code analysis is performed on a server.

Ludzie wyszukują również

Powiązane narzędzia

More in this room.

Zobacz wszystkie w Formatowanie i Kodowanie