@universal-tennis/ui-shared 0.1.95 → 0.1.98

package/src/stories/organisms/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -1,202 +1,210 @@
-import React from 'react';
-
-import GlobalNavigation, { GlobalNavigationProps } from './GlobalNavigation';
-
-// Default
-export default {
-  title: 'Organisms/GlobalNavigation',
-};
-
-// Templates
-function GlobalNavigationTemplate(args: GlobalNavigationProps) {
-  return <GlobalNavigation {...args} />;  
-}
-
-const tennisGlobalNavItems = [
-  {
-    label: 'Flex leagues',
-    filterType: 'flexLeagues',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Adult Team Tennis',
-    filterType: 1,
-    sportType: 'tennis',
-    isLeagues: true
-  },
-  {
-    label: 'Junior Team Tennis',
-    filterType: 3,
-    sportType: 'tennis',
-    isLeagues: true
-  },
-  {
-    label: 'UTR pro tennis tour',
-    filterType: 'proTennisTour',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Paid hits',
-    filterType: 'paidHits',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Paid hitters',
-    filterType: 'paidHitClubs',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Junior circuits',
-    filterType: 'juniorCircuits',
-    sportType: 'tennis'
-  },
-  {
-    label: 'College circuits',
-    filterType: 'collegeCircuits',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Junior regionals',
-    filterType: 'juniorRegionals',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Camps',
-    filterType: 'camps',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Clubs',
-    filterType: 'clubs',
-    sportType: 'tennis,pickleball'
-  },
-  {
-    label: 'High schools',
-    filterType: 'highSchools',
-    sportType: 'tennis'
-  },
-  {
-    label: 'Colleges',
-    filterType: 'colleges',
-    sportType: 'tennis'
-  }
-];
-
-const pickleballGlobalNavItems = [
-  {
-    label: 'Flex leagues',
-    filterType: 'flexLeagues',
-    sportType: 'pickleball',
-  },
-  {
-    label: 'Golden Ticket',
-    filterType: 'events',
-    data: { 'Golden Ticket': true },
-    sportType: 'pickleball',
-  },
-  {
-    label: 'APP',
-    filterType: 'app',
-    sportType: 'pickleball',
-  },
-  {
-    label: 'USAP',
-    filterType: 'usap',
-    sportType: 'pickleball',
-  },
-  {
-    label: 'Adult team pickleball',
-    filterType: 6,
-    sportType: 'pickleball',
-    isLeagues: true,
-  },
-  {
-    label: 'Junior team pickleball',
-    filterType: 7,
-    sportType: 'pickleball',
-    isLeagues: true,
-  },
-  {
-    label: 'Clubs',
-    filterType: 'clubs',
-    sportType: 'tennis,pickleball'
-  }
-];
-
-const LeagueTypes = {
-  UT_ADULT_TEAM_PICKLEBALL: 6,
-  UT_JUNIOR_TEAM_PICKLEBALL: 7,
-};
-
-const onTeamLeagueSearchClick = (item: { filterType: string; sportType?: string; }) => {
-  console.log(`Team League Search Clicked: Filter Type - ${item?.filterType}, Sport Type - ${item?.sportType}`);
-};
-
-const onTypeFilterClick = (item: { filterType: string; sportType?: string; }) => {
-  console.log(`Type Filter Clicked: Filter Type - ${item?.filterType}, Sport Type - ${item?.sportType}`);
-};
-
-// Stories
-export const GlobalNav = GlobalNavigationTemplate.bind({});
-GlobalNav.args = {
-  showTennisItems: true,
-  showPickleballItems: true,
-  isAdultTeamPickleballEnabled: true,
-  isJuniorTeamPickleballEnabled: true,
-  tennisNavItems: tennisGlobalNavItems,
-  pickleballNavItems: pickleballGlobalNavItems,
-  onTeamLeagueSearchClick,
-  onTypeFilterClick  
-};
-
-export const TennisOnly = GlobalNavigationTemplate.bind({});
-TennisOnly.args = {
-  showTennisItems: true,
-  showPickleballItems: false,
-  isAdultTeamPickleballEnabled: true,
-  isJuniorTeamPickleballEnabled: true,
-  leagueTypes: LeagueTypes,
-  tennisNavItems: tennisGlobalNavItems,
-  pickleballNavItems: pickleballGlobalNavItems,
-  onTeamLeagueSearchClick,
-  onTypeFilterClick  
-};
-
-export const PickleballOnly = GlobalNavigationTemplate.bind({});
-PickleballOnly.args = {
-  showTennisItems: false,
-  showPickleballItems: true,
-  isAdultTeamPickleballEnabled: true,
-  isJuniorTeamPickleballEnabled: true,
-  leagueTypes: LeagueTypes,
-  tennisNavItems: tennisGlobalNavItems,
-  pickleballNavItems: pickleballGlobalNavItems,
-  onTeamLeagueSearchClick,
-  onTypeFilterClick  
-};
-
-export const AdultTeamPickleballDisabled = GlobalNavigationTemplate.bind({});
-AdultTeamPickleballDisabled.args = {
-  showTennisItems: false,
-  showPickleballItems: true,
-  isAdultTeamPickleballEnabled: false,
-  isJuniorTeamPickleballEnabled: true,
-  leagueTypes: LeagueTypes,
-  tennisNavItems: tennisGlobalNavItems,
-  pickleballNavItems: pickleballGlobalNavItems,
-  onTeamLeagueSearchClick,
-  onTypeFilterClick  
-};
-
-export const JuniorTeamPickleballDisabled = GlobalNavigationTemplate.bind({});
-JuniorTeamPickleballDisabled.args = {
-  showTennisItems: false,
-  showPickleballItems: true,
-  isAdultTeamPickleballEnabled: true,
-  isJuniorTeamPickleballEnabled: false,
-  leagueTypes: LeagueTypes,
-  tennisNavItems: tennisGlobalNavItems,
-  pickleballNavItems: pickleballGlobalNavItems,
-  onTeamLeagueSearchClick,
-  onTypeFilterClick  
-};
+import React from 'react';
+
+import GlobalNavigation, { GlobalNavigationProps } from './GlobalNavigation';
+
+// Default
+export default {
+  title: 'Organisms/GlobalNavigation',
+};
+
+// Templates
+function GlobalNavigationTemplate(args: GlobalNavigationProps) {
+  return <GlobalNavigation {...args} />;  
+}
+
+const fullWidthNavItems = [
+  {
+    label: 'Players',
+    filterType: 'players',
+    sportType: 'tennis,pickleball'
+  },
+  {
+    label: 'All events',
+    filterType: 'events',
+    sportType: 'tennis,pickleball'
+  },
+];
+
+const tennisGlobalNavItems = [
+  {
+    label: 'Flex leagues',
+    filterType: 'flexLeagues',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Adult Team Tennis',
+    filterType: 1,
+    sportType: 'tennis',
+    isLeagues: true
+  },
+  {
+    label: 'Junior Team Tennis',
+    filterType: 3,
+    sportType: 'tennis',
+    isLeagues: true
+  },
+  {
+    label: 'UTR pro tennis tour',
+    filterType: 'proTennisTour',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Paid hits',
+    filterType: 'paidHits',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Paid hitters',
+    filterType: 'paidHitClubs',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Junior circuits',
+    filterType: 'juniorCircuits',
+    sportType: 'tennis'
+  },
+  {
+    label: 'College circuits',
+    filterType: 'collegeCircuits',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Junior regionals',
+    filterType: 'juniorRegionals',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Camps',
+    filterType: 'camps',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Clubs',
+    filterType: 'clubs',
+    sportType: 'tennis,pickleball'
+  },
+  {
+    label: 'High schools',
+    filterType: 'highSchools',
+    sportType: 'tennis'
+  },
+  {
+    label: 'Colleges',
+    filterType: 'colleges',
+    sportType: 'tennis'
+  }
+];
+
+const pickleballGlobalNavItems = [
+  {
+    label: 'Flex leagues',
+    filterType: 'flexLeagues',
+    sportType: 'pickleball',
+  },
+  {
+    label: 'Golden Ticket',
+    filterType: 'events',
+    data: { 'Golden Ticket': true },
+    sportType: 'pickleball',
+  },
+  {
+    label: 'APP',
+    filterType: 'app',
+    sportType: 'pickleball',
+  },
+  {
+    label: 'USAP',
+    filterType: 'usap',
+    sportType: 'pickleball',
+  },
+  {
+    label: 'Adult team pickleball',
+    filterType: 6,
+    sportType: 'pickleball',
+    isLeagues: true,
+  },
+  {
+    label: 'Junior team pickleball',
+    filterType: 7,
+    sportType: 'pickleball',
+    isLeagues: true,
+  },
+  {
+    label: 'Clubs',
+    filterType: 'clubs',
+    sportType: 'tennis,pickleball'
+  }
+];
+
+const LeagueTypes = {
+  UT_ADULT_TEAM_PICKLEBALL: 6,
+  UT_JUNIOR_TEAM_PICKLEBALL: 7,
+};
+
+const onTeamLeagueSearchClick = (item: { filterType: string; sportType?: string; }) => {
+  console.log(`Team League Search Clicked: Filter Type - ${item?.filterType}, Sport Type - ${item?.sportType}`);
+};
+
+const onTypeFilterClick = (item: { filterType: string; sportType?: string; }) => {
+  console.log(`Type Filter Clicked: Filter Type - ${item?.filterType}, Sport Type - ${item?.sportType}`);
+};
+
+// Stories
+export const GlobalNav = GlobalNavigationTemplate.bind({});
+GlobalNav.args = {
+  fullWidthNavItems,
+  isAdultTeamPickleballEnabled: true,
+  isJuniorTeamPickleballEnabled: true,
+  tennisNavItems: tennisGlobalNavItems,
+  pickleballNavItems: pickleballGlobalNavItems,
+  onTeamLeagueSearchClick,
+  onTypeFilterClick  
+};
+
+export const TennisOnly = GlobalNavigationTemplate.bind({});
+TennisOnly.args = {
+  fullWidthNavItems,
+  isAdultTeamPickleballEnabled: true,
+  isJuniorTeamPickleballEnabled: true,
+  leagueTypes: LeagueTypes,
+  tennisNavItems: tennisGlobalNavItems,
+  pickleballNavItems: pickleballGlobalNavItems,
+  onTeamLeagueSearchClick,
+  onTypeFilterClick  
+};
+
+export const PickleballOnly = GlobalNavigationTemplate.bind({});
+PickleballOnly.args = {
+  fullWidthNavItems,
+  isAdultTeamPickleballEnabled: true,
+  isJuniorTeamPickleballEnabled: true,
+  leagueTypes: LeagueTypes,
+  tennisNavItems: tennisGlobalNavItems,
+  pickleballNavItems: pickleballGlobalNavItems,
+  onTeamLeagueSearchClick,
+  onTypeFilterClick  
+};
+
+export const AdultTeamPickleballDisabled = GlobalNavigationTemplate.bind({});
+AdultTeamPickleballDisabled.args = {
+  fullWidthNavItems,
+  isAdultTeamPickleballEnabled: false,
+  isJuniorTeamPickleballEnabled: true,
+  leagueTypes: LeagueTypes,
+  tennisNavItems: tennisGlobalNavItems,
+  pickleballNavItems: pickleballGlobalNavItems,
+  onTeamLeagueSearchClick,
+  onTypeFilterClick  
+};
+
+export const JuniorTeamPickleballDisabled = GlobalNavigationTemplate.bind({});
+JuniorTeamPickleballDisabled.args = {
+  fullWidthNavItems,
+  isAdultTeamPickleballEnabled: true,
+  isJuniorTeamPickleballEnabled: false,
+  leagueTypes: LeagueTypes,
+  tennisNavItems: tennisGlobalNavItems,
+  pickleballNavItems: pickleballGlobalNavItems,
+  onTeamLeagueSearchClick,
+  onTypeFilterClick  
+};

