LSK – UX packages

Huge customizeble React-based framework with many cases.

Easy to implement. Simple in usage. Just like a lego constructor.

это монореп (управляется lenrа'ой), для фронтовых компонентов, тут нет никакого серверного кода и поэтому нету .env нас интересует в данный момент ui npm run dev - делает просто сборку src=>build, это необходимо, когда мы линкуем пакеты к реальному проекту и тестриуем в живой среде

Tutorial

Storybook

Packages

• @lskjs/button – React компоненты для кнопки и группы кнопок
• @lskjs/tag – React компоненты для тега и группы тегов

---

• @lskjs/article – react компоненты для отображения статей в том числе markdown
• @lskjs/chat – react компоненты для чата ПРИДУМКА СОНИ TODO: нужно уже оформить
• @lskjs/dashboard – часто использумые react компоненты для админок и дешбордов: admin-lte/
• @lskjs/dev – тут вспомогательные реакт компоненты для разработки и отладки
• @lskjs/form – тут реакт враперы для форм, построенные вокруг формика
• @lskjs/form-input – контрол формы Input
• @lskjs/form-select – контрол формы Select AsyncSelect
• @lskjs/form-calendar – контрол формы для календарей
• @lskjs/form-geo – контрол формы для карт
• @lskjs/form-files – контролы формы для загрузки файлов, дропзоун, загрузка изображений и кроппер
• @lskjs/form-phone – тут реакт враперы для загрузки файлов, дропзоун, загрузка изображений и кроппер
• @lskjs/grid – тут наши реакт компоненты для сетки (по аналогии с сеткой бутстрапа)
• @lskjs/gridtable – это эксперимент, таблица на гридах с watchерами mobx
• @lskjs/link – это реакт компонент для ссылок и провайдер ссылок
• @lskjs/list – это компонент для умных таблиц-списков с функциями автоподгрузки фильтрации и тп
• @lskjs/modal – это компонент для модалок построенный на основе react-modal
• @lskjs/navbar – это компонент react-bootstrap навбар, адаптированный для emotion
• @lskjs/page – это компонент для разметки страниц, и прокидывания разных layout'ов для этих страниц
• @lskjs/theme – тут тема, getter свойств темы и дефолтная тема TODO: подумать как сделать real-time загрузку
• @lskjs/ui – тут ВСЯКАЯ ВСЯЧЕНА TODO: надо разобрать
• @lskjs/landing – ХЗХЗХЗХЗХ => @lskjs/experiment? => .... стабильное
• @lskjs/typo – тут типографика, реализация: цвета, формы, размеры, шрифты
• @lskjs/progress – компонент прогресса построенный вокруг нанобара
• @lskjs/image – кейсы по работе с изображениями, аспектратио, бэекграунд, фолбеки изображений
• @lskjs/t – тут i18
• @lskjs/table – наверное вынести таблички
• @lskjs/flag – отдедельно все что связано с флагами
• @lskjs/notify – тут центрнотификация и тосты

TODO

If you could help us

How to develop

git clone git@github.com:lskjs/ux.git lskjs-ux
cd lskjs-ux
npm install
npm run bootstrap
cd packages/ui
npm run storybook

How to add new package

To create a new package with Storybook, do the following:

1. Release new package:

npm run release

2. Install it in packages/docs:

cd packages/docs
npm i package_name

3. Go to packages/docs/.storybook/contexts.js to add line with your package's name.

...
require.context('../node_modules/@lskjs/package_name', true, /.story.js$|.story.jsx$|.story.tsx$/),
...

4. Push & build docs:

git push
npm run release 

You could check before release that the npm run build-storybook in packages/docs is successful.