epn-ui/README.md

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

# epn-ui

Дизайн система кабинета ВМ
 
Классы компонентов должны начинаться с префикса **`epn-`**

Для написания стилей используется методология [БЭМ](https://ru.bem.info/methodology/key-concepts/)

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

- [Как писать классы по БЭМ?](http://yoksel.github.io/easy-markup/bem-rules/)
- [Слова часто используемые в CSS](https://github.com/yoksel/common-words)

### Дизайн темы

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

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

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

## Подключение

Этот пакет распространяется через [npm](https://www.npmjs.com/package/epn-ui).

```
yarn add epn-ui
```

Дизайн система использует иконки [FontAwesome](https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react):

```
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](https://epn-ui.epnservers.com)

### Релиз

Создаем новый тег, пайпа закоммитит новую версию в package.json и опубликует пакет в npm