Storybook – это библиотека UI, которую можно использовать для документирования компонентов. Также она позволяет упорядочивать и собирать компоненты JavaScript. В этой статье вы узнаете, как создать интерактивный компонент пользовательского интерфейса с помощью React и Storybook. В конце руководства мы развернем Storybook как отдельное приложение.
Читайте также: Сборка компонентов JavaScript в Storybook
Итак, сегодня вы узнаете:
- Как создать проект React
- Как добавить storybook/react в зависимости проекта.
- Как создать библиотеку компонентов пользовательского интерфейса с помощью Storybook.
- Как настроить темы.
- И развернуть Storybook как статический сайт.
1: Установка пакетов
Для начала нам нужно создать новый проект React, и для этого мы будем использовать приложение create-react-app – это отличный инструмент для создания скелета приложения React.
npx create-react-app storybook-app
cd storybook-app
Следующим шагом будет установка пакета storybook в проект:
npx -p @storybook/cli sb init
Эта команда может автоматически определить используемый нами фреймворк из файла package.json и установить его версию из storybook. После выполнения обеих команд нужно подтвердить, что зависимости storybook-react установлены. Давайте перейдем к файлу package.json, чтобы увидеть, установлены ли пакеты, а затем запустим приложение и storybook.
npm start
npm run storybook
После выполнения этих команд приложения React и Storybook будут работать на разных портах.
2: Добавление историй в приложение React
Теперь, когда мы закончили с базовой настройкой, мы можем создавать компоненты с помощью Storybook. Вы должны настроить Storybook, если вы выполнили предыдущий раздел; если же вы установили пакет storybook/react в уже существующий проект react, вам нужно будет выполнить этот раздел, чтобы настроить storybook. Так или иначе, сначала нужно создать папку .storybook в корневом каталоге проекта React, а затем – создать в этой папке файл config.js и добавить следующие строки:
import { configure } from '@storybook/react';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
Приведенный выше блок кода представляет собой конфигурацию для Storybook. Она помогает Storybook найти истории в каталоге src/stories. Создайте эту папку, если она еще не существует. В папке src создайте папку stories – именно здесь в конечном итоге будут расположены все компоненты, для которых мы будем создавать истории. В этом руководстве мы создадим компонент Button, и для него мы будем документировать истории в папке stories. Создайте компонент Button в каталоге компонентов с помощью следующих строк:
import React from 'react';
import './Button.css';
const Button = props => (
<button onClick={props.onClick} style={props.style}>
{props.label && <span>{props.label}</span>}
</button>
)
export default Button;
Теперь мы можем добавить историю для созданной кнопки. В каталоге stories создайте файл и назовите его buttonStories.js, а затем добавьте в него такой код:
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';
storiesOf('Button', module)
.add('with primary', () => <Button label="Primary Button" />)
.add('with outline', () => <Button
label="Ouline Button"
style={{ background: 'transparent', border: '3px solid #fecd43' }}
/>)
.add('with rounder corners', () => <Button
label="Rounded Button"
style={{ borderRadius: '15px' }}
/>)
.add('disabled', () => <Button disabled
label="Disabled Button"
style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
/>)
После этого создайте файл index.js, который будет служить базовым файлом для хранения всех историй. Позже мы сможем импортировать все в этот файл. Пока что импортируйте файл buttonStories.js (затем каждый новый файл, созданный в каталоге stories, мы будем импортировать в этот файл).
import './buttonStories';
3: Установка расширений
Аддоны Storybook помогают внедрить дополнительные функции, чтобы сделать приложение более полезным и интерактивным. В этой статье к уже созданным историям мы добавим аддон Action. Actions можно использовать для отображения данных, полученных обработчиками событий в Storybook. Полный список аддонов, доступных в Storybook, можно найти здесь. Мы можем настроить аддон, если это еще не сделано по умолчанию.
Для начала установите пакет аддона с помощью этой команды.
npm i -D @storybook/addon-actions or yarn add @stroybook/addon-actions
Затем добавьте в .storybook/addons.js следующую строку:
import '@storybook/addon-actions/register';
Чтобы сделать историю кнопки интерактивной с помощью Storybook, можно добавить в buttonStories.js следующий код:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from '../components/Button';
storiesOf('Button', module)
.add('with primary', () => <Button
onClick={action('click')}
label="Primary Button"
/>)
.add('with outline', () => <Button
label="Ouline Button"
onClick={action('click')}
style={{ background: 'transparent', border: '3px solid #fecd43' }}
/>)
.add('with rounder corners', () => <Button
label="Rounded Button"
onClick={action('click')}
style={{ borderRadius: '15px' }}
/>)
.add('disabled', () => <Button disabled
label="Disabled Button"
onClick={action('click')}
style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
/>)
Вот и все. При запуске Storybook обратите внимание на вкладки внизу, и вы увидите вкладку Actions, в которой регистрируется каждое действие с кнопками.
4: Настройка тем
Storybook предоставляет возможность настраивать темы по умолчанию. Конечно, в Storybook есть стандартная тема. В этом разделе мы поговорим о том, как настроить другую тему. Для начала нужно изменить конфигурации, которые мы установили в файле config.js, добавив следующие строки кода:
import { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming'
addParameters({
options: {
theme: themes.dark
}
})
Это настроит темную тему.
Как видите, теперь тема storybook выглядит иначе. Переключиться на светлую или темную тему (в зависимости от ваших предпочтений) можно в любой момент.
Также можно определить динамическую тему, если стандартные светлая и темная вам не подходят. Давайте посмотрим, как это делается. Первый шаг – создать файл для темы в папке .storybook. Здесь мы назовем новый файл yourTheme.js, а саму тему – pinkPanther. Для создания новой темы мы используем функции create() из сборника storybook/theming.
import {create} from '@storybook/theming'
export default create ({
base: 'light',
colorPrimary: 'hotpink',
colorSecondary: 'deepskyblue',
// UI
appBg: 'rgb(234, 0, 133)',
appContentBg: 'white',
appBorderColor: 'white',
appBorderRadius: 4,
// Typography
fontBase: '"Open Sans", sans-serif',
fontCode: 'monospace',
// Text colors
textColor: 'rgb(255, 250, 250)',
textInverseColor: 'white',
// Toolbar default and active colors
barTextColor: 'white',
barSelectedColor: 'white',
barBg: 'rgb(246, 153, 190)',
// Form colors
inputBg: 'white',
inputBorder: 'silver',
inputTextColor: 'black',
inputBorderRadius: 4,
brandTitle: 'Pink Panther Storybook',
brandUrl: 'https://example.com',
brandImage: 'https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/0019/2539/brand.gif?itok=97rSwE0a',
});
Теперь нужно импортировать pinkPanther.js в конфигурации storybook.
import pinkPanther from './pinkPanther';
addParameters({
options: {
theme: pinkPanther
}
})
В результате вы получите розовую тему.
5: Развертывание Storybook
Одна из функций, которая поставляется вместе с Storybook, – это возможность развернуть Storybook как статический сайт на любом хостинге. Для этого нам нужно добавить сценарий build-storybook в package.json:
{
"scripts": {
"build-storybook": "build-storybook -c .storybook -o .out"
}
}
Этот сценарий объединит каталог storybook в статическое веб-приложение и выведет его в каталог .out. Мы можем запустить этот сценарий и развернуть содержимое каталога .out после завершения сборки. Запустите:
npm run build-storybook
Когда сборка будет завершена, мы сможем развернуть содержимое каталога, используя любой хостинг. Сначала вы можете проверить локально, работает ли развертывание. Для этого нужно запустить следующую команду, которая будет обслуживать содержимое папки как статический сайт:
npx http-server .out
Заключение
В этом мануале вы узнали, как создавать интерактивные компоненты с помощью Storybook и React. Теперь у вас есть инструкции по интеграции библиотеки компонентов Storybook в проекты React.
В разработке Storybook будет единым источником истины как для разработчиков, так и для дизайнеров. А еще эту библиотеку можно интегрировать с другими интерфейсными фреймворками. Если вы ищете руководство по другим фреймворкам, почитайте официальную документацию Storybook. Полный код этого мануала можно найти на GitHub.