From 43c7fc26a15dfa7dd9c4a0c9b67e12b7c53d5cd7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 28 Nov 2022 16:29:54 +0100 Subject: [PATCH] Update CLI templates to TS 4.9 --- .../template/cli/ts-legacy/Button.stories.ts | 46 ++++ .../nextjs/template/cli/ts-legacy/Button.tsx | 52 ++++ .../template/cli/ts-legacy/Header.stories.ts | 26 ++ .../nextjs/template/cli/ts-legacy/Header.tsx | 56 +++++ .../cli/ts-legacy/Introduction.stories.mdx | 228 ++++++++++++++++++ .../template/cli/ts-legacy/Page.stories.ts | 29 +++ .../nextjs/template/cli/ts-legacy/Page.tsx | 73 ++++++ .../nextjs/template/cli/ts/Button.stories.ts | 6 +- .../nextjs/template/cli/ts/Header.stories.ts | 6 +- .../nextjs/template/cli/ts/Page.stories.ts | 6 +- code/lib/cli/src/detect.ts | 21 +- code/lib/codemod/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/package.json | 18 +- .../template/cli/ts-legacy/Button.stories.ts | 45 ++++ .../react/template/cli/ts-legacy/Button.tsx | 48 ++++ .../template/cli/ts-legacy/Header.stories.ts | 24 ++ .../react/template/cli/ts-legacy/Header.tsx | 56 +++++ .../template/cli/ts-legacy/Page.stories.ts | 29 +++ .../react/template/cli/ts-legacy/Page.tsx | 73 ++++++ .../react/template/cli/ts/Button.stories.ts | 6 +- .../react/template/cli/ts/Header.stories.ts | 6 +- .../react/template/cli/ts/Page.stories.ts | 6 +- .../template/cli/ts-legacy/Button.stories.ts | 43 ++++ .../template/cli/ts-legacy/Button.svelte | 34 +++ .../template/cli/ts-legacy/Header.stories.ts | 26 ++ .../template/cli/ts-legacy/Header.svelte | 52 ++++ .../template/cli/ts-legacy/Page.stories.ts | 29 +++ .../svelte/template/cli/ts-legacy/Page.svelte | 70 ++++++ .../svelte/template/cli/ts/Button.stories.ts | 6 +- .../svelte/template/cli/ts/Header.stories.ts | 6 +- .../svelte/template/cli/ts/Page.stories.ts | 6 +- code/ui/components/package.json | 2 +- code/yarn.lock | 135 +++++------ scripts/package.json | 18 +- scripts/yarn.lock | 120 ++++----- 36 files changed, 1226 insertions(+), 185 deletions(-) create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts create mode 100644 code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx create mode 100644 code/renderers/react/template/cli/ts-legacy/Button.stories.ts create mode 100644 code/renderers/react/template/cli/ts-legacy/Button.tsx create mode 100644 code/renderers/react/template/cli/ts-legacy/Header.stories.ts create mode 100644 code/renderers/react/template/cli/ts-legacy/Header.tsx create mode 100644 code/renderers/react/template/cli/ts-legacy/Page.stories.ts create mode 100644 code/renderers/react/template/cli/ts-legacy/Page.tsx create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Button.svelte create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Header.svelte create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts create mode 100644 code/renderers/svelte/template/cli/ts-legacy/Page.svelte diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts new file mode 100644 index 000000000000..000d644a4299 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta: Meta = { + title: 'Example/Button', + component: Button, + tags: ['docsPage'], + argTypes: { + backgroundColor: { + control: 'color', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx b/code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx new file mode 100644 index 000000000000..e3cb2f231141 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import './button.css'; + +interface ButtonProps { + /** + * Is this the principal call to action on the page? + */ + primary?: boolean; + /** + * What background color to use + */ + backgroundColor?: string; + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large'; + /** + * Button contents + */ + label: string; + /** + * Optional click handler + */ + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts new file mode 100644 index 000000000000..18a379082fbe --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Header } from './Header'; + +const meta: Meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page + tags: ['docsPage'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx b/code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx new file mode 100644 index 000000000000..dc3f3c19c31a --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +import { Button } from './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/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx new file mode 100644 index 000000000000..419987490c58 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx @@ -0,0 +1,228 @@ +import { Meta } from '@storybook/addon-docs'; +import Image from 'next/image'; + +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
+ + + +
Learn
+ + + +
+ TipEdit the Markdown in stories/Introduction.stories.mdx +
diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts new file mode 100644 index 000000000000..357a46f74d91 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; + +import { Page } from './Page'; + +const meta: Meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/react/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/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx b/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx new file mode 100644 index 000000000000..522d34294ae2 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx @@ -0,0 +1,73 @@ +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/code/frameworks/nextjs/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts index 000d644a4299..cc70f61b39ae 100644 --- a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction -const meta: Meta = { +const meta = { title: 'Example/Button', component: Button, tags: ['docsPage'], @@ -12,10 +12,10 @@ const meta: Meta = { control: 'color', }, }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args export const Primary: Story = { diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts index 18a379082fbe..180acbbae398 100644 --- a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Header } from './Header'; -const meta: Meta = { +const meta = { title: 'Example/Header', component: Header, // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page @@ -10,10 +10,10 @@ const meta: Meta = { // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout layout: 'fullscreen', }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const LoggedIn: Story = { args: { diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts index 357a46f74d91..dd421c8a556a 100644 --- a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts @@ -3,17 +3,17 @@ import { within, userEvent } from '@storybook/testing-library'; import { Page } from './Page'; -const meta: Meta = { +const meta = { title: 'Example/Page', component: Page, parameters: { // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout layout: 'fullscreen', }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const LoggedOut: Story = {}; diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 6896858d1b51..1a1e608b1edd 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -151,18 +151,29 @@ export function isStorybookInstalled( export function detectLanguage(packageJson?: PackageJson) { let language = SupportedLanguage.JAVASCRIPT; - const bowerJson = getBowerJson(); - if (!packageJson && !bowerJson) { + if (!packageJson) { return language; } if ( - hasDependency(packageJson || bowerJson, 'typescript', (version) => + hasDependency(packageJson, 'typescript', (version) => semver.gte(semver.coerce(version), '4.9.0') - ) + ) && + (!hasDependency(packageJson, 'prettier') || + hasDependency(packageJson, 'prettier', (version) => + semver.gte(semver.coerce(version), '2.8.0') + )) && + (!hasDependency(packageJson, '@babel/plugin-transform-typescript') || + hasDependency(packageJson, '@babel/plugin-transform-typescript', (version) => + semver.gte(semver.coerce(version), '7.20.0') + )) && + (!hasDependency(packageJson, '@typescript-eslint/parser') || + hasDependency(packageJson, '@typescript-eslint/parser', (version) => + semver.gte(semver.coerce(version), '5.44.0') + )) ) { language = SupportedLanguage.TYPESCRIPT; - } else if (hasDependency(packageJson || bowerJson, 'typescript')) { + } else if (hasDependency(packageJson, 'typescript')) { language = SupportedLanguage.TYPESCRIPT_LEGACY; } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 8607cbf28626..b1cad99d65f0 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -46,7 +46,7 @@ "globby": "^11.0.2", "jscodeshift": "^0.13.1", "lodash": "^4.17.21", - "prettier": "^2.7.1", + "prettier": "^2.8.0", "recast": "^0.19.0", "util": "^0.12.4" }, diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index c78ab3710719..361cfe86ace3 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -47,7 +47,7 @@ "@storybook/types": "7.0.0-alpha.54", "estraverse": "^5.2.0", "lodash": "^4.17.21", - "prettier": "^2.7.1" + "prettier": "^2.8.0" }, "devDependencies": { "jest-specific-snapshot": "^6.0.0", diff --git a/code/package.json b/code/package.json index 740af4db8336..6a1128485515 100644 --- a/code/package.json +++ b/code/package.json @@ -110,12 +110,12 @@ ], "resolutions": { "@nrwl/cli": "14.6.1", - "@typescript-eslint/eslint-plugin": "^5.43.0", - "@typescript-eslint/experimental-utils": "^5.43.0", - "@typescript-eslint/parser": "^5.43.0", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/experimental-utils": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", "boxen": "^5.1.2", "esbuild": "^0.14.48", - "eslint": "^8.27.0", + "eslint": "^8.28.0", "serialize-javascript": "^3.1.0", "webpack": "5" }, @@ -257,9 +257,9 @@ "@types/shelljs": "^0.8.7", "@types/terser-webpack-plugin": "^5.2.0", "@types/webpack-dev-middleware": "^5.3.0", - "@typescript-eslint/eslint-plugin": "^5.43.0", - "@typescript-eslint/experimental-utils": "^5.43.0", - "@typescript-eslint/parser": "^5.43.0", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/experimental-utils": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", "@vitejs/plugin-react": "^2.1.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", @@ -282,7 +282,7 @@ "esbuild": "^0.14.48", "esbuild-loader": "^2.19.0", "esbuild-plugin-alias": "^0.2.1", - "eslint": "^8.27.0", + "eslint": "^8.28.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-react": "^7.31.10", "eslint-plugin-storybook": "^0.6.6", @@ -314,7 +314,7 @@ "nx": "14.6.1", "p-limit": "^3.1.0", "playwright": "1.28.0", - "prettier": "2.7.1", + "prettier": "2.8.0", "process": "^0.11.10", "prompts": "^2.4.0", "raf": "^3.4.1", diff --git a/code/renderers/react/template/cli/ts-legacy/Button.stories.ts b/code/renderers/react/template/cli/ts-legacy/Button.stories.ts new file mode 100644 index 000000000000..846a6ac4c5a7 --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Button.stories.ts @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta: Meta = { + title: 'Example/Button', + component: Button, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +export default meta; +type Story = StoryObj; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +export const Primary: Story = { + // More on args: https://storybook.js.org/docs/react/writing-stories/args + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/renderers/react/template/cli/ts-legacy/Button.tsx b/code/renderers/react/template/cli/ts-legacy/Button.tsx new file mode 100644 index 000000000000..c33be6ec52c4 --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Button.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import './button.css'; + +interface ButtonProps { + /** + * Is this the principal call to action on the page? + */ + primary?: boolean; + /** + * What background color to use + */ + backgroundColor?: string; + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large'; + /** + * Button contents + */ + label: string; + /** + * Optional click handler + */ + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; diff --git a/code/renderers/react/template/cli/ts-legacy/Header.stories.ts b/code/renderers/react/template/cli/ts-legacy/Header.stories.ts new file mode 100644 index 000000000000..c49a9b7a4e01 --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Header.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Header } from './Header'; + +const meta: Meta = { + title: 'Example/Header', + component: Header, + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/renderers/react/template/cli/ts-legacy/Header.tsx b/code/renderers/react/template/cli/ts-legacy/Header.tsx new file mode 100644 index 000000000000..dc3f3c19c31a --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Header.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +import { Button } from './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/code/renderers/react/template/cli/ts-legacy/Page.stories.ts b/code/renderers/react/template/cli/ts-legacy/Page.stories.ts new file mode 100644 index 000000000000..52c4cb406233 --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Page.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; + +import { Page } from './Page'; + +const meta: Meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on interaction testing: https://storybook.js.org/docs/react/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/code/renderers/react/template/cli/ts-legacy/Page.tsx b/code/renderers/react/template/cli/ts-legacy/Page.tsx new file mode 100644 index 000000000000..8d048fa10880 --- /dev/null +++ b/code/renderers/react/template/cli/ts-legacy/Page.tsx @@ -0,0 +1,73 @@ +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/code/renderers/react/template/cli/ts/Button.stories.ts b/code/renderers/react/template/cli/ts/Button.stories.ts index 45457e9cda9b..8c56e54d78fa 100644 --- a/code/renderers/react/template/cli/ts/Button.stories.ts +++ b/code/renderers/react/template/cli/ts/Button.stories.ts @@ -3,17 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction -const meta: Meta = { +const meta = { title: 'Example/Button', component: Button, tags: ['docsPage'], argTypes: { backgroundColor: { control: 'color' }, }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args export const Primary: Story = { diff --git a/code/renderers/react/template/cli/ts/Header.stories.ts b/code/renderers/react/template/cli/ts/Header.stories.ts index 18a379082fbe..180acbbae398 100644 --- a/code/renderers/react/template/cli/ts/Header.stories.ts +++ b/code/renderers/react/template/cli/ts/Header.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Header } from './Header'; -const meta: Meta = { +const meta = { title: 'Example/Header', component: Header, // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page @@ -10,10 +10,10 @@ const meta: Meta = { // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout layout: 'fullscreen', }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const LoggedIn: Story = { args: { diff --git a/code/renderers/react/template/cli/ts/Page.stories.ts b/code/renderers/react/template/cli/ts/Page.stories.ts index 357a46f74d91..dd421c8a556a 100644 --- a/code/renderers/react/template/cli/ts/Page.stories.ts +++ b/code/renderers/react/template/cli/ts/Page.stories.ts @@ -3,17 +3,17 @@ import { within, userEvent } from '@storybook/testing-library'; import { Page } from './Page'; -const meta: Meta = { +const meta = { title: 'Example/Page', component: Page, parameters: { // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout layout: 'fullscreen', }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const LoggedOut: Story = {}; diff --git a/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts b/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts new file mode 100644 index 000000000000..ed3ec8c50799 --- /dev/null +++ b/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts @@ -0,0 +1,43 @@ +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#default-export +const meta: Meta diff --git a/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts b/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts new file mode 100644 index 000000000000..94fd9ef7625a --- /dev/null +++ b/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; +import Header from './Header.svelte'; + +const meta: Meta
= { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page + tags: ['docsPage'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj
; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/renderers/svelte/template/cli/ts-legacy/Header.svelte b/code/renderers/svelte/template/cli/ts-legacy/Header.svelte new file mode 100644 index 000000000000..e3b8d039f864 --- /dev/null +++ b/code/renderers/svelte/template/cli/ts-legacy/Header.svelte @@ -0,0 +1,52 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts b/code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts new file mode 100644 index 000000000000..3ab9cc7c2ee6 --- /dev/null +++ b/code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; +import { within, userEvent } from '@storybook/testing-library'; + +import Page from './Page.svelte'; + +const meta: Meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/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/code/renderers/svelte/template/cli/ts-legacy/Page.svelte b/code/renderers/svelte/template/cli/ts-legacy/Page.svelte new file mode 100644 index 000000000000..c2c6369f565e --- /dev/null +++ b/code/renderers/svelte/template/cli/ts-legacy/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + on:logout={() => (user = null)} + on:createAccount={() => (user = { 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/code/renderers/svelte/template/cli/ts/Button.stories.ts b/code/renderers/svelte/template/cli/ts/Button.stories.ts index fbe95d29b350..ddac057b32e4 100644 --- a/code/renderers/svelte/template/cli/ts/Button.stories.ts +++ b/code/renderers/svelte/template/cli/ts/Button.stories.ts @@ -3,17 +3,17 @@ 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/7.0/svelte/writing-stories/introduction -const meta: Meta