@universal-tennis/ui-shared 0.1.2 → 0.1.4

package/src/stories/organisms/SortableTable.tsx

@@ -0,0 +1,110 @@
+import React, { ComponentType, SyntheticEvent } from "react";
+
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import MuiTableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import Toolbar from "@mui/material/Toolbar";
+import Paper from "@mui/material/Paper";
+
+import { TableData } from "types/tableDataTypes";
+import Typography from '../atoms/Typography/Typography';
+
+type Order = 'asc' | 'desc';
+type OrderProperty = string | number;
+
+interface HeadCell {
+  id: string;
+  label?: string;
+  isSortingDisabled: boolean
+}
+
+export type SortableTableProps = {
+    headCells: Array<HeadCell>;
+    tableData: Array<TableData>;
+    sortOrder: Order;
+    sortByProperty: OrderProperty;
+    rowComponent: ComponentType<{rowData: TableData, labelId: string}>;
+    title?: string;
+    onOrderPropertyChange: (property: OrderProperty) => VoidFunction
+}
+
+function SortableTable({
+  headCells,
+  tableData,
+  rowComponent,
+  sortOrder,
+  sortByProperty,
+  title = '',
+  onOrderPropertyChange,
+}: SortableTableProps) {
+  const TableRow = rowComponent;
+
+  const handleRequestSort = (property: OrderProperty) => (event: SyntheticEvent) => {
+    event.preventDefault();
+    onOrderPropertyChange(property);
+  };
+
+  return (
+      <Paper sx={{ width: "100%", mb: 2 }}>
+          {title && (
+          <Toolbar sx={{ pl: { sm: 2 }, pr: { xs: 1, sm: 1 } }}>
+              <Typography
+                  category="secondary"
+                  size="large-medium"
+                  id="tableTitle"
+              >
+                  {title}
+              </Typography>
+          </Toolbar>
+          )}
+          <TableContainer>
+              <Table
+                  sx={{ minWidth: 750 }}
+                  aria-labelledby="tableTitle"
+                  size="medium"
+              >
+                  <TableHead>
+                      <MuiTableRow>
+                          {headCells.map((headCell) => (
+                              <TableCell
+                                  key={headCell.id}
+                                  align="left"
+                                  padding="normal"
+                                  sortDirection={sortByProperty === headCell.id ? sortOrder : false}
+                              >
+                                  <TableSortLabel
+                                      disabled={headCell.isSortingDisabled}
+                                      hideSortIcon={!headCell?.label}
+                                      active={sortByProperty === headCell.id}
+                                      direction={sortByProperty === headCell.id ? sortOrder : 'asc'}
+                                      onClick={handleRequestSort(headCell.id)}
+                                  >
+                                      {headCell?.label}
+                                  </TableSortLabel>
+                              </TableCell>
+                          ))}
+                      </MuiTableRow>
+                  </TableHead>
+                  <TableBody>
+                      {tableData && tableData.map((data: TableData, index: number) => {
+                        const labelId = `table-${index}`;
+                        return (
+                            <TableRow
+                                key={data.id}
+                                rowData={data}
+                                labelId={labelId}
+                            />
+                        );
+                      })}
+                  </TableBody>
+              </Table>
+          </TableContainer>
+      </Paper>
+  );
+}
+
+export default SortableTable;

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

@@ -1,10 +1,80 @@
 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';
+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 = {
-  choices: [
+  options: [
     {
       id: 1,
       label: 'Team 1',
@@ -14,9 +84,9 @@ const SAMPLE_CARD_DATA = {
       label: 'Team 2',
     }
   ],
-  selectedTeams: {
-    teamOne: 1,
-    teamTwo: 2,
+  selectedOptions: {
+    optionOne: 1,
+    optionTwo: 2,
   },
   dateLabel: 'Dec 20 at 9:00am',
   locationLabel: 'Taube Tennis Center',
@@ -33,9 +103,9 @@ function DrawCardTableTemplate(args: DrawCardTableProps) {
 }
 
 const headerRows = [
-  {name: 'Round 1' },
-  {name: 'Quarterfinal' },
-  {name: 'SemiFinal' },
+  { name: 'Round 1' },
+  { name: 'Quarterfinal' },
+  { name: 'SemiFinal' },
 ];
 
 const tableRows = [
@@ -56,8 +126,8 @@ const tableRows = [
       <DrawCard {...SAMPLE_CARD_DATA} />,
   ],
   [      
-        <DrawCard {...SAMPLE_CARD_DATA} />,
-        <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
   ],
 ];
 
@@ -67,3 +137,14 @@ DrawTable.args = {
   headerRows,
   tableRows,
 };
+
+export const SortableTable = DrawCardTableTemplate.bind({});
+SortableTable.args = {
+  headCells,
+  sortOrder: 'asc',
+  sortByProperty: 'player',
+  title: 'Player Table',
+  tableData,
+  rowComponent,
+  onOrderPropertyChange,
+};

package/src/types/tableDataTypes.ts

@@ -0,0 +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

package/tsconfig.json

@@ -1,25 +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,
+        "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",
-    ],
+    "exclude": ["node_modules"],
     "include": ["src", "src/custom.d.ts"]
-  }
+}

package/workflows/package-release-1.yml

@@ -1,10 +1,10 @@
 trigger:
   tags:
     include:
-    - '*'
+    - '0/*'
   branches:
-    exclude:
-    - '*'
+    include:
+    - 'master'
 
 pool:
   vmImage: ubuntu-latest