DCOS UI component library and docs
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook chore: add a11y linting Dec 20, 2018
packages Merge branch 'master' into mp/feat/DCOS-45656-icon-sprite-generation Jan 16, 2019
scripts fix: component template Aug 22, 2018
testHelper chore(enzyme): add enzyme package Apr 12, 2018
webpack style: run prettier Apr 13, 2018
.dockerignore chore(docker): add setup with docker Mar 26, 2018
.editorconfig feat: initial setup Mar 21, 2018
.gitignore feat: generate icon sprite from folder of SVGs Jan 16, 2019
.releaserc ci(releases): replace standard-version with semantic release Aug 10, 2018
CHANGELOG.md chore(release): 1.3.0 Jul 23, 2018
CONTRIBUTING.md docs: add commit types to contributing docs May 7, 2018
Dockerfile chore(deps): update all Sep 24, 2018
Jenkinsfile ci(releases): replace standard-version with semantic release Aug 10, 2018
LICENSE Initial commit Mar 13, 2018
README.md ci(releases): replace standard-version with semantic release Aug 10, 2018
commitlint.config.js style: run prettier Apr 13, 2018
jest.config.js chore: enable global restoreMocks in jest Dec 11, 2018
package-lock.json Merge branch 'master' into mp/feat/DCOS-45656-icon-sprite-generation Jan 16, 2019
package.json Merge branch 'master' into mp/feat/DCOS-45656-icon-sprite-generation Jan 16, 2019
renovate.json chore: enable renovate autoMerge for dev deps Oct 9, 2018
tsconfig.dist.json fix: export interfaces Apr 6, 2018
tsconfig.json fix: styled types path not found Jul 11, 2018
tslint-a11y.js chore: add a11y linting Dec 20, 2018
tslint.json chore: add a11y linting Dec 20, 2018
uiKitStory.ts refactor(badge): standardize storiesOf for the ui-kit Apr 23, 2018
webpack.config.js style: run prettier Apr 13, 2018

README.md

DCOS UI Kit

Mesosphere DCOS resusable UI Kit components

Getting started

Install dependencies (Node v8+, NPM 5+)

npm i

Development

Start storybook server locally then visit http://localhost:6006/

npm start

How to setup git hooks

Run the following npm script

npm run setup:git-hooks

Linting
For linting, use your favorite code editor to enable tslint. If you use vscode you can change your workspace settings as following

{
  "eslint.enable": false,
  "jshint.enable": false,
  "tslint.enable": true,
  "tslint.jsEnable": false,
  "tslint.run": "onType"
}

New component

To generate a new component run the command

npm run create:component ComponentName

Unit Testing

npm test

Use test:watch if you want the tests to run automatically when a file changes:

npm run test:watch

You can even pass parameters to the test engine (in this case jest), when you, for instance, want to run a single spec, for example, badge:

npm run test -- --watch badge

Writing unit tests
A recommended reading is Better Specs, we put real effort in making sure we follow these guidelines. Some of the most common ones to follow:

  • Single Expectation test: Every unit test should verify one behavior.
  • Keep your descriptions concise (bellow 40 chars ideally): One easy way to achieve this one is avoiding using "should" (e.g. "it does not use should" instead of "it should not contain should").
  • Create the data you need: If you have a more complicated scenario, generate the data that is relevant to that particular case.

For more on this topic, and examples we recommend Better Specs.

import React from "react";
import Badge from '../badge';
import renderer from 'react-test-renderer';

describe('Badge', () => {
  it("match default badge component", () => {
    expect(renderer
    .create(<Badge>default</Badge>)
    .toJSON()).toMatchSnapshot()
  });
});

Commits

You should follow conventional commit formatting rules, as they provide a framework to write explicit messages that are easy to comprehend when looking through the project history and enable automatic change log generation.

These Guidelines got written based on AngularJS Git Commit Message Conventions.

<type>[optional scope]: <description>

[optional body]

[optional footer]

Release / Publishing

After your PR gets merged to master, semantic-release will automatically cut a release.