@storybook/sveltekit 9.0.0-alpha.1 → 9.0.0-alpha.11

package/template/cli/ts-4-9/Page.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user: { name: string } | null = null;
+</script>
+
+<article>
+  <Header
+    {user}
+    on:login={() => (user = { name: 'Jane Doe' })}
+    on:logout={() => (user = null)}
+    on:createAccount={() => (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-kit-prerelease-ts/DocsJSDocRunes.svelte

@@ -0,0 +1,55 @@
+<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
+   */
+
+  /** @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,
+  } = $props();
+</script>
+
+<div>Docs: JSDoc + Runes</div>

package/template/stories_svelte-kit-prerelease-ts/DocsTSInlinePropTypes.svelte

@@ -0,0 +1,114 @@
+<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,
+  }: {
+    /**
+     * 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;
+    /**
+     * 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>;
+    /**
+     * Date
+     */
+    date?: Date;
+    /**
+     * Union of types
+     */
+    unionTypes?: number | string;
+    /**
+     * Intersection of types
+     */
+    intersection?: { a: number } & { b: string };
+    /**
+     * Snippet contents
+     */
+    children: Snippet;
+    /**
+     * Event callback function
+     */
+    func?: (event: MouseEvent) => number;
+  } = $props();
+</script>
+
+<div>Docs: TS + Runes (inline prop types)</div>

package/template/stories_svelte-kit-prerelease-ts/DocsTSLegacy.svelte

@@ -0,0 +1,102 @@
+<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;
+  /**
+   * Snippet contents
+   */
+  export let children: Snippet;
+  /**
+   * Event callback function
+   */
+  export let func: (event: MouseEvent) => number = () => 10;
+</script>
+
+<div>Docs: TS (Non-runes mode)</div>

package/template/stories_svelte-kit-prerelease-ts/DocsTSReferencedPropTypes.svelte

@@ -0,0 +1,118 @@
+<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;
+    /**
+     * 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>;
+    /**
+     * Date
+     */
+    date?: Date;
+    /**
+     * Union of types
+     */
+    unionTypes?: number | string;
+    /**
+     * Intersection of types
+     */
+    intersection?: { a: number } & { b: string };
+    /**
+     * Snippet contents
+     */
+    children: Snippet;
+    /**
+     * Event callback function
+     */
+    func?: (event: MouseEvent) => 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,
+  }: PropsA & PropsB = $props();
+</script>
+
+<div>Docs: TS + Runes (referenced prop types)</div>

package/template/stories_svelte-kit-prerelease-ts/Forms.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form use:enhance>
+	<button>enhance</button>
+</form>

package/template/stories_svelte-kit-prerelease-ts/Hrefs.svelte

@@ -0,0 +1,8 @@
+<ul>
+  <li><a href="/basic-href">Link to <code>/basic-href</code></a></li>
+  <li>
+    <a href="/deep/nested/link?with=true&multiple-params=200#and-an-id"
+      >Link to <code>/deep/nested/link?with=true&multiple-params=200#and-an-id</code></a
+    >
+  </li>
+</ul>

package/template/stories_svelte-kit-prerelease-ts/Navigation.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { goto, invalidate, invalidateAll, afterNavigate, replaceState, pushState } from '$app/navigation';
+
+	export let afterNavigateFn;
+
+	afterNavigate(afterNavigateFn);
+</script>
+
+<button
+	on:click={() => {
+		goto('/storybook-goto');
+	}}>goto</button
+>
+
+<button
+	on:click={() => {
+		invalidate('/storybook-invalidate');
+	}}>invalidate</button
+>
+
+<button
+	on:click={() => {
+		invalidateAll();
+	}}>invalidateAll</button
+>
+
+<button
+	on:click={() => {
+		pushState('/storybook-push-state', {});
+	}}>pushState</button
+>
+
+<button
+	on:click={() => {
+		replaceState('/storybook-replace-state', {});
+	}}>replaceState</button
+>

package/template/stories_svelte-kit-prerelease-ts/Stores.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { page, navigating, updated, getStores } from '$app/stores';
+
+	let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores();
+
+	updated.check();
+</script>
+
+<p>Directly importing</p>
+<pre>{JSON.stringify($page, null, 2)}</pre>
+<pre>{JSON.stringify($navigating, null, 2)}</pre>
+<pre>{JSON.stringify($updated, null, 2)}</pre>
+
+<p>With getStores</p>
+<pre>{JSON.stringify($pageStore, null, 2)}</pre>
+<pre>{JSON.stringify($navigatingStore, null, 2)}</pre>
+<pre>{JSON.stringify($updatedStore, null, 2)}</pre>

