1.1.7 • Published 6 years ago

tmone-core-react v1.1.7

Weekly downloads
8
License
UNLICENSED
Repository
-
Last release
6 years ago

TM One UI Core React

TMOne Core: React flavour

Installation

npm install @ticketmaster/tmone-core-react --save

Contribute

  1. Clone repository
  2. Run yarn to install dependencies
  3. Run yarn dev to work on the modules (found under ./src)

Available npm scripts

  • yarn dev - runs storybook in development mode
  • yarn sb - Runs builds and serves storybook locally on port 5000
  • yarn test - runs all the unit tests once
  • yarn test:watch - runs the unit tests watcher in interactive mode
  • yarn lint:js - runs the ESLint JS code quality checker
  • yarn lint:css - runs the Stylelint Styled Components code quality checker
  • yarn prepublish - runs babel code transformation and prepares code for npm registry. Will be activated automatically on publish
  • yarn precommit - runs lint-staged pre-commit code checker. Will be activated automatically on commit

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