@universal-tennis/ui-shared 0.1.96 → 0.2.0

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

@@ -1,131 +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: '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,
-};
+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,31 +1,31 @@
-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,
-};
-
-interface ClickAttrs {
-    context?: string;
-    location?: string;
-    category?: string;
-}
-
-export const getClickAttrs = ({ context, location, category }: ClickAttrs) => {
-  const attrs: { [key: string]: string } = {};
-  if (category) {
-    attrs['data-category'] = category;
-  }
-  if (context) {
-    attrs['data-context'] = context;
-  }
-  if (location) {
-    attrs['data-location'] = location;
-  }
-  return attrs;
-};
+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,
+};
+
+interface ClickAttrs {
+    context?: string;
+    location?: string;
+    category?: string;
+}
+
+export const getClickAttrs = ({ context, location, category }: ClickAttrs) => {
+  const attrs: { [key: string]: string } = {};
+  if (category) {
+    attrs['data-category'] = category;
+  }
+  if (context) {
+    attrs['data-context'] = context;
+  }
+  if (location) {
+    attrs['data-location'] = location;
+  }
+  return attrs;
+};

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/atoms/Map/Map.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface MapProps {
-    placeId: string;
-    height: string | number;
-    width: string | number;
-}
-export default function Map({ placeId, height, width }: MapProps): JSX.Element;

package/dist/stories/atoms/Map/Map.js

@@ -1,9 +0,0 @@
-import React from 'react';
-export default function Map({ placeId, height, width }) {
-    const placeParam = placeId && `q=place_id:${placeId}`;
-    const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
-    const mapHeight = height || `216px`;
-    const mapWidth = width || `100%`;
-    return (React.createElement("iframe", { width: mapWidth, height: mapHeight, src: placeUrl, title: "Google Maps" }));
-}
-//# sourceMappingURL=Map.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Map.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,EACb;IACT,MAAM,UAAU,GAAG,OAAO,IAAI,cAAc,OAAO,EAAE,CAAC;IACtD,MAAM,QAAQ,GAAG,0FAA0F,UAAU,EAAE,CAAC;IACxH,MAAM,SAAS,GAAG,MAAM,IAAI,OAAO,CAAC;IACpC,MAAM,QAAQ,GAAG,KAAK,IAAI,MAAM,CAAC;IAEjC,OAAO,CACH,gCACI,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,SAAS,EACjB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,aAAa,GACrB,CACL,CAAC;AACJ,CAAC"}

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

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: any;
-export declare const WithCustomStringHeight: any;
-export declare const WithCustomNumberHeight: any;
-export declare const WithCustomStringWidth: any;
-export declare const WithCustomNumberWidth: any;

package/dist/stories/atoms/Map/Map.stories.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import Map from './Map';
-// Default
-export default {
-    title: 'Atoms/Map',
-};
-// Templates
-function MapTemplate(args) {
-    return React.createElement(Map, Object.assign({}, args));
-}
-// Stories
-export const Default = MapTemplate.bind({});
-Default.args = {
-    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-};
-export const WithCustomStringHeight = MapTemplate.bind({});
-WithCustomStringHeight.args = {
-    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-    height: '320px'
-};
-export const WithCustomNumberHeight = MapTemplate.bind({});
-WithCustomNumberHeight.args = {
-    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-    height: 320
-};
-export const WithCustomStringWidth = MapTemplate.bind({});
-WithCustomStringWidth.args = {
-    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-    width: '620px'
-};
-export const WithCustomNumberWidth = MapTemplate.bind({});
-WithCustomNumberWidth.args = {
-    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-    width: 620
-};
-//# sourceMappingURL=Map.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Map.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAiB,MAAM,OAAO,CAAC;AAEtC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,YAAY;AACZ,SAAS,WAAW,CAAC,IAAc;IACjC,OAAO,oBAAC,GAAG,oBAAK,IAAI,EAAI,CAAC;AAC3B,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,6BAA6B;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,GAAG;CACX,CAAC"}

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

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