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

package/src/components/Select/Select.styles.ts

@@ -0,0 +1,102 @@
+import { useToken } from '@chakra-ui/react';
+
+import theme from '@/theme/index';
+
+import { SelectVariant } from './Select.types';
+
+export const placeholderStyles = {
+  color: theme.colors.gray[800],
+  fontSize: theme.fontSizes.p,
+  fontWeight: theme.fontWeights.semibold,
+};
+
+export const menuStyles = {
+  width: 'max-content',
+  minWidth: '100%',
+  backgroundColor: theme.colors.white,
+  borderRadius: theme.radii.md,
+  border: `1px solid ${theme.colors.gray[400]}`,
+  marginTop: 3,
+  boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
+  zIndex: 9,
+};
+
+export const optionStyles = ({
+  isDisabled,
+  isFocused,
+  isSelected,
+}: {
+  isDisabled: boolean;
+  isFocused: boolean;
+  isSelected: boolean;
+}) => ({
+  cursor: isDisabled ? 'not-allowed' : 'pointer',
+  height: theme.sizes[10],
+  margin: '16px 0', // Use direct spacing value instead of theme.spacing[4]
+  borderRadius: theme.radii.sm,
+  fontSize: theme.fontSizes.p,
+  backgroundColor:
+    isSelected || isFocused || isDisabled
+      ? theme.colors.gray[50]
+      : theme.colors.white,
+  color: isSelected
+    ? theme.colors.gray[1500]
+    : isDisabled
+      ? theme.colors.gray[800]
+      : theme.colors.gray[1200],
+  fontWeight: isSelected
+    ? theme.fontWeights.semibold
+    : theme.fontWeights.normal,
+  '&:hover': {
+    backgroundColor: theme.colors.gray[50],
+  },
+});
+
+export const controlStyles = {
+  borderRadius: theme.radii.md,
+  cursor: 'pointer',
+  maxWidth: '100%',
+  height: '100%',
+  color: theme.colors.gray[1200],
+  fontSize: theme.fontSizes.p,
+  fontWeight: theme.fontWeights.semibold,
+  paddingLeft: 4,
+  paddingRight: 3,
+  border: `1px solid ${theme.colors.gray[400]}`,
+  boxShadow: 'none',
+};
+
+export const getControlVariantStyles = (state: any, variant: SelectVariant) => {
+  const primaryColor = useToken(
+    'colors',
+    theme.semanticTokens.colors.primary.main
+  );
+  const dangerColor = useToken(
+    'colors',
+    theme.semanticTokens.colors.danger.main
+  );
+  switch (variant) {
+    case 'danger':
+      return {
+        border: `1px solid ${dangerColor}`,
+        boxShadow: `0 0 0 1px ${dangerColor}`,
+      };
+    default:
+      return {
+        fontWeight: theme.fontWeights.semibold,
+        border: `1px solid ${
+          state.isFocused ? primaryColor : theme.colors.gray[400]
+        }`,
+        boxShadow: state.isFocused
+          ? `0 0 0 1px ${primaryColor} !important`
+          : 'none',
+        '&:hover': state.isFocused
+          ? {
+              borderColor: primaryColor,
+            }
+          : {
+              borderColor: useToken('colors', 'gray.600'),
+            },
+      };
+  }
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import ReactSelect, {
+  components,
+  ControlProps,
+  GroupBase,
+  MenuListProps,
+  OptionProps,
+} from 'react-select';
+import { Box, useTheme } from '@chakra-ui/react';
+
+import { resolveStyle } from './_utils/resolveStyle';
+import { VirtualizedMenuList } from './MenuList';
+import { VirtualizedMenuListProvider } from './MenuList/VirtualizedMenuListContext';
+import {
+  controlStyles,
+  getControlVariantStyles,
+  menuStyles,
+  optionStyles,
+  placeholderStyles,
+} from './Select.styles';
+import { SelectProps } from './Select.types';
+
+export const Select = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>({
+  styles,
+  variant = 'default',
+  optionHeight = 35,
+  onMenuScrollToBottom,
+  'data-testid': dataTestId,
+  ...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>
+    );
+  };
+
+  // 커스텀 Control 컴포넌트
+  const CustomControl = (props: ControlProps<Option, IsMulti, Group>) => {
+    return (
+      <Box data-testid={dataTestId ? `${dataTestId}-control` : undefined}>
+        <components.Control {...props} />
+      </Box>
+    );
+  };
+  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: theme.colors.gray[1000],
+                },
+                styles?.singleValue,
+                state
+              ),
+            }),
+            menu: (base, state) => ({
+              ...resolveStyle(
+                {
+                  ...base,
+                  ...menuStyles,
+                },
+                styles?.menu,
+                state
+              ),
+            }),
+            menuList: (base, state) => ({
+              ...resolveStyle(
+                {
+                  ...base,
+                  padding: `0px ${theme.spacing[4]}`,
+                  // 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.spacing[2]} ${theme.spacing[4]}`,
+                  ...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: theme.colors.gray[50],
+                  }),
+                },
+                styles?.control,
+                state
+              ),
+            }),
+            indicatorSeparator: (base, state) => ({
+              ...resolveStyle(
+                {
+                  ...base,
+                  display: 'none',
+                },
+                styles?.indicatorSeparator,
+                state
+              ),
+            }),
+            dropdownIndicator: (base, state) => ({
+              ...resolveStyle(
+                {
+                  ...base,
+                  color: theme.colors.gray[800],
+                },
+                styles?.dropdownIndicator,
+                state
+              ),
+            }),
+          }}
+          {...rest}
+        />
+      </Box>
+    </VirtualizedMenuListProvider>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { GroupBase, Props } from 'react-select';
+
+export type SelectVariant = 'default' | 'danger';
+
+export type SelectProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+> = Props<Option, IsMulti, Group> & {
+  variant?: SelectVariant;
+  optionHeight?: number;
+  maxHeight?: number;
+};
+
+export type SelectOption<T> = {
+  label: string;
+  value: T;
+};

