Added storybook base + Sample Component

.eslintrc

@@ -0,0 +1,53 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "airbnb-typescript/base",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {
+        "directory": "./src"
+      }
+    }
+  },
+  "rules": {
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/interface-name-prefix": "always",
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "no-console": [
+      "warn",
+      {
+        "allow": ["error"]
+      }
+    ],
+    "import/no-extraneous-dependencies": "off",
+    "import/named": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "globals": {
+    "window": false,
+    "document": false
+  }
+}

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 
+storybook-static
+
 .env

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from "@storybook/react";
+
+const req = require.context("../src", true, /.stories.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,21 @@
+module.exports = ({ config }) => {
+  config.module.rules.push(
+    {
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve("awesome-typescript-loader")
+        },
+        { loader: require.resolve("react-docgen-typescript-loader") }
+      ]
+    },
+    // lint
+    {
+      test: /(\.ts$|\.tsx?$)/,
+      exclude: /node_modules/,
+      use: ["eslint-loader"]
+    }
+  );
+  config.resolve.extensions.push(".ts", ".tsx");
+  return config;
+};

jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  reporters: [
+    "default",
+    [
+      "jest-junit",
+      {
+        suiteName: "JUnit",
+        output: "junit.xml",
+        includeConsoleOutput: true
+      }
+    ]
+  ],
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  globals: {
+    NODE_ENV: "test"
+  },
+  collectCoverage: true,
+  collectCoverageFrom: [
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/node_modules/**",
+    "!**/types/**"
+  ],
+  coveragePathIgnorePatterns: [".stories.tsx", ".style.ts"],
+  coverageDirectory: "./test-results",
+  // Testing setup files.
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"]
+};

package.json

@@ -35,6 +35,8 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "jest": "^24.8.0",
+    "jest-dom": "^3.5.0",
+    "jest-junit": "^6.4.0",
     "prettier": "^1.18.2",
     "react": "^16.8.6",
     "react-docgen-typescript-loader": "^3.1.0",
@@ -44,6 +46,7 @@
     "typescript": "^3.5.2"
   },
   "dependencies": {
-    "@storybook/react": "^5.1.9"
+    "@storybook/react": "^5.1.9",
+    "babel-loader": "^8.0.6"
   }
 }

src/SampleComponent/SampleComponent.component.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const SampleComponent: React.FC<any> = () => {
+  return <button>Submit</button>;
+};
+
+export default SampleComponent;

src/SampleComponent/SampleComponent.stories.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import Sample from "./SampleComponent.component";
+
+storiesOf("Sample", module).add("Sample button", () => {
+  return <Sample />;
+});

src/setupTests.ts

@@ -0,0 +1,6 @@
+/**
+ * Setup test environment for testing-library/react
+ */
+
+import "@testing-library/react/cleanup-after-each";
+import "jest-dom/extend-expect";

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "outDir": "build/lib",
+    "types": ["react", "jest"],
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "baseUrl": "src",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build", "scripts"]
+}