Epn-ui NPM | npm.io

epn-ui

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

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

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

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

Дизайн темы

Компоненты в пакете используют дизайн систему 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

Релиз

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

epn design-system epn-ui

@dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @fortawesome/react-fontawesome antd antd-mask-input clsx csstype export-to-csv lodash react-indiana-drag-scroll templite

@infinitebrahmanuniverse/nolb-epn @everything-registry/sub-chunk-1592 collection-contact-form bank131-widgets

4 months ago

4 months ago

4 months ago

4 months ago

8 months ago

8 months ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

7 years ago