В этой статье блога мы рассмотрим различные методы рендеринга аргументов в Storybook 7, популярном инструменте для создания компонентов пользовательского интерфейса. Мы предоставим разговорные объяснения и примеры кода, которые помогут вам понять различные подходы. Давайте погрузимся!

1. Основное использование аргументов в Storybook:
   Чтобы отобразить аргументы в Storybook, вы можете определить их в истории компонента, используя свойство args. Вот пример:

export const MyComponent = (args) => <div>{args.text}</div>;
export const Default = MyComponent.bind({});
Default.args = {
  text: "Hello, Storybook!",
};

В этом примере MyComponentпринимает свойство text, которое отображается внутри <div>. История Defaultпривязывает компонент и устанавливает значение argsдля отображения «Hello, Storybook!».

1. Переопределение аргументов в отдельных историях.
   Вы можете переопределить аргументы в отдельных историях, чтобы продемонстрировать различные варианты вашего компонента. Вот пример:

export const CustomText = MyComponent.bind({});
CustomText.args = {
  text: "Custom Text",
};

В данном случае мы создали новую историю под названием CustomText, которая заменяет свойство textпользовательским значением.

1. Использование декораторов для общих аргументов.
   Вы можете использовать декораторы для применения общих аргументов к нескольким историям. Вот пример:

const withSharedArgs = (Story, context) => {
  const args = {
    text: "Shared Text",
  };
  return <Story {...context} args={args} />;
};
export default {
  title: "MyComponent",
  component: MyComponent,
  decorators: [withSharedArgs],
};
export const Default = () => <MyComponent />;
export const CustomText = () => <MyComponent />;

В этом примере мы создали декоратор под названием withSharedArgs, который устанавливает для свойства textзначение «Общий текст». К историям Defaultи CustomTextбудут применены общие аргументы.

1. Использование элементов управления для изменения аргументов в пользовательском интерфейсе Storybook:
   Storybook предоставляет элементы управления, которые позволяют изменять аргументы непосредственно в пользовательском интерфейсе. Вот пример:

export default {
  title: "MyComponent",
  component: MyComponent,
  argTypes: {
    text: {
      control: "text",
    },
  },
};
export const Default = (args) => <MyComponent {...args} />;
Default.args = {
  text: "Hello, Storybook!",
};

В этом примере мы добавили конфигурацию argTypes, которая определяет элемент управления типа "text"для свойства text. Это позволит вводить текст в пользовательском интерфейсе Storybook, позволяя динамически изменять значение text.

Отрисовка аргументов в Storybook 7 — это мощная функция, позволяющая демонстрировать различные варианты ваших компонентов. Мы исследовали несколько методов, включая базовое использование аргументов, переопределение аргументов в отдельных историях, использование декораторов для общих аргументов и использование элементов управления для изменения аргументов в пользовательском интерфейсе Storybook. Используя эти методы, вы можете создавать интерактивную и гибкую документацию по компонентам.