Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lskjs/ux
LSK.js UX – UI-kit for React
https://github.com/lskjs/ux
lego-starter-kit lsk nodejs react
Last synced: 7 days ago
JSON representation
LSK.js UX – UI-kit for React
- Host: GitHub
- URL: https://github.com/lskjs/ux
- Owner: lskjs
- License: mit
- Created: 2016-10-25T11:54:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-12T08:10:35.000Z (6 months ago)
- Last Synced: 2024-12-08T10:41:15.292Z (16 days ago)
- Topics: lego-starter-kit, lsk, nodejs, react
- Language: JavaScript
- Homepage: https://lskjs.github.io/ux/
- Size: 56 MB
- Stars: 15
- Watchers: 7
- Forks: 11
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](/blog/tutorial.md)
## [Storybook](https://lskjs.github.io/ux)
## Packages
- [@lskjs/button](./packages/button/README.md) – React компоненты для кнопки и группы кнопок
- [@lskjs/tag](./packages/tag/README.md) – React компоненты для тега и группы тегов
-----
- [@lskjs/article](./packages/article/README.md) – react компоненты для отображения статей в том числе markdown
- [@lskjs/chat](./packages/chat/README.md) – react компоненты для чата ПРИДУМКА СОНИ TODO: нужно уже оформить
- [@lskjs/dashboard](./packages/dashboard/README.md) – часто использумые react компоненты для админок и дешбордов: admin-lte/
- [@lskjs/dev](./packages/dev/README.md) – тут вспомогательные реакт компоненты для разработки и отладки
- [@lskjs/form](./packages/form/README.md) – тут реакт враперы для форм, построенные вокруг формика
- [@lskjs/form-input](./packages/form-input/README.md) – контрол формы Input
- [@lskjs/form-select](./packages/form-select/README.md) – контрол формы Select AsyncSelect
- [@lskjs/form-calendar](./packages/form-calendar/README.md) – контрол формы для календарей
- [@lskjs/form-geo](./packages/form-geo/README.md) – контрол формы для карт
- [@lskjs/form-files](./packages/form-files/README.md) – контролы формы для загрузки файлов, дропзоун, загрузка изображений и кроппер
- [@lskjs/form-phone](./packages/form-phone/README.md) – тут реакт враперы для загрузки файлов, дропзоун, загрузка изображений и кроппер
- [@lskjs/grid](./packages/grid/README.md) – тут наши реакт компоненты для сетки (по аналогии с сеткой бутстрапа)
- [@lskjs/gridtable](./packages/gridtable/README.md) – это эксперимент, таблица на гридах с watchерами mobx
- [@lskjs/link](./packages/link/README.md) – это реакт компонент для ссылок и провайдер ссылок
- [@lskjs/list](./packages/list/README.md) – это компонент для умных таблиц-списков с функциями автоподгрузки фильтрации и тп
- [@lskjs/modal](./packages/modal/README.md) – это компонент для модалок построенный на основе react-modal
- [@lskjs/navbar](./packages/navbar/README.md) – это компонент react-bootstrap навбар, адаптированный для emotion
- [@lskjs/page](./packages/page/README.md) – это компонент для разметки страниц, и прокидывания разных layout'ов для этих страниц
- [@lskjs/theme](./packages/theme/README.md) – тут тема, getter свойств темы и дефолтная тема TODO: подумать как сделать real-time загрузку
- [@lskjs/ui](./packages/ui/README.md) – тут ВСЯКАЯ ВСЯЧЕНА TODO: надо разобрать
- [@lskjs/landing](./packages/landing/README.md) – ХЗХЗХЗХЗХ
=> @lskjs/experiment?
=> .... стабильное
- [@lskjs/typo](./packages/typo/README.md) – тут типографика, реализация: цвета, формы, размеры, шрифты
- [@lskjs/progress](./packages/progress/README.md) – компонент прогресса построенный вокруг нанобара
- [@lskjs/image](./packages/image/README.md) – кейсы по работе с изображениями, аспектратио, бэекграунд, фолбеки изображений
- [@lskjs/t](./packages/t/README.md) – тут i18
- [@lskjs/table](./packages/table/README.md) – наверное вынести таблички
- [@lskjs/flag](./packages/flag/README.md) – отдедельно все что связано с флагами
- [@lskjs/notify](./packages/notify/README.md) – тут центрнотификация и тосты
## TODO
[If you could help us](TODO.md)
## How to develop
```sh
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:
```sh
npm run release
```
2. Install it in ```packages/docs```:
```sh
cd packages/docs
npm i package_name
```
3. Go to ```packages/docs/.storybook/contexts.js``` to add line with your package's name.
```js
...
require.context('../node_modules/@lskjs/package_name', true, /.story.js$|.story.jsx$|.story.tsx$/),
...
```
4. Push & build docs:
```sh
git push
npm run release
```
You could check before release that the ``` npm run build-storybook``` in ```packages/docs``` is successful.