Remove portals (#218)

* build(deps): upgrade dependencies

* refactor: remove portals from components

* refactor(stories): remove custom layout story parameter

* chore(stories): remove identity decorator

* chore(examples): upgrade dependencies

* chore: update JSDoc

* fix(modal): use asChild for trigger

* docs: add JSDoc comments for lazy mounting and exit unmounting

---------

Co-authored-by: hobbescodes <87732294+hobbescodes@users.noreply.github.com>

.changeset/tough-kings-melt.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Remove portals from `Drawer`, `Modal`, and `Tooltip`

examples/next/package.json

@@ -12,20 +12,20 @@
     "@ark-ui/react": "^1.0.1"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.24.2",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
+    "@pandacss/dev": "^0.27.3",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.0",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0"
+    "react-icons": "^5.0.1"
   }
 }

examples/next/src/components/DrawerDemo.tsx

@@ -5,7 +5,11 @@ import { Wrapper } from "components";
 const DrawerDemo = () => (
   <Wrapper title="Drawer">
     <Drawer
-      trigger={<Button variant="primary">Open Drawer</Button>}
+      trigger={
+        <Button variant="primary" w="fit-content">
+          Open Drawer
+        </Button>
+      }
       title="Drawer Title"
       description="Drawer Description"
     >

examples/next/src/components/ModalDemo.tsx

@@ -1,21 +1,34 @@
-import { Modal, Text } from "@animareflection/ui";
+"use client";
+
+import { useState } from "react";
+
+import { Button, Modal, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-const ModalDemo = () => (
-  <Wrapper title="Modal">
-    <Modal
-      trigger="Open Modal"
-      title="Modal Title"
-      description="Modal Description"
-    >
-      <Text mt={2}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam.
-      </Text>
-    </Modal>
-  </Wrapper>
-);
+const ModalDemo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Wrapper title="Modal">
+      <Button w="fit-content" onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+
+      <Modal
+        open={isOpen}
+        onOpenChange={({ open }) => (open ? setIsOpen(true) : setIsOpen(false))}
+        title="Modal Title"
+        description="Modal Description"
+      >
+        <Text mt={2}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam.
+        </Text>
+      </Modal>
+    </Wrapper>
+  );
+};
 
 export default ModalDemo;

examples/vite-react/package.json

@@ -11,15 +11,15 @@
     "@ark-ui/react": "^1.0.1"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.24.2",
-    "@types/react": "^18.2.46",
+    "@pandacss/dev": "^0.27.3",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vite-tsconfig-paths": "^4.2.3"
+    "vite": "^5.0.11",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "dependencies": {
     "react": "^18.2.0",

examples/vite-react/src/components/DrawerDemo.tsx

@@ -5,7 +5,11 @@ import { Wrapper } from "components";
 const DrawerDemo = () => (
   <Wrapper title="Drawer">
     <Drawer
-      trigger={<Button variant="primary">Open Drawer</Button>}
+      trigger={
+        <Button variant="primary" w="fit-content">
+          Open Drawer
+        </Button>
+      }
       title="Drawer Title"
       description="Drawer Description"
     >

examples/vite-react/src/components/ModalDemo.tsx

@@ -1,21 +1,32 @@
+import { useState } from "react";
+
 import { Button, Modal, Text } from "@animareflection/ui";
 
 import { Wrapper } from "components";
 
-const ModalDemo = () => (
-  <Wrapper title="Modal">
-    <Modal
-      trigger="Open Modal"
-      title="Modal Title"
-      description="Modal Description"
-    >
-      <Text mt={2}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam.
-      </Text>
-    </Modal>
-  </Wrapper>
-);
+const ModalDemo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Wrapper title="Modal">
+      <Button w="fit-content" onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+
+      <Modal
+        open={isOpen}
+        onOpenChange={({ open }) => (open ? setIsOpen(true) : setIsOpen(false))}
+        title="Modal Title"
+        description="Modal Description"
+      >
+        <Text mt={2}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam.
+        </Text>
+      </Modal>
+    </Wrapper>
+  );
+};
 
 export default ModalDemo;

package.json

@@ -61,24 +61,24 @@
     "@commitlint/config-conventional": "^18.4.4",
     "@commitlint/types": "^18.4.4",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "^0.27.2",
-    "@pandacss/types": "^0.27.2",
-    "@storybook/addon-a11y": "^7.6.9",
+    "@pandacss/dev": "^0.27.3",
+    "@pandacss/types": "^0.27.3",
+    "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.9",
-    "@storybook/addon-interactions": "^7.6.9",
-    "@storybook/addon-links": "^7.6.9",
-    "@storybook/blocks": "^7.6.9",
-    "@storybook/builder-webpack5": "^7.6.9",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/builder-webpack5": "^7.6.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.9",
-    "@storybook/nextjs": "^7.6.9",
-    "@storybook/react": "^7.6.9",
+    "@storybook/manager-api": "^7.6.10",
+    "@storybook/nextjs": "^7.6.10",
+    "@storybook/react": "^7.6.10",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.9",
-    "@storybook/types": "^7.6.9",
+    "@storybook/theming": "^7.6.10",
+    "@storybook/types": "^7.6.10",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
@@ -104,20 +104,20 @@
     "husky": "^8.0.3",
     "jsonfile": "^6.1.0",
     "lint-staged": "^15.2.0",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
     "radash": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "sonner": "^1.3.1",
