feat(select): start using @snailycad/ui select

apps/client/src/components/account/appearance-tab.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
-import { FormField } from "components/form/FormField";
 import { useAuth } from "context/AuthContext";
 import { Form, Formik } from "formik";
 import useFetch from "lib/useFetch";
 import { useTranslations } from "use-intl";
 import { StatusViewMode, TableActionsAlignment } from "@snailycad/types";
-import { Select } from "components/form/Select";
 import {
   Button,
   Loader,
@@ -106,7 +104,7 @@ export function AppearanceTab({ availableSounds }: Props) {
       <TabsContent aria-label={t("appearanceSettings")} value="appearanceSettings">
         <h1 className="text-2xl font-semibold">{t("appearanceSettings")}</h1>
         <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-          {({ handleChange, setFieldValue, values, errors }) => (
+          {({ setFieldValue, values, errors }) => (
             <Form className="mt-3">
               <SwitchField
                 isSelected={values.developerMode}
@@ -168,18 +166,19 @@ export function AppearanceTab({ availableSounds }: Props) {
                       {t("speech")}
                     </SwitchField>
 
-                    <FormField label={t("speechVoice")}>
-                      <Select
-                        disabled={!values.soundSettings.speech}
-                        values={voices.map((voice) => ({
-                          label: voice.name,
-                          value: voice.voiceURI,
-                        }))}
-                        value={values.soundSettings.speechVoice}
-                        onChange={handleChange}
-                        name="soundSettings.speechVoice"
-                      />
-                    </FormField>
+                    <SelectField
+                      isClearable
+                      label={t("speechVoice")}
+                      isDisabled={!values.soundSettings.speech}
+                      options={voices.map((voice) => ({
+                        label: voice.name,
+                        value: voice.voiceURI,
+                      }))}
+                      selectedKey={values.soundSettings.speechVoice}
+                      onSelectionChange={(value) =>
+                        setFieldValue("soundSettings.speechVoice", value)
+                      }
+                    />
                   </section>
                 ) : null}
 

apps/client/src/components/admin/manage/cad-settings/general-settings-tab.tsx

@@ -187,7 +187,7 @@ export function GeneralSettingsTab() {
                 description={t("towWhitelistDescription")}
               >
                 <SwitchField
-                  aria-label={t("towWhitelisted")}
+                  aria-label={t("towWhitelist")}
                   isSelected={values.towWhitelisted}
                   onChange={(isSelected) => setFieldValue("towWhitelisted", isSelected)}
                 />
@@ -200,7 +200,7 @@ export function GeneralSettingsTab() {
                 description={t("taxiWhitelistDescription")}
               >
                 <SwitchField
-                  aria-label={t("taxiWhitelisted")}
+                  aria-label={t("taxiWhitelist")}
                   isSelected={values.taxiWhitelisted}
                   onChange={(isSelected) => setFieldValue("taxiWhitelisted", isSelected)}
                 />
@@ -213,7 +213,7 @@ export function GeneralSettingsTab() {
                 description={t("businessWhitelistDescription")}
               >
                 <SwitchField
-                  aria-label={t("businessWhitelisted")}
+                  aria-label={t("businessWhitelist")}
                   isSelected={values.businessWhitelisted}
                   onChange={(isSelected) => setFieldValue("businessWhitelisted", isSelected)}
                 />

apps/client/src/components/admin/manage/citizens/AdvancedCitizensTab.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { FormField } from "components/form/FormField";
 import { Button, Loader, TextField, FormRow } from "@snailycad/ui";
 import { v4 } from "uuid";
-import { Select } from "components/form/Select";
 import { useValues } from "context/ValuesContext";
 import useFetch from "lib/useFetch";
 import { X } from "react-bootstrap-icons";
 import { ImportModal } from "components/admin/import/ImportModal";
 import { ModalIds } from "types/modal-ids";
 import type { PostImportCitizensData } from "@snailycad/types/api";
 import { useTranslations } from "use-intl";
+import { ValueSelectField } from "components/form/inputs/value-select-field";
+import { ValueType } from "@snailycad/types";
 
 export function AdvancedCitizensTab() {
   const [citizens, setCitizens] = React.useState<Record<string, any>>(createInitialCitizen());
@@ -89,27 +89,21 @@ export function AdvancedCitizensTab() {
                 onBlur={(e) => handleChange("dateOfBirth", id, e)}
               />
 
-              {/* todo: use async search field (see: manage-citizen-form) */}
-              <FormField className="w-full" label="Gender">
-                <Select
-                  value={value.gender}
-                  onChange={(event) => handleChange("gender", id, event)}
-                  values={gender.values.map((gender) => ({
-                    value: gender.id,
-                    label: gender.value,
-                  }))}
+              <FormRow>
+                <ValueSelectField
+                  fieldName="gender"
+                  valueType={ValueType.GENDER}
+                  values={gender.values}
+                  label={t("gender")}
                 />
-              </FormField>
-              <FormField className="w-full" label={t("Citizen.ethnicity")}>
-                <Select
-                  value={value.ethnicity}
-                  onChange={(event) => handleChange("ethnicity", id, event)}
-                  values={ethnicity.values.map((ethnicity) => ({
-                    value: ethnicity.id,
-                    label: ethnicity.value,
-                  }))}
+
+                <ValueSelectField
+                  fieldName="ethnicity"
+                  valueType={ValueType.ETHNICITY}
+                  values={ethnicity.values}
+                  label={t("ethnicity")}
                 />
-              </FormField>
+              </FormRow>
             </FormRow>
           );
         })}

apps/client/src/components/admin/manage/citizens/all-citizens-tab.tsx

@@ -2,11 +2,9 @@ import * as React from "react";
 import { useModal } from "state/modalState";
 import useFetch from "lib/useFetch";
 import { ModalIds } from "types/modal-ids";
-import { Loader, Button, buttonVariants, TextField } from "@snailycad/ui";
+import { Loader, Button, buttonVariants, TextField, SelectField } from "@snailycad/ui";
 import { useTranslations } from "next-intl";
-import { FormField } from "components/form/FormField";
 import { Table, useTableState } from "components/shared/Table";
-import { Select } from "components/form/Select";
 import Link from "next/link";
 import { FullDate } from "components/shared/FullDate";
 import { usePermission, Permissions } from "hooks/usePermission";
@@ -97,22 +95,22 @@ export function AllCitizensTab({ citizens: initialData, totalCount, setCitizens
               ) : null}
             </TextField>
 
-            <FormField className="w-40" label={t("filter")}>
-              <Select
-                isClearable
-                value={asyncTable.filters?.userId ?? null}
-                onChange={(e) =>
-                  asyncTable.setFilters((prevFilters) => ({
-                    ...prevFilters,
-                    userId: e?.target.value,
-                  }))
-                }
-                values={users.map((u) => ({
-                  label: u.username,
-                  value: u.id,
-                }))}
-              />
-            </FormField>
+            <SelectField
+              className="w-64"
+              label={t("filter")}
+              isClearable
+              selectedKey={asyncTable.filters?.userId ?? null}
+              options={users.map((u) => ({
+                value: u.id,
+                label: u.username,
+              }))}
+              onSelectionChange={(value) => {
+                asyncTable.setFilters((prevFilters) => ({
+                  ...prevFilters,
+                  userId: value,
+                }));
+              }}
+            />
           </div>
 
           {search && asyncTable.pagination.totalDataCount !== totalCount ? (

apps/client/src/components/admin/manage/custom-roles/manage-custom-roles-modal.tsx

@@ -1,14 +1,12 @@
 import * as React from "react";
-import { FormField } from "components/form/FormField";
-import { Button, Loader, TextField } from "@snailycad/ui";
+import { Button, Loader, SelectField, TextField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import { Form, Formik, FormikHelpers } from "formik";
 import { handleValidate } from "lib/handleValidate";
 import useFetch from "lib/useFetch";
 import { useModal } from "state/modalState";
 import type { CustomRole, DiscordRole } from "@snailycad/types";
 import { useTranslations } from "use-intl";
-import { Select } from "components/form/Select";
 import { ModalIds } from "types/modal-ids";
 import { CUSTOM_ROLE_SCHEMA } from "@snailycad/schemas";
 import { Permissions } from "@snailycad/permissions";
@@ -45,6 +43,7 @@ export function ManageCustomRolesModal({ role, onClose, onCreate, onUpdate }: Pr
     const { json } = await execute<GetCADDiscordRolesData>({
       path: "/admin/manage/cad-settings/discord/roles",
       method: "GET",
+      noToast: true,
     });
 
     if (Array.isArray(json)) {
@@ -64,7 +63,7 @@ export function ManageCustomRolesModal({ role, onClose, onCreate, onUpdate }: Pr
 
     const data = {
       ...values,
-      permissions: values.permissions.map((v) => v.value),
+      permissions: values.permissions.map((v) => v),
     };
 
     if (role) {
@@ -118,11 +117,7 @@ export function ManageCustomRolesModal({ role, onClose, onCreate, onUpdate }: Pr
   const INITIAL_VALUES = {
     name: role?.name ?? "",
     discordRoleId: role?.discordRoleId ?? null,
-    permissions:
-      role?.permissions.map((v) => ({
-        value: v,
-        label: v,
-      })) ?? [],
+    permissions: role?.permissions ?? [],
   };
 
   const validate = handleValidate(CUSTOM_ROLE_SCHEMA);
@@ -134,7 +129,7 @@ export function ManageCustomRolesModal({ role, onClose, onCreate, onUpdate }: Pr
       isOpen={isOpen(ModalIds.ManageCustomRole)}
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setFieldValue, values, errors }) => (
+        {({ setFieldValue, values, errors }) => (
           <Form>
             <TextField
               errorMessage={errors.name}
@@ -145,36 +140,29 @@ export function ManageCustomRolesModal({ role, onClose, onCreate, onUpdate }: Pr
               value={values.name}
             />
 
-            <FormField errorMessage={errors.permissions as string} label={t("permissions")}>
-              <Select
-                isMulti
-                closeMenuOnSelect={false}
-                values={Object.values(Permissions).map((permission) => ({
-                  value: permission,
-                  label: tPermission(permission),
-                }))}
-                value={values.permissions}
-                name="permissions"
-                onChange={handleChange}
-              />
-            </FormField>
-
-            <FormField
-              optional
-              errorMessage={errors.discordRoleId as string}
+            <SelectField
+              label={t("permissions")}
+              errorMessage={errors.permissions}
+              selectionMode="multiple"
+              selectedKeys={values.permissions}
+              options={Object.values(Permissions).map((permission) => ({
+                value: permission,
+                label: tPermission(permission),
+              }))}
+              onSelectionChange={(keys) => setFieldValue("permissions", keys)}
+            />
+
+            <SelectField
+              errorMessage={errors.discordRoleId}
+              isOptional
               label={t("discordRole")}
-            >
-              <Select
-                values={discordRoles.map((role) => ({
-                  value: role.id,
-                  label: role.name,
-                }))}
-                value={values.discordRoleId}
-                name="discordRoleId"
-                onChange={handleChange}
-                isClearable
-              />
-            </FormField>
+              isClearable
+              options={discordRoles.map((role) => ({
+                value: role.id,
+                label: role.name,
+              }))}
+              selectedKey={values.discordRoleId}
+            />
 
             <ImageSelectInput image={image} setImage={setImage} />
 

apps/client/src/components/admin/manage/units/AddQualificationsModal.tsx

@@ -1,11 +1,10 @@
-import { QualificationValueType } from "@snailycad/types";
+import { QualificationValueType, ValueType } from "@snailycad/types";
 import type {
   GetManageUnitByIdData,
   PostManageUnitAddQualificationData,
 } from "@snailycad/types/api";
 import { Loader, Button } from "@snailycad/ui";
-import { FormField } from "components/form/FormField";
-import { Select } from "components/form/Select";
+import { ValueSelectField } from "components/form/inputs/value-select-field";
 import { Modal } from "components/modal/Modal";
 import { useValues } from "context/ValuesContext";
 import { Form, Formik } from "formik";
@@ -56,31 +55,22 @@ export function AddQualificationsModal({ unit, setUnit }: Props) {
       className="min-w-[600px]"
     >
       <Formik initialValues={INITIAL_VALUES} onSubmit={handleSubmit}>
-        {({ handleChange, errors, values, isValid }) => (
+        {({ isValid }) => (
           <Form>
-            <FormField
-              errorMessage={errors.qualificationId}
+            <ValueSelectField
+              fieldName="qualificationId"
+              values={qualification.values}
               label={
                 type === QualificationValueType.AWARD ? t("Leo.award") : t("Leo.qualification")
               }
-            >
-              <Select
-                value={values.qualificationId}
-                name="qualificationId"
-                onChange={handleChange}
-                values={qualification.values
-                  .filter((v) => {
-                    return !v.departments?.length
-                      ? v.qualificationType === type
-                      : v.departments.some((v) => unit.departmentId === v.id) &&
-                          v.qualificationType === type;
-                  })
-                  .map((q) => ({
-                    value: q.id,
-                    label: q.value.value,
-                  }))}
-              />
-            </FormField>
+              valueType={ValueType.QUALIFICATION}
+              filterFn={(value) => {
+                return !value.departments?.length
+                  ? value.qualificationType === type
+                  : value.departments.some((v) => unit.departmentId === v.id) &&
+                      value.qualificationType === type;
+              }}
+            />
 
             <footer className="flex justify-end mt-5">
               <Button type="reset" onPress={handleClose} variant="cancel">