@universal-tennis/ui-shared 0.1.2 → 0.1.3

package/src/stories/atoms/Typography/Typography.tsx

@@ -1,16 +1,10 @@
-import React, {ReactElement} from 'react';
-import MuiTypography from '@mui/material/Typography';
+import React from 'react';
+import MuiTypography, { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import "../../assets/css/typography.css";
 
-type TypographyProps = {
-  children: string | ReactElement;
+interface TypographyProps extends MuiTypographyProps {
   category?: string;
-  size?: string;
-  style?: React.CSSProperties;
-}
-
-type MuiTypographyProps = {
   size?: string;
   isCap?: boolean;
   weight?: number;
@@ -52,23 +46,29 @@ const SECONDARY_SIZES = {
   "xx-small-book": '10px',
 };
 
-const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+const DisplayTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ size, weight }: TypographyProps) => ({
   fontFamily: 'var(--display-font)',
-  fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
-  fontWeight: props.weight
+  fontSize: DISPLAY_SIZES[size as keyof typeof DISPLAY_SIZES],
+  fontWeight: weight
 }));
 
-const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+const PrimaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ size, weight }: TypographyProps) => ({
   fontFamily: 'var(--primary-font)',
-  fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
-  fontWeight: props.weight
+  fontSize: PRIMARY_SIZES[size as keyof typeof PRIMARY_SIZES],
+  fontWeight: weight
 }));
 
