Upgrade to use Ark v1 (#39)

* build(deps): update dependencies * chore: update components to use ark v1 structure * ci(changesets): add ark v1 upgrade changeset * test: update testing suites
hobbescodes · Dec 31, 2023 · d1972e3 · d1972e3
1 parent 304871a
commit d1972e3
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 131 deletions.
diff --git a/.changeset/sour-glasses-deny.md b/.changeset/sour-glasses-deny.md
@@ -0,0 +1,5 @@
+---
+"@hobbescodes/tigris-ui": minor
+---
+
+Update components to support Ark v1
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -47,36 +47,36 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@ark-ui/anatomy": "^0.1.0",
-    "@ark-ui/react": "^0.15.0",
+    "@ark-ui/anatomy": "^1.2.0",
+    "@ark-ui/react": "^1.2.1",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.26.2",
-    "@commitlint/cli": "^18.2.0",
-    "@commitlint/config-conventional": "^18.1.0",
-    "@commitlint/types": "^18.1.0",
+    "@changesets/cli": "^2.27.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/types": "^18.4.3",
     "@omnidev/knit": "^0.1.2",
     "@pandacss/dev": "^0.23.0",
     "@pandacss/types": "^0.23.0",
-    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-a11y": "^7.6.6",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.1",
+    "@storybook/blocks": "^7.6.6",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-vite": "^7.5.1",
+    "@storybook/manager-api": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/dom": "^9.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.2.46",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -89,19 +89,19 @@
     "eslint-plugin-testing-library": "^6.1.0",
     "eslint-plugin-typescript-sort-keys": "^3.1.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.16.16",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "lint-staged": "^15.0.2",
+    "lint-staged": "^15.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.11.0",
-    "storybook": "^7.4.6",
-    "storybook-dark-mode": "^3.0.1",
+    "react-icons": "^4.12.0",
+    "storybook": "^7.6.6",
+    "storybook-dark-mode": "^3.0.3",
     "tsup": "^8.0.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "vite-tsconfig-paths": "^4.2.1",
-    "wait-on": "^7.0.1"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.3",
+    "wait-on": "^7.2.0"
   }
 }
