Настройте библиотеку компонентов React с помощью Create React App, React Styleguidist и TypeScript.

Я работал над личным проектом, в ходе которого разработал несколько компонентов, которыми, по моему мнению, стоит поделиться, но как? Я могу опубликовать их на NPM, но пользователь должен иметь возможность возиться с ними, а не просто видеть примеры по умолчанию, вот когда я узнал о React Styleguidist, я боролся за 1 день, чтобы получить это в первый раз, и теперь это занимает около 10 минут на настройку стилизованного компонента.

Мы будем использовать React Styleguidist, так как он не только может взаимодействовать с компонентами, но также может изменять свойства и писать пользовательскую функцию, чтобы увидеть, как ведет себя компонент.

React Styleguidist не предоставляет шаблоны, такие как Create React App, но это плагин, который можно легко интегрировать с CRA или с любым приложением React с веб-пакетом. Я разделил шаги на 3 части.

Создайте приложение React с помощью TypeScript

1. Добавить React StyleGuidist
2. Добавить поддержку TypeScript
3. Создать React-приложение

Создайте настройку React с помощью CRA, используя npx для последней версии, или создайте пряжу.

// Using yarn
yarn create react-app my-component-library --typescript
// Using npm
npx create-react-app my-app --typescript
cd my-component-library
// Make sure App is running
yarn start

Добавить React StyleGuidist

Давайте отреагируем Styleguidist на наш проект, используя

yarn add -D react-styleguidist

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

"start": "npx styleguidist server",
"build": "npx styleguidist build",
"test": "react-scripts test",
"eject": "react-scripts eject"

Давайте запустим наш сервер с помощью yarn start , появится следующая страница.

Это потому, что мы не сказали стайл-гайду, где находятся наши компоненты, у нас даже пока нет ни одного компонента.

Давайте добавим простой компонент кнопки в папку src/components/button.

// src/components/button/Button.tsx

import  as React from "react";


class Button extends React.PureComponent {
  render() {
    return (
      <button
        style={{
          border: "none",
          padding: "8px 12px",
          background: "hotpink",
          borderRadius: "4px",
          color: "white"
        }}
      >
        {this.props.children}
      </button>
    );
  }
}

export default Button;

Добавьте styleguide.config.js в корневую папку приложения и напишите внутри него следующий код, он сообщает styleguidist, где находятся наши компоненты.

module.exports = {
  components: "src/components/**/*.tsx"
};

Снова запустите сервер с помощью yarn start , обратите внимание, что мы внесли изменения в конфигурацию styleguidist, чтобы отразить необходимость перезапуска сервера.

Это должно выглядеть примерно так

Чтобы наш компонент отображался там, мы должны создать README.md внутри папки кнопки, например, каждый компонент будет иметь свой собственный файл README.md, где вы можете показать различные примеры с разными реквизитами.

// src/components/Button/README.md
js
<Button>Button</Button>

Говоря о разных реквизитах, давайте добавим реквизит к нашей кнопке.

// src/components/button/Button.tsx

import  as React from "react";

interface IProps {
  /
    Size of the button
   /
  size: "regular" | "large";
}

class Button extends React.PureComponent<IProps> {
  render() {
    const { size, children, ...rest } = this.props;
    return (
      <button
        {...rest}
        style={{
          border: "none",
          padding: size === "regular" ? "8px 12px" : "12px 16px",
          background: "hotpink",
          borderRadius: "4px",
          color: "white"
        }}
      >
        {children}
      </button>
    );
  }

  static defaultProps = {
    size: "regular"
  };
}

export default Button;

// src/components/Button/README.md


<Button>Button</Button>
<Button size="large">Button</Button>

Приведенный выше код и README.md приведут к

Раздел «Реквизиты и методы» был автоматически добавлен в описание нашего компонента, но тип неизвестен, чего не должно быть, поскольку мы используем TypeScript, и он должен показывать «обычный» | «large», React Styleguidist не поддерживает TypeScript по умолчанию, он читает реквизиты из PropType, здесь он использует defaultProps, чтобы показать вышеизложенное, нам нужно добавить синтаксический анализатор, который будет анализировать реквизиты, определенные в машинописном тексте.

Поддержка машинописного текста
Добавьте react-docgen-typescript, используя

yarn add -D react-docgen-typescript

Добавьте парсер в styleguide.config.js

module.exports = {
  components: "src/components/**/*.tsx"
  propsParser: propsParser: require("react-docgen-typescript").parse
};

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

Дай пять 🙌 У нас есть библиотека компонентов, теперь мы можем добавить к каждому компоненту отдельный файл package.json и опубликовать их в npm.

Я отправил приведенную выше настройку на GitHub, вы можете проверить ее для справки или использовать ее напрямую.

Спасибо за чтение!

Прочтите это дальше Середина