✨(frontend) add formik time input component

Add a component which enables the user to select a time
and give it to formik context, with a suggestions dropdown

Author: karabij

src/frontend/magnify/package.json

@@ -37,6 +37,7 @@
     "@testing-library/user-event": "14.2.1",
     "@types/jest": "28.1.1",
     "@types/react": "18.0.12",
+    "@types/react-time-picker": "^4.0.2",
     "@types/styled-components": "5.1.25",
     "@types/validator": "13.7.3",
     "@typescript-eslint/eslint-plugin": "5.36.2",
@@ -59,6 +60,7 @@
     "msw": "0.47.4",
     "postcss": "8.4.14",
     "prettier": "2.7.0",
+    "react-time-picker": "^5.1.0",
     "rollup": "2.75.6",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
@@ -97,7 +99,7 @@
   },
   "dependencies": {
     "@tanstack/react-query-devtools": "^4.8.0",
-    "react-router-dom": "6.4.1",
+    "react-router-dom": "6.3.0",
     "use-debounce": "8.0.4"
   }
 }

src/frontend/magnify/src/components/design-system/Formik/FormikDatePicker/FormikDatePicker.tsx

@@ -10,7 +10,7 @@ const messages = defineMessages({
   invalidStartingAt: {
     defaultMessage: 'Input date is not valid: Starting date should be set in the future.',
     description: 'Error message when event scheduling date time update is in the past.',
-    id: 'components.design-system.Formik.invalidStartingAt',
+    id: 'components.design-system.Formik.FormikDatePicker.invalidStartingAt',
   },
 });
 
@@ -26,6 +26,9 @@ const customDateInputTheme = (theme: ThemeType) => {
       day: { extend: () => `border-radius: 2em; color: brand` },
       extend: `border-radius: 1em; padding: 1em`,
     },
+    maskedInput: {
+      extend: `font-family: roboto`,
+    },
   };
 };
 
@@ -34,16 +37,17 @@ export interface formikDatePickerProps {
   onChange: (date: string) => void;
 }
 
