feat: initial setup

Initial setup including demo component, typescript,
Motion css, Storybook, Webpack, Auto generate changelog,
Commitling and TSlinting.

.editorconfig

@@ -0,0 +1,23 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+max_line_length = 80
+tab_width = 2
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.js]
+continuation_indent_size = 2
+indent_brace_style = OTBS
+quote_type = double
+spaces_around_operators = true
+spaces_around_brackets = false
+
+[*.less]
+quote_type = double

.gitignore

@@ -1,59 +1,14 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
+.DS_Store
+*.iml
+.idea/*
+!dist/
+dist/*
+results/
+build/
+npm-debug.log
 node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
+serve
+tmp/
+.vscode/
 .env
 

.storybook/addons.js

@@ -0,0 +1,4 @@
+import "storybook-readme/register";
+import '@storybook/addon-knobs/register'
+import "@storybook/addon-options/register";
+import "@storybook/addon-actions/register";

.storybook/config.js

@@ -0,0 +1,30 @@
+const req = require.context("./../components", true, /.stories.tsx$/);
+
+import { configure, setAddon, addDecorator } from "@storybook/react";
+import { withKnobs } from "@storybook/addon-knobs/react";
+import { setOptions } from "@storybook/addon-options";
+import infoAddon, { setDefaults } from "@storybook/addon-info";
+
+addDecorator(withKnobs);
+setAddon(infoAddon);
+
+setOptions({
+  name: "Mesosphere UI Kit",
+  url: "#",
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: true,
+  showSearchBox: false,
+  downPanelInRight: true,
+});
+
+setDefaults({
+  header: true,
+  inline: true
+})
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,17 @@
+const webpack = require("webpack");
+const webpackBase = require("./../webpack/webpack.base");
+// load the default config generator.
+const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js");
+
+module.exports = (baseConfig, env) => {
+  const config = genDefaultConfig(baseConfig, env);
+
+  config.devtool = webpackBase.getDevTool();
+  config.module.rules = config.module.rules.concat(webpackBase.getRules());
+  config.plugins = config.plugins.concat(webpackBase.getPlugins());
+  config.resolve.extensions = config.resolve.extensions.concat(
+    webpackBase.getExtensions()
+  );
+
+  return config;
+};

README.md

@@ -1,2 +1,19 @@
-# ui-kit
-DCOS UI component library and docs
+# Design System
+
+Mesosphere design system prototype
+
+### How to build
+
+**Requirements**
+1. Install dependencies (Node v8+, NPM 5+)
+```bash
+npm i
+```
+
+**Storybook server**
+1. Run server
+```bash
+npm start
+```
+
+2. Visit `http://localhost:6006/`

commitlint.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    "@commitlint/config-conventional"
+  ]
+};

components/badge/README.md

@@ -0,0 +1,51 @@
+# Badges
+
+Badges are a lightweight method of annotating or labeling content. Wrap content in the `.badge` class to add an inline badge. The font-size and line-height of a badge inherit from that of it's parent's properties.
+
+```
+<span class="badge">
+  Badge
+</span>
+```
+
+Badge States
+
+You may wish to display more than the single badge type, either to create separation in the importance of various actions or to communicate the state of an action or form.  badge states make this super easy.
+
+```
+<!-- badge: Default -->
+<span class="badge">
+  Default
+</span>
+
+<!-- badge: Success -->
+<span class="badge badge-success">
+  Success
+</span>
+
+<!-- badge: Info -->
+<span class="badge badge-info">
+  Info
+</span>
+
+<!-- badge: Warning -->
+<span class="badge badge-warning">
+  Warning
+</span>
+
+<!-- badge: Danger -->
+<span class="badge badge-danger">
+  Danger
+</span>
+```
+
+# Rounded Badge
+
+Add the class `.badge-rounded` to any `.badge` element to display it with rounded caps.
+
+```
+<!-- badge: Default -->
+<span class="badge badge-rounded">
+  Default
+</span>
+```

components/badge/badge.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { badge } from "./style";
+
+export interface IBadgeProps {
+  appearance?: string;
+  children?: React.ReactNode | string;
+}
+
+export class Badge extends React.PureComponent<IBadgeProps, {}> {
+  public static defaultProps: Partial<IBadgeProps> = {
+    appearance: "default"
+  };
+
+  public render() {
+    const { appearance, children } = this.props;
+
+    return <span className={badge(appearance)}>{children}</span>;
+  }
+}
+
+export default Badge;

components/badge/index.ts

@@ -0,0 +1,3 @@
+import Badge from "./badge";
+
+export default Badge;

components/badge/stories/badge.stories.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import Badge from "../badge";
+
+const BadgeReadme = require("../README.md");
+
+storiesOf("Badge", module)
+  .addDecorator(withReadme([BadgeReadme]))
+  .addWithInfo("default", () => <Badge>default</Badge>)
+  .addWithInfo("success", () => <Badge appearance="success">success</Badge>)
+  .addWithInfo("information", () => <Badge appearance="information">information</Badge>)
+  .addWithInfo("warning", () => <Badge appearance="warning">warning</Badge>)
+  .addWithInfo("danger", () => <Badge appearance="danger">danger</Badge>)

components/badge/style.ts

@@ -0,0 +1,49 @@
+import { css } from "emotion";
+import { getColors, getFonts } from "../../shared/style";
+
+const badgeAppearances = {
+  "default": css`
+    background-color: ${getColors().greyLight};
+    border-color: ${getColors().greyLight};
+    color: #1b2029;
+  `,
+  "success": css`
+    background-color: #14c684;
+    border-color: #14c684;
+    color: #ffffff;
+  `,
+  "information": css`
+    background-color: #157ff2;
+    border-color: #157ff2;
+    color: #ffffff;
+  `,
+  "warning": css`
+    background-color: #f56753;
+    border-color: #f56753;
+    color: #ffffff;
+  `,
+  "danger": css`
+    background-color: #eb293a;
+    border-color: #eb293a;
+    color: #ffffff;
+  `
+};
+
+export const badge = (appearance) => {
+  return css`
+    ${badgeAppearances[appearance]};
+    border-width: 1px;
+    border-style: solid;
+    padding-left: 8px;
+    padding-right: 8px;
+    font-size: 80%;
+    line-height: inherit;
+    font-family: ${getFonts().fontFamilySansSerif};
+    text-decoration: none;
+    text-rendering: optimizeLegibility;
+    border-radius: 4px;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  `;
+}

components/index.ts

@@ -0,0 +1,5 @@
+import Badge from "./badge";
+
+export {
+  Badge
+};