From e07372ca51628eab835f111a2e5d8d480d2d6b8b Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Sat, 10 Jun 2023 18:27:07 +0100 Subject: [PATCH] remove stories cruft from update --- src/stories/Button.stories.ts | 48 ------ src/stories/Button.svelte | 36 ----- src/stories/Header.stories.ts | 26 ---- src/stories/Header.svelte | 62 -------- src/stories/Introduction.mdx | 213 --------------------------- src/stories/Page.stories.ts | 29 ---- src/stories/Page.svelte | 82 ----------- 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 --------- 18 files changed, 635 deletions(-) delete mode 100644 src/stories/Button.stories.ts delete mode 100644 src/stories/Button.svelte delete mode 100644 src/stories/Header.stories.ts delete mode 100644 src/stories/Header.svelte delete mode 100644 src/stories/Introduction.mdx delete mode 100644 src/stories/Page.stories.ts delete mode 100644 src/stories/Page.svelte 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/button.css delete mode 100644 src/stories/header.css delete mode 100644 src/stories/page.css diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts deleted file mode 100644 index 93e3fc8c..00000000 --- a/src/stories/Button.stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction -const meta = { - title: 'Example/Button', - component: Button, - tags: ['autodocs'], - argTypes: { - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -} satisfies Meta diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts deleted file mode 100644 index c77812ca..00000000 --- a/src/stories/Header.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/svelte'; -import Header from './Header.svelte'; - -const meta = { - title: 'Example/Header', - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/svelte/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta
; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/src/stories/Header.svelte b/src/stories/Header.svelte deleted file mode 100644 index 63cc4832..00000000 --- a/src/stories/Header.svelte +++ /dev/null @@ -1,62 +0,0 @@ - - -
-
-
- - - - - - - -

Acme

-
-
- {#if user} - - Welcome, {user.name}! - -
-
-
diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx deleted file mode 100644 index ff7fc71f..00000000 --- a/src/stories/Introduction.mdx +++ /dev/null @@ -1,213 +0,0 @@ -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.stories.ts b/src/stories/Page.stories.ts deleted file mode 100644 index 78665a28..00000000 --- a/src/stories/Page.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/svelte'; -import { within, userEvent } from '@storybook/testing-library'; - -import Page from './Page.svelte'; - -const meta = { - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/svelte/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { - name: /Log in/i, - }); - await userEvent.click(loginButton); - }, -}; diff --git a/src/stories/Page.svelte b/src/stories/Page.svelte deleted file mode 100644 index 9f16bb46..00000000 --- a/src/stories/Page.svelte +++ /dev/null @@ -1,82 +0,0 @@ - - -
-
- -
-

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 73de9477..00000000 --- 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 17d58d51..00000000 --- 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 6493a139..00000000 --- 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 65676ac2..00000000 --- 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 8ac27db4..00000000 --- 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 29e5c690..00000000 --- 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 f386ee90..00000000 --- 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 9b7ad274..00000000 --- a/src/stories/assets/stackalt.svg +++ /dev/null @@ -1 +0,0 @@ -illustration/stackalt \ No newline at end of file diff --git a/src/stories/button.css b/src/stories/button.css deleted file mode 100644 index dc91dc76..00000000 --- a/src/stories/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/stories/header.css b/src/stories/header.css deleted file mode 100644 index d9a70528..00000000 --- a/src/stories/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/stories/page.css b/src/stories/page.css deleted file mode 100644 index 098dad11..00000000 --- a/src/stories/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; -}