Как добавить декоратор в storybook?

В общем у меня есть проект со storybook'ом мне нужно добавить декоратор для глобальных переменых стилей(например color:var(--primary-color);) как мне это сделать
вот файл priview.ts
import type { Preview } from '@storybook/react'

import { styleDecorator } from '../../src/shared/config/storybook/styleDecorator/styleDecorator'

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
     <b>//вот тут должен быть декоратор</b>
    decorators: [(Story) => (
        Story(styleDecorator)
    )],
}
export default preview

вот файл Button.stories.ts
import type { Meta, StoryObj } from '@storybook/react'
import { Button, ThemeButton } from 'shared/ui/Button/ui/Button'
import 'app/styles/index.scss' - <b>тут тоже почему то не работают глобальные стили хотя должны</b>

const meta: Meta<typeof Button> = {
    title: 'shared/Button',
    component: Button,
    argTypes: {
        backgroundColor: { control: 'color' },
    },
}

export default meta
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
    args: {
        children: 'text',
    },
}

export const Clear: Story = {
    args: {
        children: 'text',
        theme: ThemeButton.CLEAR,
    },
}
export const Outline: Story = {
    args: {
        children: 'text',
        theme: ThemeButton.OUTLINE,
    },
}

вот файл styleDecorator
import 'app/styles/index.scss'
import { Story } from '@storybook/react'

export const styleDecorator = (story: () => Story) => story

и также есть специальная настройка вебпака для storybook'a
Заранее спасибо
  • Вопрос задан
  • 327 просмотров
Пригласить эксперта
Ответы на вопрос 3
lookreciuspin
@lookreciuspin
Data recovery and truth revelation hacker
В Storybook декораторы - это способ обеспечения произвольных компонентов-оберток для историй. Они могут быть использованы для обертывания историй в "декораторы" (то есть контекст компонента), предоставления данных и создания или изменения поведения каким-то образом.

Из предоставленного файла preview.ts видно, что были попытки использовать декоратор (styleDecorator). Однако использование, похоже, неверное.

Вот исправленный способ использования декоратора:
import type { Preview } from '@storybook/react';
import { styleDecorator } from '../../src/shared/config/storybook/styleDecorator/styleDecorator';

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },

    decorators: [(Story) => (
        <styleDecorator>
            <Story />
        </styleDecorator>
    )],
}
export default preview;

В этой исправленной версии Story отображается как дочерний элемент styleDecorator, предполагая, что styleDecorator - это компонент React, который применяет желаемые стили.

Если styleDecorator - это функция, которая возвращает компонент React, код будет выглядеть так:
decorators: [(Story) => {
    const DecoratorComponent = styleDecorator();
    return <DecoratorComponent><Story /></DecoratorComponent>
}],


Убедись, что styleDecorator правильно определён и экспортирован из указанного пути файла.

Помните, что декоратор, определенный в preview.ts, будет применен ко всем историям в вашем Storybook. Если вы хотите применить декоратор к определенным историям, вы должны определить его в конкретном файле истории.

Не забудь заменить styleDecorator на реальную реализацию вашего декоратора. styleDecorator должен предоставлять глобальные стили, которые хочешь применить
Ответ написан
import { Decorator } from '@storybook/react';

const StyleDecorator: Decorator = (Story) => '';
коммент на этой строке почему обрезается, после => возвращаешь компонент Story

export default StyleDecorator;
Ответ написан
@denis88k
StyleDecorator.ts
import { Decorator } from '@storybook/react';
import '../../../../app/styles/index.scss';

export const StyleDecorator: Decorator = Story => Story();

============
previews.ts
import type { Preview } from '@storybook/react';
import { StyleDecorator } from '../../src/shared/config/storybook/StyleDecorator/StyleDecorator';

const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
decorators: [StyleDecorator],
};
export default preview;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы