Skip to content

Latest commit

 

History

History

storybook

README.md

FeaturesFlagsDecorator

Описание декоратора FeaturesFlagsDecorator

Используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор позволяет устанавливать фича флаги (features) для компонентов, что позволяет изменять их поведение и внешний вид.

Как работает декоратор:

  1. Декоратор принимает объект FeatureFlags, который содержит информацию о состоянии фича флагов приложения.

  2. С помощью функции setFeatureFlags из библиотеки 'shared/lib/features', декоратор устанавливает переданные фича флаги.

  3. Затем, декоратор оборачивает компонент StoryComponent, представляющий простую историю, и возвращает его.

  4. После установки фича флагов, компонент StoryComponent будет использовать определенные флаги для изменения своего поведения и отображения.

NewDesignDecorator

Описание декоратора NewDesignDecorator

Данный код представляет собой декоратор NewDesignDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор позволяет применить новый дизайн (new design) к компонентам, чтобы визуально оценить их внешний вид и совместимость с новым дизайном.

Как работает декоратор:

  1. Декоратор принимает компонент StoryComponent, представляющий простую историю (story).

  2. С помощью функции getAllFeatureFlags из библиотеки 'shared/types/featureFlags', декоратор получает все фича-флаги приложения.

  3. Затем, с помощью функции setFeatureFlags из библиотеки 'shared/lib/features', декоратор устанавливает флаг isAppRedesigned в значение true, что обозначает применение нового дизайна.

  4. После установки флага isAppRedesigned, декоратор оборачивает компонент StoryComponent в <div> с классом 'app_redesigned', чтобы применить стили нового дизайна.

  5. Новый дизайн применяется к компонентам внутри StoryComponent, позволяя оценить их визуальное взаимодействие с новым дизайном.

RouterDecorator

Описание декоратора RouterDecorator

Данный код представляет собой декоратор RouterDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор позволяет применить компонент BrowserRouter из библиотеки 'react-router-dom' к истории (story) компонентов.

Как работает декоратор:

  1. Декоратор принимает компонент StoryComponent, представляющий простую историю (story) компонента.

  2. Декоратор оборачивает StoryComponent в компонент BrowserRouter, предоставляемый библиотекой 'react-router-dom'. Этот компонент обеспечивает маршрутизацию и управление историей браузера для приложения, что позволяет компонентам работать с маршрутами и переходами между страницами.

  3. В результате, компонент StoryComponent и все его вложенные компоненты будут иметь доступ к функциональности маршрутизации, предоставляемой BrowserRouter.

StoreDecorator

Описание декоратора StoreDecorator

Данный код представляет собой декоратор StoreDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор позволяет обернуть компоненты с использованием контекста хранилища состояния (store).

Как работает декоратор:

  1. Декоратор принимает два параметра:

    • state: объект с глубокими частичными данными состояния, которые будут использоваться в хранилище. Этот параметр позволяет предопределить начальное состояние для хранилища.
    • asyncReducers: объект, содержащий асинхронные редьюсеры, которые будут добавлены в хранилище. Этот параметр предоставляет возможность добавить дополнительные редьюсеры к хранилищу для поддержки асинхронных операций.

  2. Внутри декоратора определен defaultAsyncReducers, который содержит список редьюсеров по умолчанию. Эти редьюсеры представляют различные части состояния приложения, такие как loginForm, profile, articleDetails и т.д.

  3. Декоратор оборачивает StoryComponent в компонент StoreProvider, который предоставляет хранилище состояния и обеспечивает его доступность во всем дереве компонентов. В StoreProvider передается начальное состояние initialState, которое было задано через параметр state. Также, к asyncReducers добавляются редьюсеры из defaultAsyncReducers и переданные через параметр asyncReducers.

  4. В результате, компонент StoryComponent и все его вложенные компоненты будут иметь доступ к хранилищу состояния, что позволит управлять состоянием приложения и проверять его поведение в различных сценариях.

Таким образом, декоратор StoreDecorator обеспечивает интеграцию хранилища состояния в компоненты, что позволяет быстро проверить их работу с данными и обеспечивает корректное функционирование приложения в контексте управления состоянием

