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

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

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Icon } from '@/components/Icon';
+
+import { Input, InputDataProps } from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: {
+    placeholder: { control: 'text' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg'],
+      },
+    },
+    isDisabled: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    maxLength: { control: 'number' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<InputDataProps> = (args) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Input {...args} value={value} onChange={(e) => setValue(e.target.value)} />
+  );
+};
+
+export const Basic: StoryFn<InputDataProps> = Template.bind({});
+Basic.args = {};
+
+export const LeftIcon: StoryFn<InputDataProps> = Template.bind({});
+LeftIcon.args = {
+  placeholder: 'Phone number',
+  size: 'md',
+  isDisabled: false,
+  isInvalid: false,
+  leftIcon: <Icon icon="IoCall" color="gray.300" />,
+};
+
+export const RightIcon: StoryFn<InputDataProps> = Template.bind({});
+RightIcon.args = {
+  placeholder: 'Search...',
+  size: 'md',
+  isDisabled: false,
+  isInvalid: false,
+  rightIcon: <Icon icon="IoSearch" color="gray.300" />,
+  maxLength: 20,
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,358 @@
+import {
+  CompositionEvent,
+  ForwardedRef,
+  forwardRef,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Input as ChakraInput,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  useTheme,
+} from '@chakra-ui/react';
+
+import { formatNumber } from '@/utils/formatNumber';
+
+import { InputProps } from './Input.types';
+
+// Helper function for unformatting numbers
+const unformatNumber = (value: string) => {
+  // Remove commas and any non-digit characters except decimal point
+  return value.replace(/,/g, '').replace(/[^\d.]/g, '');
+};
+
+// Helper function to calculate cursor position after formatting
+const calculateCursorPosition = (
+  oldValue: string,
+  newValue: string,
+  oldCursorPos: number
+): number => {
+  // Count commas before cursor in old value
+  const commasBeforeCursorOld = (
+    oldValue.slice(0, oldCursorPos).match(/,/g) || []
+  ).length;
+
+  // Get the position in the unformatted string
+  const unformattedPos = oldCursorPos - commasBeforeCursorOld;
+
+  // Count commas before this position in new value
+  let newPos = 0;
+  let unformattedCount = 0;
+
+  for (
+    let i = 0;
+    i < newValue.length && unformattedCount < unformattedPos;
+    i++
+  ) {
+    if (newValue[i] !== ',') {
+      unformattedCount++;
+    }
+    newPos = i + 1;
+  }
+
+  return Math.min(newPos, newValue.length);
+};
+
+export const Input = forwardRef(
+  (
+    {
+      leftIcon,
+      leftElementProps,
+      rightIcon,
+      rightElementProps,
+      onKeyDown,
+      onCompositionEnd,
+      onCompositionStart,
+      maxLength,
+      value: propValue,
+      onChange,
+      size,
+      wrapperProps,
+      maskNumber = false,
+      type,
+      _hover,
+      _focus,
+      trimWhiteSpace = false,
+      noSpaces = false,
+      ...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);
+
+    useEffect(() => {
+      if (rightElementRef.current) {
+        setRightElementWidth(rightElementRef.current.offsetWidth);
+      }
+    }, [rightElementRef.current]);
+
+    // Restore cursor position after formatting
+    useEffect(() => {
+      if (
+        shouldRestoreCursor &&
+        cursorPosition.current !== null &&
+        maskNumber &&
+        type === 'number'
+      ) {
+        const inputElement = ref && 'current' in ref ? ref.current : null;
+        if (inputElement) {
+          inputElement.setSelectionRange(
+            cursorPosition.current,
+            cursorPosition.current
+          );
+          cursorPosition.current = null;
+          setShouldRestoreCursor(false);
+        }
+      }
+    }, [shouldRestoreCursor, maskNumber, type, ref]);
+
+    // Format the value if maskNumber is true and type is number
+    const getFormattedValue = (val: typeof propValue) => {
+      if (
+        maskNumber &&
+        type === 'number' &&
+        val !== undefined &&
+        val !== null &&
+        val !== ''
+      ) {
+        const numVal = typeof val === 'string' ? parseFloat(val) : val;
+        if (!isNaN(numVal as number)) {
+          return formatNumber(numVal as number);
+        }
+      }
+      return val;
+    };
+
+    const [currentValue, setCurrentValue] = useState<
+      string | number | readonly string[] | undefined
+    >(getFormattedValue(propValue));
+
+    useEffect(() => {
+      setCurrentValue(getFormattedValue(propValue));
+    }, [propValue]);
+
+    // 한글 타이핑 관련 버그 해결을 위해 composition event handler들을 사용합니다
+    const handleCompositionStart = (e: CompositionEvent<HTMLInputElement>) => {
+      isComposing.current = true;
+      if (onCompositionStart) onCompositionStart(e);
+    };
+
+    const handleCompositionEnd = (e: any) => {
+      isComposing.current = false;
+      if (onCompositionEnd) onCompositionEnd(e);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        if (isComposing.current) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+
+        if (onKeyDown) onKeyDown(e);
+      }
+
+      // trimWhiteSpace prop이 존재하고, 입력된 값이 아예 없는 경우만 스페이스바를 통한 공백 입력 금지
+      // noSpaces prop이 존재하고, 스페이스바를 통한 공백 일체 입력 금지
+      if (
+        (noSpaces || (trimWhiteSpace && currentValue === '')) &&
+        e.key.match(/\s/)
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+    };
+
+    // Helper function to create synthetic event with filtered value
+    const createSyntheticEvent = (
+      originalEvent: React.ChangeEvent<HTMLInputElement>,
+      newValue: string
+    ) => {
+      // Create a new native event to ensure Formik properly updates
+      const nativeEvent = Object.create(originalEvent.nativeEvent);
+      const newTarget = {
+        ...originalEvent.target,
+        value: newValue,
+        name: originalEvent.target.name,
+      };
+
+      // Create a new synthetic event that Formik will recognize
+      const syntheticEvent = {
+        ...originalEvent,
+        nativeEvent,
+        target: newTarget,
+        currentTarget: newTarget,
+      } as React.ChangeEvent<HTMLInputElement>;
+
+      return syntheticEvent;
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let processedValue = e.target.value;
+
+      // Handle trimWhiteSpace: prevent initial spaces and trim pasted content
+      if (trimWhiteSpace) {
+        // If input becomes entirely whitespace, clear it
+        if (processedValue.trim() === '') {
+          setCurrentValue('');
+          if (onChange) {
+            onChange(createSyntheticEvent(e, ''));
+          }
+          return;
+        }
+        // Trim leading and trailing spaces from non-empty content
+        processedValue = processedValue.trim();
+      }
+
+      // Handle noSpaces: remove all spaces
+      // prevent whitespace insertion on copy paste bug
+      if (noSpaces) {
+        processedValue = processedValue.replace(/\s/g, '');
+      }
+
+      if (maskNumber && type === 'number') {
+        const oldValue = String(currentValue || '');
+        const oldCursorPos = e.target.selectionStart || 0;
+
+        // Remove commas for processing
+        const unformatted = unformatNumber(processedValue);
+
+        // Update display value with formatting
+        if (unformatted === '') {
+          setCurrentValue('');
+          cursorPosition.current = 0;
+          setShouldRestoreCursor(true);
+        } else {
+          const num = parseFloat(unformatted);
+          if (!isNaN(num)) {
+            const newFormattedValue = formatNumber(num);
+            setCurrentValue(newFormattedValue);
+
+            // Calculate and store new cursor position
+            cursorPosition.current = calculateCursorPosition(
+              oldValue,
+              newFormattedValue,
+              oldCursorPos
+            );
+            setShouldRestoreCursor(true);
+          } else {
+            setCurrentValue(unformatted);
+            cursorPosition.current = oldCursorPos;
+            setShouldRestoreCursor(true);
+          }
+        }
+
+        // Pass the raw numeric value to onChange
+        if (onChange) {
+          onChange(createSyntheticEvent(e, unformatted));
+        }
+      } else {
+        setCurrentValue(processedValue);
+        if (onChange) {
+          onChange(createSyntheticEvent(e, processedValue));
+        }
+      }
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      if (maskNumber && type === 'number' && e.target.value) {
+        const numericValue = parseFloat(unformatNumber(e.target.value));
+        if (!isNaN(numericValue)) {
+          setCurrentValue(formatNumber(numericValue));
+
+          if (rest.onBlur) {
+            // Create a new native event to ensure Formik properly updates
+            const nativeEvent = Object.create(e.nativeEvent);
+            const newTarget = {
+              ...e.target,
+              value: numericValue.toString(),
+              name: e.target.name,
+            };
+
+            // Create a new synthetic event that Formik will recognize
+            const syntheticEvent = {
+              ...e,
+              nativeEvent,
+              target: newTarget,
+              currentTarget: newTarget,
+            };
+
+            rest.onBlur(syntheticEvent as React.FocusEvent<HTMLInputElement>);
+          }
+        }
+      } else if (rest.onBlur) {
+        rest.onBlur(e);
+      }
+    };
+
+    // If maskNumber is true and type is number, we need to use text type
+    // to allow for comma formatting
+    const inputType = maskNumber && type === 'number' ? 'text' : type;
+
+    return (
+      <InputGroup size={size} {...wrapperProps}>
+        {leftIcon && (
+          <InputLeftElement {...leftElementProps}>{leftIcon}</InputLeftElement>
+        )}
+        <ChakraInput
+          ref={ref}
+          maxLength={maxLength}
+          value={currentValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+          onKeyDown={handleKeyDown}
+          type={inputType}
+          borderColor="gray.400"
+          _hover={{
+            borderColor: 'gray.600',
+            ..._hover,
+          }}
+          _focus={{
+            borderColor: 'primary.main',
+            ..._focus,
+          }}
+          focusBorderColor={theme.semanticTokens.colors.primary.main}
+          _readOnly={{
+            opacity: 1,
+            cursor: 'not-allowed',
+            bg: 'gray.50',
+            color: 'gray.600',
+            borderColor: 'gray.200',
+          }}
+          _disabled={{
+            opacity: 1,
+            cursor: 'not-allowed',
+            bg: 'gray.50',
+            color: 'gray.1000',
+            fontWeight: 'semibold',
+          }}
+          sx={{
+            paddingInlineEnd: rightElementWidth,
+          }}
+          errorBorderColor={theme.semanticTokens.colors.danger.main}
+          {...rest}
+        />
+        {rightIcon && (
+          <InputRightElement ref={rightElementRef} {...rightElementProps}>
+            {rightIcon}
+          </InputRightElement>
+        )}
+      </InputGroup>
+    );
+  }
+);
+
+Input.displayName = 'Input';

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

@@ -0,0 +1,19 @@
+import {
+  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;
+  maskNumber?: boolean;
+  /** 빈값일 때 공백 입력 방지 및 복사 붙여넣기 시 앞뒤 공백 제거 */
+  trimWhiteSpace?: boolean;
+  /** 모든 공백을 허용하지 않음 */
+  noSpaces?: boolean;
+}

package/src/components/Input/index.tsx

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

package/src/components/LineGraph/LineGraph.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { LineGraph } from '.';
+
+const TEST_DATA = [
+  {
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
+const meta: Meta<typeof LineGraph> = {
+  title: 'Components/LineGraph',
+  component: LineGraph,
+  args: {
+    data: TEST_DATA,
+    dataKeys: [
+      {
+        key: 'uv',
+        label: 'UV Stuff',
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof LineGraph>;
+
+export const Basic: Story = (args) => <LineGraph {...args} />;
+
+export const TwoSeries: Story = (args) => <LineGraph {...args} />;
+TwoSeries.args = {
+  dataKeys: [
+    {
+      key: 'uv',
+      label: 'UV Stuff',
+    },
+    {
+      key: 'pv',
+      label: 'PV Stuff',
+    },
+  ],
+};
+
+export const CustomColors: Story = (args) => <LineGraph {...args} />;
+CustomColors.args = {
+  dataKeys: [
+    {
+      key: 'uv',
+      label: 'UV Stuff',
+      color: 'red',
+    },
+    {
+      key: 'pv',
+      label: 'PV Stuff',
+      color: 'purple',
+    },
+  ],
+};

package/src/components/LineGraph/LineGraph.tsx

@@ -0,0 +1,88 @@
+import { Box, useTheme, useToken } from '@chakra-ui/react';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { DatumBase, LineGraphProps } from './LineGraph.types';
+
+export const LineGraph = <T extends DatumBase>({
+  data = [],
+  dataKeys,
+  ...rest
+}: LineGraphProps<T>) => {
+  const theme = useTheme();
+  return (
+    <Box h="400px" {...rest}>
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={data}
+          margin={{
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 48,
+          }}
+        >
+          <CartesianGrid
+            // No dashes
+            strokeDasharray=""
+            vertical={false}
+            stroke={theme.colors.gray[400]}
+          />
+          <XAxis
+            dataKey="name"
+            // Color of line
+            stroke="transparent"
+            // Props of text
+            tick={{
+              fill: theme.colors.gray[1200],
+              fontSize: useToken('fontSizes', 'sm'),
+            }}
+            tickMargin={8}
+          />
+          <YAxis
+            // Color of line
+            stroke="transparent"
+            // Props of text
+            tick={{
+              fill: theme.colors.gray[1200],
+              fontSize: useToken('fontSizes', 'sm'),
+            }}
+            tickMargin={0}
+          />
+          <Tooltip
+            // invert label color since mode inside tooltip is different
+            labelStyle={{
+              color: theme.colors.gray[1500],
+            }}
+          />
+          <Legend
+            wrapperStyle={{
+              bottom: -16,
+            }}
+          />
+          {dataKeys.map(({ key, label, color }) => (
+            <Line
+              key={`line-${key}`}
+              type="monotone"
+              dataKey={key}
+              name={label}
+              stroke={
+                color ??
+                useToken('colors', theme.semanticTokens.colors.primary.main)
+              }
+              dot={{ r: 0 }}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+};

package/src/components/LineGraph/LineGraph.types.ts

@@ -0,0 +1,41 @@
+import { BoxProps } from '@chakra-ui/react';
+import { type DataKey as RechartsDataKey } from 'recharts/types/util/types.d';
+
+export interface LineGraphProps<T extends DatumBase> extends BoxProps {
+  data: Array<Datum<T>>;
+  dataKeys: Array<DataKey<T>>;
+}
+
+/**
+ * Any numerical data the user wants to define
+ */
+export type DatumBase = {
+  [key: string]: number | undefined;
+};
+
+/**
+ * A name prop has to be passed to have the XAxis key always defined
+ */
+export type Datum<T extends DatumBase> = {
+  name: string;
+} & T;
+
+/**
+ * The data for each series
+ */
+export type DataKey<T extends DatumBase> = {
+  /**
+   * Key used to reference a value in the data prop
+   */
+  key: RechartsDataKey<keyof T>;
+
+  /**
+   * Label for the XAxis
+   */
+  label: string;
+
+  /**
+   * Optional custom colors for the series
+   */
+  color?: string;
+};

package/src/components/LineGraph/index.ts

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

package/src/components/Link/Link.styles.ts

@@ -0,0 +1,13 @@
+import { Property } from 'csstype';
+
+import theme from '@/theme/index';
+
+export const linkTextStyles = {
+  color: theme.colors.blue[700],
+  fontWeight: '500',
+  position: 'relative' as Property.Position,
+  _hover: {
+    textDecoration: 'none',
+    color: theme.colors.blue[900],
+  },
+};