1.1.7 • Published 6 years ago
tmone-core-react v1.1.7
TM One UI Core React
TMOne Core: React flavour
Installation
npm install @ticketmaster/tmone-core-react --save
Contribute
- Clone repository
- Run
yarn
to install dependencies - Run
yarn dev
to work on the modules (found under ./src)
Available npm scripts
yarn dev
- runs storybook in development modeyarn sb
- Runs builds and serves storybook locally on port 5000yarn test
- runs all the unit tests onceyarn test:watch
- runs the unit tests watcher in interactive modeyarn lint:js
- runs the ESLint JS code quality checkeryarn lint:css
- runs the Stylelint Styled Components code quality checkeryarn prepublish
- runs babel code transformation and prepares code for npm registry. Will be activated automatically onpublish
yarn precommit
- runs lint-staged pre-commit code checker. Will be activated automatically oncommit
Before UI components usage in your apps include require CSS files to <head>
tag:
- normalize.css - define global browsers normalize rules (required)
- typography.css - define global page typography (required)
- datepicker.css - define basic DatePicker component styles (optional, use it if you import DatePicker components)
Reusable UI components list
- Typography - basic applications typography
- Color Palette - basic application color palette
- Page - Page structure components set
- Grid - Flex grid components set
- Resizable Wrapper - component with resizable controls
- Button - Button component
- Label - Label component
- Input - Input form component
- TextArea - TextArea form component
- Select - Select form component
- Search - Search input component
- Checkbox - Checkbox form component
- Radio - Radio form component
- Icon - Icon component
- Button Icon - Button Icon component
- Tabs Group - Tabs Group component
- SectionHeader - Section Header component
- Loader - Loading indicator component
- Modal - Modal component
- Alert - Alert modal component
- Data Table - Data Table components set
- Date Picker - Date/Range Picker components set
Technical stack
- Storybook
- React / Styled Components
- Webpack / Babel
- Jest / Enzyme
- ES6+ syntax