chore(doc): fix lint error and optimize Component

apps/docs/app/ui/components/componentExample/ComponentExample.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { mockGetComponentCode } from "@/app/lib/getComponentCode.mock.ts";
 import ComponentExample from "./ComponentExample.tsx";
+import HighlightCode from "../../../../components/highlightCode/HighlightCode.tsx";
+import ComponentPreview from "@/app/ui/components/componentExample/ComponentPreview.tsx";
 
 const meta = {
     title: "components/ComponentExample",
@@ -11,38 +13,36 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const code = await mockGetComponentCode("import { Button } from \"@headless/button\"");
+const mockCode = await mockGetComponentCode("import { Button } from \"@headless/button\"");
+const preview = <ComponentPreview src="buttons/docs/button/preview" />;
+const MockComponentCodeWrapper = ({ code }: { code: string }) => <HighlightCode code={code} />;
 
 export const Default: Story = {
     args: {
         type: "both",
-        src: "buttons/docs/preview",
-        preview: <button type="button">click me</button>,
-        code
+        preview,
+        code: <MockComponentCodeWrapper code={mockCode} />
     }
 };
 
 export const Code: Story = {
     args: {
-        src: "buttons/docs/preview",
         type: "code",
-        code
+        code: <MockComponentCodeWrapper code={mockCode} />
     }
 };
 
 export const Preview: Story = {
     args: {
         type: "preview",
-        src: "buttons/docs/preview",
-        preview: <button type="button">click me</button>
+        preview
     }
 };
 
 export const Open: Story = {
     args: {
         type: "code",
-        src: "buttons/docs/preview",
-        code,
+        code: <MockComponentCodeWrapper code={mockCode} />,
         isOpen: true
     }
 };

apps/docs/app/ui/components/componentExample/ComponentExample.tsx

@@ -11,7 +11,6 @@ import ComponentPreviewWrapper from "./ComponentPreviewWrapper.tsx";
 import "./componentExample.css";
 
 interface CommonProps {
-    src: string;
     className?: string;
     isOpen?: boolean;
 }
@@ -35,7 +34,6 @@ interface BothProps extends CommonProps {
 export type ComponentExampleProps = CodeProps | PreviewProps | BothProps;
 
 const ComponentExample = memo(({
-    src,
     type = "both",
     className,
     isOpen = false,
@@ -49,10 +47,6 @@ const ComponentExample = memo(({
 
     const toggleShowCode = useCallback(() => setShowCode(prevShowCode => !prevShowCode), []);
 
-    if (!src) {
-        return null;
-    }
-
     const renderToggleButton = () => {
         if (!showBothComponent) {
             return null;

apps/docs/app/ui/components/componentExample/ComponentExampleWrapper.tsx

@@ -0,0 +1,30 @@
+import { ComponentCodeWrapper } from "@/app/ui/components/componentExample/ComponentCodeWrapper.tsx";
+import ComponentPreview from "@/app/ui/components/componentExample/ComponentPreview.tsx";
+import PreviewComponent from "@/app/ui/components/previewComponent/PreviewComponent.tsx";
+import ComponentExample from "@/app/ui/components/componentExample/ComponentExample.tsx";
+
+export interface ComponentExampleWrapperProps {
+    src: string;
+    type?: "preview" | "example";
+}
+
+const ComponentExampleWrapper = ({ src, type = "example" }: ComponentExampleWrapperProps) => {
+    if (!src) {
+        return null;
+    }
+
+    if (type === "preview") {
+        return <PreviewComponent
+            code={<ComponentCodeWrapper src={src} />}
+            preview={<ComponentPreview src={src} />}
+        />;
+    }
+
+    return <ComponentExample
+        type="both"
+        code={<ComponentCodeWrapper src={src} />}
+        preview={<ComponentPreview src={src} />}
+    />;
+};
+
+export default ComponentExampleWrapper;

apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, memo, type ReactNode, useCallback } from "react";
 import Card from "@/components/card/Card.tsx";
 import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch.tsx";
 import type { ColorScheme } from "@/context/theme/ThemeProvider.tsx";
@@ -9,21 +9,21 @@ import { StyledSystemProvider } from "@hopper-ui/styled-system";
 import "./componentPreviewWrapper.css";
 
 interface ComponentPreviewWrapperProps {
-    preview?: React.ReactNode;
-    toggleButton?: React.ReactNode;
+    preview?: ReactNode;
+    toggleButton?: ReactNode;
     height?: string;
 }
 
-const ComponentPreviewWrapper = ({ preview, toggleButton, height = "13rem" }: ComponentPreviewWrapperProps) => {
+const ComponentPreviewWrapper = memo(({ preview, toggleButton, height = "13rem" }: ComponentPreviewWrapperProps) => {
     const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
 
-    const toggleTheme = () => {
+    const toggleTheme = useCallback(() => {
         const theme: ColorScheme = colorScheme === "dark"
             ? "light"
             : "dark";
 
         setColorScheme(theme);
-    };
+    }, [colorScheme]);
 
     return (
         <div
@@ -46,6 +46,6 @@ const ComponentPreviewWrapper = ({ preview, toggleButton, height = "13rem" }: Co
 
         </div>
     );
-};
+});
 
 export default ComponentPreviewWrapper;

apps/docs/app/ui/components/previewComponent/PreviewComponent.tsx

@@ -6,7 +6,6 @@ import ComponentExample from "@/app/ui/components/componentExample/ComponentExam
 import "./previewComponent.css";
 
 export interface PreviewComponentProps {
-    src: string;
     preview?: React.ReactNode;
     code?: React.ReactNode;
 }
@@ -17,17 +16,12 @@ const tabsConfig = [
     // { category: "playground", title: "Playground" }
 ];
 
-const PreviewComponent = async ({ src, preview, code }: PreviewComponentProps) => {
+const PreviewComponent = async ({ preview, code }: PreviewComponentProps) => {
     const PreviewComponentExample = useMemo(() => <ComponentExample type="preview"
-        src={src}
         preview={preview}
         className="hd-preview-component__content"
-    />, [src, preview]);
-    const CodeComponentExample = useMemo(() => <ComponentExample type="code" src={src} code={code} />, [src, code]);
-
-    if (!src) {
-        return null;
-    }
+    />, [preview]);
+    const CodeComponentExample = useMemo(() => <ComponentExample type="code" code={code} />, [code]);
 
     return (
         <div className="hd-preview-component">

apps/docs/components/mdx/components.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, DetailedHTMLProps } from "react";
 import dynamic from "next/dynamic";
 
 import Card from "@/components/card/Card.tsx";
@@ -19,20 +19,16 @@ import Footnote from "@/components/footnote/Footnote.tsx";
 import PackageInstallation, {
     type PackageInstallationProps
 } from "@/components/packageInstallation/PackageInstallation.tsx";
-import { ComponentCodeWrapper } from "@/app/ui/components/componentExample/ComponentCodeWrapper.tsx";
-import ComponentPreview from "@/app/ui/components/componentExample/ComponentPreview.tsx";
 
-import type { PreviewComponentProps } from "@/app/ui/components/previewComponent/PreviewComponent.tsx";
 import type { MigrateGuideProps } from "@/app/ui/components/migrateGuide/MigrateGuide.tsx";
 import type { PropTableProps } from "@/app/ui/components/propTable/PropTable.tsx";
-import type { ComponentExampleProps } from "@/app/ui/components/componentExample/ComponentExample.tsx";
+import type { ComponentExampleWrapperProps } from "@/app/ui/components/componentExample/ComponentExampleWrapper.tsx";
 
-type HeadingProps = React.DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
-
-const PreviewComponent = dynamic(() => import("@/app/ui/components/previewComponent/PreviewComponent.tsx"));
 const MigrateGuide = dynamic(() => import("@/app/ui/components/migrateGuide/MigrateGuide.tsx"));
 const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.tsx"));
-const ComponentExample = dynamic(() => import("@/app/ui/components/componentExample/ComponentExample.tsx"));
+const ComponentExampleWrapper = dynamic(() => import("@/app/ui/components/componentExample/ComponentExampleWrapper.tsx"));
+
+type HeadingProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
 
 export const components = {
     Card,
@@ -52,18 +48,11 @@ export const components = {
     PackageInstallation: (props: PackageInstallationProps) => {
         return <PackageInstallation {...props} />;
     },
-    PreviewComponent: (props: PreviewComponentProps) => {
-        return <PreviewComponent {...props}
-            code={<ComponentCodeWrapper src={props.src} />}
-            preview={<ComponentPreview src={props.src} />}
-        />;
+    PreviewComponent: (props: ComponentExampleWrapperProps) => {
+        return <ComponentExampleWrapper type="preview" {...props} />;
     },
-    Example: (props: ComponentExampleProps) => {
-        return <ComponentExample {...props}
-            type="both"
-            code={<ComponentCodeWrapper src={props.src} />}
-            preview={<ComponentPreview src={props.src} />}
-        />;
+    Example: (props: ComponentExampleWrapperProps) => {
+        return <ComponentExampleWrapper {...props} />;
     },
     MigrateGuide: (props: MigrateGuideProps) => {
         return <MigrateGuide {...props} />;