+const nextYear = new Date();
+nextYear.setFullYear(new Date().getFullYear() + 1);
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
 const FormikDatePicker: FunctionComponent<formikDatePickerProps> = ({ ...props }) => {
   const [field] = useField(props.name);
   const [startingAtError, setStartingAtError] = useState(false);
 
   const formikContext = useFormikContext();
-  const nextYear = new Date();
-  nextYear.setFullYear(new Date().getFullYear() + 1);
   const intl = useIntl();
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
 
   const theme = useTheme();
   const onDateChange = (event: { value: string | string[] }) => {

src/frontend/magnify/src/components/design-system/Formik/FormikTimePicker/FormikTimePicker.stories.tsx

@@ -0,0 +1,24 @@
+import withFormik from '@bbbtech/storybook-formik';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import FormikTimePicker from './FormikTimePicker';
+
+export default {
+  title: 'Formik/TimePicker',
+  component: FormikTimePicker,
+  decorators: [withFormik],
+} as ComponentMeta<typeof FormikTimePicker>;
+
+const Template: ComponentStory<typeof FormikTimePicker> = (args, context) => (
+  <div>
+    {context.parameters.title}
+    <FormikTimePicker {...args} />
+  </div>
+);
+
+export const basicTimePicker = Template.bind({});
+
+basicTimePicker.args = {
+  name: 'time',
+  isToday: true,
+};

src/frontend/magnify/src/components/design-system/Formik/FormikTimePicker/FormikTimePicker.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable react/no-unknown-property */
+import { useField, useFormikContext } from 'formik';
+import { Box, DropButton, Button, Text } from 'grommet';
+import { Alert } from 'grommet-icons';
+import { normalizeColor } from 'grommet/utils';
+import React, { FunctionComponent, ReactElement, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import TimePicker, { TimePickerValue } from 'react-time-picker';
+import { useTheme } from 'styled-components';
+
+const messages = defineMessages({
+  invalidTime: {
+    defaultMessage: 'Input time is not valid: it should be set in the future.',
+    description: 'Error message when event scheduling time update is in the past.',
+    id: 'components.design-system.Formik.FormikTimePicker.invalidTime',
+  },
+});
+
+export interface FormikTimePickerProps {
+  name: string;
+  isToday: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const computeSuggestions = (): string[] => {
+  let suggestions = ['00:00'];
+  let minutes: string = '00';
+  let hours: string = '00';
+
+  while (`${hours}:${minutes}` < '23:45') {
+    console.log(`${hours}:${minutes}`);
+    if (minutes == '45') {
+      hours = +hours >= 9 ? (+hours + 1).toString() : `0${(+hours + 1).toString()}`;
+      minutes = '00';
+    } else {
+      minutes = (+minutes + 15).toString();
+    }
+    suggestions.push(`${hours}:${minutes}`);
+  }
+  return suggestions;
+};
+
+const allSuggestions = computeSuggestions();
+
+interface suggestionButtonProps {
+  buttonValue: string;
+  choiceValue: string;
+  onClick: (value: string) => void;
+}
+
+const SuggestionButton: FunctionComponent<suggestionButtonProps> = ({ ...props }): ReactElement => {
+  const isChosenButton: boolean = props.buttonValue == props.choiceValue;
+  const theme = useTheme();
+  return (
+    <Button
+      color={isChosenButton ? `${normalizeColor('light-2', theme)}` : 'black'}
+      fill={isChosenButton ? 'horizontal' : false}
+      justify="center"
+      margin={{ top: 'xsmall' }}
+      primary={isChosenButton}
+      onClick={() => {
+        props.onClick(props.buttonValue);
+      }}
+    >
+      <Box alignContent="center" alignSelf="center">
+        <Text color="black" textAlign="center">
+          {props.buttonValue}
+        </Text>
+      </Box>
+    </Button>
+  );
+};
+
+const FormikTimePicker: FunctionComponent<FormikTimePickerProps> = ({ ...props }) => {
+  const [field] = useField(props.name);
+  const formikContext = useFormikContext();
+  const [open, setOpen] = useState<boolean | undefined>(undefined);
+  const [timeError, setTimeError] = useState(false);
+  const intl = useIntl();
+
+  const onTimeChange = (value: TimePickerValue | string) => {
+    const today = new Date();
+    if (props.isToday && value < `${today.getHours()}:${today.getMinutes()}`) {
+      setTimeError(true);
+    } else {
+      setTimeError(false);
+      formikContext.setFieldValue(props.name, value);
+    }
+  };
+
+  const onTimeSelectChange = (value: string) => {
+    onTimeChange(value);
+    setOpen(false);
+  };
+
+  const suggestionButtons = allSuggestions.map((value: string) => (
+    <SuggestionButton
+      key={value}
+      buttonValue={value}
+      choiceValue={field.value}
+      onClick={onTimeSelectChange}
+    />
+  ));
+
+  return (
+    <Box align="start" pad="small">
+      <DropButton
+        dropAlign={{ top: 'bottom' }}
+        onClose={() => setOpen(false)}
+        open={open}
+        dropContent={
+          <Box align="center" basis="small" direction="column" gap="5px">
+            {suggestionButtons}
+          </Box>
+        }
+        onOpen={() => {
+          setOpen(true);
+        }}
+      >
+        <TimePicker disableClock onChange={onTimeChange} value={field.value}></TimePicker>
+      </DropButton>
+      {timeError && (
+        <Box
+          align="center"
+          background="#ffcccb"
+          direction="row"
+          gap="8px"
+          margin={{ top: 'small' }}
+          pad="8px"
+          round="small"
+        >
+          <Alert color="status-critical" size="medium" />
+          <Text color="status-critical" size="small">
+            {intl.formatMessage(messages.invalidTime)}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default FormikTimePicker;

src/frontend/magnify/src/components/design-system/Formik/FormikTimePicker/index.ts

@@ -0,0 +1 @@
+export { default, FormikTimePickerProps } from './FormikTimePicker';