chore(doc): replace PreviewComponent by ComponentExample

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

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

apps/docs/app/ui/components/heading/heading.css

@@ -1,3 +1,7 @@
+.hd-heading {
+    margin-block-end: var(--hd-space-4);
+}
+
 .hd-heading__title {
     display: flex;
     align-items: baseline;

apps/docs/components/mdx/components.tsx

@@ -23,11 +23,13 @@ import PackageInstallation, {
 
 import type { MigrateGuideProps } from "@/app/ui/components/migrateGuide/MigrateGuide.tsx";
 import type { PropTableProps } from "@/app/ui/components/propTable/PropTable.tsx";
-import type { ComponentExampleWrapperProps } from "@/app/ui/components/componentExample/ComponentExampleWrapper.tsx";
+import type { ComponentExampleProps } from "@/app/ui/components/componentExample/ComponentExample.tsx";
+import { ComponentCodeWrapper } from "@/app/ui/components/componentExample/ComponentCodeWrapper.tsx";
+import ComponentPreview from "@/app/ui/components/componentExample/ComponentPreview.tsx";
 
 const MigrateGuide = dynamic(() => import("@/app/ui/components/migrateGuide/MigrateGuide.tsx"));
 const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.tsx"));
-const ComponentExampleWrapper = dynamic(() => import("@/app/ui/components/componentExample/ComponentExampleWrapper.tsx"));
+const ComponentExample = dynamic(() => import("@/app/ui/components/componentExample/ComponentExample.tsx"));
 
 type HeadingProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
 
@@ -50,11 +52,15 @@ export const components = {
     PackageInstallation: (props: PackageInstallationProps) => {
         return <PackageInstallation {...props} />;
     },
-    PreviewComponent: (props: ComponentExampleWrapperProps) => {
-        return <ComponentExampleWrapper type="preview" {...props} />;
-    },
-    Example: (props: ComponentExampleWrapperProps) => {
-        return <ComponentExampleWrapper {...props} />;
+    Example: (props: ComponentExampleProps) => {
+        const { src } = props;
+
+        return <ComponentExample
+            {...props}
+            type="both"
+            code={<ComponentCodeWrapper src={src} />}
+            preview={<ComponentPreview src={src} />}
+        />;
     },
     MigrateGuide: (props: MigrateGuideProps) => {
         return <MigrateGuide {...props} />;

apps/docs/content/components/actions/button.mdx

@@ -5,14 +5,8 @@ links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/buttons/src/Button.tsx
 ---
 
-<PreviewComponent src="buttons/docs/button/preview"/>
+<Example src="buttons/docs/button/preview" isOpen />
 
-## Usage
-```tsx showLineNumbers
-import { Button } from "@hopper-ui/components";
-
-<Button>save</Button>
-```
 ## Props
 
 <PropTable component="Button" />