diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..cd74759 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,11 @@ +module.exports = { + "stories": [ + "../src/**/*.stories.mdx", + "../src/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/preset-create-react-app" + ] +} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..5d00c02 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,4 @@ + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, +} \ No newline at end of file diff --git a/package.json b/package.json index c6d7cff..cf70901 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,9 @@ "setup-mysql-dev": "yarn mysql-dev < scripts/setup-mysql-dev-constants.sql && yarn mysql-dev < scripts/setup-mysql-dev-schema.sql", "build-cached-data": "node -r dotenv/config scripts/build-cached-data.js", "cache-asset-manifests": "node -r dotenv/config scripts/cache-asset-manifests.js", - "export-users-to-auth0": "node -r dotenv/config scripts/export-users-to-auth0.js" + "export-users-to-auth0": "node -r dotenv/config scripts/export-users-to-auth0.js", + "storybook": "start-storybook -p 6006 -s public", + "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": "react-app" @@ -68,14 +70,23 @@ ] }, "devDependencies": { + "@babel/core": "^7.11.6", + "@storybook/addon-actions": "^6.0.21", + "@storybook/addon-essentials": "^6.0.21", + "@storybook/addon-links": "^6.0.21", + "@storybook/node-logger": "^6.0.21", + "@storybook/preset-create-react-app": "^3.1.4", + "@storybook/react": "^6.0.21", "apollo-server-testing": "^2.12.0", "auth0": "^2.28.0", + "babel-loader": "^8.1.0", "customize-cra": "^1.0.0", "customize-cra-react-refresh": "^1.1.0", "dotenv-cli": "^3.1.0", "es6-promise-pool": "^2.5.0", "inquirer": "^7.3.3", "prettier": "^2.0.5", - "react-app-rewired": "^2.1.6" + "react-app-rewired": "^2.1.6", + "react-is": "^16.13.1" } } diff --git a/src/stories/Button.js b/src/stories/Button.js new file mode 100644 index 0000000..15dde39 --- /dev/null +++ b/src/stories/Button.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; + +Button.propTypes = { + /** + * Is this the principal call to action on the page? + */ + primary: PropTypes.bool, + /** + * What background color to use + */ + backgroundColor: PropTypes.string, + /** + * How large should the button be? + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * Button contents + */ + label: PropTypes.string.isRequired, + /** + * Optional click handler + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js new file mode 100644 index 0000000..7fee217 --- /dev/null +++ b/src/stories/Button.stories.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import { Button } from './Button'; + +export default { + title: 'Example/Button', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +const Template = (args) =>