@universal-tennis/ui-shared 0.1.4 → 0.1.6

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

@@ -0,0 +1,137 @@
+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!',
+  handleBottomCTAClick: () => {},
+  isBottomCTAdisabled: false,
+  // PagePopupModal,
+};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export type FullPageModalType = {
+    isOpen: boolean;
+    onClose: VoidFunction;
+    pageTitle: string;
+    children?:ReactNode;
+    bottomCTAText?: string;
+    handleBottomCTAClick?: VoidFunction;
+    isBottomCTAdisabled?: boolean;
+    PagePopupModal?: ReactNode;
+}

package/src/stories/organisms/{DrawCardTable.tsx → Tables/DrawCardTable.tsx}

@@ -2,7 +2,7 @@ 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 Typography from '../../atoms/Typography/Typography';
 import { DrawCardTableProps } from './sharedTypes';
 
 const StyledHeader = styled(Grid)({

package/src/stories/organisms/{SortableTable.tsx → Tables/SortableTable.tsx}

@@ -11,7 +11,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Paper from "@mui/material/Paper";
 
 import { TableData } from "types/tableDataTypes";
-import Typography from '../atoms/Typography/Typography';
+import Typography from '../../atoms/Typography/Typography';
 
 type Order = 'asc' | 'desc';
 type OrderProperty = string | number;
@@ -29,7 +29,7 @@ export type SortableTableProps = {
     sortByProperty: OrderProperty;
     rowComponent: ComponentType<{rowData: TableData, labelId: string}>;
     title?: string;
-    onOrderPropertyChange: (property: OrderProperty) => VoidFunction
+    onOrderPropertyChange?: (property: OrderProperty) => VoidFunction
 }
 
 function SortableTable({
@@ -45,7 +45,9 @@ function SortableTable({
 
   const handleRequestSort = (property: OrderProperty) => (event: SyntheticEvent) => {
     event.preventDefault();
-    onOrderPropertyChange(property);
+    if (onOrderPropertyChange) {
+      onOrderPropertyChange(property);
+    }
   };
 
   return (

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import DrawCard from '../../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+import { DrawCardTableProps } from './sharedTypes';
+import {
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA 
+} from './mockData';
+
+const onOrderPropertyChange = () => {};
+
+// Default
+export default {
+  title: 'Organisms/Tables',
+};
+
+// Templates
+function DrawCardTableTemplate(args: DrawCardTableProps) {
+  return <DrawCardTable {...args} />;
+}
+
+const headerRows = [
+  { name: 'Round 1' },
+  { name: 'Quarterfinal' },
+  { name: 'SemiFinal' },
+];
+
+const tableRows = [
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+];
+
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+  headerRows,
+  tableRows,
+};
+
+export const SortableTable = DrawCardTableTemplate.bind({});
+SortableTable.args = {
+  headCells: MOCK_HEAD_CELLS,
+  sortOrder: 'asc',
+  sortByProperty: 'player',
+  title: 'Player Table',
+  tableData: MOCK_TABLE_DATA,
+  rowComponent: mockRowComponent,
+  onOrderPropertyChange,
+};

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

@@ -0,0 +1,93 @@
+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;
+  }
+  
+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,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+};

package/src/types/tableDataTypes.ts

@@ -23,15 +23,15 @@ export interface Captain {
 
 export interface AddTeamsData {
     id: number;
-    name: string;
-    teamMemberCount: number;
-    captains: Array<Captain>;
-    sessionId: number;
-    sessionName: string;
-    sessionStartDateUtc: string;
-    sessionEndDateUtc: string;
-    wins: number;
-    losses: 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;

package/dist/stories/organisms/DrawCardTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawCardTable.js","sourceRoot":"","sources":["../../../src/stories/organisms/DrawCardTable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAGxD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAIjB;QAJiB,EACpC,UAAU,EACV,SAAS,OAEU,EADhB,KAAK,cAH4B,2BAIrC,CADS;IAER,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACnD,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;QAC7D,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;QAE9C,OAAO,CACH,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,IAC7B,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,oBAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,IACnD,GAAG,CAAC,GAAG,CAAC,CACE,CAClB,CAAC,CACC,CACV,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,oBAAC,GAAG,oBAAK,KAAK,IAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,gBAAa,YAAY;QACxD,oBAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IACjC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,oBAAC,YAAY,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY;YACzC,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,kBAAkB,IAAE,GAAG,CAAC,IAAI,CAAc,CACrE,CAClB,CAAC,CACC;QACP,oBAAC,IAAI,IAAC,SAAS,UACV,eAAe,CACb,CACL,CACT,CAAC;AACJ,CAAC"}

package/dist/stories/organisms/SortableTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../../../src/stories/organisms/SortableTable.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/Tables.stories.js

@@ -1,117 +0,0 @@
-import React from 'react';
-import { TableRow, TableCell, Typography } from '@mui/material';
-import DrawCard from '../molecules/Cards/DrawCard';
-import DrawCardTable from './DrawCardTable';
-const rowComponent = ({ rowData, labelId }) => {
-    const { player, session, team } = rowData;
-    return (React.createElement(TableRow, null,
-        React.createElement(TableCell, { component: "th", id: labelId, scope: "row", padding: "normal" },
-            React.createElement(Typography, null, player)),
-        React.createElement(TableCell, { align: "left" },
-            React.createElement(Typography, null, team)),
-        React.createElement(TableCell, { align: "left" },
-            React.createElement(Typography, null, session))));
-};
-const headCells = [
-    { id: 'player', label: 'Player Name', isSortingDisabled: false },
-    { id: 'team', label: 'Team Name', isSortingDisabled: true },
-    { id: 'session', label: 'Session', isSortingDisabled: false }
-];
-const tableData = [
-    {
-        player: 'John Smith',
-        team: 'Mavericks',
-        session: 'NorCal Adults',
-    },
-    {
-        player: 'Megan Brown',
-        team: 'Mini Mavericks',
-        session: 'SoCal Juniors',
-    },
-    {
-        player: 'George Fox',
-        team: 'Grey Foxes',
-        session: 'North Bay Junios',
-    },
-    {
-        player: 'Alison Green',
-        team: 'Lions',
-        session: 'Outer Bay UTR 2-5',
-    },
-    {
-        player: 'Linda Belinda',
-        team: 'Green Hornets',
-        session: 'Tri-State UTR 1-3',
-    },
-];
-const onOrderPropertyChange = () => { };
-const SAMPLE_CARD_DATA = {
-    options: [
-        {
-            id: 1,
-            label: 'Team 1',
-        },
-        {
-            id: 2,
-            label: 'Team 2',
-        }
-    ],
-    selectedOptions: {
-        optionOne: 1,
-        optionTwo: 2,
-    },
-    dateLabel: 'Dec 20 at 9:00am',
-    locationLabel: 'Taube Tennis Center',
-};
-// Default
-export default {
-    title: 'Organisms/Tables',
-};
-// Templates
-function DrawCardTableTemplate(args) {
-    return React.createElement(DrawCardTable, Object.assign({}, args));
-}
-const headerRows = [
-    { name: 'Round 1' },
-    { name: 'Quarterfinal' },
-    { name: 'SemiFinal' },
-];
-const tableRows = [
-    [
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-    ],
-    [
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-    ],
-    [
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
-    ],
-];
-// Stories
-export const DrawTable = DrawCardTableTemplate.bind({});
-DrawTable.args = {
-    headerRows,
-    tableRows,
-};
-export const SortableTable = DrawCardTableTemplate.bind({});
-SortableTable.args = {
-    headCells,
-    sortOrder: 'asc',
-    sortByProperty: 'player',
-    title: 'Player Table',
-    tableData,
-    rowComponent,
-    onOrderPropertyChange,
-};
-//# sourceMappingURL=Tables.stories.js.map

package/dist/stories/organisms/Tables.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../src/stories/organisms/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAc5C,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAY,EAAE,EAAE;IACtD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1C,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,SAAS,IACN,SAAS,EAAC,IAAI,EACd,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,QAAQ;YAEhB,oBAAC,UAAU,QAAE,MAAM,CAAc,CACzB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,IAAI,CAAc,CACvB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,OAAO,CAAc,CAC1B,CACL,CAEd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE;IAC3D,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE;CAAC,CAAC;AAEjE,MAAM,SAAS,GAAG;IAChB;QACE,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,kBAAkB;KAC5B;IACD;QACE,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB;KAC7B;IACD;QACE,MAAM,EAAE,eAAe;QACvB,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAEvC,MAAM,gBAAgB,GAAG;IACvB,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;KACb;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF,UAAU;AACV,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,YAAY;AACZ,SAAS,qBAAqB,CAAC,IAAwB;IACrD,OAAO,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,IAAI,EAAE,SAAS,EAAE;IACnB,EAAE,IAAI,EAAE,cAAc,EAAE;IACxB,EAAE,IAAI,EAAE,WAAW,EAAE;CACtB,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;CACF,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,SAAS,CAAC,IAAI,GAAG;IACf,UAAU;IACV,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,aAAa,CAAC,IAAI,GAAG;IACnB,SAAS;IACT,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,cAAc;IACrB,SAAS;IACT,YAAY;IACZ,qBAAqB;CACtB,CAAC"}

package/dist/stories/organisms/sharedTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../src/stories/organisms/sharedTypes.ts"],"names":[],"mappings":""}

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

@@ -1,150 +0,0 @@
-import React from 'react';
-import { TableRow, TableCell, Typography } from '@mui/material';
-import DrawCard from '../molecules/Cards/DrawCard';
-import DrawCardTable from './DrawCardTable';
-import { DrawCardTableProps } from './sharedTypes';
-
-interface RowData {
-  player: string;
-  team: string;
-  session: string;
-}
-
-interface RowProps {
-  rowData: RowData,
-  labelId: string;
-}
-
-const rowComponent = ({ 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>
-    
-  );
-};
-
-const headCells = [
-  { id: 'player', label: 'Player Name', isSortingDisabled: false }, 
-  { id: 'team', label: 'Team Name', isSortingDisabled: true },
-  { id: 'session', label: 'Session', isSortingDisabled: false }];
-
-const tableData = [
-  {
-    player: 'John Smith',
-    team: 'Mavericks',
-    session: 'NorCal Adults',
-  },
-  {
-    player: 'Megan Brown',
-    team: 'Mini Mavericks',
-    session: 'SoCal Juniors',
-  }, 
-  {
-    player: 'George Fox',
-    team: 'Grey Foxes',
-    session: 'North Bay Junios',
-  }, 
-  {
-    player: 'Alison Green',
-    team: 'Lions',
-    session: 'Outer Bay UTR 2-5',
-  },
-  {
-    player: 'Linda Belinda',
-    team: 'Green Hornets',
-    session: 'Tri-State UTR 1-3',
-  },
-];
-
-const onOrderPropertyChange = () => {};
-
-const SAMPLE_CARD_DATA = {
-  options: [
-    {
-      id: 1,
-      label: 'Team 1',
-    },
-    {
-      id: 2,
-      label: 'Team 2',
-    }
-  ],
-  selectedOptions: {
-    optionOne: 1,
-    optionTwo: 2,
-  },
-  dateLabel: 'Dec 20 at 9:00am',
-  locationLabel: 'Taube Tennis Center',
-};
-
-// Default
-export default {
-  title: 'Organisms/Tables',
-};
-
-// Templates
-function DrawCardTableTemplate(args: DrawCardTableProps) {
-  return <DrawCardTable {...args} />;
-}
-
-const headerRows = [
-  { name: 'Round 1' },
-  { name: 'Quarterfinal' },
-  { name: 'SemiFinal' },
-];
-
-const tableRows = [
-  [      
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-  ],
-  [      
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-  ],
-  [      
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-      <DrawCard {...SAMPLE_CARD_DATA} />,
-  ],
-];
-
-// Stories
-export const DrawTable = DrawCardTableTemplate.bind({});
-DrawTable.args = {
-  headerRows,
-  tableRows,
-};
-
-export const SortableTable = DrawCardTableTemplate.bind({});
-SortableTable.args = {
-  headCells,
-  sortOrder: 'asc',
-  sortByProperty: 'player',
-  title: 'Player Table',
-  tableData,
-  rowComponent,
-  onOrderPropertyChange,
-};