@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.0

package/src/components/FileItem/FileItem.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
 import { FileItemProps } from '@/components/FileItem/FileItem.types';
 import {
@@ -27,7 +27,6 @@ export const FileItem = ({
   isDeleting = false,
   ...rest
 }: FileItemProps) => {
-  const theme = useTheme();
   const errorColor = 'danger.main';
 
   const isUploadingFile =
@@ -60,14 +59,14 @@ export const FileItem = ({
         <Box minW={5}>
           <CiFileOn color={error ? errorColor : 'gray.800'} />
         </Box>
-        <Text isTruncated color={error ? errorColor : undefined}>
+        <Text truncate color={error ? errorColor : undefined}>
           {fileName}
         </Text>
       </Flex>
       <Flex align="center" gap={2} flex={1}>
         {error ? (
           <Flex w="100%" justify="flex-end" align="center" gap={2}>
-            <Tooltip label={error} placement="top" shouldWrapChildren>
+            <Tooltip content={error} placement="top">
               <MdError color={errorColor} />
             </Tooltip>
             {/* TODO: implement retry button */}
@@ -82,10 +81,13 @@ export const FileItem = ({
                 <IconButton
                   aria-label={'remove uploading file button'}
                   onClick={onFileDelete}
-                  icon={<IoClose color="gray.600" boxSize="lg" />}
-                  size="xs"
-                  isDisabled={isDeleting}
-                />
+                  size="2xs"
+                  disabled={isDeleting}
+                  colorPalette="neutral"
+                  variant="ghost"
+                >
+                  <IoClose color="gray.600" boxSize="md" />
+                </IconButton>
               </Flex>
             )}
           </Box>
@@ -97,24 +99,28 @@ export const FileItem = ({
               <IconButton
                 aria-label={'download uploaded file button'}
                 onClick={onFileDownload}
-                icon={<LuDownload color="gray.800" />}
-                size="xs"
-              />
+                size="2xs"
+                colorPalette="neutral"
+                variant="ghost"
+              >
+                <LuDownload color="gray.800" />
+              </IconButton>
             )}
             {onFileDelete && (
               <IconButton
                 aria-label={'remove uploaded file button'}
                 onClick={onFileDelete}
-                icon={
-                  isDeleting ? (
-                    <Spinner size="xs" />
-                  ) : (
-                    <FaRegTrashAlt boxSize="sm" />
-                  )
-                }
-                size="xs"
-                isDisabled={isDeleting}
-              />
+                size="2xs"
+                disabled={isDeleting}
+                colorPalette="neutral"
+                variant="ghost"
+              >
+                {isDeleting ? (
+                  <Spinner size="xs" />
+                ) : (
+                  <FaRegTrashAlt boxSize="sm" color="gray.800" />
+                )}
+              </IconButton>
             )}
           </Fragment>
         )}

package/src/components/FileList/FileList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, List } from '@chakra-ui/react';
+import { Box, Button, List } from '@chakra-ui/react';
 
 import { FileItem } from '@/components/FileItem';
 import { FileGroupProps } from '@/components/FileList/FileList.types';
@@ -45,40 +45,51 @@ export const FileList = ({
   if (files?.length <= 0) return null;
 
   return (
-    <List
+    <Box
       w="100%"
       border="1px solid"
       borderColor="gray.200"
       borderRadius="md"
       overflow="hidden"
     >
-      {files?.slice(0, currentVisibleCount).map((file) => (
-        <FileItem
-          key={file.id}
-          fileName={file.name}
-          onFileDelete={onFileDelete ? () => handleFileDelete(file) : undefined}
-          onFileDownload={
-            onFileDownload && file.fileUrl
-              ? () => onFileDownload?.(file)
-              : undefined
-          }
-          border={0}
-          borderBottom="1px solid"
-          borderBottomColor="gray.50"
-          progress={file.progress}
-          error={file.error}
-          fileSize={file.size}
-          isDeleting={deletingFileIds.has(file.id)}
-        />
-      ))}
+      <List.Root>
+        {files?.slice(0, currentVisibleCount).map((file) => (
+          <List.Item key={file.id} listStyle="none">
+            <FileItem
+              fileName={file.name}
+              onFileDelete={
+                onFileDelete ? () => handleFileDelete(file) : undefined
+              }
+              onFileDownload={
+                onFileDownload && file.fileUrl
+                  ? () => onFileDownload?.(file)
+                  : undefined
+              }
+              border={0}
+              borderBottom="1px solid"
+              borderBottomColor="gray.50"
+              progress={file.progress}
+              error={file.error}
+              fileSize={file.size}
+              isDeleting={deletingFileIds.has(file.id)}
+            />
+          </List.Item>
+        ))}
+      </List.Root>
       {shouldShowLoadMoreButton && (
         <Button
           onClick={handleFileLoadMore}
           alignSelf="stretch"
           w="100%"
-          variant="unstyled"
+          variant="ghost"
           display="flex"
           gap={1}
+          css={{
+            all: 'unset',
+            display: 'flex',
+            gap: '0.25rem',
+            cursor: 'pointer',
+          }}
         >
           <Subtitle color="gray.600">
             {translate('see_more')} ({visibleCount}/{files.length})
@@ -86,7 +97,7 @@ export const FileList = ({
           <IoChevronDownOutline color="gray.600" />
         </Button>
       )}
-    </List>
+    </Box>
   );
 };
 

package/src/components/FormControl/FormControl.tsx

@@ -1,11 +1,11 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { FormControl as ChakraFormControl } from '@chakra-ui/react';
+import { Field } from '@chakra-ui/react';
 
 import { FormControlProps } from './FormControl.types';
 
 export const FormControl = forwardRef(
   ({ ...rest }: FormControlProps, ref?: ForwardedRef<HTMLDivElement>) => {
-    return <ChakraFormControl noValidate {...rest} ref={ref} />;
+    return <Field.Root {...rest} ref={ref} />;
   }
 );
 

package/src/components/FormControl/FormControl.types.ts

@@ -1,3 +1,3 @@
-import { FormControlProps as ChakraFormControlProps } from '@chakra-ui/react';
+import { Field } from '@chakra-ui/react';
 
-export interface FormControlProps extends ChakraFormControlProps {}
+export interface FormControlProps extends Field.RootProps {}

package/src/components/FormLabel/FormLabel.tsx

@@ -1,5 +1,14 @@
-import { FormLabel as ChakraFormLabel, FormLabelProps } from '@chakra-ui/react';
+import { Box, Field } from '@chakra-ui/react';
 
-export const FormLabel = (props: FormLabelProps) => (
-  <ChakraFormLabel color="gray.1000" mb={0.5} marginInlineEnd={0} {...props} />
+export const FormLabel = (props: Field.LabelProps) => (
+  <Box color="gray.1000">
+    <Field.Label
+      {...props}
+      style={{
+        marginBottom: '0.125rem',
+        marginInlineEnd: 0,
+        ...(props.style || {}),
+      }}
+    />
+  </Box>
 );

package/src/components/Icon/Icon.stories.tsx

@@ -23,13 +23,13 @@ const IconGroup = ({ title, icons, color = "gray.700" }: {
   color?: string;
 }) => (
   <Box mb={6}>
-    <Text fontSize="md" fontWeight="bold" mb={3}>{title}</Text>
-    <Wrap spacing={6}>
+    <Text fontWeight="bold" mb={3}>{title}</Text>
+    <Wrap gap={6}>
       {icons.map(({ component: IconComponent, name }) => (
         <WrapItem key={name}>
-          <VStack spacing={4} p={2} borderRadius="md" bg="gray.50" minW="140px" maxW="140px">
+          <VStack gap={4} p={2} borderRadius="md" bg="gray.50" minW="140px" maxW="140px">
             <IconComponent boxSize="24px" color={color} />
-            <Text fontSize="12px" color="gray.1500" textAlign="center" lineHeight="1.1" noOfLines={2}>
+            <Text fontSize="12px" color="gray.1500" textAlign="center" lineHeight="1.1" lineClamp={2}>
               {name}
             </Text>
           </VStack>
@@ -78,8 +78,8 @@ export const AllIcons: Story = {
     const totalCount = Object.values(iconCategories).reduce((sum, arr) => sum + arr.length, 0);
 
     return (
-      <VStack spacing={4} align="start">
-        <Text fontSize="sm" fontWeight="bold">모든 아이콘 라이브러리 (총 {totalCount}개) - 자동 생성됨! 🎉</Text>
+      <VStack gap={4} align="start">
+        <Text fontWeight="bold">모든 아이콘 라이브러리 (총 {totalCount}개) - 자동 생성됨! 🎉</Text>
 
         <IconGroup
           title={`🎨 커스텀 SVG 아이콘 (${iconCategories.customSvg.length}개)`}
@@ -122,20 +122,20 @@ export const BasicUsage: Story = {
     }, []);
 
     return (
-      <VStack spacing={6} align="start">
-        <Text fontSize="sm" fontWeight="bold">기본 사용법</Text>
+      <VStack gap={6} align="start">
+        <Text fontWeight="bold">기본 사용법</Text>
         <Text color="gray.600" mb={4}>
           각 아이콘을 개별적으로 import해서 사용할 수 있습니다.
         </Text>
 
-        <SimpleGrid columns={3} spacing={8}>
+        <SimpleGrid columns={3} gap={8}>
           {sampleIcons.map(({ name, type, color }) => {
             const IconComponent = Icons[name];
             return IconComponent ? (
               <VStack key={name}>
                 <IconComponent boxSize="xs" color={color} />
-                <Text fontSize="sm" fontWeight="bold">&lt;{name} /&gt;</Text>
-                <Text fontSize="sm" color="gray.500">{type}</Text>
+                <Text fontWeight="bold">&lt;{name} /&gt;</Text>
+                <Text color="gray.500">{type}</Text>
               </VStack>
             ) : null;
           })}
@@ -152,13 +152,13 @@ export const Sizes: Story = {
     const SampleIcon = Icons[sampleIconName];
 
     return (
-      <VStack maxW="1400px" spacing={4} align="start">
-        <Text fontSize="sm" fontWeight="bold">크기 조절</Text>
-        <HStack spacing={4} align="center">
+      <VStack maxW="1400px" gap={4} align="start">
+        <Text fontWeight="bold">크기 조절</Text>
+        <HStack gap={4} align="center">
           {['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
             <VStack key={size}>
               <SampleIcon boxSize={size} color="blue.500" />
-              <Text fontSize="sm">{size}</Text>
+              <Text textStyle="subtext">{size}</Text>
             </VStack>
           ))}
         </HStack>
@@ -176,13 +176,13 @@ export const Colors: Story = {
     const colors = ['red.500', 'green.500', 'blue.500', 'purple.500', 'orange.500'];
 
     return (
-      <VStack spacing={4} align="start">
-        <Text fontSize="sm" fontWeight="bold">색상 조절</Text>
-        <HStack spacing={6}>
+      <VStack gap={4} align="start">
+        <Text fontWeight="bold">색상 조절</Text>
+        <HStack gap={6}>
           {colors.map((color) => (
             <VStack key={color}>
               <SampleIcon boxSize="sm" color={color} />
-              <Text fontSize="sm">{color}</Text>
+              <Text textStyle="subtext">{color}</Text>
             </VStack>
           ))}
         </HStack>
@@ -197,17 +197,17 @@ const CustomDashboardIcon = createIcon(MdDashboard, 'CustomDashboardIcon');
 
 export const CreateIconDemo: Story = {
   render: () => (
-  <VStack spacing={8} align="start" maxW="900px">
+  <VStack gap={8} align="start" maxW="900px">
     <Box>
-      <Text fontSize="lg" fontWeight="bold" mb={4}>createIcon 유틸리티 사용법</Text>
-      <Text fontSize="sm" color="gray.600" mb={4}>
+      <Text textStyle="h5" fontWeight="bold" mb={4}>createIcon 유틸리티 사용법</Text>
+      <Text color="gray.600" mb={4}>
         <Code>createIcon</Code> 유틸리티를 사용하면 React Icons나 커스텀 SVG를 logician-ui의 아이콘 시스템으로 쉽게 변환할 수 있습니다.
       </Text>
     </Box>
 
     <Box w="100%" bg="gray.50" p={4} borderRadius="md">
-      <Text fontSize="md" fontWeight="bold" mb={3}>1. React Icons로 커스텀 아이콘 생성</Text>
-      <Code display="block" whiteSpace="pre" p={3} mb={4} fontSize="xs">
+      <Text fontWeight="bold" mb={3}>1. React Icons로 커스텀 아이콘 생성</Text>
+      <Code display="block" whiteSpace="pre" p={3} mb={4} textStyle="subtext">
 {`import { createIcon } from '@mindlogic-ai/logician-ui';
 import { FaBuildingUser } from 'react-icons/fa6';
 
@@ -221,35 +221,35 @@ const CustomBuildingIcon = createIcon(
       </Code>
 
       <Box borderTop="1px solid" borderColor="gray.200" pt={4}>
-        <Text fontSize="sm" fontWeight="semibold" mb={3}>결과:</Text>
-        <HStack spacing={6}>
+        <Text fontWeight="semibold" mb={3}>결과:</Text>
+        <HStack gap={6}>
           <VStack>
             <CustomBuildingIcon boxSize="xs" color="blue.500" />
-            <Text fontSize="xs">xs (16px)</Text>
+            <Text textStyle="subtext">xs (16px)</Text>
           </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="sm" color="blue.500" />
-            <Text fontSize="xs">sm (20px)</Text>
+            <Text textStyle="subtext">sm (20px)</Text>
           </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="md" color="blue.500" />
-            <Text fontSize="xs">md (24px)</Text>
+            <Text textStyle="subtext">md (24px)</Text>
           </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="lg" color="blue.500" />
-            <Text fontSize="xs">lg (32px)</Text>
+            <Text textStyle="subtext">lg (32px)</Text>
           </VStack>
           <VStack>
             <CustomBuildingIcon boxSize="xl" color="blue.500" />
-            <Text fontSize="xs">xl (40px)</Text>
+            <Text textStyle="subtext">xl (40px)</Text>
           </VStack>
         </HStack>
       </Box>
     </Box>
 
     <Box w="100%" bg="gray.50" p={4} borderRadius="md">
-      <Text fontSize="md" fontWeight="bold" mb={3}>2. 다른 React Icon으로 생성</Text>
-      <Code display="block" whiteSpace="pre" p={3} mb={4} fontSize="xs">
+      <Text fontWeight="bold" mb={3}>2. 다른 React Icon으로 생성</Text>
+      <Code display="block" whiteSpace="pre" p={3} mb={4} textStyle="subtext">
 {`import { createIcon } from '@mindlogic-ai/logician-ui';
 import { MdDashboard } from 'react-icons/md';
 
@@ -260,31 +260,31 @@ const CustomDashboardIcon = createIcon(
       </Code>
 
       <Box borderTop="1px solid" borderColor="gray.200" pt={4}>
-        <Text fontSize="sm" fontWeight="semibold" mb={3}>결과 (색상 변경):</Text>
-        <HStack spacing={6}>
+        <Text fontWeight="semibold" mb={3}>결과 (색상 변경):</Text>
+        <HStack gap={6}>
           <VStack>
             <CustomDashboardIcon boxSize="md" color="red.500" />
-            <Text fontSize="xs">red.500</Text>
+            <Text textStyle="subtext">red.500</Text>
           </VStack>
           <VStack>
             <CustomDashboardIcon boxSize="md" color="green.500" />
-            <Text fontSize="xs">green.500</Text>
+            <Text textStyle="subtext">green.500</Text>
           </VStack>
           <VStack>
             <CustomDashboardIcon boxSize="md" color="purple.500" />
-            <Text fontSize="xs">purple.500</Text>
+            <Text textStyle="subtext">purple.500</Text>
           </VStack>
           <VStack>
             <CustomDashboardIcon boxSize="md" color="orange.500" />
-            <Text fontSize="xs">orange.500</Text>
+            <Text textStyle="subtext">orange.500</Text>
           </VStack>
         </HStack>
       </Box>
     </Box>
 
     <Box w="100%" bg="gray.50" p={4} borderRadius="md">
-      <Text fontSize="md" fontWeight="bold" mb={3}>3. SVG 파일로 커스텀 아이콘 생성</Text>
-      <Code display="block" whiteSpace="pre" p={3} mb={4} fontSize="xs">
+      <Text fontWeight="bold" mb={3}>3. SVG 파일로 커스텀 아이콘 생성</Text>
+      <Code display="block" whiteSpace="pre" p={3} mb={4} textStyle="subtext">
 {`import { createIcon } from '@mindlogic-ai/logician-ui';
 import CustomSvg from './custom-icon.svg';
 
@@ -297,14 +297,14 @@ const MyCustomIcon = createIcon(
 <MyCustomIcon boxSize="lg" color="teal.500" />`}
       </Code>
 
-      <Text fontSize="xs" color="gray.600" mt={2}>
+      <Text color="gray.600" mt={2}>
         💡 SVG 파일을 import하려면 프로젝트에 @svgr/webpack이 설정되어 있어야 합니다.
       </Text>
     </Box>
 
     <Box w="100%" bg="blue.50" p={4} borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
-      <Text fontSize="md" fontWeight="bold" mb={2}>✨ 주요 기능</Text>
-      <VStack align="start" spacing={2} fontSize="sm">
+      <Text fontWeight="bold" mb={2}>✨ 주요 기능</Text>
+      <VStack align="start" gap={2} textStyle="subtext">
         <Text>• <strong>boxSize 지원:</strong> xs, sm, md, lg, xl (16px ~ 40px)</Text>
         <Text>• <strong>Chakra UI 스타일링:</strong> color, bg, margin, padding 등 모든 Box props 사용 가능</Text>
         <Text>• <strong>Tree shaking:</strong> 사용하지 않는 아이콘은 번들에서 제외됨</Text>

package/src/components/Icon/_utils/createIconGroup.tsx

@@ -1,4 +1,4 @@
-import createIcon, { IconProps } from './createIcon';
+import createIcon, { CreatedIcon } from './createIcon';
 
 /**
  * Creates multiple icon components at once
@@ -27,15 +27,11 @@ export const createIconGroup = <
   T extends Record<string, React.ComponentType<any>>,
 >(
   iconMap: T
-): {
-  [K in keyof T]: React.ForwardRefExoticComponent<
-    IconProps & React.RefAttributes<SVGSVGElement>
-  >;
-} => {
-  const result = {} as any;
+): Record<keyof T, CreatedIcon> => {
+  const result = {} as Record<keyof T, CreatedIcon>;
 
   Object.entries(iconMap).forEach(([name, IconComponent]) => {
-    result[name] = createIcon(IconComponent, name);
+    result[name as keyof T] = createIcon(IconComponent, name);
   });
 
   return result;