epn-ui

Дизайн система кабинета ВМ

Классы компонентов должны начинаться с префикса epn-

Для написания стилей используется методология БЭМ

Дополнительно:

• Как писать классы по БЭМ?
• Слова часто используемые в CSS

Дизайн темы

Компоненты в пакете используют дизайн систему antd, стили изменяюся через конфиг ./configs/EpnTheme.json Этот конфиг служит для проекта ВМ с его фирменным стилем.

Для изменения конфига используется Theme Editor от antd https://ant.design/theme-editor Важно поддерживать конфиг всегда актуальным.

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

Подключение

Этот пакет распространяется через npm.

yarn add epn-ui

Дизайн система использует иконки FontAwesome:

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-solid-svg-icons

Создайте файл .npmrc в корне проекта и пропишите ваш _authToken для FontAwesome:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<Ваш _authToken>

Добавьте стили компонентов перед стилями проекта:

import 'epn-ui/umd/style.css';

Начало работы

Чтобы начать работу импортируйте компонент:

import { Button } from 'epn-ui';
import 'epn-ui/umd/style.css';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button type="primary" onClick={() => {console.log('save')}}>Save</Button>
      </header>
    </div>
  );
}

export default App;

Разработка

yarn dev

Запускает storybook. Чтобы увидеть компоненты нужно перейти на http://localhost:6006/

yarn lint

Запускает линтер

yarn prettier

Запускает автоматическое форматирование кода

yarn build

Запускает production сборку компонентов

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

Ссылка на Storybook