@universal-tennis/ui-shared 0.1.96 → 0.2.0

package/.storybook/variables.css

@@ -1,17 +1,17 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --grey: #828B96;
-    --darkest-grey: #3b4859;
-    --cool-grey-600: #A7B2C1;
-    --cool-grey-500: #C1CCDA;
-    --cool-grey-300: #DDE3EB;
-    --cool-grey-150: #F0F4F9;
-    --blue-grey-500: #778DA9;
-    --teal: #01DFCB;
-    }
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --grey: #828B96;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-500: #C1CCDA;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    --blue-grey-500: #778DA9;
+    --teal: #01DFCB;
+    }
     

package/README.md

@@ -1,130 +1,130 @@
-# UI-Shared 
-
-This repo was created to help organize components across the UT ecosystem; following specific design rules: 
-
-**Stack:**
-<br />
--   React (18.2.0)
-<br />
--   TypeScript 
-<br />
--   [MUI](https://mui.com/)
-<br />
--   Styled-Components (as part of MUI)
-
-## To install:
-
-```npm install @universal-tennis/ui-shared```
-or 
-``` yarn add @universal-tennis/ui-shared```
-
-## Design rules
-
-#### Components following material and atomic design rules; 
-
-
-1.  Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.
-<br /> 
-<br /> 
-
-**Example:** 
-```
-    <Button type="primary" /> 
-    <Button type="secondary" /> 
-```
-<br />
-**NOT** 
-```
-    <Button type="team-page-button" /> 
-    <Button type="home-page-button" /> 
-```
-<br />
-<br />
-
-Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages. 
-
-<br />
-2.  Components broken into their smallest parts, atoms, then built up from there.
-<br />
-<br />
-    **Example:** 
-    ```
-        <Card> // Molecule
-            <Typography> // Atom
-                Sample Header
-            </Typography>
-            <Button> // Atom
-                Sample Button
-            </Button>
-        </Card>
-    ```
-<br />
-<br />
-    A component that uses these cards in combination with other components would be considered an organism.
-
-<br />
-3.   Components should all be "dumb" components - keeping only local state or logic specific to the component, minimizing side effects. 
-<br />
-[Functional Programming - Side Effects](https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/#:~:text=A%20side%20effect%20is%20when,described%20as%20having%20side%20effects.)
-
-<br />
-4.  Common colors, BBM sizing, common functionality are standardized in the same way we write components. 
-<br />
-<br />
-     **Example:** 
-     <br />
-     -  "Primary"/ "secondary" vs "Team-card-header-blue-color" - minimzing number of color variations.
-
-<br />
-*To read more:*
-<br />
-[Material design rules](https://m2.material.io/design/color/the-color-system.html)
-<br />
-[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
-
-
-## Bitbucket CICD flow Publishing the Repo
-
-1. Pull the latest from master -> make changes to a PR back into master.
-First when creating a new component, make sure to add it to the `components.jsx` file.
-2. In the `package.json` file, make sure to pump to the next minor version.
-3. After merging back into master, tag the commit with the same `package.json` version number. 
-This will then trigger a NPM package build with the version listed in the `package.json`; make sure the release tags are the same for consistency.  
-
-It can now be accessed in another repo like this:
-<br />
-`import {Button} from "@universal-tennis/ui-shared";`
-
-#### Manually Publishing the Repo (Should be done via CICD flow)
-
-1. First when creating a new component, make sure to add it to the `components.jsx` file.
-2. Then Run `yarn run publish:npm` to build a optimized build for all the components, this is configured for TS. 
-3. In the `package.json` file, make sure to pump to the next minor version.
-4. Finally `yarn run publish-package` to deploy this version to NPM. 
-
-It can now be accessed in another repo like this:
-<br />
-`import {Button} from "@universal-tennis/ui-shared";`
-
-### Development on Local
-
-1. Create a new branch and make changes: (for this example "sample-link-branch")
-2. Push changes to the branch / test before with storybook. 
-3. Run `npm install https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch` from the other repo to view these updates. 
-In this url (https://<USER>@bitbucket.org/<ORG>/<REPO>#<BRANCH>)
-4. You can now see the changes from your npm branch in a different repo. 
-you'll now see in your package.json:         
-```"@universal-tennis/ui-shared": "git+https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch"```
-
-
-## Available Scripts
-
-### `npm start` using npm 16.14.0
-
-Runs the storybook app in localhost.
-<br />
-Open [http://localhost:6006](http://localhost:6006) to view storybook in your browser.
-<br />
-The page will reload when you make changes.
-<br />
+# UI-Shared 
+
+This repo was created to help organize components across the UT ecosystem; following specific design rules: 
+
+**Stack:**
+<br />
+-   React (18.2.0)
+<br />
+-   TypeScript 
+<br />
+-   [MUI](https://mui.com/)
+<br />
+-   Styled-Components (as part of MUI)
+
+## To install:
+
+```npm install @universal-tennis/ui-shared```
+or 
+``` yarn add @universal-tennis/ui-shared```
+
+## Design rules
+
+#### Components following material and atomic design rules; 
+
+
+1.  Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.
+<br /> 
+<br /> 
+
+**Example:** 
+```
+    <Button type="primary" /> 
+    <Button type="secondary" /> 
+```
+<br />
+**NOT** 
+```
+    <Button type="team-page-button" /> 
+    <Button type="home-page-button" /> 
+```
+<br />
+<br />
+
+Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages. 
+
+<br />
+2.  Components broken into their smallest parts, atoms, then built up from there.
+<br />
+<br />
+    **Example:** 
+    ```
+        <Card> // Molecule
+            <Typography> // Atom
+                Sample Header
+            </Typography>
+            <Button> // Atom
+                Sample Button
+            </Button>
+        </Card>
+    ```
+<br />
+<br />
+    A component that uses these cards in combination with other components would be considered an organism.
+
+<br />
+3.   Components should all be "dumb" components - keeping only local state or logic specific to the component, minimizing side effects. 
+<br />
+[Functional Programming - Side Effects](https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/#:~:text=A%20side%20effect%20is%20when,described%20as%20having%20side%20effects.)
+
+<br />
+4.  Common colors, BBM sizing, common functionality are standardized in the same way we write components. 
+<br />
+<br />
+     **Example:** 
+     <br />
+     -  "Primary"/ "secondary" vs "Team-card-header-blue-color" - minimzing number of color variations.
+
+<br />
+*To read more:*
+<br />
+[Material design rules](https://m2.material.io/design/color/the-color-system.html)
+<br />
+[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
+
+
+## Bitbucket CICD flow Publishing the Repo
+
+1. Pull the latest from master -> make changes to a PR back into master.
+First when creating a new component, make sure to add it to the `components.jsx` file.
+2. In the `package.json` file, make sure to pump to the next minor version.
+3. After merging back into master, tag the commit with the same `package.json` version number. 
+This will then trigger a NPM package build with the version listed in the `package.json`; make sure the release tags are the same for consistency.  
+
+It can now be accessed in another repo like this:
+<br />
+`import {Button} from "@universal-tennis/ui-shared";`
+
+#### Manually Publishing the Repo (Should be done via CICD flow)
+
+1. First when creating a new component, make sure to add it to the `components.jsx` file.
+2. Then Run `yarn run publish:npm` to build a optimized build for all the components, this is configured for TS. 
+3. In the `package.json` file, make sure to pump to the next minor version.
+4. Finally `yarn run publish-package` to deploy this version to NPM. 
+
+It can now be accessed in another repo like this:
+<br />
+`import {Button} from "@universal-tennis/ui-shared";`
+
+### Development on Local
+
+1. Create a new branch and make changes: (for this example "sample-link-branch")
+2. Push changes to the branch / test before with storybook. 
+3. Run `npm install https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch` from the other repo to view these updates. 
+In this url (https://<USER>@bitbucket.org/<ORG>/<REPO>#<BRANCH>)
+4. You can now see the changes from your npm branch in a different repo. 
+you'll now see in your package.json:         
+```"@universal-tennis/ui-shared": "git+https://kyle-universaltennis@bitbucket.org/universaltennis/ui-shared.git#sample-linked-branch"```
+
+
+## Available Scripts
+
+### `npm start` using npm 16.14.0
+
+Runs the storybook app in localhost.
+<br />
+Open [http://localhost:6006](http://localhost:6006) to view storybook in your browser.
+<br />
+The page will reload when you make changes.
+<br />
 You may also see any lint errors in the console.

package/dist/App.d.ts

@@ -1,2 +1,2 @@
 export default App;
-declare function App(): JSX.Element;
+declare function App(): import("react").JSX.Element;

package/dist/stories/Button.d.ts

@@ -0,0 +1,27 @@
+export function Button({ primary, backgroundColor, size, label, ...props }: {
+    [x: string]: any;
+    primary: any;
+    backgroundColor: any;
+    size: any;
+    label: any;
+}): JSX.Element;
+export namespace Button {
+    namespace propTypes {
+        const primary: PropTypes.Requireable<boolean>;
+        const backgroundColor: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
+        const label: PropTypes.Validator<string>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        const backgroundColor_1: null;
+        export { backgroundColor_1 as backgroundColor };
+        const primary_1: boolean;
+        export { primary_1 as primary };
+        const size_1: string;
+        export { size_1 as size };
+        const onClick_1: undefined;
+        export { onClick_1 as onClick };
+    }
+}
+import PropTypes from "prop-types";

package/dist/stories/Button.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = (_a) => {
+    var { primary, backgroundColor, size, label } = _a, props = __rest(_a, ["primary", "backgroundColor", "size", "label"]);
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (React.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: backgroundColor && { backgroundColor } }, props), label));
+};
+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,
+};
+//# sourceMappingURL=Button.js.map

package/dist/stories/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/stories/Button.jsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAmD,EAAE,EAAE;QAAvD,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,OAAY,EAAP,KAAK,cAAjD,+CAAmD,CAAF;IACtE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IACnF,OAAO,CACL,8CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5E,KAAK,EAAE,eAAe,IAAI,EAAE,eAAe,EAAE,IACzC,KAAK,GAER,KAAK,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB;;OAEG;IACH,eAAe,EAAE,SAAS,CAAC,MAAM;IACjC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,eAAe,EAAE,IAAI;IACrB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;CACnB,CAAC"}

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    export const title: string;
+    export { Button as component };
+    export namespace argTypes {
+        namespace backgroundColor {
+            const control: string;
+        }
+    }
+}
+export default _default;
+export const Primary: any;
+export const Secondary: any;
+export const Large: any;
+export const Small: any;
+import { Button } from "./Button";

package/dist/stories/Button.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+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,
+    // 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
+const Template = (args) => React.createElement(Button, Object.assign({}, args));
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+    primary: true,
+    label: 'Button',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Button',
+};
+export const Large = Template.bind({});
+Large.args = {
+    size: 'large',
+    label: 'Button',
+};
+export const Small = Template.bind({});
+Small.args = {
+    size: 'small',
+    label: 'Button',
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/stories/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/stories/Button.stories.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,0GAA0G;AAC1G,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IACjB,qEAAqE;IACrE,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,2GAA2G;AAC3G,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,yEAAyE;AACzE,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC"}

package/dist/stories/Header.d.ts

@@ -0,0 +1,19 @@
+export function Header({ user, onLogin, onLogout, onCreateAccount }: {
+    user: any;
+    onLogin: any;
+    onLogout: any;
+    onCreateAccount: any;
+}): JSX.Element;
+export namespace Header {
+    namespace propTypes {
+        const user: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        const onLogin: PropTypes.Validator<(...args: any[]) => any>;
+        const onLogout: PropTypes.Validator<(...args: any[]) => any>;
+        const onCreateAccount: PropTypes.Validator<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        const user_1: null;
+        export { user_1 as user };
+    }
+}
+import PropTypes from "prop-types";

package/dist/stories/Header.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (React.createElement("header", null,
+    React.createElement("div", { className: "wrapper" },
+        React.createElement("div", null,
+            React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                    React.createElement("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+                    React.createElement("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" }),
+                    React.createElement("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" }))),
+            React.createElement("h1", null, "Acme")),
+        React.createElement("div", null, user ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "welcome" },
+                "Welcome, ",
+                React.createElement("b", null, user.name),
+                "!"),
+            React.createElement(Button, { size: "small", onClick: onLogout, label: "Log out" }))) : (React.createElement(React.Fragment, null,
+            React.createElement(Button, { size: "small", onClick: onLogin, label: "Log in" }),
+            React.createElement(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })))))));
+Header.propTypes = {
+    user: PropTypes.shape({}),
+    onLogin: PropTypes.func.isRequired,
+    onLogout: PropTypes.func.isRequired,
+    onCreateAccount: PropTypes.func.isRequired,
+};
+Header.defaultProps = {
+    user: null,
+};
+//# sourceMappingURL=Header.js.map

