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

package/src/components/Input/Input.stories.tsx

@@ -1,7 +1,9 @@
+import { Stack, Box, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { IoCall, IoSearch } from '@/components/Icon';
+import { IoCall, IoSearch, IoIosMail } from '@/components/Icon';
+import { MaxLengthIndicator } from '../MaxLengthIndicator';
 
 import { Input } from './Input';
 
@@ -16,8 +18,7 @@ const meta = {
         options: ['sm', 'md', 'lg'],
       },
     },
-    isDisabled: { control: 'boolean' },
-    isInvalid: { control: 'boolean' },
+    disabled: { control: 'boolean' },
     maxLength: { control: 'number' },
   },
   render: (args) => {
@@ -39,12 +40,114 @@ type Story = StoryObj<typeof Input>;
 
 export const Basic: Story = {};
 
+export const ControlledWithValue: Story = {
+  args: {
+    placeholder: 'Type something...',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('Initial value');
+
+    return (
+      <Stack gap={4}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Text fontSize="sm" color="gray.600">
+          Current value: "{value}"
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => {
+    return (
+      <Stack gap={4}>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Small
+          </Text>
+          <Input size="sm" placeholder="Small input" />
+        </Box>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Medium (default)
+          </Text>
+          <Input size="md" placeholder="Medium input" />
+        </Box>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Large
+          </Text>
+          <Input size="lg" placeholder="Large input" />
+        </Box>
+      </Stack>
+    );
+  },
+};
+
+export const WithStates: Story = {
+  render: () => {
+    return (
+      <Stack gap={4}>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Normal
+          </Text>
+          <Input placeholder="Normal state" />
+        </Box>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Disabled
+          </Text>
+          <Input placeholder="Disabled state" disabled value="Disabled" />
+        </Box>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Read Only
+          </Text>
+          <Input placeholder="Read only" readOnly value="Read only value" />
+        </Box>
+        <Box>
+          <Text fontSize="sm" fontWeight="medium" mb={2}>
+            Invalid (with error border)
+          </Text>
+          <Input placeholder="Invalid state" invalid />
+        </Box>
+      </Stack>
+    );
+  },
+};
+
+export const WithMaxLength: Story = {
+  args: {
+    placeholder: 'Max 20 characters',
+    maxLength: 20,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Stack gap={2}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <MaxLengthIndicator value={value.length} maxLength={20} />
+      </Stack>
+    );
+  },
+};
+
 export const LeftIcon: Story = {
   args: {
     placeholder: 'Phone number',
     size: 'md',
-    isDisabled: false,
-    isInvalid: false,
+    disabled: false,
     leftIcon: <IoCall color="gray.300" />,
   },
 };
@@ -53,9 +156,104 @@ export const RightIcon: Story = {
   args: {
     placeholder: 'Search...',
     size: 'md',
-    isDisabled: false,
-    isInvalid: false,
+    disabled: false,
     rightIcon: <IoSearch color="gray.300" />,
-    maxLength: 20,
+  },
+};
+
+export const BothIcons: Story = {
+  args: {
+    placeholder: 'Email address',
+    leftIcon: <IoIosMail color="gray.300" />,
+    rightIcon: <IoSearch color="gray.300" />,
+  },
+};
+
+export const NumberWithMask: Story = {
+  args: {
+    placeholder: 'Enter amount',
+    type: 'number',
+    maskNumber: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Stack gap={2}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Text fontSize="sm" color="gray.600">
+          Raw value: {value}
+        </Text>
+        <Text fontSize="xs" color="gray.500">
+          Numbers are automatically formatted with commas
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+export const TrimWhiteSpace: Story = {
+  args: {
+    placeholder: 'No leading/trailing spaces allowed',
+    trimWhiteSpace: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Stack gap={2}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Text fontSize="xs" color="gray.500">
+          Try typing spaces at the beginning or end
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+export const NoSpaces: Story = {
+  args: {
+    placeholder: 'No spaces allowed at all',
+    noSpaces: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Stack gap={2}>
+        <Input
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Text fontSize="xs" color="gray.500">
+          Try typing spaces - they will be removed
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+export const FocusState: Story = {
+  args: {
+    placeholder: 'Click to see focus border (primary.main)',
+  },
+  render: (args) => {
+    return (
+      <Stack gap={2}>
+        <Input {...args} />
+        <Text fontSize="xs" color="gray.500">
+          Focus border should be primary.main color
+        </Text>
+      </Stack>
+    );
   },
 };

package/src/components/Input/Input.tsx

@@ -7,13 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import {
-  Input as ChakraInput,
-  InputGroup,
-  InputLeftElement,
-  InputRightElement,
-  useTheme,
-} from '@chakra-ui/react';
+import { Input as ChakraInput, InputGroup } from '@chakra-ui/react';
 
 import { formatNumber } from '@/utils/formatNumber';
 
@@ -61,9 +55,7 @@ export const Input = forwardRef(
   (
     {
       leftIcon,
-      leftElementProps,
       rightIcon,
-      rightElementProps,
       onKeyDown,
       onCompositionEnd,
       onCompositionStart,
@@ -78,13 +70,15 @@ export const Input = forwardRef(
       _focus,
       trimWhiteSpace = false,
       noSpaces = false,
+      disabled,
+      invalid,
+      readOnly,
       ...rest
     }: InputProps,
     ref?: ForwardedRef<HTMLInputElement>
   ) => {
     const rightElementRef = useRef<HTMLDivElement>(null);
     const [rightElementWidth, setRightElementWidth] = useState(0);
-    const theme = useTheme();
     const isComposing = useRef(false);
     const cursorPosition = useRef<number | null>(null);
     const [shouldRestoreCursor, setShouldRestoreCursor] = useState(false);
@@ -301,12 +295,16 @@ export const Input = forwardRef(
     const inputType = maskNumber && type === 'number' ? 'text' : type;
 
     return (
-      <InputGroup size={size} {...wrapperProps}>
-        {leftIcon && (
-          <InputLeftElement {...leftElementProps}>{leftIcon}</InputLeftElement>
-        )}
+      <InputGroup
+        startElement={leftIcon}
+        endElement={
+          rightIcon ? <div ref={rightElementRef}>{rightIcon}</div> : undefined
+        }
+        {...wrapperProps}
+      >
         <ChakraInput
           ref={ref}
+          size={size}
           maxLength={maxLength}
           value={currentValue}
           onChange={handleChange}
@@ -315,17 +313,27 @@ export const Input = forwardRef(
           onCompositionEnd={handleCompositionEnd}
           onKeyDown={handleKeyDown}
           type={inputType}
-          borderColor="gray.400"
-          bgColor="white"
+          disabled={disabled}
+          readOnly={readOnly}
+          data-invalid={invalid || undefined}
+          borderColor={invalid ? 'danger.main' : 'gray.400'}
           _hover={{
-            borderColor: 'gray.600',
+            borderColor: invalid ? 'danger.main' : 'primary.lighter',
             ..._hover,
           }}
           _focus={{
-            borderColor: 'primary.main',
+            borderColor: invalid ? 'danger.main' : 'primary.main',
             ..._focus,
           }}
-          focusBorderColor={theme.semanticTokens.colors.primary.main}
+          _invalid={{
+            borderColor: 'danger.main',
+            _hover: {
+              borderColor: 'danger.main',
+            },
+            _focus: {
+              borderColor: 'danger.main',
+            },
+          }}
           _readOnly={{
             opacity: 1,
             cursor: 'not-allowed',
@@ -340,17 +348,13 @@ export const Input = forwardRef(
             color: 'gray.1000',
             fontWeight: 'semibold',
           }}
-          sx={{
+          css={{
             paddingInlineEnd: rightElementWidth,
+            '--focus-color': 'var(--chakra-colors-primary-main)',
+            '--error-color': 'var(--chakra-colors-danger-main)',
           }}
-          errorBorderColor={theme.semanticTokens.colors.danger.main}
           {...rest}
         />
-        {rightIcon && (
-          <InputRightElement ref={rightElementRef} {...rightElementProps}>
-            {rightIcon}
-          </InputRightElement>
-        )}
       </InputGroup>
     );
   }

package/src/components/Input/Input.types.ts

@@ -1,19 +1,20 @@
 import {
+  InputElementProps,
   InputGroupProps,
-  InputLeftElementProps,
   InputProps as ChakraInputProps,
-  InputRightElementProps,
 } from '@chakra-ui/react';
 
 export interface InputProps extends ChakraInputProps {
   leftIcon?: React.ReactElement;
   rightIcon?: React.ReactElement;
   wrapperProps?: InputGroupProps;
-  leftElementProps?: InputLeftElementProps;
-  rightElementProps?: InputRightElementProps;
+  leftElementProps?: InputElementProps;
+  rightElementProps?: InputElementProps;
   maskNumber?: boolean;
   /** 빈값일 때 공백 입력 방지 및 복사 붙여넣기 시 앞뒤 공백 제거 */
   trimWhiteSpace?: boolean;
   /** 모든 공백을 허용하지 않음 */
   noSpaces?: boolean;
+  /** Controls invalid visual state */
+  invalid?: boolean;
 }

package/src/components/LineGraph/LineGraph.tsx

@@ -1,4 +1,4 @@
-import { Box, useTheme, useToken } from '@chakra-ui/react';
+import { Box, useToken } from '@chakra-ui/react';
 import {
   CartesianGrid,
   Legend,
@@ -18,7 +18,7 @@ export const LineGraph = <T extends DatumBase>({
   displayLegend = true,
   ...rest
 }: LineGraphProps<T>) => {
-  const theme = useTheme();
+  const primaryColor = useToken('colors', 'primary.main')[0];
   return (
     <Box h="400px" {...rest}>
       <ResponsiveContainer width="100%" height="100%">
@@ -44,7 +44,7 @@ export const LineGraph = <T extends DatumBase>({
             // Props of text
             tick={{
               fill: 'gray.1200',
-              fontSize: useToken('fontSizes', 'sm'),
+              fontSize: `${useToken('fontSizes', 'sm')}`,
             }}
             tickMargin={8}
           />
@@ -54,7 +54,7 @@ export const LineGraph = <T extends DatumBase>({
             // Props of text
             tick={{
               fill: 'gray.1200',
-              fontSize: useToken('fontSizes', 'sm'),
+              fontSize: `${useToken('fontSizes', 'sm')}`,
             }}
             tickMargin={0}
           />
@@ -77,10 +77,7 @@ export const LineGraph = <T extends DatumBase>({
               type="monotone"
               dataKey={key}
               name={label}
-              stroke={
-                color ??
-                useToken('colors', theme.semanticTokens.colors.primary.main)
-              }
+              stroke={color ?? primaryColor}
               dot={{ r: 0 }}
             />
           ))}

package/src/components/Loaders/PageLoader.tsx

@@ -1,8 +1,6 @@
 import BounceLoader from 'react-spinners/BounceLoader';
 import { Box, Flex, FlexProps } from '@chakra-ui/react';
 
-import theme from '../../theme';
-
 export const PageLoader = ({
   isLoading,
   ...rest
@@ -18,12 +16,15 @@ export const PageLoader = ({
       justify="center"
       opacity={isLoading ? 0.5 : 0}
       transition="0.3s opacity ease"
-      bg={theme.colors.white}
+      bg="white"
       zIndex={9999}
       {...rest}
     >
       <Box position="relative">
-        <BounceLoader color={theme.colors.blue[500]} style={{ zIndex: 999 }} />
+        <BounceLoader
+          color="var(--chakra-colors-primary-main)"
+          style={{ zIndex: 999 }}
+        />
       </Box>
     </Flex>
   );

package/src/components/Loaders/SectionLoader.tsx

@@ -1,7 +1,5 @@
 import DotLoader from 'react-spinners/DotLoader';
-import { Flex, FlexProps, useToken } from '@chakra-ui/react';
-
-import theme from '../../theme';
+import { Flex, FlexProps } from '@chakra-ui/react';
 
 export const SectionLoader = ({
   isLoading,
@@ -22,9 +20,7 @@ export const SectionLoader = ({
       zIndex={9999}
       {...rest}
     >
-      <DotLoader
-        color={useToken('colors', theme.semanticTokens.colors.primary.main)}
-      />
+      <DotLoader color="var(--chakra-colors-primary-main)" />
     </Flex>
   );
 };