@universal-tennis/ui-shared 0.0.25 → 0.1.0

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import "./typography.css";
+import './variables.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package/.storybook/variables.css

@@ -0,0 +1,12 @@
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    }

package/dist/stories/assets/css/variables.css

@@ -6,5 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
     --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
     }

package/dist/stories/molecules/Cards/Cards.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: {
 export default _default;
 export declare const Contact: any;
 export declare const Team: any;
+export declare const Draw: any;

package/dist/stories/molecules/Cards/Cards.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
+import DrawCard from './DrawCard';
 // Default
 export default {
     title: 'Molecules/Cards',
@@ -12,6 +13,10 @@ function ContactCardTemplate(args) {
 function TeamCardTemplate(args) {
     return React.createElement(TeamCard, Object.assign({}, args));
 }
+function DrawCardTemplate(args) {
+    return (React.createElement("div", { style: { width: '372px' } },
+        React.createElement(DrawCard, Object.assign({}, args))));
+}
 // Stories
 export const Contact = ContactCardTemplate.bind({});
 Contact.args = {
@@ -24,4 +29,23 @@ Team.args = {
     title: 'team 1',
     description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
 };
+export const Draw = DrawCardTemplate.bind({});
+Draw.args = {
+    choices: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedTeams: {
+        teamOne: 1,
+        teamTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+};
 //# sourceMappingURL=Cards.stories.js.map

package/dist/stories/molecules/Cards/Cards.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAelC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC"}
+{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAGlC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,CACT,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC;QACxB,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CACpB,CACH,CAAC;AACJ,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;KACX;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;CACrC,CAAC"}

package/dist/stories/molecules/Cards/ContactCard.d.ts

@@ -1,9 +1,3 @@
 /// <reference types="react" />
-type ContactCardProps = {
-    name: string;
-    phone: string;
-    email: string;
-    onMessageClick?: VoidFunction;
-};
+import { ContactCardProps } from './sharedTypes';
 export default function ContactCard({ name, phone, email, onMessageClick, ...props }: ContactCardProps): JSX.Element;
-export {};

package/dist/stories/molecules/Cards/ContactCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,OACjB,EADsB,KAAK,cADV,4CAEnC,CAD6C;IAE5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YACxE;gBACE,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,GAAI;gBAC5D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,OACjB,EADsB,KAAK,cADV,4CAEnC,CAD6C;IAE5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YACxE;gBACE,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,GAAI;gBAC5D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}

package/dist/stories/molecules/Cards/DrawCard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardProps } from "./sharedTypes";
+export default function DrawCard({ choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props }: DrawCardProps): JSX.Element;

package/dist/stories/molecules/Cards/DrawCard.js

@@ -0,0 +1,66 @@
+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 Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import MuiSelect from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+const StyledCard = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px 24px',
+    width: '100%',
+    backgroundColor: 'var(--cool-grey-150)',
+    '&:hover': {
+        cursor: 'pointer'
+    },
+});
+const StyledMuiSelect = styled(MuiSelect)({
+    border: '1px solid var(--cool-grey-600)',
+});
+const BottomGrid = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: '32px',
+});
+export default function DrawCard(_a) {
+    var { choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel } = _a, props = __rest(_a, ["choices", "onChange", "onEditClick", "selectedTeams", "dateLabel", "locationLabel"]);
+    const { teamOne, teamTwo } = selectedTeams || null;
+    const handleOnTeamOneChange = () => {
+        if (onChange) {
+            onChange(0);
+        }
+    };
+    const handleOnTeamTwoChange = () => {
+        if (onChange) {
+            onChange(1);
+        }
+    };
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(StyledMuiSelect, { labelId: "draw-card-select-label-top", id: "draw-card-select-top", value: teamOne, label: "teamOne", onChange: handleOnTeamOneChange }, choices.map((choice) => React.createElement(MenuItem, { value: choice.id }, choice.label))),
+        React.createElement(Box, { pt: 1 }),
+        React.createElement(StyledMuiSelect, { labelId: "draw-card-select-label-bot", id: "draw-card-select-bot", value: teamTwo, label: "teamTwo", onChange: handleOnTeamTwoChange }, choices.map((choice) => React.createElement(MenuItem, { value: choice.id }, choice.label))),
+        React.createElement(BottomGrid, null,
+            React.createElement(Box, null,
+                React.createElement(Typography, { category: "secondary", size: "small-book" }, dateLabel),
+                React.createElement(Typography, { category: "secondary", size: "small-book" }, locationLabel)),
+            React.createElement(Button, { style: {
+                    display: 'flex',
+                    justifyContent: 'end'
+                }, onClick: onEditClick, category: "link" },
+                React.createElement(Typography, { category: "secondary", size: "x-small-medium-cap" }, "Edit")))));
+}
+//# sourceMappingURL=DrawCard.js.map

