@universal-tennis/ui-shared 0.1.68 → 0.1.70

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

@@ -1,67 +1,67 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { styled } from "@mui/material/styles";
-import Grid from "@mui/material/Grid";
-
-import { TableRowProps } from '../sharedTypes';
-import RightChevronIcon from '../../../atoms/Icons/RightChevronIcon';
-import LeftChevronIcon from '../../../atoms/Icons/LeftChevronIcon';
-import Typography from "../../../atoms/Typography/Typography";
-
-const StyledHeader = styled(Grid)({
-  alignItems: "center",
-  justifyContent: "center",
-  display: "flex"
-});
-
-const GridSections = styled(Box)({
-  display: "flex",
-  alignItems: "center",
-  position: 'relative',
-});
-
-export default function MobileTableRows({
-  totalColumns, headerRows, tableRows
-}: TableRowProps) {
-  const [activeStep, setActiveStep] = React.useState(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const disabledBackButton = activeStep === 0;
-  const disabledForwardButton = activeStep === tableRows.length - 1;
-
-  return (
-      <Box>
-          <Grid container justifyContent="space-between" mb={1}>
-              <Button color="inherit" disabled={disabledBackButton} onClick={handleBack} sx={{ mr: 1, alignSelf: "flex-start" }}>
-                  <LeftChevronIcon size={16} color={disabledBackButton ? "transparent" : "var(--primary)"} />
-              </Button>
-              <StyledHeader xs={totalColumns}>
-                  <Typography category="secondary" size="small-medium-cap">
-                      {headerRows[activeStep].name}
-                  </Typography>
-              </StyledHeader>
-              <Button onClick={handleNext} disabled={disabledForwardButton}>
-                  <RightChevronIcon size={16} color={disabledForwardButton ? "transparent" : "var(--primary)"} />
-              </Button>
-          </Grid>
-          <Grid flexDirection="column" container>
-              <GridSections 
-                  sx={{
-                    flexDirection: "column",
-                    gap: "10px",
-                  }}
-              >
-                  {tableRows[activeStep]}
-              </GridSections>
-          </Grid>
-      </Box>
-  );
-}
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Grid from "@mui/material/Grid";
+
+import { TableRowProps } from '../sharedTypes';
+import RightChevronIcon from '../../../atoms/Icons/RightChevronIcon';
+import LeftChevronIcon from '../../../atoms/Icons/LeftChevronIcon';
+import Typography from "../../../atoms/Typography/Typography";
+
+const StyledHeader = styled(Grid)({
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex"
+});
+
+const GridSections = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  position: 'relative',
+});
+
+export default function MobileTableRows({
+  totalColumns, headerRows, tableRows
+}: TableRowProps) {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const disabledBackButton = activeStep === 0;
+  const disabledForwardButton = activeStep === tableRows.length - 1;
+
+  return (
+      <Box>
+          <Grid container justifyContent="space-between" mb={1}>
+              <Button color="inherit" disabled={disabledBackButton} onClick={handleBack} sx={{ mr: 1, alignSelf: "flex-start" }}>
+                  <LeftChevronIcon size={16} color={disabledBackButton ? "transparent" : "var(--primary)"} />
+              </Button>
+              <StyledHeader xs={totalColumns}>
+                  <Typography category="secondary" size="small-medium-cap">
+                      {headerRows[activeStep].name}
+                  </Typography>
+              </StyledHeader>
+              <Button onClick={handleNext} disabled={disabledForwardButton}>
+                  <RightChevronIcon size={16} color={disabledForwardButton ? "transparent" : "var(--primary)"} />
+              </Button>
+          </Grid>
+          <Grid flexDirection="column" container>
+              <GridSections 
+                  sx={{
+                    flexDirection: "column",
+                    gap: "10px",
+                  }}
+              >
+                  {tableRows[activeStep]}
+              </GridSections>
+          </Grid>
+      </Box>
+  );
+}

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

@@ -1,24 +1,24 @@
-import React from "react";
-import Box from "@mui/material/Box";
-
-import DesktopTableRows from './DesktopTableRows';
-import MobileTableRow from './MobileTableRows';
-import { DrawCardTableProps } from "../sharedTypes";
-
-export default function TeamDrawCardTable({
-  headerRows, tableRows, isMobile, ...props 
-}: DrawCardTableProps) {
-  if (!headerRows || !tableRows) return null;
-
-  const totalColumns = Math.floor(12 / headerRows.length);
-
-  return (
-      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
-          {isMobile ? (
-              <MobileTableRow totalColumns={totalColumns} tableRows={tableRows} headerRows={headerRows} />
-          ) : (
-              <DesktopTableRows totalColumns={totalColumns} tableRows={tableRows} headerRows={headerRows} />
-          )}
-      </Box>
-  );
-}
+import React from "react";
+import Box from "@mui/material/Box";
+
+import DesktopTableRows from './DesktopTableRows';
+import MobileTableRows from './MobileTableRows';
+import { DrawCardTableProps } from "../sharedTypes";
+
+export default function TeamDrawCardTable({
+  headerRows, tableRows, isMobile, ...props 
+}: DrawCardTableProps) {
+  if (!headerRows || !tableRows) return null;
+
+  const totalColumns = Math.floor(12 / headerRows.length);
+
+  return (
+      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+          {isMobile ? (
+              <MobileTableRows totalColumns={totalColumns} tableRows={tableRows} headerRows={headerRows} />
+          ) : (
+              <DesktopTableRows totalColumns={totalColumns} tableRows={tableRows} headerRows={headerRows} />
+          )}
+      </Box>
+  );
+}

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

@@ -1,129 +1,129 @@
-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
-  }
-};
+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
+  }
+};

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 {
-    headerRows: {
-      name: string;
-    }[],
-    tableRows: ReactNode[][];
-    totalColumns: number;
-}
+import { ReactNode } from 'react';
+
+export type DrawCardTableProps = {
+    headerRows: {
+      name: string;
+    }[],
+    tableRows: ReactNode[][];
+    isMobile: boolean;
+  }
+
+export interface TableRowProps {
+    headerRows: {
+      name: string;
+    }[],
+    tableRows: ReactNode[][];
+    totalColumns: number;
+}

package/src/stories/utils/constants.ts

@@ -1,3 +1,3 @@
-export const teamDrawCardSideMargin = '24px';
-export const standardSideMargin = 24;
-export const teamDrawCardBottomMargin = '8px';
+export const teamDrawCardSideMargin = '24px';
+export const standardSideMargin = 24;
+export const teamDrawCardBottomMargin = '8px';

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: undefined || 0,
-    height: undefined || 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: undefined || 0,
+    height: undefined || 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"]
+}