refactor(console): support generic type in select component

packages/console/src/components/Select/index.tsx

@@ -8,22 +8,22 @@ import Dropdown, { DropdownItem } from '../Dropdown';
 import IconButton from '../IconButton';
 import * as styles from './index.module.scss';
 
-type Option = {
-  value: string;
+type Option<T> = {
+  value: T;
   title: ReactNode;
 };
 
-type Props = {
-  value?: string;
-  options: Option[];
-  onChange?: (value?: string) => void;
+type Props<T> = {
+  value?: T;
+  options: Array<Option<T>>;
+  onChange?: (value?: T) => void;
   isReadOnly?: boolean;
   hasError?: boolean;
   placeholder?: ReactNode;
   isClearable?: boolean;
 };
 
-const Select = ({
+const Select = <T extends string>({
   value,
   options,
   onChange,
@@ -31,12 +31,12 @@ const Select = ({
   hasError,
   placeholder,
   isClearable,
-}: Props) => {
+}: Props<T>) => {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLInputElement>(null);
   const current = options.find((option) => value && option.value === value);
 
-  const handleSelect = (value: string) => {
+  const handleSelect = (value: T) => {
     onChange?.(value);
     setIsOpen(false);
   };

packages/console/src/pages/SignInExperience/components/Preview.tsx

@@ -88,7 +88,9 @@ const Preview = ({ signInExperience, className }: Props) => {
               { value: Language.Chinese, title: t('sign_in_exp.preview.languages.chinese') },
             ]}
             onChange={(value) => {
-              setLanguage(value as Language);
+              if (value) {
+                setLanguage(value);
+              }
             }}
           />
           <Select
@@ -98,7 +100,9 @@ const Preview = ({ signInExperience, className }: Props) => {
               { value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') },
             ]}
             onChange={(value) => {
-              setMode(value as AppearanceMode);
+              if (value) {
+                setMode(value);
+              }
             }}
           />
         </div>

packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx

@@ -89,7 +89,7 @@ const SignInMethodsForm = () => {
               onChange={(value) => {
                 const oldPrimaryMethod = getValues('signInMethods.primary');
                 onChange(value);
-                postPrimaryMethodChange(oldPrimaryMethod, value as SignInMethodKey);
+                postPrimaryMethodChange(oldPrimaryMethod, value);
               }}
             />
           )}