Initial commit

Author: eluciano11

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-typescript", "@babel/preset-react"],
+  "plugins": ["styled-components"]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import 'storybook-addon-jsx/register';

.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure } from '@storybook/react';
+import { setAddon, addDecorator } from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+import { withInfo } from '@storybook/addon-info';
+
+setAddon(JSXAddon);
+addDecorator(withInfo);
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+const path = require("path");
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    include: path.resolve(__dirname, "../src"),
+    use: [
+      require.resolve("babel-loader"),
+      require.resolve("react-docgen-typescript-loader"),
+    ],
+  });
+
+  config.resolve.extensions.push(".ts", ".tsx");
+
+  return config;
+};

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  transform: {
+      ".(ts|tsx)": "ts-jest",
+  },
+  testPathIgnorePatterns: ["/node_modules/", "/lib/"],
+  testRegex: "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+  moduleFileExtensions: ["ts", "tsx", "js", "json"],
+};

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "design-system",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
+    "@babel/runtime": "^7.2.0",
+    "@storybook/addon-actions": "^4.0.12",
+    "@storybook/addon-info": "^4.0.12",
+    "@storybook/addon-links": "^4.0.12",
+    "@storybook/addons": "^4.0.12",
+    "@storybook/react": "^4.0.12",
+    "@types/jest": "^23.3.10",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/storybook__react": "^4.0.0",
+    "@types/styled-components": "^4.1.2",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-styled-components": "^1.9.2",
+    "jest": "^23.6.0",
+    "react-docgen-typescript-loader": "^3.0.0",
+    "react-test-renderer": "^16.6.3",
+    "storybook-addon-jsx": "^6.0.0",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.2"
+  },
+  "dependencies": {
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "styled-components": "^4.1.2"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "check-types": "tsc",
+    "test": "jest"
+  }
+}

src/button/__tests__/__snapshots__/button.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button test suite Snapshot test 1`] = `
+<button
+  className="sc-bdVaJa igACHl"
+  disabled={false}
+>
+  Facebook
+</button>
+`;

src/button/__tests__/button.test.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as renderer from "react-test-renderer";
+
+import { Button } from "../index";
+
+describe("Button test suite", () => {
+  test("Snapshot test", () => {
+    const tree = renderer.create(<Button>Facebook</Button>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/button/button.stories.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+
+import { Button } from "./index";
+
+const stories = storiesOf("Button", module);
+
+stories
+  .add("with text", () => <Button>Hello TypeScript</Button>, {
+    info: { inline: true }
+  })
+  .add(
+    "with text disabled",
+    () => <Button isDisabled={true}>Hello TypeScript</Button>,
+    {
+      info: { inline: true }
+    }
+  );