@universal-tennis/ui-shared 0.0.3 → 0.0.5

package/README.md

@@ -77,7 +77,19 @@ Buttons should be uniform across the platforms with minimal variants, not multip
 [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
 
 
-## Publishing the Repo
+## 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. 

package/dist/App.d.ts

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

package/dist/App.js

@@ -1,13 +1,11 @@
-function App() {
-    return (React.createElement("div", { className: "App" },
-        React.createElement("header", { className: "App-header" },
-            React.createElement("p", null,
-                "Edit",
-                ' ',
-                React.createElement("code", null, "src/App.js"),
-                ' ',
-                "and save to reload."),
-            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
-}
-export default App;
+function App() {
+    return (React.createElement("div", { className: "App" },
+        React.createElement("header", { className: "App-header" },
+            React.createElement("p", null,
+                "Edit ",
+                React.createElement("code", null, "src/App.js"),
+                " and save to reload."),
+            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
+}
+export default App;
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.js"],"names":[],"mappings":"AAAA,SAAS,GAAG;IACV,OAAO,CACL,6BAAK,SAAS,EAAC,KAAK;QAClB,gCAAQ,SAAS,EAAC,YAAY;YAC5B;;gBAEP,GAAG;gBACJ,+CAAuB;gBACtB,GAAG;sCAEQ;YACJ,2BACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACG,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.js"],"names":[],"mappings":"AACA,SAAS,GAAG;IACV,OAAO,CACL,6BAAK,SAAS,EAAC,KAAK;QAClB,gCAAQ,SAAS,EAAC,YAAY;YAC5B;;gBACO,+CAAuB;uCAC1B;YACJ,2BACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACG,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}

package/dist/components.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components.js

@@ -1,5 +1,2 @@
-// ATOMS
-export { default as Button } from './stories/atoms/Button';
-// MOLECULES
-// ORGANISMS 
+// add components here  
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,YAAY;AACZ,aAAa"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,wBAAwB"}

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(App, null)));
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(App, null)));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
 //# sourceMappingURL=index.js.map

package/dist/items.d.ts

@@ -1,2 +1,2 @@
-declare const _exports: typeof import("./components");
-export = _exports;
+declare const _exports: any;
+export = _exports;

package/dist/items.js

@@ -1,2 +1,2 @@
-module.exports = require('./components');
+module.exports = require('./components');
 //# sourceMappingURL=items.js.map

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>

package/dist/stories/assets/direction.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/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-type ButtonProps = {
-    children: string | ReactElement;
-    category?: string;
-};
-export declare function Button({ children, category, ...props }: ButtonProps): JSX.Element;
-export {};
+/// <reference types="react" />
+/**
+ * Primary UI component for user interaction
+ */
+export declare function Button({ label, ...props }: {
+    label: string;
+}): JSX.Element;

package/dist/stories/atoms/Button.js

@@ -1,58 +1,20 @@
-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 MuiButton from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-const StyledButton = styled(MuiButton)({
-    borderRadius: '24px',
-    fontSize: '12px',
-    padding: '0 24px',
-    height: '40px',
-    whiteSpace: 'nowrap',
-    lineHeight: '39px',
-    border: '1px solid transparent'
-});
-const PrimaryButton = styled(StyledButton)({
-    backgroundColor: 'var(--black)',
-    color: 'var(--white)',
-    '&:hover': {
-        backgroundColor: 'var(--darkest-grey)',
-        borderColor: 'var(--darkest-grey)',
-    },
-    '&:disabled': {
-        backgroundColor: 'var(--lightest-grey)',
-        borderColor: 'var(--lightest-grey)',
-    },
-});
-const SecondaryButton = styled(StyledButton)({
-    borderColor: 'var(--black)',
-    backgroundColor: 'transparent',
-    color: 'var(--black)',
-    '&:hover': {
-        borderColor: 'var(--darkest-grey)',
-    },
-    '&:disabled': {
-        borderColor: 'var(--disabled)'
-    },
-});
-export function Button(_a) {
-    var { children, category } = _a, props = __rest(_a, ["children", "category"]);
-    switch (category) {
-        case 'primary':
-            return (React.createElement(PrimaryButton, Object.assign({}, props), children));
-        case 'secondary':
-            return (React.createElement(SecondaryButton, Object.assign({}, props), children));
-        default:
-            return (React.createElement(StyledButton, Object.assign({}, props), children));
-    }
-}
+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';
+/**
+ * Primary UI component for user interaction
+ */
+export function Button(_a) {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return (React.createElement("button", Object.assign({ type: "button" }, props), label));
+}
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACzC,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IACnD,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,EAAoC;QAApC,EAAE,KAAK,OAA6B,EAAxB,KAAK,cAAjB,SAAmB,CAAF;IACtC,OAAO,CACL,8CACE,IAAI,EAAC,QAAQ,IACT,KAAK,GAER,KAAK,CACC,CACV,CAAC;AACJ,CAAC"}

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

@@ -1,14 +1,13 @@
-import { Button } from './Button';
-declare const _default: {
-    title: string;
-    component: typeof Button;
-    argTypes: {
-        backgroundColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const Default: any;
+import { Button } from './Button';
+declare const _default: {
+    title: string;
+    component: typeof Button;
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Primary: any;
+export declare const Secondary: any;

package/dist/stories/atoms/Button.stories.js

@@ -1,27 +1,22 @@
-import React from 'react';
-import { Button } from './Button';
-export default {
-    title: 'Atoms/Button',
-    component: Button,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-};
-function Template(args) {
-    return React.createElement(Button, Object.assign({}, args));
-}
-export const Primary = Template.bind({});
-Primary.args = {
-    category: "primary",
-    children: 'Button',
-};
-export const Secondary = Template.bind({});
-Secondary.args = {
-    category: "secondary",
-    children: 'Button',
-};
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Button',
-};
+import React from 'react';
+import { Button } from './Button';
+export default {
+    title: 'Atoms/Button',
+    component: Button,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+function Template(args) {
+    return React.createElement(Button, Object.assign({}, args));
+}
+export const Primary = Template.bind({});
+Primary.args = {
+    primary: true,
+    label: 'Button',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Button',
+};
 //# sourceMappingURL=Button.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,IAAW;IAC3B,OAAO,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,QAAQ;CACnB,CAAC"}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,IAAW;IAC3B,OAAO,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,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"}

package/package.json

@@ -1,86 +1,86 @@
-{
-  "name": "@universal-tennis/ui-shared",
-  "version": "0.0.3",
-  "main": "dist/items.js",
-  "license": "MIT",
-  "homepage": "https://universaltennis.com",
-  "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.10.15",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.3",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "publish:npm": "tsc && yarn copy-files",
-    "publish-package": "npm publish --access public",
-    "copy-files": "copyfiles -u 1 src/stories/assets/*.svg src/stories/assets/*.png src/stories/assets/*.gif src/stories/assets/css/*.css dist/",
-    "eslint": "npx eslint --ext .jsx,.js src --fix"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/node-logger": "^6.5.13",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/babel__core": "^7.1.20",
-    "@types/react": "^18.0.25",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "eslint": "^8.28.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.6.7",
-    "prop-types": "^15.8.1",
-    "webpack": "^5.75.0"
-  },
-  "description": "Shared UI components for UT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/universaltennis/ui-shared.git"
-  },
-  "author": "universal-tennis"
-}
+{
+  "name": "@universal-tennis/ui-shared",
+  "version": "0.0.5",
+  "main": "dist/items.js",
+  "license": "MIT",
+  "homepage": "https://universaltennis.com",
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.15",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "publish:npm": "tsc && yarn copy-files",
+    "publish-package": "npm publish --access public",
+    "copy-files": "copyfiles -u 1 src/stories/assets/*.svg src/stories/assets/*.png src/stories/assets/*.gif src/stories/assets/css/*.css dist/",
+    "eslint": "npx eslint --ext .jsx,.js src --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/babel__core": "^7.1.20",
+    "@types/react": "^18.0.25",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.75.0"
+  },
+  "description": "Shared UI components for UT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/universaltennis/ui-shared.git"
+  },
+  "author": "universal-tennis"
+}

