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

package/src/components/Select/Select.tsx

@@ -1,22 +1,12 @@
-import React from 'react';
-import ReactSelect, {
-  components,
-  ControlProps,
-  GroupBase,
-  MenuListProps,
-  OptionProps,
-} from 'react-select';
-import { Box, useTheme } from '@chakra-ui/react';
+import ReactSelect, { GroupBase } from 'react-select';
+import { useToken } from '@chakra-ui/react';
 
-import { resolveStyle } from './_utils/resolveStyle';
-import { VirtualizedMenuList } from './MenuList';
-import { VirtualizedMenuListProvider } from './MenuList/VirtualizedMenuListContext';
 import {
-  controlStyles,
-  getControlVariantStyles,
-  menuStyles,
-  optionStyles,
-  placeholderStyles,
+  getControlStyles,
+  getMenuStyles,
+  getOptionStyles,
+  getPlaceholderStyles,
+  SelectColors,
 } from './Select.styles';
 import { SelectProps } from './Select.types';
 
@@ -25,180 +15,146 @@ export const Select = <
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
 >({
-  styles,
   variant = 'default',
-  optionHeight = 35,
-  onMenuScrollToBottom,
-  'data-testid': dataTestId,
+  invalid = false,
+  styles,
   ...rest
-}: SelectProps<Option, IsMulti, Group> & { 'data-testid'?: string }) => {
-  const theme = useTheme();
-  const CustomOption = (props: OptionProps<Option, IsMulti, Group>) => {
-    const optionValue = (props.data as any)?.value || props.label || 'option';
-    return (
-      <Box
-        data-testid={
-          dataTestId ? `${dataTestId}-option-${optionValue}` : undefined
-        }
-      >
-        <components.Option {...props} />
-      </Box>
-    );
-  };
+}: SelectProps<Option, IsMulti, Group>) => {
+  const [
+    primaryColor,
+    primaryLightest,
+    primaryDark,
+    dangerColor,
+    gray50,
+    gray300,
+    gray400,
+    gray500,
+    gray600,
+    gray1200,
+  ] = useToken('colors', [
+    'primary.main',
+    'primary.lightest',
+    'primary.dark',
+    'danger.main',
+    'gray.50',
+    'gray.300',
+    'gray.400',
+    'gray.500',
+    'gray.600',
+    'gray.1200',
+  ]);
 
-  // 커스텀 Control 컴포넌트
-  const CustomControl = (props: ControlProps<Option, IsMulti, Group>) => {
-    return (
-      <Box data-testid={dataTestId ? `${dataTestId}-control` : undefined}>
-        <components.Control {...props} />
-      </Box>
-    );
+  const colors: SelectColors = {
+    primaryColor,
+    primaryLightest,
+    primaryDark,
+    dangerColor,
+    gray50,
+    gray300,
+    gray400,
+    gray500,
+    gray600,
+    gray1200,
   };
+
+  // invalid prop이 true이면 variant를 'danger'로 오버라이드
+  const effectiveVariant = invalid ? 'danger' : variant;
+
   return (
-    <VirtualizedMenuListProvider>
-      <Box data-testid={dataTestId}>
-        <ReactSelect<Option, IsMulti, Group>
-          closeMenuOnSelect
-          closeMenuOnScroll
-          isSearchable={false}
-          tabIndex={0}
-          classNamePrefix="react-select"
-          components={{
-            MenuList: (props: MenuListProps<Option, IsMulti, Group>) => (
-              <VirtualizedMenuList<Option, IsMulti, Group>
-                {...props}
-                onMenuScrollToBottom={onMenuScrollToBottom}
-                optionHeight={optionHeight}
-              />
-            ),
-            Option: CustomOption,
-            Control: CustomControl,
-            ...rest.components,
-          }}
-          styles={{
-            container: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  height: '100%',
-                },
-                styles?.container,
-                state
-              ),
-            }),
-            placeholder: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  ...placeholderStyles,
-                },
-                styles?.placeholder,
-                state
-              ),
-            }),
-            valueContainer: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  textAlign: 'left',
-                },
-                styles?.valueContainer,
-                state
-              ),
-            }),
-            singleValue: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  margin: 0,
-                  color: 'gray.1000',
-                },
-                styles?.singleValue,
-                state
-              ),
-            }),
-            menu: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  ...menuStyles,
-                },
-                styles?.menu,
-                state
-              ),
-            }),
-            menuList: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  padding: `0px ${theme.space[1]}`,
-                  // Important for the virtualized list - DON'T override overflow
-                  // as we need the default 'auto' from react-select for scrolling to work
-                },
-                styles?.menuList,
-                state
-              ),
-            }),
-            option: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  textAlign: 'left',
-                  padding: `${theme.space[0.5]} ${theme.space[1]}`,
-                  ...optionStyles(state),
-                },
-                styles?.option,
-                state
-              ),
-            }),
-            menuPortal: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  zIndex: 9999,
-                },
-                styles?.menuPortal,
-                state
-              ),
-            }),
-            control: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  ...controlStyles,
-                  ...getControlVariantStyles(state, variant),
-                  ...(state.isDisabled && {
-                    bg: 'gray.50',
-                  }),
-                },
-                styles?.control,
-                state
-              ),
-            }),
-            indicatorSeparator: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  display: 'none',
-                },
-                styles?.indicatorSeparator,
-                state
-              ),
-            }),
-            dropdownIndicator: (base, state) => ({
-              ...resolveStyle(
-                {
-                  ...base,
-                  color: 'gray.800',
-                },
-                styles?.dropdownIndicator,
-                state
-              ),
-            }),
-          }}
-          {...rest}
-        />
-      </Box>
-    </VirtualizedMenuListProvider>
+    <ReactSelect<Option, IsMulti, Group>
+      closeMenuOnSelect
+      closeMenuOnScroll
+      isSearchable={false}
+      {...rest}
+      styles={{
+        container: (base, state) => ({
+          ...base,
+          width: '100%',
+          ...(styles?.container ? styles.container(base, state) : {}),
+        }),
+        control: (base, state) => ({
+          ...base,
+          ...getControlStyles(effectiveVariant, colors),
+          width: '100%',
+          border: `1px solid ${
+            invalid ? dangerColor : state.isFocused ? primaryColor : gray300
+          }`,
+          boxShadow: 'none',
+          '&:hover': {
+            borderColor: invalid
+              ? dangerColor
+              : state.isFocused
+                ? primaryColor
+                : gray400,
+          },
+          ...(styles?.control ? styles.control(base, state) : {}),
+        }),
+        placeholder: (base, state) => ({
+          ...base,
+          ...getPlaceholderStyles(colors),
+          ...(styles?.placeholder ? styles.placeholder(base, state) : {}),
+        }),
+        menu: (base, state) => ({
+          ...base,
+          ...getMenuStyles(colors),
+          ...(styles?.menu ? styles.menu(base, state) : {}),
+        }),
+        menuList: (base, state) => ({
+          ...base,
+          padding: '0px 4px',
+          ...(styles?.menuList ? styles.menuList(base, state) : {}),
+        }),
+        option: (base, state) => ({
+          ...base,
+          ...getOptionStyles({
+            isSelected: state.isSelected,
+            isFocused: state.isFocused,
+            isDisabled: state.isDisabled,
+            colors,
+          }),
+          ...(styles?.option ? styles.option(base, state) : {}),
+        }),
+        singleValue: (base, state) => ({
+          ...base,
+          margin: 0,
+          color: gray1200,
+          ...(styles?.singleValue ? styles.singleValue(base, state) : {}),
+        }),
+        valueContainer: (base, state) => ({
+          ...base,
+          display: 'flex',
+          alignItems: 'center',
+          textAlign: 'left',
+          ...(styles?.valueContainer ? styles.valueContainer(base, state) : {}),
+        }),
+        indicatorSeparator: (base, state) => ({
+          ...base,
+          display: 'none',
+          ...(styles?.indicatorSeparator
+            ? styles.indicatorSeparator(base, state)
+            : {}),
+        }),
+        dropdownIndicator: (base, state) => ({
+          ...base,
+          color: gray1200,
+          ...(styles?.dropdownIndicator
+            ? styles.dropdownIndicator(base, state)
+            : {}),
+        }),
+        indicatorsContainer: (base, state) => ({
+          ...base,
+          display: 'flex',
+          alignItems: 'center',
+          ...(styles?.indicatorsContainer
+            ? styles.indicatorsContainer(base, state)
+            : {}),
+        }),
+        menuPortal: (base, state) => ({
+          ...base,
+          zIndex: 9999,
+          ...(styles?.menuPortal ? styles.menuPortal(base, state) : {}),
+        }),
+      }}
+    />
   );
 };

