https://github.com/roistat/react-ui
Work in progress
https://github.com/roistat/react-ui
components elements react reactjs ui uikit
Last synced: 7 months ago
JSON representation
Work in progress
- Host: GitHub
- URL: https://github.com/roistat/react-ui
- Owner: roistat
- Created: 2016-07-15T15:39:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-24T09:31:16.000Z (about 3 years ago)
- Last Synced: 2025-05-30T16:25:56.384Z (9 months ago)
- Topics: components, elements, react, reactjs, ui, uikit
- Language: JavaScript
- Homepage: https://roistat.github.io/react-ui/
- Size: 3.22 MB
- Stars: 8
- Watchers: 5
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## roistat-react-UI - библиотека компонентов пользовательского интерфейса
### Необходимая экосистема
* React JS
* Webpack
* Babel
* ES6
* Flowtype
### Установка
##### Новая установка
```sh
$ git clone https://github.com/roistat/react-ui.git
$ cd react-ui
$ npm i
```
##### Установка в существующий проект
```sh
$ npm i @roistat/ui --save
```
```js
import Button from '@roistat/ui/lib/Button'
```
### Запуск
##### Запуск документации и примеров
```sh
$ npm run docs
```
> примеры с документацией будут доступны http://localhost:3000 →
##### Запуск react-storybook для разработки компонентов в изолированной среде
```sh
$ npm run storybook
```
> кейсы использования storybook будут доступны http://localhost:9010 →
> узнать что такое react-storybook →
### Основные компоненты
* Button, Primary Button
* TextInput
* Modal
* Popover
### Вспомогательные компоненты
* Teleport
* Placer
* Transition
* Toggler
### Структура проека
```
├── roistat-ui/ //корневая директория
│ │
│ ├── .storybook/ //конфиграция storybook
│ │
│ ├── assets/ //статические файлы для сборки storybook и документации
│ │
│ ├── docs/ //документация для разработчика
│ │
│ ├── lib/ //внешние библиотеки
│ │
│ ├── src/
│ │
│ │ ├── Button //папка компонента
│ │ │ └── Button.jsx //файл реализации компонента
│ │ │ └── index.js //индексный файл для подключения компонента
│ │ │ └── story.jsx //кейсы использования
│ │ │ └── Readme.md //примеры использования компонента и дополнительная документация
│ │ ├── const //константы
│ │ ...
│ │ └── helpers/ //библиотека вспомогательных функций
│ │ ├── styles //библиотека для работы со стилями
│ │ └── addEventListener.js //listener для не реакт DOM событий
│ │
└── └── .babelrc //конфиг Babel
│ │
└─ └── package.json.html
│ │
└─ └── styleguide.config.js //пример webpack-конфига
```