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

package/src/components/DatePicker/index.ts

@@ -0,0 +1,2 @@
+export { RangeDatePicker } from './RangeDatePicker';
+export { SingleDatePicker } from './SingleDatePicker';

package/src/components/FileInput/FileInput.stories.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { FileInput, FileInputProps } from '.';
+
+const meta: Meta = {
+  title: 'Components/FileInput',
+  component: FileInput,
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryFn<FileInputProps>;
+
+const Template: Story = ({ ...args }) => {
+  const [bgImage, setBgImage] = useState<string>();
+  const handleChange = (filePath: string) => {
+    if (filePath.startsWith('data:image')) {
+      setBgImage(filePath);
+    }
+  };
+  return <FileInput {...args} onChange={handleChange} bgImage={bgImage} />;
+};
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/FileInput/FileInput.tsx

@@ -0,0 +1,117 @@
+import { ChangeEventHandler, forwardRef } from 'react';
+import { Box, Flex, Input, useTheme } from '@chakra-ui/react';
+
+import { Icon, IconTypes } from '@/components/Icon';
+import { Spinner } from '@/components/Spinner';
+import { Text } from '@/components/Typography';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { FileInputProps } from './FileInput.types';
+
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
+  (
+    {
+      fileInputLabel,
+      containerStyle = {},
+      bgImage,
+      onChange,
+      isLoading,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const translate = useTranslate();
+
+    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange(event.currentTarget.files);
+    };
+
+    return (
+      <Flex
+        role="button"
+        w="100%"
+        h="100%"
+        maxH={32}
+        flexDir="column"
+        align="center"
+        justify="center"
+        border="1px dashed"
+        borderColor="gray.500"
+        position="relative"
+        overflow="hidden"
+        borderRadius="md"
+        {...containerStyle}
+      >
+        <label
+          role="group"
+          style={{ width: '100%', height: '100%', cursor: 'pointer' }}
+        >
+          {bgImage && (
+            <Box
+              position="absolute"
+              top="0"
+              left="0"
+              right="0"
+              bottom="0"
+              backgroundImage={bgImage}
+              backgroundSize="cover"
+              backgroundPosition="center"
+              filter="grayscale(50%) brightness(80%)"
+              zIndex="-1"
+            />
+          )}
+          <Input
+            type="file"
+            hidden
+            ref={ref} // ref 전달
+            onChange={handleChange}
+            {...rest}
+          />
+          <Flex
+            w="100%"
+            h="100%"
+            p={7}
+            flexDir="column"
+            justify="center"
+            align="center"
+            bgColor={`${theme.colors.white}da`}
+            opacity={bgImage ? 0 : 1}
+            transition="ease-in"
+            _groupHover={{ opacity: 1 }} // Set opacity to 1 on parent hover
+          >
+            {isLoading ? (
+              <Spinner />
+            ) : (
+              <Flex w="100%" flexDir="column" align="center" justify="center">
+                <Box
+                  borderRadius="lg"
+                  bgColor={bgImage ? 'transparent' : 'gray.50'}
+                  p={3}
+                  mb={1}
+                  w="fit-content"
+                >
+                  <Icon
+                    icon={IconTypes.LuUpload}
+                    color={
+                      bgImage ? theme.colors.gray[1200] : theme.colors.gray[800]
+                    }
+                  />
+                </Box>
+                <Text
+                  color={
+                    bgImage ? theme.colors.gray[1200] : theme.colors.gray[800]
+                  }
+                >
+                  {fileInputLabel || translate('upload_your_file')}
+                </Text>
+              </Flex>
+            )}
+          </Flex>
+        </label>
+      </Flex>
+    );
+  }
+);
+
+FileInput.displayName = 'FileInput';

package/src/components/FileInput/FileInput.types.ts

@@ -0,0 +1,14 @@
+import { FlexProps } from '@chakra-ui/react';
+
+import { InputProps } from '@/components/Input';
+
+export type FileInputProps = Omit<InputProps, 'onChange' | 'bgImage'> & {
+  fileInputLabel?: string;
+  containerStyle?: FlexProps;
+  onChange: (files: FileList | null) => void;
+  /**
+   * background image change
+   */
+  bgImage?: string;
+  isLoading?: boolean;
+};

