Coursera UI
An experiment to create reusable component library using the latest front-end technologies.
Table of Contents
How to Use
-
Clone the repo and run
npm install
-
npm run storybook
and visit http://localhost:9000 (depends on the availability) and you'll see the stories -
npm start
Run the actual app -
npm run test
Run all the tests in tests directory and eslint -
npm run test:only
Run tests without eslint -
npm run test:w
Watch and run the tests -
npm run lint
Lint the js files using airbnb's eslint and flow config -
npm run lint:fix
Lint and try to fix some basic linting errors -
npm run publish-storybook
Will publish the story at https://vidaaudrey.github.io/coursera-ui -
Required Global Installations
npm install -g semantic-release-cli getstorybook
Feature List
Utilities
- Reset Reboot
Components
Basic
- Avatar
- Chip / ChipList
- Progress
- StaticLinearProgress
- StepProgress
- Modal
- ProgressButton
- ButtonGroup
- IconButton
- Table
- Rating
- Form
- TextField
- SearchInput
- Toggle
- Input ref
- Checkbox
- Radio
- Select / Dropdown
- Button
- ButtonLink
- Label
- Link
- Icon
- Card
- Grid, Layout
- TextBox, Typography (remove all margin tops, have 0.5rem margin bottom)
- List
- Divider
- Dialog/Modal
- Blockquote
- Nav
- Tag
- Affix ?
Extended
- FixedContainer
- SmartScrollWrapper
- TextTruncate
- Slider
- Select
- Step
- BackTop
- Collapse
- Pagination
- Notification
- Jumbotron
- Alert
- Tooltip
- Popover
- Tabs
- Badge
- Loader
- Drawer
- HeaderPanel
- Validated form inputs
- EmailInput
- PhoneInput
- AddressInput
- ZipInput
- CreditCardInput
- List
- Draggable
- StepList
- Breadcrumb
- Media
- EditableInput
- LoginForm
- LogoutForm
- CreditCard
- VideoPlayer
- FileDrop
- Uploaders
- FileUploader
- ImageUploader
- VideoUploader (need additional processing)
- ProgressBar
- Collapsible
- Scrollable
- ShoppingCart
- Menu
- AutoComplete
- Ellipsis
- Carousel
- PopConfirm ref
- Timeline ref
- CopyToClipboard
Animation & Transition
Super Rich Components
- SyntaxHighlighter
- MarkdownViewer
- Calendar
- DocPreview
Charts
- Donut
- Bar
- Timeseries
- ....
Vendor Services
- GoogleMap
- Transloader
- Imgix
Composables (align with recompose)
- withApiHandler
- withBranches
- withBreakPoint
- withIsMounted
- withResponsiveConfig
- withScrollInfo
- withScrollTo
- withTheme
- withRoute
- withHover (add mouse over and leave to existing component)
- ....
Common States and Behaviors
- Key interaction
- API State: API_BEFORE_SEND, API_IN_PROGRESS, API_SUCCESS, API_ERROR
Libraries
How to Contribute
-
Commit Types. RefAngular Git Commit Guidelines
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes style: Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing tests
- chore: Changes to the build process or auxiliary tools and libraries such as - documentation generation
- build: changes that affect the build system or external dependencies
- ci: changes to travis
- revert: revert a previous commit
-
Scopes
- TODO
-
Styleguides
Documentation
We use git wiki to manage all our documentations. You can edit it online or within our repo's docs directory. How to use git wiki as submodule
Testing
;;
Coverage Reporting
Continuous Integration
We use Travis CI.