Պատմագիրք React — Decorators-ի համար

Storybook-ը թույլ է տալիս հեշտությամբ նախատիպել բաղադրիչները տարբեր պարամետրերով:

Այս հոդվածում մենք կանդրադառնանք, թե ինչպես աշխատել դեկորատորների հետ Storybook-ով:

Դեկորատորներ

Դեկորատորը պատմություններ փաթաթելու միջոց է լրացուցիչ մատուցման ֆունկցիոնալությամբ:

Փաթեթավորեք պատմությունները լրացուցիչ նշագրման միջոցով

Մենք կարող ենք պատմությունները փաթեթավորել լրացուցիչ նշումներով դեկորատորներով:

Օրինակ՝ կարող ենք գրել.

src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';
export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [(Story) => <div style={{ margin: '20px' }}><Story /></div>]
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};
export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};
export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Մենք ունենք decorators հատկություն՝ ֆունկցիաների զանգվածով, որը ներկայացնում է բաղադրիչները մեր բաղադրիչի շուրջ:

Story-ն այն բաղադրիչն է, որը մենք ներկայացնում ենք մեր պատմության մեջ:

Ծաղրելու համատեքստ

Մենք կարող ենք գլոբալ մասշտաբով մեր բաղադրիչը փաթաթել ավելի բարձր կարգի բաղադրիչով:

Օրինակ՝ կարող ենք գրել.

.storybook/preview.js

import { ThemeProvider } from 'styled-components';
export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];

ThemeProvider HOC-ը ոճավորված բաղադրիչներից փաթաթելու համար մեր պատմությունների բաղադրիչների շուրջ:

Պատմվածքների դեկորատորներ

Մենք կարող ենք ավելացնել դեկորատորներ, որոնք հասանելի են պատմության մեջ:

Այն ավելացնելու համար մենք պարզապես ավելացնում ենք decorators հատկությունը մեր story օբյեկտին.

src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';
export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.decorators = [(Story) => <div style={{ margin: '20px' }}><Story /></div>]

դեկորատորների զանգվածին վերագրել Primary պատմվածքի decorators հատկությունը:

Բաղադրիչների դեկորատորներ

Մենք կարող ենք դեկորատորներ տեղադրել բաղադրիչի բոլոր պատմությունների վրա:

Դա անելու համար մենք decorators հատկությունը դնում ենք այն օբյեկտում, որը արտահանում ենք.

src/stories/Button.stories.js

import React from 'react';
import { Button } from './Button';
export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [(Story) => <div style={{ margin: '20px' }}><Story /></div>]
};

Գլոբալ դեկորատորներ

Մենք կարող ենք ավելացնել գլոբալ դեկորատորներ .storybook/preview.js ֆայլում՝ արտահանելով այն.

import React from 'react';
export const decorators = [(Story) => <div style={{ margin: '20px' }}><Story /></div>]

Մենք արտահանում ենք decorators զանգվածը՝ այն ամենուր կիրառելու համար:

Դեկորատորի ժառանգություն

Դեկորատորները կիրառվում են կոնկրետ հերթականությամբ:

Համաշխարհայինները կիրառվում են այն հաջորդականությամբ, որով նրանք նախապես սահմանված են:

Այնուհետև բաղադրիչների դեկորատորները կիրառվում են իրենց սահմանված կարգով:

Եվ պատմվածքների դեկորատորները կիրառվում են իրենց սահմանված կարգով:

Եզրակացություն

Դեկորատորները մեզ թույլ են տալիս լրացուցիչ նշումներ ավելացնել մեր բաղադրիչին և ներկայացնել դրանք Storybook-ում: