@universal-tennis/ui-shared 0.1.86 → 0.1.88

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

@@ -1,130 +1,131 @@
-import React from 'react';
-import { TableRow, TableCell, Typography } from '@mui/material';
-
-interface RowData {
-    player: string;
-    team: string;
-    session: string;
-  }
-
-interface RowProps {
-    rowData: RowData,
-    labelId: string;
-  }
-
-  type OnChangeArgs = {
-    position: number;
-    id: string | null | undefined;
-  }
-  
-export const mockRowComponent = ({ rowData, labelId }: RowProps) => {
-  const { player, session, team } = rowData;
-  return (
-      <TableRow>
-          <TableCell
-              component="th"
-              id={labelId}
-              scope="row"
-              padding="normal"
-          >
-              <Typography>{player}</Typography>
-          </TableCell>
-          <TableCell align="left">
-              <Typography>{team}</Typography>
-          </TableCell>
-          <TableCell align="left">
-              <Typography>{session}</Typography>
-          </TableCell>
-      </TableRow>
-      
-  );
-};
-  
-export const MOCK_HEAD_CELLS = [
-  { id: 'player', label: 'Player Name', isSortingDisabled: false }, 
-  { id: 'team', label: 'Team Name', isSortingDisabled: true },
-  { id: 'session', label: 'Session', isSortingDisabled: false }];
-  
-export const MOCK_TABLE_DATA = [
-  {
-    id: 1,
-    player: 'John Smith',
-    team: 'Mavericks',
-    session: 'NorCal Adults',
-  },
-  {
-    id: 2,
-    player: 'Megan Brown',
-    team: 'Mini Mavericks',
-    session: 'SoCal Juniors',
-  }, 
-  {
-    id: 3,
-    player: 'George Fox',
-    team: 'Grey Foxes',
-    session: 'North Bay Junios',
-  }, 
-  {
-    id: 4,
-    player: 'Alison Green',
-    team: 'Lions',
-    session: 'Outer Bay UTR 2-5',
-  },
-  {
-    id: 5,
-    player: 'Linda Belinda',
-    team: 'Green Hornets',
-    session: 'Tri-State UTR 1-3',
-  },
-];
-
-export const SAMPLE_CARD_DATA = {
-  options: [
-    {
-      id: 1,
-      label: 'Team 1',
-    },
-    {
-      id: 2,
-      label: 'Team 2',
-    }
-  ],
-  selectedOptions: {
-    optionOne: 1,
-    optionTwo: 2,
-  },
-  onChange: ({ position, id }: OnChangeArgs) => {},
-  dateLabel: 'Dec 20 at 9:00am',
-  locationLabel: `T`,
-  isPosition1Winner: true, 
-  isPosition2Winner: false,
-  position1Team: {
-    name: 'Apples',
-    points: 10,
-  },
-  position2Team: {
-    name: 'Pears',
-    points: 4,
-  }
-};
-
-export const SAMPLE_TEAM_PAGE_CARD_DATA = {
-  dateLabel: 'Dec 20',
-  timeLabel: '9:00pm',
-  locationLabel: 'Taube Tennis Center',
-  isPosition1Winner: true, 
-  isPosition2Winner: false,
-  position1Team: {
-    name: 'Apples',
-    points: 10,
-    href: 'https://www.reddit.com',
-    seed: 1
-  },
-  position2Team: {
-    name: 'Pears',
-    points: 4,
-    href: 'https://www.reddit.com',
-    seed: 2
-  },
-  teamMatchLink: 'https://www.google.com',
-};
+import React from 'react';
+import { TableRow, TableCell, Typography } from '@mui/material';
+
+interface RowData {
+    player: string;
+    team: string;
+    session: string;
+  }
+
+interface RowProps {
+    rowData: RowData,
+    labelId: string;
+  }
+
+  type OnChangeArgs = {
+    position: number;
+    id: string | null | undefined;
+  }
+  
+export const mockRowComponent = ({ rowData, labelId }: RowProps) => {
+  const { player, session, team } = rowData;
+  return (
+      <TableRow>
+          <TableCell
+              component="th"
+              id={labelId}
+              scope="row"
+              padding="normal"
+          >
+              <Typography>{player}</Typography>
+          </TableCell>
+          <TableCell align="left">
+              <Typography>{team}</Typography>
+          </TableCell>
+          <TableCell align="left">
+              <Typography>{session}</Typography>
+          </TableCell>
+      </TableRow>
+      
+  );
+};
+  
+export const MOCK_HEAD_CELLS = [
+  { id: 'player', label: 'Player Name', isSortingDisabled: false }, 
+  { id: 'team', label: 'Team Name', isSortingDisabled: true },
+  { id: 'session', label: 'Session', isSortingDisabled: false }];
+  
+export const MOCK_TABLE_DATA = [
+  {
+    id: 1,
+    player: 'John Smith',
+    team: 'Mavericks',
+    session: 'NorCal Adults',
+  },
+  {
+    id: 2,
+    player: 'Megan Brown',
+    team: 'Mini Mavericks',
+    session: 'SoCal Juniors',
+  }, 
+  {
+    id: 3,
+    player: 'George Fox',
+    team: 'Grey Foxes',
+    session: 'North Bay Junios',
+  }, 
+  {
+    id: 4,
+    player: 'Alison Green',
+    team: 'Lions',
+    session: 'Outer Bay UTR 2-5',
+  },
+  {
+    id: 5,
+    player: 'Linda Belinda',
+    team: 'Green Hornets',
+    session: 'Tri-State UTR 1-3',
+  },
+];
+
+export const SAMPLE_CARD_DATA = {
+  options: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedOptions: {
+    optionOne: 1,
+    optionTwo: 2,
+  },
+  onChange: ({ position, id }: OnChangeArgs) => {},
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: `T`,
+  isPosition1Winner: true, 
+  isPosition2Winner: false,
+  position1Team: {
+    name: 'Apples',
+    points: 10,
+  },
+  position2Team: {
+    name: 'Pears',
+    points: 4,
+  }
+};
+
+export const SAMPLE_TEAM_PAGE_CARD_DATA = {
+  dateLabel: 'Dec 20',
+  timeLabel: '9:00pm',
+  locationLabel: 'Taube Tennis Center',
+  isPosition1Winner: true, 
+  isPosition2Winner: false,
+  position1Team: {
+    name: 'Friendly Hills Country Club 0-1.99',
+    points: 10,
+    href: 'https://www.reddit.com',
+    seed: 1
+  },
+  position2Team: {
+    name: 'Pears',
+    points: 4,
+    href: 'https://www.reddit.com',
+    seed: 2
+  },
+  teamMatchLink: 'https://www.google.com',
+  showTeamMatchLink: false,
+};

package/src/stories/organisms/Tables/sharedTypes.ts

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
-
-export type DrawCardTableProps = {
-    headerRows: {
-      name: string;
-    }[],
-    tableRows: ReactNode[][];
-    isMobile: boolean;
-  }
-
-export interface TableRowProps {
-    readonly headerRows: {
-      name: string;
-    }[],
-    readonly tableRows: ReactNode[][];
-    readonly totalColumns: number;
-}
+import { ReactNode } from 'react';
+
+export type DrawCardTableProps = {
+    headerRows: {
+      name: string;
+    }[],
+    tableRows: ReactNode[][];
+    isMobile: boolean;
+  }
+
+export interface TableRowProps {
+    readonly headerRows: {
+      name: string;
+    }[],
+    readonly tableRows: ReactNode[][];
+    readonly totalColumns: number;
+}

package/src/stories/utils/constants.ts

@@ -1,11 +1,11 @@
-export const teamDrawCardSideMargin = '24px';
-export const standardSideMargin = 24;
-export const teamDrawCardBottomMargin = '8px';
-
-export const SocialMediaIds = {
-  X: 1,
-  FACEBOOK: 2,
-  INSTAGRAM: 3,
-  TIKTOK: 4,
-  YOUTUBE: 5,
-};
+export const teamDrawCardSideMargin = '24px';
+export const standardSideMargin = 24;
+export const teamDrawCardBottomMargin = '8px';
+
+export const SocialMediaIds = {
+  X: 1,
+  FACEBOOK: 2,
+  INSTAGRAM: 3,
+  TIKTOK: 4,
+  YOUTUBE: 5,
+};

