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 = () => ( + +)