fix: ui bugs (#1631)

Author: chiol

apps/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "next build",
     "clean": "git clean -xdf .next .turbo node_modules coverage .swc .cache",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path .prettierignore",
     "format:fix": "prettier --write --list-different \"./src/**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "generate-api-type": "openapi-typescript http://0.0.0.0:4000/admin-docs-json --output src/shared/types/api.type.ts --default-non-nullable=false --empty-objects-unknown",

apps/web/src/shared/ui/inputs/select-input.ui.tsx

@@ -15,8 +15,6 @@
  */
 import type { IconNameType, Size } from '@ufb/react';
 import {
-  Button,
-  Icon,
   Select,
   SelectCaption,
   SelectContent,
@@ -40,7 +38,6 @@ interface Props {
   type?: 'single' | 'multiple';
   error?: string;
   size?: Size;
-  clearable?: boolean;
 }
 
 const SelectInput: React.FC<Props> = (props) => {
@@ -57,7 +54,6 @@ const SelectInput: React.FC<Props> = (props) => {
     type = 'single',
     error,
     size,
-    clearable = false,
   } = props;
 
   return (
@@ -77,18 +73,6 @@ const SelectInput: React.FC<Props> = (props) => {
       )}
       <SelectTrigger>
         <SelectValue placeholder={placeholder} />
-        {clearable && (!!value || (!!values && values.length > 0)) && (
-          <Button variant="ghost" onClick={(e) => e.stopPropagation()}>
-            <Icon
-              name="RiCloseCircleFill"
-              className="z-20"
-              onClick={() => {
-                onChange?.(undefined);
-                onValuesChange?.([]);
-              }}
-            />
-          </Button>
-        )}
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>

apps/web/src/widgets/channel-settings/ui/channel-info-setting.ui.tsx

@@ -43,10 +43,11 @@ interface IProps {
 const ChannelInfoSetting: React.FC<IProps> = ({ channelId, projectId }) => {
   const { t } = useTranslation();
 
+  const router = useRouter();
   const perms = usePermissions(projectId);
   const overlay = useOverlay();
-  const router = useRouter();
   const { refetch: refetchChannels } = useAllChannels(projectId);
+
   const methods = useForm<ChannelInfo>({
     resolver: zodResolver(channelInfoSchema),
   });
@@ -86,7 +87,6 @@ const ChannelInfoSetting: React.FC<IProps> = ({ channelId, projectId }) => {
   });
 
   useEffect(() => {
-    if (!data) return;
     methods.reset(data);
   }, [data]);
 

apps/web/src/widgets/layout/ui/project-select-box.ui.tsx

@@ -85,7 +85,7 @@ const ProjectSelectBox: React.FC<IProps> = ({ projectId }) => {
 
   return (
     <Tooltip open={!projectId}>
-      <TooltipTrigger asChild>
+      <TooltipTrigger>
         <Select
           type="single"
           value={projectId ? String(projectId) : ''}

packages/ufb-react/src/components/select.tsx

@@ -93,6 +93,7 @@ const Select = ({
   );
 
   const handleSingleValueChange = (value: string) => {
+    if (value === '') return;
     setSingleValue(value);
     onValueChange?.(value);
   };
@@ -105,7 +106,7 @@ const Select = ({
   React.useEffect(() => {
     if (singleValue === value) return;
     setSingleValue(value);
-  }, [value, singleValue]);
+  }, [value]);
 
   React.useEffect(() => {
     if (
@@ -114,7 +115,8 @@ const Select = ({
     )
       return;
     setMultipleValues(values);
-  }, [values, multipleValues]);
+  }, [values]);
+
   return (
     <SelectContext.Provider
       value={{