feat(web/input): color input field

web/src/features/dialog/InputDialog.tsx

@@ -3,17 +3,18 @@ import React, { FormEvent, useRef } from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useLocales } from '../../providers/LocaleProvider';
 import { fetchNui } from '../../utils/fetchNui';
-import { IInput, ICheckbox, ISelect, INumber, ISlider } from '../../interfaces/dialog';
+import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput } from '../../interfaces/dialog';
 import InputField from './components/fields/input';
 import CheckboxField from './components/fields/checkbox';
 import SelectField from './components/fields/select';
 import NumberField from './components/fields/number';
 import SliderField from './components/fields/slider';
 import { useFieldArray, useForm } from 'react-hook-form';
+import ColorField from './components/fields/color';
 
 export interface InputProps {
   heading: string;
-  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider>;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput>;
 }
 
 export type FormValues = {
@@ -96,6 +97,7 @@ const InputDialog: React.FC = () => {
                   {row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
                   {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
+                  {row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
                 </React.Fragment>
               );
             })}

web/src/features/dialog/components/fields/color.tsx

@@ -0,0 +1,36 @@
+import { IColorInput } from '../../../../interfaces/dialog';
+import { Control, useController } from 'react-hook-form';
+import { FormValues } from '../../InputDialog';
+import { ColorInput } from '@mantine/core';
+
+interface Props {
+  row: IColorInput;
+  index: number;
+  control: Control<FormValues>;
+}
+
+const ColorField: React.FC<Props> = (props) => {
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    defaultValue: props.row.default,
+  });
+
+  return (
+    <ColorInput
+      withEyeDropper={false}
+      value={controller.field.value}
+      name={controller.field.name}
+      ref={controller.field.ref}
+      onBlur={controller.field.onBlur}
+      onChange={controller.field.onChange}
+      label={props.row.label}
+      description={props.row.description}
+      disabled={props.row.disabled}
+      defaultValue={props.row.default}
+      format={props.row.format}
+    />
+  );
+};
+
+export default ColorField;

web/src/interfaces/dialog.ts

@@ -51,3 +51,12 @@ export interface ISlider {
   disabled?: boolean;
   description?: string;
 }
+
+export interface IColorInput {
+  type: 'color';
+  label: string;
+  default?: string;
+  disabled?: boolean;
+  description?: string;
+  format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+}