@universal-tennis/ui-shared 0.1.66 → 0.1.68

package/src/stories/organisms/Modals/Modals.stories.tsx

@@ -1,138 +1,138 @@
-import React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import Checkbox from '@mui/material/Checkbox';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from 'stories/atoms/Typography/Typography';
-import Button from 'stories/atoms/Button/Button';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Pagination from '@mui/material/Pagination';
-import FullPageModal from "./FullPageModal";
-import SortableTable from "../Tables/SortableTable";
-import {
-  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
-} from "../Tables/mockData";
-
-import { FullPageModalType } from "./sharedTypes";
-
-// Fake data for rendering sections
-const conferences = [{ id: 1, name: 'philly' }, { id: 2, name: 'NJ' }, { id: 3, name: 'PA' }];
-const sessions = [{ sessionId: 1, sessionName: 'philly' }, { sessionId: 2, sessionName: 'NJ' }, { sessionId: 3, sessionName: 'PA' }];
-const selectedSessionIds = [1];
-const teamsToAdd = [{ id: 1, name: 'test', sessionName: 'test' }];
-const selectedTeamIds = [1];
-
-const InputSelections = [
-    <FormControl sx={{ width: 300, mr: 3 }}>
-        <InputLabel id="conference-select">Select Conference</InputLabel>
-        <Select
-            value={1 || ''}
-            label="Select Conference"
-            labelId="conference-select"
-        >
-            {conferences?.map((option) => (
-                <MenuItem key={option.id} value={option.id}>
-                    {option.name}
-                </MenuItem>
-            ))}
-        </Select>
-    </FormControl>,
-    <FormControl sx={{ width: 300 }}>
-        <InputLabel id="session-select">test</InputLabel>
-        <Select
-            value={selectedSessionIds}
-            label="sample"
-            multiple
-            labelId="session-select"
-        >
-            {sessions?.map((option) => (
-                <MenuItem key={option.sessionId} value={option.sessionId}>
-                    <Checkbox checked={selectedSessionIds?.indexOf(option.sessionId) > -1} />
-                    <Typography>{option.sessionName}</Typography>
-                </MenuItem>
-            ))}
-            <Box mt={1} boxShadow="0px -3px 3px #00000024" display="flex" justifyContent="center" pt={1} px={1}>
-                <Button category="primary-extended">
-                    Apply
-                </Button>
-            </Box>
-        </Select>
-    </FormControl>
-];
-
-const MainComponent = (
-    <Grid container>
-        <Grid item borderRight={1} lg={10}>
-            <Box p={6}>
-                <Box display="flex" alignItems="center">
-                    {InputSelections && InputSelections.map((select) => (
-                      select
-                    ))}
-                </Box>
-            </Box>
-            <Box p={6}>
-                <SortableTable
-                    headCells={MOCK_HEAD_CELLS}
-                    sortOrder="asc"
-                    sortByProperty="player"
-                    title="Player Table"
-                    tableData={MOCK_TABLE_DATA}
-        // @ts-ignore
-                    rowComponent={mockRowComponent}
-                />
-                <Pagination variant="text" color="primary" page={1} count={10} />
-            </Box>
-        </Grid>
-    
-        <Grid item lg={2}>
-            <Box p={6}>
-                <Typography variant="h5">{`${teamsToAdd.length} selected teams`}</Typography>
-                <Typography>{`This session allows a max of ${1} teams`}</Typography>
-                {teamsToAdd.map((team) => (
-                    <Paper key={team.id} sx={{ my: 1 }}>
-                        <Box p={2} display="flex">
-                            <Checkbox
-                                color="primary"
-                                checked={selectedTeamIds.indexOf(team.id) !== -1}
-                            />
-                            <Box ml={1}>
-                                <Typography>{team.name}</Typography>
-                                <Typography>{team.sessionName}</Typography>
-                            </Box>
-                        </Box>
-                    </Paper>
-                ))}
-            </Box>
-        </Grid>
-    </Grid>
-);
-
-// Default
-export default {
-  title: 'Organisms/Modals',
-};
-
-// Templates
-function FullPageModalTemplate(args: FullPageModalType) {
-  return (
-      <FullPageModal {...args}>
-          {MainComponent}
-      </FullPageModal>
-  );
-}
-
-// Stories
-export const FullPage = FullPageModalTemplate.bind({});
-FullPage.args = {
-  isOpen: true,
-  onClose: () => {},
-  pageTitle: 'Sample Page',
-  bottomCTAText: 'Add here!',
-  onBottomCTAClick: () => {},
-  onSecondaryBottomCTAClick: () => {},
-  secondaryBottomCTAText: 'skip',
-  isBottomCTAdisabled: false,
-};
+import React from 'react';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Checkbox from '@mui/material/Checkbox';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from 'stories/atoms/Typography/Typography';
+import Button from 'stories/atoms/Button/Button';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Pagination from '@mui/material/Pagination';
+import FullPageModal from "./FullPageModal";
+import SortableTable from "../Tables/SortableTable";
+import {
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
+} from "../Tables/mockData";
+
+import { FullPageModalType } from "./sharedTypes";
+
+// Fake data for rendering sections
+const conferences = [{ id: 1, name: 'philly' }, { id: 2, name: 'NJ' }, { id: 3, name: 'PA' }];
+const sessions = [{ sessionId: 1, sessionName: 'philly' }, { sessionId: 2, sessionName: 'NJ' }, { sessionId: 3, sessionName: 'PA' }];
+const selectedSessionIds = [1];
+const teamsToAdd = [{ id: 1, name: 'test', sessionName: 'test' }];
+const selectedTeamIds = [1];
+
+const InputSelections = [
+    <FormControl sx={{ width: 300, mr: 3 }}>
+        <InputLabel id="conference-select">Select Conference</InputLabel>
+        <Select
+            value={1 || ''}
+            label="Select Conference"
+            labelId="conference-select"
+        >
+            {conferences?.map((option) => (
+                <MenuItem key={option.id} value={option.id}>
+                    {option.name}
+                </MenuItem>
+            ))}
+        </Select>
+    </FormControl>,
+    <FormControl sx={{ width: 300 }}>
+        <InputLabel id="session-select">test</InputLabel>
+        <Select
+            value={selectedSessionIds}
+            label="sample"
+            multiple
+            labelId="session-select"
+        >
+            {sessions?.map((option) => (
+                <MenuItem key={option.sessionId} value={option.sessionId}>
+                    <Checkbox checked={selectedSessionIds?.indexOf(option.sessionId) > -1} />
+                    <Typography>{option.sessionName}</Typography>
+                </MenuItem>
+            ))}
+            <Box mt={1} boxShadow="0px -3px 3px #00000024" display="flex" justifyContent="center" pt={1} px={1}>
+                <Button category="primary-extended">
+                    Apply
+                </Button>
+            </Box>
+        </Select>
+    </FormControl>
+];
+
+const MainComponent = (
+    <Grid container>
+        <Grid item borderRight={1} lg={10}>
+            <Box p={6}>
+                <Box display="flex" alignItems="center">
+                    {InputSelections && InputSelections.map((select) => (
+                      select
+                    ))}
+                </Box>
+            </Box>
+            <Box p={6}>
+                <SortableTable
+                    headCells={MOCK_HEAD_CELLS}
+                    sortOrder="asc"
+                    sortByProperty="player"
+                    title="Player Table"
+                    tableData={MOCK_TABLE_DATA}
+        // @ts-ignore
+                    rowComponent={mockRowComponent}
+                />
+                <Pagination variant="text" color="primary" page={1} count={10} />
+            </Box>
+        </Grid>
+    
+        <Grid item lg={2}>
+            <Box p={6}>
+                <Typography variant="h5">{`${teamsToAdd.length} selected teams`}</Typography>
+                <Typography>{`This session allows a max of ${1} teams`}</Typography>
+                {teamsToAdd.map((team) => (
+                    <Paper key={team.id} sx={{ my: 1 }}>
+                        <Box p={2} display="flex">
+                            <Checkbox
+                                color="primary"
+                                checked={selectedTeamIds.indexOf(team.id) !== -1}
+                            />
+                            <Box ml={1}>
+                                <Typography>{team.name}</Typography>
+                                <Typography>{team.sessionName}</Typography>
+                            </Box>
+                        </Box>
+                    </Paper>
+                ))}
+            </Box>
+        </Grid>
+    </Grid>
+);
+
+// Default
+export default {
+  title: 'Organisms/Modals',
+};
+
+// Templates
+function FullPageModalTemplate(args: FullPageModalType) {
+  return (
+      <FullPageModal {...args}>
+          {MainComponent}
+      </FullPageModal>
+  );
+}
+
+// Stories
+export const FullPage = FullPageModalTemplate.bind({});
+FullPage.args = {
+  isOpen: true,
+  onClose: () => {},
+  pageTitle: 'Sample Page',
+  bottomCTAText: 'Add here!',
+  onBottomCTAClick: () => {},
+  onSecondaryBottomCTAClick: () => {},
+  secondaryBottomCTAText: 'skip',
+  isBottomCTAdisabled: false,
+};

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

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
-
-export type FullPageModalType = {
-    isOpen: boolean;
-    onClose: VoidFunction;
-    pageTitle: string;
-    children?:ReactNode;
-    bottomCTAText?: string;
-    secondaryBottomCTAText?: string;
-    onBottomCTAClick?: VoidFunction;
-    onSecondaryBottomCTAClick?: VoidFunction;
-    isSecondaryBottomCTAdisabled?: boolean;
-    isBottomCTAdisabled?: boolean;
-    PagePopupModal?: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export type FullPageModalType = {
+    isOpen: boolean;
+    onClose: VoidFunction;
+    pageTitle: string;
+    children?:ReactNode;
+    bottomCTAText?: string;
+    secondaryBottomCTAText?: string;
+    onBottomCTAClick?: VoidFunction;
+    onSecondaryBottomCTAClick?: VoidFunction;
+    isSecondaryBottomCTAdisabled?: boolean;
+    isBottomCTAdisabled?: boolean;
+    PagePopupModal?: ReactNode;
+}

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

@@ -1,92 +1,92 @@
-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';
-import { DrawCardTableProps } from './sharedTypes';
-
-const StyledHeader = styled(Grid)({
-  alignItems: 'center',
-  justifyContent: 'center',
-  display: 'flex',
-});
-
-const GridSections = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  padding: '8px'
-});
-
-const TableMobileSection = styled(Grid)`
-  flex-direction: column;
-`;
-
-export default function DrawCardTable({
-  headerRows,
-  tableRows,
-  isMobile,
-  ...props
-}: DrawCardTableProps) {
-  if (!headerRows || !tableRows) return null;
-  const totalColumns = Math.floor(12 / headerRows.length); 
-
-  const formatTableRows = tableRows.map((row, index) => {
-    if (index > 2) return; // Table can only support 3 columns 
-    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
-    const sectionAmount = tableRows[index].length;
-
-    return (
-        <Grid key={index} xs={totalColumns}>
-            {[...Array(sectionAmount)].map((section, idx) => (
-                <GridSections key={idx} sx={{ height: rowSectionsHeight }}>
-                    {row[idx]}
-                </GridSections>
-            ))}
-        </Grid>
-    );
-  });
-
-  const formatMobileRows = tableRows.map((row, index) => {
-    if (index > 2) return; // Table can only support 3 columns 
-
-    const headerRow = headerRows[index];
-    const sectionAmount = tableRows[index].length;
-    return (
-        <>
-            <Grid container sx={{ height: '60px', justifyContent: 'center' }}>
-                <StyledHeader>
-                    <Typography category="secondary" size="small-medium-cap">{headerRow.name}</Typography>
-                </StyledHeader>
-            </Grid>
-            <TableMobileSection container>
-                {[...Array(sectionAmount)].map((section, idx) => (
-                    <GridSections key={idx}>
-                        {row[idx]}
-                    </GridSections>
-                ))}
-            </TableMobileSection>
-        </>
-    );
-  });
-
-  const formatDesktopRows = (
-      <>  
-          <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>
-      </> 
-  );
-
-  return (
-      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
-          {isMobile ? formatMobileRows : formatDesktopRows}
-      </Box>
-  );
-}
+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';
+import { DrawCardTableProps } from './sharedTypes';
+
+const StyledHeader = styled(Grid)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+});
+
+const GridSections = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px'
+});
+
+const TableMobileSection = styled(Grid)`
+  flex-direction: column;
+`;
+
+export default function DrawCardTable({
+  headerRows,
+  tableRows,
+  isMobile,
+  ...props
+}: DrawCardTableProps) {
+  if (!headerRows || !tableRows) return null;
+  const totalColumns = Math.floor(12 / headerRows.length); 
+
+  const formatTableRows = tableRows.map((row, index) => {
+    if (index > 2) return; // Table can only support 3 columns 
+    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+
+    return (
+        <Grid key={index} xs={totalColumns}>
+            {[...Array(sectionAmount)].map((section, idx) => (
+                <GridSections key={idx} sx={{ height: rowSectionsHeight }}>
+                    {row[idx]}
+                </GridSections>
+            ))}
+        </Grid>
+    );
+  });
+
+  const formatMobileRows = tableRows.map((row, index) => {
+    if (index > 2) return; // Table can only support 3 columns 
+
+    const headerRow = headerRows[index];
+    const sectionAmount = tableRows[index].length;
+    return (
+        <>
+            <Grid container sx={{ height: '60px', justifyContent: 'center' }}>
+                <StyledHeader>
+                    <Typography category="secondary" size="small-medium-cap">{headerRow.name}</Typography>
+                </StyledHeader>
+            </Grid>
+            <TableMobileSection container>
+                {[...Array(sectionAmount)].map((section, idx) => (
+                    <GridSections key={idx}>
+                        {row[idx]}
+                    </GridSections>
+                ))}
+            </TableMobileSection>
+        </>
+    );
+  });
+
+  const formatDesktopRows = (
+      <>  
+          <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>
+      </> 
+  );
+
+  return (
+      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+          {isMobile ? formatMobileRows : formatDesktopRows}
+      </Box>
+  );
+}