Merge pull request #3 from instat/storybook-config

Storybook config

.eslintignore

@@ -1,4 +1,4 @@
 src/types/*
-src/api/operations/*/operation.tsx
+src/api/operations/**/*.tsx
 src/react-app-env.d.ts
 src/serviceWorker.ts

.eslintrc

@@ -38,7 +38,12 @@
     "import/no-duplicates": "warn",
     "import/no-extraneous-dependencies": [
       "warn",
-      { "devDependencies": ["src/setupTests.ts"] }
+      {
+        "devDependencies": [
+          "src/setupTests.ts",
+          "src/**/stories.tsx"
+        ]
+      }
     ],
     "jsx-quotes": [
       "warn",

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ['../src/features/**/stories.(tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/preset-create-react-app',
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};

package.json

@@ -10,7 +10,9 @@
     "test:watch": "react-scripts test --testMatch '**/__tests__/*'",
     "eject": "react-scripts eject",
     "generate": "graphql-codegen --config codegen.yml",
-    "lint": "eslint 'src/**/*.{ts,tsx}'"
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@apollo/react-common": "^3.1.4",
@@ -31,6 +33,13 @@
     "@graphql-codegen/typescript": "1.15.0",
     "@graphql-codegen/typescript-operations": "1.15.0",
     "@graphql-codegen/typescript-react-apollo": "1.15.0",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.0.0",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^5.3.19",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -49,9 +58,11 @@
     "eslint-plugin-react-hooks": "2.5.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.4",
     "eslint-plugin-typescript-sort-keys": "^1.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.6",
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
+    "ts-loader": "^7.0.5",
     "typescript": "^3.9.3"
   },
   "config": {

src/features/Button/index.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react'
+
+type ButtonProps = {
+  children: ReactNode,
+
+  /**
+   * Simple click handler
+   */
+  onClick?: () => void,
+}
+
+/**
+ * The world's most _basic_ button
+ */
+export const Button = ({ children, onClick }: ButtonProps) => (
+  <button onClick={onClick} type='button'>
+    {children}
+  </button>
+)

src/features/Button/stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { action } from '@storybook/addon-actions'
+
+import { Button } from 'features/Button'
+
+export default {
+  component: Button,
+  title: 'Button',
+}
+
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>
+
+export const Emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role='img' aria-label='so cool'>
+      😀 😎 👍 💯
+    </span>
+  </Button>
+)