Remove old Select, change Switch for Checkbox

src/components/Channel.tsx

@@ -6,8 +6,8 @@ import { FiEdit3, FiSave } from 'react-icons/fi';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { connection } from '../core/connection.js';
-import { EnumSelect } from './generic/form/EnumSelect.jsx';
 import { Input } from './generic/form/Input.jsx';
+import { Select } from './generic/form/Select.jsx';
 import { IconButton } from './generic/IconButton.jsx';
 
 export interface ChannelProps {
@@ -77,7 +77,7 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
           <div className="my-auto space-x-2">
             <form>
               <div className="flex space-x-2">
-                <EnumSelect
+                <Select
                   label="Channel Type"
                   optionsEnum={Protobuf.Channel_Role}
                   {...register('role', { valueAsNumber: true })}

src/components/chat/MessageBar.tsx

@@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 
-import { EnumSelect } from '../generic/form/EnumSelect.jsx';
+import { Select } from '../generic/form/Select.jsx';
 import { IconButton } from '../generic/IconButton.jsx';
 
 export const MessageBar = (): JSX.Element => {
@@ -40,7 +40,7 @@ export const MessageBar = (): JSX.Element => {
             sendMessage();
           }}
         >
-          <EnumSelect
+          <Select
             onChange={(e): void => {
               setDestinationNode(parseInt(e.target.value));
             }}

src/components/generic/Select.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-
-import { FiChevronDown } from 'react-icons/fi';
-
-import { Listbox } from '@headlessui/react';
-
-export interface SelectProps {
-  label: string;
-  options: {
-    name: string;
-    value: string;
-    icon: JSX.Element;
-  }[];
-  id: string;
-  active: {
-    name: string;
-    value: string;
-    icon: JSX.Element;
-  };
-  onChange: (value: string) => void;
-}
-
-export const Select = ({
-  label,
-  options,
-  id,
-  active,
-  onChange,
-}: SelectProps): JSX.Element => {
-  return (
-    <div className="w-full">
-      <label
-        htmlFor={id}
-        className="block text-sm font-medium text-black dark:text-white"
-      >
-        {label}
-      </label>
-
-      <Listbox value={active.value} onChange={onChange}>
-        <div className="relative mt-1">
-          <Listbox.Button className="flex w-full text-left bg-white border rounded-md shadow-sm h-11 focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
-            <div className="mx-2 my-auto">{active.icon}</div>
-            <span className="block my-auto truncate">{active.name}</span>
-            <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <FiChevronDown
-                className="w-5 h-5 text-gray-400"
-                aria-hidden="true"
-              />
-            </span>
-          </Listbox.Button>
-
-          <Listbox.Options className="absolute w-full bg-white border rounded-md shadow-sm focus:outline-none dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
-            {options.map((option) => (
-              <Listbox.Option
-                key={option.value}
-                className={({ active, selected }): string =>
-                  `cursor-default select-none relative py-2 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
-                    active || selected
-                      ? 'bg-gray-200 dark:bg-primaryDark'
-                      : 'text-gray-900'
-                  }`
-                }
-                value={option.value}
-              >
-                {({ selected }): JSX.Element => (
-                  <>
-                    <span
-                      className={`flex truncate ${
-                        selected ? 'font-medium' : 'font-normal'
-                      }`}
-                    >
-                      <div className="mx-4 my-auto">{option.icon}</div>
-                      {option.name}
-                    </span>
-                  </>
-                )}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </div>
-      </Listbox>
-    </div>
-  );
-};

src/components/generic/Toggle.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { Switch } from '@headlessui/react';
-
-import { Label } from './form/Label.jsx';
-
-type DefaultButtonProps = JSX.IntrinsicElements['button'];
-
-interface ToggleProps extends DefaultButtonProps {
-  action?: (enabled: boolean) => void;
-  label: string;
-  valid?: boolean;
-  validationMessage?: string;
-  checked?: boolean;
-}
-
-export const Toggle = ({
-  action,
-  label,
-  valid,
-  validationMessage,
-  checked,
-  id,
-  ...props
-}: ToggleProps): JSX.Element => {
-  const [enabled, setEnabled] = React.useState(false);
-  React.useEffect(() => {
-    if (checked !== undefined) {
-      setEnabled(checked);
-    }
-  }, [checked]);
-
-  const handleToggle = (enabled: boolean) => {
-    setEnabled(enabled);
-    if (action) {
-      action(enabled);
-    }
-  };
-
-  return (
-    <div className="flex flex-col w-full">
-      <Label label={label} />
-      {/* <label
-        htmlFor={id}
-        className="block text-sm font-medium text-black dark:text-white"
-      >
-        {label}
-      </label> */}
-      <div className="ml-auto">
-        <Switch
-          id={id}
-          {...props}
-          checked={enabled}
-          onChange={handleToggle}
-          className={`${
-            enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
-          }
-          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
-        >
-          <span className="sr-only">Use setting</span>
-          <span
-            aria-hidden="true"
-            className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
-            pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
-          />
-        </Switch>
-      </div>
-      {!valid && (
-        <div className="text-sm text-gray-600">{validationMessage}</div>
-      )}
-    </div>
-  );
-};

src/components/generic/form/Checkbox.tsx

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

src/components/generic/form/Input.tsx

@@ -19,7 +19,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <InputWrapper error={error} disabled={props.disabled}>
           <input
             ref={ref}
-            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary"
+            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none"
             {...props}
           />
           {action && <div className="flex mr-1">{action}</div>}

src/components/generic/form/Label.tsx

@@ -6,8 +6,9 @@ export interface LabelProps {
 }
 
 export const Label = ({ label, error }: LabelProps): JSX.Element => (
-  <label className="text-xs font-semibold text-gray-500">
+  <label className="flex py-1 text-xs font-semibold text-gray-500">
     {label}
     {error && <span className="ml-2 text-red-500">{error}</span>}
+    <div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-600 bg-gray-500" />
   </label>
 );

src/components/generic/form/Select.tsx

@@ -16,7 +16,7 @@ interface SelectProps extends DefaultSelectProps {
   small?: boolean;
 }
 
-export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   ({ options, optionsEnum, label, error, small, ...props }, ref) => {
     const optionsEnumValues = optionsEnum
       ? Object.entries(optionsEnum).filter(
@@ -29,7 +29,7 @@ export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full  bg-transparent focus:outline-none focus:border-primary ${
+            className={`w-full bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
               small ? 'py-1 mx-1' : 'h-10 mx-2'
             }`}
             disabled={