package/src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx

@@ -1,124 +1,120 @@
-import React from 'react';
-
-import { styled } from "@mui/material/styles";
-import Box from '@mui/material/Box';
-import GlobalNavItem from '../../molecules/GlobalNavItem/GlobalNavItem';
-import TennisBallIcon from '../../atoms/Icons/TennisBallIcon';
-import PickleballBallIcon from '../../atoms/Icons/PickleballBallIcon';
-import Typography from '../../atoms/Typography/Typography';
-
-export interface GlobalNavigationProps {
-  showTennisItems: boolean
-  showPickleballItems: boolean
-  isAdultTeamPickleballEnabled: boolean;
-  isJuniorTeamPickleballEnabled: boolean;
-  leagueTypes: Record<string, string | number>;
-  tennisNavItems?: [
-    item: {
-      label: string;
-      filterType: string;
-      sportType: string;
-      isLeagues?: boolean;
-      onClick: (item: object) => void;
-    }
-  ]
-  pickleballNavItems?: [
-    item: {
-      label: string;
-      filterType: string;
-      sportType: string;
-      isLeagues?: boolean;
-      data?: object;
-      onClick: (item: object) => void;
-    }
-  ]
-  onTypeFilterClick:(item: object) => void
-  onTeamLeagueSearchClick: (item: object) => void
-}
-
-const NavItemsContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  marginTop: "24px",
-  gap: "24px",
-  flexDirection: 'column',
-  [theme.breakpoints.up('sm')]: {
-    flexDirection: 'row',
-  },
-}));
-
-const allPlayersNavItem = {
-  label: 'Players',
-  filterType: 'players',
-  sportType: 'tennis,pickleball'
-};
-
-function GlobalNavigation({
-  showTennisItems, 
-  tennisNavItems,
-  isAdultTeamPickleballEnabled,
-  isJuniorTeamPickleballEnabled,
-  leagueTypes,
-  pickleballNavItems, 
-  showPickleballItems, 
-  onTeamLeagueSearchClick, 
-  onTypeFilterClick
-}: Readonly<GlobalNavigationProps>) {
-  const handleOnClick = (item: { isLeagues?: boolean }) => {
-    if (item?.isLeagues) {
-      onTeamLeagueSearchClick(item);
-    } else {
-      onTypeFilterClick(item);
-    }
-  };
-  const filteredPickleballNavItems = pickleballNavItems?.filter((item) => {
-    if (!isAdultTeamPickleballEnabled && item?.filterType === leagueTypes?.UT_ADULT_TEAM_PICKLEBALL) {
-      return false;
-    }
-    if (!isJuniorTeamPickleballEnabled && item?.filterType === leagueTypes?.UT_JUNIOR_TEAM_PICKLEBALL) {
-      return false;
-    }
-    return true;
-  });
-  return (
-      <Box display="flex" flexDirection="column">
-          <GlobalNavItem onClick={handleOnClick} item={allPlayersNavItem} />
-          <NavItemsContainer>
-              {showTennisItems && (
-                  <Box display="flex" flexDirection="column" width="100%">
-                      <Box 
-                          display="flex" 
-                          alignItems="center"
-                          gap="7px"
-                          height="30px"
-                          sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
-                      >
-                          <TennisBallIcon size={18} />
-                          <Typography category="secondary" size="medium-cap" color="var(--black)">Tennis</Typography>
-                      </Box>
-                      {tennisNavItems?.map((item) => (
-                          <GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
-                      ))}
-                  </Box>
-              )}
-              {showPickleballItems && (
-                  <Box display="flex" flexDirection="column" width="100%"> 
-                      <Box 
-                          display="flex" 
-                          alignItems="center"
-                          gap="7px"
-                          height="30px"
-                          sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
-                      >
-                          <PickleballBallIcon size={18} />
-                          <Typography category="secondary" size="medium-cap" color="var(--black)">Pickleball</Typography>
-                      </Box>
-                      {filteredPickleballNavItems?.map((item) => (
-                          <GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
-                      ))}
-                  </Box>
-              )}
-          </NavItemsContainer>
-      </Box>
-  );
-}
-export default GlobalNavigation;
+import React from 'react';
+
+import { styled } from "@mui/material/styles";
+import Box from '@mui/material/Box';
+import GlobalNavItem from '../../molecules/GlobalNavItem/GlobalNavItem';
+import TennisBallIcon from '../../atoms/Icons/TennisBallIcon';
+import PickleballBallIcon from '../../atoms/Icons/PickleballBallIcon';
+import Typography from '../../atoms/Typography/Typography';
+
+export interface GlobalNavigationProps {
+  fullWidthNavItems: [
+    item: {
+      label: string,
+      filterType: string,
+      sportType: string
+    }
+  ],
+  isAdultTeamPickleballEnabled: boolean;
+  isJuniorTeamPickleballEnabled: boolean;
+  leagueTypes: Record<string, string | number>;
+  tennisNavItems?: [
+    item: {
+      label: string;
+      filterType: string;
+      sportType: string;
+      isLeagues?: boolean;
+      onClick: (item: object) => void;
+    }
+  ]
+  pickleballNavItems?: [
+    item: {
+      label: string;
+      filterType: string;
+      sportType: string;
+      isLeagues?: boolean;
+      data?: object;
+      onClick: (item: object) => void;
+    }
+  ]
+  onTypeFilterClick:(item: object) => void
+  onTeamLeagueSearchClick: (item: object) => void
+}
+
+const NavItemsContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  marginTop: "24px",
+  gap: "24px",
+  flexDirection: 'column',
+  [theme.breakpoints.up('sm')]: {
+    flexDirection: 'row',
+  },
+}));
+
+function GlobalNavigation({
+  fullWidthNavItems,
+  tennisNavItems,
+  isAdultTeamPickleballEnabled,
+  isJuniorTeamPickleballEnabled,
+  leagueTypes,
+  pickleballNavItems, 
+  onTeamLeagueSearchClick, 
+  onTypeFilterClick
+}: Readonly<GlobalNavigationProps>) {
+  const handleOnClick = (item: { isLeagues?: boolean }) => {
+    if (item?.isLeagues) {
+      onTeamLeagueSearchClick(item);
+    } else {
+      onTypeFilterClick(item);
+    }
+  };
+  const filteredPickleballNavItems = pickleballNavItems?.filter((item) => {
+    if (!isAdultTeamPickleballEnabled && item?.filterType === leagueTypes?.UT_ADULT_TEAM_PICKLEBALL) {
+      return false;
+    }
+    if (!isJuniorTeamPickleballEnabled && item?.filterType === leagueTypes?.UT_JUNIOR_TEAM_PICKLEBALL) {
+      return false;
+    }
+    return true;
+  });
+  return (
+      <Box display="flex" flexDirection="column">
+          {fullWidthNavItems?.map((item) => (
+              <GlobalNavItem onClick={handleOnClick} item={item} key={item.label} />
+          ))}
+          <NavItemsContainer>
+              <Box display="flex" flexDirection="column" width="100%">
+                  <Box 
+                      display="flex" 
+                      alignItems="center"
+                      gap="7px"
+                      height="30px"
+                      sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
+                  >
+                      <TennisBallIcon size={18} />
+                      <Typography category="secondary" size="medium-cap" color="var(--black)">Tennis</Typography>
+                  </Box>
+                  {tennisNavItems?.map((item) => (
+                      <GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
+                  ))}
+              </Box>
+              <Box display="flex" flexDirection="column" width="100%"> 
+                  <Box 
+                      display="flex" 
+                      alignItems="center"
+                      gap="7px"
+                      height="30px"
+                      sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
+                  >
+                      <PickleballBallIcon size={18} />
+                      <Typography category="secondary" size="medium-cap" color="var(--black)">Pickleball</Typography>
+                  </Box>
+                  {filteredPickleballNavItems?.map((item) => (
+                      <GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
+                  ))}
+              </Box>
+          </NavItemsContainer>
+      </Box>
+  );
+}
+export default GlobalNavigation;