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

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

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

package/template/stories_svelte-kit-skeleton-ts/DocsTS.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  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 = 100;
+  /**
+   * 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;
+</script>
+
+<div>Docs: TS</div>

package/template/stories_svelte-kit-skeleton-ts/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-ts/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-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-skeleton-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-skeleton-ts/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-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-skeleton-ts/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-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-skeleton-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-skeleton-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-skeleton-ts/paths.stories.js

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

package/template/stories_svelte-kit-skeleton-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',
+}