refactor: migrate UI components and remove chakra

migrate pin page
migrate copy tag
migrate pin input
migrate dropdown menus
migrate radio buttons
migrate switch
migrate select
migrate textarea
migrate colour picker
migrate select
migrate context menu
migrate viewparams
remove chakra

apps/client/src/common/components/protect-route/PinPage.module.scss

@@ -0,0 +1,50 @@
+.container {
+  width: 100%;
+  height: 100%;
+
+  padding-top: 25vh;
+
+  background: $ui-black;
+  color: $ontime-color;
+  font-size: 3rem;
+  text-align: center;
+}
+
+.pin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    font-size: 4rem;
+    height: 4rem;
+    width: 4em;
+    text-align: center;
+    letter-spacing: 0.25em;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    height: 4rem;
+    width: 4rem;
+    font-size: 4rem;
+  }
+}
+
+.pinFailed {
+  input {
+    animation: redFlash 1.5s ease;
+  }
+}
+
+@keyframes redFlash {
+  from {
+    background: $red-500;
+  }
+  to {
+    background: rgba($red-500, 0);
+  }
+}

apps/client/src/common/components/protect-route/PinPage.tsx

@@ -1,71 +1,55 @@
-import { useCallback, useEffect, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
-import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 
-import style from './ProtectRoute.module.scss';
+import { cx } from '../../utils/styleUtils';
+import IconButton from '../buttons/IconButton';
+import Input from '../input/input/Input';
+
+import style from './PinPage.module.scss';
 
 interface PinPageProps {
   permission: 'editor' | 'operator';
   handleValidation: (pin: string) => boolean;
 }
 
-export default function PinPage(props: PinPageProps) {
-  const { permission, handleValidation } = props;
+export default function PinPage({ permission, handleValidation }: PropsWithChildren<PinPageProps>) {
   const [pin, setPin] = useState('');
   const [failed, setFailed] = useState(false);
 
-  const validate = useCallback(() => {
+  const validate = () => {
     const isValid = handleValidation(pin);
     if (!isValid) {
       setFailed(true);
       setPin('');
     }
-  }, [handleValidation, pin]);
+  };
 
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.repeat) return;
-      if (event.key === 'Enter') {
-        validate();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [validate]);
+  const handleInputChange = (value: string) => {
+    setPin(value);
+    if (failed) setFailed(false);
+  };
 
   return (
     <div className={style.container}>
       {`Ontime ${permission}`}
-      <div className={failed ? style.pin__failed : style.pin}>
-        <PinInput
-          type='alphanumeric'
-          size='lg'
-          mask
-          autoFocus
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          validate();
+        }}
+        className={cx([style.pin, failed && style.pinFailed])}
+      >
+        <Input
+          type='password'
+          maxLength={4}
+          height='large'
           value={pin}
-          onChange={(value) => {
-            setFailed(false);
-            setPin(value);
-          }}
-        >
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-          <PinInputField />
-        </PinInput>
-        <IconButton
-          variant='ontime-filled'
-          aria-label='Enter'
-          size='lg'
-          isRound
-          icon={<IoCheckmark />}
-          onClick={validate}
+          onChange={(e) => handleInputChange(e.target.value)}
         />
-      </div>
+        <IconButton type='submit' variant='primary' aria-label='Enter'>
+          <IoCheckmark />
+        </IconButton>
+      </form>
     </div>
   );
 }

apps/client/src/common/components/protect-route/ProtectRoute.module.scss

@@ -1,49 +0,0 @@
-.container {
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 25vh;
-
-  background: $ui-black;
-  color: $ontime-color;
-  font-weight: 200;
-  font-size: 3rem;
-}
-
-.pin,
-.pin__failed {
-  display: flex;
-  gap: 0.125em;
-  padding-block: 0.5em;
-
-  input {
-    border-radius: 99px;
-    border-color: $gray-500;
-
-    &:hover {
-      border-color: $blue-500;
-    }
-  }
-
-  button {
-    margin-left: 1em;
-  }
-}
-
-.pin__failed {
-  input {
-    animation: colourFade 1.5s ease;
-  }
-}
-
-@keyframes colourFade {
-  from {
-    background: $red-500;
-  }
-  to {
-    background: rgba($red-500, 0);
-  }
-}