Визуализация реактивных компонентов, что болит в голове

Я давно хотел заняться визуализацией компонентов, сначала хотел сделать что-то похожее на antd, а потом столкнулся с рядом проблем.

Цель визуализации компонента:

Компонент истории заметен и может обеспечить синхронизацию информации
Возможность изменить процесс разработки и обеспечить раннее визуальное принятие компонентов
Упрощение унификации визуальных спецификаций на более позднем этапе

Q1: Как собрать библиотеку компонентов, похожую на antd?

Опрос показал, что antd использует систему Alibishengэта сумка

Q2: Какую проблему решает бишенг?

Цель состоит в том, чтобы преобразовать уценку в статический сайт, как генерируется antd.

Q3: Проблемы с бишенгом?

Он давно не поддерживается, и обновления документов отстают.
И документ труднее читать, и хлопотнее начинать

Q4: Помимо bisheng, какие еще решения есть на рынке?

Вот о чем мы говорим на этот разstorybookВ настоящее время есть звезды 3,7 Вт, и экология относительно хорошая, и много плагинов.

Q5: Как начать работу со сборником рассказов?

шаг 1: установить зависимости

npm init -y
npm install @storybook/react --save-dev
npm install react react-dom --save
npm install babel-loader @babel/core --save-dev

шаг 2: добавить скрипт скрипт

добавить в package.json

{
 "scripts": {
   "storybook": "start-storybook"
 }
}

Шаг 3: добавить файл конфигурации

Создайте файл .storybook/config.js

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

function loadStories() {
  require('../stories/index.js');
  // 可以添加多个store
  // You can require as many stories as you need.
}

configure(loadStories, module);

Шаг 4: начните писать историю

Создайте файл ../stories/index.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => (
    <Button>Hello Button</Button>
  ))
  .add('with emoji', () => (
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));

Шаг 5: бег

npm run storybook

Эффект

хорошо, успешно сделано, вы уже можете видеть написанный код

Резюме: Storybook относительно легко запустить в соответствии с конфигурацией.

Q6: Как разработать структуру каталогов?

Официальная предоставляет три, я выбрал способ, который я считаю более понятным

button.js — это код компонента
button.stories.js — код истории

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

Q7: Как загрузить по требованию?

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

Измените .storybook/config.js

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

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Q8: Что такое плагин сборника рассказов?

Впереди есть отображение библиотеки компонентов, но все еще есть большой разрыв между просмотром API, тестируемым, регулируемым стилем и т. д.
Эти дополнительные функции необходимо решить, добавив зависимости
Концепция плагина в сборнике рассказов называетсяaddons

Q9: Что такое аддоны?

addons означает добавление
В сборнике рассказов он используется для представления дополнительных функций.

**
Главное сказано трижды:

В файле конфигурации .storybook добавьте файл addons.js.
**В файле конфигурации .storybook добавьте файл addons.js.
**В файле конфигурации .storybook добавьте файл addons.js.

Файл addons.js — это файл конфигурации, используемый для поддержки плагинов.

Q10: Как испытать первые дополнения?

Каталог Addons на официальном сайте — это список официально рекомендуемых плагинов, так что начинайте пробовать один за другим.

Q11: Что такое аддоны-кнопки?

Это здорово. Ручки в основном используются для обеспечения возможности динамической настройки взаимодействия.

шаг 1: установить зависимости

npm i @storybook/addon-knobs -D

Шаг 2: Добавьте элементы конфигурации

Найдите .storybook/addons.js и добавьте в него предложение.

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

Шаг 3: Измените существующие истории

согласно сгитхаб-адрес, добавьте пример кода

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

const stories = storiesOf('Storybook Knobs', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);

// Knobs for React props
stories.add('button', () => (
  <button disabled={boolean('不可用', false)} >
    {text('文案', '牛逼的knobs')}
  </button>
));

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
  const name = text('Name', 'Arunoda Susiripala');
  const age = number('Age', 89);

  const content = `I am ${name} and I'm ${age} years old.`;
  return (<div>{content}</div>);
});

Всего было сделано несколько вещей выше:

Добавлен декоратор на истории
Добавлена упаковка атрибутов кнопки, таких как text(), boolean() и т. д., которые эквивалентны атрибутам привязки.

Увидеть эффект напрямую

