Начало работы со сборником рассказов в React

Вы когда-нибудь пытались разместить все свои компоненты пользовательского интерфейса в одном месте в React?

Если вы новичок в мире React, вы, вероятно, не будете.

Что это значит?

См. примеры react-pretty-dnd.

То, что вы видели в примерах, называется историями. И инструмент, используемый для создания историй, называется Storybook.

Теперь вы понимаете, о чем мы будем говорить в этой статье. Без промедления приступим к расследованию.

Что такое сборник рассказов?

Storybook — это изолированная среда разработки пользовательского интерфейса, которая предоставляет игровую площадку для ваших компонентов. Мы можем играть с нашими компонентами по-разному, не запуская основное приложение. Мы можем запустить сборник рассказов в его порту с настройкой.

Это не ограничивается React. Мы можем использовать сборник рассказов с большинством интерфейсных фреймворков, таких как Vue, Angular, Mithril, Marko, Svelte и т. д.,

Подробнее о сборнике рассказов можно узнать здесь.

Что это за история?

История определяет отображаемое состояние вашего компонента. Если мы возьмем общий компонент, мы можем использовать его по-разному с реквизитами. Мы можем написать историю для каждой из этих стран.

Допустим, у нас есть компонент кнопки.

Кнопка может находиться в разных состояниях, таких как отключено, загружается, основное, дополнительное, маленькое, большое, среднее и т. д. Если мы перечислим все состояния, будет очень сложно продвигаться по учебнику. Я думаю, вы понимаете. Вы получите больше, когда начнете работать со сборником рассказов.

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

Настройка сборника рассказов в проекте

Мы поместим сборник рассказов в ответный проект.

Вот так.

• Создайте проект реакции с помощью следующей команды. Вы можете назвать это как хотите.

npx create-react-app storybook-demo

• Теперь установите сборник рассказов в свой проект, используя следующую команду.

npx sb init

Мы закончили настройку сборника рассказов.

Storybook предоставляет нам выделенный сервер.

Как начать?

Storybook автоматически добавляет команду в наш файл сценария. Вы можете проверить это в файле package.json в разделе скриптов. А пока запустите следующую команду, чтобы запустить сервер сборника рассказов.

npm run storybook

Storybook запустит новый сервер с портом, указанным в разделе сценариев файла package.json. Он автоматически откроет сборник рассказов в нашем браузере по умолчанию (так же, как сервер реагирования).

В нем вы увидите разные истории по умолчанию. Вы можете удалить их, если они вам не нужны, или сохранить их для справки. Как мы обсуждали в предыдущем разделе, у кнопки может быть несколько состояний, вы можете увидеть их в сборнике рассказов (упомянуты не все состояния). Мы напишем большой набор историй для кнопки в последней части этого урока.

Исследуйте различные части сборника рассказов и ознакомьтесь с различными разделами. Мы рассмотрим некоторые из них в учебнике.

Давайте напишем нашу первую историю.

Тестирование сборника рассказов

Мы видели сборник рассказов в действии и несколько примеров в нем.

• Создайте папку с именем Button внутри папки src.
• Создайте файлы с именами Button.jsk, Button.css и Constants.js.
• Поместите соответствующий код из приведенных ниже фрагментов в файлы.

Кнопка.jsk

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Button.css";

import { buttonTypes, buttonVariants, buttonSizes } from "./constants";

class Button extends Component {
    static defaultProps = {
        isDisabled: false,
        type: "filled",
        variant: "oval",
        size: "medium",
        backgroundColor: "#1ea7fd",
        textColor: "#ffffff",
    };

    static buttonTypes = buttonTypes;
    static buttonVariants = buttonVariants;
    static buttonSizes = buttonSizes;

    renderButton = () => {
        const {
            text,
            isDisabled,
            type,
            variant,
            size,
            backgroundColor,
            textColor,
            onClick,
        } = this.props;
        return (
            
                {text}
            
        );
    };

    render() {
        return this.renderButton();
    }
}

Button.propTypes = {
    text: PropTypes.string,
    isDisabled: PropTypes.bool,
    type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
    variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
    size: PropTypes.oneOf([
        buttonSizes.small,
        buttonSizes.medium,
        buttonSizes.large,
    ]),
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    onClick: PropTypes.func,
};

export { Button };

Кнопка.css