package/src/custom.d.ts

@@ -1,13 +1,13 @@
-declare module '*.jpg';
-declare module '*.png';
-declare module '*.woff2';
-declare module '*.woff';
-declare module '*.ttf';
-
-declare module '*.svg' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
-  export default src;
-}
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.woff2';
+declare module '*.woff';
+declare module '*.ttf';
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/src/items.jsx

@@ -1 +1 @@
-module.exports = require('./components');
+module.exports = require('./components');

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-    "compilerOptions": {
-      "noImplicitThis": true,
-      "preserveConstEnums": true,
-      "strictNullChecks": true,
-      "sourceMap": true,
-      "declaration": true,
-      "esModuleInterop": true,
-      "outDir": "dist",
-      "target": "es6",
-      "module": "es6",
-      "allowJs": true,
-      "moduleResolution": "node",
-      "skipLibCheck": true,
-      "jsx": "react",
-      "lib": ["ES2017", "DOM"],
-      "baseUrl": "src",
-      "allowSyntheticDefaultImports": true,
-      "noImplicitAny": true
-    },
-    "exclude": [
-      "node_modules",
-    ],
-    "include": ["src", "src/custom.d.ts"]
+{
+    "compilerOptions": {
+      "noImplicitThis": true,
+      "preserveConstEnums": true,
+      "strictNullChecks": true,
+      "sourceMap": true,
+      "declaration": true,
+      "esModuleInterop": true,
+      "outDir": "dist",
+      "target": "es6",
+      "module": "es6",
+      "allowJs": true,
+      "moduleResolution": "node",
+      "skipLibCheck": true,
+      "jsx": "react",
+      "lib": ["ES2017", "DOM"],
+      "baseUrl": "src",
+      "allowSyntheticDefaultImports": true,
+      "noImplicitAny": true
+    },
+    "exclude": [
+      "node_modules",
+    ],
+    "include": ["src", "src/custom.d.ts"]
   }