package/src/components/Select/Select.types.ts

@@ -8,8 +8,7 @@ export type SelectProps<
   Group extends GroupBase<Option>,
 > = Props<Option, IsMulti, Group> & {
   variant?: SelectVariant;
-  optionHeight?: number;
-  maxHeight?: number;
+  invalid?: boolean;
 };
 
 export type SelectOption<T> = {

package/src/components/Slider/Slider.stories.tsx

@@ -3,82 +3,243 @@ import { useState } from 'react';
 
 import {
   Slider,
+  SliderControl,
   SliderFilledTrack,
   SliderThumb,
+  SliderThumbs,
   SliderTrack,
 } from '@/components/Slider';
 
 const meta = {
   title: 'Components/Slider',
   component: Slider,
-  decorators: [
-    (Story) => {
-      const [value, setValue] = useState(50);
-      return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <span>Value: {value}</span>
-          <div style={{ flex: 1 }}>
-            <Story args={{ onChange: (val: number) => setValue(val), value }} />
-          </div>
-        </div>
-      );
-    },
-  ],
 } satisfies Meta<typeof Slider>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    defaultValue: 50,
+/**
+ * Basic Slider - Single value slider
+ */
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span>Value: {value[0]}</span>
+        <div style={{ flex: 1 }}>
+          <Slider
+            value={value}
+            min={0}
+            max={100}
+            step={1}
+            onValueChange={(details) => setValue(details.value)}
+          >
+            <SliderControl>
+              <SliderTrack>
+                <SliderFilledTrack />
+              </SliderTrack>
+              <SliderThumb index={0} />
+            </SliderControl>
+          </Slider>
+        </div>
+      </div>
+    );
   },
