diff --git a/src/Example/Button.stories.ts b/src/Example/Button.stories.ts deleted file mode 100644 index cd6d469..0000000 --- a/src/Example/Button.stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { fn } from "@storybook/test"; -import { Button } from "./Button"; - -// 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" }, - }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - args: { onClick: fn() }, -}; - -// More on writing stories with args: https://storybook.js.org/docs/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/Example/Button.tsx b/src/Example/Button.tsx deleted file mode 100644 index 8eb596c..0000000 --- a/src/Example/Button.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as 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/Example/Header.stories.ts b/src/Example/Header.stories.ts deleted file mode 100644 index 31517a3..0000000 --- a/src/Example/Header.stories.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { fn } from "@storybook/test"; -import { Header } from "./Header"; - -export default { - title: "Example/Header", - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ["autodocs"], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: "fullscreen", - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -}; - -export const LoggedIn = { - args: { - user: { - name: "Jane Doe", - }, - }, -}; - -export const LoggedOut = {}; diff --git a/src/Example/Header.tsx b/src/Example/Header.tsx deleted file mode 100644 index 981d3db..0000000 --- a/src/Example/Header.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as PropTypes from "prop-types"; - -import { Button } from "./Button"; -import "./header.css"; - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( -
-
-
- - Test - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
-
-); - -Header.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Header.defaultProps = { - user: null, -}; diff --git a/src/Example/Page.stories.ts b/src/Example/Page.stories.ts deleted file mode 100644 index df4974a..0000000 --- a/src/Example/Page.stories.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { expect, userEvent, within } from "@storybook/test"; - -import { Page } from "./Page"; - -export default { - title: "Example/Page", - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: "fullscreen", - }, -}; - -export const LoggedOut = {}; - -// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole("button", { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole("button", { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; diff --git a/src/Example/Page.tsx b/src/Example/Page.tsx deleted file mode 100644 index b1bce9d..0000000 --- a/src/Example/Page.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useState } from "react"; - -import { Header } from "./Header"; -import "./page.css"; - -export const Page = () => { - const [user, setUser] = useState<{ name: string }>(); - - return ( -
-
setUser({ name: "Jane Doe" })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: "Jane Doe" })} - /> - -
-

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{" "} - - Test - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/src/Example/assets/accessibility.png b/src/Example/assets/accessibility.png deleted file mode 100644 index 6ffe6fe..0000000 Binary files a/src/Example/assets/accessibility.png and /dev/null differ diff --git a/src/Example/assets/accessibility.svg b/src/Example/assets/accessibility.svg deleted file mode 100644 index 107e93f..0000000 --- a/src/Example/assets/accessibility.svg +++ /dev/null @@ -1 +0,0 @@ -Accessibility \ No newline at end of file diff --git a/src/Example/assets/addon-library.png b/src/Example/assets/addon-library.png deleted file mode 100644 index 95deb38..0000000 Binary files a/src/Example/assets/addon-library.png and /dev/null differ diff --git a/src/Example/assets/assets.png b/src/Example/assets/assets.png deleted file mode 100644 index cfba681..0000000 Binary files a/src/Example/assets/assets.png and /dev/null differ diff --git a/src/Example/assets/avif-test-image.avif b/src/Example/assets/avif-test-image.avif deleted file mode 100644 index 530709b..0000000 Binary files a/src/Example/assets/avif-test-image.avif and /dev/null differ diff --git a/src/Example/assets/context.png b/src/Example/assets/context.png deleted file mode 100644 index e5cd249..0000000 Binary files a/src/Example/assets/context.png and /dev/null differ diff --git a/src/Example/assets/discord.svg b/src/Example/assets/discord.svg deleted file mode 100644 index d638958..0000000 --- a/src/Example/assets/discord.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Example/assets/docs.png b/src/Example/assets/docs.png deleted file mode 100644 index a749629..0000000 Binary files a/src/Example/assets/docs.png and /dev/null differ diff --git a/src/Example/assets/figma-plugin.png b/src/Example/assets/figma-plugin.png deleted file mode 100644 index 8f79b08..0000000 Binary files a/src/Example/assets/figma-plugin.png and /dev/null differ diff --git a/src/Example/assets/github.svg b/src/Example/assets/github.svg deleted file mode 100644 index dc51352..0000000 --- a/src/Example/assets/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Example/assets/share.png b/src/Example/assets/share.png deleted file mode 100644 index 8097a37..0000000 Binary files a/src/Example/assets/share.png and /dev/null differ diff --git a/src/Example/assets/styling.png b/src/Example/assets/styling.png deleted file mode 100644 index d341e82..0000000 Binary files a/src/Example/assets/styling.png and /dev/null differ diff --git a/src/Example/assets/testing.png b/src/Example/assets/testing.png deleted file mode 100644 index d4ac39a..0000000 Binary files a/src/Example/assets/testing.png and /dev/null differ diff --git a/src/Example/assets/theming.png b/src/Example/assets/theming.png deleted file mode 100644 index 1535eb9..0000000 Binary files a/src/Example/assets/theming.png and /dev/null differ diff --git a/src/Example/assets/tutorials.svg b/src/Example/assets/tutorials.svg deleted file mode 100644 index b492a9c..0000000 --- a/src/Example/assets/tutorials.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Example/assets/youtube.svg b/src/Example/assets/youtube.svg deleted file mode 100644 index a7515d7..0000000 --- a/src/Example/assets/youtube.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Example/button.css b/src/Example/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/src/Example/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.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/Example/header.css b/src/Example/header.css deleted file mode 100644 index d9a7052..0000000 --- a/src/Example/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - 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; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - font-weight: 700; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/src/Example/page.css b/src/Example/page.css deleted file mode 100644 index 098dad1..0000000 --- a/src/Example/page.css +++ /dev/null @@ -1,69 +0,0 @@ -.storybook-page { - 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; -} - -.storybook-page h2 { - font-weight: 700; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - text-decoration: none; - color: #1ea7fd; -} - -.storybook-page ul { - padding-left: 30px; - margin: 1em 0; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .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; -} - -.storybook-page .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -}