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

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,21 +1,30 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Box, Flex } from '@chakra-ui/react';
-import { variantStyles as buttonVariantStyles } from '../Button/Button.styles';
+import { Box, Flex, VStack, HStack, Text } from '@chakra-ui/react';
 import { FaUniversity } from '../Icon';
-import { IconButton } from './IconButton';
-import { IconButtonVariant } from './IconButton.types';
+import { IconButton, iconButtonColorPalettes, iconButtonVariants } from '.';
+import { IconButtonColorPalette, IconButtonVariant } from './IconButton.types';
 
 const meta = {
   title: 'Components/IconButton',
   component: IconButton,
   args: {
-    icon: <FaUniversity />,
+    children: <FaUniversity />,
+    'aria-label': 'University',
   },
   argTypes: {
+    colorPalette: {
+      control: 'select',
+      options: iconButtonColorPalettes,
+      description: 'Semantic color family (overrides Chakra colorPalette)',
+    },
     variant: {
       control: 'select',
-      options: Object.keys(buttonVariantStyles),
+      options: iconButtonVariants,
+      description: 'Visual appearance (overrides Chakra variant)',
+    },
+    children: {
+      table: { disable: true },
     },
   },
 } satisfies Meta<typeof IconButton>;
@@ -26,28 +35,208 @@ type Story = StoryObj<typeof IconButton>;
 
 export const Basic: Story = {
   args: {
-    variant: 'primary',
-  },
-};
-
-export const Round: Story = {
-  args: {
-    isRound: true,
+    colorPalette: 'primary',
+    variant: 'solid',
   },
 };
 
