@universal-tennis/ui-shared 0.1.96 → 0.2.0

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

@@ -1,120 +1,120 @@
-import React, { ReactNode } from "react";
-import { styled } from "@mui/material/styles";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-
-import { getArrayWithIds } from '../../../utils/getArrayWithIds';
-import { TableRowProps } from '../sharedTypes';
-import Typography from "../../../atoms/Typography/Typography";
-import { teamDrawCardSideMargin, standardSideMargin } from "../../../utils/constants";
-
-type IndexedRow = {
-  [key: number]: ReactNode;
-};
-
-const StyledHeader = styled(Grid)({
-  alignItems: "center",
-  justifyContent: "center",
-  display: "flex"
-});
-
-const gridCommonStyles = {
-  content: "''",
-  position: "absolute",
-  backgroundColor: "var(--cool-grey-600)",
-};
-
-const horizontalLineCommonStyles = {
-  height: "1px",
-  top: "50%",
-};
-
-const StyledGrid = styled(Grid)({
-  position: "relative",
-  '&:first-of-type .team-draw-card': {
-    marginLeft: 0,
-    '&:before': {
-      display: 'none'
-    }
-  },
-  '&:last-child .team-draw-card': {
-    marginRight: 0,
-    '&:after': {
-      display: 'none'
-    }
-  },
-  "&:nth-last-of-type(-n+2) .team-draw-card": {
-    "&:before": {
-      ...gridCommonStyles,
-      ...horizontalLineCommonStyles,
-      width: `${teamDrawCardSideMargin}`,
-      left: 0,
-      transform: "translateX(-100%)"
-    }
-  },
-  "&:nth-of-type(-n+2) .team-draw-card": {
-    "&:after": {
-      ...gridCommonStyles,
-      ...horizontalLineCommonStyles,
-      width: `calc(${standardSideMargin + 1}px)`,
-      right: 0,
-      transform: "translateX(100%)"
-    }
-  }
-});
-
-const GridSections = styled(Box)({
-  display: "flex",
-  alignItems: "center",
-  position: 'relative',
-});
-
-export default function DesktopTableRows({
-  headerRows = [], totalColumns, tableRows = []
-}: Readonly <TableRowProps>) {
-  const tableRowsArray = getArrayWithIds(tableRows);
-  const formatTableRows = tableRowsArray?.map((row, index) => {
-    if (index > 2) return; // Table can only support 3 columns
-    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
-    const sectionAmount = tableRows[index].length;
-    const isFirstRow = index === 0;
-    const sectionArray = getArrayWithIds([...Array(sectionAmount)]);
-
-    return (
-        <StyledGrid key={row.id} xs={totalColumns}>
-            {sectionArray?.map((section, idx) => (
-                <GridSections 
-                    key={section.id} 
-                    sx={{ 
-                      height: rowSectionsHeight,
-                      '&:before': {
-                        display: isFirstRow ? 'none' : 'block',
-                        ...gridCommonStyles,
-                        height: `calc(50% + 1px)`,
-                        width: "1px",
-                        top: `calc(25% - 4px)`
-                      }, 
-                    }}
-                >
-                    {(row as IndexedRow)[idx]}
-                </GridSections>
-            ))}
-        </StyledGrid>
-    );
-  });
-
-  return (
-      <>
-          <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>
-      </>
-  );
-}
+import React, { ReactNode } from "react";
+import { styled } from "@mui/material/styles";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+
+import { getArrayWithIds } from '../../../utils/getArrayWithIds';
+import { TableRowProps } from '../sharedTypes';
+import Typography from "../../../atoms/Typography/Typography";
+import { teamDrawCardSideMargin, standardSideMargin } from "../../../utils/constants";
+
+type IndexedRow = {
+  [key: number]: ReactNode;
+};
+
+const StyledHeader = styled(Grid)({
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex"
+});
+
+const gridCommonStyles = {
+  content: "''",
+  position: "absolute",
+  backgroundColor: "var(--cool-grey-600)",
+};
+
+const horizontalLineCommonStyles = {
+  height: "1px",
+  top: "50%",
+};
+
+const StyledGrid = styled(Grid)({
+  position: "relative",
+  '&:first-of-type .team-draw-card': {
+    marginLeft: 0,
+    '&:before': {
+      display: 'none'
+    }
+  },
+  '&:last-child .team-draw-card': {
+    marginRight: 0,
+    '&:after': {
+      display: 'none'
+    }
+  },
+  "&:nth-last-of-type(-n+2) .team-draw-card": {
+    "&:before": {
+      ...gridCommonStyles,
+      ...horizontalLineCommonStyles,
+      width: `${teamDrawCardSideMargin}`,
+      left: 0,
+      transform: "translateX(-100%)"
+    }
+  },
+  "&:nth-of-type(-n+2) .team-draw-card": {
+    "&:after": {
+      ...gridCommonStyles,
+      ...horizontalLineCommonStyles,
+      width: `calc(${standardSideMargin + 1}px)`,
+      right: 0,
+      transform: "translateX(100%)"
+    }
+  }
+});
+
+const GridSections = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  position: 'relative',
+});
+
+export default function DesktopTableRows({
+  headerRows = [], totalColumns, tableRows = []
+}: Readonly <TableRowProps>) {
+  const tableRowsArray = getArrayWithIds(tableRows);
+  const formatTableRows = tableRowsArray?.map((row, index) => {
+    if (index > 2) return; // Table can only support 3 columns
+    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+    const isFirstRow = index === 0;
+    const sectionArray = getArrayWithIds([...Array(sectionAmount)]);
+
+    return (
+        <StyledGrid key={row.id} xs={totalColumns}>
+            {sectionArray?.map((section, idx) => (
+                <GridSections 
+                    key={section.id} 
+                    sx={{ 
+                      height: rowSectionsHeight,
+                      '&:before': {
+                        display: isFirstRow ? 'none' : 'block',
+                        ...gridCommonStyles,
+                        height: `calc(50% + 1px)`,
+                        width: "1px",
+                        top: `calc(25% - 4px)`
+                      }, 
+                    }}
+                >
+                    {(row as IndexedRow)[idx]}
+                </GridSections>
+            ))}
+        </StyledGrid>
+    );
+  });
+
+  return (
+      <>
+          <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>
+      </>
+  );
+}

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

@@ -1,67 +1,67 @@
-import React, { useState } 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 = []
-}: Readonly <TableRowProps>) {
-  const [activeStep, setActiveStep] = useState<number>(0);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const disabledBackButton = activeStep === 0;
-  const disabledForwardButton = tableRows && 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, { useState } 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 = []
+}: Readonly <TableRowProps>) {
+  const [activeStep, setActiveStep] = useState<number>(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const disabledBackButton = activeStep === 0;
+  const disabledForwardButton = tableRows && 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 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>
-  );
-}
+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>
+  );
+}