Шаг 4: Эффект двусторонней привязки

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

Шаг 5: Расчетные свойства

В приведенном выше примере второй случай содержит вычисляемую переменную

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
  const name = text('Name', 'Arunoda Susiripala');
  const age = number('Age', 89);

  const content = `I am ${name} and I'm ${age} years old.`;
  return (<div>{content}</div>);
});

Когда возраст изменен, он также будет перерисован

Ручки очень мощные:

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

Q12: Что такое аддоны-действия

Действия используются для получения информации о щелчке пользователя. Я не думал о сцене для этого конкретного использования. После просмотра демонстрации он в настоящее время используется для определения конкретной позиции щелчка.

шаг 1: установить зависимости

npm i -D @storybook/addon-actions

Шаг 2: Измените .storybook/addons.js

import '@storybook/addon-actions/register';

Шаг 3: привязать одно событие

import { storiesOf } from '@storybook/react';
import { action, configureActions } from '@storybook/addon-actions';

import Button from './button';

storiesOf('Button', module).add('default view', () => (
  <Button onClick={action('button-click')}>Hello World!</Button>
));

Шаг 4: привязать несколько событий

import { storiesOf } from '@storybook/react';
import { actions } from '@storybook/addon-actions';

import Button from './button';

// This will lead to { onClick: action('onClick'), ... }
const eventsFromNames = actions('onClick', 'onMouseOver');

// This will lead to { onClick: action('clicked'), ... }
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });

storiesOf('Button', module)
  .add('default view', () => <Button {...eventsFromNames}>Hello World!</Button>)
  .add('default view, different actions', () => (
    <Button {...eventsFromObject}>Hello World!</Button>
  ));

Q13: Что такое addons-storysouce

Это относительно просто понять, цель состоит в том, чтобы отобразить источник истории в консоли.

шаг 1: установить зависимости

npm i  @storybook/addon-storysource --dev

Шаг 2: Создайте webpack.config.js

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });

  return config;
};

Разница между этим и двумя предыдущими плагинами заключается в том, что ему нужно добавить загрузчик в веб-пакет, выставить его через веб-пакет самого сборника рассказов и добавить к нему плагины.

Шаг 3: Просмотр эффекта исходного кода

Q14: Что такое аддон-информация?

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

шаг 1: установить зависимости

npm i -D @storybook/addon-info

Шаг 2: добавить плагин

addon-info использует режим декоратора, который можно добавить глобально или локально

Глобальная модификация заключается в том, чтобы добавить его глобально в конфиг.

addDecorator(withInfo); // Globally in your .storybook/config.js.

Частично украшенные цветы, просто добавьте в истории

storiesOf('Component', module)
  .addDecorator(withInfo) // At your stories directly.
  .add(...);

Шаг 3: Добавьте propTypes в код компонента

import React from 'react';
import PropTypes from 'prop-types';
const Test = (props)=><div>{props.children}</div>
Test.propTypes = {
  text: PropTypes.string.isRequired,
  onDelete: PropTypes.func,
}
export default Test

После добавления плагина addons-info будет добавлена кнопка showinfo

Нажмите на showinfo, чтобы увидеть

Автоматически преобразовывать имена компонентов в уценку
Автоматически преобразовывать код компонента в уценку
Автоматически преобразовывать propsTypes в таблицы

Однако информация в таблице по-прежнему отсутствует, а значение по умолчанию и описание отсутствуют.

Шаг 4: Добавьте значение по умолчанию и описание в код компонента

import React from 'react';
import PropTypes from 'prop-types';
const Test = (props)=><div>{props.children}</div>
Test.defaultProps = {
  text: '默认值',
  onDelete: () => {}
};
Test.propTypes = {
   /** 这里text是注释 */
  text: PropTypes.string.isRequired,
  /** 这里onDelete是注释 */
  onDelete: PropTypes.func,
}
export default Test

Значения по умолчанию устанавливаются через defaultProps
Аннотации реализуются путем добавления аннотаций к свойствам.

Q15: Что такое addon-viewport?

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

шаг 1: установить зависимости

npm i --save-dev @storybook/addon-viewport

Шаг 2: Зарегистрируйте плагин

Зарегистрируйтесь в .storyboos/config

import '@storybook/addon-viewport/register';

Шаг 3: добавить глобально

