@nlabs/gothamjs
Version:
Platform
61 lines (60 loc) • 8.4 kB
JavaScript
import { useState } from "react";
import { Header } from "./Header.js";
import "./page.css";
import { jsx, jsxs } from "react/jsx-runtime";
const Page = () => {
const [user, setUser] = useState();
return /* @__PURE__ */ jsxs("article", { children: [
/* @__PURE__ */ jsx(
Header,
{
user,
onLogin: () => setUser({ name: "Jane Doe" }),
onLogout: () => setUser(void 0),
onCreateAccount: () => setUser({ name: "Jane Doe" })
}
),
/* @__PURE__ */ jsxs("section", { className: "storybook-page", children: [
/* @__PURE__ */ jsx("h2", { children: "Pages in Storybook" }),
/* @__PURE__ */ jsxs("p", { children: [
"We recommend building UIs with a",
" ",
/* @__PURE__ */ jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("strong", { children: "component-driven" }) }),
" ",
"process starting with atomic components and ending with pages."
] }),
/* @__PURE__ */ jsx("p", { children: "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:" }),
/* @__PURE__ */ jsxs("ul", { children: [
/* @__PURE__ */ jsx("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
/* @__PURE__ */ jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
] }),
/* @__PURE__ */ jsxs("p", { children: [
"Get a guided tutorial on component-driven development at",
" ",
/* @__PURE__ */ jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
". Read more in the",
" ",
/* @__PURE__ */ jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
"."
] }),
/* @__PURE__ */ jsxs("div", { className: "tip-wrapper", children: [
/* @__PURE__ */ jsx("span", { className: "tip", children: "Tip" }),
" Adjust the width of the canvas with the",
" ",
/* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
"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"
}
) }) }),
"Viewports addon in the toolbar"
] })
] })
] });
};
export {
Page
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vc3JjL3N0b3JpZXMvUGFnZS50c3giXSwKICAic291cmNlc0NvbnRlbnQiOiBbImltcG9ydCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtIZWFkZXJ9IGZyb20gJy4vSGVhZGVyLmpzJztcbmltcG9ydCAnLi9wYWdlLmNzcyc7XG5cbmltcG9ydCB0eXBlIHtGQ30gZnJvbSAncmVhY3QnO1xuXG50eXBlIFVzZXIgPSB7XG4gIG5hbWU6IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBQYWdlOiBGQyA9ICgpID0+IHtcbiAgY29uc3QgW3VzZXIsIHNldFVzZXJdID0gdXNlU3RhdGU8VXNlcj4oKTtcblxuICByZXR1cm4gKFxuICAgIDxhcnRpY2xlPlxuICAgICAgPEhlYWRlclxuICAgICAgICB1c2VyPXt1c2VyfVxuICAgICAgICBvbkxvZ2luPXsoKSA9PiBzZXRVc2VyKHsgbmFtZTogJ0phbmUgRG9lJyB9KX1cbiAgICAgICAgb25Mb2dvdXQ9eygpID0+IHNldFVzZXIodW5kZWZpbmVkKX1cbiAgICAgICAgb25DcmVhdGVBY2NvdW50PXsoKSA9PiBzZXRVc2VyKHsgbmFtZTogJ0phbmUgRG9lJyB9KX1cbiAgICAgIC8+XG5cbiAgICAgIDxzZWN0aW9uIGNsYXNzTmFtZT1cInN0b3J5Ym9vay1wYWdlXCI+XG4gICAgICAgIDxoMj5QYWdlcyBpbiBTdG9yeWJvb2s8L2gyPlxuICAgICAgICA8cD5cbiAgICAgICAgICBXZSByZWNvbW1lbmQgYnVpbGRpbmcgVUlzIHdpdGggYXsnICd9XG4gICAgICAgICAgPGEgaHJlZj1cImh0dHBzOi8vY29tcG9uZW50ZHJpdmVuLm9yZ1wiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIj5cbiAgICAgICAgICAgIDxzdHJvbmc+Y29tcG9uZW50LWRyaXZlbjwvc3Ryb25nPlxuICAgICAgICAgIDwvYT57JyAnfVxuICAgICAgICAgIHByb2Nlc3Mgc3RhcnRpbmcgd2l0aCBhdG9taWMgY29tcG9uZW50cyBhbmQgZW5kaW5nIHdpdGggcGFnZXMuXG4gICAgICAgIDwvcD5cbiAgICAgICAgPHA+XG4gICAgICAgICAgUmVuZGVyIHBhZ2VzIHdpdGggbW9jayBkYXRhLiBUaGlzIG1ha2VzIGl0IGVhc3kgdG8gYnVpbGQgYW5kIHJldmlldyBwYWdlIHN0YXRlcyB3aXRob3V0XG4gICAgICAgICAgbmVlZGluZyB0byBuYXZpZ2F0ZSB0byB0aGVtIGluIHlvdXIgYXBwLiBIZXJlIGFyZSBzb21lIGhhbmR5IHBhdHRlcm5zIGZvciBtYW5hZ2luZyBwYWdlXG4gICAgICAgICAgZGF0YSBpbiBTdG9yeWJvb2s6XG4gICAgICAgIDwvcD5cbiAgICAgICAgPHVsPlxuICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgIFVzZSBhIGhpZ2hlci1sZXZlbCBjb25uZWN0ZWQgY29tcG9uZW50LiBTdG9yeWJvb2sgaGVscHMgeW91IGNvbXBvc2Ugc3VjaCBkYXRhIGZyb20gdGhlXG4gICAgICAgICAgICBcImFyZ3NcIiBvZiBjaGlsZCBjb21wb25lbnQgc3Rvcmllc1xuICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgQXNzZW1ibGUgZGF0YSBpbiB0aGUgcGFnZSBjb21wb25lbnQgZnJvbSB5b3VyIHNlcnZpY2VzLiBZb3UgY2FuIG1vY2sgdGhlc2Ugc2VydmljZXMgb3V0XG4gICAgICAgICAgICB1c2luZyBTdG9yeWJvb2suXG4gICAgICAgICAgPC9saT5cbiAgICAgICAgPC91bD5cbiAgICAgICAgPHA+XG4gICAgICAgICAgR2V0IGEgZ3VpZGVkIHR1dG9yaWFsIG9uIGNvbXBvbmVudC1kcml2ZW4gZGV2ZWxvcG1lbnQgYXR7JyAnfVxuICAgICAgICAgIDxhIGhyZWY9XCJodHRwczovL3N0b3J5Ym9vay5qcy5vcmcvdHV0b3JpYWxzL1wiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIj5cbiAgICAgICAgICAgIFN0b3J5Ym9vayB0dXRvcmlhbHNcbiAgICAgICAgICA8L2E+XG4gICAgICAgICAgLiBSZWFkIG1vcmUgaW4gdGhleycgJ31cbiAgICAgICAgICA8YSBocmVmPVwiaHR0cHM6Ly9zdG9yeWJvb2suanMub3JnL2RvY3NcIiB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCI+XG4gICAgICAgICAgICBkb2NzXG4gICAgICAgICAgPC9hPlxuICAgICAgICAgIC5cbiAgICAgICAgPC9wPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInRpcC13cmFwcGVyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGlwXCI+VGlwPC9zcGFuPiBBZGp1c3QgdGhlIHdpZHRoIG9mIHRoZSBjYW52YXMgd2l0aCB0aGV7JyAnfVxuICAgICAgICAgIDxzdmcgd2lkdGg9XCIxMFwiIGhlaWdodD1cIjEwXCIgdmlld0JveD1cIjAgMCAxMiAxMlwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgICAgIDxnIGZpbGw9XCJub25lXCIgZmlsbFJ1bGU9XCJldmVub2RkXCI+XG4gICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgZD1cIk0xLjUgNS4yaDQuOGMuMyAwIC41LjIuNS40djUuMWMtLjEuMi0uMy4zLS40LjNIMS40YS41LjUgMCAwMS0uNS0uNFY1LjdjMC0uMy4yLS41LjUtLjV6bTAtMi4xaDYuOWMuMyAwIC41LjIuNS40djdhLjUuNSAwIDAxLTEgMFY0SDEuNWEuNS41IDAgMDEwLTF6bTAtMi4xaDljLjMgMCAuNS4yLjUuNHY5LjFhLjUuNSAwIDAxLTEgMFYySDEuNWEuNS41IDAgMDEwLTF6bTQuMyA1LjJIMlYxMGgzLjhWNi4yelwiXG4gICAgICAgICAgICAgICAgaWQ9XCJhXCJcbiAgICAgICAgICAgICAgICBmaWxsPVwiIzk5OVwiXG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2c+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgVmlld3BvcnRzIGFkZG9uIGluIHRoZSB0b29sYmFyXG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9zZWN0aW9uPlxuICAgIDwvYXJ0aWNsZT5cbiAgKTtcbn07XG4iXSwKICAibWFwcGluZ3MiOiAiQUFBQSxTQUFRLGdCQUFlO0FBRXZCLFNBQVEsY0FBYTtBQUNyQixPQUFPO0FBYUQsY0FTRSxZQVRGO0FBTEMsTUFBTSxPQUFXLE1BQU07QUFDNUIsUUFBTSxDQUFDLE1BQU0sT0FBTyxJQUFJLFNBQWU7QUFFdkMsU0FDRSxxQkFBQyxhQUNDO0FBQUE7QUFBQSxNQUFDO0FBQUE7QUFBQSxRQUNDO0FBQUEsUUFDQSxTQUFTLE1BQU0sUUFBUSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQUEsUUFDM0MsVUFBVSxNQUFNLFFBQVEsTUFBUztBQUFBLFFBQ2pDLGlCQUFpQixNQUFNLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUFBO0FBQUEsSUFDckQ7QUFBQSxJQUVBLHFCQUFDLGFBQVEsV0FBVSxrQkFDakI7QUFBQSwwQkFBQyxRQUFHLGdDQUFrQjtBQUFBLE1BQ3RCLHFCQUFDLE9BQUU7QUFBQTtBQUFBLFFBQ2dDO0FBQUEsUUFDakMsb0JBQUMsT0FBRSxNQUFLLCtCQUE4QixRQUFPLFVBQVMsS0FBSSx1QkFDeEQsOEJBQUMsWUFBTyw4QkFBZ0IsR0FDMUI7QUFBQSxRQUFLO0FBQUEsUUFBSTtBQUFBLFNBRVg7QUFBQSxNQUNBLG9CQUFDLE9BQUUsZ05BSUg7QUFBQSxNQUNBLHFCQUFDLFFBQ0M7QUFBQSw0QkFBQyxRQUFHLHNJQUdKO0FBQUEsUUFDQSxvQkFBQyxRQUFHLHNIQUdKO0FBQUEsU0FDRjtBQUFBLE1BQ0EscUJBQUMsT0FBRTtBQUFBO0FBQUEsUUFDd0Q7QUFBQSxRQUN6RCxvQkFBQyxPQUFFLE1BQUssdUNBQXNDLFFBQU8sVUFBUyxLQUFJLHVCQUFzQixpQ0FFeEY7QUFBQSxRQUFJO0FBQUEsUUFDZTtBQUFBLFFBQ25CLG9CQUFDLE9BQUUsTUFBSyxpQ0FBZ0MsUUFBTyxVQUFTLEtBQUksdUJBQXNCLGtCQUVsRjtBQUFBLFFBQUk7QUFBQSxTQUVOO0FBQUEsTUFDQSxxQkFBQyxTQUFJLFdBQVUsZUFDYjtBQUFBLDRCQUFDLFVBQUssV0FBVSxPQUFNLGlCQUFHO0FBQUEsUUFBTztBQUFBLFFBQXlDO0FBQUEsUUFDekUsb0JBQUMsU0FBSSxPQUFNLE1BQUssUUFBTyxNQUFLLFNBQVEsYUFBWSxPQUFNLDhCQUNwRCw4QkFBQyxPQUFFLE1BQUssUUFBTyxVQUFTLFdBQ3RCO0FBQUEsVUFBQztBQUFBO0FBQUEsWUFDQyxHQUFFO0FBQUEsWUFDRixJQUFHO0FBQUEsWUFDSCxNQUFLO0FBQUE7QUFBQSxRQUNQLEdBQ0YsR0FDRjtBQUFBLFFBQU07QUFBQSxTQUVSO0FBQUEsT0FDRjtBQUFBLEtBQ0Y7QUFFSjsiLAogICJuYW1lcyI6IFtdCn0K