package/dist/stories/molecules/Cards/DrawCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/DrawCard.tsx"],"names":[],"mappings":"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"}

package/dist/stories/molecules/Cards/TeamCard.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-type TeamCardProps = {
-    title: string;
-    description: string;
-};
+import { TeamCardProps } from './sharedTypes';
 export default function TeamCard({ title, description, ...props }: TeamCardProps): JSX.Element;
-export {};

package/dist/stories/molecules/Cards/TeamCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,KAAK,EAAE,WAAW,OAA2B,EAAtB,KAAK,cAA9B,wBAAgC,CAAF;IAC7D,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,KAAK,CAAc;QAC1E,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CACpE,CAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"TeamCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,KAAK,EAAE,WAAW,OAA2B,EAAtB,KAAK,cAA9B,wBAAgC,CAAF;IAC7D,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,KAAK,CAAc;QAC1E,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CACpE,CAChB,CAAC;AACJ,CAAC"}

package/dist/stories/molecules/Cards/sharedTypes.d.ts

@@ -0,0 +1,27 @@
+type SelectedTeams = {
+    teamOne: number;
+    teamTwo: number;
+};
+type Choices = {
+    id: number;
+    label: string;
+}[];
+export type DrawCardProps = {
+    choices: Choices;
+    selectedTeams: SelectedTeams;
+    dateLabel: string;
+    locationLabel: string;
+    onEditClick?: VoidFunction;
+    onChange?: (arg0: number) => null;
+};
+export interface TeamCardProps {
+    title: string;
+    description: string;
+}
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+}
+export {};

package/dist/stories/molecules/Cards/sharedTypes.js

@@ -0,0 +1,3 @@
+// Card types
+export {};
+//# sourceMappingURL=sharedTypes.js.map

package/dist/stories/molecules/Cards/sharedTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/sharedTypes.ts"],"names":[],"mappings":"AAAA,aAAa"}

package/dist/stories/organisms/DrawCardTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardTableProps } from './sharedTypes';
+export default function DrawCardTable({ headerRows, tableRows, ...props }: DrawCardTableProps): JSX.Element;

package/dist/stories/organisms/DrawCardTable.js

@@ -0,0 +1,40 @@
+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 Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '../atoms/Typography/Typography';
+const StyledHeader = styled(Grid)({
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+});
+const GridSections = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px'
+});
+export default function DrawCardTable(_a) {
+    var { headerRows, tableRows } = _a, props = __rest(_a, ["headerRows", "tableRows"]);
+    const totalColumns = Math.floor(12 / headerRows.length);
+    const formatTableRows = tableRows.map((row, index) => {
+        const rowSectionsWidth = `${100 / tableRows[index].length}%`;
+        const sectionAmount = tableRows[index].length;
+        return (React.createElement(Grid, { xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { sx: { height: rowSectionsWidth } }, row[idx])))));
+    });
+    return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }),
+        React.createElement(Grid, { container: true, sx: { height: '60px' } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
+            React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
+        React.createElement(Grid, { container: true }, formatTableRows)));
+}
+//# sourceMappingURL=DrawCardTable.js.map

package/dist/stories/organisms/DrawCardTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawCardTable.js","sourceRoot":"","sources":["../../../src/stories/organisms/DrawCardTable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAGxD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAIjB;QAJiB,EACpC,UAAU,EACV,SAAS,OAEU,EADhB,KAAK,cAH4B,2BAIrC,CADS;IAER,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACnD,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;QAC7D,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;QAE9C,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAE,YAAY,IACnB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAC,MAAM,EAAE,gBAAgB,EAAC,IACzC,GAAG,CAAC,GAAG,CAAC,CACI,CAClB,CAAC,CACG,CACR,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,GAAG,oBAAK,KAAK,IAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,gBAAa,YAAY;QAC1D,oBAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,IAC7B,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,oBAAC,YAAY,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY;YAC3C,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,kBAAkB,IAAE,GAAG,CAAC,IAAI,CAAc,CACnE,CAClB,CAAC,CACD;QACP,oBAAC,IAAI,IAAC,SAAS,UACJ,eAAe,CACnB,CACH,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/organisms/Tables.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const DrawTable: any;

