ui-kit-oohdesk v0.1.2

Глобальные штуки, в том числе UI кит 🦊

Ну и как мне читать это в vs code?

Скачать расширение Markdown Preview Enhanced, потом перейти на этот файл, нажать пкм и выбрать Markdown Preview Enhanced: Open Preview to the Side. Сбоку открывается превью этого файла, читаем его.

Как это использовать

Чтобы использовать весь функционал, надо подключить следующее:

1. Файл main (и установить vuelidate, vue-js-modal):

// Библиотека для валидации форм
import Vuelidate from "vuelidate"
Vue.use(Vuelidate)

// Библиотека для модальных окон
// https://www.npmjs.com/package/vue-js-modal
import vmodal from "vue-js-modal"
Vue.use(vmodal, { dialog: true })

// Директивы, самописные и не очень
import gl_directives from "@gl_directives"
Vue.mixin(gl_directives)

2. Здесь используются алерты и нотифы, нужно в файле App их добавить, а также добавить логику в store (смотри ротацию).

3. В Avatar используется refreshProfile для обновления информации профиля (смотри ротацию).

Заметки

Для валидации на стороне клиента используется vuelidate.

Есть автоформатирование кода в лице eslint и prettier.

Структура

В components собираются глобальные компоненты. Внутри есть папка ui, здесь собираются все ui компоненты.

Если появляются директивы, фильтры, миксины и прочие похожие вещи, то стоит выносить их в отдельные папки с именами directives, filters и так далее, сложенные в папке src.

В папке src/layouts (сейчас нет) лежат компоненты-обертки, в которые потом вставляются внутрь другие компоненты.

Верстка

Всё пишется по БЭМ, с препроцессором SCSS. В assets есть папка scss, в которую складываются стили, являющиеся общими для проекта или которые используются в нескольких проектах.

В файле _vars.scss лежат все переменные. Пока что там только цвета. Есть разделение на основной/подосновной цвет, оттенки серого (от белого до черного), другие цвета, которые всегда начинаются с color.

В файле _icons.scss собраны все иконки из icomoon. Их можно использовать, задавая нужному блоку нужный класс с иконкой.

Файл _fonts.scss - для шрифтов, в том числе для настроек для иконок.

В файле _common.scss собираются стили без классов или те, которые используются по всему проекту (например, переопределение стилей какой-нибудь внешней библиотеки).

Файл _base.scss является сборщиком всех файлов внутри папки scss. Он потом подключается в вебпаке. Когда создается новый scss файл, он должен учитываться в _base.scss.

Папка mixins включает миксины, в том числе общий файл _common.scss и тематические, если вдруг какие-то миксины можно выделить в определенную группу.

Так как для директив особо не задашь стили в js файлах, то они задаются в папке directives.

Иконки

Иконки берутся с icomoon.io/app. Что оттуда взято, можно посмотреть, если взять файл src/assets/icomoon/selection.json и загрузить его в icomoon. Для этого следует зайти на указанный выше сайт и пройти по пути:

бургер-меню слева => Import Project

и загрузить ранее рассмотренный файл json. Появится проект с названием что-то типа Untitled или Untitled-1. Далее в этот проект можно зайти (Load справа) и посмотреть выбранные иконки.

Если нужно добавить новые иконки, следует нажать на Add Icons From Library.... Там есть бесплатные и платные библиотеки. Добавляем какую-нибудь (конечно бесплатную) и она появляется в нашем проекте. Выделяем там иконки.

После этого нужно нажать внизу экрана Generate icons и после нажать там же внизу кнопку Download. Скачается zip. Теперь нужно переместить все файлы и папки из этого каталога в папку src/assets/icomoon (с заменой). Всё.

Как запустить

Запустить тесты (как этим пользоваться, смотри в файле TEST_GUIDE.md в корне папки frontend)

npm run test