package/template/stories_svelte-kit-prerelease-ts/forms.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Forms from './Forms.svelte';
 

package/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Hrefs from './Hrefs.svelte';
 

package/template/stories_svelte-kit-prerelease-ts/navigation.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Navigation from './Navigation.svelte';
 

package/template/stories_svelte-kit-prerelease-ts/types.ts

@@ -0,0 +1,7 @@
+export type LiteralNumbers = 100 | 1000 | 10000;
+export type LiteralStrings = 'apple' | 'grape' | 'orange';
+
+export enum MyEnum {
+  FOO = 'foo',
+  BAR = 'bar',
+}

package/template/stories_svelte-kit-skeleton-js/Environment.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { browser, dev, building, version } from '$app/environment';
+</script>
+
+<div data-testid="browser">{browser}</div>
+<div data-testid="dev">{dev}</div>
+<div data-testid="building">{building}</div>
+<div data-testid="version" data-chromatic="ignore">{version}</div>

package/template/stories_svelte-kit-skeleton-js/Forms.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form use:enhance method="post">
+	<button>enhance</button>
+</form>

package/template/stories_svelte-kit-skeleton-js/Hrefs.svelte

@@ -0,0 +1,8 @@
+<ul>
+  <li><a href="/basic-href">Link to <code>/basic-href</code></a></li>
+  <li>
+    <a href="/deep/nested/link?with=true&multiple-params=200#and-an-id"
+      >Link to <code>/deep/nested/link?with=true&multiple-params=200#and-an-id</code></a
+    >
+  </li>
+</ul>

package/template/stories_svelte-kit-skeleton-js/Navigation.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { goto, invalidate, invalidateAll, afterNavigate, pushState, replaceState } from '$app/navigation';
+
+	export let afterNavigateFn;
+	if(afterNavigateFn){
+		afterNavigate(afterNavigateFn);
+	}
+</script>
+
+<button
+	on:click={() => {
+		goto('/storybook-goto');
+	}}>goto</button
+>
+
+<button
+	on:click={() => {
+		invalidate('/storybook-invalidate');
+	}}>invalidate</button
+>
+
+<button
+	on:click={() => {
+		invalidateAll();
+	}}>invalidateAll</button
+>
+
+<button
+	on:click={() => {
+		pushState('/storybook-push-state', {});
+	}}>pushState</button
+>
+
+<button
+	on:click={() => {
+		replaceState('/storybook-replace-state', {});
+	}}>replaceState</button
+>

package/template/stories_svelte-kit-skeleton-js/Paths.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { assets, base } from "$app/paths";
+</script>
+
+<div data-testid="assets">{assets}</div>
+<div data-testid="base">{base}</div>

package/template/stories_svelte-kit-skeleton-js/Stores.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { page, navigating, updated, getStores } from '$app/stores';
+
+	let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores();
+
+	updated.check();
+</script>
+
+<p>Directly importing</p>
+<pre>{JSON.stringify($page, null, 2)}</pre>
+<pre>{JSON.stringify($navigating, null, 2)}</pre>
+<pre>{JSON.stringify($updated, null, 2)}</pre>
+
+<p>With getStores</p>
+<pre>{JSON.stringify($pageStore, null, 2)}</pre>
+<pre>{JSON.stringify($navigatingStore, null, 2)}</pre>
+<pre>{JSON.stringify($updatedStore, null, 2)}</pre>

package/template/stories_svelte-kit-skeleton-js/environment.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Environment from './Environment.svelte';
 

package/template/stories_svelte-kit-skeleton-js/forms.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, within } from '@storybook/test';
+import { expect, fn, userEvent, within } from 'storybook/test';
 
 import Forms from './Forms.svelte';
 

package/template/stories_svelte-kit-skeleton-js/hrefs.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Hrefs from './Hrefs.svelte';
 

package/template/stories_svelte-kit-skeleton-js/navigation.stories.js

@@ -1,4 +1,4 @@
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, within } from 'storybook/test';
 
 import Navigation from './Navigation.svelte';