@universal-tennis/ui-shared 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/components.jsx

@@ -9,3 +9,4 @@ export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
 
 // ORGANISMS 
+export { default as SortableTable } from './stories/organisms/SortableTable';

package/src/stories/atoms/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import React, { ReactElement } from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 
@@ -76,44 +76,44 @@ export default function Button({ children, category, ...props }: ButtonProps) {
   switch (category) {
     case 'primary':
       return (
-        <PrimaryButton
-          {...props}
-        >
-          {children}
-        </PrimaryButton>
+          <PrimaryButton
+              {...props}
+          >
+              {children}
+          </PrimaryButton>
       );
     case 'primary-expanded':
       return (
           <PrimaryButton
-            isExpanded
-            {...props}
+              isExpanded
+              {...props}
           >
-            {children}
+              {children}
           </PrimaryButton>
       );
     case 'secondary':
       return (
-        <SecondaryButton
-          {...props}
-        >
-          {children}
-        </SecondaryButton>
+          <SecondaryButton
+              {...props}
+          >
+              {children}
+          </SecondaryButton>
       );
     case 'link':
       return (
           <LinkButton
-            disableTouchRipple
-            {...props}
+              disableTouchRipple
+              {...props}
           >
-            {children}
+              {children}
           </LinkButton>
       );
     default: 
       return (
           <StyledButton
-            {...props}
+              {...props}
           >
-          {children}
+              {children}
           </StyledButton>
       );
   }

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,65 +84,102 @@ 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>
       );
   }
 }
+
+export const DISPLAY_SIZES_ENUM = {
+  XXXLarge: "XXX-large",
+  XXLarge: "XX-large",
+  XLarge: "X-large",
+  Large: 'large',
+  LargeLight: "large-light",
+  MediumBook: "medium-book",
+};
+
+export const PRIMARY_SIZES_ENUM = {
+  LargeBold: "large-bold",
+  LargeBook: "large-book",
+  LargeLight: "large-light",
+  MediumSemibold: "medium-semibold",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallBook: "small-book",
+  XSmallBook: "x-small-book",
+};
+
+export const SECONDARY_SIZES_ENUM = {
+  LargeMedium: "large-medium",
+  LargeBook: "large-book",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallMediumCap: "small-medium-cap",
+  SmallMedium: "small-medium",
+  SmallBook: "small-book",
+  XSmallMediumCap: "x-small-medium-cap",
+  XSmallMedium: "x-small-medium",
+  XSmallBookCap: "x-small-book-cap",
+  XSmallBook: "x-small-book",
+  XXSmallMediumCap: "xx-small-medium-cap",
+  XXSmallBook: "xx-small-book",
+};
+
+export const CATEGORY_ENUM = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DISPLAY: 'display'
+};

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

@@ -3,7 +3,7 @@ import React from 'react';
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
 import DrawCard from './DrawCard';
