@storybook/react 7.0.0-alpha.46 → 7.0.0-alpha.48

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
-import * as lib_types_dist from 'lib/types/dist';
 import { R as ReactFramework, S as StoryFnReactReturnType } from './types-e57bba30.js';
+import * as lib_types_dist from 'lib/types/dist';
 import { ArgsStoryFn, Store_RenderContext } from '@storybook/types';
 import 'react';
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as _storybook_types from '@storybook/types';
 import { Args, DecoratorFunction, Addon_ClientStoryApi, Addon_Loadable, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, ProjectAnnotations, Store_ComposedStory, Store_CSFExports, Store_StoriesWithPartialProps } from '@storybook/types';
 import { R as ReactFramework, S as StoryFnReactReturnType } from './types-e57bba30.js';
+export { R as ReactFramework } from './types-e57bba30.js';
 import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import { Simplify, SetOptional } from 'type-fest';
 

package/dist/index.js

@@ -1 +1 @@
-"use strict";var _=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var L=(o,t)=>{for(var e in t)m(o,e,{get:t[e],enumerable:!0})},y=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!U.call(o,s)&&s!==e&&m(o,s,{get:()=>t[s],enumerable:!(r=T(t,s))||r.enumerable});return o};var p=(o,t,e)=>(e=o!=null?_(W(o)):{},y(t||!o||!o.__esModule?m(e,"default",{value:o,enumerable:!0}):e,o)),N=o=>y(m({},"__esModule",{value:!0}),o);var Z={};L(Z,{composeStories:()=>X,composeStory:()=>b,configure:()=>q,forceReRender:()=>z,raw:()=>H,setGlobalConfig:()=>J,setProjectAnnotations:()=>M,storiesOf:()=>$});module.exports=N(Z);var S=p(require("global")),{window:A}=S.default;A&&(A.STORYBOOK_ENV="react");var k=require("@storybook/core-client");var F=p(require("global")),n=p(require("react")),a=p(require("react-dom")),{FRAMEWORK_OPTIONS:i}=F.default,d=new Map,l=(o,t)=>{let{id:e,component:r}=t;if(!r)throw new Error(`Unable to render story ${e} as the component annotation is missing from the default export`);return n.default.createElement(r,{...o})},O=({callback:o,children:t})=>{let e=(0,n.useRef)();return(0,n.useLayoutEffect)(()=>{e.current!==o&&(e.current=o,o())},[o]),t},G=async(o,t)=>{let e=await Y(t);return new Promise(r=>{e?e.render(n.default.createElement(O,{callback:()=>r(null)},o)):a.default.render(o,t,()=>r(null))})},V=a.version&&(a.version.startsWith("18")||a.version.startsWith("0.0.0")),B=(i==null?void 0:i.legacyRootApi)!==!0,h=B&&V,g=o=>{let t=d.get(o);t&&h?(t.unmount(),d.delete(o)):a.default.unmountComponentAtNode(o)},Y=async o=>{if(!h)return null;let t=d.get(o);return t||(t=(await import("react-dom/client")).default.createRoot(o),d.set(o,t)),t},R=class extends n.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:e}=this.state,{showMain:r}=this.props;e||r()}componentDidCatch(e){let{showException:r}=this.props;r(e)}render(){let{hasError:e}=this.state,{children:r}=this.props;return e?null:r}},C=i!=null&&i.strictMode?n.StrictMode:n.Fragment;async function x({storyContext:o,unboundStoryFn:t,showMain:e,showException:r,forceRemount:s},u){let w=n.default.createElement(R,{showMain:e,showException:r},n.default.createElement(t,{...o})),D=C?n.default.createElement(C,null,w):w;return s&&g(u),await G(D,u),()=>g(u)}var E="react",f=(0,k.start)(x,{render:l}),$=(o,t)=>f.clientApi.storiesOf(o,t).addParameters({framework:E}),q=(...o)=>f.configure(E,...o),z=f.forceReRender,H=f.clientApi.raw;var c=require("@storybook/store"),P=require("@storybook/client-logger");function M(o){(0,c.setProjectAnnotations)(o)}function J(o){(0,P.deprecate)("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),M(o)}var Q={render:l};function b(o,t,e,r){return(0,c.composeStory)(o,t,e,Q,r)}function X(o,t){return(0,c.composeStories)(o,t,b)}var j;(j=module==null?void 0:module.hot)==null||j.decline();0&&(module.exports={composeStories,composeStory,configure,forceReRender,raw,setGlobalConfig,setProjectAnnotations,storiesOf});
+"use strict";var j=Object.create;var c=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var X=(t,o)=>{for(var e in o)c(t,e,{get:o[e],enumerable:!0})},C=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!J.call(t,s)&&s!==e&&c(t,s,{get:()=>o[s],enumerable:!(r=D(o,s))||r.enumerable});return t};var m=(t,o,e)=>(e=t!=null?j(v(t)):{},C(o||!t||!t.__esModule?c(e,"default",{value:t,enumerable:!0}):e,t)),W=t=>C(c({},"__esModule",{value:!0}),t);var Z={};X(Z,{composeStories:()=>Q,composeStory:()=>O,configure:()=>Y,forceReRender:()=>$,raw:()=>q,setGlobalConfig:()=>z,setProjectAnnotations:()=>P,storiesOf:()=>B});module.exports=W(Z);var R=m(require("global")),{window:S}=R.default;S&&(S.STORYBOOK_ENV="react");var T=require("@storybook/core-client");var F=m(require("global")),n=m(require("react")),a=m(require("react-dom")),{FRAMEWORK_OPTIONS:p}=F.default,y=new Map,A=(t,o)=>{let{id:e,component:r}=o;if(!r)throw new Error(`Unable to render story ${e} as the component annotation is missing from the default export`);return n.default.createElement(r,{...t})},U=({callback:t,children:o})=>{let e=(0,n.useRef)();return(0,n.useLayoutEffect)(()=>{e.current!==t&&(e.current=t,t())},[t]),o},L=async(t,o)=>{let e=await V(o);return new Promise(r=>{e?e.render(n.default.createElement(U,{callback:()=>r(null)},t)):a.default.render(t,o,()=>r(null))})},N=a.version&&(a.version.startsWith("18")||a.version.startsWith("0.0.0")),G=(p==null?void 0:p.legacyRootApi)!==!0,x=G&&N,u=t=>{let o=y.get(t);o&&x?(o.unmount(),y.delete(t)):a.default.unmountComponentAtNode(t)},V=async t=>{if(!x)return null;let o=y.get(t);return o||(o=(await import("react-dom/client")).default.createRoot(t),y.set(t,o)),o},f=class extends n.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:e}=this.state,{showMain:r}=this.props;e||r()}componentDidCatch(e){let{showException:r}=this.props;r(e)}render(){let{hasError:e}=this.state,{children:r}=this.props;return e?null:r}},w=p!=null&&p.strictMode?n.StrictMode:n.Fragment;async function k({storyContext:t,unboundStoryFn:o,showMain:e,showException:r,forceRemount:s},l){let g=n.default.createElement(f,{showMain:e,showException:r},n.default.createElement(o,{...t})),b=w?n.default.createElement(w,null,g):g;return s&&u(l),await L(b,l),()=>u(l)}var E="react",d=(0,T.start)(k,{render:A}),B=(t,o)=>d.clientApi.storiesOf(t,o).addParameters({framework:E}),Y=(...t)=>d.configure(E,...t),$=d.forceReRender,q=d.clientApi.raw;var i=require("@storybook/store"),h=require("@storybook/client-logger");function P(t){(0,i.setProjectAnnotations)(t)}function z(t){(0,h.deprecate)("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),P(t)}var H={render:A};function O(t,o,e,r){return(0,i.composeStory)(t,o,e,H,r)}function Q(t,o){return(0,i.composeStories)(t,o,O)}var M;(M=module==null?void 0:module.hot)==null||M.decline();0&&(module.exports={composeStories,composeStory,configure,forceReRender,raw,setGlobalConfig,setProjectAnnotations,storiesOf});

package/dist/index.mjs

@@ -1 +1 @@
-import{a as e,b as p}from"./chunk-Y6TTZ4RO.mjs";import A from"global";var{window:a}=A;a&&(a.STORYBOOK_ENV="react");import{start as c}from"@storybook/core-client";var m="react",n=c(p,{render:e}),k=(o,t)=>n.clientApi.storiesOf(o,t).addParameters({framework:m}),x=(...o)=>n.configure(m,...o),w=n.forceReRender,O=n.clientApi.raw;import{composeStory as y,composeStories as g,setProjectAnnotations as d}from"@storybook/store";import{deprecate as S}from"@storybook/client-logger";function C(o){d(o)}function E(o){S("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),C(o)}var f={render:e};function l(o,t,s,i){return y(o,t,s,f,i)}function b(o,t){return g(o,t,l)}module?.hot?.decline();export{b as composeStories,l as composeStory,x as configure,w as forceReRender,O as raw,E as setGlobalConfig,C as setProjectAnnotations,k as storiesOf};
+import{a as e,b as p}from"./chunk-Y6TTZ4RO.mjs";import c from"global";var{window:a}=c;a&&(a.STORYBOOK_ENV="react");import{start as A}from"@storybook/core-client";var m="react",n=A(p,{render:e}),k=(o,t)=>n.clientApi.storiesOf(o,t).addParameters({framework:m}),x=(...o)=>n.configure(m,...o),w=n.forceReRender,O=n.clientApi.raw;import{composeStory as y,composeStories as g,setProjectAnnotations as d}from"@storybook/store";import{deprecate as S}from"@storybook/client-logger";function C(o){d(o)}function E(o){S("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),C(o)}var f={render:e};function l(o,t,s,i){return y(o,t,s,f,i)}function b(o,t){return g(o,t,l)}module?.hot?.decline();export{b as composeStories,l as composeStory,x as configure,w as forceReRender,O as raw,E as setGlobalConfig,C as setProjectAnnotations,k as storiesOf};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.0.0-alpha.46",
+  "version": "7.0.0-alpha.48",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -41,6 +41,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/**/*",
     "types/**/*",
     "README.md",
     "*.js",
@@ -51,12 +52,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.46",
-    "@storybook/client-logger": "7.0.0-alpha.46",
-    "@storybook/core-client": "7.0.0-alpha.46",
-    "@storybook/docs-tools": "7.0.0-alpha.46",
-    "@storybook/store": "7.0.0-alpha.46",
-    "@storybook/types": "7.0.0-alpha.46",
+    "@storybook/addons": "7.0.0-alpha.48",
+    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/core-client": "7.0.0-alpha.48",
+    "@storybook/docs-tools": "7.0.0-alpha.48",
+    "@storybook/store": "7.0.0-alpha.48",
+    "@storybook/types": "7.0.0-alpha.48",
     "@types/estree": "^0.0.51",
     "@types/node": "^16.0.0",
     "acorn": "^7.4.1",
@@ -103,5 +104,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "c64b5be851ed2affac56e1daaac3f453fbe6f230"
+  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
 }

package/template/cli/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": "off"
+  }
+}

package/template/cli/js/Button.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};

package/template/cli/js/Button.stories.js

@@ -0,0 +1,41 @@
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/js/Header.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="wrapper">
+      <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>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};

package/template/cli/js/Header.stories.js

@@ -0,0 +1,22 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};

package/template/cli/js/Page.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+export const Page = () => {
+  const [user, setUser] = React.useState();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <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/js/Page.stories.js

@@ -0,0 +1,25 @@
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};

package/template/cli/ts/Button.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/ts/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/template/cli/ts/Header.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+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/Header.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="wrapper">
+      <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/Page.stories.ts

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

package/template/cli/ts/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.VFC = () => {
+  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>
+        <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/components/Button.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Button = ({ onClick, label }) => (
+  <button type="button" onClick={onClick}>
+    {label}
+  </button>
+);
+
+Button.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+};