package/dist/stories/organisms/Tables.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import DrawCard from '../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+const SAMPLE_CARD_DATA = {
+    choices: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedTeams: {
+        teamOne: 1,
+        teamTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+};
+// Default
+export default {
+    title: 'Organisms/Tables',
+};
+// Templates
+function DrawCardTableTemplate(args) {
+    return React.createElement(DrawCardTable, Object.assign({}, args));
+}
+const headerRows = [
+    { name: 'Round 1' },
+    { name: 'Quarterfinal' },
+    { name: 'SemiFinal' },
+];
+const tableRows = [
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+];
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+    headerRows,
+    tableRows,
+};
+//# sourceMappingURL=Tables.stories.js.map

package/dist/stories/organisms/Tables.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../src/stories/organisms/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,gBAAgB,GAAG;IACvB,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;KACX;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF,UAAU;AACV,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,YAAY;AACZ,SAAS,qBAAqB,CAAC,IAAwB;IACrD,OAAO,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAC,IAAI,EAAE,SAAS,EAAE;IAClB,EAAC,IAAI,EAAE,cAAc,EAAE;IACvB,EAAC,IAAI,EAAE,WAAW,EAAE;CACrB,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACM,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACvC;CACF,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,SAAS,CAAC,IAAI,GAAG;IACf,UAAU;IACV,SAAS;CACV,CAAC"}

package/dist/stories/organisms/sharedTypes.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type DrawCardTableProps = {
+    headerRows: {
+        name: string;
+    }[];
+    tableRows: ReactNode[][];
+};

package/dist/stories/organisms/sharedTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sharedTypes.js.map

package/dist/stories/organisms/sharedTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../src/stories/organisms/sharedTypes.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.25",
+  "version": "0.1.0",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/stories/assets/css/variables.css

@@ -6,5 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
     --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
     }

package/src/stories/molecules/Cards/Cards.stories.tsx