diff --git a/src/components/Drawer/Drawer.spec.tsx b/src/components/Drawer/Drawer.spec.tsx
@@ -33,10 +33,11 @@ export const drawerState = async <R extends Renderer = ReactRenderer>({
 
   await step("It should close drawer on close button click", async () => {
     const closeButton = screen.getByLabelText("close button");
+    const drawerTitle = screen.getByText("Drawer Title");
 
     await userEvent.click(closeButton);
 
-    const drawerTitle = screen.getByText("Drawer Title");
+    await sleep(1000);
 
     await expect(drawerTitle).not.toBeVisible();
   });

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -3,12 +3,11 @@ import {
   Dialog,
   DialogBackdrop,
   DialogCloseTrigger,
-  DialogContainer,
   DialogContent,
   DialogDescription,
+  DialogPositioner,
   DialogTitle,
   DialogTrigger,
-  Portal,
 } from "@ark-ui/react";
 import { FiX as CloseIcon } from "react-icons/fi";
 
@@ -49,7 +48,7 @@ const Drawer = ({
   const PandaContainer = panda(ark.div);
 
   return (
-    <Dialog {...rest}>
+    <Dialog lazyMount unmountOnExit {...rest}>
       {(ctx) => (
         <>
           {trigger && (
@@ -58,54 +57,46 @@ const Drawer = ({
             </DialogTrigger>
           )}
 
-          <Portal>
-            <DialogBackdrop className={classes.backdrop} />
+          <DialogBackdrop className={classes.backdrop} />
 
-            <DialogContainer className={classes.container}>
-              <DialogContent
-                className={classes.content}
-                lazyMount
-                unmountOnExit
-              >
-                <PandaContainer className={classes.header}>
-                  {headerAddon && headerAddon}
+          <DialogPositioner className={classes.positioner}>
+            <DialogContent className={classes.content}>
+              <PandaContainer className={classes.header}>
+                {headerAddon && headerAddon}
 
-                  <Flex direction="column" gap={1}>
-                    {title && (
-                      <DialogTitle className={classes.title}>
-                        {title}
-                      </DialogTitle>
-                    )}
+                <Flex direction="column" gap={1}>
+                  {title && (
+                    <DialogTitle className={classes.title}>{title}</DialogTitle>
+                  )}
 
-                    {description && (
-                      <DialogDescription className={classes.description}>
-                        {description}
-                      </DialogDescription>
-                    )}
-                  </Flex>
+                  {description && (
+                    <DialogDescription className={classes.description}>
+                      {description}
+                    </DialogDescription>
+                  )}
+                </Flex>
 
-                  <DialogCloseTrigger
-                    aria-label="close button"
-                    className={classes.closeTrigger}
-                  >
-                    <Icon color="fg.primary">
-                      <CloseIcon />
-                    </Icon>
-                  </DialogCloseTrigger>
-                </PandaContainer>
+                <DialogCloseTrigger
+                  aria-label="close button"
+                  className={classes.closeTrigger}
+                >
+                  <Icon color="fg.primary">
+                    <CloseIcon />
+                  </Icon>
+                </DialogCloseTrigger>
+              </PandaContainer>
 
-                <PandaContainer className={classes.body} asChild>
-                  {getContextualChildren({ ctx, children })}
-                </PandaContainer>
+              <PandaContainer className={classes.body} asChild>
+                {getContextualChildren({ ctx, children })}
+              </PandaContainer>
 
-                {footer && (
-                  <PandaContainer className={classes.footer} asChild>
-                    {getContextualChildren({ ctx, children: footer })}
-                  </PandaContainer>
-                )}
-              </DialogContent>
-            </DialogContainer>
-          </Portal>
+              {footer && (
+                <PandaContainer className={classes.footer} asChild>
+                  {getContextualChildren({ ctx, children: footer })}
+                </PandaContainer>
+              )}
+            </DialogContent>
+          </DialogPositioner>
         </>
       )}
     </Dialog>

diff --git a/src/components/Modal/Modal.spec.tsx b/src/components/Modal/Modal.spec.tsx
@@ -33,10 +33,11 @@ export const modalState = async <R extends Renderer = ReactRenderer>({
 
   await step("It should close modal on close button click", async () => {
     const closeButton = screen.getByLabelText("close button");
+    const modalTitle = screen.getByText("Modal Title");
 
     await userEvent.click(closeButton);
 
-    const modalTitle = screen.getByText("Modal Title");
+    await sleep(1000);
 
     await expect(modalTitle).not.toBeVisible();
   });

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -2,12 +2,11 @@ import {
   Dialog,
   DialogBackdrop,
   DialogCloseTrigger,
-  DialogContainer,
   DialogContent,
   DialogDescription,
+  DialogPositioner,
   DialogTitle,
   DialogTrigger,
-  Portal,
 } from "@ark-ui/react";
 import { motion } from "framer-motion";
 import { useState } from "react";
@@ -49,7 +48,7 @@ const Modal = ({
   const isMobile = useIsMobile();
 
   return (
-    <Dialog {...rest}>
+    <Dialog lazyMount unmountOnExit {...rest}>
       {(ctx) => (
         <>
           {trigger && (
@@ -58,58 +57,56 @@ const Modal = ({
             </DialogTrigger>
           )}
 
-          <Portal>
-            <DialogBackdrop className={classes.backdrop} />
+          <DialogBackdrop className={classes.backdrop} />
 
-            <DialogContainer className={classes.container}>
-              <DialogContent className={classes.content} unmountOnExit asChild>
-                <PandaMotionContainer
-                  drag={isMobile ? "y" : false}
-                  dragConstraints={{ top: 0, bottom: 500 }}
-                  dragElastic={false}
-                  dragSnapToOrigin
-                  onDrag={(_e, info) => {
-                    if (info.offset.y > 250) ctx.close();
-                  }}
-                  onTapStart={() => setIsTapped(true)}
-                  onTap={() => setIsTapped(false)}
-                  cursor={isMobile ? "pointer" : "default"}
-                >
-                  <panda.div
-                    display={{ base: "block", sm: "none" }}
-                    w="20%"
-                    borderRadius="full"
-                    mx="auto"
-                    my={3}
-                    h={2}
-                    bgColor="border.primary"
-                    opacity={isTapped ? 0.8 : 1}
-                  />
+          <DialogPositioner className={classes.positioner}>
+            <DialogContent className={classes.content} asChild>
+              <PandaMotionContainer
+                drag={isMobile ? "y" : false}
+                dragConstraints={{ top: 0, bottom: 500 }}
+                dragElastic={false}
+                dragSnapToOrigin
+                onDrag={(_e, info) => {
+                  if (info.offset.y > 250) ctx.close();
+                }}
+                onTapStart={() => setIsTapped(true)}
+                onTap={() => setIsTapped(false)}
+                cursor={isMobile ? "pointer" : "default"}
+              >
+                <panda.div
+                  display={{ base: "block", sm: "none" }}
+                  w="20%"
+                  borderRadius="full"
+                  mx="auto"
+                  my={3}
+                  h={2}
+                  bgColor="border.primary"
+                  opacity={isTapped ? 0.8 : 1}
+                />
 
-                  {title && (
-                    <DialogTitle className={classes.title}>{title}</DialogTitle>
-                  )}
+                {title && (
+                  <DialogTitle className={classes.title}>{title}</DialogTitle>
+                )}
 
-                  {description && (
-                    <DialogDescription className={classes.description}>
-                      {description}
-                    </DialogDescription>
-                  )}
+                {description && (
+                  <DialogDescription className={classes.description}>
+                    {description}
+                  </DialogDescription>
+                )}
 
-                  {getContextualChildren({ ctx, children })}
+                {getContextualChildren({ ctx, children })}
 
-                  <DialogCloseTrigger
-                    aria-label="close button"
-                    className={classes.closeTrigger}
-                  >
-                    <Icon color="fg.primary">
-                      <CloseIcon />
-                    </Icon>
-                  </DialogCloseTrigger>
-                </PandaMotionContainer>
-              </DialogContent>
-            </DialogContainer>
-          </Portal>
+                <DialogCloseTrigger
+                  aria-label="close button"
+                  className={classes.closeTrigger}
+                >
+                  <Icon color="fg.primary">
+                    <CloseIcon />
+                  </Icon>
+                </DialogCloseTrigger>
+              </PandaMotionContainer>
+            </DialogContent>
+          </DialogPositioner>
         </>
       )}
     </Dialog>

diff --git a/src/lib/theme/extensions/slotRecipes/drawer.slotRecipe.ts b/src/lib/theme/extensions/slotRecipes/drawer.slotRecipe.ts
@@ -24,7 +24,7 @@ const drawer = defineSlotRecipe({
         animation: "fade-out",
       },
     },
-    container: {
+    positioner: {
       alignItems: "center",
       display: "flex",
       top: 0,
@@ -99,7 +99,7 @@ const drawer = defineSlotRecipe({
   variants: {
     placement: {
       left: {
-        container: {
+        positioner: {
           left: 0,
         },
         content: {
@@ -113,7 +113,7 @@ const drawer = defineSlotRecipe({
         },
       },
       right: {
-        container: {
+        positioner: {
           right: 0,
         },
         content: {