package/dist/stories/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/stories/Header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACtE;IACE,6BAAK,SAAS,EAAC,SAAS;QACtB;YACE,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;gBAChF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;oBAC/B,8BACE,CAAC,EAAC,mFAAmF,EACrF,IAAI,EAAC,MAAM,GACX;oBACF,8BACE,CAAC,EAAC,kEAAkE,EACpE,IAAI,EAAC,SAAS,GACd;oBACF,8BACE,CAAC,EAAC,gEAAgE,EAClE,IAAI,EAAC,SAAS,GACd,CACA,CACA;YACN,uCAAa,CACT;QACN,iCACG,IAAI,CAAC,CAAC,CAAC,CACN;YACE,8BAAM,SAAS,EAAC,SAAS;;gBACd,+BAAI,IAAI,CAAC,IAAI,CAAK;oBACtB;YACP,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAC,SAAS,GAAG,CACzD,CACJ,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,QAAQ,GAAG;YACxD,oBAAC,MAAM,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAC,SAAS,GAAG,CACxE,CACJ,CACG,CACF,CACC,CACV,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAClC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,eAAe,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC3C,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,IAAI;CACX,CAAC"}

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { Header as component };
+    export namespace parameters {
+        const layout: string;
+    }
+}
+export default _default;
+export const LoggedIn: any;
+export const LoggedOut: any;
+import { Header } from "./Header";

