Skip to content

lskjs/ux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

474f46c · Jun 12, 2024
Feb 15, 2021
Dec 7, 2020
Aug 19, 2021
Feb 3, 2021
Dec 28, 2020
Jun 12, 2024
Feb 12, 2021
Feb 10, 2020
Feb 3, 2021
Feb 12, 2021
Apr 8, 2019
Feb 7, 2021
Feb 7, 2021
May 18, 2021
Feb 10, 2020
Feb 12, 2021
Jun 12, 2024
Feb 3, 2021
Aug 24, 2020
Apr 8, 2019
Feb 15, 2021
Feb 3, 2021
Jun 12, 2024
Aug 19, 2021
Aug 11, 2021
Feb 12, 2021
Feb 12, 2021

Repository files navigation

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, это необходимо, когда мы линкуем пакеты к реальному проекту и тестриуем в живой среде

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
  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.