@storybook/experimental-nextjs-vite 9.0.0-alpha.0 → 9.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,56 +0,0 @@
1
- import React from 'react';
2
-
3
- import { Button } from './Button';
4
- import './header.css';
5
-
6
- type User = {
7
- name: string;
8
- };
9
-
10
- export interface HeaderProps {
11
- user?: User;
12
- onLogin?: () => void;
13
- onLogout?: () => void;
14
- onCreateAccount?: () => void;
15
- }
16
-
17
- export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
18
- <header>
19
- <div className="storybook-header">
20
- <div>
21
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
22
- <g fill="none" fillRule="evenodd">
23
- <path
24
- d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
25
- fill="#FFF"
26
- />
27
- <path
28
- d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
29
- fill="#555AB9"
30
- />
31
- <path
32
- d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
33
- fill="#91BAF8"
34
- />
35
- </g>
36
- </svg>
37
- <h1>Acme</h1>
38
- </div>
39
- <div>
40
- {user ? (
41
- <>
42
- <span className="welcome">
43
- Welcome, <b>{user.name}</b>!
44
- </span>
45
- <Button size="small" onClick={onLogout} label="Log out" />
46
- </>
47
- ) : (
48
- <>
49
- <Button size="small" onClick={onLogin} label="Log in" />
50
- <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
51
- </>
52
- )}
53
- </div>
54
- </div>
55
- </header>
56
- );
@@ -1,32 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { expect, userEvent, within } from '@storybook/test';
3
-
4
- import { Page } from './Page';
5
-
6
- const meta: Meta<typeof Page> = {
7
- title: 'Example/Page',
8
- component: Page,
9
- parameters: {
10
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
11
- layout: 'fullscreen',
12
- },
13
- };
14
-
15
- export default meta;
16
- type Story = StoryObj<typeof Page>;
17
-
18
- export const LoggedOut: Story = {};
19
-
20
- // More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
21
- export const LoggedIn: Story = {
22
- play: async ({ canvasElement }) => {
23
- const canvas = within(canvasElement);
24
- const loginButton = canvas.getByRole('button', { name: /Log in/i });
25
- await expect(loginButton).toBeInTheDocument();
26
- await userEvent.click(loginButton);
27
- await expect(loginButton).not.toBeInTheDocument();
28
-
29
- const logoutButton = canvas.getByRole('button', { name: /Log out/i });
30
- await expect(logoutButton).toBeInTheDocument();
31
- },
32
- };
@@ -1,73 +0,0 @@
1
- import React from 'react';
2
-
3
- import { Header } from './Header';
4
- import './page.css';
5
-
6
- type User = {
7
- name: string;
8
- };
9
-
10
- export const Page: React.FC = () => {
11
- const [user, setUser] = React.useState<User>();
12
-
13
- return (
14
- <article>
15
- <Header
16
- user={user}
17
- onLogin={() => setUser({ name: 'Jane Doe' })}
18
- onLogout={() => setUser(undefined)}
19
- onCreateAccount={() => setUser({ name: 'Jane Doe' })}
20
- />
21
-
22
- <section className="storybook-page">
23
- <h2>Pages in Storybook</h2>
24
- <p>
25
- We recommend building UIs with a{' '}
26
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
27
- <strong>component-driven</strong>
28
- </a>{' '}
29
- process starting with atomic components and ending with pages.
30
- </p>
31
- <p>
32
- Render pages with mock data. This makes it easy to build and review page states without
33
- needing to navigate to them in your app. Here are some handy patterns for managing page
34
- data in Storybook:
35
- </p>
36
- <ul>
37
- <li>
38
- Use a higher-level connected component. Storybook helps you compose such data from the
39
- "args" of child component stories
40
- </li>
41
- <li>
42
- Assemble data in the page component from your services. You can mock these services out
43
- using Storybook.
44
- </li>
45
- </ul>
46
- <p>
47
- Get a guided tutorial on component-driven development at{' '}
48
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
49
- Storybook tutorials
50
- </a>
51
- . Read more in the{' '}
52
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
53
- docs
54
- </a>
55
- .
56
- </p>
57
- <div className="tip-wrapper">
58
- <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
59
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
60
- <g fill="none" fillRule="evenodd">
61
- <path
62
- 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"
63
- id="a"
64
- fill="#999"
65
- />
66
- </g>
67
- </svg>
68
- Viewports addon in the toolbar
69
- </div>
70
- </section>
71
- </article>
72
- );
73
- };