package/src/components/Select/_utils/resolveStyle.ts

@@ -0,0 +1,21 @@
+type StyleObject = Record<string, any>;
+type StyleFunction = (base: StyleObject, state: any) => StyleObject;
+
+export const resolveStyle = (
+  base: StyleObject,
+  style?: StyleObject | StyleFunction,
+  state: any = {}
+): StyleObject => {
+  if (!style) {
+    return base;
+  }
+
+  if (typeof style === 'function') {
+    return style(base, state);
+  }
+
+  return {
+    ...base,
+    ...style,
+  };
+};

package/src/components/Select/index.ts

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

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import {
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+} from '@/components/Slider';
+
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  subcomponents: { SliderTrack, SliderFilledTrack, SliderThumb },
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState(50);
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+          <span>Value: {value}</span>
+          <Story
+            args={{
+              onChange: (val: number) => setValue(val),
+              value,
+            }}
+          />
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof Slider>;
+
+const Template: ComponentStory<typeof Slider> = (args) => (
+  <Slider {...args}>
+    <SliderTrack>
+      <SliderFilledTrack />
+    </SliderTrack>
+    <SliderThumb />
+  </Slider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  min: 0,
+  max: 100,
+  step: 1,
+  defaultValue: 50,
+};
+
+export const Customized = Template.bind({});
+Customized.args = {
+  min: 0,
+  max: 10,
+  step: 0.5,
+  defaultValue: 5,
+};
+
+export const WithCustomThumb = Template.bind({});
+WithCustomThumb.args = {
+  min: 0,
+  max: 1,
+  step: 0.01,
+  defaultValue: 0.5,
+  children: (
+    <>
+      <SliderTrack>
+        <SliderFilledTrack />
+      </SliderTrack>
+      <SliderThumb boxSize={6} bg="blue.500">
+        {/* Example custom content inside thumb */}
+        <span style={{ color: 'white', fontWeight: 'bold' }}>•</span>
+      </SliderThumb>
+    </>
+  ),
+};

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Slider as ChakraSlider } from '@chakra-ui/react';
+
+import { SliderProps } from './Slider.types';
+
+export const Slider = forwardRef(
+  ({ ...rest }: SliderProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return <ChakraSlider {...rest} ref={ref} />;
+  }
+);
+
+Slider.displayName = 'Slider';

package/src/components/Slider/Slider.types.ts

@@ -0,0 +1,3 @@
+import { SliderProps as ChakraSliderProps } from '@chakra-ui/react';
+
+export interface SliderProps extends ChakraSliderProps {}

package/src/components/Slider/SliderFilledTrack/SliderFilledTrack.tsx

@@ -0,0 +1,14 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { SliderFilledTrack as ChakraSliderFilledTrack } from '@chakra-ui/react';
+
+import { SliderFilledTrackProps } from './SliderFilledTrack.types';
+
+export const SliderFilledTrack = forwardRef(
+  ({ ...rest }: SliderFilledTrackProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <ChakraSliderFilledTrack bgColor="primary.main" {...rest} ref={ref} />
+    );
+  }
+);
+
+SliderFilledTrack.displayName = 'SliderFilledTrack';

package/src/components/Slider/SliderFilledTrack/SliderFilledTrack.types.ts

@@ -0,0 +1,3 @@
+import { SliderTrackProps as ChakraSliderFilledTrackProps } from '@chakra-ui/react';
+
+export interface SliderFilledTrackProps extends ChakraSliderFilledTrackProps {}

package/src/components/Slider/SliderFilledTrack/index.ts

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