-const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+const SecondaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ isCap, weight, size }: TypographyProps) => ({
   fontFamily: 'var(--secondary-font)',
-  fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
-  textTransform: props.isCap ? 'uppercase' : 'inherit',
-  fontWeight: props.weight
+  fontSize: SECONDARY_SIZES[size as keyof typeof SECONDARY_SIZES],
+  textTransform: isCap ? 'uppercase' : 'inherit',
+  fontWeight: weight
 }));
 
 export default function Typography({
@@ -84,64 +84,59 @@ export default function Typography({
     case size?.includes("book"):
       weight = 400;
       break;
-  
     case size?.includes("medium"):
       weight = 500;
       break;
-
     case size?.includes("semibold"):
       weight = 600;
       break;
-
     case size?.includes("bold"):
       weight = 700;
-      
       break;
     default:
       weight = 500;
-
       break;
   }
 
   switch (category) {
     case 'primary':
       return (
-        <PrimaryTypography
-          size={size}
-          {...props}
-        >
-          {children}
-        </PrimaryTypography>
+          <PrimaryTypography
+              size={size}
+              {...props}
+          >
+              {children}
+          </PrimaryTypography>
       );
     case 'secondary':
       return (
-        <SecondaryTypography
-          size={size}
-          isCap={isCap}
-          weight={weight}
-          {...props}
-        >
-          {children}
-        </SecondaryTypography>
+          <SecondaryTypography
+              size={size}
+              isCap={isCap}
+              weight={weight}
+              {...props}
+          >
+              {children}
+          </SecondaryTypography>
       );
     case 'display':
       return (
-        <DisplayTypography
-          size={size}
-          weight={weight}
-          {...props}
-        >
-          {children}
-        </DisplayTypography>
+          <DisplayTypography
+              size={size}
+              weight={weight}
+              {...props}
+          >
+              {children}
+          </DisplayTypography>
       );
     default: 
       return (
           <PrimaryTypography
-            size={size}
-            weight={weight}
-            {...props}
+              size={size}
+              weight={weight}
+              {...props}
           >
-          {children}
+              {children}
           </PrimaryTypography>
       );
   }

package/src/stories/molecules/Cards/Cards.stories.tsx

@@ -2,8 +2,19 @@ import React from 'react';
 
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
-import DrawCard from './DrawCard';
-import {DrawCardProps, TeamCardProps, ContactCardProps} from "./sharedTypes";
+
+// Prop types
+interface ContactCardProps {
+  name: string;
+  phone: string;
+  email: string;
+  handleOnMessageClick?: VoidFunction;
+}
+
+interface TeamCardProps {
+  title: string; 
+  description: string;
+}
 
 // Default
 export default {
@@ -19,14 +30,6 @@ function TeamCardTemplate(args: TeamCardProps) {
   return <TeamCard {...args} />;  
 }
 
-function DrawCardTemplate(args: DrawCardProps) {
-  return (
-<div style={{width: '372px'}}>
-    <DrawCard {...args} /> 
-</div>
-  );
-}
-
 // Stories
 export const Contact = ContactCardTemplate.bind({});
 Contact.args = {
@@ -40,23 +43,3 @@ Team.args = {
   title: 'team 1',
   description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
 };
-
-export const Draw = DrawCardTemplate.bind({});
-Draw.args = {
-  choices: [
-    {
-      id: 1,
-      label: 'Team 1',
-    },
-    {
-      id: 2,
-      label: 'Team 2',
-    }
-  ],
-  selectedTeams: {
-    teamOne: 1,
-    teamTwo: 2,
-  },
-  dateLabel: 'Dec 20 at 9:00am',
-  locationLabel: 'Taube Tennis Center',
-};

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -8,7 +8,13 @@ import Typography from '../../atoms/Typography/Typography';
 import ChatIcon from '../../assets/icon-chat-blue.svg';
 
 import { StyledCard } from './shared';
-import {ContactCardProps} from './sharedTypes';
+
+type ContactCardProps = {
+  name: string;
+  phone: string;
+  email: string;
+  onMessageClick?: VoidFunction;
+}
 
 export default function ContactCard({
   name, phone, email, onMessageClick, ...props 
@@ -18,30 +24,28 @@ export default function ContactCard({
   const phoneNumber = parsedNumber?.formatInternational();
 
   return (
-      <StyledCard
-        {...props}
-      >
-        <Typography style={{marginBottom: '8px'}} category="secondary" size="medium-medium">{name}</Typography>
-        {phoneNumber && (
-        <Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`tel:${phone}`}>
-          <LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
-          <Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
-        </Link>
-        )}
-        {email && (
-        <Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`mailto:${email}`}>
-            <EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
-            <Typography category="secondary" size="x-small-book">{email}</Typography>
-        </Link>
-        )}
-        <Button onClick={onMessageClick} category="link" style={{marginTop: '8px'}}>
-          <>
-            <img src={ChatIcon} alt="message" style={{width: '20px'}} />
-            <Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">
-                {`Message ${firstName}`}
-            </Typography>
-          </>
-        </Button>
+      <StyledCard {...props}>
+          <Typography style={{ marginBottom: '8px' }} category="secondary" size="medium-medium">{name}</Typography>
+          {phoneNumber && (
+          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`tel:${phone}`}>
+              <LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+              <Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
+          </Link>
+          )}
+          {email && (
+          <Link sx={{ display: 'flex' }} mt={1} fontSize={14} href={`mailto:${email}`}>
+              <EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+              <Typography category="secondary" size="x-small-book">{email}</Typography>
+          </Link>
+          )}
+          <Button onClick={onMessageClick} category="link" style={{ marginTop: '8px' }}>
+              <>
+                  <img src={ChatIcon} alt="message" style={{ width: '20px' }} />
+                  <Typography style={{ paddingLeft: '8px' }} category="secondary" size="x-small-book">
+                      {`Message ${firstName}`}
+                  </Typography>
+              </>
+          </Button>
       </StyledCard>
   );
 }

package/src/stories/molecules/Cards/TeamCard.tsx

@@ -2,15 +2,17 @@ import React from 'react';
 
 import Typography from '../../atoms/Typography/Typography';
 import { StyledCard } from './shared';
-import {TeamCardProps} from './sharedTypes';
+
+type TeamCardProps = {
+  title: string;
+  description: string;
+}
 
 export default function TeamCard({ title, description, ...props }: TeamCardProps) {
   return (
-      <StyledCard
-        {...props}
-      >
-        <Typography category="secondary" size="medium-medium">{title}</Typography>
-        <Typography category="secondary" size="x-small-book">{description}</Typography>
+      <StyledCard {...props}>
+          <Typography category="secondary" size="medium-medium">{title}</Typography>
+          <Typography category="secondary" size="x-small-book">{description}</Typography>
       </StyledCard>
   );
 }

package/src/stories/oraganisms/SortableTable.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { TableRow, TableCell, Typography } from '@mui/material';
+
+import SortableTable, { SortableTableProps } from './SortableTable';
+
+// Default
+export default {
+  title: 'Organisms/SortableTable',
+};
+
+// Templates
+function SortableTableTemplate(args: SortableTableProps) {
+  return <SortableTable {...args} />;  
+}
+
+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 = () => {};
+
+// Stories
+
+const args = {
+  headCells,
+  sortOrder: 'asc',
+  sortByProperty: 'player',
+  title: 'Player Table',
+  tableData,
+  rowComponent,
+  onOrderPropertyChange,
+};
+
+export const DefaultTable = SortableTableTemplate.bind({});
+DefaultTable.args = args;

package/src/stories/oraganisms/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/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

@@ -2,9 +2,6 @@ trigger:
   tags:
     include:
     - '*'
-  branches:
-    exclude:
-    - '*'
 
 pool:
   vmImage: ubuntu-latest

package/.storybook/variables.css

@@ -1,12 +0,0 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --darkest-grey: #3b4859;
-    --cool-grey-600: #A7B2C1;
-    --cool-grey-300: #DDE3EB;
-    --cool-grey-150: #F0F4F9;
-    }

package/dist/stories/molecules/Cards/DrawCard.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { DrawCardProps } from "./sharedTypes";
-export default function DrawCard({ choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props }: DrawCardProps): JSX.Element;