package/dist/stories/Header.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header } from './Header';
+export default {
+    title: 'Example/Header',
+    component: Header,
+    parameters: {
+        // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+const Template = (args) => React.createElement(Header, Object.assign({}, args));
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+    user: {
+        name: 'Jane Doe',
+    },
+};
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
+//# sourceMappingURL=Header.stories.js.map

package/dist/stories/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../src/stories/Header.stories.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,mFAAmF;QACnF,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC"}

package/dist/stories/Page.d.ts

@@ -0,0 +1 @@
+export function Page(): JSX.Element;

package/dist/stories/Page.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Header } from './Header';
+import './page.css';
+export const Page = () => {
+    const [user, setUser] = React.useState();
+    return (React.createElement("article", null,
+        React.createElement(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }),
+        React.createElement("section", null,
+            React.createElement("h2", null, "Pages in Storybook"),
+            React.createElement("p", null,
+                "We recommend building UIs with a",
+                ' ',
+                React.createElement("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer" },
+                    React.createElement("strong", null, "component-driven")),
+                ' ',
+                "process starting with atomic components and ending with pages."),
+            React.createElement("p", null, "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:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories"),
+                React.createElement("li", null, "Assemble data in the page component from your services. You can mock these services out using Storybook.")),
+            React.createElement("p", null,
+                "Get a guided tutorial on component-driven development at",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer" }, "Storybook tutorials"),
+                ". Read more in the",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer" }, "docs"),
+                "."),
+            React.createElement("div", { className: "tip-wrapper" },
+                React.createElement("span", { className: "tip" }, "Tip"),
+                " Adjust the width of the canvas with the",
+                ' ',
+                React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                        React.createElement("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"))));
+};
+//# sourceMappingURL=Page.js.map