-export const AllIconButtonVariants: Story = {
-  render: (args) => {
-    const variants = Object.keys(buttonVariantStyles);
-    return (
-      <Flex gap={4}>
-        {variants.map((variant) => (
-          <Box key={variant}>
-            <p>{variant}</p>
-            <IconButton {...args} variant={variant as IconButtonVariant} />
+/**
+ * Complete icon button matrix showing all colorPalette × variant combinations.
+ */
+export const AllCombinations: Story = {
+  render: (args) => (
+    <VStack gap={6} align="stretch">
+      {/* Header row */}
+      <HStack gap={4}>
+        <Box w="100px" />
+        {iconButtonVariants.map((variant) => (
+          <Box key={variant} w="80px" textAlign="center">
+            <Text fontWeight="bold" color="gray.600">
+              {variant}
+            </Text>
           </Box>
         ))}
-      </Flex>
-    );
-  },
+      </HStack>
+
+      {/* Color scheme rows */}
+      {iconButtonColorPalettes.map((colorPalette) => (
+        <HStack key={colorPalette} gap={4}>
+          <Box w="100px">
+            <Text fontWeight="bold" color="gray.600">
+              {colorPalette}
+            </Text>
+          </Box>
+          {iconButtonVariants.map((variant) => (
+            <Box key={`${colorPalette}-${variant}`} w="80px" textAlign="center">
+              <IconButton
+                {...args}
+                colorPalette={colorPalette}
+                variant={variant}
+              />
+            </Box>
+          ))}
+        </HStack>
+      ))}
+    </VStack>
+  ),
+};
+
+/**
+ * Primary color scheme in all variants.
+ */
+export const Primary: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="primary" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Secondary color scheme in all variants.
+ */
+export const Secondary: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="secondary" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Danger color scheme in all variants.
+ */
+export const Danger: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="danger" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Success color scheme in all variants.
+ */
+export const Success: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="success" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Warning color scheme in all variants.
+ */
+export const Warning: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="warning" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Neutral color scheme in all variants.
+ */
+export const Neutral: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonVariants.map((variant) => (
+        <VStack key={variant} gap={1}>
+          <Text color="gray.600">{variant}</Text>
+          <IconButton {...args} colorPalette="neutral" variant={variant} />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Solid variant across all color schemes.
+ */
+export const SolidVariant: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonColorPalettes.map((colorPalette) => (
+        <VStack key={colorPalette} gap={1}>
+          <Text color="gray.600">{colorPalette}</Text>
+          <IconButton {...args} colorPalette={colorPalette} variant="solid" />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Soft variant across all color schemes.
+ */
+export const SoftVariant: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonColorPalettes.map((colorPalette) => (
+        <VStack key={colorPalette} gap={1}>
+          <Text color="gray.600">{colorPalette}</Text>
+          <IconButton {...args} colorPalette={colorPalette} variant="soft" />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Outline variant across all color schemes.
+ */
+export const OutlineVariant: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonColorPalettes.map((colorPalette) => (
+        <VStack key={colorPalette} gap={1}>
+          <Text color="gray.600">{colorPalette}</Text>
+          <IconButton {...args} colorPalette={colorPalette} variant="outline" />
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/**
+ * Ghost variant across all color schemes.
+ */
+export const GhostVariant: Story = {
+  render: (args) => (
+    <Flex gap={4} wrap="wrap">
+      {iconButtonColorPalettes.map((colorPalette) => (
+        <VStack key={colorPalette} gap={1}>
+          <Text color="gray.600">{colorPalette}</Text>
+          <IconButton {...args} colorPalette={colorPalette} variant="ghost" />
+        </VStack>
+      ))}
+    </Flex>
+  ),
 };

package/src/components/IconButton/IconButton.styles.ts

@@ -1,52 +1,14 @@
-import { IconButtonProps } from '@chakra-ui/react';
-
-import { IconButtonVariant } from './IconButton.types';
-
-// TODO: UX를 위해 hover, active 스타일 구분 필요
-export const variantStyles: Record<
-  Exclude<IconButtonVariant, undefined>,
-  Partial<IconButtonProps>
-> = {
-  primary: {
-    borderColor: 'primary.main',
-    bgColor: 'primary.main',
-    color: 'white',
-    _hover: {
-      borderColor: 'blue.800',
-      bgColor: 'blue.800',
-    },
-  },
-  secondary: {
-    borderColor: 'primary.light',
-    bgColor: 'primary.light',
-    color: 'primary.main',
-    _hover: {
-      borderColor: 'blue.200',
-      bgColor: 'blue.200',
-    },
-  },
-  tertiary: {
-    borderColor: 'gray.400',
-    bgColor: 'white',
-    color: 'gray.1200',
-    _hover: {
-      bgColor: 'gray.50',
-    },
-  },
-  danger: {
-    borderColor: 'danger.main',
-    bgColor: 'danger.main',
-    color: 'white',
-    _hover: {
-      bgColor: 'red.600',
-    },
-  },
-  link: {
-    borderColor: 'transparent',
-    bgColor: 'transparent',
-    borderRadius: 'none',
-    _hover: {
-      bgColor: 'transparent',
-    },
-  },
-};
+/**
+ * IconButton styles - reuses Button styles for consistency.
+ *
+ * Since IconButton and Button share the same two-dimensional variant system
+ * (colorPalette × variant), we simply re-export the Button styles.
+ */
+export {
+  getButtonStyles as getIconButtonStyles,
+  buttonColorPalettes as iconButtonColorPalettes,
+  buttonColorPaletteStyles as iconButtonColorPaletteStyles,
+  buttonColorSchemes as iconButtonColorSchemes, // Deprecated
+  buttonColorSchemeStyles as iconButtonColorSchemeStyles, // Deprecated
+  buttonVariants as iconButtonVariants,
+} from '../Button/Button.styles';

package/src/components/IconButton/IconButton.tsx

@@ -1,34 +1,52 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { IconButton as ChakraIconButton } from '@chakra-ui/react';
 
-import { variantStyles } from './IconButton.styles';
+import { getIconButtonStyles } from './IconButton.styles';
 import { IconButtonProps } from './IconButton.types';
 
+/**
+ * IconButton component with two-dimensional variant system.
+ *
+ * Uses the same `colorPalette` and `variant` system as Button
+ * for consistent styling across the design system.
+ *
+ * @example
+ * ```tsx
+ * <IconButton colorPalette="primary" variant="soft"><Icon /></IconButton>
+ * <IconButton colorPalette="danger" variant="solid"><Icon /></IconButton>
+ * <IconButton colorPalette="neutral" variant="ghost"><Icon /></IconButton>
+ * ```
+ */
 export const IconButton = forwardRef(
   (
-    { variant = 'link', sx, ...rest }: IconButtonProps,
+    { colorPalette, variant = 'soft', css, children, ...rest }: IconButtonProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
+    const palette = colorPalette ?? 'primary';
+
+    const styles = getIconButtonStyles(palette, variant);
+
     return (
       <ChakraIconButton
         border="1px solid"
         borderRadius="full"
-        background="transparent"
-        {...variantStyles[variant]}
+        {...styles}
         {...rest}
         ref={ref}
-        sx={{
-          ...sx,
+        css={{
+          ...css,
           '& svg': {
             pointerEvents: 'none',
-            ...(sx as any)?.['& svg'],
+            ...(css as any)?.['& svg'],
           },
           '& svg *': {
             pointerEvents: 'none',
-            ...(sx as any)?.['& svg *'],
+            ...(css as any)?.['& svg *'],
           },
         }}
-      />
+      >
+        {children}
+      </ChakraIconButton>
     );
   }
 );

package/src/components/IconButton/IconButton.types.ts

@@ -1,12 +1,54 @@
 import { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react';
 
-export type IconButtonVariant =
+// Re-export Button types for consistency
+export type { ButtonVariant } from '../Button/Button.types';
+
+/**
+ * IconButton color scheme - reuses Button color schemes.
+ * @see ButtonColorScheme
+ */
+export type IconButtonColorPalette =
   | 'primary'
   | 'secondary'
-  | 'tertiary'
   | 'danger'
-  | 'link';
+  | 'success'
+  | 'warning'
+  | 'neutral';
+
+/**
+ * IconButton variant - reuses Button variants.
+ * @see ButtonVariant
+ */
+export type IconButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
 
-export type IconButtonProps = Omit<ChakraIconButtonProps, 'variant'> & {
+/**
+ * IconButton props with two-dimensional variant system.
+ *
+ * Uses the same `colorPalette` and `variant` system as Button
+ * for consistent styling across the design system.
+ *
+ * @note Overrides Chakra UI's `variant` and `colorPalette` props.
+ *
+ * @example
+ * ```tsx
+ * <IconButton colorPalette="primary" variant="solid"><Icon /></IconButton>
+ * <IconButton colorPalette="danger" variant="soft"><Icon /></IconButton>
+ * ```
+ */
+export type IconButtonProps = Omit<
+  ChakraIconButtonProps,
+  'variant' | 'colorPalette' | 'colorScheme' | 'icon'
+> & {
+  /**
+   * The color scheme of the icon button (semantic color family).
+   * Overrides Chakra UI's colorPalette prop.
+   * @default 'primary'
+   */
+  colorPalette?: IconButtonColorPalette;
+  /**
+   * The visual variant of the icon button (fill style).
+   * Overrides Chakra UI's variant prop.
+   * @default 'solid'
+   */
   variant?: IconButtonVariant;
 };

package/src/components/IconButton/index.tsx

@@ -1,2 +1,12 @@
 export { IconButton } from './IconButton';
-export type * from './IconButton.types';
+export {
+  getIconButtonStyles,
+  iconButtonColorPalettes,
+  iconButtonColorPaletteStyles,
+  iconButtonVariants,
+} from './IconButton.styles';
+export type {
+  IconButtonColorPalette,
+  IconButtonProps,
+  IconButtonVariant,
+} from './IconButton.types';

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -1,12 +1,4 @@
-import {
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverProps,
-  PopoverTrigger,
-  Portal,
-} from '@chakra-ui/react';
+import { Popover, Portal } from '@chakra-ui/react';
 
 import { LuInfo } from '../Icon';
 import { IconButton } from '../IconButton';
@@ -19,22 +11,22 @@ export const InfoSprinkle = ({
 }: {
   children: React.ReactNode;
   iconButtonProps?: Partial<IconButtonProps>;
-} & PopoverProps) => {
+} & Popover.RootProps) => {
   return (
-    <Popover trigger="hover" placement="top" isLazy {...rest}>
-      <PopoverTrigger>
-        <IconButton
-          aria-label="Info"
-          icon={<LuInfo boxSize="sm" color="inherit" />}
-          {...iconButtonProps}
-        />
-      </PopoverTrigger>
+    <Popover.Root positioning={{ placement: 'top' }} lazyMount {...rest}>
+      <Popover.Trigger>
+        <IconButton aria-label="Info" {...iconButtonProps}>
+          <LuInfo boxSize="sm" color="inherit" />
+        </IconButton>
+      </Popover.Trigger>
       <Portal>
-        <PopoverContent boxShadow="2xl" w="fit-content">
-          <PopoverArrow />
-          <PopoverBody>{children}</PopoverBody>
-        </PopoverContent>
+        <Popover.Positioner>
+          <Popover.Content fontSize="1em">
+            <Popover.Arrow />
+            <Popover.Body p={2}>{children}</Popover.Body>
+          </Popover.Content>
+        </Popover.Positioner>
       </Portal>
-    </Popover>
+    </Popover.Root>
   );
 };

package/src/components/InlineCode/InlineCode.tsx

@@ -9,7 +9,7 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
       bg="gray.50"
       color="primary.dark"
       borderRadius="sm"
-      fontSize="p"
+      textStyle="p"
       {...rest}
     >
       {children}