From fe99cf1dc7d90b667d82c7d92142a1cdcdd78627 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 26 Apr 2024 12:58:01 -0400
Subject: [PATCH 1/3] perf: refactor Panel to lazy load heavy imports

---
 .../src/components/Panel/Panel.tsx            | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/packages/ui-components/src/components/Panel/Panel.tsx b/packages/ui-components/src/components/Panel/Panel.tsx
index b7d7e680..8c411a2a 100644
--- a/packages/ui-components/src/components/Panel/Panel.tsx
+++ b/packages/ui-components/src/components/Panel/Panel.tsx
@@ -1,17 +1,25 @@
 import { IconClose } from "@versini/ui-icons";
-import {
-	Modal,
-	ModalClose,
-	ModalContent,
-	ModalDescription,
-	ModalHeading,
-} from "@versini/ui-private";
-import { useEffect, useRef } from "react";
+
+import { Suspense, lazy, useEffect, useRef } from "react";
 
 import { ButtonIcon } from "../";
 import type { PanelProps } from "./PanelTypes";
 import { TYPE_PANEL, getPanelClassName } from "./utilities";
 
+const lazyLoad = (componentName: string) => {
+	return lazy(() =>
+		import("@versini/ui-private").then((module) => ({
+			default: module[componentName] as React.ComponentType<any>,
+		})),
+	);
+};
+
+const Modal = lazyLoad("Modal");
+const ModalClose = lazyLoad("ModalClose");
+const ModalContent = lazyLoad("ModalContent");
+const ModalDescription = lazyLoad("ModalDescription");
+const ModalHeading = lazyLoad("ModalHeading");
+
 export const Panel = ({
 	open,
 	onOpenChange,
@@ -42,26 +50,37 @@ export const Panel = ({
 	}, [title, open]);
 
 	return (
-		<Modal open={open} onOpenChange={onOpenChange}>
-			<ModalContent className={panelClassName.main}>
-				<div className="flex flex-row-reverse items-center justify-between">
-					<ModalClose
-						className={panelClassName.close}
-						trigger={
-							<ButtonIcon mode="dark" focusMode="light" noBorder label="Close">
-								<IconClose />
-							</ButtonIcon>
-						}
-					/>
-					<ModalHeading className={panelClassName.header}>{title}</ModalHeading>
-				</div>
+		<Suspense fallback={<div />}>
+			{open && (
+				<Modal open={open} onOpenChange={onOpenChange}>
+					<ModalContent className={panelClassName.main}>
+						<div className="flex flex-row-reverse items-center justify-between">
+							<ModalClose
+								className={panelClassName.close}
+								trigger={
+									<ButtonIcon
+										mode="dark"
+										focusMode="light"
+										noBorder
+										label="Close"
+									>
+										<IconClose />
+									</ButtonIcon>
+								}
+							/>
+							<ModalHeading className={panelClassName.header}>
+								{title}
+							</ModalHeading>
+						</div>
 
-				<ModalDescription className={panelClassName.content}>
-					{children}
-				</ModalDescription>
+						<ModalDescription className={panelClassName.content}>
+							{children}
+						</ModalDescription>
 
-				{footer && <div className={panelClassName.footer}>{footer}</div>}
-			</ModalContent>
-		</Modal>
+						{footer && <div className={panelClassName.footer}>{footer}</div>}
+					</ModalContent>
+				</Modal>
+			)}
+		</Suspense>
 	);
 };

From eac9aff1cb5af7e2bf4429b0d4ff00d44ad343c8 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 26 Apr 2024 13:03:47 -0400
Subject: [PATCH 2/3] updating examples

---
 .../with-vite/src/components/CustomCard.tsx   | 56 ++++++++++++-------
 .../src/components/CustomCard.tsx             | 56 ++++++++++++-------
 2 files changed, 72 insertions(+), 40 deletions(-)

diff --git a/examples/with-vite/src/components/CustomCard.tsx b/examples/with-vite/src/components/CustomCard.tsx
index 40018700..41925362 100644
--- a/examples/with-vite/src/components/CustomCard.tsx
+++ b/examples/with-vite/src/components/CustomCard.tsx
@@ -1,4 +1,4 @@
-import { Card, Menu, MenuItem } from "@versini/ui-components";
+import { Card, Menu, MenuItem, Panel } from "@versini/ui-components";
 import {
 	IconChart,
 	IconHistory,
@@ -7,28 +7,44 @@ import {
 	IconSettings,
 } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
+import { useState } from "react";
 import { CommonTemplate } from "./CommonTemplate";
 
 export const CustomCard = () => {
+	const [open, setOpen] = useState(false);
+	const onOpenChange = () => {
+		setOpen(!open);
+	};
 	return (
-		<Card
-			header={
-				<Flexgrid alignHorizontal="space-between">
-					<FlexgridItem>
-						<h2 className="m-0 mb-1">Kitchen Sink</h2>
-					</FlexgridItem>
-					<FlexgridItem>
-						<Menu icon={<IconSettings />}>
-							<MenuItem label="Profile" icon={<IconProfile />} />
-							<MenuItem label="Statistics" icon={<IconChart />} />
-							<MenuItem label="History" icon={<IconHistory />} />
-							<MenuItem label="About" icon={<IconInfo />} />
-						</Menu>
-					</FlexgridItem>
-				</Flexgrid>
-			}
-		>
-			<CommonTemplate />
-		</Card>
+		<>
+			<Panel title="Profile" open={open} onOpenChange={onOpenChange}>
+				Hello Profile
+			</Panel>
+			<Card
+				header={
+					<Flexgrid alignHorizontal="space-between">
+						<FlexgridItem>
+							<h2 className="m-0 mb-1">Kitchen Sink</h2>
+						</FlexgridItem>
+						<FlexgridItem>
+							<Menu icon={<IconSettings />}>
+								<MenuItem
+									label="Profile"
+									icon={<IconProfile />}
+									onClick={() => {
+										setOpen(true);
+									}}
+								/>
+								<MenuItem label="Statistics" icon={<IconChart />} />
+								<MenuItem label="History" icon={<IconHistory />} />
+								<MenuItem label="About" icon={<IconInfo />} />
+							</Menu>
+						</FlexgridItem>
+					</Flexgrid>
+				}
+			>
+				<CommonTemplate />
+			</Card>
+		</>
 	);
 };
diff --git a/examples/with-webpack/src/components/CustomCard.tsx b/examples/with-webpack/src/components/CustomCard.tsx
index 40018700..41925362 100644
--- a/examples/with-webpack/src/components/CustomCard.tsx
+++ b/examples/with-webpack/src/components/CustomCard.tsx
@@ -1,4 +1,4 @@
-import { Card, Menu, MenuItem } from "@versini/ui-components";
+import { Card, Menu, MenuItem, Panel } from "@versini/ui-components";
 import {
 	IconChart,
 	IconHistory,
@@ -7,28 +7,44 @@ import {
 	IconSettings,
 } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
+import { useState } from "react";
 import { CommonTemplate } from "./CommonTemplate";
 
 export const CustomCard = () => {
+	const [open, setOpen] = useState(false);
+	const onOpenChange = () => {
+		setOpen(!open);
+	};
 	return (
-		<Card
-			header={
-				<Flexgrid alignHorizontal="space-between">
-					<FlexgridItem>
-						<h2 className="m-0 mb-1">Kitchen Sink</h2>
-					</FlexgridItem>
-					<FlexgridItem>
-						<Menu icon={<IconSettings />}>
-							<MenuItem label="Profile" icon={<IconProfile />} />
-							<MenuItem label="Statistics" icon={<IconChart />} />
-							<MenuItem label="History" icon={<IconHistory />} />
-							<MenuItem label="About" icon={<IconInfo />} />
-						</Menu>
-					</FlexgridItem>
-				</Flexgrid>
-			}
-		>
-			<CommonTemplate />
-		</Card>
+		<>
+			<Panel title="Profile" open={open} onOpenChange={onOpenChange}>
+				Hello Profile
+			</Panel>
+			<Card
+				header={
+					<Flexgrid alignHorizontal="space-between">
+						<FlexgridItem>
+							<h2 className="m-0 mb-1">Kitchen Sink</h2>
+						</FlexgridItem>
+						<FlexgridItem>
+							<Menu icon={<IconSettings />}>
+								<MenuItem
+									label="Profile"
+									icon={<IconProfile />}
+									onClick={() => {
+										setOpen(true);
+									}}
+								/>
+								<MenuItem label="Statistics" icon={<IconChart />} />
+								<MenuItem label="History" icon={<IconHistory />} />
+								<MenuItem label="About" icon={<IconInfo />} />
+							</Menu>
+						</FlexgridItem>
+					</Flexgrid>
+				}
+			>
+				<CommonTemplate />
+			</Card>
+		</>
 	);
 };

From 811dd82c9c41a2b011c2769df757fcc663606fdb Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 26 Apr 2024 13:10:18 -0400
Subject: [PATCH 3/3] Update Panel.test.tsx

---
 .../src/components/Panel/__tests__/Panel.test.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx b/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx
index d2b204c9..0e8f6e6d 100644
--- a/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx
+++ b/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx
@@ -24,7 +24,7 @@ describe("Panel (exceptions)", () => {
 describe("Panel modifiers", () => {
 	it("should render a responsive panel", async () => {
 		render(<SimplePanel />);
-		const panel = screen.getByRole("dialog");
+		const panel = await screen.findByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			PANEL_CLASSNAME,
@@ -46,7 +46,7 @@ describe("Panel modifiers", () => {
 
 	it("should render a responsive panel with dark borders", async () => {
 		render(<SimplePanel borderMode="dark" />);
-		const panel = screen.getByRole("dialog");
+		const panel = await screen.findByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			PANEL_CLASSNAME,
@@ -68,7 +68,7 @@ describe("Panel modifiers", () => {
 
 	it("should render a responsive messagebox", async () => {
 		render(<SimplePanel kind="messagebox" />);
-		const panel = screen.getByRole("dialog");
+		const panel = await screen.findByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			MESSAGEBOX_CLASSNAME,
@@ -88,7 +88,7 @@ describe("Panel modifiers", () => {
 
 	it("should render a responsive messagebox with dark borders", async () => {
 		render(<SimplePanel kind="messagebox" borderMode="dark" />);
-		const panel = screen.getByRole("dialog");
+		const panel = await screen.findByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			MESSAGEBOX_CLASSNAME,