Internal cleanup

src/components/generic/form/Checkbox.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Label } from '@components/generic/form/Label';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+export interface CheckboxProps extends DefaultInputProps {
+  action?: (enabled: boolean) => void;
+  label: string;
+  valid?: boolean;
+  validationMessage?: string;
+  error?: boolean;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Input(
+    { label, valid, validationMessage, id, error, ...props }: CheckboxProps,
+    ref,
+  ) {
+    return (
+      <div className="flex w-full flex-col">
+        <Label label={label} />
+        <div className="ml-auto">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={id}
+            className={`h-8 w-8 appearance-none rounded-md border border-gray-400 transition duration-200 ease-in-out checked:border-transparent checked:bg-primary focus-within:shadow-border focus:outline-none dark:border-gray-200 ${
+              props.disabled
+                ? 'border-gray-400 bg-gray-300 text-gray-500 dark:border-gray-700 dark:bg-secondaryDark dark:text-gray-400'
+                : ''
+            } ${
+              error
+                ? 'border-red-500'
+                : props.disabled
+                ? 'border-gray-200'
+                : 'focus-within:border-primary hover:border-primary dark:focus-within:border-primary dark:hover:border-primary'
+            }`}
+            {...props}
+          />
+        </div>
+        {!valid && (
+          <div className="text-sm text-gray-600">{validationMessage}</div>
+        )}
+      </div>
+    );
+  },
+);

src/components/generic/form/Form.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import { Loading } from '@meshtastic/components';
+import { Loading } from '@components/generic/Loading';
 
 export interface FormProps {
   loading?: boolean;

src/components/generic/form/Input.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { InputWrapper } from '@components/generic/form/InputWrapper';
+import { Label } from '@components/generic/form/Label';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+export interface InputProps extends DefaultInputProps {
+  label?: string;
+  error?: string;
+  action?: JSX.Element;
+  prefix?: string;
+  suffix?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
+    return (
+      <div className="w-full">
+        {label && <Label label={label} error={error} />}
+        <InputWrapper error={error} disabled={props.disabled}>
+          <input
+            ref={ref}
+            className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
+            {...props}
+          />
+          {suffix && (
+            <span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
+              {suffix}
+            </span>
+          )}
+          {action && <div className="mr-1 flex">{action}</div>}
+        </InputWrapper>
+      </div>
+    );
+  },
+);

src/components/generic/form/InputWrapper.tsx

@@ -0,0 +1,29 @@
+import type React from 'react';
+
+export interface LabelProps {
+  error?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+export const InputWrapper = ({
+  error,
+  disabled,
+  children,
+}: LabelProps): JSX.Element => (
+  <div
+    className={`flex w-full rounded-md border border-gray-400 transition duration-200 ease-in-out dark:border-gray-200 ${
+      disabled
+        ? 'border-gray-400 bg-gray-300 text-gray-500 dark:border-gray-700 dark:bg-secondaryDark dark:text-gray-400'
+        : ''
+    } ${
+      error
+        ? 'border-red-500 dark:border-red-500'
+        : disabled
+        ? ''
+        : ' focus-within:border-primary focus-within:shadow-border hover:border-primary dark:focus-within:border-primary dark:hover:border-primary'
+    }`}
+  >
+    {children}
+  </div>
+);

src/components/generic/form/Select.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { InputWrapper } from '@components/generic/form/InputWrapper';
+import { Label } from '@components/generic/form/Label';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+export interface SelectProps extends DefaultSelectProps {
+  options?: {
+    name: string | number;
+    value: string | number;
+  }[];
+  optionsEnum?: { [s: string]: string | number };
+  label?: string;
+  error?: string;
+  small?: boolean;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options, optionsEnum, label, error, small, ...props }, ref) => {
+    const optionsEnumValues = optionsEnum
+      ? Object.entries(optionsEnum).filter(
+          (value) => typeof value[1] === 'number',
+        )
+      : [];
+    return (
+      <div>
+        {label && <Label label={label} error={error} />}
+        <InputWrapper error={error} disabled={props.disabled}>
+          <select
+            ref={ref}
+            className={`w-full rounded-md bg-transparent focus:border-primary focus:outline-none disabled:cursor-not-allowed dark:text-white ${
+              small ? 'm-1' : 'mx-2 h-10'
+            }`}
+            disabled={
+              props.disabled
+                ? true
+                : !(optionsEnumValues.length || options?.length)
+            }
+            {...props}
+          >
+            {!(optionsEnumValues.length || options?.length) && (
+              <option key="loading" className="dark:bg-gray-700">
+                Loading
+              </option>
+            )}
+            {optionsEnumValues.length &&
+              optionsEnumValues.map(([name, value], index) => (
+                <option key={index} className="dark:bg-gray-700" value={value}>
+                  {name}
+                </option>
+              ))}
+            {options &&
+              options.map((option, index) => (
+                <option
+                  key={index}
+                  className="dark:bg-gray-700"
+                  value={option.value}
+                >
+                  {option.name}
+                </option>
+              ))}
+          </select>
+        </InputWrapper>
+      </div>
+    );
+  },
+);