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

package/src/components/FileItem/FileItem.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
 import { FileItemProps } from '@/components/FileItem/FileItem.types';
 import {
@@ -27,7 +27,6 @@ export const FileItem = ({
   isDeleting = false,
   ...rest
 }: FileItemProps) => {
-  const theme = useTheme();
   const errorColor = 'danger.main';
 
   const isUploadingFile =
@@ -60,14 +59,14 @@ export const FileItem = ({
         <Box minW={5}>
           <CiFileOn color={error ? errorColor : 'gray.800'} />
         </Box>
-        <Text isTruncated color={error ? errorColor : undefined}>
+        <Text truncate 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>
+            <Tooltip content={error} placement="top">
               <MdError color={errorColor} />
             </Tooltip>
             {/* TODO: implement retry button */}
@@ -82,10 +81,13 @@ export const FileItem = ({
                 <IconButton
                   aria-label={'remove uploading file button'}
                   onClick={onFileDelete}
-                  icon={<IoClose color="gray.600" boxSize="lg" />}
-                  size="xs"
-                  isDisabled={isDeleting}
-                />
+                  size="2xs"
+                  disabled={isDeleting}
+                  colorPalette="neutral"
+                  variant="ghost"
+                >
+                  <IoClose color="gray.600" boxSize="md" />
+                </IconButton>
               </Flex>
             )}
           </Box>
@@ -97,24 +99,28 @@ export const FileItem = ({
               <IconButton
                 aria-label={'download uploaded file button'}
                 onClick={onFileDownload}
-                icon={<LuDownload color="gray.800" />}
-                size="xs"
-              />
+                size="2xs"
+                colorPalette="neutral"
+                variant="ghost"
+              >
+                <LuDownload color="gray.800" />
+              </IconButton>
             )}
             {onFileDelete && (
               <IconButton
                 aria-label={'remove uploaded file button'}
                 onClick={onFileDelete}
-                icon={
-                  isDeleting ? (
-                    <Spinner size="xs" />
-                  ) : (
-                    <FaRegTrashAlt boxSize="sm" />
-                  )
-                }
-                size="xs"
-                isDisabled={isDeleting}
-              />
+                size="2xs"
+                disabled={isDeleting}
+                colorPalette="neutral"
+                variant="ghost"
+              >
+                {isDeleting ? (
+                  <Spinner size="xs" />
+                ) : (
+                  <FaRegTrashAlt boxSize="sm" color="gray.800" />
+                )}
+              </IconButton>
             )}
           </Fragment>
         )}

package/src/components/FileList/FileList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, List } from '@chakra-ui/react';
+import { Box, Button, List } from '@chakra-ui/react';
 
 import { FileItem } from '@/components/FileItem';
 import { FileGroupProps } from '@/components/FileList/FileList.types';
@@ -45,40 +45,51 @@ export const FileList = ({
   if (files?.length <= 0) return null;
 
   return (
-    <List
+    <Box
       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)}
-        />
-      ))}
+      <List.Root>
+        {files?.slice(0, currentVisibleCount).map((file) => (
+          <List.Item key={file.id} listStyle="none">
+            <FileItem
+              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)}
+            />
+          </List.Item>
+        ))}
+      </List.Root>
       {shouldShowLoadMoreButton && (
         <Button
           onClick={handleFileLoadMore}
           alignSelf="stretch"
           w="100%"
-          variant="unstyled"
+          variant="ghost"
           display="flex"
           gap={1}
+          css={{
+            all: 'unset',
+            display: 'flex',
+            gap: '0.25rem',
+            cursor: 'pointer',
+          }}
         >
           <Subtitle color="gray.600">
             {translate('see_more')} ({visibleCount}/{files.length})
@@ -86,7 +97,7 @@ export const FileList = ({
           <IoChevronDownOutline color="gray.600" />
         </Button>
       )}
-    </List>
+    </Box>
   );
 };
 

package/src/components/FormControl/FormControl.tsx

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

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

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