package/workflows/package-release-1.yml

@@ -1,31 +1,32 @@
-trigger:
-  branches:
-    include:
-    - develop
-
-pool:
-  vmImage: ubuntu-latest
-
-resources:
-  repositories:
-  - repository: Infrastructure
-    type: bitbucket
-    endpoint: ut-bitbucket
-    name: universaltennis/utr-infrastructure
-    ref: master
-
-variables:
-  - template: /infrastructure/pipelines/shared-variables.yml@Infrastructure
-
-jobs:
-  - job: PublishNpmPackage
-    steps:
-      - template: /infrastructure/components/download-key-vault-secrets.yml@Infrastructure
-        parameters:
-          keyVaultName: $(sharedKeyVaultName)
-      - script: |
-          yarn
-          yarn run publish:npm
-          npm publish --access public
-        env:
-          NPM_TOKEN: $(NpmPublishToken)
+trigger:
+  tags:
+    include:
+    - '*'
+
+pool:
+  vmImage: ubuntu-latest
+
+resources:
+  repositories:
+  - repository: Infrastructure
+    type: bitbucket
+    endpoint: ut-bitbucket
+    name: universaltennis/utr-infrastructure
+    ref: master
+
+variables:
+  - template: /infrastructure/pipelines/shared-variables.yml@Infrastructure
+
+jobs:
+  - job: PublishNpmPackage
+    steps:
+      - template: /infrastructure/components/download-key-vault-secrets.yml@Infrastructure
+        parameters:
+          keyVaultName: $(sharedKeyVaultName)
+      - script: |
+          yarn
+          yarn run publish:npm
+          npm publish
+        displayName: Publish npm package
+        env:
+          NPM_TOKEN: $(NpmPublishToken)

package/workflows/package-release.yml

@@ -1,22 +0,0 @@
-name: Publish package
-
-on:
-  push:
-    branches:
-      - master
-    workflow_dispatch:
-          
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://npm.pkg.github.com/
-      - run: yarn
-      - run: yarn run publish:npm
-      - run: npm publish --access public
-        variables:
-          NPM_TOKEN: $NPM_TOKEN