package/dist/stories/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/stories/Page.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;IAEzC,OAAO,CACL;QACE,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAClC,eAAe,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,GACpD;QAEF;YACE,qDAA2B;YAC3B;;gBACmC,GAAG;gBACpC,2BAAG,IAAI,EAAC,6BAA6B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB;oBAC7E,uDAAiC,CAC/B;gBAAC,GAAG;iFAEN;YACJ,oOAII;YACJ;gBACE,6JAGK;gBACL,2IAGK,CACF;YACL;;gBAC2D,GAAG;gBAC5D,2BAAG,IAAI,EAAC,qCAAqC,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,0BAEnF;;gBACe,GAAG;gBACtB,2BAAG,IAAI,EAAC,+BAA+B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,WAE7E;oBAEF;YACJ,6BAAK,SAAS,EAAC,aAAa;gBAC1B,8BAAM,SAAS,EAAC,KAAK,UAAW;;gBAAyC,GAAG;gBAC5E,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;oBAChF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;wBAC/B,8BACE,CAAC,EAAC,sOAAsO,EACxO,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,MAAM,GACX,CACA,CACA;iDAEF,CACE,CACF,CACX,CAAC;AACJ,CAAC,CAAC"}

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { Page as component };
+    export namespace parameters {
+        const layout: string;
+    }
+}
+export default _default;
+export const LoggedOut: any;
+export const LoggedIn: any;
+import { Page } from "./Page";

package/dist/stories/Page.stories.js

@@ -0,0 +1,30 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+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',
+    },
+};
+const Template = (args) => React.createElement(Page, Object.assign({}, args));
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedOut = Template.bind({});
+export const LoggedIn = Template.bind({});
+LoggedIn.play = ({ canvasElement }) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const loginButton = yield canvas.getByRole('button', { name: /Log in/i });
+    yield userEvent.click(loginButton);
+});
+//# sourceMappingURL=Page.stories.js.map

package/dist/stories/Page.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../src/stories/Page.stories.jsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,mFAAmF;QACnF,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;AAE9C,qGAAqG;AACrG,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG,CAAO,EAAE,aAAa,EAAE,EAAE,EAAE;IAC1C,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,CAAC,CAAA,CAAC"}

package/dist/stories/assets/comments.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>