-  render: (args) => (
-    <Slider {...args}>
-      <SliderTrack>
-        <SliderFilledTrack />
-      </SliderTrack>
-      <SliderThumb />
-    </Slider>
-  ),
 };
 
 export const Customized: Story = {
-  args: {
-    min: 0,
-    max: 10,
-    step: 0.5,
-    defaultValue: 5,
+  render: () => {
+    const [value, setValue] = useState([5]);
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span>Value: {value[0]}</span>
+        <div style={{ flex: 1 }}>
+          <Slider
+            value={value}
+            min={0}
+            max={10}
+            step={0.5}
+            onValueChange={(details) => setValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumb index={0} />
+          </Slider>
+        </div>
+      </div>
+    );
   },
-  render: (args) => (
-    <Slider {...args}>
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Slider value={[50]} min={0} max={100} disabled>
       <SliderTrack>
         <SliderFilledTrack />
       </SliderTrack>
-      <SliderThumb />
+      <SliderThumb index={0} />
     </Slider>
   ),
 };
 
-export const WithCustomThumb: Story = {
-  args: {
-    min: 0,
-    max: 1,
-    step: 0.01,
-    defaultValue: 0.5,
+/**
+ * Using SliderThumbs (plural) - Automatic thumb generation
+ * SliderThumbs automatically creates thumbs based on value array length.
+ * No need to specify index prop.
+ */
+export const WithSliderThumbs: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span>Value: {value[0]}</span>
+        <div style={{ flex: 1 }}>
+          <Slider
+            value={value}
+            min={0}
+            max={100}
+            step={1}
+            onValueChange={(details) => setValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumbs />
+          </Slider>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Range Slider with SliderThumbs
+ * Automatically creates 2 thumbs for a range slider.
+ */
+export const RangeWithSliderThumbs: Story = {
+  render: () => {
+    const [value, setValue] = useState([20, 80]);
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span>Range: {value[0]} - {value[1]}</span>
+        <div style={{ flex: 1 }}>
+          <Slider
+            value={value}
+            min={0}
+            max={100}
+            step={1}
+            onValueChange={(details) => setValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumbs />
+          </Slider>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom Styled Thumbs with SliderThumb (singular)
+ * Use SliderThumb when you need to customize individual thumbs.
+ * index prop is required when using SliderThumb directly.
+ */
+export const CustomStyledThumbs: Story = {
+  render: () => {
+    const [value, setValue] = useState([30, 70]);
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span>Range: {value[0]} - {value[1]}</span>
+        <div style={{ flex: 1 }}>
+          <Slider
+            value={value}
+            min={0}
+            max={100}
+            onValueChange={(details) => setValue(details.value)}
+          >
+            <SliderTrack bg="gray.100">
+              <SliderFilledTrack bg="blue.500" />
+            </SliderTrack>
+            <SliderThumb index={0} boxSize={5} bg="blue.500" borderWidth={2} borderColor="white" />
+            <SliderThumb index={1} boxSize={5} bg="purple.500" borderWidth={2} borderColor="white" />
+          </Slider>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Slider Sizes
+ * Demonstrates different size variations: sm, md, lg
+ */
+export const Sizes: Story = {
+  render: () => {
+    const [smallValue, setSmallValue] = useState([30]);
+    const [mediumValue, setMediumValue] = useState([50]);
+    const [largeValue, setLargeValue] = useState([70]);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div>
+          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+            Small (sm) - Value: {smallValue[0]}
+          </div>
+          <Slider
+            size="sm"
+            value={smallValue}
+            min={0}
+            max={100}
+            onValueChange={(details) => setSmallValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumb index={0} />
+          </Slider>
+        </div>
+
+        <div>
+          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+            Medium (md) - Value: {mediumValue[0]}
+          </div>
+          <Slider
+            size="md"
+            value={mediumValue}
+            min={0}
+            max={100}
+            onValueChange={(details) => setMediumValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumb index={0} />
+          </Slider>
+        </div>
+
+        <div>
+          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+            Large (lg) - Value: {largeValue[0]}
+          </div>
+          <Slider
+            size="lg"
+            value={largeValue}
+            min={0}
+            max={100}
+            onValueChange={(details) => setLargeValue(details.value)}
+          >
+            <SliderTrack>
+              <SliderFilledTrack />
+            </SliderTrack>
+            <SliderThumb index={0} />
+          </Slider>
+        </div>
+      </div>
+    );
   },
-  render: (args) => (
-    <Slider {...args}>
-      <SliderTrack>
-        <SliderFilledTrack />
-      </SliderTrack>
-      <SliderThumb boxSize={6} bg="blue.500">
-        <span style={{ color: 'white', fontWeight: 'bold' }}>•</span>
-      </SliderThumb>
-    </Slider>
-  ),
 };