refactor: migrate related components

2026-08-20 06:29:07 +00:00 · 2025-07-03 09:00:00 +02:00
parent cd8e014f08
commit 84b73fc02a
23 changed files with 346 additions and 277 deletions
@@ -1,11 +1,13 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import QRCode from 'react-qr-code';
-import { Button, Select, Switch } from '@chakra-ui/react';

 import { generateUrl } from '../../../../common/api/session';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
+import Select from '../../../../common/components/select/Select';
+import Switch from '../../../../common/components/switch/Switch';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import copyToClipboard from '../../../../common/utils/copyToClipboard';
@@ -33,14 +35,15 @@ export default function GenerateLinkForm() {

  const {
    handleSubmit,
-    register,
    setError,
+    watch,
+    setValue,
    formState: { errors },
  } = useForm<GenerateLinkFormOptions>({
    mode: 'onChange',
    defaultValues: {
      baseUrl: currentHostName,
-      path: '',
+      path: 'timer',
      lock: false,
      authenticate: false,
    },
@@ -67,6 +70,29 @@ export default function GenerateLinkForm() {
    }
  };

+  const hostOptions = useMemo(
+    () =>
+      infoData.networkInterfaces.map((nif) => ({
+        value: nif.address,
+        label: `${nif.name} - ${nif.address}`,
+      })),
+    [infoData.networkInterfaces],
+  );
+
+  const pathOptions = useMemo(
+    () => [
+      { value: 'timer', label: 'Timer' },
+      { value: 'cuesheet', label: 'Cuesheet' },
+      { value: 'op', label: 'Operator' },
+      { value: '', label: 'Companion' },
+      ...urlPresetData.map((preset) => ({
+        value: preset.alias,
+        label: `Preset: ${preset.alias}`,
+      })),
+    ],
+    [urlPresetData],
+  );
+
  return (
    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
@@ -81,59 +107,40 @@ export default function GenerateLinkForm() {
            title='Host IP'
            description={`Which IP address will be used${isOntimeCloud ? ' (not applicable in Ontime Cloud)' : ''}`}
          />
-          <Select variant='ontime' isDisabled={isOntimeCloud} size='sm' {...register('baseUrl')}>
-            {infoData.networkInterfaces.map((nif) => {
-              return (
-                <option key={nif.name} value={nif.address}>
-                  {`${nif.name} - ${nif.address}`}
-                </option>
-              );
-            })}
-          </Select>
+          <Select
+            disabled={isOntimeCloud}
+            options={hostOptions}
+            value={watch('baseUrl')}
+            onValueChange={(value) => setValue('baseUrl', value)}
+          />
        </Panel.ListItem>
        <Panel.ListItem>
          <Panel.Field
            title='URL Preset'
            description='Which preset will the link point to (will default to /timer if none is given)'
          />
-          <Select variant='ontime' size='sm' {...register('path')}>
-            <option key='timer' value='timer'>
-              Timer
-            </option>
-            <option key='companion' value=''>
-              Companion
-            </option>
-            {urlPresetData.map((preset) => {
-              return (
-                <option key={preset.alias} value={preset.alias}>
-                  {`Preset: ${preset.alias}`}
-                </option>
-              );
-            })}
-          </Select>
+          <Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
        </Panel.ListItem>
        <Panel.ListItem>
          <Panel.Field
            title='Lock navigation'
            description='Prevent showing navigation (will only work for non production URLs)'
          />
-          <Switch variant='ontime' size='lg' {...register('lock')} />
+          <Switch name='lock' checked={watch('lock')} onCheckedChange={(checked) => setValue('lock', checked)} />
        </Panel.ListItem>
        <Panel.ListItem>
          <Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
-          <Switch variant='ontime' size='lg' {...register('authenticate')} />
+          <Switch
+            name='authenticate'
+            checked={watch('authenticate')}
+            onCheckedChange={(checked) => setValue('authenticate', checked)}
+          />
        </Panel.ListItem>
      </Panel.ListGroup>
      <Panel.ListGroup>
        <Panel.ListItem>
          <Panel.Field title='Generate link' description='Fill form and generate link and QR code' />
-          <Button
-            variant='ontime-filled'
-            size='sm'
-            isLoading={formState === 'loading'}
-            type='submit'
-            style={{ alignSelf: 'end' }}
-          >
+          <Button variant='primary' loading={formState === 'loading'} type='submit' style={{ alignSelf: 'end' }}>
            {formState === 'success' ? 'Link copied to clipboard!' : 'Update share link'}
          </Button>
          <div className={style.column}>
@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { IoArrowUp } from 'react-icons/io5';
-import { Button } from '@chakra-ui/react';

+import Button from '../../../../common/components/buttons/Button';
 import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -18,13 +18,8 @@ export default function LogExport() {
      <Panel.Card>
        <Panel.SubHeader>
          Event log
-          <Button
-            variant='ontime-subtle'
-            size='sm'
-            rightIcon={<IoArrowUp className={style.iconRotate} />}
-            onClick={extract}
-          >
-            Extract
+          <Button onClick={extract}>
+            Extract <IoArrowUp className={style.iconRotate} />
          </Button>
        </Panel.SubHeader>
        <Panel.Divider />
@@ -1,10 +1,10 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import { Button, Input } from '@chakra-ui/react';

 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
 import { validateProjectFile } from '../../../../common/utils/uploadUtils';
 import * as Panel from '../../panel-utils/PanelUtils';

@@ -57,7 +57,7 @@ export default function ManageProjects() {

  return (
    <Panel.Section>
-      <Input
+      <input
        ref={fileInputRef}
        style={{ display: 'none' }}
        type='file'
@@ -70,22 +70,14 @@ export default function ManageProjects() {
          Manage projects
          <Panel.InlineElements>
            <Button
-              variant='ontime-subtle'
              onClick={handleSelectFile}
-              size='sm'
-              isDisabled={Boolean(loading) || isCreatingProject}
-              isLoading={loading === 'import'}
+              disabled={Boolean(loading) || isCreatingProject}
+              loading={loading === 'import'}
            >
              Import
            </Button>
-            <Button
-              variant='ontime-subtle'
-              onClick={handleToggleCreate}
-              size='sm'
-              isDisabled={Boolean(loading) || isCreatingProject}
-              rightIcon={<IoAdd />}
-            >
-              New
+            <Button onClick={handleToggleCreate} disabled={Boolean(loading) || isCreatingProject}>
+              New <IoAdd />
            </Button>
          </Panel.InlineElements>
        </Panel.SubHeader>
@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoTrash } from 'react-icons/io5';
-import { Button, Input, Textarea } from '@chakra-ui/react';
+import { IoAdd, IoTrash } from 'react-icons/io5';
 import { useQueryClient } from '@tanstack/react-query';

 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import Textarea from '../../../../common/components/input/textarea/Textarea';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -86,10 +88,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
      <Panel.Title>
        Create new project
        <Panel.InlineElements>
-          <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
+          <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
            Cancel
          </Button>
-          <Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
+          <Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
            Create project
          </Button>
        </Panel.InlineElements>
@@ -98,53 +100,31 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
      <Panel.Section className={style.innerColumn}>
        <label>
          Project title
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            maxLength={50}
-            placeholder='Your project name'
-            autoComplete='off'
-            {...register('title')}
-          />
+          <Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
        </label>
        <label>
          Project description
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            maxLength={100}
-            placeholder='Euro Love, Malmö 2024'
-            autoComplete='off'
-            {...register('description')}
-          />
+          <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
        </label>
        <label>
          Backstage info
          <Textarea
-            variant='ontime-filled'
-            size='sm'
+            fluid
            maxLength={150}
            placeholder='Wi-Fi password: 1234'
-            autoComplete='off'
-            resize='none'
+            resize='vertical'
            {...register('backstageInfo')}
          />
        </label>
        <label>
          Backstage QR code Url
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            placeholder={documentationUrl}
-            autoComplete='off'
-            {...register('backstageUrl')}
-          />
+          <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
        </label>
        <Panel.Section>
          <Panel.ListItem>
            <Panel.Field title='Custom data' description='Add custom data for your project' />
-            <Button variant='ontime-subtle' onClick={handleAddCustom}>
-              +
+            <Button onClick={handleAddCustom}>
+              Add <IoAdd />
            </Button>
          </Panel.ListItem>
          {fields.map((field, idx) => (
@@ -152,25 +132,13 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
              <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
              <label>
                Title
-                <Input
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.title}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.title` as const)}
-                />
+                <Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
              </label>
              <label>
                Value
-                <Input
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.value}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.value` as const)}
-                />
+                <Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
              </label>
-              <Button variant='ontime-ghosted' onClick={() => remove(idx)}>
+              <Button variant='ghosted' onClick={() => remove(idx)}>
                <IoTrash />
              </Button>
            </div>
@@ -1,12 +1,14 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
-import { Button, Input, Textarea } from '@chakra-ui/react';
 import { type ProjectData } from 'ontime-types';

 import { projectLogoPath } from '../../../../common/api/constants';
 import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import Textarea from '../../../../common/components/input/textarea/Textarea';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { validateLogo } from '../../../../common/utils/uploadUtils';
@@ -112,16 +114,10 @@ export default function ProjectData() {
        <Panel.SubHeader>
          Project data
          <Panel.InlineElements>
-            <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
+            <Button onClick={onReset} disabled={isSubmitting || !isDirty}>
              Revert to saved
            </Button>
-            <Button
-              variant='ontime-filled'
-              size='sm'
-              type='submit'
-              isDisabled={!isDirty || !isValid}
-              isLoading={isSubmitting}
-            >
+            <Button variant='primary' type='submit' disabled={!isDirty || !isValid} loading={isSubmitting}>
              Save
            </Button>
          </Panel.InlineElements>
@@ -132,20 +128,16 @@ export default function ProjectData() {
          <label>
            Project title
            <Input
-              variant='ontime-filled'
-              size='sm'
+              fluid
              maxLength={50}
              placeholder='Project title is shown in production views'
-              autoComplete='off'
              {...register('title')}
            />
          </label>
          <Panel.Section style={{ marginTop: 0 }}>
            <label>
              Project logo
-              <Input
-                variant='ontime-filled'
-                size='sm'
+              <input
                type='file'
                style={{ display: 'none' }}
                accept='image/*'
@@ -161,25 +153,17 @@ export default function ProjectData() {
                  <>
                    <img src={`${projectLogoPath}/${watch('projectLogo')}`} />
                    <Button
-                      size='sm'
-                      variant='ontime-filled'
-                      isDisabled={isSubmitting || !watch('projectLogo')}
-                      leftIcon={<IoTrash />}
+                      variant='subtle-destructive'
+                      disabled={isSubmitting || !watch('projectLogo')}
                      onClick={handleDeleteLogo}
-                      type='button'
                    >
+                      <IoTrash />
                      Delete
                    </Button>
                  </>
                ) : (
-                  <Button
-                    variant='ontime-filled'
-                    size='sm'
-                    isDisabled={isSubmitting}
-                    leftIcon={<IoDownloadOutline />}
-                    onClick={handleClickUpload}
-                    type='button'
-                  >
+                  <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
+                    <IoDownloadOutline />
                    Upload logo
                  </Button>
                )}
@@ -187,44 +171,30 @@ export default function ProjectData() {
              </Panel.Card>
            </label>
          </Panel.Section>
+
          <label>
            Project description
-            <Input
-              variant='ontime-filled'
-              size='sm'
-              maxLength={100}
-              placeholder='Euro Love, Malmö 2024'
-              autoComplete='off'
-              {...register('description')}
-            />
+            <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
          </label>
          <label>
            Backstage info
            <Textarea
-              variant='ontime-filled'
-              size='sm'
+              fluid
              maxLength={150}
              placeholder='Wi-Fi password: 1234'
-              autoComplete='off'
-              resize='none'
+              resize='vertical'
              {...register('backstageInfo')}
            />
          </label>
          <label>
            Backstage QR code URL
-            <Input
-              variant='ontime-filled'
-              size='sm'
-              placeholder={documentationUrl}
-              autoComplete='off'
-              {...register('backstageUrl')}
-            />
+            <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
          </label>
          <Panel.Section style={{ marginTop: 0 }}>
            <Panel.ListItem>
              <Panel.Field title='Custom data' description='' />
-              <Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
-                Add
+              <Button onClick={handleAddCustom}>
+                Add <IoAdd />
              </Button>
            </Panel.ListItem>
            {fields.length > 0 &&
@@ -237,41 +207,31 @@ export default function ProjectData() {
                  | undefined;
                return (
                  <div key={field.id} className={style.customDataItem}>
-                    <div>
-                      <div className={style.titleRow}>
-                        <label>
-                          Title
-                          <Input
-                            variant='ontime-filled'
-                            size='sm'
-                            defaultValue={field.title}
-                            placeholder='Title of your custom data'
-                            autoComplete='off'
-                            {...register(`custom.${idx}.title`, {
-                              required: { value: true, message: 'Field cannot be empty' },
-                            })}
-                          />
-                        </label>
-                        <Button
-                          size='sm'
-                          variant='ontime-subtle'
-                          color='#FA5656' // $red-500
-                          onClick={() => remove(idx)}
-                          leftIcon={<IoTrash />}
-                        >
-                          Delete Entry
-                        </Button>
-                      </div>
-                      {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
+                    <div className={style.titleRow}>
+                      <label>
+                        Title
+                        <Input
+                          fluid
+                          defaultValue={field.title}
+                          placeholder='Title of your custom data'
+                          {...register(`custom.${idx}.title`, {
+                            required: { value: true, message: 'Field cannot be empty' },
+                          })}
+                        />
+                      </label>
+                      <Button variant='subtle-destructive' onClick={() => remove(idx)}>
+                        <IoTrash />
+                        Delete Entry
+                      </Button>
                    </div>
+                    {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
                    <label>
                      Value
                      <Textarea
-                        variant='ontime-filled'
-                        resize='none'
-                        size='sm'
+                        fluid
+                        rows={3}
+                        resize='vertical'
                        defaultValue={field.value}
-                        autoComplete='off'
                        placeholder='Text of your custom data'
                        {...register(`custom.${idx}.value`, {
                          required: { value: true, message: 'Field cannot be empty' },