Skip to content

Latest commit

 

History

History
93 lines (76 loc) · 5.71 KB

README.md

File metadata and controls

93 lines (76 loc) · 5.71 KB
Raw

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 [email protected]: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
  1. Install it in packages/docs:
cd packages/docs
npm i package_name
  1. 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$/),
...
  1. Push & build docs:
git push
npm run release

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