@storybook/svelte-vite 9.0.0-alpha.2 → 9.0.0-alpha.21

package/template/cli/ts/Page.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      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:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>

package/template/stories_svelte-vite-default-js/docgen/jsdoc.stories.js

@@ -0,0 +1,17 @@
+import JSDoc from './jsdoc.svelte';
+
+/** @typedef {import('@storybook/svelte-vite').StoryObj} StoryObj */
+
+/** @type {Meta<typeof JSDoc>} */
+const meta = {
+  component: JSDoc,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: JSDoc,
+    props: { ...args, argTypes },
+  }),
+};
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-js/docgen/jsdoc.svelte

@@ -0,0 +1,92 @@
+<script>
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @typedef {Object} MyProps
+   * @property {boolean} [boolean] Boolean
+   * @property {string} [string] String
+   * @property {string} stringRequired String (required)
+   * @property {number} [number] Number
+   * @property {true} [trueLiteral] True literal
+   * @property {symbol} [symbol] Symbol
+   * @property {null} [nullValue] Null
+   * @property {undefined} [undefinedValue] Undefined
+   * @property {any} [any] Any
+   * @property {Date} [date] Date
+   * @property {import('./types').LiteralStrings} [unionLiteralStrings] Union of literal strings
+   * @property {import('./types').LiteralNumbers} [unionLiteralNumbers] Union of literal numbers
+   * @property {MyObject} [object] Object
+   * @property {{ foo: string; bar: number }} [inlineObject] Inline object
+   * @property {Record<string, number>} [record] Record
+   * @property {number | string} [unionTypes] Union of types
+   * @property {{ a: number } & { b: string }} [intersection] Intersection of types
+   * @property {(event: MouseEvent) => number} [func] Event callback function
+   * @property {import('svelte').Snippet} children Snippet contents
+   * @property {Record<string, any>} [argTypes] Actual arg types inferred from the component
+   */
+
+  /** @type {MyProps} */
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    trueLiteral = undefined,
+    symbol = undefined,
+    nullValue = null,
+    undefinedValue = undefined,
+    any = undefined,
+    date = new Date('20 Jan 1983'),
+    unionLiteralStrings = 'apple',
+    unionLiteralNumbers = 1000,
+    object = undefined,
+    inlineObject = undefined,
+    record = { a: 1, b: 2 },
+    unionTypes = 123,
+    intersection = undefined,
+    func = () => 10,
+    children,
+    argTypes,
+  } = $props();
+</script>
+
+<h1>Docgen: JS - JSDoc</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+      argTypes,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/jsdoc.stories.js

@@ -0,0 +1,17 @@
+import JSDoc from './jsdoc.svelte';
+
+/** @typedef {import('@storybook/svelte-vite').StoryObj} StoryObj */
+
+/** @type {Meta<typeof JSDoc>} */
+const meta = {
+  component: JSDoc,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: JSDoc,
+    props: { ...args, argTypes },
+  }),
+};
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/jsdoc.svelte