package/src/components/FileInput/index.ts

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

package/src/components/FileItem/FileItem.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { FileItemProps } from '@/components/FileItem/FileItem.types';
+
+import { FileItem } from './FileItem';
+
+const meta: Meta<typeof FileItem> = {
+  title: 'Components/FileItem',
+  component: FileItem,
+};
+
+export default meta;
+
+type Story = StoryObj<FileItemProps>;
+
+export const Basic: Story = {
+  args: {
+    fileName: 'Test File',
+  },
+};
+
+export const WithProgress: Story = {
+  args: {
+    fileName: 'Test File',
+    progress: 30,
+  },
+};

package/src/components/FileItem/FileItem.tsx

@@ -0,0 +1,134 @@
+import { Fragment } from 'react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
+
+import { FileItemProps } from '@/components/FileItem/FileItem.types';
+import { Icon, IconTypes } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { ProgressBar } from '@/components/ProgressBar';
+import { Subtext, Subtitle, Text } from '@/components/Typography';
+import { formatFileSize } from '@/utils/formatFileSize';
+
+import { Spinner } from '../Spinner';
+import { Tooltip } from '../Tooltip';
+
+export const FileItem = ({
+  fileName,
+  error,
+  onFileDownload,
+  onFileDelete,
+  progress,
+  fileSize,
+  isDeleting = false,
+  ...rest
+}: FileItemProps) => {
+  const theme = useTheme();
+  const errorColor = 'danger.main';
+
+  const isUploadingFile =
+    !error && typeof progress === 'number' && progress >= 0 && progress < 100;
+  const isFileUploadComplete = !progress || error || progress === 100;
+
+  return (
+    <Flex
+      px={3}
+      py={2}
+      gap={2}
+      justifyContent="space-between"
+      alignItems="center"
+      border="1px solid"
+      borderColor="gray.200"
+      w="100%"
+      position="relative"
+      _before={{
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: '3px',
+        backgroundColor: error ? errorColor : 'transparent',
+      }}
+      {...rest}
+    >
+      <Flex w="60%" alignItems="center" gap={2}>
+        <Box minW={5}>
+          <Icon
+            icon={IconTypes.CiFileOn}
+            color={error ? errorColor : 'gray.800'}
+          />
+        </Box>
+        <Text isTruncated color={error ? errorColor : undefined}>
+          {fileName}
+        </Text>
+      </Flex>
+      <Flex align="center" gap={2} flex={1}>
+        {error ? (
+          <Flex w="100%" justify="flex-end" align="center" gap={2}>
+            <Tooltip label={error} placement="top" shouldWrapChildren>
+              <Icon icon="MdError" color={errorColor} />
+            </Tooltip>
+            {/* TODO: implement retry button */}
+          </Flex>
+        ) : (
+          <Box w="100%">
+            {isUploadingFile && (
+              <Flex align="center" justify="flex-end" gap={2}>
+                <Subtext>{progress}%</Subtext>
+                <ProgressBar w="100%" minW={3} maxW={20} value={progress} />
+                <Spinner size="xs" />
+                <IconButton
+                  aria-label={'remove uploading file button'}
+                  onClick={onFileDelete}
+                  icon={
+                    <Icon
+                      icon={IconTypes.IoClose}
+                      color={theme.colors.gray[600]}
+                      boxSize="lg"
+                    />
+                  }
+                  size="xs"
+                  isDisabled={isDeleting}
+                />
+              </Flex>
+            )}
+          </Box>
+        )}
+        {!isUploadingFile && isFileUploadComplete && (
+          <Fragment>
+            {fileSize && <Subtitle mr={4}>{formatFileSize(fileSize)}</Subtitle>}
+            {onFileDownload && !error && (
+              <IconButton
+                aria-label={'download uploaded file button'}
+                onClick={onFileDownload}
+                icon={
+                  <Icon
+                    icon={IconTypes.LuDownload}
+                    color={theme.colors.gray[800]}
+                  />
+                }
+                size="xs"
+              />
+            )}
+            {onFileDelete && (
+              <IconButton
+                aria-label={'remove uploaded file button'}
+                onClick={onFileDelete}
+                icon={
+                  isDeleting ? (
+                    <Spinner size="xs" />
+                  ) : (
+                    <Icon icon={IconTypes.FaRegTrashAlt} boxSize="sm" />
+                  )
+                }
+                size="xs"
+                isDisabled={isDeleting}
+              />
+            )}
+          </Fragment>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+FileItem.displayName = 'FileItem';

package/src/components/FileItem/FileItem.types.ts

@@ -0,0 +1,11 @@
+import { FlexProps } from '@chakra-ui/react';
+
+export interface FileItemProps extends FlexProps {
+  fileName: string;
+  error?: string;
+  onFileDownload?: () => void;
+  onFileDelete?: () => void;
+  progress?: number;
+  fileSize?: number; // in bytes
+  isDeleting?: boolean;
+}

package/src/components/FileItem/index.ts

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

package/src/components/FileList/FileList.stories.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import {
+  FileGroupProps,
+  FileItemData,
+} from '@/components/FileList/FileList.types';
+
+import { FileList } from './FileList';
+
+export default {
+  title: 'Components/FileList',
+  component: FileList,
+} as Meta;
+
+const Template: StoryFn<FileGroupProps> = ({ ...args }) => {
+  const [files, setFiles] = useState<FileItemData[]>(args.files);
+  const [visibleCount, setVisibleCount] = useState(3);
+
+  const handleFileDelete = (currentFile: FileItemData) => {
+    setFiles((prevFiles) =>
+      prevFiles.filter((file) => file.id !== currentFile.id)
+    );
+  };
+
+  return (
+    <FileList
+      {...args}
+      files={files}
+      onFileDelete={handleFileDelete}
+      visibleCount={visibleCount}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  files: [
+    {
+      id: 1,
+      name: 'File1.pdf',
+      progress: 100,
+      error: false,
+    },
+    {
+      id: 2,
+      name: 'Image.png',
+      progress: 70,
+      error: false,
+    },
+    {
+      id: 3,
+      name: 'Document.docx',
+      progress: 45,
+      error: true,
+    },
+    {
+      id: 4,
+      name: 'Presentation.pptx',
+      progress: 80,
+      error: false,
+    },
+  ],
+  visibleCount: 3,
+};

package/src/components/FileList/FileList.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { Button, List, useTheme } from '@chakra-ui/react';
+
+import { FileItem } from '@/components/FileItem';
+import { FileGroupProps } from '@/components/FileList/FileList.types';
+import { Icon, IconTypes } from '@/components/Icon';
+import { Subtitle } from '@/components/Typography';
+import { useTranslate } from '@/hooks/useTranslate';
+
+export const FileList = ({
+  files,
+  onFileDelete,
+  onFileDownload,
+  visibleCount = 3,
+}: FileGroupProps) => {
+  const [currentVisibleCount, setCurrentVisibleCount] = useState<number>(
+    visibleCount ?? 3
+  );
+  const [deletingFileIds, setDeletingFileIds] = useState<Set<number | null>>(
+    new Set()
+  );
+  const theme = useTheme();
+  const translate = useTranslate();
+  const shouldShowLoadMoreButton = files && files.length > currentVisibleCount;
+
+  const handleFileLoadMore = () => {
+    setCurrentVisibleCount((prev) => prev + 3);
+  };
+
+  const handleFileDelete = async (file: FileGroupProps['files'][0]) => {
+    if (!onFileDelete || deletingFileIds.has(file.id)) return;
+
+    setDeletingFileIds((prev) => new Set(prev).add(file.id));
+
+    try {
+      await onFileDelete(file);
+    } finally {
+      setDeletingFileIds((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(file.id);
+        return newSet;
+      });
+    }
+  };
+
+  if (files?.length <= 0) return null;
+
+  return (
+    <List
+      w="100%"
+      border="1px solid"
+      borderColor="gray.200"
+      borderRadius="md"
+      overflow="hidden"
+    >
+      {files?.slice(0, currentVisibleCount).map((file) => (
+        <FileItem
+          key={file.id}
+          fileName={file.name}
+          onFileDelete={onFileDelete ? () => handleFileDelete(file) : undefined}
+          onFileDownload={
+            onFileDownload && file.fileUrl
+              ? () => onFileDownload?.(file)
+              : undefined
+          }
+          border={0}
+          borderBottom="1px solid"
+          borderBottomColor="gray.50"
+          progress={file.progress}
+          error={file.error}
+          fileSize={file.size}
+          isDeleting={deletingFileIds.has(file.id)}
+        />
+      ))}
+      {shouldShowLoadMoreButton && (
+        <Button
+          onClick={handleFileLoadMore}
+          alignSelf="stretch"
+          w="100%"
+          variant="unstyled"
+          display="flex"
+          gap={1}
+        >
+          <Subtitle color="gray.600">
+            {translate('see_more')} ({visibleCount}/{files.length})
+          </Subtitle>
+          <Icon
+            icon={IconTypes.IoChevronDownOutline}
+            color={theme.colors.gray[600]}
+          />
+        </Button>
+      )}
+    </List>
+  );
+};
+
+FileList.displayName = 'FileList';

package/src/components/FileList/FileList.types.ts

@@ -0,0 +1,18 @@
+export interface FileItemData {
+  error?: string;
+  errorCode?: number | null;
+  progress?: number;
+  id: number | null;
+  fileUrl?: string;
+  name: string;
+  isLoading?: boolean;
+  timeStamp?: string;
+  size?: number;
+}
+
+export interface FileGroupProps {
+  files: FileItemData[];
+  onFileDelete?: (file: FileItemData) => void;
+  onFileDownload?: (file: FileItemData) => void;
+  visibleCount?: number;
+}

package/src/components/FileList/index.tsx

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

package/src/components/FormControl/FormControl.stories.tsx

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

package/src/components/FormControl/FormControl.tsx

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

package/src/components/FormControl/FormControl.types.ts

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

package/src/components/FormControl/index.ts

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

package/src/components/FormLabel/FormLabel.tsx

@@ -0,0 +1,5 @@
+import { FormLabel as ChakraFormLabel, FormLabelProps } from '@chakra-ui/react';
+
+export const FormLabel = (props: FormLabelProps) => (
+  <ChakraFormLabel color="gray.1000" mb={0.5} marginInlineEnd={0} {...props} />
+);

package/src/components/FormLabel/index.ts

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

package/src/components/GuideCue/GuideCue.stories.tsx

@@ -0,0 +1,57 @@
+import { useRef } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { StoryFn } from '@storybook/react';
+
+import { Button } from '../Button';
+import { GuideCue } from './GuideCue';
+import { GuideCueProvider } from './GuideCueContext';
+export default {
+  title: 'Components/GuideCue',
+  component: GuideCue,
+  args: {
+    page: 'storybook',
+    index: 0,
+    title: 'Hello',
+    description: 'This is a description',
+  },
+};
+
+const Template: StoryFn<typeof GuideCue> = (args) => {
+  const containerRef = useRef<HTMLButtonElement>(null);
+  return (
+    <GuideCueProvider page="storybook" numSteps={1}>
+      <Box p={20}>
+        <Button ref={containerRef} mb={20} position="relative">
+          Trigger
+        </Button>
+        <GuideCue {...args} containerRef={containerRef} />
+      </Box>
+    </GuideCueProvider>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const MultipleSteps: StoryFn<typeof GuideCue> = (args) => {
+  const step1Ref = useRef<HTMLButtonElement>(null);
+  const step2Ref = useRef<HTMLButtonElement>(null);
+  return (
+    <GuideCueProvider page="storybook" numSteps={2}>
+      <Flex p={20} gap={4}>
+        <Button ref={step1Ref} mb={20} position="relative">
+          Bottom popover step
+        </Button>
+        <Button ref={step2Ref} mb={20} position="relative">
+          Right popover step
+        </Button>
+        <GuideCue {...args} index={0} containerRef={step1Ref} />
+        <GuideCue
+          {...args}
+          index={1}
+          containerRef={step2Ref}
+          placement="right"
+        />
+      </Flex>
+    </GuideCueProvider>
+  );
+};