@morani/zt-comp v0.1.43

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: 1. Поместить в папку src/components/Icons файл SVG; 2. Вызвать npm run transform:icons; 3. Добавить import и export результирующего файла в src/components/Icons/index.ts 4. Для использования 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" />
}