storyBook

Question 1

Введение storyBook

Answer 1

Storybook - это веб-мастерская по созданию компонентов пользовательского интерфейса и страниц в изоляции. Тысячи команд используют ее для разработки пользовательского интерфейса, тестирования и документирования.
Storybook документация на наш программный код.
https://storybook.js.org/docs/get-started/install
1. npx storybook@latest init
2. yarn storybook
3. Для компонента создаем stories (Accordion.stories.tsx)
4. Создаем компоненту для сторис: https://storybook.js.org/docs/writing-stories

import type { Meta } from ‘@storybook/react’;
import { Button } from ‘./Button’;

const meta: Meta<typeof> = {
component: Button,
};</typeof>

export default meta;
5. При исправлении компоненты, может ругаться const, но мы должны записать, хоть одну из историй. После “export default meta;” - записываем историю

export const CollapsedAccordion = () => {
return <Accordion titleValue={“CollapsedAccordion”}
collapsed={true}
onChange={() => {}}/>
}

6. Контроли - https://storybook.js.org/docs/essentials/controls
   После “export default meta;”
   type Story = StoryObj<typeof>;
   И также объявляем объект, у которого есть свои св-ва (ключ - значение)
   export const Primary: Story = {
   args: {
   variant: 'primary',
   },
   };</typeof>

! В аргумент запрокидываем пропсы.
Контролы позволяют менять значение.
Необязательно использовать 6 пункт.
7. Действие -используем action (создание колбэка, т.е. функция, которая возвращает другую)
https://storybook.js.org/docs/essentials/actions#action-event-handlers

// Replace your-framework with the name of your framework
import type { Meta } from ‘@storybook/your-framework’;
import { action } from ‘@storybook/addon-actions’;

import Button from ‘./Button’;

const meta: Meta<typeof> {
component: Button,
args: {
// 👇 Create an action that appears when the onClick event is fired
onClick: action('on-click'),
},
};</typeof>

export default meta;