Pax components and styles (#49)

Pax Components and Styles, 1.6.0 Release, introducing mui-x
---------

Co-authored-by: jackson <Jackson Hyde>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drt/drt-react-components",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "React components for DRT applications",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",

src/components/FlightFlagger/FlightFlagger.stories.tsx

@@ -6,7 +6,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {default as FlightFlaggerComponent} from "./";
 
 const meta: Meta<typeof FlightFlaggerComponent> = {
-    title: "DRT Components/Flight Flagger",
+    title: "DRT Components/Features/Flight Flagger",
     component: FlightFlaggerComponent,
 };
 

src/components/FlightFlagger/FlightFlaggerCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Box, Card, CardContent, Typography, Chip, Paper, BoxProps } from "@mui/material";
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
-import { StatusTag } from "../StatusTags";
+import { StatusTag } from "../ui/StatusTags";
 import { styled } from '@mui/material/styles';
 import { getConfidenceAlert } from "./FlightFlaggerTable";
 import { FlightArrival } from "./FlightArrival";

src/components/FlightFlagger/FlightFlaggerFilters.stories.tsx

@@ -5,14 +5,14 @@ import {
 } from "./FlightFlaggerFilters";
 
 const meta: Meta<typeof FlightFlaggerFiltersComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Filters",
   component: FlightFlaggerFiltersComponent,
 };
 
 export default meta;
 type Story = StoryObj<typeof FlightFlaggerFiltersComponent>;
 
