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

package/src/components/MDXEditor/MDXEditor.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Box, useTheme } from '@chakra-ui/react';
+import { Box, useToken } from '@chakra-ui/react';
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
@@ -36,9 +36,22 @@ export const MDXEditor = forwardRef<
   BaseEditorProps & MDXEditorMethods,
   MDXEditorProps
 >(({ containerProps, autoFocus = true, onError, ...rest }, ref) => {
-  const theme = useTheme();
   const [error, setError] = useState<string | null>(null);
 
+  // Resolve theme tokens to actual values
+  const [gray50, gray100, gray800, primaryLight, primaryLighter, primaryMain] =
+    useToken('colors', [
+      'gray.50',
+      'gray.100',
+      'gray.800',
+      'primary.light',
+      'primary.lighter',
+      'primary.main',
+    ]);
+
+  const [space1, space2, space4] = useToken('spacing', ['1', '2', '4']);
+  const [radiusSm] = useToken('radii', ['sm']);
+
   // 내부적으로 Editor 인스턴스를 참조하기 위한 로컬 ref
   const editorRef = useRef<BaseEditorProps & MDXEditorMethods>(null);
 
@@ -67,27 +80,40 @@ export const MDXEditor = forwardRef<
       onClick={handleContainerClick}
       cursor="text"
       {...containerProps}
-      sx={{
-        ...containerProps?.sx,
-        '.mdxeditor': {
+      css={{
+        /**
+         * Chakra v3 css prop styling notes:
+         *
+         * 1. All nested selectors require '&' prefix (e.g., '& .class', '& h1')
+         * 2. Use full CSS property names (background, padding) instead of Chakra
+         *    shorthand props (bg, p) in nested selectors
+         * 3. Color values must be resolved via useToken(), not token strings
+         * 4. Font sizes use responsive objects: { base: '2.4em', md: '3em' }
+         * 5. List styles must be explicitly defined (listStyleType, etc.)
+         *
+         * These requirements differ from v2's sx prop, which was more implicit.
+         * v3 prioritizes performance and explicitness over automatic handling.
+         */
+        ...containerProps?.css,
+        '& .mdxeditor': {
           width: '100%',
           minHeight: '300px',
           height: '100%',
-          bg: 'white',
+          background: 'white',
           display: 'flex',
           flexDirection: 'column',
         },
-        '.mdxeditor-toolbar': {
+        '& .mdxeditor-toolbar': {
           display: 'flex',
-          gap: theme.space[2],
-          p: theme.space[2],
+          gap: space2,
+          padding: space2,
           borderBottomWidth: '1px',
-          bg: 'gray.50',
+          background: gray50,
           flexShrink: 0,
           cursor: 'default',
         },
         // Target the root contenteditable wrapper
-        '[class*="_rootContentEditableWrapper_"]': {
+        '& [class*="_rootContentEditableWrapper_"]': {
           flex: 1,
           display: 'flex',
           flexDirection: 'column',
@@ -96,89 +122,130 @@ export const MDXEditor = forwardRef<
           overflow: 'auto',
         },
         // Target the actual contenteditable element
-        '[contenteditable="true"]': {
+        '& [contenteditable="true"]': {
           flex: 1,
           minHeight: '100%',
           outline: 'none',
         },
         // Target any intermediate wrapper elements
-        '[class*="_contentEditable_"]': {
+        '& [class*="_contentEditable_"]': {
           flex: 1,
           display: 'flex',
           flexDirection: 'column',
         },
-        '.content-editable': {
-          padding: theme.space[4],
+        '& .content-editable': {
+          padding: space4,
           color: 'black',
           display: 'flex',
           flexDirection: 'column',
-          gap: theme.space[1.5],
+          gap: radiusSm,
           flex: 1,
           height: '100%',
 
-          'h1, h2, h3, h4, h5': {
-            marginBottom: theme.space[0.5],
+          '& h1, & h2, & h3, & h4, & h5': {
+            marginBottom: '2px',
             fontWeight: 'bold',
           },
 
-          'h1:not(:first-child), h2:not(:first-child), h3:not(:first-child), h4:not(:first-child)':
+          '& h1:not(:first-child), & h2:not(:first-child), & h3:not(:first-child), & h4:not(:first-child)':
             {
-              marginTop: theme.space[1],
+              marginTop: space1,
             },
 
-          h1: {
-            fontSize: theme.fontSizes.h1,
+          /**
+           * Font sizes - Cannot be tokenized due to responsive objects
+           *
+           * Unlike spacing/radii/colors, fontSize values here are responsive objects
+           * { base: '2.4em', md: '3em' } which cannot be stored as regular tokens
+           * in Chakra v3. Only textStyles support responsive values, but we cannot
+           * extract just the fontSize from textStyles using useToken().
+           *
+           * These values match theme/index.ts textStyles exactly and must be
+           * manually synchronized when updating the theme:
+           * - h1: { base: '2.4em', md: '3em' }
+           * - h2: { base: '2em', md: '2.5em' }
+           * - h3: { base: '1.5em', md: '1.75em' }
+           * - h4: { base: '1.25em', md: '1.44em' }
+           * - h5: { base: '1.1em', md: '1.2em' }
+           */
+          '& h1': {
+            fontSize: { base: '2.4em', md: '3em' },
           },
-          h2: {
-            fontSize: theme.fontSizes.h2,
+          '& h2': {
+            fontSize: { base: '2em', md: '2.5em' },
           },
-          h3: {
-            fontSize: theme.fontSizes.h3,
+          '& h3': {
+            fontSize: { base: '1.5em', md: '1.75em' },
           },
-          h4: {
-            fontSize: theme.fontSizes.h4,
+          '& h4': {
+            fontSize: { base: '1.25em', md: '1.44em' },
           },
-          h5: {
-            fontSize: theme.fontSizes.h5,
+          '& h5': {
+            fontSize: { base: '1.1em', md: '1.2em' },
+          },
+
+          /**
+           * List styling - IMPORTANT: v3 requires explicit list-style properties
+           *
+           * In Chakra v2, the `sx` prop automatically preserved browser default list styles.
+           * In Chakra v3, the `css` prop is more explicit and performant, but requires
+           * manual specification of list styles to override MDXEditor's CSS resets.
+           *
+           * Required properties:
+           * - listStyleType: 'disc' (ul) or 'decimal' (ol) - Shows bullets/numbers
+           * - listStylePosition: 'outside' - Places markers outside content box
+           * - display: 'list-item' (on li) - Ensures proper list item rendering
+           *
+           * Why this changed: v3 optimized for speed by removing automatic style inference,
+           * requiring more explicit style declarations.
+           */
+          '& ul': {
+            marginTop: space2,
+            paddingInlineStart: space4,
+            listStyleType: 'disc',
+            listStylePosition: 'outside',
           },
 
-          'ol, ul': {
-            marginTop: theme.space[2],
-            paddingInlineStart: theme.space[4],
+          '& ol': {
+            marginTop: space2,
+            paddingInlineStart: space4,
+            listStyleType: 'decimal',
+            listStylePosition: 'outside',
           },
 
-          li: {
+          '& li': {
             lineHeight: '1.5',
-            marginBottom: theme.space[2],
+            marginBottom: space2,
+            display: 'list-item',
           },
 
-          blockquote: {
+          '& blockquote': {
             borderLeftWidth: '4px',
-            borderLeftColor: 'primary.light',
-            bg: 'primary.lighter',
-            pl: theme.space[4],
-            py: theme.space[2],
-            my: theme.space[4],
-            color: 'gray.800',
+            borderLeftColor: primaryLight,
+            background: primaryLighter,
+            paddingLeft: space4,
+            paddingBlock: space2,
+            marginBlock: space4,
+            color: gray800,
           },
 
-          a: {
-            color: 'primary.main',
+          '& a': {
+            color: primaryMain,
             textDecoration: 'underline',
           },
 
-          code: {
+          '& code': {
             fontFamily: 'mono',
-            bg: 'gray.100',
-            px: theme.space[1],
-            borderRadius: theme.radii.sm,
+            background: gray100,
+            paddingInline: space1,
+            borderRadius: radiusSm,
 
-            span: {
-              bg: 'transparent',
+            '& span': {
+              background: 'transparent',
             },
           },
         },
-        '.mdxeditor-diff-source-wrapper': {
+        '& .mdxeditor-diff-source-wrapper': {
           overflow: 'auto',
         },
       }}

package/src/components/Markdown/Markdown.module.css

@@ -23,8 +23,25 @@
   margin-top: 8px;
   padding-inline-start: 16px;
 }
+
+.markdownStyles ul {
+  list-style-type: disc;
+}
+
+.markdownStyles ol {
+  list-style-type: decimal;
+}
+
+.markdownStyles ul ul {
+  list-style-type: circle;
+}
+
+.markdownStyles ul ul ul {
+  list-style-type: square;
+}
+
 .markdownStyles li {
-  /* 1.5x standard line height */
-  line-height: calc(16px * 1.5);
+  /* 1.5x standard line height (14px base) */
+  line-height: calc(14px * 1.5);
   margin-bottom: 8px;
 }

package/src/components/Markdown/Markdown.tsx

@@ -70,19 +70,29 @@ export const baseMarkdownComponents = {
   // Make the pre tag a no-op that just renders children
   pre: ({ children }: any) => <Box>{children}</Box>,
   p: (props: any) => <Text color="inherit" {...props} />,
-  a: ({ style, ...rest }: any) => (
+  a: (props: any) => (
     //  `children` should be inside ...rest
-    <Link target="_blank" {...rest} />
+    <Link target="_blank" {...props} />
   ),
   ol: ({ style, ...rest }: any) => (
     <ol
-      style={{ paddingInlineStart: '22px', color: 'inherit', ...style }}
+      style={{
+        paddingInlineStart: '22px',
+        color: 'inherit',
+        fontSize: '0.875rem',
+        ...style,
+      }}
       {...rest}
     />
   ),
   ul: ({ style, ...rest }: any) => (
     <ul
-      style={{ paddingInlineStart: '22px', color: 'inherit', ...style }}
+      style={{
+        paddingInlineStart: '22px',
+        color: 'inherit',
+        fontSize: '0.875rem',
+        ...style,
+      }}
       {...rest}
     />
   ),

package/src/components/Masonry/Masonry.stories.tsx

@@ -70,7 +70,7 @@ export const Basic: Story = {
             shadow="sm"
           >
             <Text fontWeight="bold">{item.title}</Text>
-            <Text fontSize="sm">Height: {item.height}px</Text>
+            <Text textStyle="subtext">Height: {item.height}px</Text>
           </Box>
         ))}
       </Masonry>
@@ -118,7 +118,7 @@ export const WithRealContent: Story = {
             shadow="sm"
             mb={4}
           >
-            <Text fontWeight="bold" fontSize="lg" mb={2} color="blue.500">
+            <Text fontWeight="bold" textStyle="h5" mb={2} color="blue.500">
               {category.name}
             </Text>
             {category.items.map((item) => (
@@ -212,7 +212,7 @@ export const HorizontalArrangement: Story = {
 
     return (
       <Box>
-        <Text fontSize="xl" fontWeight="bold" mb={4}>
+        <Text textStyle="h4" fontWeight="bold" mb={4}>
           Horizontal Arrangement (row by row)
         </Text>
         <Masonry numCols={3} horizontalArrangement={true} gap={4}>
@@ -230,7 +230,7 @@ export const HorizontalArrangement: Story = {
           ))}
         </Masonry>
 
-        <Text fontSize="xl" fontWeight="bold" mt={8} mb={4}>
+        <Text textStyle="h4" fontWeight="bold" mt={8} mb={4}>
           Height-Balanced Arrangement (default)
         </Text>
         <Masonry numCols={3} horizontalArrangement={false} gap={4}>
@@ -259,7 +259,7 @@ export const ComparisonWithGrid: Story = {
 
     return (
       <Box>
-        <Text fontSize="xl" fontWeight="bold" mb={4}>
+        <Text textStyle="h4" fontWeight="bold" mb={4}>
           Masonry Layout
         </Text>
         <Masonry {...args}>
@@ -277,10 +277,10 @@ export const ComparisonWithGrid: Story = {
           ))}
         </Masonry>
 
-        <Text fontSize="xl" fontWeight="bold" mt={8} mb={4}>
+        <Text textStyle="h4" fontWeight="bold" mt={8} mb={4}>
           Regular Grid Layout
         </Text>
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={4}>
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} gap={4}>
           {items.map((item) => (
             <Box
               key={item.id}

package/src/components/Masonry/Masonry.types.ts

@@ -1,6 +1,6 @@
-import { FlexProps } from '@chakra-ui/react';
+import { GridProps } from '@chakra-ui/react';
 
-export interface MasonryProps extends Omit<FlexProps, 'gap'> {
+export interface MasonryProps extends Omit<GridProps, 'gap'> {
   /**
    * Number of columns in the masonry layout
    */

package/src/components/MaxLengthIndicator/MaxLengthIndicator.tsx

@@ -18,7 +18,7 @@ export const MaxLengthIndicator = ({
   }, [value]);
 
   return (
-    <Subtitle fontSize="sm" color="gray.600" {...rest}>
+    <Subtitle textStyle="subtext" color="gray.600" {...rest}>
       {currentValue}/{maxLength}
     </Subtitle>
   );

package/src/components/Menu/Menu.stories.tsx

@@ -12,6 +12,7 @@ interface StoryMenuItemProps {
   label: string;
   onClick?: () => void;
   itemIcon?: React.ReactElement;
+  rightItemIcon?: React.ReactElement;
   variant?: MenuItemProps['variant'];
 }
 
@@ -23,6 +24,7 @@ interface MenuStoryProps {
 
 const meta = {
   title: 'Components/Menu',
+  // @ts-expect-error - Menu is a namespace, not a component
   component: Menu,
   args: {
     label: 'Trigger',
@@ -51,18 +53,15 @@ export const DefaultMenu: Story = {
     ],
   },
   render: ({ label, menuItems }) => (
-    <Menu>
-      <MenuButton
-        aria-label={'storybook button menu'}
-        as={Button}
-        rightIcon={<IoChevronDownOutline />}
-      >
-        {label}
+    <Menu.Root>
+      <MenuButton aria-label={'storybook button menu'} as={Button}>
+        {label} <IoChevronDownOutline />
       </MenuButton>
       <MenuList>
         {menuItems.map((item: StoryMenuItemProps) => (
           <MenuItem
             key={item.label}
+            value={item.label}
             variant={item.variant}
             icon={item.itemIcon}
             onClick={item.onClick}
@@ -71,7 +70,7 @@ export const DefaultMenu: Story = {
           </MenuItem>
         ))}
       </MenuList>
-    </Menu>
+    </Menu.Root>
   ),
 };
 
@@ -91,18 +90,15 @@ export const IconMenu: Story = {
     ],
   },
   render: ({ label, menuItems }) => (
-    <Menu>
-      <MenuButton
-        aria-label={'storybook button menu'}
-        as={Button}
-        rightIcon={<IoChevronDownOutline />}
-      >
-        {label}
+    <Menu.Root>
+      <MenuButton aria-label={'storybook button menu'} as={Button}>
+        {label} <IoChevronDownOutline />
       </MenuButton>
       <MenuList>
         {menuItems.map((item: StoryMenuItemProps) => (
           <MenuItem
             key={item.label}
+            value={item.label}
             variant={item.variant}
             icon={item.itemIcon}
             onClick={item.onClick}
@@ -111,7 +107,84 @@ export const IconMenu: Story = {
           </MenuItem>
         ))}
       </MenuList>
-    </Menu>
+    </Menu.Root>
+  ),
+};
+
+export const RightIconMenu: Story = {
+  args: {
+    menuItems: [
+      {
+        label: 'Profile',
+        onClick: () => alert('Profile clicked'),
+        rightItemIcon: <SlSettings />,
+      },
+      {
+        label: 'Settings',
+        onClick: () => alert('Settings clicked'),
+        rightItemIcon: <SlSettings />,
+      },
+    ],
+  },
+  render: ({ label, menuItems }) => (
+    <Menu.Root>
+      <MenuButton aria-label={'storybook button menu'} as={Button}>
+        {label} <IoChevronDownOutline />
+      </MenuButton>
+      <MenuList>
+        {menuItems.map((item: StoryMenuItemProps) => (
+          <MenuItem
+            key={item.label}
+            value={item.label}
+            variant={item.variant}
+            rightIcon={item.rightItemIcon}
+            onClick={item.onClick}
+          >
+            {item.label}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu.Root>
+  ),
+};
+
+export const BothSideIconMenu: Story = {
+  args: {
+    menuItems: [
+      {
+        label: 'Profile',
+        onClick: () => alert('Profile clicked'),
+        itemIcon: <SlSettings />,
+        rightItemIcon: <IoChevronDownOutline />,
+      },
+      {
+        label: 'Settings',
+        onClick: () => alert('Settings clicked'),
+        itemIcon: <SlSettings />,
+        rightItemIcon: <IoChevronDownOutline />,
+      },
+    ],
+  },
+  render: ({ label, menuItems }) => (
+    <Menu.Root>
+      <MenuButton aria-label={'storybook button menu'} as={Button}>
+        {label} <IoChevronDownOutline />
+      </MenuButton>
+      <MenuList>
+        {menuItems.map((item: StoryMenuItemProps) => (
+          <MenuItem
+            key={item.label}
+            value={item.label}
+            variant={item.variant}
+            icon={item.itemIcon}
+            rightIcon={item.rightItemIcon}
+            onClick={item.onClick}
+          >
+            {item.label}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu.Root>
   ),
 };
 
@@ -128,18 +201,15 @@ export const DangerMenu: Story = {
     ],
   },
   render: ({ label, menuItems }) => (
-    <Menu>
-      <MenuButton
-        aria-label={'storybook button menu'}
-        as={Button}
-        rightIcon={<IoChevronDownOutline />}
-      >
-        {label}
+    <Menu.Root>
+      <MenuButton aria-label={'storybook button menu'} as={Button}>
+        {label} <IoChevronDownOutline />
       </MenuButton>
       <MenuList>
         {menuItems.map((item: StoryMenuItemProps) => (
           <MenuItem
             key={item.label}
+            value={item.label}
             variant={item.variant}
             icon={item.itemIcon}
             onClick={item.onClick}
@@ -148,7 +218,7 @@ export const DangerMenu: Story = {
           </MenuItem>
         ))}
       </MenuList>
-    </Menu>
+    </Menu.Root>
   ),
 };
 
@@ -167,16 +237,15 @@ export const IconButtonTriggerMenu: Story = {
     label: { table: { disable: true } },
   },
   render: ({ menuItems }) => (
-    <Menu>
-      <MenuButton
-        aria-label="storybook icon button menu"
-        as={IconButton}
-        icon={<IoChevronDownOutline />}
-      />
+    <Menu.Root>
+      <MenuButton aria-label="storybook icon button menu" as={IconButton}>
+        <IoChevronDownOutline />
+      </MenuButton>
       <MenuList>
         {menuItems.map((item: StoryMenuItemProps) => (
           <MenuItem
             key={item.label}
+            value={item.label}
             variant={item.variant}
             icon={item.itemIcon}
             onClick={item.onClick}
@@ -185,7 +254,7 @@ export const IconButtonTriggerMenu: Story = {
           </MenuItem>
         ))}
       </MenuList>
-    </Menu>
+    </Menu.Root>
   ),
 };
 
@@ -208,18 +277,15 @@ export const SelectiveIconMenu: Story = {
     };
 
     return (
-      <Menu>
-        <MenuButton
-          aria-label={'storybook button menu'}
-          as={Button}
-          rightIcon={<IoChevronDownOutline />}
-        >
-          {label}
+      <Menu.Root>
+        <MenuButton aria-label={'storybook button menu'} as={Button}>
+          {label} <IoChevronDownOutline />
         </MenuButton>
         <MenuList>
           {menuItems.map((item: StoryMenuItemProps) => (
             <MenuItem
               key={item.label}
+              value={item.label}
               onClick={() => handleItemClick(item.label, item.onClick)}
               icon={
                 selectedLabel === item.label ? <SlSettings /> : undefined
@@ -229,7 +295,7 @@ export const SelectiveIconMenu: Story = {
             </MenuItem>
           ))}
         </MenuList>
-      </Menu>
+      </Menu.Root>
     );
   },
 };

package/src/components/Menu/MenuButton.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
-import { MenuButton as ChakraMenuButton } from '@chakra-ui/react';
+import { Menu } from '@chakra-ui/react';
 
 import { CustomMenuButtonProps } from './MenuButton.types';
 
-export const MenuButton = ({ as, ...rest }: CustomMenuButtonProps) => {
-  return <ChakraMenuButton as={as} {...rest} />;
+export const MenuButton = ({
+  as: Component,
+  children,
+  ...rest
+}: CustomMenuButtonProps) => {
+  return (
+    <Menu.Trigger asChild>
+      <Component {...rest}>{children}</Component>
+    </Menu.Trigger>
+  );
 };