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

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

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Button } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Menu, MenuButton, MenuItem, MenuList } from '.';
+import { MenuItemProps } from './MenuItem.types';
+
+// Interface for story-specific menu item data
+interface StoryMenuItemProps {
+  label: string;
+  onClick?: () => void;
+  itemIcon?: React.ReactElement;
+  variant?: MenuItemProps['variant'];
+}
+
+const meta: Meta = {
+  title: 'Components/Menu',
+  component: Menu,
+  args: {
+    label: 'Trigger',
+    menuItems: [
+      { label: 'Profile', onClick: () => alert('Profile clicked') },
+      { label: 'Settings', onClick: () => alert('Settings clicked') },
+    ],
+  },
+  argTypes: {
+    menuItems: { control: 'object' },
+  },
+};
+
+export default meta;
+
+type Story = StoryFn<{ label: string; menuItems: StoryMenuItemProps[] }>;
+
+const Template: Story = ({ label, menuItems, ...args }) => (
+  <Menu>
+    <MenuButton
+      aria-label={'storybook button menu'}
+      as={Button}
+      rightIcon={<Icon icon="IoChevronDownOutline" />}
+      {...args}
+    >
+      {label}
+    </MenuButton>
+    <MenuList>
+      {menuItems.map((item) => (
+        <MenuItem
+          key={item.label}
+          variant={item.variant}
+          icon={item.itemIcon}
+          onClick={item.onClick}
+        >
+          {item.label}
+        </MenuItem>
+      ))}
+    </MenuList>
+  </Menu>
+);
+
+export const DefaultMenu = Template.bind({});
+DefaultMenu.args = {
+  menuItems: [
+    { label: 'Profile', onClick: () => alert('Profile clicked') },
+    {
+      label: 'Settings',
+      onClick: () => alert('Settings clicked'),
+    },
+  ],
+};
+
+export const IconMenu = Template.bind({});
+IconMenu.args = {
+  menuItems: [
+    {
+      label: 'Profile',
+      onClick: () => alert('Profile clicked'),
+      itemIcon: <Icon icon="SlSettings" />,
+    },
+    {
+      label: 'Settings',
+      onClick: () => alert('Settings clicked'),
+      itemIcon: <Icon icon="SlSettings" />,
+    },
+  ],
+};
+
+export const DangerMenu = Template.bind({});
+DangerMenu.args = {
+  menuItems: [
+    { label: 'Profile', onClick: () => alert('Profile clicked') },
+    {
+      label: 'Settings',
+      onClick: () => alert('Settings clicked'),
+      itemIcon: <Icon icon="SlSettings" />,
+      variant: 'danger',
+    },
+  ],
+};
+
+const IconButtonTemplate: Story = ({ menuItems, ...args }) => (
+  <Menu>
+    <MenuButton
+      aria-label="storybook icon button menu"
+      as={IconButton}
+      icon={<Icon icon="IoChevronDownOutline" />}
+      {...args}
+    />
+    <MenuList>
+      {menuItems.map((item) => (
+        <MenuItem
+          key={item.label}
+          variant={item.variant}
+          icon={item.itemIcon}
+          onClick={item.onClick}
+        >
+          {item.label}
+        </MenuItem>
+      ))}
+    </MenuList>
+  </Menu>
+);
+
+export const IconButtonTriggerMenu = IconButtonTemplate.bind({});
+IconButtonTriggerMenu.args = {
+  menuItems: [
+    { label: 'Profile', onClick: () => alert('Profile clicked') },
+    {
+      label: 'Settings',
+      onClick: () => alert('Settings clicked'),
+      itemIcon: <Icon icon="SlSettings" />,
+    },
+  ],
+};
+IconButtonTriggerMenu.argTypes = {
+  label: { table: { disable: true } },
+};
+
+const SelectiveIconTemplate: Story = ({ label, menuItems, ...args }) => {
+  const [selectedLabel, setSelectedLabel] = useState<string | null>(
+    menuItems[0].label
+  );
+
+  const handleItemClick = (label: string, onClick?: () => void) => {
+    setSelectedLabel(label);
+    onClick && onClick();
+  };
+
+  return (
+    <Menu>
+      <MenuButton
+        aria-label={'storybook button menu'}
+        as={Button}
+        rightIcon={<Icon icon="IoChevronDownOutline" />}
+        {...args}
+      >
+        {label}
+      </MenuButton>
+      <MenuList>
+        {menuItems.map((item) => (
+          <MenuItem
+            key={item.label}
+            onClick={() => handleItemClick(item.label, item.onClick)}
+            icon={
+              selectedLabel === item.label ? (
+                <Icon icon="SlSettings" />
+              ) : undefined
+            }
+          >
+            {item.label}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export const SelectiveIconMenu = SelectiveIconTemplate.bind({});
+SelectiveIconMenu.args = {
+  menuItems: [
+    { label: 'Profile', onClick: () => alert('Profile clicked') },
+    { label: 'Settings', onClick: () => alert('Settings clicked') },
+    { label: 'Logout', onClick: () => alert('Logout clicked') },
+  ],
+};

package/src/components/Menu/MenuButton.tsx

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

package/src/components/Menu/MenuButton.types.ts

@@ -0,0 +1,23 @@
+import {
+  Button,
+  MenuButtonProps as ChakraMenuButtonProps,
+} from '@chakra-ui/react';
+
+import { IconButton } from '@/components/IconButton';
+
+// as 속성에 들어갈 `Button`과 `IconButton`에 따른 조건부 타입
+interface ButtonMenuButtonProps extends ChakraMenuButtonProps {
+  as: typeof Button;
+  rightIcon?: React.ReactNode;
+  icon?: never;
+}
+
+interface IconButtonMenuButtonProps extends ChakraMenuButtonProps {
+  as: typeof IconButton;
+  icon?: React.ReactNode;
+  rightIcon?: never;
+}
+
+export type CustomMenuButtonProps =
+  | ButtonMenuButtonProps
+  | IconButtonMenuButtonProps;

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,35 @@
+import { MenuItem as ChakraMenuItem, useTheme } from '@chakra-ui/react';
+
+import { ItemVariant, MenuItemProps } from './MenuItem.types';
+
+export const MenuItem = ({
+  variant = ItemVariant.Default,
+  children,
+  ...rest
+}: MenuItemProps) => {
+  const theme = useTheme();
+  const isDangerVariant = variant === ItemVariant.Danger;
+
+  return (
+    <ChakraMenuItem
+      color={
+        isDangerVariant ? theme.semanticTokens.colors.danger.main : 'gray.800'
+      }
+      iconSpacing={0}
+      fontSize="md"
+      py={2}
+      minW="fit-content"
+      fontWeight="semibold"
+      gap={3}
+      _hover={{
+        color: isDangerVariant
+          ? theme.semanticTokens.colors.danger.main
+          : 'gray.1200',
+        backgroundColor: 'gray.50',
+      }}
+      {...rest}
+    >
+      {children}
+    </ChakraMenuItem>
+  );
+};

package/src/components/Menu/MenuItem.types.ts

@@ -0,0 +1,13 @@
+import { MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
+
+export const ItemVariant = {
+  Default: 'default',
+  Danger: 'danger',
+} as const;
+
+export type ItemVariant = (typeof ItemVariant)[keyof typeof ItemVariant];
+
+export interface MenuItemProps extends ChakraMenuItemProps {
+  variant?: ItemVariant | null;
+  onClick?: () => void;
+}

package/src/components/Menu/MenuList.tsx

@@ -0,0 +1,19 @@
+import {
+  MenuList as ChakraMenuList,
+  MenuListProps as ChakraMenuListProps,
+  useTheme,
+  useToken,
+} from '@chakra-ui/react';
+
+export const MenuList = ({ ...rest }: ChakraMenuListProps) => {
+  const theme = useTheme();
+  return (
+    <ChakraMenuList
+      border={`1px solid ${useToken('colors', theme.colors.gray[400])}`}
+      borderRadius="md"
+      boxShadow={`0 5px 20px 1px ${useToken('colors', theme.colors.gray[50])}`}
+      padding={1}
+      {...rest}
+    />
+  );
+};

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+
+export const Menu = ChakraMenu;
+
+export { MenuButton } from './MenuButton';
+export { MenuItem } from './MenuItem';
+export { MenuList } from './MenuList';

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Button } from '../Button';
+import { ButtonVariant } from '../Button/Button.types';
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '.';
+
+interface ModalArgs {
+  headerTitle: string;
+  hasCloseButton: boolean;
+  footerButtons: { label: string; variant?: ButtonVariant }[];
+}
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  args: {
+    header: 'Default Header',
+  },
+  argTypes: {
+    headerTitle: { control: 'text' },
+    hasCloseButton: { control: 'boolean', defaultValue: false },
+  },
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+} as Meta<typeof Modal>;
+
+export const Default: StoryFn<ModalArgs> = (args) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Confirm Modal</Button>
+      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <ModalContent>
+          {args.headerTitle && <ModalHeader>{args.headerTitle}</ModalHeader>}
+          {args.hasCloseButton && <ModalCloseButton />}
+          <ModalBody>열려라 참깨!</ModalBody>
+          {args.footerButtons && (
+            <ModalFooter>
+              {args.footerButtons.map((button, index) => (
+                <Button key={index} variant={button.variant || 'primary'}>
+                  {button.label}
+                </Button>
+              ))}
+            </ModalFooter>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+Default.args = {};
+
+export const WithHeader = Default.bind({});
+WithHeader.args = {
+  headerTitle: 'Welcome to Mindlogic!',
+};
+
+export const WithFooterButton = Default.bind({});
+WithFooterButton.args = {
+  headerTitle: 'Welcome to Mindlogic!',
+  footerButtons: [{ label: 'Confirm' }],
+};
+
+export const TwoButtons = Default.bind({});
+TwoButtons.args = {
+  footerButtons: [
+    { label: 'Cancel', variant: 'tertiary' },
+    { label: 'Save', variant: 'primary' },
+  ],
+};

package/src/components/Modal/Modal.styles.ts

@@ -0,0 +1,14 @@
+export const footerStyles = {
+  center: {
+    justifyContent: 'center',
+    gap: 4,
+  },
+  left: {
+    justifyContent: 'flex-start',
+    gap: 4,
+  },
+  right: {
+    justifyContent: 'flex-end',
+    gap: 4,
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Modal as ChakraModal } from '@chakra-ui/react';
+
+import { ModalProps } from './Modal.types';
+import { ModalOverlay } from './ModalOverlay';
+
+export const Modal = ({ children, ...rest }: ModalProps) => {
+  return (
+    <ChakraModal isCentered closeOnOverlayClick {...rest}>
+      <ModalOverlay />
+      {children}
+    </ChakraModal>
+  );
+};

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,3 @@
+import { ModalProps as ChakraModalProps } from '@chakra-ui/react';
+
+export type ModalProps = ChakraModalProps;

package/src/components/Modal/ModalBody.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {
+  ModalBody as ChakraModalBody,
+  ModalBodyProps as ChakraModalBodyProps,
+} from '@chakra-ui/react';
+
+export const ModalBody = ({ ...rest }: ChakraModalBodyProps) => {
+  return <ChakraModalBody px={6} py={4} {...rest} />;
+};

package/src/components/Modal/ModalCloseButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ModalCloseButton as ChakraModalCloseButton,
+  ModalCloseButtonProps as ChakraModalCloseButtonProps,
+} from '@chakra-ui/react';
+
+export const ModalCloseButton = ({ ...rest }: ChakraModalCloseButtonProps) => {
+  return (
+    <ChakraModalCloseButton
+      color="gray.600"
+      _hover={{
+        color: 'primary.main',
+        backgroundColor: 'transparent',
+      }}
+      {...rest}
+    />
+  );
+};

package/src/components/Modal/ModalContent/ModalContent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalContent as ChakraModalContent } from '@chakra-ui/react';
+
+import { ModalContentProps } from './ModalContent.types';
+
+export const ModalContent = ({ ...rest }: ModalContentProps) => {
+  return <ChakraModalContent {...rest} />;
+};

package/src/components/Modal/ModalContent/ModalContent.types.ts

@@ -0,0 +1,3 @@
+import { ModalContentProps as ChakraModalContentProps } from '@chakra-ui/react';
+
+export type ModalContentProps = ChakraModalContentProps;

package/src/components/Modal/ModalContent/index.ts

@@ -0,0 +1 @@
+export { ModalContent } from './ModalContent';

package/src/components/Modal/ModalFooter/ModalFooter.module.css

@@ -0,0 +1,3 @@
+.ml-modal-footer > * {
+  flex: 1;
+}

package/src/components/Modal/ModalFooter/ModalFooter.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  ModalFooter as ChakraModalFooter,
+  ModalFooterProps as ChakraModalFooterProps,
+} from '@chakra-ui/react';
+
+import styles from './ModalFooter.module.css';
+
+export const ModalFooter = ({ className, ...rest }: ChakraModalFooterProps) => {
+  return (
+    <ChakraModalFooter
+      className={[styles['ml-modal-footer'], className].join(' ')}
+      gap={3}
+      pt={4}
+      borderTop="1px solid"
+      borderColor="gray.50"
+      {...rest}
+    />
+  );
+};

package/src/components/Modal/ModalFooter/index.ts

@@ -0,0 +1 @@
+export { ModalFooter } from './ModalFooter';

package/src/components/Modal/ModalHeader.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {
+  ModalHeader as ChakraModalHeader,
+  ModalHeaderProps as ChakraModalHeaderProps,
+} from '@chakra-ui/react';
+
+export const ModalHeader = ({ ...rest }: ChakraModalHeaderProps) => {
+  return <ChakraModalHeader fontSize="xl" {...rest} />;
+};

package/src/components/Modal/ModalOverlay.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {
+  ModalOverlay as ChakraModalOverlay,
+  ModalOverlayProps as ChakraModalOverlayProps,
+} from '@chakra-ui/react';
+
+export const ModalOverlay = ({ ...rest }: ChakraModalOverlayProps) => {
+  return <ChakraModalOverlay {...rest} />;
+};

package/src/components/Modal/index.tsx

@@ -0,0 +1,8 @@
+export { Modal } from './Modal';
+export { type ModalProps } from './Modal.types';
+export { ModalBody } from './ModalBody';
+export { ModalCloseButton } from './ModalCloseButton';
+export { ModalContent } from './ModalContent';
+export { ModalFooter } from './ModalFooter';
+export { ModalHeader } from './ModalHeader';
+export { ModalOverlay } from './ModalOverlay';

package/src/components/MonthRangePicker/MonthButton/MonthButton.tsx

@@ -0,0 +1,105 @@
+import React, { memo } from 'react';
+
+import { Button } from '@/components/Button';
+import { ButtonVariant } from '@/components/Button/Button.types';
+
+import {
+  isMonthDisabled,
+  isMonthInPreviewRange,
+  isMonthInRange,
+  isMonthSelected,
+  isSelectionStart,
+} from '../_utils';
+import { MonthRange } from '../MonthRangePicker.types';
+import { MonthButtonProps } from './MonthButton.types';
+
+export const MonthButton: React.FC<MonthButtonProps> = memo(
+  ({
+    month,
+    year,
+    monthName,
+    selectedRange,
+    selectionStart,
+    hoveredMonth,
+    minMonth,
+    maxMonth,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...buttonProps
+  }) => {
+    const disabled = isMonthDisabled(month, year, minMonth, maxMonth);
+
+    const handleClick = () => {
+      if (!disabled) {
+        onClick(month, year);
+      }
+    };
+
+    const handleMouseEnter = () => {
+      if (!disabled && onMouseEnter) {
+        onMouseEnter(month, year);
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (onMouseLeave) {
+        onMouseLeave();
+      }
+    };
+
+    const getMonthButtonVariant = (
+      month: number,
+      year: number,
+      selectedRange?: MonthRange | null,
+      selectionStart?: Date | null,
+      hoveredMonth?: { month: number; year: number } | null,
+      minMonth?: Date,
+      maxMonth?: Date
+    ): ButtonVariant => {
+      if (isMonthDisabled(month, year, minMonth, maxMonth)) return 'tertiary';
+      if (isMonthSelected(month, year, selectedRange)) return 'primary';
+      if (isSelectionStart(month, year, selectionStart)) return 'primary';
+      if (isMonthInRange(month, year, selectedRange)) return 'secondary';
+
+      // Show preview range when hovering with a selection start
+      if (
+        isMonthInPreviewRange(
+          month,
+          year,
+          selectionStart || null,
+          hoveredMonth || null
+        )
+      ) {
+        return 'secondary';
+      }
+
+      return 'tertiary';
+    };
+
+    return (
+      <Button
+        size="sm"
+        variant={getMonthButtonVariant(
+          month,
+          year,
+          selectedRange,
+          selectionStart,
+          hoveredMonth,
+          minMonth,
+          maxMonth
+        )}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        disabled={disabled}
+        opacity={disabled ? 0.4 : 1}
+        {...buttonProps}
+      >
+        {monthName}
+      </Button>
+    );
+  }
+);
+
+MonthButton.displayName = 'MonthButton';

package/src/components/MonthRangePicker/MonthButton/MonthButton.types.ts

@@ -0,0 +1,42 @@
+import { ButtonProps } from '@/components/Button/Button.types';
+
+import { MonthRange } from '../MonthRangePicker.types';
+
+export interface MonthButtonProps
+  extends Omit<
+    ButtonProps,
+    'onClick' | 'variant' | 'disabled' | 'onMouseEnter' | 'onMouseLeave'
+  > {
+  /** The month index (0-11) */
+  month: number;
+
+  /** The year */
+  year: number;
+
+  /** The display name of the month */
+  monthName: string;
+
+  /** The currently selected month range */
+  selectedRange?: MonthRange | null;
+
+  /** The current selection start (intermediate state) */
+  selectionStart?: Date | null;
+
+  /** The currently hovered month for preview range */
+  hoveredMonth?: { month: number; year: number } | null;
+
+  /** Minimum selectable month */
+  minMonth?: Date;
+
+  /** Maximum selectable month */
+  maxMonth?: Date;
+
+  /** Click handler for month selection */
+  onClick: (month: number, year: number) => void;
+
+  /** Mouse enter handler for hover effects */
+  onMouseEnter?: (month: number, year: number) => void;
+
+  /** Mouse leave handler for hover effects */
+  onMouseLeave?: () => void;
+}

package/src/components/MonthRangePicker/MonthButton/index.ts

@@ -0,0 +1,2 @@
+export { MonthButton } from './MonthButton';
+export type { MonthButtonProps } from './MonthButton.types';