From 4ec97162f00dd11e53fca4de14d11ea8fa30786c Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 17 Mar 2023 15:47:50 +0100 Subject: [PATCH 1/2] update renderer templates to provide correct typescript examples --- .../cli/{ts => ts-3-8}/Button.stories.ts | 0 .../template/cli/{ts => ts-3-8}/Button.ts | 0 .../cli/{ts => ts-3-8}/Header.stories.ts | 2 +- .../template/cli/{ts => ts-3-8}/Header.ts | 0 .../cli/{ts => ts-3-8}/Page.stories.ts | 0 .../html/template/cli/{ts => ts-3-8}/Page.ts | 0 .../template/cli/ts-4-9/Button.stories.ts | 55 +++++++++++ .../html/template/cli/ts-4-9/Button.ts | 51 ++++++++++ .../template/cli/ts-4-9/Header.stories.ts | 33 +++++++ .../html/template/cli/ts-4-9/Header.ts | 54 ++++++++++ .../html/template/cli/ts-4-9/Page.stories.ts | 27 +++++ .../html/template/cli/ts-4-9/Page.ts | 98 +++++++++++++++++++ .../cli/{ts-3.8 => ts-3-8}/Button.stories.ts | 0 .../cli/{ts-3.8 => ts-3-8}/Button.svelte | 0 .../cli/{ts-3.8 => ts-3-8}/Header.stories.ts | 0 .../cli/{ts-3.8 => ts-3-8}/Header.svelte | 0 .../cli/{ts-3.8 => ts-3-8}/Page.stories.ts | 0 .../cli/{ts-3.8 => ts-3-8}/Page.svelte | 0 .../cli/{ts => ts-3-8}/Button.stories.ts | 0 .../template/cli/{ts => ts-3-8}/Button.ts | 0 .../cli/{ts => ts-3-8}/Header.stories.ts | 0 .../template/cli/{ts => ts-3-8}/Header.ts | 0 .../cli/{ts => ts-3-8}/Page.stories.ts | 0 .../template/cli/{ts => ts-3-8}/Page.ts | 0 .../template/cli/ts-4-9/Button.stories.ts | 49 ++++++++++ .../template/cli/ts-4-9/Button.ts | 43 ++++++++ .../template/cli/ts-4-9/Header.stories.ts | 23 +++++ .../template/cli/ts-4-9/Header.ts | 56 +++++++++++ .../template/cli/ts-4-9/Page.stories.ts | 26 +++++ .../template/cli/ts-4-9/Page.ts | 72 ++++++++++++++ 30 files changed, 588 insertions(+), 1 deletion(-) rename code/renderers/html/template/cli/{ts => ts-3-8}/Button.stories.ts (100%) rename code/renderers/html/template/cli/{ts => ts-3-8}/Button.ts (100%) rename code/renderers/html/template/cli/{ts => ts-3-8}/Header.stories.ts (97%) rename code/renderers/html/template/cli/{ts => ts-3-8}/Header.ts (100%) rename code/renderers/html/template/cli/{ts => ts-3-8}/Page.stories.ts (100%) rename code/renderers/html/template/cli/{ts => ts-3-8}/Page.ts (100%) create mode 100644 code/renderers/html/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/renderers/html/template/cli/ts-4-9/Button.ts create mode 100644 code/renderers/html/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/renderers/html/template/cli/ts-4-9/Header.ts create mode 100644 code/renderers/html/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/renderers/html/template/cli/ts-4-9/Page.ts rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Button.stories.ts (100%) rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Button.svelte (100%) rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Header.stories.ts (100%) rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Header.svelte (100%) rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Page.stories.ts (100%) rename code/renderers/svelte/template/cli/{ts-3.8 => ts-3-8}/Page.svelte (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Button.stories.ts (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Button.ts (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Header.stories.ts (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Header.ts (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Page.stories.ts (100%) rename code/renderers/web-components/template/cli/{ts => ts-3-8}/Page.ts (100%) create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Button.ts create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Header.ts create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/renderers/web-components/template/cli/ts-4-9/Page.ts diff --git a/code/renderers/html/template/cli/ts/Button.stories.ts b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts similarity index 100% rename from code/renderers/html/template/cli/ts/Button.stories.ts rename to code/renderers/html/template/cli/ts-3-8/Button.stories.ts diff --git a/code/renderers/html/template/cli/ts/Button.ts b/code/renderers/html/template/cli/ts-3-8/Button.ts similarity index 100% rename from code/renderers/html/template/cli/ts/Button.ts rename to code/renderers/html/template/cli/ts-3-8/Button.ts diff --git a/code/renderers/html/template/cli/ts/Header.stories.ts b/code/renderers/html/template/cli/ts-3-8/Header.stories.ts similarity index 97% rename from code/renderers/html/template/cli/ts/Header.stories.ts rename to code/renderers/html/template/cli/ts-3-8/Header.stories.ts index cb31aa1cb772..128410f0b62f 100644 --- a/code/renderers/html/template/cli/ts/Header.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Header.stories.ts @@ -25,7 +25,7 @@ type Story = StoryObj; export const LoggedIn: Story = { args: { user: { - name: 'John Doe', + name: 'Jane Doe', }, }, }; diff --git a/code/renderers/html/template/cli/ts/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts similarity index 100% rename from code/renderers/html/template/cli/ts/Header.ts rename to code/renderers/html/template/cli/ts-3-8/Header.ts diff --git a/code/renderers/html/template/cli/ts/Page.stories.ts b/code/renderers/html/template/cli/ts-3-8/Page.stories.ts similarity index 100% rename from code/renderers/html/template/cli/ts/Page.stories.ts rename to code/renderers/html/template/cli/ts-3-8/Page.stories.ts diff --git a/code/renderers/html/template/cli/ts/Page.ts b/code/renderers/html/template/cli/ts-3-8/Page.ts similarity index 100% rename from code/renderers/html/template/cli/ts/Page.ts rename to code/renderers/html/template/cli/ts-3-8/Page.ts diff --git a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 000000000000..054649acc0a7 --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,55 @@ +import type { StoryObj, Meta } from '@storybook/html'; +import type { ButtonProps } from './Button'; +import { createButton } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => { + // You can either use a function to create DOM elements or use a plain html string! + // return `
${label}
`; + return createButton(args); + }, + argTypes: { + backgroundColor: { control: 'color' }, + label: { control: 'text' }, + onClick: { action: 'onClick' }, + primary: { control: 'boolean' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/html/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/renderers/html/template/cli/ts-4-9/Button.ts b/code/renderers/html/template/cli/ts-4-9/Button.ts new file mode 100644 index 000000000000..17f8c4c07cc2 --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Button.ts @@ -0,0 +1,51 @@ +import './button.css'; + +export 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 createButton = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + onClick, +}: ButtonProps) => { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.innerText = label; + if (onClick) { + btn.addEventListener('click', onClick); + } + + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' '); + + if (backgroundColor) { + btn.style.backgroundColor = backgroundColor; + } + + return btn; +}; diff --git a/code/renderers/html/template/cli/ts-4-9/Header.stories.ts b/code/renderers/html/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 000000000000..0b1d10feb6db --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/html'; +import type { HeaderProps } from './Header'; +import { createHeader } from './Header'; + +const meta = { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page + tags: ['autodocs'], + render: (args) => createHeader(args), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout + layout: 'fullscreen', + }, + // More on argTypes: https://storybook.js.org/docs/7.0/html/api/argtypes + argTypes: { + onLogin: { action: 'onLogin' }, + onLogout: { action: 'onLogout' }, + onCreateAccount: { action: 'onCreateAccount' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts new file mode 100644 index 000000000000..94a31e6b5317 --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Header.ts @@ -0,0 +1,54 @@ +import './header.css'; +import { createButton } from './Button'; + +export interface HeaderProps { + user?: { name: string }; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +} + +export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => { + const header = document.createElement('header'); + + const wrapper = document.createElement('div'); + wrapper.className = 'wrapper'; + + const logo = `
+ + + + + + + +

Acme

+
`; + + wrapper.insertAdjacentHTML('afterbegin', logo); + + const account = document.createElement('div'); + if (user) { + const welcomeMessage = `Welcome, ${user.name}!`; + account.innerHTML = welcomeMessage; + account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout })); + } else { + account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin })); + account.appendChild( + createButton({ + size: 'small', + label: 'Sign up', + onClick: onCreateAccount, + primary: true, + }) + ); + } + wrapper.appendChild(account); + header.appendChild(wrapper); + + return header; +}; diff --git a/code/renderers/html/template/cli/ts-4-9/Page.stories.ts b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 000000000000..343f5df39a08 --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/html'; +import { within, userEvent } from '@storybook/testing-library'; +import { createPage } from './Page'; + +const meta = { + title: 'Example/Page', + render: () => createPage(), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; + +export const LoggedOut: StoryObj = {}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/html/writing-tests/interaction-testing +export const LoggedIn: StoryObj = { + 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/html/template/cli/ts-4-9/Page.ts b/code/renderers/html/template/cli/ts-4-9/Page.ts new file mode 100644 index 000000000000..4c4028ff1d99 --- /dev/null +++ b/code/renderers/html/template/cli/ts-4-9/Page.ts @@ -0,0 +1,98 @@ +import './page.css'; +import { createHeader } from './Header'; + +type User = { + name: string; +}; + +export const createPage = () => { + const article = document.createElement('article'); + let user: User | undefined; + let header: HTMLElement | null = null; + + const rerenderHeader = () => { + const wrapper = document.getElementsByTagName('article')[0]; + wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement); + }; + + const onLogin = () => { + user = { name: 'Jane Doe' }; + rerenderHeader(); + }; + + const onLogout = () => { + user = undefined; + rerenderHeader(); + }; + + const onCreateAccount = () => { + user = { name: 'Jane Doe' }; + rerenderHeader(); + }; + + const createHeaderElement = () => { + return createHeader({ onLogin, onLogout, onCreateAccount, user }); + }; + + header = createHeaderElement(); + article.appendChild(header); + + const section = ` +
+

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 +
+
+`; + + article.insertAdjacentHTML('beforeend', section); + + return article; +}; diff --git a/code/renderers/svelte/template/cli/ts-3.8/Button.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Button.stories.ts rename to code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts diff --git a/code/renderers/svelte/template/cli/ts-3.8/Button.svelte b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Button.svelte rename to code/renderers/svelte/template/cli/ts-3-8/Button.svelte diff --git a/code/renderers/svelte/template/cli/ts-3.8/Header.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Header.stories.ts similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Header.stories.ts rename to code/renderers/svelte/template/cli/ts-3-8/Header.stories.ts diff --git a/code/renderers/svelte/template/cli/ts-3.8/Header.svelte b/code/renderers/svelte/template/cli/ts-3-8/Header.svelte similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Header.svelte rename to code/renderers/svelte/template/cli/ts-3-8/Header.svelte diff --git a/code/renderers/svelte/template/cli/ts-3.8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Page.stories.ts rename to code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts diff --git a/code/renderers/svelte/template/cli/ts-3.8/Page.svelte b/code/renderers/svelte/template/cli/ts-3-8/Page.svelte similarity index 100% rename from code/renderers/svelte/template/cli/ts-3.8/Page.svelte rename to code/renderers/svelte/template/cli/ts-3-8/Page.svelte diff --git a/code/renderers/web-components/template/cli/ts/Button.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Button.stories.ts rename to code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts diff --git a/code/renderers/web-components/template/cli/ts/Button.ts b/code/renderers/web-components/template/cli/ts-3-8/Button.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Button.ts rename to code/renderers/web-components/template/cli/ts-3-8/Button.ts diff --git a/code/renderers/web-components/template/cli/ts/Header.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.stories.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Header.stories.ts rename to code/renderers/web-components/template/cli/ts-3-8/Header.stories.ts diff --git a/code/renderers/web-components/template/cli/ts/Header.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Header.ts rename to code/renderers/web-components/template/cli/ts-3-8/Header.ts diff --git a/code/renderers/web-components/template/cli/ts/Page.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Page.stories.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Page.stories.ts rename to code/renderers/web-components/template/cli/ts-3-8/Page.stories.ts diff --git a/code/renderers/web-components/template/cli/ts/Page.ts b/code/renderers/web-components/template/cli/ts-3-8/Page.ts similarity index 100% rename from code/renderers/web-components/template/cli/ts/Page.ts rename to code/renderers/web-components/template/cli/ts-3-8/Page.ts diff --git a/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts b/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 000000000000..f97328589b89 --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,49 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import type { ButtonProps } from './Button'; +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction +const meta = { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + onClick: { action: 'onClick' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/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/renderers/web-components/template/cli/ts-4-9/Button.ts b/code/renderers/web-components/template/cli/ts-4-9/Button.ts new file mode 100644 index 000000000000..8241f4e8cbd1 --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Button.ts @@ -0,0 +1,43 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; +import './button.css'; + +export 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, backgroundColor, size, label, onClick }: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/renderers/web-components/template/cli/ts-4-9/Header.stories.ts b/code/renderers/web-components/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 000000000000..822eb60716fb --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import type { HeaderProps } from './Header'; +import { Header } from './Header'; + +const meta = { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/web-components/writing-docs/docs-page + tags: ['autodocs'], + render: (args: HeaderProps) => Header(args), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/renderers/web-components/template/cli/ts-4-9/Header.ts b/code/renderers/web-components/template/cli/ts-4-9/Header.ts new file mode 100644 index 000000000000..b14c312a9d85 --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Header.ts @@ -0,0 +1,56 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +type User = { + name: string; +}; + +export interface HeaderProps { + user?: User; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +} + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => 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/code/renderers/web-components/template/cli/ts-4-9/Page.stories.ts b/code/renderers/web-components/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 000000000000..4a5b01b92a0d --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; + +import type { PageProps } from './Page'; +import { Page } from './Page'; +import * as HeaderStories from './Header.stories'; + +const meta = { + title: 'Example/Page', + render: (args: PageProps) => Page(args), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + 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: Story = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/code/renderers/web-components/template/cli/ts-4-9/Page.ts b/code/renderers/web-components/template/cli/ts-4-9/Page.ts new file mode 100644 index 000000000000..15764da44329 --- /dev/null +++ b/code/renderers/web-components/template/cli/ts-4-9/Page.ts @@ -0,0 +1,72 @@ +import { html } from 'lit'; +import { Header } from './Header'; +import './page.css'; + +type User = { + name: string; +}; + +export interface PageProps { + user?: User; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +} + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => 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 +
+
+
+`; From 52a318bc863403f93d49ac768002e4050287950e Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 17 Mar 2023 15:50:37 +0100 Subject: [PATCH 2/2] support ts path for backwards compatibility --- code/lib/cli/src/helpers.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index ec4c07b7999c..b8cd29253ebd 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -201,7 +201,9 @@ export async function copyTemplateFiles({ destination, includeCommonAssets = true, }: CopyTemplateFilesOptions) { - const languageFolderMapping: Record = { + const languageFolderMapping: Record = { + // keeping this for backwards compatibility in case community packages are using it + typescript: 'ts', [SupportedLanguage.JAVASCRIPT]: 'js', [SupportedLanguage.TYPESCRIPT_3_8]: 'ts-3-8', [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9', @@ -212,6 +214,7 @@ export async function copyTemplateFiles({ const assetsLanguage = join(assetsDir, languageFolderMapping[language]); const assetsJS = join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); + const assetsTS = join(assetsDir, languageFolderMapping.typescript); const assetsTS38 = join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT_3_8]); // Ideally use the assets that match the language & version. @@ -222,6 +225,10 @@ export async function copyTemplateFiles({ if (language === SupportedLanguage.TYPESCRIPT_4_9 && (await fse.pathExists(assetsTS38))) { return assetsTS38; } + // Fallback further to TS (for backwards compatibility purposes) + if (await fse.pathExists(assetsTS)) { + return assetsTS; + } // Fallback further to JS if (await fse.pathExists(assetsJS)) { return assetsJS;