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

Question

[holfizz]

В общем у меня есть проект со 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
Заранее спасибо

Answer 1

[Марина Марковская]

import { Decorator } from '@storybook/react';

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

export default StyleDecorator;

Comments

[holfizz]

Извините а дальше что. Я просто вообще не понимаю я даже в сам файл Button.stories.tsx привязываю файл index.scss и так тоже не получается использовать переменные

[Марина Марковская]

holfizz, в файле preview подключить написанный декоратор
decorators:[StyleDecorator]

[holfizz]

Марина Марковская, Еще раз извиняюсь но каких уроков?

Answer 2

[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;

Answer 3

[Br0k3n C1rcu1t]

В 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 должен предоставлять глобальные стили, которые хочешь применить

Comments

[holfizz]

Привет спасибо большое что так расписал, но я все ровно не понимаю почему не работает styleDecorator не является реакт фрагментом я переделал функцию для теста вот так

import 'app/styles/index.scss'

export const StyleDecorator = (story: () => any) => <div>{story()}</div>

тоже не помогает. Если не сложно ответь пожалуйста

вот ошибки

TS2322: Type '{ children: Element; }' is not assignable to type '() => any'.   Type '{ children: Element; }' provides no match for the signature '(): any'.

TS2604: JSX element type 'DecoratorComponent' does not have any construct or call signatures

и многие другие

[hint000]

Кое-кто спамит ответами, сгенерироваными ChatGPT

[holfizz]

hint000, да я понял что так быстро не ответил бы он:)