@storybook/svelte-vite 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-vite-default-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-vite-default-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',
+}