roistat-react-UI - библиотека компонентов пользовательского интерфейса

Необходимая экосистема

• React JS
• Webpack
• Babel
• ES6
• Flowtype

Установка

Новая установка

$ git clone https://github.com/roistat/react-ui.git
$ cd react-ui
$ npm i

Установка в существующий проект

$ npm i @roistat/ui --save

import Button from '@roistat/ui/lib/Button'

Запуск

Запуск документации и примеров

$ npm run docs

примеры с документацией будут доступны http://localhost:3000 →

Запуск react-storybook для разработки компонентов в изолированной среде

$ 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-конфига

Рекомендации по разработке компонентов →