Create Select component that supports masks (#716)

* Refactor Select to allow masks into the component

* Add autocomplete, key navigation and clear button to new select

* Improve Autocomplete

now it autocomplete with tab, and it doesnt open the dropdown when
clearing it

* Separate BaseSelect into smaller components

* Add first test to Select component

* Add Label to ClearInput

* Return enter keypress on form to its default

* Add keyboard accessibility to the select

* Update displayValue when value is changed outside of select

* Add automatic scroliing to select dropdown

* Add specs for strings and hash options

* Disable clearInput when the select is disabled

* Fix label not moving on timepicker

* Fix dropdown not opening with only 1 option

frontend/jest.setup.ts

@@ -1,15 +1,17 @@
 import '@testing-library/jest-dom'
 
+Element.prototype.scrollIntoView = () => {}
+
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: jest.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
     addListener: jest.fn(), // deprecated
     removeListener: jest.fn(), // deprecated
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
+    dispatchEvent: jest.fn()
+  }))
+})

frontend/package.json

@@ -28,6 +28,7 @@
     "next-auth": "^4.23.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-imask": "^7.1.3",
     "typescript": "5.2.2"
   },
   "devDependencies": {

frontend/src/app/tasks/TaskForm.tsx

@@ -2,7 +2,7 @@
 
 import Stack from '@mui/joy/Stack'
 import Button from '@mui/joy/Button'
-import { Select, FreeSoloSelect } from '@/ui/Select/Select'
+import { Select } from '@/ui/Select/Select'
 import { Input } from '@/ui/Input/Input'
 import { TextArea } from '@/ui/TextArea/TextArea'
 import Typography from '@mui/joy/Typography'
@@ -13,13 +13,7 @@ import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
 
 import { useTaskForm } from './hooks/useTaskForm'
-
-const timeOptions = () => {
-  const hours = Array.from({ length: 24 }, (_, i) => i)
-  const minutes = ['00', '15', '30', '45']
-
-  return hours.flatMap((h) => minutes.map((m) => `${h}:${m}`))
-}
+import { TimePicker } from './components/TimePicker'
 
 type TaskFormProps = {
   projects: Array<Project>
@@ -53,12 +47,15 @@ export const TaskForm = ({ projects, taskTypes, userId }: TaskFormProps) => {
       ref={formRef}
     >
       <Select
-        onChange={(_, option) => handleChange('projectId', option?.id || '')}
-        value={projects.find((project) => project.id === task.projectId) || null}
+        onChange={(value) => handleChange('projectId', value)}
+        value={task.projectId}
         name="projectId"
         label="Select project"
-        options={projects}
-        getOptionLabel={(option) => option.description}
+        placeholder="Select project"
+        options={projects.map((project) => ({
+          label: project.description,
+          value: project.id.toString()
+        }))}
         required
       />
       <Stack flexDirection="row" gap="30px">
@@ -73,31 +70,24 @@ export const TaskForm = ({ projects, taskTypes, userId }: TaskFormProps) => {
             </>
           )}
         </Button>
-        <FreeSoloSelect
-          sx={{ width: '166px' }}
+        <TimePicker
           name="startTime"
           label="From"
           value={task.startTime}
-          onChange={(_, option) => {
-            if (option) {
-              selectStartTime(option)
-            }
-          }}
-          options={timeOptions()}
+          onChange={selectStartTime}
+          sx={{ width: '166px' }}
           disabled={isTimerRunning}
           required
         />
-        <FreeSoloSelect
-          sx={{ width: '166px' }}
+
+        <TimePicker
           name="endTime"
           label="To"
           value={task.endTime}
-          onChange={(_, option) => {
-            if (option) {
-              handleChange('endTime', option)
-            }
+          onChange={(option: string) => {
+            handleChange('endTime', option)
           }}
-          options={timeOptions()}
+          sx={{ width: '166px' }}
           disabled={isTimerRunning}
           required
         />
@@ -122,10 +112,10 @@ export const TaskForm = ({ projects, taskTypes, userId }: TaskFormProps) => {
       <Select
         name="taskType"
         label="Select task type"
-        value={taskTypes.find((taskType) => taskType.slug === task.taskType) || null}
-        onChange={(_, option) => handleChange('taskType', option?.slug || '')}
-        options={taskTypes}
-        getOptionLabel={(option) => option.name}
+        value={task.taskType}
+        onChange={(value) => handleChange('taskType', value)}
+        options={taskTypes.map((taskType) => ({ label: taskType.name, value: taskType.slug }))}
+        placeholder="Select task type"
       />
       <Input
         value={task.story}
@@ -141,6 +131,7 @@ export const TaskForm = ({ projects, taskTypes, userId }: TaskFormProps) => {
           name="moreActions"
           label="More Actions"
           options={[]}
+          value=""
         />
         <Stack
           sx={{

frontend/src/app/tasks/components/TimePicker.tsx

@@ -0,0 +1,60 @@
+import { IMask } from 'react-imask'
+import { MaskedSelect, MaskedSelectProps } from '@/ui/Select/MaskedSelect'
+
+const timeOptions = () => {
+  const hours = Array.from({ length: 24 }, (_, i) => i)
+  const minutes = ['00', '15', '30', '45']
+
+  return hours.flatMap((h) => minutes.map((m) => `${h}:${m}`))
+}
+
+const hourMinuteMask = [
+  {
+    mask: '0:@0',
+    definitions: {
+      '@': /[0-5]/
+    }
+  },
+  {
+    mask: 'HH:MM',
+    blocks: {
+      HH: {
+        mask: IMask.MaskedRange,
+        from: 0,
+        to: 23
+      },
+      MM: {
+        mask: IMask.MaskedRange,
+        from: 0,
+        to: 59
+      }
+    }
+  }
+]
+
+type TimePickerProps = Omit<MaskedSelectProps, 'options' | 'mask'>
+
+export const TimePicker = ({
+  name,
+  label,
+  value,
+  onChange,
+  sx,
+  disabled,
+  required
+}: TimePickerProps) => {
+  return (
+    <MaskedSelect
+      options={timeOptions()}
+      name={name}
+      label={label}
+      value={value}
+      onChange={onChange}
+      placeholder=" "
+      sx={sx}
+      mask={hourMinuteMask}
+      disabled={disabled}
+      required={required}
+    />
+  )
+}

frontend/src/app/tasks/hooks/useTaskForm.ts

@@ -47,7 +47,7 @@ export const useTaskForm = ({ userId }: { userId: TaskIntent['userId'] }) => {
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
-      if ((event.key === 's' && event.ctrlKey) || event.key === 'Enter') {
+      if (event.key === 's' && event.ctrlKey) {
         event.preventDefault()
         formRef.current?.requestSubmit()
       }

frontend/src/domain/Project.ts

@@ -1,5 +1,5 @@
 export type Project = {
-  id: string
+  id: number
   area_id: number
   customer_id: number
   description: string