Часть 1 - установка, стилизованные компоненты и сборник рассказов

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

Настройка

npx create-react-app components-library --typescript

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

npm run eject

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

npx -p @storybook/cli sb init && npm run storybook

Моя хорошая практика - иметь все, что касается одного объекта, такого как компонент, который мне нравится хранить истории из сборника рассказов о тестах, и сам компонент в одном каталоге. Чтобы настроить сборник рассказов для поиска историй во всем каталоге src / components, мы должны настроить его следующим образом.

//.storybook/config.js
import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
const req = require.context('../src/components', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

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

//.storybook/webpack.config.js
const path = require('path');
module.exports = (baseConfig, env, config) => {
  config.resolve.modules = [
    ...(config.resolve.modules || []),
    path.resolve(__dirname, '../src')
  ];
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    options: {
      presets: [["react-app", { flow: false, typescript: true }]]
    }
  });
  config.resolve.extensions.push(".ts", ".tsx");
  
  return config;
};

💅 Стилизованные компоненты 💅

Основная причина, по которой я думаю, что сейчас прекрасное время для создания библиотеки компонентов, - это стилизованные компоненты. Раньше были похожие проекты, но этот потряс индустрию. После выпуска v3.1, который дал ~ 10-кратное улучшение производительности, а затем еще v4.0 с еще 25% и множеством улучшений. Он стал почти таким же производительным, как модули css, с гораздо лучшим API. Чтобы добавить стилизованные компоненты в наш проект, просто запустите

npm i @types/styled-components
npm i -D styled-components

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

Убедитесь, что вы добавили стилизованные компоненты как peerDependency, чтобы ваши будущие пользователи не сердились из-за отсутствия стилизованных компонентов 😭.

//package.json
...,
"peerDependencies": {
   "styled-components": "^4.1.3"
},
...

Первый компонент

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

//src/components/button/index.tsx
import styled from "styled-components";
const StyledButton = styled.button`
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  background-color: red;
  &:active {
    outline: 0;
    color: #fff;
    top: 1px;
  }
`;
export const Button = StyledButton;

И история для этой кнопки

//src/components/button/button.stories.js
import React from "react";

import { storiesOf } from "@storybook/react";
import {Button} from './';

storiesOf("Button", module)
  .add("with text", () => (
    <Button>Hello Button</Button>
  ));

Чтобы узнать, как статически печатать стилизованные компоненты, перейдите ко второй части этого руководства 😎



Создание библиотеки компонентов стиля
Часть 2 - статически типизированные компоненты стиля medium.com