@storybook/experimental-nextjs-vite 0.0.0-pr-30943-sha-eba6de84 → 0.0.0-pr-31494-sha-c99bda03

package/template/cli/ts-3-8/Header.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

package/template/cli/ts-3-8/Header.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+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) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);

package/template/cli/ts-3-8/Page.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/template/cli/ts-3-8/Page.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" 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 className="tip-wrapper">
+          <span className="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" fillRule="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/cli/ts-4-9/Button.stories.ts

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { Button } from './Button';
 

package/template/cli/ts-4-9/Button.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import './button.css';
 
 export interface ButtonProps {

package/template/cli/ts-4-9/Header.stories.ts

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { Header } from './Header';
 

package/template/cli/ts-4-9/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Button } from './Button';
 import './header.css';
 

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

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-
-import { expect, userEvent, within } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
 
 import { Page } from './Page';
 

package/dist/index.d-98b9eb06.d.ts

@@ -1,296 +0,0 @@
-interface MockResultReturn<T> {
-	type: "return";
-	/**
-	* The value that was returned from the function. If function returned a Promise, then this will be a resolved value.
-	*/
-	value: T;
-}
-interface MockResultIncomplete {
-	type: "incomplete";
-	value: undefined;
-}
-interface MockResultThrow {
-	type: "throw";
-	/**
-	* An error that was thrown during function execution.
-	*/
-	value: any;
-}
-interface MockSettledResultFulfilled<T> {
-	type: "fulfilled";
-	value: T;
-}
-interface MockSettledResultRejected {
-	type: "rejected";
-	value: any;
-}
-type MockResult<T> = MockResultReturn<T> | MockResultThrow | MockResultIncomplete;
-type MockSettledResult<T> = MockSettledResultFulfilled<T> | MockSettledResultRejected;
-interface MockContext<T extends Procedure> {
-	/**
-	* This is an array containing all arguments for each call. One item of the array is the arguments of that call.
-	*
-	* @see https://vitest.dev/api/mock#mock-calls
-	* @example
-	* const fn = vi.fn()
-	*
-	* fn('arg1', 'arg2')
-	* fn('arg3')
-	*
-	* fn.mock.calls === [
-	*   ['arg1', 'arg2'], // first call
-	*   ['arg3'], // second call
-	* ]
-	*/
-	calls: Parameters<T>[];
-	/**
-	* This is an array containing all instances that were instantiated when mock was called with a `new` keyword. Note that this is an actual context (`this`) of the function, not a return value.
-	* @see https://vitest.dev/api/mock#mock-instances
-	*/
-	instances: ReturnType<T>[];
-	/**
-	* An array of `this` values that were used during each call to the mock function.
-	* @see https://vitest.dev/api/mock#mock-contexts
-	*/
-	contexts: ThisParameterType<T>[];
-	/**
-	* The order of mock's execution. This returns an array of numbers which are shared between all defined mocks.
-	*
-	* @see https://vitest.dev/api/mock#mock-invocationcallorder
-	* @example
-	* const fn1 = vi.fn()
-	* const fn2 = vi.fn()
-	*
-	* fn1()
-	* fn2()
-	* fn1()
-	*
-	* fn1.mock.invocationCallOrder === [1, 3]
-	* fn2.mock.invocationCallOrder === [2]
-	*/
-	invocationCallOrder: number[];
-	/**
-	* This is an array containing all values that were `returned` from the function.
-	*
-	* The `value` property contains the returned value or thrown error. If the function returned a `Promise`, then `result` will always be `'return'` even if the promise was rejected.
-	*
-	* @see https://vitest.dev/api/mock#mock-results
-	* @example
-	* const fn = vi.fn()
-	*   .mockReturnValueOnce('result')
-	*   .mockImplementationOnce(() => { throw new Error('thrown error') })
-	*
-	* const result = fn()
-	*
-	* try {
-	*   fn()
-	* }
-	* catch {}
-	*
-	* fn.mock.results === [
-	*   {
-	*     type: 'return',
-	*     value: 'result',
-	*   },
-	*   {
-	*     type: 'throw',
-	*     value: Error,
-	*   },
-	* ]
-	*/
-	results: MockResult<ReturnType<T>>[];
-	/**
-	* An array containing all values that were `resolved` or `rejected` from the function.
-	*
-	* This array will be empty if the function was never resolved or rejected.
-	*
-	* @see https://vitest.dev/api/mock#mock-settledresults
-	* @example
-	* const fn = vi.fn().mockResolvedValueOnce('result')
-	*
-	* const result = fn()
-	*
-	* fn.mock.settledResults === []
-	* fn.mock.results === [
-	*   {
-	*     type: 'return',
-	*     value: Promise<'result'>,
-	*   },
-	* ]
-	*
-	* await result
-	*
-	* fn.mock.settledResults === [
-	*   {
-	*     type: 'fulfilled',
-	*     value: 'result',
-	*   },
-	* ]
-	*/
-	settledResults: MockSettledResult<Awaited<ReturnType<T>>>[];
-	/**
-	* This contains the arguments of the last call. If spy wasn't called, will return `undefined`.
-	* @see https://vitest.dev/api/mock#mock-lastcall
-	*/
-	lastCall: Parameters<T> | undefined;
-}
-type Procedure = (...args: any[]) => any;
-type NormalizedProcedure<T extends Procedure> = (...args: Parameters<T>) => ReturnType<T>;
-interface MockInstance<T extends Procedure = Procedure> {
-	/**
-	* Use it to return the name assigned to the mock with the `.mockName(name)` method. By default, it will return `vi.fn()`.
-	* @see https://vitest.dev/api/mock#getmockname
-	*/
-	getMockName(): string;
-	/**
-	* Sets the internal mock name. This is useful for identifying the mock when an assertion fails.
-	* @see https://vitest.dev/api/mock#mockname
-	*/
-	mockName(name: string): this;
-	/**
-	* Current context of the mock. It stores information about all invocation calls, instances, and results.
-	*/
-	mock: MockContext<T>;
-	/**
-	* Clears all information about every call. After calling it, all properties on `.mock` will return to their initial state. This method does not reset implementations. It is useful for cleaning up mocks between different assertions.
-	*
-	* To automatically call this method before each test, enable the [`clearMocks`](https://vitest.dev/config/#clearmocks) setting in the configuration.
-	* @see https://vitest.dev/api/mock#mockclear
-	*/
-	mockClear(): this;
-	/**
-	* Does what `mockClear` does and resets inner implementation to the original function. This also resets all "once" implementations.
-	*
-	* Note that resetting a mock from `vi.fn()` will set implementation to an empty function that returns `undefined`.
-	* Resetting a mock from `vi.fn(impl)` will set implementation to `impl`. It is useful for completely resetting a mock to its default state.
-	*
-	* To automatically call this method before each test, enable the [`mockReset`](https://vitest.dev/config/#mockreset) setting in the configuration.
-	* @see https://vitest.dev/api/mock#mockreset
-	*/
-	mockReset(): this;
-	/**
-	* Does what `mockReset` does and restores original descriptors of spied-on objects.
-	*
-	* Note that restoring mock from `vi.fn()` will set implementation to an empty function that returns `undefined`. Restoring a `vi.fn(impl)` will restore implementation to `impl`.
-	* @see https://vitest.dev/api/mock#mockrestore
-	*/
-	mockRestore(): void;
-	/**
-	* Returns current permanent mock implementation if there is one.
-	*
-	* If mock was created with `vi.fn`, it will consider passed down method as a mock implementation.
-	*
-	* If mock was created with `vi.spyOn`, it will return `undefined` unless a custom implementation was provided.
-	*/
-	getMockImplementation(): NormalizedProcedure<T> | undefined;
-	/**
-	* Accepts a function to be used as the mock implementation. TypeScript expects the arguments and return type to match those of the original function.
-	* @see https://vitest.dev/api/mock#mockimplementation
-	* @example
-	* const increment = vi.fn().mockImplementation(count => count + 1);
-	* expect(increment(3)).toBe(4);
-	*/
-	mockImplementation(fn: NormalizedProcedure<T>): this;
-	/**
-	* Accepts a function to be used as the mock implementation. TypeScript expects the arguments and return type to match those of the original function. This method can be chained to produce different results for multiple function calls.
-	*
-	* When the mocked function runs out of implementations, it will invoke the default implementation set with `vi.fn(() => defaultValue)` or `.mockImplementation(() => defaultValue)` if they were called.
-	* @see https://vitest.dev/api/mock#mockimplementationonce
-	* @example
-	* const fn = vi.fn(count => count).mockImplementationOnce(count => count + 1);
-	* expect(fn(3)).toBe(4);
-	* expect(fn(3)).toBe(3);
-	*/
-	mockImplementationOnce(fn: NormalizedProcedure<T>): this;
-	/**
-	* Overrides the original mock implementation temporarily while the callback is being executed.
-	*
-	* Note that this method takes precedence over the [`mockImplementationOnce`](https://vitest.dev/api/mock#mockimplementationonce).
-	* @see https://vitest.dev/api/mock#withimplementation
-	* @example
-	* const myMockFn = vi.fn(() => 'original')
-	*
-	* myMockFn.withImplementation(() => 'temp', () => {
-	*   myMockFn() // 'temp'
-	* })
-	*
-	* myMockFn() // 'original'
-	*/
-	withImplementation<T2>(fn: NormalizedProcedure<T>, cb: () => T2): T2 extends Promise<unknown> ? Promise<this> : this;
-	/**
-	* Use this if you need to return the `this` context from the method without invoking the actual implementation.
-	* @see https://vitest.dev/api/mock#mockreturnthis
-	*/
-	mockReturnThis(): this;
-	/**
-	* Accepts a value that will be returned whenever the mock function is called. TypeScript will only accept values that match the return type of the original function.
-	* @see https://vitest.dev/api/mock#mockreturnvalue
-	* @example
-	* const mock = vi.fn()
-	* mock.mockReturnValue(42)
-	* mock() // 42
-	* mock.mockReturnValue(43)
-	* mock() // 43
-	*/
-	mockReturnValue(value: ReturnType<T>): this;
-	/**
-	* Accepts a value that will be returned whenever the mock function is called. TypeScript will only accept values that match the return type of the original function.
-	*
-	* When the mocked function runs out of implementations, it will invoke the default implementation set with `vi.fn(() => defaultValue)` or `.mockImplementation(() => defaultValue)` if they were called.
-	* @example
-	* const myMockFn = vi
-	*   .fn()
-	*   .mockReturnValue('default')
-	*   .mockReturnValueOnce('first call')
-	*   .mockReturnValueOnce('second call')
-	*
-	* // 'first call', 'second call', 'default'
-	* console.log(myMockFn(), myMockFn(), myMockFn())
-	*/
-	mockReturnValueOnce(value: ReturnType<T>): this;
-	/**
-	* Accepts a value that will be resolved when the async function is called. TypeScript will only accept values that match the return type of the original function.
-	* @example
-	* const asyncMock = vi.fn().mockResolvedValue(42)
-	* asyncMock() // Promise<42>
-	*/
-	mockResolvedValue(value: Awaited<ReturnType<T>>): this;
-	/**
-	* Accepts a value that will be resolved during the next function call. TypeScript will only accept values that match the return type of the original function. If chained, each consecutive call will resolve the specified value.
-	* @example
-	* const myMockFn = vi
-	*   .fn()
-	*   .mockResolvedValue('default')
-	*   .mockResolvedValueOnce('first call')
-	*   .mockResolvedValueOnce('second call')
-	*
-	* // Promise<'first call'>, Promise<'second call'>, Promise<'default'>
-	* console.log(myMockFn(), myMockFn(), myMockFn())
-	*/
-	mockResolvedValueOnce(value: Awaited<ReturnType<T>>): this;
-	/**
-	* Accepts an error that will be rejected when async function is called.
-	* @example
-	* const asyncMock = vi.fn().mockRejectedValue(new Error('Async error'))
-	* await asyncMock() // throws Error<'Async error'>
-	*/
-	mockRejectedValue(error: unknown): this;
-	/**
-	* Accepts a value that will be rejected during the next function call. If chained, each consecutive call will reject the specified value.
-	* @example
-	* const asyncMock = vi
-	*   .fn()
-	*   .mockResolvedValueOnce('first call')
-	*   .mockRejectedValueOnce(new Error('Async error'))
-	*
-	* await asyncMock() // first call
-	* await asyncMock() // throws Error<'Async error'>
-	*/
-	mockRejectedValueOnce(error: unknown): this;
-}
-interface Mock<T extends Procedure = Procedure> extends MockInstance<T> {
-	new (...args: Parameters<T>): ReturnType<T>;
-	(...args: Parameters<T>): ReturnType<T>;
-}
-
-export { Mock as M };