From 16fc060746116f9192ac68048d6acf7ef8b2677a Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Fri, 22 Apr 2022 09:37:12 -0400 Subject: [PATCH] clean up - remove unnecessary components in stories --- src/stories/Header.stories.tsx | 25 -------- src/stories/Header.tsx | 72 ---------------------- src/stories/Page.stories.tsx | 19 ------ src/stories/Page.tsx | 91 ---------------------------- 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/header.css | 32 ---------- src/stories/page.css | 69 --------------------- 14 files changed, 316 deletions(-) delete mode 100644 src/stories/Header.stories.tsx delete mode 100644 src/stories/Header.tsx delete mode 100644 src/stories/Page.stories.tsx delete mode 100644 src/stories/Page.tsx delete mode 100644 src/stories/assets/code-brackets.svg delete mode 100644 src/stories/assets/colors.svg delete mode 100644 src/stories/assets/comments.svg delete mode 100644 src/stories/assets/direction.svg delete mode 100644 src/stories/assets/flow.svg delete mode 100644 src/stories/assets/plugin.svg delete mode 100644 src/stories/assets/repo.svg delete mode 100644 src/stories/assets/stackalt.svg delete mode 100644 src/stories/header.css delete mode 100644 src/stories/page.css diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx deleted file mode 100644 index 53d68b4cd..000000000 --- a/src/stories/Header.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react' - -import { Header } from './Header' - -export default { - title: 'Example/Header', - component: Header, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen' - } -} as ComponentMeta - -const Template: ComponentStory = (args) =>
- -export const LoggedIn = Template.bind({}) -LoggedIn.args = { - user: { - name: 'Jane Doe' - } -} - -export const LoggedOut = Template.bind({}) -LoggedOut.args = {} diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx deleted file mode 100644 index 86299ffa9..000000000 --- a/src/stories/Header.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react' - -import Button from '@shared/atoms/Button' -import './header.css' - -type User = { - name: string -} - -interface HeaderProps { - user?: User - onLogin: () => void - onLogout: () => void - onCreateAccount: () => void -} - -export const Header = ({ - user, - onLogin, - onLogout, - onCreateAccount -}: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - - - - ) : ( - <> - - - - )} -
-
-
-) diff --git a/src/stories/Page.stories.tsx b/src/stories/Page.stories.tsx deleted file mode 100644 index e6910ac04..000000000 --- a/src/stories/Page.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react' -import { within, userEvent } from '@storybook/testing-library' -import { Page } from './Page' - -export default { - title: 'Example/Page', - component: Page, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen' - } -} as ComponentMeta - -const Template: ComponentStory = (args) => - -export const LoggedOut = Template.bind({}) - -export const LoggedIn = Template.bind({}) diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx deleted file mode 100644 index df5abc18c..000000000 --- a/src/stories/Page.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react' - -import { Header } from './Header' -import './page.css' - -type User = { - name: string -} - -export const Page: React.VFC = () => { - const [user, setUser] = React.useState() - - 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{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ) -} diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg deleted file mode 100644 index 73de94776..000000000 --- a/src/stories/assets/code-brackets.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/code-brackets \ No newline at end of file diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg deleted file mode 100644 index 17d58d516..000000000 --- a/src/stories/assets/colors.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/colors \ No newline at end of file diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg deleted file mode 100644 index 6493a139f..000000000 --- a/src/stories/assets/comments.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/comments \ No newline at end of file diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg deleted file mode 100644 index 65676ac27..000000000 --- a/src/stories/assets/direction.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/direction \ No newline at end of file diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg deleted file mode 100644 index 8ac27db40..000000000 --- a/src/stories/assets/flow.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/flow \ No newline at end of file diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg deleted file mode 100644 index 29e5c690c..000000000 --- a/src/stories/assets/plugin.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/plugin \ No newline at end of file diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg deleted file mode 100644 index f386ee902..000000000 --- a/src/stories/assets/repo.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/repo \ No newline at end of file diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg deleted file mode 100644 index 9b7ad2743..000000000 --- a/src/stories/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/src/stories/header.css b/src/stories/header.css deleted file mode 100644 index 830610e6f..000000000 --- a/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.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: 900; - 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 deleted file mode 100644 index fbc32aea2..000000000 --- a/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -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: 900; - 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; -}