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

importButtonfrom'@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-конфига

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