تنسيق قصة المكون 3 (CSF3) هو أحدث معيار لـ Storybook، يستخدم عمليات تصدير قائمة على الكائنات بدلاً من `storiesOf` القديم أو القوالب الوظيفية. إنه يقلل من الكود الزائد ويحسن التوافق مع أدوات الاختبار.

هل تدعم هذه الأداة TypeScript؟

نعم. يتضمن الإخراج المُنشأ واجهات TypeScript القياسية وتعريفات الأنواع لـ `Meta` و `StoryObj` لضمان سلامة النوع داخل بيئة التطوير المتكاملة (IDE) الخاصة بك.

هل يمكنني إضافة قصص متعددة في وقت واحد؟

تنشئ هذه الأداة ملفًا أساسيًا بقصة أولية. يمكنك تكرار كائن القصة يدويًا في المحرر الخاص بك لإنشاء اختلافات مثل حالات 'معطل' أو 'قيد التحميل'.

هل يتم تحميل كود مكوناتي؟

لا. يعمل المولد عن طريق أخذ البيانات الوصفية التي تقدمها وتنسيقها في سلسلة نصية؛ لا يتم تحميل أي ملفات ولا يتم إجراء أي تحليل للكود على خادم.

المنسقات والكود

منشئ قصص 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

ملاحظة المحرر

Understanding · One story per component state.

هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.

الأسئلة المتكررة

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.

يبحث الأشخاص أيضًا عن

أدوات ذات صلة

More in this room.

شاهد الكل في المنسقات والكود