package/src/components/Slider/SliderMark/SliderMark.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { SliderMark as ChakraSliderMark } from '@chakra-ui/react';
+
+import { SliderMarkProps } from './SliderMark.types';
+
+export const SliderMark = forwardRef(
+  ({ ...rest }: SliderMarkProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return <ChakraSliderMark {...rest} ref={ref} />;
+  }
+);
+
+SliderMark.displayName = 'SliderMark';

package/src/components/Slider/SliderMark/SliderMark.types.ts

@@ -0,0 +1,3 @@
+import { SliderMarkProps as ChakraSliderMarkProps } from '@chakra-ui/react';
+
+export interface SliderMarkProps extends ChakraSliderMarkProps {}

package/src/components/Slider/SliderMark/index.ts

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

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -0,0 +1,22 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { SliderThumb as ChakraSliderThumb } from '@chakra-ui/react';
+
+import { SliderThumbProps } from './SliderThumb.types';
+
+export const SliderThumb = forwardRef(
+  ({ ...rest }: SliderThumbProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <ChakraSliderThumb
+        border="3px solid"
+        w={4}
+        h={4}
+        borderColor="primary.main"
+        boxShadow="none"
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+SliderThumb.displayName = 'SliderThumb';

package/src/components/Slider/SliderThumb/SliderThumb.types.ts

@@ -0,0 +1,3 @@
+import { SliderThumbProps as ChakraSliderThumbProps } from '@chakra-ui/react';
+
+export interface SliderThumbProps extends ChakraSliderThumbProps {}

package/src/components/Slider/SliderThumb/index.ts

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

package/src/components/Slider/SliderTrack/SliderTrack.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { SliderTrack as ChakraSliderTrack } from '@chakra-ui/react';
+
+import { SliderTrackProps } from './SliderTrack.types';
+
+export const SliderTrack = forwardRef(
+  ({ ...rest }: SliderTrackProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return <ChakraSliderTrack {...rest} ref={ref} />;
+  }
+);
+
+SliderTrack.displayName = 'SliderTrack';

package/src/components/Slider/SliderTrack/SliderTrack.types.ts

@@ -0,0 +1,3 @@
+import { SliderTrackProps as ChakraSliderTrackProps } from '@chakra-ui/react';
+
+export interface SliderTrackProps extends ChakraSliderTrackProps {}

package/src/components/Slider/SliderTrack/index.ts

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

package/src/components/Slider/index.ts

@@ -0,0 +1,5 @@
+export * from './Slider';
+export * from './SliderFilledTrack';
+export * from './SliderMark';
+export * from './SliderThumb';
+export * from './SliderTrack';

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Spinner } from './Spinner';
+
+export default {
+  title: 'Components/Spinner',
+  component: Spinner,
+} as ComponentMeta<typeof Spinner>;
+
+const Template: ComponentStory<typeof Spinner> = (args) => (
+  <Spinner {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,20 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Spinner as ChakraSpinner } from '@chakra-ui/react';
+
+import { SpinnerProps } from './Spinner.types';
+
+export const Spinner = forwardRef(
+  ({ ...rest }: SpinnerProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <ChakraSpinner
+        emptyColor="gray.200"
+        color="primary.main"
+        speed="0.65s"
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps as ChakraSpinnerProps } from '@chakra-ui/react';
+
+export interface SpinnerProps extends ChakraSpinnerProps {}

package/src/components/Spinner/index.ts

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

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Stack, Switch, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  argTypes: {
+    isChecked: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'], // Available sizes in Chakra's Switch
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+// Uncontrolled Story: Allows toggling without external state management
+export const Uncontrolled: Story = {
+  args: {
+    size: 'md',
+    isDisabled: false,
+  },
+};
+
+// Controlled Story: Manage state externally
+export const Controlled: Story = {
+  render: (args) => {
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleToggle = () => {
+      setIsChecked(!isChecked);
+    };
+
+    return (
+      <Stack direction="row" align="center" spacing={4}>
+        <Switch
+          {...args}
+          isChecked={isChecked} // Controlled isChecked state
+          onChange={handleToggle} // Toggling state
+        />
+        <Text>{isChecked ? 'On' : 'Off'}</Text>
+      </Stack>
+    );
+  },
+  args: {
+    size: 'md',
+    isDisabled: false,
+  },
+};
+
+// Disabled Story: Switch in a disabled state
+export const Disabled: Story = {
+  args: {
+    size: 'md',
+    isDisabled: true,
+    isChecked: true,
+  },
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Switch as ChakraSwitch } from '@chakra-ui/react';
+
+export const Switch = ({ ...rest }) => {
+  return <ChakraSwitch {...rest} />;
+};
+
+Switch.displayName = 'Switch';

package/src/components/Switch/index.ts

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