coursera-ui v0.0.0-semantically-released-test
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 storiesnpm start
Run the actual appnpm run test
Run all the tests in tests directory and eslintnpm run test:only
Run tests without eslintnpm run test:w
Watch and run the testsnpm run lint
Lint the js files using airbnb's eslint and flow confignpm run lint:fix
Lint and try to fix some basic linting errorsnpm run publish-storybook
Will publish the story at https://vidaaudrey.github.io/coursera-uiRequired 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
- 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
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?
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago