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

package/src/components/FormIntegration/README.md

@@ -0,0 +1,158 @@
+# Form Integration Examples
+
+이 스토리는 logician-ui의 Form 컴포넌트들이 실제 폼 환경에서 어떻게 작동하는지 테스트하기 위한 통합 예제입니다.
+
+## 포함된 스토리
+
+### 1. Formik Form Example
+Formik과 Yup을 사용한 폼 validation 예제입니다.
+
+**특징:**
+- Formik의 Form 컴포넌트 사용
+- Yup 스키마를 통한 validation
+- Field-level validation과 에러 표시
+- 제출 시 toast 알림
+
+### 2. Regular Form Example
+일반 HTML form과 React state를 사용한 예제입니다.
+
+**특징:**
+- 네이티브 HTML form 사용
+- useState를 통한 상태 관리
+- 수동 validation 구현
+- 제출 시 toast 알림
+
+## 테스트할 컴포넌트
+
+### Form 컴포넌트 목록
+1. **Input** - 텍스트 입력 (이름, 이메일)
+2. **Textarea** - 여러 줄 텍스트 (자기소개)
+3. **Select** - 드롭다운 선택 (국가)
+4. **Radio** - 라디오 버튼 (성별)
+5. **Slider** - 슬라이더 (경력)
+6. **FileInput** - 파일 업로드
+
+### Validation 규칙
+
+#### 이름 (Input)
+- 필수 입력
+- 최소 2글자 이상
+
+#### 이메일 (Input)
+- 필수 입력
+- 올바른 이메일 형식
+
+#### 자기소개 (Textarea)
+- 필수 입력
+- 최소 10글자, 최대 200글자
+- 글자 수 표시
+
+#### 국가 (Select)
+- 필수 선택
+- react-select 사용
+
+#### 성별 (Radio)
+- 필수 선택
+- 3가지 옵션: 남성, 여성, 기타
+
+#### 경력 (Slider)
+- 0년 ~ 50년
+- 슬라이더로 조정
+- 현재 값 표시
+
+#### 파일 업로드 (FileInput)
+- 필수 선택
+- 이미지 또는 PDF 파일만 허용
+- 여러 파일 업로드 가능
+- 선택된 파일 수 표시
+
+## 동작 확인 사항
+
+### 1. Field.Root와 Input 통합
+✅ Field.Root의 `invalid` prop이 Input에 자동으로 전달되는지 확인
+- Field.Root에만 `invalid={!!errors.fieldName}` 설정
+- Input 컴포넌트가 `_invalid` 스타일로 빨간 border 표시
+
+### 2. Validation 에러 표시
+✅ Field.ErrorText가 올바르게 표시되는지 확인
+- 에러가 있을 때만 표시
+- 에러 메시지 내용 정확성
+
+### 3. Toast 알림
+✅ 제출 시 toast가 올바르게 표시되는지 확인
+- 성공 시: 녹색 success toast
+- 실패 시: 빨간색 error toast (30% 확률로 랜덤 발생)
+
+### 4. 폼 제출
+✅ validation을 통과한 경우에만 제출되는지 확인
+- 모든 필드가 유효할 때만 API 호출 시뮬레이션 실행
+- validation 실패 시 에러 메시지 표시
+
+## 실행 방법
+
+```bash
+# Storybook 실행
+yarn storybook
+```
+
+브라우저에서:
+1. 좌측 네비게이션에서 `Examples > Form Integration` 선택
+2. `Formik Form Example` 또는 `Regular Form Example` 클릭
+3. 폼 입력 및 제출 테스트
+
+## 중요 포인트
+
+### Chakra UI v3 Field 패턴
+```tsx
+<Field.Root required invalid={!!errors.fieldName}>
+  <FormLabel>
+    필드명 <Field.RequiredIndicator />
+  </FormLabel>
+  <Input
+    name="fieldName"
+    value={values.fieldName}
+    onChange={handleChange}
+  />
+  <Field.ErrorText>{errors.fieldName}</Field.ErrorText>
+</Field.Root>
+```
+
+### _invalid 스타일 동작
+Input 컴포넌트는 `_invalid` 스타일을 지원하므로:
+- Field.Root의 `invalid` prop → `data-invalid` attribute 설정
+- Input이 `data-invalid` 감지 → `_invalid` 스타일 적용
+- **Input에 별도로 `invalid` prop을 전달하지 않아도 됨**
+
+### Toast 사용법
+```tsx
+const pushToast = useToast();
+
+pushToast({
+  status: 'success', // 'success' | 'error' | 'info' | 'warning'
+  title: '제목',
+  description: '설명',
+});
+```
+
+## 파일 구조
+
+```
+FormIntegration/
+├── FormIntegration.stories.tsx  # Storybook 스토리
+└── README.md                     # 이 파일
+```
+
+## 의존성
+
+```json
+{
+  "formik": "^2.4.9",
+  "yup": "^1.7.1"
+}
+```
+
+## 참고사항
+
+- 이 예제는 **테스트 및 데모 목적**으로만 사용됩니다
+- 실제 프로덕션 코드에서는 API 호출 로직을 적절히 수정해야 합니다
+- 파일 업로드는 브라우저 환경에서만 테스트 가능합니다

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;