Adds initial work on theme structure.

Adds initial work theme colors, spacing, radius and typography.

Adds typography sizes

WIP - Feedback

Adds rebass

Adds initial theme changes

Adds theme provider to stories

Moves stories to ts

Adds button variants and placeholder colors

Visualizes palette

Adds font weights, space, radius and buttons

Cleans up variants file

Updates palette display

Moves theme to root

Cleans up some type definitions

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-build
+storybook-static
+build
+lib

.storybook/config.js

@@ -1,13 +1,22 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components'
 import { configure } from '@storybook/react';
 import { setAddon, addDecorator } from '@storybook/react';
 import JSXAddon from 'storybook-addon-jsx';
 import { withInfo } from '@storybook/addon-info';
 
+import { Theme } from "../theme/index";
+
 setAddon(JSXAddon);
 addDecorator(withInfo);
+addDecorator(story => (
+  <ThemeProvider theme={Theme}>
+    {story()}
+  </ThemeProvider>
+))
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../src', true, /.stories.js$/);
+const req = require.context('../src', true, /\.stories\.tsx$/);
 function loadStories() {
   req.keys().forEach(req);
 }

.storybook/webpack.config.js

@@ -5,8 +5,8 @@ const styledComponentsTransformer = createStyledComponentsTransformer();
 
 module.exports = ({ config, mode }) => {
   config.module.rules.push({
-    test: /\.tsx?$/,
-    include: path.resolve(__dirname, "../src"),
+    test: /\.(ts|tsx)$/,
+    include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../theme")],
     use: [
     {
       loader: require.resolve("awesome-typescript-loader"),

package.json

@@ -4,13 +4,15 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.4.3",
     "@storybook/addon-actions": "^5.0.10",
     "@storybook/addon-info": "^5.0.10",
     "@storybook/addon-links": "^5.0.10",
     "@storybook/addons": "^5.0.10",
     "@storybook/react": "^5.0.10",
     "@types/jest": "^23.3.10",
     "@types/react-test-renderer": "^16.0.3",
+    "@types/rebass": "^3.0.3",
     "@types/storybook__react": "^4.0.1",
     "@types/styled-components": "^4.1.2",
     "awesome-typescript-loader": "^5.2.1",
@@ -28,12 +30,13 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "rebass": "^3.1.0",
     "styled-components": "^4.1.2"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "check-types": "tsc",
+    "compile": "tsc",
     "test": "jest"
   }
-}
+}

src/button/__tests__/button.test.tsx

@@ -5,7 +5,9 @@ import { Button } from "../index";
 
 describe("Button test suite", () => {
   test("Snapshot test", () => {
-    const tree = renderer.create(<Button>Facebook</Button>).toJSON();
+    const tree = renderer
+      .create(<Button variant="primary">Facebook</Button>)
+      .toJSON();
 
     expect(tree).toMatchSnapshot();
   });

src/button/button.stories.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+
+import { Button } from "./index";
+
+const stories = storiesOf("Button", module);
+
+stories
+  .add("Primary", () => <Button variant="primary">Hello TypeScript</Button>, {
+    info: { inline: true }
+  })
+  .add(
+    "Secondary",
+    () => <Button variant="secondary">Hello TypeScript</Button>,
+    {
+      info: { inline: true }
+    }
+  )
+  .add(
+    "Disabled",
+    () => (
+      <Button variant="primary" isDisabled={true}>
+        Hello TypeScript
+      </Button>
+    ),
+    {
+      info: { inline: true }
+    }
+  );

src/button/index.tsx

@@ -1,10 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
-
-const StyledButton = styled.button`
-  background-color: blue;
-  font-size: 20px;
-`;
+import { Button as BaseButton } from "rebass";
 
 export interface Props {
   /** Children to be rendered. */
@@ -15,16 +10,25 @@ export interface Props {
    * @default false
    */
   isDisabled?: boolean;
+  /**
+   * Type of display that the button should be shown.
+   *
+   * @default primary
+   */
+  variant: string;
 }
 
 function Button(props: Props) {
   return (
-    <StyledButton disabled={props.isDisabled}>{props.children}</StyledButton>
+    <BaseButton variant={props.variant} disabled={props.isDisabled}>
+      {props.children}
+    </BaseButton>
   );
 }
 
 Button.defaultProps = {
-  isDisabled: false
+  isDisabled: false,
+  variant: "primary"
 };
 
 export { Button };