Coursera UI

An experiment to create reusable component library using the latest front-end technologies.

Table of Contents

• How to Use
• Libraries
• Feature List
• How to Contribute

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

• Create React App
• Storybook
• Recompose
• Aphrodite

How to Contribute

• Understanding Semantic Release

• Commit Guidelines, format and tool.

• 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

  • Airbnb React Styleguide

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

import sinon from 'sinon';
import { expect } from 'chai';

Coverage Reporting

Continuous Integration

We use Travis CI.

Deployment

Build

Something Missing?

with-styles