Better exporting of Flight Flagger components (#3)

* Better exporting of Flight Flagger components

---------

Co-authored-by: jackson <Jackson Hyde>

.gitignore

@@ -4,3 +4,4 @@ dist
 coverage
 storybook-static
 .jest-test-results.json
+.yarn

package.json

@@ -85,12 +85,19 @@
   },
   "dependencies": {
     "-": "^0.0.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.18",
     "@fontsource/roboto": "^5.0.13",
+    "@mui/icons-material": "5.11.16",
+    "@mui/lab": "5.0.0-alpha.119",
+    "@mui/material": "5.11",
     "@storybook/icons": "^1.2.9",
     "css-loader": "^7.1.2",
     "install-peers": "^1.0.4",
     "postcss": "^8.4.38",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass-loader": "^14.2.1",
     "storybook-addon-material-ui": "^0.9.0-alpha.24",
     "style-loader": "^4.0.0"

src/components/FlightFlagger/FlightFlagger.tsx

@@ -45,7 +45,11 @@ const FlightFlagger = ({nationalities, ageGroups, submitCallback, flights, isLoa
   }
 
   return <>
-    <FlightFlaggerFilters nationalities={nationalities} ageGroups={ageGroups} submitCallback={submitCallback} toggleHighlightDisplay={toggleHighlightDisplay} />
+    <FlightFlaggerFilters 
+      nationalities={nationalities} 
+      ageGroups={ageGroups} 
+      submitCallback={submitCallback} 
+      showAllCallback={toggleHighlightDisplay} />
     { isLoading? <div style={{display: 'flex', justifyContent: 'center', padding: '50px'}}><CircularProgress data-testid="flight-flagger-loading-spinner" /></div> : <FlightFlaggerResults flights={flights} showHighlightOnly={showHighlightOnly} />}
   </>
 }

src/components/FlightFlagger/FlightFlaggerFilters.stories.tsx

@@ -2,6 +2,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
 import {
   FlightFlaggerFilters as FlightFlaggerFiltersComponent,
+  IFlightFlaggerFilters,
   SearchFilterPayload,
 } from "./FlightFlaggerFilters";
 import { ThemeProvider, createTheme } from "@mui/material";
@@ -15,7 +16,7 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const defaultTheme = createTheme();
 const Template: ComponentStory<typeof FlightFlaggerFiltersComponent> = (
-  args,
+  args: IFlightFlaggerFilters,
 ) => (
   <ThemeProvider theme={defaultTheme}>
     <FlightFlaggerFiltersComponent {...args} />
@@ -29,4 +30,6 @@ FlightFlaggerFilters.args = {
   ageGroups: ["0-9", "10-24", "25-39", "40-55", "55-69", "70+"],
   submitCallback: (searchFilters: SearchFilterPayload) =>
     console.log(searchFilters),
+  showAllCallback: (event: React.ChangeEvent<HTMLInputElement>) =>
+    console.log(event),
 };

src/components/FlightFlagger/FlightFlaggerFilters.tsx

@@ -19,17 +19,16 @@ export type SearchFilterPayload = {
   selectedAgeGroups: string[],
   selectedNationalities: string[],
   flightNumber: string,
-
 }
 
 export interface IFlightFlaggerFilters {
   nationalities: string[],
   ageGroups: string[],
   submitCallback: (payload:SearchFilterPayload) => void,
-  toggleHighlightDisplay: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  showAllCallback: (event: React.ChangeEvent<HTMLInputElement>) => void,
 }
 
-export const FlightFlaggerFilters = ({nationalities, ageGroups, submitCallback, toggleHighlightDisplay}: IFlightFlaggerFilters) => {
+export const FlightFlaggerFilters = ({nationalities, ageGroups, submitCallback, showAllCallback}: IFlightFlaggerFilters) => {
 
   const nationalitiesOptions = nationalities.map((nationality) => { return { title: nationality }});
   const ageOptions = ageGroups.map((ageGroup) => { return { title: ageGroup }});
@@ -178,7 +177,7 @@ export const FlightFlaggerFilters = ({nationalities, ageGroups, submitCallback,
             row
             aria-labelledby="display"
             name="row-radio-buttons-group"
-            onChange={toggleHighlightDisplay}
+            onChange={showAllCallback}
             defaultValue="false"
           >
             <FormControlLabel value="false" data-testid="show-all-flights"  defaultChecked={true} control={<Radio />} label="All flights" />

src/components/FlightFlagger/FlightFlaggerHighlight.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { FlightHighlight as FlightHighlightComponent } from "./FlightFlaggerResults";
+import { ThemeProvider, createTheme } from "@mui/material";
+import ExampleFlights from "./ExampleFlights";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "DRT Components/Flight Flagger",
+  component: FlightHighlightComponent,
+} as ComponentMeta<typeof FlightHighlightComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const defaultTheme = createTheme();
+const Template: ComponentStory<typeof FlightHighlightComponent> = (
+  args: FlightHighlightComponent,
+) => (
+  <ThemeProvider theme={defaultTheme}>
+    <FlightHighlightComponent {...args} />
+  </ThemeProvider>
+);
+
+export const FlightHighlight = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+FlightHighlight.args = {
+  text: 'Flight highlight text',
+};

src/components/FlightFlagger/FlightFlaggerResults.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { FlightFlaggerResults as FlightFlaggerResultsComponent } from "./FlightFlaggerResults";
+import { FlightFlaggerResults as FlightFlaggerResultsComponent,IFlightFlaggerResults } from "./FlightFlaggerResults";
 import { ThemeProvider, createTheme } from "@mui/material";
 import ExampleFlights from "./ExampleFlights";
 
@@ -13,7 +13,7 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const defaultTheme = createTheme();
 const Template: ComponentStory<typeof FlightFlaggerResultsComponent> = (
-  args,
+  args :IFlightFlaggerResults,
 ) => (
   <ThemeProvider theme={defaultTheme}>
     <FlightFlaggerResultsComponent {...args} />

src/components/FlightFlagger/FlightFlaggerResults.tsx

@@ -6,7 +6,7 @@ import { FlightFlaggerTable } from "./FlightFlaggerTable";
 import TungstenIcon from '@mui/icons-material/Tungsten';
 import { FlightArrival } from "./FlightFlagger";
 
-interface IFlightHighlight {
+export interface IFlightHighlight {
   text: string
 }
 

src/components/FlightFlagger/FlightFlaggerTable.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Table, TableCell, TableRow } from "@mui/material";
+import { Table, TableCell, TableRow, Tooltip, TooltipProps, IconButton } from "@mui/material";
 import { StyledTableHeader, StyledTableHeaderCell, StyledTableBody, RelativeTableCell, CellStatusHighlight } from "../StyledTable";
 import { FlightHighlight } from "./FlightFlaggerResults";
 import { FlightArrival } from "./FlightFlagger";
+import InfoIcon from '@mui/icons-material/Info';
+import { styled } from '@mui/material/styles';
 
 export interface IFlightCard {
   flight: FlightArrival
@@ -22,6 +24,14 @@ export const getConfidenceAlert = (confidence: string | undefined) => {
       return ['', '']
   }
 }
+const StyledTooltip = styled(Tooltip)<TooltipProps>(({ theme }) => ({
+  color: '#fff',
+  '& > svg': {
+    fontSize: '1em',
+    width: '0.9em',
+    height: '0.9em'
+    }
+}));
 
 export interface IFlightFlaggerTable {
   flights: FlightArrival[]
@@ -36,16 +46,51 @@ export const FlightFlaggerTable = ({flights, ...others}: IFlightFlaggerTable) =>
         <StyledTableHeaderCell>Flight</StyledTableHeaderCell>
         { hasHighlightedFlights && <StyledTableHeaderCell>Pax info</StyledTableHeaderCell> }
         <StyledTableHeaderCell align="center">Origin</StyledTableHeaderCell>
-        <StyledTableHeaderCell align="center">Country</StyledTableHeaderCell>
+        <StyledTableHeaderCell align="center">
+          Country
+          <StyledTooltip title="Country of origin">
+            <IconButton>
+              <InfoIcon />
+            </IconButton>
+          </StyledTooltip>
+        </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Gate/Stand</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Status</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Scheduled</StyledTableHeaderCell>
-        <StyledTableHeaderCell align="center">Expected</StyledTableHeaderCell>
+        <StyledTableHeaderCell align="center">
+          Expected
+          <StyledTooltip title="Expected arrival">
+            <IconButton>
+              <InfoIcon />
+            </IconButton>
+          </StyledTooltip>
+        </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP Pax</StyledTableHeaderCell>
-        <StyledTableHeaderCell align="center">e-Gate</StyledTableHeaderCell>
-        <StyledTableHeaderCell align="center">EEA</StyledTableHeaderCell>
-        <StyledTableHeaderCell align="center">Non-EEA</StyledTableHeaderCell>
+        <StyledTableHeaderCell align="center">
+          e-Gate
+          <StyledTooltip title="Expeced e-Gate pax">
+            <IconButton>
+              <InfoIcon />
+            </IconButton>
+          </StyledTooltip>
+        </StyledTableHeaderCell>
+        <StyledTableHeaderCell align="center">
+          EEA
+          <StyledTooltip title="Expected EEA pax">
+            <IconButton>
+              <InfoIcon />
+            </IconButton>
+          </StyledTooltip>
+        </StyledTableHeaderCell>
+        <StyledTableHeaderCell align="center">
+          Non-EEA
+          <StyledTooltip title="Expected Non-EEA pax">
+            <IconButton>
+              <InfoIcon />
+            </IconButton>
+          </StyledTooltip>
+        </StyledTableHeaderCell>
       </TableRow>
     </StyledTableHeader>
     <StyledTableBody>

src/components/FlightFlagger/index.ts

@@ -1,3 +1,11 @@
 export { default } from "./FlightFlagger";
+export type {IFlightFlagger} from './FlightFlagger'
+
 export {FlightFlaggerFilters} from "./FlightFlaggerFilters";
+export type {IFlightFlaggerFilters} from './FlightFlaggerFilters';
+
 export {FlightFlaggerResults} from './FlightFlaggerResults';
+export type {IFlightFlaggerResults} from './FlightFlaggerResults';
+
+export {FlightHighlight} from './FlightFlaggerResults';
+export type {IFlightHighlight} from './FlightFlaggerResults';

src/components/StatusTags/index.ts

@@ -1 +1,2 @@
 export { StatusTag } from "./StatusTags";
+export type {IStatusTag} from './StatusTags';

src/components/index.ts

@@ -1,2 +1,5 @@
 export { default as FlightFlagger } from "./FlightFlagger";
+export type { IFlightFlagger } from "./FlightFlagger";
+
 export { StatusTag } from "./StatusTags";
+export type { IStatusTag } from "./StatusTags";