StyleDecorator

Описание декоратора StyleDecorator

Данный код представляет собой декоратор StyleDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор предназначен для добавления стилей к компонентам при просмотре и тестировании их в Storybook.

Как работает декоратор:

  1. Внутри декоратора импортируется файл стилей index.scss из директории app/styles. Это позволяет применить общие стили или глобальные настройки для всех компонентов, которые будут отображаться в Storybook.

  2. Декоратор принимает параметр story, который является функцией, возвращающей компонент Story. Story - это специальный компонент Storybook, который представляет отдельный сценарий (историю) для компонента.

  3. Внутри декоратора возвращается вызов функции story(). Это означает, что компонент Story, переданный в декоратор, будет отображаться в Storybook без изменений.

  4. В результате, когда компонент будет отображаться в Storybook, к нему автоматически применятся стили из файла index.scss, что обеспечит единый и стилизованный вид для всех компонентов, что упростит и улучшит их визуальное представление при разработке и тестировании.

Таким образом, декоратор StyleDecorator позволяет добавить общие стили к компонентам в Storybook, что способствует унификации внешнего вида и обеспечивает более удобную и продуктивную разработку интерфейса веб-приложения.

SuspenseDecorator

Описание декоратора SuspenseDecorator

Данный код представляет собой декоратор SuspenseDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор предназначен для обработки ленивой загрузки компонентов при их просмотре и тестировании в Storybook.

Как работает декоратор:

  1. Внутри декоратора импортируется компонент Suspense из библиотеки React. Suspense - это компонент, который позволяет обрабатывать ленивую загрузку компонентов, используя механизм React.lazy и React.Suspense.

  2. Декоратор принимает параметр StoryComponent, который является компонентом Story из Storybook. Story - это специальный компонент, который представляет отдельный сценарий (историю) для компонента.

  3. Внутри декоратора оборачивается компонент StoryComponent в компонент Suspense. Таким образом, все компоненты, которые будут отображаться в Storybook с помощью этого декоратора, будут проходить ленивую загрузку, если они были реализованы с помощью React.lazy и React.Suspense.

  4. В результате, когда компонент будет отображаться в Storybook, декоратор SuspenseDecorator автоматически обрабатывает ленивую загрузку компонентов, что позволяет оптимизировать производительность приложения и улучшить пользовательский опыт.

Таким образом, декоратор SuspenseDecorator упрощает работу с ленивой загрузкой компонентов в Storybook, что способствует более эффективной разработке и тестированию приложения.

ThemeDecorator

Описание декоратора ThemeDecorator

Данный код представляет собой декоратор ThemeDecorator, который используется в контексте Storybook - инструмента для разработки и документирования компонентов React. Декоратор предназначен для установки темы (стилей) для компонентов при их просмотре и тестировании в Storybook.

Как работает декоратор:

  1. Внутри декоратора импортируется компонент ThemeProvider из файла @/app/providers/ThemeProvider. ThemeProvider - это компонент, предоставляемый провайдером тем, который позволяет устанавливать тему (стили) для всех вложенных компонентов.

  2. Также импортируется тип Theme из файла @/shared/const/theme, который представляет различные темы (стили) для приложения.

  3. Декоратор принимает параметр theme, который определяет тему (стили) для компонентов в Storybook.

  4. Декоратор принимает также параметр StoryComponent, который является компонентом Story из Storybook. Story - это специальный компонент, который представляет отдельный сценарий (историю) для компонента.

  5. Внутри декоратора компонент StoryComponent оборачивается в ThemeProvider. Это позволяет установить определенную тему (стили) для всех вложенных компонентов.

  6. Внутри ThemeProvider устанавливается тема (стили) с помощью initialTheme={theme}, где theme - переданный параметр декоратора.

  7. Декоратор также добавляет класс app с именем темы в обернутый контейнер <div>, чтобы установить соответствующие стили для компонентов с использованием этой темы.

Таким образом, декоратор ThemeDecorator позволяет быстро и удобно устанавливать тему (стили) для компонентов в Storybook, что помогает разработчикам визуально оценить внешний вид компонентов при разных темах и оптимизировать процесс тестирования стилей.