WIP

src/components/form/Select.tsx

@@ -1,38 +1,38 @@
 import React from 'react';
 
-type DefaultSelectProps = JSX.IntrinsicElements['select'];
+import type { FieldValues, UseControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import ReactSelect from 'react-select';
 
-export interface SelectProps {
+interface SelectProps<T> extends UseControllerProps<T> {
+  label: string;
   options: {
     value: string;
     label: string;
   }[];
-  label: string;
 }
 
-export const Select = React.forwardRef<
-  HTMLSelectElement,
-  SelectProps & DefaultSelectProps
->(function Select(
-  { options, label, id, ...props }: SelectProps & DefaultSelectProps,
-  ref,
-) {
+export const Select = <T extends FieldValues>({
+  name,
+  control,
+  label,
+  options,
+}: SelectProps<T>): JSX.Element => {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
-        {label}
-      </label>
-      <select
-        ref={ref}
-        {...props}
-        className="block w-full p-2 border dark:border-gray-600 rounded-md shadow-sm dark:bg-secondaryDark"
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
+    <Controller
+      name={name}
+      control={control}
+      rules={{
+        required: 'This is required',
+      }}
+      render={({ field: { onChange, value, name } }) => (
+        <div className="space-y-1">
+          <span className="block text-sm font-medium dark:text-white">
+            {label}
+          </span>
+          <ReactSelect options={options} />
+        </div>
+      )}
+    />
   );
-});
+};

src/components/form/Switch.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import type { FieldValues, UseControllerProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import MaterialSwitch from '@material-ui/core/Switch';
+
+interface SwitchProps<T> extends UseControllerProps<T> {
+  label: string;
+}
+
+export const Switch = <T extends FieldValues>({
+  name,
+  control,
+  label,
+}: SwitchProps<T>): JSX.Element => {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{
+        required: 'This is required',
+      }}
+      render={({ field: { onChange, value, name } }) => (
+        <div className="flex flex-col">
+          <span className="block text-sm font-medium dark:text-white">
+            {label}
+          </span>
+          <div className="relative w-14 mr-2 ml-auto select-none">
+            <MaterialSwitch
+              id={name}
+              checked={value}
+              onChange={(ev) => onChange(ev.target.checked)}
+            />
+          </div>
+        </div>
+      )}
+    />
+  );
+};

src/components/form/Toggle.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-export interface ToggleProps {
-  label: string;
-}
-
-export const Toggle = React.forwardRef<
-  HTMLInputElement,
-  ToggleProps & DefaultInputProps
->(function Input(
-  { label, id, checked, ...props }: ToggleProps & DefaultInputProps,
-  ref,
-) {
-  return (
-    <div className="flex flex-col">
-      <span className="block text-sm font-medium dark:text-white">{label}</span>
-      <div className="relative w-14 mr-2 ml-auto select-none">
-        <input
-          ref={ref}
-          {...props}
-          type="checkbox"
-          className="peer checked:right-0 absolute w-7 h-7 rounded-full bg-white appearance-none cursor-pointer"
-        />
-        <label
-          htmlFor={id}
-          className="block overflow-hidden h-7 rounded-full peer-checked:bg-primary shadow-sm bg-gray-300 dark:bg-gray-700 cursor-pointer"
-        ></label>
-      </div>
-    </div>
-  );
-});