Skip to content

Commit d1972e3

Browse files
hobbescodeshobbescodes
authored
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
1 parent 304871a commit d1972e3

File tree

9 files changed

+132
-131
lines changed

9 files changed

+132
-131
lines changed

‎.changeset/sour-glasses-deny.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hobbescodes/tigris-ui": minor
3+
---
4+
5+
Update components to support Ark v1

‎bun.lockb

-30.2 KB
Binary file not shown.

‎package.json

+26-26
Original file line numberDiff line numberDiff line change
@@ -47,36 +47,36 @@
4747
"react-dom": "^18.2.0"
4848
},
4949
"devDependencies": {
50-
"@ark-ui/anatomy": "^0.1.0",
51-
"@ark-ui/react": "^0.15.0",
50+
"@ark-ui/anatomy": "^1.2.0",
51+
"@ark-ui/react": "^1.2.1",
5252
"@changesets/changelog-github": "^0.5.0",
53-
"@changesets/cli": "^2.26.2",
54-
"@commitlint/cli": "^18.2.0",
55-
"@commitlint/config-conventional": "^18.1.0",
56-
"@commitlint/types": "^18.1.0",
53+
"@changesets/cli": "^2.27.1",
54+
"@commitlint/cli": "^18.4.3",
55+
"@commitlint/config-conventional": "^18.4.3",
56+
"@commitlint/types": "^18.4.3",
5757
"@omnidev/knit": "^0.1.2",
5858
"@pandacss/dev": "^0.23.0",
5959
"@pandacss/types": "^0.23.0",
60-
"@storybook/addon-a11y": "^7.5.1",
60+
"@storybook/addon-a11y": "^7.6.6",
6161
"@storybook/addon-coverage": "^1.0.0",
62-
"@storybook/addon-essentials": "^7.5.1",
63-
"@storybook/addon-interactions": "^7.5.1",
64-
"@storybook/addon-links": "^7.5.1",
62+
"@storybook/addon-essentials": "^7.6.6",
63+
"@storybook/addon-interactions": "^7.6.6",
64+
"@storybook/addon-links": "^7.6.6",
6565
"@storybook/addon-onboarding": "^1.0.8",
66-
"@storybook/blocks": "^7.5.1",
66+
"@storybook/blocks": "^7.6.6",
6767
"@storybook/jest": "^0.2.3",
68-
"@storybook/manager-api": "^7.5.1",
69-
"@storybook/react": "^7.5.1",
70-
"@storybook/react-vite": "^7.5.1",
68+
"@storybook/manager-api": "^7.6.6",
69+
"@storybook/react": "^7.6.6",
70+
"@storybook/react-vite": "^7.6.6",
7171
"@storybook/test-runner": "^0.16.0",
7272
"@storybook/testing-library": "^0.2.2",
7373
"@testing-library/dom": "^9.0.0",
74-
"@testing-library/react": "^14.0.0",
74+
"@testing-library/react": "^14.1.2",
7575
"@testing-library/user-event": "^14.5.1",
76-
"@types/react": "^18.2.28",
76+
"@types/react": "^18.2.46",
7777
"@typescript-eslint/eslint-plugin": "^6.7.5",
7878
"@typescript-eslint/parser": "^6.7.5",
79-
"concurrently": "^8.2.1",
79+
"concurrently": "^8.2.2",
8080
"eslint": "^8.51.0",
8181
"eslint-config-prettier": "^9.0.0",
8282
"eslint-import-resolver-typescript": "^3.6.1",
@@ -89,19 +89,19 @@
8989
"eslint-plugin-testing-library": "^6.1.0",
9090
"eslint-plugin-typescript-sort-keys": "^3.1.0",
9191
"eslint-plugin-unused-imports": "^3.0.0",
92-
"framer-motion": "^10.16.4",
92+
"framer-motion": "^10.16.16",
9393
"http-server": "^14.1.1",
9494
"husky": "^8.0.3",
95-
"lint-staged": "^15.0.2",
95+
"lint-staged": "^15.2.0",
9696
"react": "^18.2.0",
9797
"react-dom": "^18.2.0",
98-
"react-icons": "^4.11.0",
99-
"storybook": "^7.4.6",
100-
"storybook-dark-mode": "^3.0.1",
98+
"react-icons": "^4.12.0",
99+
"storybook": "^7.6.6",
100+
"storybook-dark-mode": "^3.0.3",
101101
"tsup": "^8.0.0",
102-
"typescript": "^5.2.2",
103-
"vite": "^5.0.0",
104-
"vite-tsconfig-paths": "^4.2.1",
105-
"wait-on": "^7.0.1"
102+
"typescript": "^5.3.3",
103+
"vite": "^5.0.10",
104+
"vite-tsconfig-paths": "^4.2.3",
105+
"wait-on": "^7.2.0"
106106
}
107107
}

