diff --git a/.eslintrc b/.eslintrc
index d821bc4b..ba2e2041 100644
--- a/.eslintrc
+++ b/.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",
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 00000000..ab7f9c40
--- /dev/null
+++ b/.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,
+ },
+ },
+ ],
+};
diff --git a/package.json b/package.json
index e6968d2e..226771b8 100644
--- a/package.json
+++ b/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": {
diff --git a/src/features/Button/index.tsx b/src/features/Button/index.tsx
new file mode 100644
index 00000000..3a2a000d
--- /dev/null
+++ b/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) => (
+
+)
diff --git a/src/features/Button/stories.tsx b/src/features/Button/stories.tsx
new file mode 100644
index 00000000..bce6188c
--- /dev/null
+++ b/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 = () =>
+
+export const Emoji = () => (
+
+)