@@ -2,19 +2,8 @@ import React from 'react';
 
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
-
-// Prop types
-interface ContactCardProps {
-  name: string;
-  phone: string;
-  email: string;
-  handleOnMessageClick?: VoidFunction;
-}
-
-interface TeamCardProps {
-  title: string; 
-  description: string;
-}
+import DrawCard from './DrawCard';
+import {DrawCardProps, TeamCardProps, ContactCardProps} from "./sharedTypes";
 
 // Default
 export default {
@@ -30,6 +19,14 @@ function TeamCardTemplate(args: TeamCardProps) {
   return <TeamCard {...args} />;  
 }
 
+function DrawCardTemplate(args: DrawCardProps) {
+  return (
+<div style={{width: '372px'}}>
+    <DrawCard {...args} /> 
+</div>
+  );
+}
+
 // Stories
 export const Contact = ContactCardTemplate.bind({});
 Contact.args = {
@@ -43,3 +40,23 @@ Team.args = {
   title: 'team 1',
   description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
 };
+
+export const Draw = DrawCardTemplate.bind({});
+Draw.args = {
+  choices: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedTeams: {
+    teamOne: 1,
+    teamTwo: 2,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+};

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -8,13 +8,7 @@ import Typography from '../../atoms/Typography/Typography';
 import ChatIcon from '../../assets/icon-chat-blue.svg';
 
 import { StyledCard } from './shared';
-
-type ContactCardProps = {
-  name: string;
-  phone: string;
-  email: string;
-  onMessageClick?: VoidFunction;
-}
+import {ContactCardProps} from './sharedTypes';
 
 export default function ContactCard({
   name, phone, email, onMessageClick, ...props 

package/src/stories/molecules/Cards/DrawCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import MuiSelect from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import {DrawCardProps} from "./sharedTypes";
+
+const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  backgroundColor: 'var(--cool-grey-150)',
+  
+  '&:hover': {
+    cursor: 'pointer'
+  },
+});
+
+const StyledMuiSelect = styled(MuiSelect)({
+  border: '1px solid var(--cool-grey-600)',
+});
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '32px',
+
+});
+
+export default function DrawCard({
+  choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props
+}: DrawCardProps) {
+  const {teamOne, teamTwo} = selectedTeams || null;
+
+  const handleOnTeamOneChange = () => {
+    if (onChange) {
+      onChange(0);
+    }
+  };
+
+  const handleOnTeamTwoChange = () => {
+    if (onChange) {
+      onChange(1);
+    }
+  };
+
+  return (
+      <StyledCard
+        {...props}
+      >
+          <StyledMuiSelect
+            labelId="draw-card-select-label-top"
+            id="draw-card-select-top"
+            value={teamOne}
+            label="teamOne"
+            onChange={handleOnTeamOneChange}
+          >
+            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+          </StyledMuiSelect>
+
+            <Box pt={1} />
+
+          <StyledMuiSelect
+            labelId="draw-card-select-label-bot"
+            id="draw-card-select-bot"
+            value={teamTwo}
+            label="teamTwo"
+            onChange={handleOnTeamTwoChange}
+          >
+            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+          </StyledMuiSelect>
+        <BottomGrid> 
+
+            <Box>
+          <Typography category="secondary" size="small-book">
+            {dateLabel}
+          </Typography>
+          <Typography category="secondary" size="small-book">
+            {locationLabel}
+          </Typography>
+            </Box>
+            <Button
+              style={{
+                display: 'flex',
+                justifyContent: 'end'
+              }}
+              onClick={onEditClick}
+              category="link"
+            >
+                <Typography category="secondary" size="x-small-medium-cap">
+                Edit
+                </Typography>
+            </Button>
+        </BottomGrid>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/TeamCard.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 
 import Typography from '../../atoms/Typography/Typography';
 import { StyledCard } from './shared';
-
-type TeamCardProps = {
-  title: string;
-  description: string;
-}
+import {TeamCardProps} from './sharedTypes';
 
 export default function TeamCard({ title, description, ...props }: TeamCardProps) {
   return (

package/src/stories/molecules/Cards/sharedTypes.ts

@@ -0,0 +1,32 @@
+// Card types
+
+type SelectedTeams = {
+    teamOne: number;
+    teamTwo: number;
+}
+
+type Choices = {
+    id: number;
+    label: string;
+}[];
+
+export type DrawCardProps = {
+    choices: Choices;
+    selectedTeams: SelectedTeams;
+    dateLabel: string;
+    locationLabel: string;
+    onEditClick?: VoidFunction;
+    onChange?: (arg0: number) => null;
+  }
+
+export interface TeamCardProps {
+    title: string; 
+    description: string;
+  }
+
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+  }

package/src/stories/organisms/DrawCardTable.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import Typography from '../atoms/Typography/Typography';
+import {DrawCardTableProps} from './sharedTypes';
+
+const StyledHeader = styled(Grid)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+});
+
+const GridSections = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px'
+});
+
+export default function DrawCardTable({
+  headerRows,
+  tableRows,
+  ...props
+}: DrawCardTableProps) {
+  const totalColumns = Math.floor(12 / headerRows.length); 
+
+  const formatTableRows = tableRows.map((row, index) => {
+    const rowSectionsWidth = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+
+    return (
+      <Grid xs={totalColumns}>
+        {[...Array(sectionAmount)].map((section, idx) => (
+            <GridSections sx={{height: rowSectionsWidth}}>
+              {row[idx]}
+            </GridSections>
+        ))}
+      </Grid>
+    );
+  });
+
+  return (
+    <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+      <Grid container sx={{height: '60px'}}>
+            {headerRows.map((row) => (
+                <StyledHeader key={row.name} xs={totalColumns}>
+                  <Typography category="secondary" size="small-medium-cap">{row.name}</Typography>
+                </StyledHeader>
+            ))}
+      </Grid>
+      <Grid container>
+                {formatTableRows}
+      </Grid>
+    </Box>
+  );
+}

package/src/stories/organisms/Tables.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import DrawCard from '../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+import {DrawCardTableProps } from './sharedTypes';
+
+const SAMPLE_CARD_DATA = {
+  choices: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedTeams: {
+    teamOne: 1,
+    teamTwo: 2,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+};
+
+// Default
+export default {
+  title: 'Organisms/Tables',
+};
+
+// Templates
+function DrawCardTableTemplate(args: DrawCardTableProps) {
+  return <DrawCardTable {...args} />;
+}
+
+const headerRows = [
+  {name: 'Round 1' },
+  {name: 'Quarterfinal' },
+  {name: 'SemiFinal' },
+];
+
+const tableRows = [
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+        <DrawCard {...SAMPLE_CARD_DATA} />,
+        <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+];
+
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+  headerRows,
+  tableRows,
+};

package/src/stories/organisms/sharedTypes.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+
+export type DrawCardTableProps = {
+    headerRows: {
+      name: string;
+    }[],
+    tableRows: ReactNode[][];
+  }