package/src/stories/utils/getArrayWithIds.ts

@@ -1 +1 @@
-export const getArrayWithIds = (array: object[]) => array.map((item, index) => ({ ...item, id: index + 1 }));
+export const getArrayWithIds = (array: object[]) => array.map((item, index) => ({ ...item, id: index + 1 }));

package/src/stories/utils/useScreenSize.ts

@@ -1,28 +1,28 @@
-import { useState, useEffect } from "react";
-
-// Hook
-export default function useWindowSize() {
-  // Initialize state with undefined width/height so server and client renders match
-  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const [windowSize, setWindowSize] = useState({
-    width: 0,
-    height: 0,
-  });
-  useEffect(() => {
-    // Handler to call on window resize
-    function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-    // Add event listener
-    window.addEventListener("resize", handleResize);
-    // Call handler right away so state gets updated with initial window size
-    handleResize();
-    // Remove event listener on cleanup
-    return () => window.removeEventListener("resize", handleResize);
-  }, []); // Empty array ensures that effect is only run on mount
-  return windowSize;
-}
+import { useState, useEffect } from "react";
+
+// Hook
+export default function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

package/src/types/tableDataTypes.ts

@@ -1,42 +1,42 @@
-export interface Location {
-    placeId: string;
-    formattedAddress: string;
-    placeName: string;
-    lat: number;
-    lng: number
-}
-
-export interface Captain {
-    id: number;
-    teamId: number;
-    memberId: number;
-    playerId: number;
-    gender?: string;
-    firstName: string;
-    lastName: string;
-    email?: string;
-    phone?: string;
-    phoneCountryCode?: string;
-    profileImage?: string;
-    location?: Location
-}
-
-export interface AddTeamsData {
-    id: number;
-    name?: string;
-    teamMemberCount?: number;
-    captains?: Array<Captain>;
-    sessionId?: number;
-    sessionName?: string;
-    sessionStartDateUtc?: string;
-    sessionEndDateUtc?: string;
-    wins?: number;
-    losses?: number;
-    rank?: number;
-    isSelected?: boolean;
-    record?: string;
-    sessionDates?: string;
-    
-}
-
-export type TableData = AddTeamsData
+export interface Location {
+    placeId: string;
+    formattedAddress: string;
+    placeName: string;
+    lat: number;
+    lng: number
+}
+
+export interface Captain {
+    id: number;
+    teamId: number;
+    memberId: number;
+    playerId: number;
+    gender?: string;
+    firstName: string;
+    lastName: string;
+    email?: string;
+    phone?: string;
+    phoneCountryCode?: string;
+    profileImage?: string;
+    location?: Location
+}
+
+export interface AddTeamsData {
+    id: number;
+    name?: string;
+    teamMemberCount?: number;
+    captains?: Array<Captain>;
+    sessionId?: number;
+    sessionName?: string;
+    sessionStartDateUtc?: string;
+    sessionEndDateUtc?: string;
+    wins?: number;
+    losses?: number;
+    rank?: number;
+    isSelected?: boolean;
+    record?: string;
+    sessionDates?: string;
+    
+}
+
+export type TableData = AddTeamsData

package/tsconfig.json

@@ -1,23 +1,23 @@
-{
-    "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/dist/stories/Button.d.ts

@@ -1,27 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,15 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,19 +0,0 @@
-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";