feat(app): add SimpleSelect

packages/app/src/components/select.tsx

@@ -0,0 +1,29 @@
+// copied from https://github.com/hi-ogawa/ytsub-v3/blob/2c5b5978021658260b9bdf079ecb0dc8926bd98d/app/components/misc.tsx#L178
+export function SimpleSelect<T>({
+  value,
+  options,
+  onChange,
+  labelFn = String, // convenient default when `T extends string`
+  keyFn = (v) => JSON.stringify({ v }), // wrap it so that `undefined` becomes `{}`
+  ...selectProps
+}: {
+  value: T;
+  options: readonly T[];
+  onChange: (value: T) => void;
+  labelFn?: (value: T) => React.ReactNode;
+  keyFn?: (value: T) => React.Key;
+} & Omit<JSX.IntrinsicElements["select"], "value" | "onChange">) {
+  return (
+    <select
+      value={options.indexOf(value)}
+      onChange={(e) => onChange(options[Number(e.target.value)])}
+      {...selectProps}
+    >
+      {options.map((option, i) => (
+        <option key={keyFn(option)} value={i}>
+          {labelFn(option)}
+        </option>
+      ))}
+    </select>
+  );
+}

packages/app/src/components/stories.tsx

@@ -10,6 +10,7 @@ import { cls } from "../utils/misc";
 import { getCollapseProps } from "./collapse";
 import { useModal } from "./modal";
 import { PopoverSimple } from "./popover";
+import { SimpleSelect } from "./select";
 import { SnackbarConainer } from "./snackbar";
 import { useSnackbar } from "./snackbar-hook";
 import { TopProgressBar, useProgress } from "./top-progress-bar";
@@ -122,11 +123,13 @@ const ANTD_COLORS_OPTIONS = Object.entries(ANTD_COLORS).map(
 export function StoryColor() {
   const form = useForm({
     defaultValues: {
+      useReactSelect: true,
       color: ANTD_VARS.colorText,
       backgroundColor: ANTD_VARS.colorBgContainer,
       borderColor: ANTD_VARS.colorBorderSecondary,
     },
   });
+  const { useReactSelect } = form.watch();
 
   return (
     <div className="flex flex-col items-center gap-3 m-2">
@@ -143,6 +146,10 @@ export function StoryColor() {
             </div>
           </div>
           <div className="border-t my-1"></div>
+          <label className="flex items-center gap-2">
+            <span className="text-colorTextLabel">Use react-select</span>
+            <input type="checkbox" {...form.register("useReactSelect")} />
+          </label>
           {renderField("color", "Text")}
           {renderField("backgroundColor", "Background")}
           {renderField("borderColor", "Border")}
@@ -165,28 +172,40 @@ export function StoryColor() {
         <Controller
           control={form.control}
           name={name}
-          render={({ field }) => (
+          render={({ field }) =>
             // TODO: preview by hover?
-            <ReactSelect
-              unstyled
-              options={ANTD_COLORS_OPTIONS}
-              value={ANTD_COLORS_OPTIONS.find(
-                (option) => option.value === field.value
-              )}
-              onChange={(option) => field.onChange(option?.value)}
-              classNames={{
-                control: () => "antd-input px-2",
-                placeholder: () => "text-colorTextSecondary",
-                menu: () => "border antd-floating mt-2",
-                menuList: () => "flex flex-col gap-1 py-1",
-                option: (state) =>
-                  cls(
-                    "antd-menu-item cursor-pointer p-1 px-2 text-sm",
-                    state.isSelected && "antd-menu-item-active"
-                  ),
-              }}
-            />
-          )}
+            useReactSelect ? (
+              <ReactSelect
+                unstyled
+                options={ANTD_COLORS_OPTIONS}
+                value={ANTD_COLORS_OPTIONS.find(
+                  (option) => option.value === field.value
+                )}
+                onChange={(option) => field.onChange(option?.value)}
+                classNames={{
+                  control: () => "antd-input px-2",
+                  placeholder: () => "text-colorTextSecondary",
+                  menu: () => "border antd-floating mt-2",
+                  menuList: () => "flex flex-col gap-1 py-1",
+                  option: (state) =>
+                    cls(
+                      "antd-menu-item cursor-pointer p-1 px-2 text-sm",
+                      state.isSelected && "antd-menu-item-active"
+                    ),
+                }}
+              />
+            ) : (
+              <SimpleSelect
+                className="antd-input p-2"
+                value={ANTD_COLORS_OPTIONS.find(
+                  (option) => option.value === field.value
+                )}
+                options={ANTD_COLORS_OPTIONS}
+                onChange={(option) => field.onChange(option?.value)}
+                labelFn={(v) => v?.label}
+              />
+            )
+          }
         />
       </label>
     );