| 1 | import React from 'react'; |
| 2 | |
| 3 | import { Header } from './Header'; |
| 4 | import './page.css'; |
| 5 | |
| 6 | export const Page = () => { |
| 7 | const [user, setUser] = React.useState(); |
| 8 | |
| 9 | return ( |
| 10 | <article> |
| 11 | <Header |
| 12 | user={user} |
| 13 | onLogin={() => setUser({ name: 'Jane Doe' })} |
| 14 | onLogout={() => setUser(undefined)} |
| 15 | onCreateAccount={() => setUser({ name: 'Jane Doe' })} |
| 16 | /> |
| 17 | <section className="storybook-page"> |
| 18 | <h2>Pages in Storybook</h2> |
| 19 | <p> |
| 20 | We recommend building UIs with a{' '} |
| 21 | <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer"> |
| 22 | <strong>component-driven</strong> |
| 23 | </a>{' '} |
| 24 | process starting with atomic components and ending with pages. |
| 25 | </p> |
| 26 | <p> |
| 27 | Render pages with mock data. This makes it easy to build and review page states without |
| 28 | needing to navigate to them in your app. Here are some handy patterns for managing page |
| 29 | data in Storybook: |
| 30 | </p> |
| 31 | <ul> |
| 32 | <li> |
| 33 | Use a higher-level connected component. Storybook helps you compose such data from the |
| 34 | "args" of child component stories |
| 35 | </li> |
| 36 | <li> |
| 37 | Assemble data in the page component from your services. You can mock these services out |
| 38 | using Storybook. |
| 39 | </li> |
| 40 | </ul> |
| 41 | <p> |
| 42 | Get a guided tutorial on component-driven development at{' '} |
| 43 | <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"> |
| 44 | Storybook tutorials |
| 45 | </a> |
| 46 | . Read more in the{' '} |
| 47 | <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> |
| 48 | docs |
| 49 | </a> |
| 50 | . |
| 51 | </p> |
| 52 | <div className="tip-wrapper"> |
| 53 | <span className="tip">Tip</span> Adjust the width of the canvas with the{' '} |
| 54 | <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"> |
| 55 | <g fill="none" fillRule="evenodd"> |
| 56 | <path |
| 57 | 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" |
| 58 | id="a" |
| 59 | fill="#999" |
| 60 | /> |
| 61 | </g> |
| 62 | </svg> |
| 63 | Viewports addon in the toolbar |
| 64 | </div> |
| 65 | </section> |
| 66 | </article> |
| 67 | ); |
| 68 | }; |