Update fabrix packages

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

eslint.config.cjs

@@ -11,6 +11,7 @@ module.exports = tsEslint.config(
       "**/package.json",
       "**/tsconfig.json",
       "**/tsconfig.tsbuildinfo",
+      "src/components/ui/**",
     ],
   },
   eslint.configs.recommended,

package.json

@@ -13,13 +13,12 @@
     "node": "22.x"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/css": "^11.13.0",
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
-    "@fabrix-framework/chakra-ui": "0.1.1",
-    "@fabrix-framework/fabrix": "0.1.1",
-    "@fabrix-framework/graphql-config": "0.1.0",
+    "@chakra-ui/react": "^3.3.1",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@fabrix-framework/chakra-ui": "^0.4.0",
+    "@fabrix-framework/fabrix": "^0.4.0",
+    "@fabrix-framework/graphql-config": "^0.1.0",
     "@graphiql/plugin-explorer": "^3.2.2",
     "@graphiql/react": "^0.26.2",
     "@graphiql/toolkit": "^0.9.2",
@@ -33,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"

src/builder/Editor.tsx

@@ -4,21 +4,20 @@ import {
   Heading,
   Input,
   Button,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerCloseButton,
-  DrawerHeader,
-  DrawerBody,
   Text,
-  Divider,
   HStack,
 } from "@chakra-ui/react";
 import { DocumentNode, parse } from "graphql";
 import { CombinedError } from "urql";
 import { useContext, useState, useMemo } from "react";
 import * as R from "remeda";
+import {
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerRoot,
+} from "../components/ui/drawer";
 import FabrixIcon from "../icons/logo.svg?react";
 import { FabrixBuilderContext } from "./context";
 import { EditorPane } from "./panes/Editor";
@@ -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,26 @@ 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>
+            <DrawerHeader fontSize="lg" fontWeight="bold">
+              Setting
+            </DrawerHeader>
+            <hr />
             <DrawerBody>
-              <Divider />
               <Stack paddingY={7}>
                 <Heading size="sm">Open AI token</Heading>
                 <Text>
@@ -85,7 +90,7 @@ export const FabrixEditor = () => {
               </Stack>
             </DrawerBody>
           </DrawerContent>
-        </Drawer>
+        </DrawerRoot>
 
         {/* Content */}
         <Flex height={"100%"} overflowY="auto">
@@ -117,7 +122,7 @@ const useEditor = () => {
 
   const trimComment = (query: string) => {
     return query.replace(/#.*\n/g, "").trim();
-  }
+  };
 
   const updatePreview = useMemo(
     () =>

src/builder/context.tsx

@@ -81,7 +81,6 @@ export const FabrixBuilderProvider = (
     >
       <FabrixProvider
         url={schemaURL}
-        serverSchema={schemaURL}
         componentRegistry={props.componentRegistry}
         prependExchanges={[additionalHeaderExchange(additionalHeader)]}
       >

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 } from "@chakra-ui/react";
 import { useFabrixClient } from "@fabrix-framework/fabrix";
 import { FetcherParams, createGraphiQLFetcher } from "@graphiql/toolkit";
 import GraphiQL from "graphiql";
@@ -111,50 +101,63 @@ 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="outline"
+      size="sm"
+      defaultValue="editor"
+      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={{
-            ...baseFlexStyle,
-            margin: 2,
-            marginTop: 3,
-            padding: 0,
-          }}
-        >
-          <ChatProvider schema={builderContext.schema}>
-            <VStack flexGrow={1} height={"100%"}>
-              <InputGroup size="sm">
-                <InputLeftAddon>Schema</InputLeftAddon>
-                <Input
-                  value={builderContext.schemaURL}
-                  onChange={(e) => {
-                    builderContext.setSchemaURL(e.target.value);
-                    props.updatePreview(props.query);
-                  }}
-                />
-              </InputGroup>
-              <GraphiQL
-                fetcher={fetcher}
-                disableTabs={true}
-                onEditQuery={onEditQuery}
-                onEditHeaders={onEditHeaders}
-                plugins={[explorer, ...(hasOpenAIToken ? [openAIChat] : [])]}
-                defaultQuery={props.query}
-                schema={builderContext.schema}
-                defaultTheme={"light"}
+        <ChatProvider schema={builderContext.schema}>
+          <VStack flexGrow={1} height={"100%"}>
+            <Group
+              attached
+              css={{
+                width: "100%",
+              }}
+            >
+              <InputAddon
+                style={{
+                  borderRadius: 0,
+                }}
+              >
+                Schema
+              </InputAddon>
+              <Input
+                size="sm"
+                style={{
+                  borderRadius: 0,
+                }}
+                value={builderContext.schemaURL}
+                onChange={(e) => {
+                  builderContext.setSchemaURL(e.target.value);
+                  props.updatePreview(props.query);
+                }}
               />
-            </VStack>
-          </ChatProvider>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+            </Group>
+            <GraphiQL
+              fetcher={fetcher}
+              disableTabs={true}
+              onEditQuery={onEditQuery}
+              onEditHeaders={onEditHeaders}
+              plugins={[explorer, ...(hasOpenAIToken ? [openAIChat] : [])]}
+              defaultQuery={props.query}
+              schema={builderContext.schema}
+              defaultTheme={"light"}
+            />
+          </VStack>
+        </ChatProvider>
+      </Tabs.Content>
+    </Tabs.Root>
   );
 };

src/builder/panes/Preview.tsx

@@ -1,14 +1,4 @@
-import {
-  Alert,
-  AlertIcon,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  Text,
-  Box,
-} from "@chakra-ui/react";
+import { Tabs, Text, Flex } from "@chakra-ui/react";
 import { FabrixComponent } from "@fabrix-framework/fabrix";
 import {
   EditorContextProvider,
@@ -20,6 +10,7 @@ import { DocumentNode } from "graphql";
 import { useContext } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { CombinedError } from "urql";
+import { Alert } from "../../components/ui/alert";
 import { FabrixBuilderContext } from "../context";
 import { baseFlexStyle } from "./shared";
 
@@ -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,40 @@ export const PreviewPane = (props: {
   };
 
   return (
-    <Tabs
-      sx={baseFlexStyle}
+    <Tabs.Root
+      css={baseFlexStyle}
       overflowY={"auto"}
-      isLazy
-      isFitted
-      variant="enclosed-colored"
+      variant="outline"
+      defaultValue="preview"
       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 +116,8 @@ export const PreviewPane = (props: {
               </div>
             </SchemaContextProvider>
           </EditorContextProvider>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+        </Tabs.Content>
+      </Flex>
+    </Tabs.Root>
   );
 };