.default {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.default:focus {
    outline: none;
}

.disabled {
    opacity: 0.75; 
    cursor: not-allowed;
}
.small {
    font-size: 12px;
    padding: 4px 8px;
}

.medium {
    font-size: 14px;
    padding: 8px 12px;
}

.large {
    font-size: 16px;
    padding: 12px 16px;
}

.oval {
    border-radius: 4px;
}

.rectangular {
    border-radius: 0;
}

константы.js

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

Что это за код?

Мы написали общий компонент кнопки, который можно использовать различными способами. Теперь у нас есть компонент, который может иметь разные состояния.

Давайте напишем нашу первую историю, выполнив следующие действия.

• Создайте файл с именем Button.stories.jsk
• Импортируйте React и наш компонент Button в файл.
• Теперь определите название или путь наших составных историй. Мы определим его, используя следующий код.

export default {
   title: ‘common/Button’,
}

Приведенный выше код поместит все истории из текущего файла в общий каталог /Button/.

• Экспортируйте кнопку с необходимыми реквизитами следующим образом.

export const defaultButton = () => (
     {}} />
);

Мы закончили нашу первую историю. Запустите сборник рассказов с помощью следующей команды и посмотрите результат.

npm run storybook

Со временем мы напишем больше историй, не волнуйтесь.

Насколько это полезно во фронтенд-разработке?

В чем главное преимущество использования сборника рассказов?

Допустим, мы работаем в команде из 10 человек. И нам нужно проверить общие компоненты, которые все написали для текущего рабочего проекта.

Как мы можем сделать это?

Нам нужно перейти к каждому общему компоненту, чтобы проверить их. Но это отнимает много времени и не является предпочтительным способом для нас. Вот и наша новая книга гостевых историй.

Как мы можем использовать это, чтобы преодолеть нашу проблему?

Мы можем писать истории для общих компонентов (любых компонентов пользовательского интерфейса), используя сборник рассказов. И всякий раз, когда ваш товарищ по команде хочет проверить общие компоненты других, он просто запускает сервер сборника рассказов и увидит все компоненты пользовательского интерфейса, как мы видели выше.

Мы можем сделать гораздо больше с отображаемыми компонентами в сборнике рассказов. В Storybook есть концепция Addons, которая наделяет наши истории сверхспособностями.

Допустим, нам нужно проверить отзывчивость компонентов пользовательского интерфейса в самом сборнике рассказов, мы можем использовать плагин под названием Viewport в сборнике рассказов. Мы узнаем больше о плагинах в следующих разделах.

Работа со сборником рассказов

В этом разделе мы напишем разные истории, определяющие различные состояния нашего компонента общей кнопки.

Писать рассказы не так уж и сложно. История определяет состояние компонента. Если вы видите реквизиты компонента, вы легко поймете различные варианты использования компонента.

Давайте напишем несколько историй с необязательным реквизитом.

export const largeButton = () => (
     {}} size="large" />
);
export const outlineSmallButton = () => (
     {}}
        size="small"
        type="outline"
    />
);
export const rectangularLargeButton = () => (
     {}}
        size="large"
        variant="rectangular"
    />
);


export const disabledButton = () => (
     {}} isDisabled={true} />
);


export const warningButton = () => (
     {}}
        backgroundColor="orange"
    />
);

Три истории выше определяют различные варианты использования нашего компонента Button. Теперь ваша очередь добавить несколько других кейсов для нашего общего компонента. Попробуйте добавить disabledSamllRectangularButton,hazardButton, SuccessDisabledButton и т. д.,

Я не буду предоставлять код для вышеуказанных случаев. Вы должны написать это сами, чтобы понять это. Вы можете увидеть полный код истории, который мы написали до сих пор.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
};

export const defaultButton = () => (
     {}} />
);

export const largeButton = () => (
     {}} size="large" />
);

export const outlineSmallButton = () => (
     {}}
        size="small"
        type="outline"
    />
);

export const rectangularLargeButton = () => (
     {}}
        size="large"
        variant="rectangular"
    />
);

export const disabledButton = () => (
     {}} isDisabled={true} />
);

export const warningButton = () => (
     {}}
        backgroundColor="orange"
    />
);

Теперь у вас есть полный контроль над написанием историй для компонента.

Давайте перейдем к следующему разделу, где мы узнаем о плагинах и о том, как они подпитывают наши истории.

Дополнения сборника рассказов

По умолчанию у нас будет больше доступных плагинов. В разделе мы рассмотрим самые полезные плагины для нашей разработки.

Давайте усилим наши истории с кнопками.

Элементы управления

Элементы управления добавляют функциональные возможности для предоставления настраиваемых реквизитов компонентам в самой книге рассказов. Для нашего компонента кнопки мы можем добавить элементы управления для изменения различных реквизитов сборника рассказов.

Допустим, нам нужно найти лучший цвет для фона кнопки. Это займет много времени, если мы протестируем его, чтобы проверить цвет фона, задавая один компонент за раз. Вместо этого мы можем добавить элемент управления, который позволяет нам выбирать другой цвет в сборнике рассказов. Мы можем проверить цвет фона в самом сборнике рассказов.

