WIP

src/components/form/Input.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-export interface InputProps {
-  valid?: boolean;
-  validationMessage?: string;
-  icon?: JSX.Element;
-  label: string;
-}
-
-export const Input = React.forwardRef<
-  HTMLInputElement,
-  InputProps & DefaultInputProps
->(function Input(
-  {
-    valid,
-    validationMessage,
-    icon,
-    label,
-    id,
-    ...props
-  }: InputProps & DefaultInputProps,
-  ref,
-) {
-  return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
-        {label}
-      </label>
-      <div className="relative">
-        {icon && (
-          <div className="flex absolute inset-y-0 left-0 px-3 items-center pointer-events-none">
-            {React.cloneElement(icon, {
-              className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
-            })}
-          </div>
-        )}
-        <input
-          ref={ref}
-          {...props}
-          className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
-            icon ? 'pl-9' : 'pl-2'
-          }`}
-        />
-      </div>
-      {!valid && (
-        <div className="text-sm text-gray-600">{validationMessage}</div>
-      )}
-    </div>
-  );
-});

src/components/form/Select.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import type { FieldValues, UseControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-import ReactSelect from 'react-select';
-
-interface SelectProps<T> extends UseControllerProps<T> {
-  label: string;
-  options: {
-    value: string;
-    label: string;
-  }[];
-}
-
-export const Select = <T extends FieldValues>({
-  name,
-  control,
-  label,
-  options,
-}: SelectProps<T>): JSX.Element => {
-  return (
-    <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

@@ -1,40 +0,0 @@
-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>
-      )}
-    />
-  );
-};