import React from 'react';
import { configure,addDecorator,addParameters } from '@storybook/react';
// config.js
import { withInfo } from '@storybook/addon-info';
addDecorator(withInfo);
addParameters({
  viewport: { defaultViewport: 'iphone6' },
});

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Вот использование метода addParameters, что очень удобно

Таким образом, по умолчанию будет пакет точек зрения.Для этой конкретной конфигурации просто медленно прочитайте документацию.

Q16: Что такое аддон-шоты

Эта часть связана с тест-кейсами, которые нельзя съесть за короткое время, и они будут добавлены позже, когда будет время.

Q17: Что такое аддон-фоны

В основном используется для установки цвета фона, необязательный, необязательный.

Q18: Что такое аддон-a11y

Это эквивалентно функции класса lint и по-прежнему очень полезно в реальных проектах.

шаг 1: установить зависимости

npm i @storybook/addon-a11y --dev

Шаг 2: Зарегистрируйте плагин

Изменить надстройки

import '@storybook/addon-a11y/register';

Шаг 3: Добавьте модификаторы и параметры

добавить в конфигурационный файл

addDecorator(withA11y);
addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
    config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  },
});

ок, в таком случае, если вы напишете кнопку, не соответствующую спецификации, будет сообщено об ошибке

Q19: Что такое аддон-консоль

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

Q20: Что такое аддон-ссылки

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

Q21: Помимо этих официально рекомендованных плагинов, какие еще существуют?

Текущий список лучших плагинов выглядит следующим образом:

Storyshots: Снимок теста.
Specs: Интерактивный тест.
Notes: добавление примечания к истории.
Info: для создания руководств по css framework.
Readme: импортировать уценку как историю.
actions: Объект события, отображающий событие.
Intl: добавить панель локалей для переключения языков.
State: добавьте панель состояния, отобразите или обновите состояние и перерисуйте вид.
Props Combinations: Настройте возможные реквизиты и нарисуйте несколько компонентов одновременно для сравнения.
Knobs: Измените реквизиты на странице, чтобы перерисовать вид.
Links: Связывание нескольких историй с помощью функции linkTo или компонента LinkTo, поддержка перехода по щелчку.
Story-router: Decorator, поддержка сборника рассказов для использования компонентов маршрутизации, таких как react-router.
Backgrounds: переключение фонового изображения или цвета фона.
i18n tools: переключение выравнивания текста по левому или правому краю.
Material-UI: добавление и переключение пользовательских тем.
Host: Декоратор для отображения компонента в режиме окна на странице.
Chapters: отображение нескольких компонентов в главах одной истории.
Options: настройка внешнего вида страницы сборника рассказов, переключение в полноэкранный режим и т. д.
Console: вывод информации из консоли браузера на панель журнала сборника рассказов.
JSX preview: отображение и копирование кода JSX.
Versions: добавьте номер версии, чтобы просмотреть изменения каждой версии.
Apollo: добавлен клиент Apollo для имитации запросов GraphQL.
Screenshot: сохранение скриншотов веб-страниц.
Styles: добавление пользовательских стилей в интерфейс предварительного просмотра сборника рассказов.
Figma: Добавлена панель дизайна Figma.

Q22: Что такое резюме?

Самый прикольный момент: если сторибук кинуть прямо в проект, то набор конфигурации вебпака можно расшарить, а компоненты синхронизировать в бизнесе и в стори одновременно, причем синхронизировать в реальном времени
решенная проблема:
Сборник рассказов в основном решает отображение исторических компонентов
Процесс приемки также может быть изменен, и сначала выполняется приемка компонента, а затем выполняется приемка бизнеса.
Это также полезно для новых студентов, чтобы начать
Отдел дизайна:
Первый этап: сначала интегрируйте сборник рассказов, чтобы повысить производительность.
Второй этап: извлечение зрелых компонентов на общедоступный уровень для использования в других проектах.
Третий этап: компоненты и истории разделены, становятся двумя обслуживаемыми проектами, сохраняют чистоту компонентов и историю как документное решение.

Q23: Что делать?

Показать компоненты в showinfo
Настройка стилей таблиц в уценке
Добавить разработку тестового примера (addons-shots)
фон добавить цвет

Q24: Какие ссылки?

Руководство пользователя сборника рассказов
официальный сайт сборника рассказов