From f58e5ef838199ea134134d51d44da828b3044d8f Mon Sep 17 00:00:00 2001 From: Ivan Kordonets Date: Fri, 8 Dec 2023 16:54:05 -0500 Subject: [PATCH 1/5] add storybook components --- .storybook/main.js | 22 ++ .storybook/preview.js | 14 + package-lock.json | 17 +- src/js/common/components/Style/Colors.js | 12 + src/js/common/stories/Button.jsx | 50 +++ src/js/common/stories/Button.stories.js | 88 +++++ src/js/common/stories/Configure.mdx | 364 ++++++++++++++++++ src/js/common/stories/Header.jsx | 59 +++ src/js/common/stories/Header.stories.js | 22 ++ src/js/common/stories/Page.jsx | 69 ++++ src/js/common/stories/Page.stories.js | 28 ++ .../common/stories/assets/accessibility.png | Bin 0 -> 42336 bytes .../common/stories/assets/accessibility.svg | 5 + .../common/stories/assets/addon-library.png | Bin 0 -> 467366 bytes src/js/common/stories/assets/assets.png | Bin 0 -> 3899 bytes .../stories/assets/avif-test-image.avif | Bin 0 -> 829 bytes src/js/common/stories/assets/context.png | Bin 0 -> 6119 bytes src/js/common/stories/assets/discord.svg | 15 + src/js/common/stories/assets/docs.png | Bin 0 -> 27875 bytes src/js/common/stories/assets/figma-plugin.png | Bin 0 -> 44246 bytes src/js/common/stories/assets/github.svg | 3 + src/js/common/stories/assets/share.png | Bin 0 -> 40767 bytes src/js/common/stories/assets/styling.png | Bin 0 -> 7237 bytes src/js/common/stories/assets/testing.png | Bin 0 -> 49313 bytes src/js/common/stories/assets/theming.png | Bin 0 -> 44374 bytes src/js/common/stories/assets/tutorials.svg | 12 + src/js/common/stories/assets/youtube.svg | 4 + src/js/common/stories/button.css | 30 ++ src/js/common/stories/header.css | 32 ++ src/js/common/stories/page.css | 69 ++++ src/js/components/Buttons/BaseButton.jsx | 88 +++++ 31 files changed, 999 insertions(+), 4 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 src/js/common/components/Style/Colors.js create mode 100644 src/js/common/stories/Button.jsx create mode 100644 src/js/common/stories/Button.stories.js create mode 100644 src/js/common/stories/Configure.mdx create mode 100644 src/js/common/stories/Header.jsx create mode 100644 src/js/common/stories/Header.stories.js create mode 100644 src/js/common/stories/Page.jsx create mode 100644 src/js/common/stories/Page.stories.js create mode 100644 src/js/common/stories/assets/accessibility.png create mode 100644 src/js/common/stories/assets/accessibility.svg create mode 100644 src/js/common/stories/assets/addon-library.png create mode 100644 src/js/common/stories/assets/assets.png create mode 100644 src/js/common/stories/assets/avif-test-image.avif create mode 100644 src/js/common/stories/assets/context.png create mode 100644 src/js/common/stories/assets/discord.svg create mode 100644 src/js/common/stories/assets/docs.png create mode 100644 src/js/common/stories/assets/figma-plugin.png create mode 100644 src/js/common/stories/assets/github.svg create mode 100644 src/js/common/stories/assets/share.png create mode 100644 src/js/common/stories/assets/styling.png create mode 100644 src/js/common/stories/assets/testing.png create mode 100644 src/js/common/stories/assets/theming.png create mode 100644 src/js/common/stories/assets/tutorials.svg create mode 100644 src/js/common/stories/assets/youtube.svg create mode 100644 src/js/common/stories/button.css create mode 100644 src/js/common/stories/header.css create mode 100644 src/js/common/stories/page.css create mode 100644 src/js/components/Buttons/BaseButton.jsx diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 000000000..74d51c31e --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,22 @@ +/** @type { import('@storybook/react-webpack5').StorybookConfig } */ +const config = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-onboarding", + "@storybook/addon-interactions", + ], + framework: { + name: "@storybook/react-webpack5", + options: { + builder: { + useSWC: true, + }, + }, + }, + docs: { + autodocs: "tag", + }, +}; +export default config; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 000000000..1f07be963 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,14 @@ +/** @type { import('@storybook/react').Preview } */ +const preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/package-lock.json b/package-lock.json index 102058d73..f040d4658 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38815,7 +38815,7 @@ "get-func-name": "^2.0.2", "loupe": "^2.3.6", "pathval": "^1.1.1", - "type-detect": "^4.0.5" + "type-detect": "^4.0.8" } }, "chainsaw": { @@ -42229,9 +42229,9 @@ "dev": true }, "get-func-name": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", - "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz", + "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==", "dev": true }, "get-intrinsic": { @@ -43428,6 +43428,15 @@ "has-tostringtag": "^1.0.0" } }, + "is-generator-function": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", + "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "dev": true, + "requires": { + "has-tostringtag": "^1.0.0" + } + }, "is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", diff --git a/src/js/common/components/Style/Colors.js b/src/js/common/components/Style/Colors.js new file mode 100644 index 000000000..151c384ac --- /dev/null +++ b/src/js/common/components/Style/Colors.js @@ -0,0 +1,12 @@ +const colors = { + primary: '#0834CD', + primaryHover: '#09288A', + secondaryHover: '#F5F7FD', + darkGrey: '#454F69', + middleGrey: '#8C92A2', + grey: '#AEB2BE', + lightGrey: '#E5E6EA', + white: '#ffffff', +}; + +export default colors; diff --git a/src/js/common/stories/Button.jsx b/src/js/common/stories/Button.jsx new file mode 100644 index 000000000..a8c17f021 --- /dev/null +++ b/src/js/common/stories/Button.jsx @@ -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/js/common/stories/Button.stories.js b/src/js/common/stories/Button.stories.js new file mode 100644 index 000000000..f5d3975dd --- /dev/null +++ b/src/js/common/stories/Button.stories.js @@ -0,0 +1,88 @@ +import React from 'react'; +import styled from 'styled-components'; +import Button from '../../components/Buttons/BaseButton'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +export default { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + // argTypes: { + // backgroundColor: { control: 'color' }, + // }, + args: { + primary: true, + }, +}; + +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const AllButtons = (args) => ( + +