Fix modal state (#226)

* build(deps): upgrade dependencies

* refactor(modal): simplify controlled state story

* docs(usage): add 'react-icons' required dep

* build(deps): revert Ark to v1.2 (chakra-ui/ark#2090)

.changeset/large-poems-develop.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Revert Ark UI to v1.2 due to controlled component open state regression (https://github.com/chakra-ui/ark/issues/2090)

docs/usage.md

@@ -59,7 +59,7 @@ Now you are ready to install the UI library. You can either install it [from the
 
 ## Remote
 
-Install from remote repository along with required dependencies: `bun add @animareflection/ui @ark-ui/react framer-motion sonner`
+Install from remote repository along with required dependencies: `bun add @animareflection/ui @ark-ui/react framer-motion sonner react-icons`
 
 ## Local
 

package.json

@@ -54,15 +54,15 @@
   },
   "devDependencies": {
     "@ark-ui/anatomy": "^1.3.0",
-    "@ark-ui/react": "^1.3.0",
+    "@ark-ui/react": "1.2",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^18.4.4",
-    "@commitlint/types": "^18.4.4",
+    "@commitlint/cli": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/types": "^18.6.0",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "^0.27.3",
-    "@pandacss/types": "^0.27.3",
+    "@pandacss/dev": "^0.28.0",
+    "@pandacss/types": "^0.28.0",
     "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-essentials": "^7.6.10",
@@ -82,10 +82,10 @@
     "@testing-library/dom": "^9.3.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.10",
     "@types/react": "^18.2.48",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -99,9 +99,9 @@
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-typescript-sort-keys": "^3.1.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "framer-motion": "^10.18.0",
+    "framer-motion": "^11.0.3",
     "http-server": "^14.1.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.6",
     "jsonfile": "^6.1.0",
     "lint-staged": "^15.2.0",
     "next": "^14.1.0",
@@ -117,8 +117,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "usehooks-ts": "^2.9.5",
+    "usehooks-ts": "^2.10.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.89.0"
+    "webpack": "^5.90.0"
   }
 }

src/components/core/Modal/Modal.stories.tsx

@@ -18,7 +18,7 @@ const ControlledModal = () => {
 
       <Modal
         open={isOpen}
-        onOpenChange={({ open }) => (open ? setIsOpen(true) : setIsOpen(false))}
+        onOpenChange={({ open }) => setIsOpen(open)}
         title="Modal Title"
         description="Modal Description"
       >