-import {DrawCardProps, TeamCardProps, ContactCardProps} from "./sharedTypes";
+import { DrawCardProps, TeamCardProps, ContactCardProps } from "./sharedTypes";
 
 // Default
 export default {
@@ -21,9 +21,9 @@ function TeamCardTemplate(args: TeamCardProps) {
 
 function DrawCardTemplate(args: DrawCardProps) {
   return (
-<div style={{width: '372px'}}>
-    <DrawCard {...args} /> 
-</div>
+      <div style={{ width: '372px' }}>
+          <DrawCard {...args} /> 
+      </div>
   );
 }
 
@@ -43,7 +43,7 @@ Team.args = {
 
 export const Draw = DrawCardTemplate.bind({});
 Draw.args = {
-  choices: [
+  options: [
     {
       id: 1,
       label: 'Team 1',
@@ -53,9 +53,9 @@ Draw.args = {
       label: 'Team 2',
     }
   ],
-  selectedTeams: {
-    teamOne: 1,
-    teamTwo: 2,
+  selectedOptions: {
+    optionOne: 1,
+    optionTwo: 2,
   },
   dateLabel: 'Dec 20 at 9:00am',
   locationLabel: 'Taube Tennis Center',

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

@@ -8,7 +8,7 @@ import Typography from '../../atoms/Typography/Typography';
 import ChatIcon from '../../assets/icon-chat-blue.svg';
 
 import { StyledCard } from './shared';
-import {ContactCardProps} from './sharedTypes';
+import { ContactCardProps } from './sharedTypes';
 
 export default function ContactCard({
   name, phone, email, onMessageClick, ...props 
@@ -18,30 +18,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/DrawCard.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import MuiSelect from '@mui/material/Select';
+import MuiSelect, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '../../atoms/Button/Button';
-import Typography from '../../atoms/Typography/Typography';
-import {DrawCardProps} from "./sharedTypes";
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import { DrawCardProps } from "./sharedTypes";
 
 const StyledCard = styled(Box)({
   display: 'flex',
@@ -29,74 +29,73 @@ const BottomGrid = styled(Box)({
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingTop: '32px',
-
 });
 
+const Positions = {
+  ONE: '1',
+  TWO: '2',
+};
+
 export default function DrawCard({
-  choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props
+  options, onChange, onEditClick, selectedOptions, dateLabel, locationLabel, ...props
 }: DrawCardProps) {
-  const {teamOne, teamTwo} = selectedTeams || null;
+  const { optionOne, optionTwo } = selectedOptions || null;
 
-  const handleOnTeamOneChange = () => {
+  const handleOnSelectionChange = (event: SelectChangeEvent<unknown>, position: string) => {
+    const id = event.target.value as string;
+    
     if (onChange) {
-      onChange(0);
-    }
-  };
-
-  const handleOnTeamTwoChange = () => {
-    if (onChange) {
-      onChange(1);
+      onChange({ position, id });
     }
   };
 
   return (
       <StyledCard
-        {...props}
+          {...props}
       >
           <StyledMuiSelect
-            labelId="draw-card-select-label-top"
-            id="draw-card-select-top"
-            value={teamOne}
-            label="teamOne"
-            onChange={handleOnTeamOneChange}
+              labelId="draw-card-select-label-top"
+              id="draw-card-select-top"
+              value={optionOne}
+              label="teamOne"
+              onChange={(e) => handleOnSelectionChange(e, Positions.ONE)}
           >
-            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+              {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
           </StyledMuiSelect>
 
-            <Box pt={1} />
-
+          <Box pt={1} />
           <StyledMuiSelect
-            labelId="draw-card-select-label-bot"
-            id="draw-card-select-bot"
-            value={teamTwo}
-            label="teamTwo"
-            onChange={handleOnTeamTwoChange}
+              labelId="draw-card-select-label-bot"
+              id="draw-card-select-bot"
+              value={optionTwo}
+              label="teamTwo"
+              onChange={(e) => handleOnSelectionChange(e, Positions.TWO)}
           >
-            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+              {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
           </StyledMuiSelect>
-        <BottomGrid> 
+          <BottomGrid> 
 
-            <Box>
-          <Typography category="secondary" size="small-book">
-            {dateLabel}
-          </Typography>
-          <Typography category="secondary" size="small-book">
-            {locationLabel}
-          </Typography>
-            </Box>
-            <Button
-              style={{
-                display: 'flex',
-                justifyContent: 'end'
-              }}
-              onClick={onEditClick}
-              category="link"
-            >
-                <Typography category="secondary" size="x-small-medium-cap">
-                Edit
-                </Typography>
-            </Button>
-        </BottomGrid>
+              <Box>
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.SmallBook}>
+                      {dateLabel}
+                  </Typography>
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.SmallBook}>
+                      {locationLabel}
+                  </Typography>
+              </Box>
+              <Button
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'end'
+                  }}
+                  onClick={onEditClick}
+                  category="link"
+              >
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
+                      Edit
+                  </Typography>
+              </Button>
+          </BottomGrid>
       </StyledCard>
   );
 }

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

@@ -2,15 +2,13 @@ import React from 'react';
 
 import Typography from '../../atoms/Typography/Typography';
 import { StyledCard } from './shared';
-import {TeamCardProps} from './sharedTypes';
+import { TeamCardProps } from './sharedTypes';
 
 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/molecules/Cards/sharedTypes.ts

@@ -1,22 +1,27 @@
 // Card types
 
-type SelectedTeams = {
-    teamOne: number;
-    teamTwo: number;
+type SelectedOptions = {
+    optionOne: number;
+    optionTwo: number;
 }
 
-type Choices = {
+type Options = {
     id: number;
     label: string;
 }[];
 
+type OnChangeArgs = {
+  position: string;
+  id: string;
+}
+
 export type DrawCardProps = {
-    choices: Choices;
-    selectedTeams: SelectedTeams;
+    options: Options;
+    selectedOptions: SelectedOptions;
     dateLabel: string;
     locationLabel: string;
     onEditClick?: VoidFunction;
-    onChange?: (arg0: number) => null;
+    onChange?: ({ position, id }: OnChangeArgs) => null;
   }
 
 export interface TeamCardProps {

package/src/stories/organisms/DrawCardTable.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
 import Typography from '../atoms/Typography/Typography';
-import {DrawCardTableProps} from './sharedTypes';
+import { DrawCardTableProps } from './sharedTypes';
 
 const StyledHeader = styled(Grid)({
   alignItems: 'center',
@@ -30,28 +29,28 @@ export default function DrawCardTable({
     const sectionAmount = tableRows[index].length;
 
     return (
-      <Grid xs={totalColumns}>
-        {[...Array(sectionAmount)].map((section, idx) => (
-            <GridSections sx={{height: rowSectionsWidth}}>
-              {row[idx]}
-            </GridSections>
-        ))}
-      </Grid>
+        <Grid key={index} xs={totalColumns}>
+            {[...Array(sectionAmount)].map((section, idx) => (
+                <GridSections key={idx} sx={{ height: rowSectionsWidth }}>
+                    {row[idx]}
+                </GridSections>
+            ))}
+        </Grid>
     );
   });
 
   return (
-    <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
-      <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>
-    </Box>
+      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+          <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>
+      </Box>
   );
 }