Added display of examples in doc (#300)

apps/docs/.eslintrc.json

@@ -26,7 +26,8 @@
         "PreviewComponent": true,
         "MigrateGuide": true,
         "PackageInstallation": true,
-        "PropTable": true
+        "PropTable": true,
+        "Example": true
     },
     "overrides": [
         {

apps/docs/.storybook/global.css

@@ -7,13 +7,11 @@
     width: 100%;
     min-height: 100vh;
     padding: 2rem;
-    background: linear-gradient(90deg, var(--stb-container-background) 10px, transparent 1%) 50%,
-    linear-gradient(var(--stb-container-background) 10px, transparent 1%) 50%,
-    var(--stb-container-color);
+    background: var(--stb-container-background);
     background-size: 12px 12px;
 }
 
 [data-theme="dark"] {
-    --sbt-container-background: var(--hd-neutral-900);
-    --sbt-container-color: var(--hd-neutral-800);
+    --stb-container-background: var(--hd-neutral-800);
+    --stb-container-color: var(--hd-neutral-800);
 }

apps/docs/.storybook/main.ts

@@ -1,9 +1,15 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import path from "path";
 
 export default {
     stories: ["../components/**/*.stories.@(ts|tsx)", "../app/ui/**/*.stories.@(ts|tsx)"],
+    env: config => ({
+        ...config,
+        STORYBOOK_MODE: "active"
+    }),
     addons: [
+        "@storybook/addon-a11y",
         "@storybook/addon-links",
         "@storybook/addon-essentials",
         "@storybook/addon-interactions"
@@ -15,6 +21,9 @@ export default {
     docs: {
         autodocs: "tag"
     },
+    features: {
+        experimentalRSC: true
+    },
     webpackFinal: async config => {
         // Configure aliases
         if (config.resolve) {
@@ -23,7 +32,12 @@ export default {
                 new TsconfigPathsPlugin({
                     extensions: config.resolve.extensions
                 })
+
             ];
+            config.resolve.alias = {
+                ...config.resolve.alias,
+                "@": path.resolve(__dirname, "app")
+            };
         }
 
         // Configure SVGR

apps/docs/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
+
 import "../app/globals.css";
 
 // Storybook styles
@@ -22,12 +23,15 @@ const preview: Preview = {
     },
     globalTypes: {
         scheme: {
-            name: "Color scheme",
-            description: "Global color scheme for components",
+            description: "Global theme for components",
             defaultValue: "light",
             toolbar: {
-                icon: "mirror",
-                items: ["light", "dark"],
+                title: "Theme",
+                icon: "circlehollow",
+                items: [
+                    { value: "light", title: "Light" },
+                    { value: "dark", title: "Dark" }
+                ],
                 dynamicTitle: true
             }
         }

apps/docs/app/components/[...slug]/page.tsx

@@ -47,12 +47,12 @@ export default async function ComponentPage({ params }: PageProps) {
         },
         {
             name: "npm",
-            src: links.npm,
+            src: "https://www.npmjs.com/package/@hopper-ui/components",
             label: "View on npm"
         },
         {
             name: "issue",
-            src: links.issue,
+            src: "https://github.com/gsoft-inc/wl-hopper/issues/new",
             label: "Report an issue"
         }
     ];

apps/docs/app/lib/getComponentCode.mock.ts

@@ -0,0 +1,8 @@
+import { highlightCode } from "@/components/highlightCode";
+import { getFormattedCode } from "@/app/lib/getComponentCode.ts";
+
+export async function mockGetComponentCode(code: string) {
+    const mockCode = await getFormattedCode(code);
+
+    return await highlightCode(mockCode);
+}

apps/docs/app/rehype.css

@@ -80,6 +80,7 @@ code[data-theme*=' '] span {
     content: counter(line);
     display: inline-block;
     margin-right: var(--hd-space-2);
+    min-width: var(--hd-space-2);
     text-align: right;
     color: var(--hd-codeblock-line-line-number-color);
 }

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

@@ -0,0 +1,16 @@
+import { getComponentCode } from "@/app/lib/getComponentCode.ts";
+import HighlightCode from "../../../../components/highlightCode/HighlightCode.tsx";
+
+interface ComponentCodeWrapperProps {
+    src: string;
+}
+
+export const ComponentCodeWrapper = async ({ src }: ComponentCodeWrapperProps) => {
+    if (!src) {
+        return null;
+    }
+
+    const code = await getComponentCode(src);
+
+    return <HighlightCode code={code} />;
+};

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

@@ -0,0 +1,51 @@
+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",
+    component: ComponentExample,
+    args: {
+        src: "buttons/docs/button"
+    }
+} satisfies Meta<typeof ComponentExample>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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",
+        preview,
+        code: <MockComponentCodeWrapper code={mockCode} />
+    }
+};
+
+export const Code: Story = {
+    args: {
+        type: "code",
+        code: <MockComponentCodeWrapper code={mockCode} />
+    }
+};
+
+export const Preview: Story = {
+    args: {
+        type: "preview",
+        preview
+    }
+};
+
+export const Open: Story = {
+    args: {
+        type: "code",
+        code: <MockComponentCodeWrapper code={mockCode} />,
+        isOpen: true
+    }
+};

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { memo, type ReactNode } from "react";
+import clsx from "clsx";
+
+import { CodeIcon } from "@/components/icon";
+import { ToggleButton } from "@/components/toggleButton/ToggleButton.tsx";
+import { useToggle } from "@/hooks/useToggle.ts";
+
+import ComponentPreviewWrapper from "./ComponentPreviewWrapper.tsx";
+
+import "./componentExample.css";
+
+interface CommonProps {
+    src: string;
+    className?: string;
+    isOpen?: boolean;
+}
+
+interface CodeProps extends CommonProps {
+    type: "code";
+    code: ReactNode;
+}
+
+interface PreviewProps extends CommonProps {
+    type: "preview";
+    preview: ReactNode;
+}
+
+interface BothProps extends CommonProps {
+    type: "both";
+    code: ReactNode;
+    preview: ReactNode;
+}
+
+export type ComponentExampleProps = CodeProps | PreviewProps | BothProps;
+
+const ComponentExample = memo(({
+    src,
+    type = "both",
+    className,
+    isOpen = false,
+    ...props
+}: ComponentExampleProps) => {
+    const [showCode, toggleShowCode] = useToggle(isOpen);
+
+    const showBothComponent = type === "both";
+    const showPreviewComponent = type === "preview" || showBothComponent;
+    const showCodeComponent = (showBothComponent && showCode) || type === "code";
+
+    if (!src) {
+        return null;
+    }
+
+    const renderToggleButton = () => {
+        if (!showBothComponent) {
+            return null;
+        }
+
+        return (
+            <ToggleButton isSelected={showCode}
+                className="hd-component-preview-wrapper__action"
+                onPress={toggleShowCode}
+            >
+                <CodeIcon />
+                <span>Show code</span>
+            </ToggleButton>
+        );
+    };
+
+    const renderPreviewComponent = () => {
+        if (!showPreviewComponent) {
+            return null;
+        }
+
+        return (
+            <ComponentPreviewWrapper
+                preview={(type === "preview" || type === "both") ? (props as PreviewProps | BothProps).preview : undefined}
+                toggleButton={renderToggleButton()}
+            />
+        );
+    };
+
+    const renderCodeComponent = () => {
+        if (!showCodeComponent) {
+            return null;
+        }
+
+        return (
+            <div className={clsx("hd-component-code", showCodeComponent && "hd-component-code--expanded")}>
+                {(type === "code" || type === "both") ? (props as CodeProps | BothProps).code : undefined}
+            </div>
+        );
+    };
+
+    return (
+        <div data-usage={type}
+            className={clsx("hd-component-example", showCodeComponent && "hd-component-example--expanded", className)}
+        >
+            {renderPreviewComponent()}
+            {renderCodeComponent()}
+        </div>
+    );
+});
+
+export default ComponentExample;

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { useMemo } from "react";
+import dynamic from "next/dynamic";
+
+import ComponentSkeleton from "./ComponentSkeleton.tsx";
+
+import "./componentSkeleton.css";
+
+interface ComponentPreviewProps {
+    src: string;
+}
+
+const ComponentPreview = ({ src }: ComponentPreviewProps) => {
+    const DynamicComponent = useMemo(() => dynamic(() => import(`../../../../../../packages/components/src/${src}.tsx`), {
+        ssr: false,
+        loading: () => <ComponentSkeleton overlay />
+    }), [src]);
+
+    return <DynamicComponent />;
+};
+
+export default ComponentPreview;

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

@@ -0,0 +1,51 @@
+"use client";
+
+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";
+import { StyledSystemProvider } from "@hopper-ui/styled-system";
+
+import "./componentPreviewWrapper.css";
+
+interface ComponentPreviewWrapperProps {
+    preview?: ReactNode;
+    toggleButton?: ReactNode;
+    height?: string;
+}
+
+const ComponentPreviewWrapper = memo(({ preview, toggleButton, height = "13rem" }: ComponentPreviewWrapperProps) => {
+    const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
+
+    const toggleTheme = useCallback(() => {
+        const theme: ColorScheme = colorScheme === "dark"
+            ? "light"
+            : "dark";
+
+        setColorScheme(theme);
+    }, [colorScheme]);
+
+    return (
+        <div
+            className="hd-component-preview-wrapper"
+            data-schema={colorScheme}
+            style={{ height: height }}
+        >
+            <div className="hd-component-preview-wrapper__actions">
+                {toggleButton}
+                <ThemeSwitch className="hd-component-preview-wrapper__action"
+                    onChange={toggleTheme}
+                    colorMode={colorScheme}
+                />
+            </div>
+            <Card className="hd-component-preview-wrapper__card" size="sm">
+                <StyledSystemProvider colorScheme={colorScheme}>
+                    {preview}
+                </StyledSystemProvider>
+            </Card>
+
+        </div>
+    );
+});
+
+export default ComponentPreviewWrapper;

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

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+interface ComponentSkeletonProps {
+    overlay?: boolean;
+}
+
+const PreviewSkeleton = ({ overlay = false }: ComponentSkeletonProps) => <div
+    className={clsx("hd-component-example-skeleton", {
+        "hd-component-example-skeleton__overlay": overlay
+    })}
+/>;
+
+export default PreviewSkeleton;