From 87da8d0ec372c6a56a0b1efc94a3fd2e9ced99c0 Mon Sep 17 00:00:00 2001 From: Garrett Date: Wed, 8 Mar 2023 07:38:13 -0800 Subject: [PATCH 1/3] Installed Storybook with Vite and Lit support. Moved files created in the last commit Note that the Sidebar component is visible in Storybook, but it looks nothing like the application itself because of all the global styles that are required --- .storybook/main.js | 13 ++ .storybook/preview-head.html | 3 + .storybook/preview.js | 17 ++ package.json | 14 +- src/index.js | 2 +- src/stories/Button.js | 21 ++ src/stories/Button.stories.js | 44 ++++ src/stories/Header.js | 45 ++++ src/stories/Header.stories.js | 18 ++ src/stories/Introduction.mdx | 211 ++++++++++++++++++ src/stories/Page.js | 61 +++++ src/stories/Page.stories.js | 20 ++ src/stories/Sidebar.stories.js | 13 ++ src/stories/assets/code-brackets.svg | 1 + src/stories/assets/colors.svg | 1 + src/stories/assets/comments.svg | 1 + src/stories/assets/direction.svg | 1 + src/stories/assets/flow.svg | 1 + src/stories/assets/plugin.svg | 1 + src/stories/assets/repo.svg | 1 + src/stories/assets/stackalt.svg | 1 + src/stories/button.css | 30 +++ src/stories/header.css | 32 +++ src/stories/page.css | 69 ++++++ src/{components => stories}/sidebar.js | 2 +- .../utils/useGlobalStyles.js | 0 26 files changed, 619 insertions(+), 4 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/preview.js create mode 100644 src/stories/Button.js create mode 100644 src/stories/Button.stories.js create mode 100644 src/stories/Header.js create mode 100644 src/stories/Header.stories.js create mode 100644 src/stories/Introduction.mdx create mode 100644 src/stories/Page.js create mode 100644 src/stories/Page.stories.js create mode 100644 src/stories/Sidebar.stories.js create mode 100644 src/stories/assets/code-brackets.svg create mode 100644 src/stories/assets/colors.svg create mode 100644 src/stories/assets/comments.svg create mode 100644 src/stories/assets/direction.svg create mode 100644 src/stories/assets/flow.svg create mode 100644 src/stories/assets/plugin.svg create mode 100644 src/stories/assets/repo.svg create mode 100644 src/stories/assets/stackalt.svg create mode 100644 src/stories/button.css create mode 100644 src/stories/header.css create mode 100644 src/stories/page.css rename src/{components => stories}/sidebar.js (99%) rename src/{components => stories}/utils/useGlobalStyles.js (100%) diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 000000000..bc3c5dfbb --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,13 @@ +/** @type { import('@storybook/web-components-vite').StorybookConfig } */ +const config = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + framework: { + name: "@storybook/web-components-vite", + options: {}, + }, + docs: { + autodocs: "tag", + }, +}; +export default config; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..05da1e9df --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 000000000..94a60ffb9 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,17 @@ +/** @type { import('@storybook/web-components').Preview } */ +const preview = { + parameters: { + backgrounds: { + default: "light", + }, + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +}; + +export default preview; diff --git a/package.json b/package.json index 7312ea716..fbb398e06 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "deploy-mac": "electron-builder build --mac --publish always", "deploy-linux": "electron-builder build --linux --publish always", "python-onefile-build": "python -m PyInstaller --onefile --clean ./pyflask/app.py --distpath ./pyflaskdist", + "format": "prettier --ignore-path .gitignore --ignore-path .prettierignore \"./**/*.+(html|css|js|md|yml)\" --write", "postinstall": "electron-builder install-app-deps", - "format": "prettier --ignore-path .gitignore --ignore-path .prettierignore \"./**/*.+(html|css|js|md|yml)\" --write" + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "lint-staged": { "./**/*.{html|css|js|md|yml}": [ @@ -164,6 +166,11 @@ "@commitlint/cli": "^17.1.2", "@commitlint/config-conventional": "^17.1.0", "@fairdataihub/config": "^2.2.1", + "@storybook/addon-essentials": "^7.0.0-beta.62", + "@storybook/addon-links": "^7.0.0-beta.62", + "@storybook/blocks": "^7.0.0-beta.62", + "@storybook/web-components": "^7.0.0-beta.62", + "@storybook/web-components-vite": "^7.0.0-beta.62", "commitizen": "^4.2.5", "cz-conventional-changelog": "^3.3.0", "electron": "19.0.0", @@ -173,7 +180,10 @@ "husky": "^8.0.1", "lint-staged": "^13.0.3", "megasanjay-devmoji": "^1.1.0", - "prettier": "^2.3.2" + "prettier": "^2.3.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "storybook": "^7.0.0-beta.62" }, "optionalDependencies": { "win-node-env": "^0.4.0" diff --git a/src/index.js b/src/index.js index a868f876b..43c31ba8f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,2 @@ // Web Components -import "./components/sidebar.js"; // Include the sidebar component in the application \ No newline at end of file +import "./stories/sidebar.js"; // Include the sidebar component in the application \ No newline at end of file diff --git a/src/stories/Button.js b/src/stories/Button.js new file mode 100644 index 000000000..5599e40e8 --- /dev/null +++ b/src/stories/Button.js @@ -0,0 +1,21 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js new file mode 100644 index 000000000..9cb2ebf8a --- /dev/null +++ b/src/stories/Button.stories.js @@ -0,0 +1,44 @@ +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction +export default { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + onClick: { action: 'onClick' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/src/stories/Header.js b/src/stories/Header.js new file mode 100644 index 000000000..9cb94e208 --- /dev/null +++ b/src/stories/Header.js @@ -0,0 +1,45 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+
+
+ + + + + + + +

Acme

+
+
+ ${user + ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) + : html`${Button({ + size: 'small', + onClick: onLogin, + label: 'Log in', + })} + ${Button({ + primary: true, + size: 'small', + onClick: onCreateAccount, + label: 'Sign up', + })}`} +
+
+
+`; diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js new file mode 100644 index 000000000..1f56d163d --- /dev/null +++ b/src/stories/Header.stories.js @@ -0,0 +1,18 @@ +import { Header } from './Header'; + +export default { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page + tags: ['autodocs'], + render: (args) => Header(args), +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx new file mode 100644 index 000000000..a314fa7f4 --- /dev/null +++ b/src/stories/Introduction.mdx @@ -0,0 +1,211 @@ +import { Meta } from '@storybook/blocks'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in{' '} + stories/Introduction.stories.mdx +
diff --git a/src/stories/Page.js b/src/stories/Page.js new file mode 100644 index 000000000..17ea864c2 --- /dev/null +++ b/src/stories/Page.js @@ -0,0 +1,61 @@ +import { html } from 'lit'; +import { Header } from './Header'; +import './page.css'; + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+ ${Header({ + user, + onLogin, + onLogout, + onCreateAccount, + })} + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
+`; diff --git a/src/stories/Page.stories.js b/src/stories/Page.stories.js new file mode 100644 index 000000000..61f16d657 --- /dev/null +++ b/src/stories/Page.stories.js @@ -0,0 +1,20 @@ +import { Page } from './Page'; +import * as HeaderStories from './Header.stories'; + +export default { + title: 'Example/Page', + render: (args) => Page(args), +}; + +export const LoggedIn = { + args: { + // More on composing args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args#args-composition + ...HeaderStories.LoggedIn.args, + }, +}; + +export const LoggedOut = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/src/stories/Sidebar.stories.js b/src/stories/Sidebar.stories.js new file mode 100644 index 000000000..a00f9ef86 --- /dev/null +++ b/src/stories/Sidebar.stories.js @@ -0,0 +1,13 @@ +import { Sidebar } from './sidebar.js'; + +export default { + title: 'Example/Sidebar' +}; + +const Template = (args) => new Sidebar(args); + +export const Default = Template.bind({}); +Default.args = { + primary: true, + label: 'Sidebar', +}; \ No newline at end of file diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg new file mode 100644 index 000000000..73de94776 --- /dev/null +++ b/src/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg new file mode 100644 index 000000000..17d58d516 --- /dev/null +++ b/src/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg new file mode 100644 index 000000000..6493a139f --- /dev/null +++ b/src/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg new file mode 100644 index 000000000..65676ac27 --- /dev/null +++ b/src/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg new file mode 100644 index 000000000..8ac27db40 --- /dev/null +++ b/src/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg new file mode 100644 index 000000000..29e5c690c --- /dev/null +++ b/src/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg new file mode 100644 index 000000000..f386ee902 --- /dev/null +++ b/src/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg new file mode 100644 index 000000000..9b7ad2743 --- /dev/null +++ b/src/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/src/stories/button.css b/src/stories/button.css new file mode 100644 index 000000000..dc91dc763 --- /dev/null +++ b/src/stories/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/src/stories/header.css b/src/stories/header.css new file mode 100644 index 000000000..44c549da2 --- /dev/null +++ b/src/stories/header.css @@ -0,0 +1,32 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 700; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} + +.welcome { + color: #333; + font-size: 14px; + margin-right: 10px; +} diff --git a/src/stories/page.css b/src/stories/page.css new file mode 100644 index 000000000..fb64fe462 --- /dev/null +++ b/src/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +section h2 { + font-weight: 700; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +section p { + margin: 1em 0; +} + +section a { + text-decoration: none; + color: #1ea7fd; +} + +section ul { + padding-left: 30px; + margin: 1em 0; +} + +section li { + margin-bottom: 8px; +} + +section .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +section .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +section .tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +section .tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/src/components/sidebar.js b/src/stories/sidebar.js similarity index 99% rename from src/components/sidebar.js rename to src/stories/sidebar.js index 1aaea19e1..f221a9ea9 100644 --- a/src/components/sidebar.js +++ b/src/stories/sidebar.js @@ -417,7 +417,7 @@ export class Sidebar extends LitElement { // TODO: Decide how to grab these elements outside of the component const section = document.getElementsByClassName("section")[0]; - section.classList.toggle("fullShown"); + if (section) section.classList.toggle("fullShown"); }); this.insertAdjacentElement('beforebegin', toggle) // This is a hack to get the button to behave properly in the app styling diff --git a/src/components/utils/useGlobalStyles.js b/src/stories/utils/useGlobalStyles.js similarity index 100% rename from src/components/utils/useGlobalStyles.js rename to src/stories/utils/useGlobalStyles.js From 73be98562589c1c7790c387e4ffdf7e992aca488 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 8 Mar 2023 16:02:05 +0000 Subject: [PATCH 2/3] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .storybook/preview-head.html | 2 +- index.html | 2 +- src/index.js | 2 +- src/stories/Sidebar.stories.js | 2 +- src/stories/assets/code-brackets.svg | 2 +- src/stories/assets/colors.svg | 2 +- src/stories/assets/comments.svg | 2 +- src/stories/assets/direction.svg | 2 +- src/stories/assets/flow.svg | 2 +- src/stories/assets/plugin.svg | 2 +- src/stories/assets/repo.svg | 2 +- src/stories/assets/stackalt.svg | 2 +- src/stories/sidebar.js | 6 +++--- src/stories/utils/useGlobalStyles.js | 2 +- vite.config.js | 2 +- 15 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 05da1e9df..e55104010 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,3 @@ \ No newline at end of file + diff --git a/index.html b/index.html index 7ceadc8d3..dd4535d04 100755 --- a/index.html +++ b/index.html @@ -68,7 +68,7 @@ - +