Initial implementation of theme structure

.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 };