-export const FlightFlaggerFilters: Story = {
+export const Filters: Story = {
   args: {
     nationalities: [
       {name: 'Great Britain', code: 'GBR'},

src/components/FlightFlagger/FlightFlaggerFilters.tsx

@@ -99,7 +99,7 @@ export const FlightFlaggerFilters = ({
   const [currentFormState, setCurrentFormState] = useState<FormState>(initialFormState)
   const [appliedSearchFlags, setAppliedSearchFlags] = useState<FormState>(initialFormState)
 
-  const formIsTouched = (initialForm, currentForm) => {
+  const formIsTouched = (initialForm: FormState, currentForm: FormState) => {
     return currentForm.selectedNationalities.length !== initialForm.selectedNationalities.length ||
       currentForm.selectedAgeGroups.length !== initialForm.selectedAgeGroups.length ||
       currentForm.showTransitPaxNumber != initialForm.showTransitPaxNumber ||

src/components/FlightFlagger/FlightFlaggerHighlightChip.stories.tsx

@@ -3,14 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { FlightHighlightChip as FlightHighlightChipComponent } from './FlightFlaggerHighlightChip';
 
 const meta: Meta<typeof FlightHighlightChipComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Highlight Chip",
   component: FlightHighlightChipComponent,
 };
 
 export default meta;
 type Story = StoryObj<typeof FlightHighlightChipComponent>;
 
-export const FlightHighlightChip: Story = {
+export const HighlightChip: Story = {
   args: {
     text: 'Highlighted info',
   },

src/components/FlightFlagger/FlightFlaggerHighlightChip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Chip  } from "@mui/material";
+import { Box, Chip  } from "@mui/material";
 import TungstenIcon from '@mui/icons-material/Tungsten';
 import CustomHighlightIcon from './icon-highlight-pax.svg'
 
@@ -8,7 +8,7 @@ export interface IFlightHighlightChip {
 }
 
 const HighlightIcon = () => {
-  return <CustomHighlightIcon style={{marginLeft: '4px', minWidth: '25px'}} />
+  return <Box sx={{marginLeft: '4px', minWidth: '25px'}} ><CustomHighlightIcon/></Box>
 }
 
 export const FlightHighlightChip = ({text}: IFlightHighlightChip) => {

src/components/FlightFlagger/FlightFlaggerResults.stories.tsx

@@ -4,7 +4,7 @@ import ExampleFlights from "./ExampleFlights";
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FlightFlaggerResultsComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Flight Flagger Results",
   component: FlightFlaggerResultsComponent,
 };
 

src/components/FlightFlagger/FlightFlaggerResults.tsx

@@ -21,7 +21,7 @@ export const FlightFlaggerResults = ({flights, showHighlightOnly}: IFlightFlagge
     flights = flights.filter(flight => flight.highlights)
   }
   return isMobile ? 
-    <Box data-testid="flight-flagger-mobile-results" sx={{backgroundColor: '#E6E9F1', p: 2}}>
+    <Box data-testid="flight-flagger-mobile-results" sx={(theme) => ({backgroundColor: theme.palette.secondary.light, p: 2})}>
       {resultCount}
       { flights.map((flight: FlightArrival, index: number) => {
         return <FlightCard key={index} flight={flight} />

src/components/FlightFlagger/FlightFlaggerTable.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { Table, TableCell, TableRow, Tooltip, TooltipProps, IconButton } from "@mui/material";
-import { StyledTableHeader, StyledTableHeaderCell, StyledTableBody, RelativeTableCell, CellStatusHighlight } from "../StyledTable";
+import { StyledTableHeader, StyledTableHeaderCell, StyledTableBody, RelativeTableCell, CellStatusHighlight } from "../ui/StyledTable";
 import { FlightHighlightChip } from "./FlightFlaggerHighlightChip";
 import { FlightArrival } from "./FlightArrival";
 import InfoIcon from '@mui/icons-material/Info';
 import { styled } from '@mui/material/styles';
+import {InfoTooltip} from "../ui/InfoTooltip/InfoTooltip";
 
 export interface IFlightCard {
   flight: FlightArrival
@@ -48,22 +49,14 @@ export const FlightFlaggerTable = ({flights, ...others}: IFlightFlaggerTable) =>
         <StyledTableHeaderCell align="center">Origin</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">
           Country
-          <StyledTooltip title="Country of origin">
-            <IconButton>
-              <InfoIcon />
-            </IconButton>
-          </StyledTooltip>
+          <InfoTooltip text="Country of origin" />
         </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Gate/Stand</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Status</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Scheduled</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">
           Expected
-          <StyledTooltip title="Expected arrival">
-            <IconButton>
-              <InfoIcon />
-            </IconButton>
-          </StyledTooltip>
+          <InfoTooltip text="Expected arrival" />
         </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP Pax</StyledTableHeaderCell>

src/components/Header/Header.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { default as HeaderComponent } from ".";
 
 const meta: Meta<typeof HeaderComponent> = {
-  title: "DRT Components/Header",
+  title: "DRT Components/UI/Header",
   component: HeaderComponent,
 };
 

src/components/Pax/PaxCard/PaxCard.stories.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { PaxCard as PaxCardComponent } from './PaxCard';
+import { PaxTimeRange } from './PaxCard';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stack } from '@mui/material';
+
+const meta: Meta<typeof PaxCardComponent> = {
+  title: "DRT Components/Features/Pax/PaxCard",
+  component: PaxCardComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof PaxCardComponent>;
+
+const startTime1 = new Date();
+const startTime2 = new Date();
+const startTime3 = new Date();
+const endTime1 = new Date();
+const endTime2 = new Date();
+const endTime3 = new Date();
+
+const queues = [
+  { queueName: 'EEA', queueCount: 77 },
+  { queueName: 'Non-EEA', queueCount: 128 },
+  { queueName: 'EEA', queueCount: 213 }
+]
+
+
+startTime1.setHours(11, 26);
+endTime1.setHours(11, 26);
+
+startTime2.setHours(11, 26);
+endTime2.setHours(11, 31);
+
+startTime3.setHours(11, 31);
+endTime3.setHours(11, 36);
+
+export const PaxCardSingle:Story = {
+  args: {
+    queues: queues,
+    timeRange: PaxTimeRange.Next5Mins,
+    startTime: startTime1,
+    endTime: endTime1
+  }
+}
+
+export const PaxCardGroup: Story = {
+  render: () => {
+      return (
+      <Stack 
+        spacing={2} 
+        direction={'row'} 
+        display="inline-flex"
+        sx={(theme) => ({
+          p:2,
+          backgroundColor: theme.palette.secondary.light || theme.palette.grey[200]
+        })}>
+          <PaxCardComponent 
+            queues={queues}
+            timeRange={PaxTimeRange.Next5Mins}
+            startTime={startTime1}
+            endTime={endTime1}
+          />
+          <PaxCardComponent 
+            queues={queues}
+            timeRange={PaxTimeRange.Next5to10Mins} 
+            startTime={startTime2}
+            endTime={endTime2}
+          />
+          <PaxCardComponent 
+            queues={queues}
+            timeRange={PaxTimeRange.Next10to15Mins}
+            startTime={startTime3}
+            endTime={endTime3}
+          />
+      </Stack>
+    )
+  }
+};

src/components/Pax/PaxCard/PaxCard.tsx

@@ -0,0 +1,81 @@
+import { BorderBottom } from '@mui/icons-material';
+import { Paper, styled, Theme, Typography, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import * as React from 'react';
+
+
+export enum PaxTimeRange {
+  Next5Mins = 'Next 5 Mins',
+  Next5to10Mins = 'Next 5 to 10 Mins',
+  Next10to15Mins = 'Next 10 to 15 Mins',
+}
+
+export type PortQueue = {
+  queueName: string,
+  queueCount: number
+}
+
+export interface IPaxCard {
+  queues: PortQueue[],
+  timeRange: PaxTimeRange,
+  startTime: Date,
+  endTime: Date,
+}
+
+const StyledPaxCard = styled(Paper)(({theme} : {theme: Theme}) => ({
+  display: 'inline-block',
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.grey[100],
+  '.MuiTableCell-root': {
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.common.black,
+    padding: `${theme.spacing(1)} ${theme.spacing(0)}`
+  },
+  '& .MuiTableRow-root :first-child': {
+    paddingRight: theme.spacing(1)
+  },
+  '& .MuiTableCell-head': {
+    borderBottom: `1px solid ${theme.palette.common.black}`,
+  },
+  '& .MuiTableBody-root .MuiTableCell-root': {
+    borderBottom: 'none !important',
+  }
+}));
+
+const formatTime = (datetime:Date) => {
+  return `${datetime.getHours()}:${datetime.getMinutes()}`
+}
+
+export const PaxCard = ({queues, timeRange, startTime, endTime}: IPaxCard) => {
+
+
+  return (
+    <StyledPaxCard elevation={0}>
+      <Typography variant='h5'>{timeRange}</Typography>
+      <Typography variant='body1'>
+        {`(${formatTime(startTime)} to ${formatTime(endTime)})`}
+      </Typography>
+      <Paper elevation={0} sx={{mt: 1, px: 1}}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Estimated pax:</TableCell>
+              <TableCell align='right'>{ queues.reduce((sum, q) => sum + q.queueCount, 0)}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {
+              queues.map((queue) => {
+                return (
+                  <TableRow key={queue.queueName}>
+                    <TableCell>{`${queue.queueName}:`}</TableCell>
+                    <TableCell align='right'>{ queue.queueCount }</TableCell>
+                  </TableRow>
+                )
+              })
+            }
+          </TableBody>
+        </Table>
+      </Paper>
+    </StyledPaxCard>
+  )
+}

src/components/Pax/PaxCard/index.tsx

@@ -0,0 +1,2 @@
+export { PaxCard } from "./PaxCard";
+export type { IPaxCard, PaxTimeRange, PortQueue } from "./PaxCard";