Huge customizeble React-based framework with many cases.
это монореп (управляется lenrа'ой), для фронтовых компонентов, тут нет никакого серверного кода и поэтому нету .env
нас интересует в данный момент ui
npm run dev
- делает просто сборку src=>build, это необходимо, когда мы линкуем пакеты к реальному проекту и тестриуем в живой среде
- @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 – тут центрнотификация и тосты
git clone git@github.com:lskjs/ux.git lskjs-ux
cd lskjs-ux
npm install
npm run bootstrap
cd packages/ui
npm run storybook
To create a new package with Storybook, do the following:
- Release new package:
npm run release
- Install it in
packages/docs
:
cd packages/docs
npm i package_name
- 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$/),
...
- Push & build docs:
git push
npm run release
You could check before release that the npm run build-storybook
in packages/docs
is successful.