1 Краткое описание

Библиотека содержит .vue комопненты,а также css-перемнные общие для всех проектов FTOYD Arena.

2 Структура проекта

Библиотека имеет 3 директории:

1. ./.storybook/ - предназначена для хранения конфигурационных файлов для StoryBook,
2. ./src/ - директория, в которой находятся все компоненты, файлы стилей, а так же локальный dev-сервер (./src/dev), необходимый для более комфортного процесса разработки и тестирования компонентов,
3. ./stories/ - директория, в которой описываются все созданные комопненты, для отображения в StoryBook.

3 Разработка новых комопнентов или добавление уже существующих

Новые комопненты необходимо создавать (или добавлять) в директорию /src/library/components/, причем если подразумевается добавление нескольких логически связанных комопонентов, то рекомендуется создать для них общую директорию, как пример /src/library/components/Buttons/....

В директории /src/library/components/Buttons/... создан файл general.scss, который хранит в себе все общие стили для компонетов Buttons.

При необходимости можно воспользоваться dev-серером, запустив его командой:

npm run dev

Когда вы успешно добавли новый комопнент, необходимо создать для него stories в папке /stories/. Можете юзеть пример уже готовых stories, например тут /stories/ButtonUI/ButtonUI.stories.js. Файл mdx создавать не обязательно.

Посмотреть как это будет выглядеть можно так:

npm run storybook

3.1 Обновление npm-библиотеки после добавления нового функционала

Пока точно хз, сможете ли вы сами пушить изменения в npm (пока, скорее всего, придется просить меня заупшить туда)

Алгорит действий:

1. Запушить изменния в git,
2. npm run build,
3. npm run chromatic (для отображения новых комопнентов в StoryBook),
4. npm run pub (тут могут быть траблы из-за доступа).

Библиотека успешно обновлена! 💯

После всех махинаций, так же необходимо обновить библиотеку в проектах, в которых она используется:

npm update ftoyd-ui

Теперь изменения доступны в проекте! ✔️

4 Добавление и использвоание библиотеки в проекте

Скорее всего данная библиотека уже установлена в проект FTOYD и FTOYD Admin, но все же...

1. Библиотека устанавливается как обычный NPM-пакет:

npm i ftoyd-ui

2. После успешной установки, необходимо подключить файл стилей в корневой компонент проекта:

import 'ftoyd-ui/lib/index.css';

При данном импорте становятся доступны для использования css-переменные. Вот маленькая часть от них:

    /* Button */
    --btn-primary-default: #BC0931;
    --btn-primary-pressed: #EB0237;
    --btn-primary-disabled: #090C11;
    --btn-primary-loader: #BC0931;
    --btn-secondary-primary: #0E1117;

    /* Text */
    --primary: #FFFFFF;
    --secondary: #7E7E7E;
    --thin-secondary: #434446;
    --tertiary: #EB0237;

Название css-переменных соответствет названию из макета FIGMA UI KIT и имеют тип: --<тип_элемента>-<название_цвета>

❗ Желательно теперь использовать эти css-переменные, так как в дизайн они будут очень часто встречаться.❗

3. Для того чтобы импортировать нужный комопнент необходимо сделать это:

import { ButtonUI } from 'ftoyd-ui';

4. Далее зарегистрировать его как обычный компонент:

components: {
    ButtonUI,
  },