‎src/components/Drawer/Drawer.spec.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,11 @@ export const drawerState = async <R extends Renderer = ReactRenderer>({
3333

3434
await step("It should close drawer on close button click", async () => {
3535
const closeButton = screen.getByLabelText("close button");
36+
const drawerTitle = screen.getByText("Drawer Title");
3637

3738
await userEvent.click(closeButton);
3839

39-
const drawerTitle = screen.getByText("Drawer Title");
40+
await sleep(1000);
4041

4142
await expect(drawerTitle).not.toBeVisible();
4243
});

‎src/components/Drawer/Drawer.tsx

+36-45
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import {
33
Dialog,
44
DialogBackdrop,
55
DialogCloseTrigger,
6-
DialogContainer,
76
DialogContent,
87
DialogDescription,
8+
DialogPositioner,
99
DialogTitle,
1010
DialogTrigger,
11-
Portal,
1211
} from "@ark-ui/react";
1312
import { FiX as CloseIcon } from "react-icons/fi";
1413

@@ -49,7 +48,7 @@ const Drawer = ({
4948
const PandaContainer = panda(ark.div);
5049

5150
return (
52-
<Dialog {...rest}>
51+
<Dialog lazyMount unmountOnExit {...rest}>
5352
{(ctx) => (
5453
<>
5554
{trigger && (
@@ -58,54 +57,46 @@ const Drawer = ({
5857
</DialogTrigger>
5958
)}
6059

61-
<Portal>
62-
<DialogBackdrop className={classes.backdrop} />
60+
<DialogBackdrop className={classes.backdrop} />
6361

64-
<DialogContainer className={classes.container}>
65-
<DialogContent
66-
className={classes.content}
67-
lazyMount
68-
unmountOnExit
69-
>
70-
<PandaContainer className={classes.header}>
71-
{headerAddon && headerAddon}
62+
<DialogPositioner className={classes.positioner}>
63+
<DialogContent className={classes.content}>
64+
<PandaContainer className={classes.header}>
65+
{headerAddon && headerAddon}
7266

73-
<Flex direction="column" gap={1}>
74-
{title && (
75-
<DialogTitle className={classes.title}>
76-
{title}
77-
</DialogTitle>
78-
)}
67+
<Flex direction="column" gap={1}>
68+
{title && (
69+
<DialogTitle className={classes.title}>{title}</DialogTitle>
70+
)}
7971

80-
{description && (
81-
<DialogDescription className={classes.description}>
82-
{description}
83-
</DialogDescription>
84-
)}
85-
</Flex>
72+
{description && (
73+
<DialogDescription className={classes.description}>
74+
{description}
75+
</DialogDescription>
76+
)}
77+
</Flex>
8678

87-
<DialogCloseTrigger
88-
aria-label="close button"
89-
className={classes.closeTrigger}
90-
>
91-
<Icon color="fg.primary">
92-
<CloseIcon />
93-
</Icon>
94-
</DialogCloseTrigger>
95-
</PandaContainer>
79+
<DialogCloseTrigger
80+
aria-label="close button"
81+
className={classes.closeTrigger}
82+
>
83+
<Icon color="fg.primary">
84+
<CloseIcon />
85+
</Icon>
86+
</DialogCloseTrigger>
87+
</PandaContainer>
9688

97-
<PandaContainer className={classes.body} asChild>
98-
{getContextualChildren({ ctx, children })}
99-
</PandaContainer>
89+
<PandaContainer className={classes.body} asChild>
90+
{getContextualChildren({ ctx, children })}
91+
</PandaContainer>
10092

101-
{footer && (
102-
<PandaContainer className={classes.footer} asChild>
103-
{getContextualChildren({ ctx, children: footer })}
104-
</PandaContainer>
105-
)}
106-
</DialogContent>
107-
</DialogContainer>
108-
</Portal>
93+
{footer && (
94+
<PandaContainer className={classes.footer} asChild>
95+
{getContextualChildren({ ctx, children: footer })}
96+
</PandaContainer>
97+
)}
98+
</DialogContent>
99+
</DialogPositioner>
109100
</>
110101
)}
111102
</Dialog>

‎src/components/Modal/Modal.spec.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,11 @@ export const modalState = async <R extends Renderer = ReactRenderer>({
3333

3434
await step("It should close modal on close button click", async () => {
3535
const closeButton = screen.getByLabelText("close button");
36+
const modalTitle = screen.getByText("Modal Title");
3637

3738
await userEvent.click(closeButton);
3839

39-
const modalTitle = screen.getByText("Modal Title");
40+
await sleep(1000);
4041

4142
await expect(modalTitle).not.toBeVisible();
4243
});

‎src/components/Modal/Modal.tsx

+47-50
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import {
22
Dialog,
33
DialogBackdrop,
44
DialogCloseTrigger,
5-
DialogContainer,
65
DialogContent,
76
DialogDescription,
7+
DialogPositioner,
88
DialogTitle,
99
DialogTrigger,
10-
Portal,
1110
} from "@ark-ui/react";
1211
import { motion } from "framer-motion";
1312
import { useState } from "react";
@@ -49,7 +48,7 @@ const Modal = ({
4948
const isMobile = useIsMobile();
5049

5150
return (
52-
<Dialog {...rest}>
51+
<Dialog lazyMount unmountOnExit {...rest}>
5352
{(ctx) => (
5453
<>
5554
{trigger && (
@@ -58,58 +57,56 @@ const Modal = ({
5857
</DialogTrigger>
5958
)}
6059

61-
<Portal>
62-
<DialogBackdrop className={classes.backdrop} />
60+
<DialogBackdrop className={classes.backdrop} />
6361

64-
<DialogContainer className={classes.container}>
65-
<DialogContent className={classes.content} unmountOnExit asChild>
66-
<PandaMotionContainer
67-
drag={isMobile ? "y" : false}
68-
dragConstraints={{ top: 0, bottom: 500 }}
69-
dragElastic={false}
70-
dragSnapToOrigin
71-
onDrag={(_e, info) => {
72-
if (info.offset.y > 250) ctx.close();
73-
}}
74-
onTapStart={() => setIsTapped(true)}
75-
onTap={() => setIsTapped(false)}
76-
cursor={isMobile ? "pointer" : "default"}
77-
>
78-
<panda.div
79-
display={{ base: "block", sm: "none" }}
80-
w="20%"
81-
borderRadius="full"
82-
mx="auto"
83-
my={3}
84-
h={2}
85-
bgColor="border.primary"
86-
opacity={isTapped ? 0.8 : 1}
87-
/>
62+
<DialogPositioner className={classes.positioner}>
63+
<DialogContent className={classes.content} asChild>
64+
<PandaMotionContainer
65+
drag={isMobile ? "y" : false}
66+
dragConstraints={{ top: 0, bottom: 500 }}
67+
dragElastic={false}
68+
dragSnapToOrigin
69+
onDrag={(_e, info) => {
70+
if (info.offset.y > 250) ctx.close();
71+
}}
72+
onTapStart={() => setIsTapped(true)}
73+
onTap={() => setIsTapped(false)}
74+
cursor={isMobile ? "pointer" : "default"}
75+
>
76+
<panda.div
77+
display={{ base: "block", sm: "none" }}
78+
w="20%"
79+
borderRadius="full"
80+
mx="auto"
81+
my={3}
82+
h={2}
83+
bgColor="border.primary"
84+
opacity={isTapped ? 0.8 : 1}
85+
/>
8886

89-
{title && (
90-
<DialogTitle className={classes.title}>{title}</DialogTitle>
91-
)}
87+
{title && (
88+
<DialogTitle className={classes.title}>{title}</DialogTitle>
89+
)}
9290

93-
{description && (
94-
<DialogDescription className={classes.description}>
95-
{description}
96-
</DialogDescription>
97-
)}
91+
{description && (
92+
<DialogDescription className={classes.description}>
93+
{description}
94+
</DialogDescription>
95+
)}
9896

99-
{getContextualChildren({ ctx, children })}
97+
{getContextualChildren({ ctx, children })}
10098

101-
<DialogCloseTrigger
102-
aria-label="close button"
103-
className={classes.closeTrigger}
104-
>
105-
<Icon color="fg.primary">
106-
<CloseIcon />
107-
</Icon>
108-
</DialogCloseTrigger>
109-
</PandaMotionContainer>
110-
</DialogContent>
111-
</DialogContainer>
112-
</Portal>
99+
<DialogCloseTrigger
100+
aria-label="close button"
101+
className={classes.closeTrigger}
102+
>
103+
<Icon color="fg.primary">
104+
<CloseIcon />
105+
</Icon>
106+
</DialogCloseTrigger>
107+
</PandaMotionContainer>
108+
</DialogContent>
109+
</DialogPositioner>
113110
</>
114111
)}
115112
</Dialog>

‎src/lib/theme/extensions/slotRecipes/drawer.slotRecipe.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const drawer = defineSlotRecipe({
2424
animation: "fade-out",
2525
},
2626
},
27-
container: {
27+
positioner: {
2828
alignItems: "center",
2929
display: "flex",
3030
top: 0,
@@ -99,7 +99,7 @@ const drawer = defineSlotRecipe({
9999
variants: {
100100
placement: {
101101
left: {
102-
container: {
102+
positioner: {
103103
left: 0,
104104
},
105105
content: {
@@ -113,7 +113,7 @@ const drawer = defineSlotRecipe({
113113
},
114114
},
115115
right: {
116-
container: {
116+
positioner: {
117117
right: 0,
118118
},
119119
content: {

0 commit comments

Comments
 (0)