-    "storybook": "^7.6.9",
+    "storybook": "^7.6.10",
     "storybook-dark-mode": "^3.0.3",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "usehooks-ts": "^2.9.4",
+    "usehooks-ts": "^2.9.5",
     "wait-on": "^7.2.0",
     "webpack": "^5.89.0"
   }

src/components/core/Accordion/Accordion.stories.tsx

@@ -46,7 +46,6 @@ const meta = {
   title: "Components/Core/Accordion",
   component: Accordion,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

src/components/core/Accordion/Accordion.tsx

@@ -31,7 +31,7 @@ export interface Props extends PrimitiveAccordionProps {
 }
 
 /**
- * Core UI accordion.
+ * Accordion.
  */
 const Accordion = ({ items, plusMinus, ...rest }: Props) => {
   const isClient = useIsClient();

src/components/core/Avatar/Avatar.stories.tsx

@@ -69,7 +69,6 @@ const meta = {
   title: "Components/Core/Avatar",
   component: Avatar,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Avatar>;
 
 export default meta;

src/components/core/Avatar/Avatar.tsx

@@ -18,7 +18,7 @@ export interface Props
 }
 
 /**
- * Core UI avatar.
+ * Avatar.
  */
 const Avatar = ({ src, alt, fallback = "AR", ...rest }: Props) => {
   const isClient = useIsClient();

src/components/core/Badge/Badge.stories.tsx

@@ -33,7 +33,6 @@ const meta = {
   title: "Components/Core/Badge",
   component: Badge,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Badge>;
 
 export default meta;

src/components/core/Badge/Badge.tsx

@@ -6,7 +6,7 @@ import type { ComponentProps } from "react";
 export type Props = ComponentProps<typeof Badge>;
 
 /**
- * Core UI badge.
+ * Badge.
  */
 const Badge = panda("div", badge);
 

src/components/core/Banner/Banner.stories.tsx

@@ -52,7 +52,6 @@ const meta = {
   title: "Components/Core/Banner",
   component: Banner,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Banner>;
 
 export default meta;

src/components/core/Banner/Banner.tsx

@@ -15,7 +15,7 @@ export interface Props extends ComponentProps<typeof PandaBanner> {
 const PandaBanner = panda("div", banner);
 
 /**
- * Core UI banner.
+ * Banner.
  */
 const Banner = ({ children, closable, ...rest }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);

src/components/core/Breadcrumb/Breadcrumb.stories.tsx

@@ -55,7 +55,6 @@ const meta = {
   title: "Components/Core/Breadcrumb",
   component: Breadcrumb,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Breadcrumb>;
 
 export default meta;

src/components/core/Breadcrumb/Breadcrumb.tsx

@@ -28,7 +28,7 @@ export interface Props {
 }
 
 /**
- * Core UI breadcrumb.
+ * Breadcrumb.
  */
 const Breadcrumb = ({ breadcrumbs, pathname, rootLabel, separator }: Props) => {
   const pathnameBreadcrumbs = usePathnameBreadcrumb({ pathname, rootLabel });

src/components/core/Button/Button.stories.tsx

@@ -93,7 +93,6 @@ const meta: Meta<typeof Button> = {
   title: "Components/Core/Button",
   component: Button,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Button>;
 
 export default meta;

src/components/core/Button/Button.tsx

@@ -6,7 +6,7 @@ import type { ComponentProps } from "react";
 export type Props = ComponentProps<typeof Button>;
 
 /**
- * Core UI button.
+ * Button.
  */
 const Button = panda("button", button);
 

src/components/core/Card/Card.stories.tsx

@@ -23,7 +23,6 @@ const meta = {
   title: "Components/Core/Card",
   component: Card,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Card>;
 
 export default meta;

src/components/core/Card/Card.tsx

@@ -9,7 +9,7 @@ type Props = HTMLPandaProps<"div">;
 const { withProvider, withContext } = createStyleContext(card);
 
 /**
- * Core UI card.
+ * Card.
  */
 const Card = withProvider(
   ({ children, ...rest }: Props) => <panda.div {...rest}>{children}</panda.div>,

src/components/core/Carousel/Carousel.stories.tsx

@@ -60,7 +60,6 @@ const meta = {
   title: "Components/Core/Carousel",
   component: Carousel,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Carousel>;
 
 export default meta;

src/components/core/Checkbox/Checkbox.stories.tsx

@@ -70,7 +70,6 @@ const meta: Meta = {
   title: "Components/Core/Checkbox",
   component: Checkbox,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Checkbox>;
 
 export default meta;

src/components/core/Checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ export interface Props
 }
 
 /**
- * Core UI checkbox.
+ * Checkbox.
  */
 const Checkbox = ({ label, ...rest }: Props) => {
   const isClient = useIsClient();

src/components/core/Drawer/Drawer.stories.tsx

@@ -96,7 +96,6 @@ const meta: Meta = {
   title: "Components/Core/Drawer",
   component: Drawer,
   tags: ["autodocs"],
-  decorators: [(Story) => <Story />],
 } satisfies Meta<typeof Drawer>;
 
 export default meta;