@storybook/preact-vite 9.0.0-alpha.20 → 9.0.0-alpha.21

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/preact-vite",
3
- "version": "9.0.0-alpha.20",
3
+ "version": "9.0.0-alpha.21",
4
4
  "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
5
5
  "keywords": [
6
6
  "storybook"
@@ -42,6 +42,7 @@
42
42
  "types": "dist/index.d.ts",
43
43
  "files": [
44
44
  "dist/**/*",
45
+ "template/cli/**/*",
45
46
  "types/**/*",
46
47
  "README.md",
47
48
  "*.js",
@@ -53,8 +54,8 @@
53
54
  "prep": "jiti ../../../scripts/prepare/bundle.ts"
54
55
  },
55
56
  "dependencies": {
56
- "@storybook/builder-vite": "9.0.0-alpha.20",
57
- "@storybook/preact": "9.0.0-alpha.20"
57
+ "@storybook/builder-vite": "9.0.0-alpha.21",
58
+ "@storybook/preact": "9.0.0-alpha.21"
58
59
  },
59
60
  "devDependencies": {
60
61
  "@types/node": "^22.0.0",
@@ -63,7 +64,7 @@
63
64
  },
64
65
  "peerDependencies": {
65
66
  "preact": ">=10",
66
- "storybook": "^9.0.0-alpha.20"
67
+ "storybook": "^9.0.0-alpha.21"
67
68
  },
68
69
  "engines": {
69
70
  "node": ">=20.0.0"
@@ -0,0 +1,7 @@
1
+ {
2
+ "rules": {
3
+ "import/extensions": "off",
4
+ "react/react-in-jsx-scope": "off",
5
+ "react/prop-types": "off"
6
+ }
7
+ }
@@ -0,0 +1,31 @@
1
+ import './button.css';
2
+
3
+ /**
4
+ * Primary UI component for user interaction
5
+ *
6
+ * @param {object} props
7
+ * @param {string} [props.primary=false] Default is `false`
8
+ * @param {string} [props.backgroundColor]
9
+ * @param {'small' | 'medium' | 'large'} [props.size='medium'] Default is `'medium'`
10
+ * @param {string} props.label
11
+ * @param {function} props.onClick
12
+ */
13
+ export const Button = ({
14
+ primary = false,
15
+ backgroundColor = null,
16
+ size = 'medium',
17
+ label,
18
+ ...props
19
+ }) => {
20
+ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
21
+ return (
22
+ <button
23
+ type="button"
24
+ className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
25
+ style={backgroundColor && { backgroundColor }}
26
+ {...props}
27
+ >
28
+ {label}
29
+ </button>
30
+ );
31
+ };
@@ -0,0 +1,44 @@
1
+ import { fn } from 'storybook/test';
2
+
3
+ import { Button } from './Button';
4
+
5
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
6
+ export default {
7
+ title: 'Example/Button',
8
+ component: Button,
9
+ tags: ['autodocs'],
10
+ argTypes: {
11
+ backgroundColor: { control: 'color' },
12
+ onClick: { action: 'onClick' },
13
+ },
14
+ // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
15
+ args: { onClick: fn() },
16
+ };
17
+
18
+ // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
19
+ export const Primary = {
20
+ args: {
21
+ primary: true,
22
+ label: 'Button',
23
+ },
24
+ };
25
+
26
+ export const Secondary = {
27
+ args: {
28
+ label: 'Button',
29
+ },
30
+ };
31
+
32
+ export const Large = {
33
+ args: {
34
+ size: 'large',
35
+ label: 'Button',
36
+ },
37
+ };
38
+
39
+ export const Small = {
40
+ args: {
41
+ size: 'small',
42
+ label: 'Button',
43
+ },
44
+ };
@@ -0,0 +1,53 @@
1
+ import { Button } from './Button';
2
+ import './header.css';
3
+
4
+ /**
5
+ * Header component
6
+ *
7
+ * @param {object} props
8
+ * @param {object} [props.user]
9
+ * @param {string} props.user.name
10
+ * @param {function} props.onLogin
11
+ * @param {function} props.onLogout
12
+ * @param {function} props.onCreateAccount
13
+ */
14
+ export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
15
+ <header>
16
+ <div className="storybook-header">
17
+ <div>
18
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
19
+ <g fill="none" fillRule="evenodd">
20
+ <path
21
+ d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
22
+ fill="#FFF"
23
+ />
24
+ <path
25
+ d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
26
+ fill="#555AB9"
27
+ />
28
+ <path
29
+ d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
30
+ fill="#91BAF8"
31
+ />
32
+ </g>
33
+ </svg>
34
+ <h1>Acme</h1>
35
+ </div>
36
+ <div>
37
+ {user ? (
38
+ <>
39
+ <span className="welcome">
40
+ Welcome, <b>{user.name}</b>!
41
+ </span>
42
+ <Button size="small" onClick={onLogout} label="Log out" />
43
+ </>
44
+ ) : (
45
+ <>
46
+ <Button size="small" onClick={onLogin} label="Log in" />
47
+ <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
48
+ </>
49
+ )}
50
+ </div>
51
+ </div>
52
+ </header>
53
+ );
@@ -0,0 +1,29 @@
1
+ import { fn } from 'storybook/test';
2
+
3
+ import { Header } from './Header';
4
+
5
+ export default {
6
+ title: 'Example/Header',
7
+ component: Header,
8
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
9
+ tags: ['autodocs'],
10
+ parameters: {
11
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
12
+ layout: 'fullscreen',
13
+ },
14
+ args: {
15
+ onLogin: fn(),
16
+ onLogout: fn(),
17
+ onCreateAccount: fn(),
18
+ },
19
+ };
20
+
21
+ export const LoggedIn = {
22
+ args: {
23
+ user: {
24
+ name: 'Jane Doe',
25
+ },
26
+ },
27
+ };
28
+
29
+ export const LoggedOut = {};
@@ -0,0 +1,70 @@
1
+ import { useState } from 'preact/hooks';
2
+
3
+ import { Header } from './Header';
4
+ import './page.css';
5
+
6
+ /** Simple page component */
7
+ export const Page = () => {
8
+ const [user, setUser] = useState();
9
+
10
+ return (
11
+ <article>
12
+ <Header
13
+ user={user}
14
+ onLogin={() => setUser({ name: 'Jane Doe' })}
15
+ onLogout={() => setUser(undefined)}
16
+ onCreateAccount={() => setUser({ name: 'Jane Doe' })}
17
+ />
18
+
19
+ <section className="storybook-page">
20
+ <h2>Pages in Storybook</h2>
21
+ <p>
22
+ We recommend building UIs with a{' '}
23
+ <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
24
+ <strong>component-driven</strong>
25
+ </a>{' '}
26
+ process starting with atomic components and ending with pages.
27
+ </p>
28
+ <p>
29
+ Render pages with mock data. This makes it easy to build and review page states without
30
+ needing to navigate to them in your app. Here are some handy patterns for managing page
31
+ data in Storybook:
32
+ </p>
33
+ <ul>
34
+ <li>
35
+ Use a higher-level connected component. Storybook helps you compose such data from the
36
+ "args" of child component stories
37
+ </li>
38
+ <li>
39
+ Assemble data in the page component from your services. You can mock these services out
40
+ using Storybook.
41
+ </li>
42
+ </ul>
43
+ <p>
44
+ Get a guided tutorial on component-driven development at{' '}
45
+ <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
46
+ Storybook tutorials
47
+ </a>
48
+ . Read more in the{' '}
49
+ <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
50
+ docs
51
+ </a>
52
+ .
53
+ </p>
54
+ <div className="tip-wrapper">
55
+ <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
56
+ <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
57
+ <g fill="none" fillRule="evenodd">
58
+ <path
59
+ 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"
60
+ id="a"
61
+ fill="#999"
62
+ />
63
+ </g>
64
+ </svg>
65
+ Viewports addon in the toolbar
66
+ </div>
67
+ </section>
68
+ </article>
69
+ );
70
+ };
@@ -0,0 +1,25 @@
1
+ import { userEvent, within } from 'storybook/test';
2
+
3
+ import { Page } from './Page';
4
+
5
+ export default {
6
+ title: 'Example/Page',
7
+ component: Page,
8
+ parameters: {
9
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
10
+ layout: 'fullscreen',
11
+ },
12
+ };
13
+
14
+ export const LoggedOut = {};
15
+
16
+ // More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
17
+ export const LoggedIn = {
18
+ play: async ({ canvasElement }) => {
19
+ const canvas = within(canvasElement);
20
+ const loginButton = await canvas.getByRole('button', {
21
+ name: /Log in/i,
22
+ });
23
+ await userEvent.click(loginButton);
24
+ },
25
+ };