React Storybook: разрабатывайте красивые пользовательские интерфейсы с легкостью

 getstorybook 

Эта команда сделает три вещи:

• Установите @ kadira / storybook в свой проект.
• Добавьте build-storybook сценариев и build-storybook в свой файл package.json .
• Создайте папку .storybook которая содержит базовую конфигурацию и папку stories с образцом компонента и историей.

Чтобы запустить Storybook, выполните npm run storybook и откройте отображаемый адрес ( http: // localhost: 9009 / ). Приложение должно выглядеть так:

Добавление нового контента

Теперь, когда у нас запущен React Storybook, давайте посмотрим, как мы можем добавлять новый контент. Каждая новая страница добавляется путем создания историй. Это фрагменты кода, которые визуализируют ваш компонент. Пример истории, созданной getstorybook выглядит следующим образом

 //src/stories/index.js import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; import Button from './Button'; import Welcome from './Welcome'; storiesOf('Welcome', module) .add('to Storybook', () => ( <Welcome showApp={linkTo('Button')}/> )); storiesOf('Button', module) .add('with text', () => ( <Button onClick={action('clicked')}>Hello Button</Button> )) .add('with some emoji', () => ( <Button onClick={action('clicked')}> </Button> )); 

Функция storiesOf создает новый раздел в меню навигации, а метод add создает новый подраздел. Вы можете структурировать сборник рассказов, как считаете нужным, но вы не можете создавать иерархии глубже двух уровней. Простым подходом к структурированию сборника рассказов является создание общих разделов верхнего уровня, таких как «Входы форм», «Навигация» или «Виджеты» для групп связанных элементов и подразделов для отдельных компонентов.

Вы можете сами выбирать, где разместить файлы истории: в отдельной папке историй или рядом с компонентами. Лично я предпочитаю последнее, поскольку поддержание историй вблизи компонентов помогает поддерживать их доступность и актуальность.

Истории загружаются в файл .storybook/config.js который содержит следующий код:

 import { configure } from '@kadira/storybook'; function loadStories() { require('../src/stories'); } configure(loadStories, module); 

По умолчанию он загружает файл src/stories/index.js и ожидает, что вы импортируете туда свои истории. Это немного неудобно, так как нам потребуется импортировать каждую новую историю, которую мы создаем. Мы можем изменить этот скрипт, чтобы автоматически загружать все истории, используя метод require.context в Webpack. Чтобы отличить файлы истории от остальной части кода, мы можем согласиться добавить к .stories.js расширение .stories.js . Модифицированный скрипт должен выглядеть так:

 import { configure, addDecorator } from '@kadira/storybook'; import React from 'react'; configure( () => { const req = require.context('../src', true, /.stories.js$/); req.keys().forEach((filename) => req(filename)); }, module ); configure(loadStories, module); 

Если вы используете другую папку для исходного кода, убедитесь, что вы указали ее в правильном месте. Перезапустите сборник рассказов, чтобы изменения вступили в силу. Сборник рассказов будет пуст, поскольку он больше не импортирует файл index.js , но мы скоро это исправим.

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

Теперь, когда мы немного адаптировали сборник рассказов к нашим потребностям, давайте напишем нашу первую историю. Но прежде всего нам нужно создать компонент для демонстрации. Давайте создадим простой компонент Name для отображения имени в цветном блоке. Компонент будет иметь следующие JavaScript и CSS.

 import React from 'react'; import './Name.css'; const Name = (props) => ( <div className={'name ' + (props.type ? props.type : '')}>{props.name}</div> ) Name.propTypes = { type: React.PropTypes.oneOf(['highlight', 'disabled']), } export default Name; 

 .name { display: inline-block; font-size: 1.4em; background: #4169e1; color: #fff; border-radius: 4px; padding: 4px 10px; } .highlight { background: #dc143c; } .disabled { background: #999; } 

Как вы, наверное, заметили, этот простой компонент может иметь три состояния: по умолчанию, выделен и отключен. Разве не было бы неплохо представить их всех? Давайте напишем историю для этого. Создайте новый файл Name.stories.js вместе с вашим компонентом и добавьте следующее содержимое:

 import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; import Name from './Name'; storiesOf('Components', module) .add('Name', () => ( <div> <h2>Normal</h2> <Name name="Louie Anderson" /> <h2>Highlighted</h2> <Name name="Louie Anderson" type="highlight" /> <h2>Disabled</h2> <Name name="Louie Anderson" type="disabled" /> </div> )) 

Откройте сборник рассказов и взгляните на свой новый компонент. Результат должен выглядеть так:

 import { configure, addDecorator } from '@kadira/storybook'; import React from 'react'; addDecorator((story) => ( <div> <h1>Examples</h1> {story()} </div> )); 

 storiesOf('Components', module) .addDecorator(...) 

 npm run build-storybook 

 module.exports = { module: { loaders: [ { test: /.scss$/, loaders: ["style", "css", "sass"] } ] } } 

 module.exports = function(storybookBaseConfig, configType) { // add your configuration here // Return the altered config return storybookBaseConfig; }; 

 storiesOf('Button', module) .add('with text', () => ( <Button onClick={action('clicked', 'test')}>Hello Button</Button> )) 

 import { storiesOf, linkTo } from '@kadira/storybook'; storiesOf('Button', module) .add('with link', () => ( <Button onClick={linkTo('Components', 'Name')}>Go to Name</Button> )); 

 npm i --save-dev @kadira/storybook-addon-knobs 

 import '@kadira/storybook/addons'; import '@kadira/storybook-addon-knobs/register'; 

 import { withKnobs } from '@kadira/storybook-addon-knobs'; addDecorator(withKnobs); 

 import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; import { text, select } from '@kadira/storybook-addon-knobs'; import Name from './Name'; const types = { '': '', highlight: 'highlight', disabled: 'disabled' } storiesOf('Components', module) .add('Name', () => ( <div> <h2>Normal</h2> <Name name={text('Name', 'Louie Anderson')} type={select('Type', types)} /> </div> )) 

 npm i --save-dev @kadira/react-storybook-addon-info 

 import { setAddon } from '@kadira/storybook'; import infoAddon from '@kadira/react-storybook-addon-info'; setAddon(infoAddon); 

 import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import Name from './Name'; storiesOf('Components', module) .addWithInfo( 'Name with info', ` A component to display a colored name tag. `, () => ( <Name name="Louie Anderson" /> ), { inline: true }, )