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/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx

@@ -1,8 +1,9 @@
-import { Select, Switch } from '@chakra-ui/react';
 import { EndAction, TimerType, TimeStrategy } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import Select from '../../../../common/components/select/Select';
+import Switch from '../../../../common/components/switch/Switch';
 import { editorSettingsDefaults, useEditorSettings } from '../../../../common/stores/editorSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -41,12 +42,7 @@ export default function RundownDefaultSettings() {
                 title='Link previous'
                 description='Whether the start time of new events should be linked to the previous event end time'
               />
-              <Switch
-                variant='ontime'
-                size='lg'
-                defaultChecked={linkPrevious}
-                onChange={(event) => setLinkPrevious(event.target.checked)}
-              />
+              <Switch size='large' checked={linkPrevious} onCheckedChange={setLinkPrevious} />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
@@ -54,15 +50,13 @@ export default function RundownDefaultSettings() {
                 description='Which time should be maintained when event schedule is recalculated'
               />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultTimeStrategy}
-                onChange={(event) => setTimeStrategy(event.target.value as TimeStrategy)}
-              >
-                <option value={TimeStrategy.LockDuration}>Duration</option>
-                <option value={TimeStrategy.LockEnd}>End Time</option>
-              </Select>
+                onValueChange={(value) => setTimeStrategy(value as TimeStrategy)}
+                options={[
+                  { value: TimeStrategy.LockDuration, label: 'Duration' },
+                  { value: TimeStrategy.LockEnd, label: 'End Time' },
+                ]}
+              />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>
@@ -78,31 +72,27 @@ export default function RundownDefaultSettings() {
             <Panel.ListItem>
               <Panel.Field title='Timer type' description='Default type of timer for new events' />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultTimerType}
-                onChange={(event) => setDefaultTimerType(event.target.value as TimerType)}
-              >
-                <option value={TimerType.CountDown}>Count down</option>
-                <option value={TimerType.CountUp}>Count up</option>
-                <option value={TimerType.Clock}>Clock</option>
-                <option value={TimerType.None}>None</option>
-              </Select>
+                onValueChange={(value) => setDefaultTimerType(value as TimerType)}
+                options={[
+                  { value: TimerType.CountDown, label: 'Count down' },
+                  { value: TimerType.CountUp, label: 'Count up' },
+                  { value: TimerType.Clock, label: 'Clock' },
+                  { value: TimerType.None, label: 'None' },
+                ]}
+              />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field title='End Action' description='Default end action for new events' />
               <Select
-                variant='ontime'
-                size='sm'
-                width='auto'
                 value={defaultEndAction}
-                onChange={(event) => setDefaultEndAction(event.target.value as EndAction)}
-              >
-                <option value={EndAction.None}>None</option>
-                <option value={EndAction.LoadNext}>Load next</option>
-                <option value={EndAction.PlayNext}>Play next</option>
-              </Select>
+                onValueChange={(value) => setDefaultEndAction(value as EndAction)}
+                options={[
+                  { value: EndAction.None, label: 'None' },
+                  { value: EndAction.LoadNext, label: 'Load next' },
+                  { value: EndAction.PlayNext, label: 'Play next' },
+                ]}
+              />
             </Panel.ListItem>
           </Panel.ListGroup>
           <Panel.ListGroup>

apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldEntry.tsx

@@ -56,7 +56,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
       </td>
       <td className={style.halfWidth}>{label}</td>
       <td className={style.fullWidth}>
-        <CopyTag label='Copy key to use in integrations' copyValue={fieldKey}>
+        <CopyTag size='small' copyValue={fieldKey}>
           {fieldKey}
         </CopyTag>
       </td>

apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Radio, RadioGroup } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 import { CustomField } from 'ontime-types';
 import { customFieldLabelToKey, isAlphanumericWithSpace } from 'ontime-utils';
 
@@ -9,6 +8,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../../common/components/input/input/Input';
+import RadioGroup from '../../../../../common/components/radio-group/RadioGroup';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
 import { preventEscape } from '../../../../../common/utils/keyEvent';
 import * as Panel from '../../../panel-utils/PanelUtils';
@@ -33,13 +33,13 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   const [_, setColour] = useState(initialColour || '');
 
   const {
-    control,
     handleSubmit,
     register,
     setFocus,
     setError,
     setValue,
     getValues,
+    watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<CustomFieldFormData>({
     defaultValues: { type: 'string', label: initialLabel || '', colour: initialColour || '' },
@@ -90,17 +90,15 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
       </Info>
       <div>
         <Panel.Description>Type</Panel.Description>
-        <Controller
-          name='type'
-          control={control}
-          render={({ field }) => (
-            <RadioGroup {...field} size='sm' isDisabled={isEditMode} variant='ontime'>
-              <Panel.InlineElements relation='component'>
-                <Radio value='string'>Text</Radio>
-                <Radio value='image'>Image</Radio>
-              </Panel.InlineElements>
-            </RadioGroup>
-          )}
+        <RadioGroup
+          orientation='horizontal'
+          disabled={isEditMode}
+          onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
+          value={watch('type')}
+          items={[
+            { value: 'string', label: 'Text' },
+            { value: 'image', label: 'Image' },
+          ]}
         />
       </div>
       <div className={style.twoCols}>
@@ -138,7 +136,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
         <Button variant='ghosted' onClick={onCancel}>
           Cancel
         </Button>
-        <Button  type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
           Save
         </Button>
       </Panel.InlineElements>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/GSheetSetup.tsx

@@ -174,7 +174,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
         <Panel.ListGroup>
           <Panel.InlineElements>
             {isAuthenticating && <span>Authenticating...</span>}
-            <CopyTag copyValue={authKey ?? ''} label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
+            <CopyTag copyValue={authKey ?? ''} disabled={!canAuthenticate}>
               {authKey ? authKey : 'Upload files to generate Auth Key'}
             </CopyTag>
             <Button onClick={handleAuthenticate} disabled={!canAuthenticate}>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoTrash } from 'react-icons/io5';
-import { Select } from '@chakra-ui/react';
 import { ImportMap, isAlphanumericWithSpace } from 'ontime-utils';
 
 import Button from '../../../../../../common/components/buttons/Button';
 import IconButton from '../../../../../../common/components/buttons/IconButton';
 import Input from '../../../../../../common/components/input/input/Input';
+import Select from '../../../../../../common/components/select/Select';
 import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
 import * as Panel from '../../../../panel-utils/PanelUtils';
 import useGoogleSheet from '../useGoogleSheet';
@@ -33,6 +33,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
     handleSubmit,
     register,
     setValue,
+    watch,
     formState: { errors, isValid },
   } = useForm<NamedImportMap>({
     mode: 'onChange',
@@ -149,19 +150,13 @@ export default function ImportMapForm(props: ImportMapFormProps) {
                   <td>{label}</td>
                   <td>
                     <Select
-                      variant='ontime'
                       id={importName as string}
-                      size='sm'
-                      {...register(label as keyof NamedImportMap)}
-                    >
-                      {worksheetNames?.map((name) => {
-                        return (
-                          <option key={name} value={name}>
-                            {name}
-                          </option>
-                        );
-                      })}
-                    </Select>
+                      value={watch(label as keyof NamedImportMap) as string}
+                      onValueChange={(value: string) =>
+                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true })
+                      }
+                      options={worksheetNames?.map((name) => ({ value: name, label: name })) || []}
+                    />
                   </td>
                   <td className={style.singleActionCell} />
                 </tr>