@morani/zt-comp

React Components

Дизайн-система, построенная на базе библиотеки React.

Содержание

• Инициализация
• Доступные команды

Инициализация

Для инициализация проекта необходимо выполнить следующую команду

> npm i

Доступные команды

Запускает приложение в режиме разработки.
Запустите http://localhost:3000 для просмотра в браузере.

> npm start

Запускает все тесты, которые находятся в директории src

> npm test

Запускает билд компонентов в отдельную папку lib (запускает все команды с префиксом build:)

> npm run build

Удаляет папку lib

> npm run prebuild

Билд компонентов в ES-модули в папку lib/esm

> npm run build:esm

Билд компонентов в CommonJS-модули в папку lib/cjs

> npm run build:cjs

Билд типизации TS в папку lib/types

> npm run build:types

Билд scss в css во всех компонентах в папки lib/esm и lib/cjs

> npm run build:css

Запускает линтер. Настройки в файле .eslintrc

> npm run lint

Запускает eslint и prettier для форматирования кода

> npm run lint:fix

Запускает storybook по адресу http://localhost:6006

> npm run storybook

Запускает билд storybook в папку storybook-static

> npm run build-storybook

Запускает билд для формирования пака из компонентов. Готово для публикации

> npm run compile

Преобразует SVG-файлы в TSX в папке src/components/Icons:

npm run transform:icons

Добавить иконку в package:

• Поместить в папку src/components/Icons файл SVG;
• Вызвать npm run transform:icons;
• Добавить import и export результирующего файла в src/components/Icons/index.ts
• Для использования import указываем из корневой директории ../, вместо импорта из ../Icons

Файл генерируется в стиле kebab. test_name-25.svg -> TestName25.tsx

Пример, находясь в src/components/Button/Button.tsx:

import {Loading} from '../'

Из библиотеки:

import {FC} from 'react'
import {AddUser24, Icon} from 'react-components'

const TestPage: FC = () => {
  return <Icon As={AddUser24} color="green-1" />
}