Давайте посмотрим, как добавить элементы управления в наши истории с кнопками.

Во-первых, нам нужно определить все реквизиты под заголовком следующим образом.

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

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

export const outlineSmallButton = (args) => (
     {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

Вы можете увидеть элементы управления в нижней части окна предварительного просмотра компонента.

Вы можете увидеть вкладку Controls в нижней части окна предварительного просмотра компонента. Поиграйте с этим.

Обновите все истории, как указано выше. Это все больше и больше похоже на знание синтаксиса плагинов сборника рассказов. В argTypes мы использовали разные типы элементов управления. Вы можете найти все элементы управления, которые присутствуют в сборнике рассказов здесь.

Обновленные истории кнопок будут выглядеть так.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

export const defaultButton = (args) =>  {}} />;
defaultButton.args = {
    text: "Default Button",
};

export const largeButton = (args) => (
     {}} size="large" />
);
largeButton.args = {
    text: "Large Button",
};

export const outlineSmallButton = (args) => (
     {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

export const rectangularLargeButton = (args) => (
     {}} />
);
rectangularLargeButton.args = {
    text: "Rectangular Large Button",
    size: "large",
    variant: "rectangular",
};

export const disabledButton = (args) =>  {}} />;
disabledButton.args = {
    text: "Disabled Button",
    isDisabled: true,
};

export const warningButton = (args) =>  {}} />;
warningButton.args = {
    text: "Warning Button",
    backgroundColor: "orange",
};

Действия

Действия — это события в JavaScript. Мы можем нажать кнопку, которая является событием в JavaScript. Мы можем выполнить некоторые действия, нажав кнопку с помощью плагина действий.

С помощью действий мы можем проверить, работают ли события должным образом или нет. Неактивная кнопка не может быть нажата, а активная кнопка должна быть нажата. Мы можем обеспечить это действиями.

Давайте посмотрим, как добавить действие нажатия кнопки.

Ранее мы предоставили анонимную функцию свойствам onClick. Теперь нам нужно обновить его.

• Импортируйте действие из плагина сборника рассказов, используя следующую инструкцию.

import { action } from "@storybook/addon-actions";

• Замените все () => {} следующим утверждением.

action("Button is clicked!")

Теперь перейдите к сборнику рассказов и нажмите кнопку. Вы увидите сообщение, напечатанное на вкладке действий рядом с вкладкой элементов управления. Сообщение не будет напечатано, если вы нажмете отключенную кнопку, потому что она отключена.

Мы можем использовать действие для различных событий, таких как onChange, onMouseOver, onMouseOut и т. д., чтобы убедиться, что они работают правильно. Попробуйте реализовать то же самое для onChange для элемента ввода.

См. документацию по действиям здесь.

Фон

Мы можем изменить фон окна предварительного просмотра, используя фоновый плагин. Нам не нужно писать код. Просто измените это в сборнике рассказов. Вы можете увидеть гифку ниже.

Область просмотра

Мы также можем проверить отзывчивость наших компонентов сборника рассказов. Посмотрите гифку ниже, чтобы узнать больше об опциях окна просмотра.

Документы

Мы можем документировать компоненты нашего сборника рассказов с помощью плагина docs. Полезнее, когда мы работаем в команде. Они будут читать компонент и понимать его напрямую. Это экономит много времени для разработчиков.

В окне предварительного просмотра компонента сборника рассказов вы можете увидеть «Документы» в правом верхнем углу на вкладке «Холст». Он будет содержать все документы всех составных историй. Нам нужно использовать Button.stories.mdk, если мы хотим задокументировать компонент, который включает как уценку, так и рендеринг компонента. Мы просто пишем дополнительный код, чтобы уменьшить ценность внутри него вместе с историями компонентов.

Мы пишем документ для наших историй. Код включает в себя компоненты декрементации и рендеринга. Это всего лишь изучение синтаксиса. Вы поймете это с первого взгляда.

Давайте посмотрим код документа Button.stories.mdk.

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';



# Button Documentation

With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.



export const Template = (args) => 

## Default Button
We can write the documentation related to the Default Button

    {Template.bind({})}
   

## Large Button
We are writing sample docs for two stories, you can write rest of them

        {Template.bind({})}
    

Узнайте больше о компонентах документации здесь.

Вы можете узнать больше о плагинах здесь.

Заключение

Надеюсь, вам понравилось руководство и вы узнали о сборнике рассказов. И эффективно используйте его в своей команде, чтобы сделать вашу работу продуктивной.

Новичок в Реагировании? Ознакомьтесь с этими учебными ресурсами.

Удачного кодирования ?