@@ -0,0 +1,91 @@
+<script>
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @typedef {Object} MyProps
+   * @property {boolean} [boolean] Boolean
+   * @property {string} [string] String
+   * @property {string} stringRequired String (required)
+   * @property {number} [number] Number
+   * @property {true} [trueLiteral] True literal
+   * @property {symbol} [symbol] Symbol
+   * @property {null} [nullValue] Null
+   * @property {undefined} [undefinedValue] Undefined
+   * @property {any} [any] Any
+   * @property {import('./types').LiteralStrings} [unionLiteralStrings] Union of literal strings
+   * @property {import('./types').LiteralNumbers} [unionLiteralNumbers] Union of literal numbers
+   * @property {MyObject} [object] Object
+   * @property {{ foo: string; bar: number }} [inlineObject] Inline object
+   * @property {Record<string, number>} [record] Record
+   * @property {Date} [date] Date
+   * @property {number | string} [unionTypes] Union of types
+   * @property {{ a: number } & { b: string }} [intersection] Intersection of types
+   * @property {import('svelte').Snippet} children Snippet contents
+   * @property {(event: MouseEvent) => number} [func] Event callback function
+   * @property {Record<string, any>} [argTypes] Actual arg types inferred from the component
+   */
+
+  /** @type {MyProps} */
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    trueLiteral = undefined,
+    symbol = undefined,
+    nullValue = null,
+    undefinedValue = undefined,
+    any = undefined,
+    unionLiteralStrings = 'apple',
+    unionLiteralNumbers = 1000,
+    object = undefined,
+    inlineObject = undefined,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    intersection = undefined,
+    children,
+    func = () => 10,
+    argTypes,
+  } = $props();
+</script>
+
+<h1>Docgen: JS - JSDoc</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-inline-prop-types.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSInlinePropTypes from './ts-inline-prop-types.svelte';
+
+const meta = {
+  component: TSInlinePropTypes,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSInlinePropTypes,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TSInlinePropTypes>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-inline-prop-types.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    func = () => 10,
+    children,
+    argTypes,
+  }: {
+    /** Boolean */
+    boolean?: boolean;
+    /** String */
+    string?: string;
+    /** String (required) */
+    stringRequired: string;
+    /** Number */
+    number?: number;
+    /** True literal */
+    trueLiteral?: true;
+    /** Symbol */
+    symbol?: symbol;
+    /** Null */
+    nullValue?: null;
+    /** Undefined */
+    undefinedValue?: undefined;
+    /** Any */
+    any?: any;
+    /** Date */
+    date?: Date;
+    /** Array of numbers */
+    arrayOfNumbers?: number[];
+    /** Enum */
+    enumValue?: MyEnum;
+    /** Union of literal strings */
+    unionLiteralStrings?: LiteralStrings;
+    /** Union of literal numbers */
+    unionLiteralNumbers?: LiteralNumbers;
+    /** Object */
+    object?: MyObject;
+    /** Inline object */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /** Record */
+    record?: Record<string, number>;
+    /** Union of types */
+    unionTypes?: number | string;
+    /** Intersection of types */
+    intersection?: { a: number } & { b: string };
+    /** Event callback function */
+    func?: (event: MouseEvent) => number;
+    /** Snippet contents */
+    children: Snippet;
+    /** Actual arg types inferred from the component */
+    argTypes: Record<string, any>;
+  } = $props();
+</script>
+
+<h1>Docgen: TS - inline prop types</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      nullValue,
+      date,
+      arrayOfNumbers,
+      enumValue,
+      record,
+      unionTypes,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-legacy.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSLegacy from './ts-legacy.svelte';
+
+const meta = {
+  component: TSLegacy,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSLegacy,
+    props: { ...args, argTypes } as any,
+  }),
+} satisfies Meta<typeof TSLegacy>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-legacy.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  /** Boolean */
+  export let boolean: boolean = true;
+  /** String */
+  export let string: string = 'default';
+  /** String (required) */
+  export let stringRequired: string;
+  /** Number */
+  export let number: number = 123;
+  /** True literal */
+  export let trueLiteral: true | undefined = undefined;
+  /** Symbol */
+  export let symbol: symbol | undefined = undefined;
+  /** Null */
+  export let nullValue: null = null;
+  /** Undefined */
+  export let undefinedValue: undefined = undefined;
+  /** Any */
+  export let any: any = null;
+  /** Date */
+  export let date: Date = new Date('20 Jan 1983');
+  /** Array of numbers */
+  export let arrayOfNumbers: number[] = [1, 20, 300];
+  /** Enum */
+  export let enumValue: MyEnum = MyEnum.FOO;
+  /** Union of literal strings */
+  export let unionLiteralStrings: LiteralStrings = 'apple';
+  /** Union of literal numbers */
+  export let unionLiteralNumbers: LiteralNumbers = 1000;
+  /** Object */
+  export let object: MyObject | undefined = undefined;
+  /** Inline object */
+  export let inlineObject:
+    | {
+        foo: string;
+        bar: number;
+      }
+    | undefined = undefined;
+  /** Record */
+  export let record: Record<string, number> = { a: 1, b: 2 };
+  /** Union of types */
+  export let unionTypes: number | string = 123;
+  /** Intersection of types */
+  export let intersection: ({ a: number } & { b: string }) | undefined = undefined;
+  /** Event callback function */
+  export let func: (event: MouseEvent) => number = () => 10;
+  /** Snippet contents */
+  export let children: Snippet;
+  /** Actual arg types inferred from the component */
+  export let argTypes: Record<string, any> = {};
+</script>
+
+<h1>Docgen: TS - legacy</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      trueLiteral,
+      symbol,
+      nullValue,
+      undefinedValue,
+      any,
+      date,
+      arrayOfNumbers,
+      enumValue,
+      unionLiteralStrings,
+      unionLiteralNumbers,
+      object,
+      inlineObject,
+      record,
+      unionTypes,
+      intersection,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts-referenced-prop-types.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TSReferencedPropTypes from './ts-referenced-prop-types.svelte';
+
+const meta = {
+  component: TSReferencedPropTypes,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TSReferencedPropTypes,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TSReferencedPropTypes>;
+
+export default meta;
+
+export const Default = {};

package/template/stories_svelte-vite-default-ts/docgen/ts-referenced-prop-types.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  type PropsA = {
+    /** Boolean */
+    boolean?: boolean;
+    /** String */
+    string?: string;
+    /** String (required) */
+    stringRequired: string;
+    /** Number */
+    number?: number;
+  };
+  type PropsB = {
+    /** True literal */
+    trueLiteral?: true;
+    /** Symbol */
+    symbol?: symbol;
+    /** Null */
+    nullValue?: null;
+    /** Undefined */
+    undefinedValue?: undefined;
+    /** Any */
+    any?: any;
+    /** Date */
+    date?: Date;
+    /** Array of numbers */
+    arrayOfNumbers?: number[];
+    /** Enum */
+    enumValue?: MyEnum;
+    /** Union of literal strings */
+    unionLiteralStrings?: LiteralStrings;
+    /** Union of literal numbers */
+    unionLiteralNumbers?: LiteralNumbers;
+    /** Object */
+    object?: MyObject;
+    /** Inline object */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /** Record */
+    record?: Record<string, number>;
+    /** Union of types */
+    unionTypes?: number | string;
+    /** Intersection of types */
+    intersection?: { a: number } & { b: string };
+    /** Event callback function */
+    func?: (event: MouseEvent) => number;
+    /** Snippet contents */
+    children: Snippet;
+    /** Actual arg types inferred from the component */
+    argTypes: Record<string, any>;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    children,
+    func = () => 10,
+    argTypes,
+  }: PropsA & PropsB = $props();
+</script>
+
+<h1>Docgen: TS - referenced prop types</h1>
+
+<h2>Args</h2>
+<pre>{JSON.stringify(
+    {
+      boolean,
+      string,
+      stringRequired,
+      number,
+      nullValue,
+      arrayOfNumbers,
+      enumValue,
+      record,
+      date,
+      unionTypes,
+      func,
+    },
+    null,
+    2
+  )}</pre>
+
+<h2>Children</h2>
+{#if children}
+  {@render children()}
+{/if}
+
+<h2>Arg Types</h2>
+<pre>{JSON.stringify(argTypes, null, 2)}</pre>

package/template/stories_svelte-vite-default-ts/docgen/ts.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/svelte-vite';
+
+import TS from './ts.svelte';
+
+const meta = {
+  component: TS,
+  tags: ['autodocs'],
+  render: (args, { argTypes }) => ({
+    Component: TS,
+    props: { ...args, argTypes },
+  }),
+} satisfies Meta<typeof TS>;
+
+export default meta;
+
+export const Default = {};