Fix type errors

fabrix-framework · Jan 14, 2025 · a087364 · a087364
1 parent ad57b07
commit a087364
Show file tree

Hide file tree

Showing 14 changed files with 280 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -32,11 +32,12 @@
     "graphql-editor": "^7.2.16",
     "graphql-tag": "^2.12.6",
     "monaco-editor": "^0.50.0",
+    "next-themes": "^0.4.4",
     "openai": "^4.56.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "remeda": "^2.6.0",
     "urql": "^4.1.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/builder/Editor.tsx b/src/builder/Editor.tsx
@@ -4,17 +4,16 @@ import {
   Heading,
   Input,
   Button,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerCloseButton,
-  DrawerHeader,
-  DrawerBody,
   Text,
-  Divider,
   HStack,
 } from "@chakra-ui/react";
+import {
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerRoot,
+} from "../components/ui/drawer";
 import { DocumentNode, parse } from "graphql";
 import { CombinedError } from "urql";
 import { useContext, useState, useMemo } from "react";
@@ -31,7 +30,7 @@ export const FabrixEditor = () => {
   const [response, setResponse] = useState<
     Record<string, unknown> | CombinedError | undefined
   >();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isOpen, setOpen] = useState(false);
 
   return (
     <Flex height="100vh" width="100%">
@@ -55,20 +54,23 @@ export const FabrixEditor = () => {
                 </Text>
               </HStack>
             </HStack>
-            <Button colorScheme="blue" onClick={onOpen} size="sm">
+            <Button colorScheme="blue" onClick={() => setOpen(true)} size="sm">
               Setting
             </Button>
           </Flex>
         </Stack>
 
         {/* Setting drawer */}
-        <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
-          <DrawerOverlay />
+        <DrawerRoot
+          open={isOpen}
+          placement="end"
+          onOpenChange={(e) => setOpen(e.open)}
+          size="md"
+        >
+          <DrawerBackdrop />
           <DrawerContent>
-            <DrawerCloseButton />
             <DrawerHeader>Setting</DrawerHeader>
             <DrawerBody>
-              <Divider />
               <Stack paddingY={7}>
                 <Heading size="sm">Open AI token</Heading>
                 <Text>
@@ -85,7 +87,7 @@ export const FabrixEditor = () => {
               </Stack>
             </DrawerBody>
           </DrawerContent>
-        </Drawer>
+        </DrawerRoot>
 
         {/* Content */}
         <Flex height={"100%"} overflowY="auto">
@@ -117,7 +119,7 @@ const useEditor = () => {
 
   const trimComment = (query: string) => {
     return query.replace(/#.*\n/g, "").trim();
-  }
+  };
 
   const updatePreview = useMemo(
     () =>

diff --git a/src/builder/panes/Editor.tsx b/src/builder/panes/Editor.tsx
@@ -1,14 +1,4 @@
-import {
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  VStack,
-  InputGroup,
-  InputLeftAddon,
-  Input,
-} from "@chakra-ui/react";
+import { Tabs, VStack, Group, InputAddon, Input, Flex } from "@chakra-ui/react";
 import { useFabrixClient } from "@fabrix-framework/fabrix";
 import { FetcherParams, createGraphiQLFetcher } from "@graphiql/toolkit";
 import GraphiQL from "graphiql";
@@ -111,18 +101,19 @@ export const EditorPane = (props: EditorPaneProps) => {
     builderContext.openAIToken && builderContext.openAIToken.length > 0;
 
   return (
-    <Tabs sx={baseFlexStyle} variant="enclosed-colored" size="sm" isLazy>
-      <TabList sx={{ bg: "gray.50", borderTop: "transparent" }}>
-        <Tab>Editor</Tab>
-      </TabList>
-      <TabPanels
-        sx={{
+    <Tabs.Root css={baseFlexStyle} variant="plain" size="sm" lazyMount>
+      <Tabs.List css={{ bg: "gray.50", borderTop: "transparent" }}>
+        <Tabs.Trigger value="editor">Editor</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content
+        value="editor"
+        css={{
           ...baseFlexStyle,
           height: "calc(100% - 40px)",
         }}
       >
-        <TabPanel
-          sx={{
+        <Flex
+          css={{
             ...baseFlexStyle,
             margin: 2,
             marginTop: 3,
@@ -131,16 +122,17 @@ export const EditorPane = (props: EditorPaneProps) => {
         >
           <ChatProvider schema={builderContext.schema}>
             <VStack flexGrow={1} height={"100%"}>
-              <InputGroup size="sm">
-                <InputLeftAddon>Schema</InputLeftAddon>
+              <Group>
+                <InputAddon>Schema</InputAddon>
                 <Input
+                  size="sm"
                   value={builderContext.schemaURL}
                   onChange={(e) => {
                     builderContext.setSchemaURL(e.target.value);
                     props.updatePreview(props.query);
                   }}
                 />
-              </InputGroup>
+              </Group>
               <GraphiQL
                 fetcher={fetcher}
                 disableTabs={true}
@@ -153,8 +145,8 @@ export const EditorPane = (props: EditorPaneProps) => {
               />
             </VStack>
           </ChatProvider>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+        </Flex>
+      </Tabs.Content>
+    </Tabs.Root>
   );
 };
diff --git a/src/builder/panes/Preview.tsx b/src/builder/panes/Preview.tsx
@@ -1,14 +1,5 @@
-import {
-  Alert,
-  AlertIcon,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  Text,
-  Box,
-} from "@chakra-ui/react";
+import { Tabs, Text, Flex } from "@chakra-ui/react";
+import { Alert } from "../../components/ui/alert";
 import { FabrixComponent } from "@fabrix-framework/fabrix";
 import {
   EditorContextProvider,
@@ -34,20 +25,12 @@ export const PreviewPane = (props: {
 
   const showPreview = () => {
     if (error) {
-      return (
-        <Alert status="error">
-          <AlertIcon />
-          Error: {error.message}
-        </Alert>
-      );
+      return <Alert status="error">Error: {error.message}</Alert>;
     } else if (!query) {
       return (
-        <Box>
-          <Alert status="warning">
-            <AlertIcon />
-            <Text>Add your query in the editor first</Text>
-          </Alert>
-        </Box>
+        <Alert status="warning">
+          <Text>Add your query in the editor first</Text>
+        </Alert>
       );
     }
 
@@ -66,37 +49,39 @@ export const PreviewPane = (props: {
   };
 
   return (
-    <Tabs
-      sx={baseFlexStyle}
+    <Tabs.Root
+      css={baseFlexStyle}
       overflowY={"auto"}
-      isLazy
-      isFitted
-      variant="enclosed-colored"
+      variant="plain"
       size="sm"
+      fitted
+      lazyMount
     >
-      <TabList sx={{ bg: "gray.50", borderTop: "transparent" }}>
-        <Tab>Preview</Tab>
-        <Tab>Response</Tab>
-      </TabList>
-      <TabPanels
-        sx={{
+      <Tabs.List css={{ bg: "gray.50", borderTop: "transparent" }}>
+        <Tabs.Trigger value="preview">Preview</Tabs.Trigger>
+        <Tabs.Trigger value="response">Response</Tabs.Trigger>
+      </Tabs.List>
+      <Flex
+        css={{
           ...baseFlexStyle,
           overflowY: "auto",
           borderLeft: "1px solid var(--chakra-colors-chakra-border-color)",
         }}
       >
-        <TabPanel
-          sx={{
+        <Tabs.Content
+          value="preview"
+          css={{
             ...baseFlexStyle,
             margin: 2,
             marginTop: 3,
             padding: 0,
           }}
         >
           {showPreview()}
-        </TabPanel>
-        <TabPanel
-          sx={{
+        </Tabs.Content>
+        <Tabs.Content
+          value="response"
+          css={{
             ...baseFlexStyle,
             padding: 2,
             paddingTop: 3,
@@ -130,8 +115,8 @@ export const PreviewPane = (props: {
               </div>
             </SchemaContextProvider>
           </EditorContextProvider>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+        </Tabs.Content>
+      </Flex>
+    </Tabs.Root>
   );
 };
diff --git a/src/builder/panes/editor/Chat.tsx b/src/builder/panes/editor/Chat.tsx
@@ -129,7 +129,7 @@ export const Chat = (props: { updateQuery: (value: string) => void }) => {
 
   return (
     <Box>
-      <VStack spacing={4} align="stretch">
+      <VStack gap={4} align="stretch">
         {messages.map(
           (message, index) =>
             (message.role === "user" || message.role === "assistant") && (
@@ -206,7 +206,12 @@ export const Chat = (props: { updateQuery: (value: string) => void }) => {
           onChange={(e) => setInput(e.target.value)}
           placeholder="Enter your message..."
         />
-        <Button type="submit" mt={2} isLoading={isLoading}>
+        <Button
+          type="submit"
+          mt={2}
+          // @ts-expect-error
+          loading={isLoading}
+        >
           Send
         </Button>
       </form>

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
@@ -0,0 +1,51 @@
+import { Alert as ChakraAlert } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactElement
+  closable?: boolean
+  onClose?: () => void
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  function Alert(props, ref) {
+    const {
+      title,
+      children,
+      icon,
+      closable,
+      onClose,
+      startElement,
+      endElement,
+      ...rest
+    } = props
+    return (
+      <ChakraAlert.Root ref={ref} {...rest}>
+        {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+        {children ? (
+          <ChakraAlert.Content>
+            <ChakraAlert.Title>{title}</ChakraAlert.Title>
+            <ChakraAlert.Description>{children}</ChakraAlert.Description>
+          </ChakraAlert.Content>
+        ) : (
+          <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
+        )}
+        {endElement}
+        {closable && (
+          <CloseButton
+            size="sm"
+            pos="relative"
+            top="-2"
+            insetEnd="-2"
+            alignSelf="flex-start"
+            onClick={onClose}
+          />
+        )}
+      </ChakraAlert.Root>
+    )
+  },
+)
diff --git a/src/components/ui/close-button.tsx b/src/components/ui/close-button.tsx
@@ -0,0 +1,17 @@
+import type { ButtonProps } from "@chakra-ui/react"
+import { IconButton as ChakraIconButton } from "@chakra-ui/react"
+import * as React from "react"
+import { LuX } from "react-icons/lu"
+
+export type CloseButtonProps = ButtonProps
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  )
+})