shapes-ui 0.5.0 → 0.6.0

package/src/components/docs/markdown/components.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import type { ComponentProps } from "react";
 
+import { slugifyHeading } from "@/lib/docs-headings";
 import { cn } from "@/lib/utils";
 
+import { CopyButton } from "./copy-button";
 import { InstallationBlock } from "./installation-block";
 
 // Lightweight helpers used by the markdown components.
@@ -11,28 +13,6 @@ function getIconForLanguageExtension(_ext: string) {
   return null;
 }
 
-function CopyButton({ value }: { value: string }) {
-  const handleCopy = async () => {
-    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-      /* no-op */
-    }
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      type="button"
-      aria-label="Copy"
-      className="ml-2 inline-flex items-center rounded-md bg-muted/30 px-2 py-1 text-sm"
-    >
-      Copy
-    </button>
-  );
-}
-
 function CodeBlockCommand({
   __npm__,
   __yarn__,
@@ -68,6 +48,113 @@ function CodeBlockCommand({
   );
 }
 
+function UsageCodeBlock({ value, lang = "tsx" }: { value: string; lang?: "tsx" | "typescript" }) {
+  const [highlighted, setHighlighted] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let isActive = true;
+
+    async function highlight() {
+      try {
+        const { codeToHtml } = await import("shiki");
+        const html = await codeToHtml(value, {
+          lang,
+          themes: {
+            light: "github-light",
+            dark: "github-dark",
+          },
+          defaultColor: false,
+          transformers: [
+            {
+              name: "line-numbers",
+              pre(node: any) {
+                node.properties["data-line-numbers"] = "";
+              },
+              line(node: any, line: number) {
+                node.properties.className = ["line"];
+                node.children.unshift({
+                  type: "element",
+                  tagName: "span",
+                  properties: {
+                    className: ["line-number"],
+                  },
+                  children: [{ type: "text", value: String(line) }],
+                });
+              },
+            },
+          ],
+        });
+
+        if (isActive) {
+          setHighlighted(html);
+        }
+      } catch {
+        if (isActive) {
+          setHighlighted(null);
+        }
+      }
+    }
+
+    highlight();
+
+    return () => {
+      isActive = false;
+    };
+  }, [value, lang]);
+
+  const lines = value.trim().split("\n");
+
+  return (
+    <div className="not-prose overflow-hidden  border ">
+      <div className="relative">
+        <CopyButton
+          value={value}
+          ariaLabel="Copy code"
+          className="absolute top-2 right-2 z-10 ml-0"
+        />
+
+        <div className="no-scrollbar max-h-112 min-w-0 overflow-auto px-4 py-3.5 font-mono text-xs">
+          {highlighted ? (
+            <div className="shiki-wrapper" dangerouslySetInnerHTML={{ __html: highlighted }} />
+          ) : (
+            <pre className="min-w-0 overflow-x-auto">
+              {lines.map((line, index) => (
+                <div key={`${index}-${line}`} className="grid grid-cols-[1.75rem_1fr] gap-4">
+                  <span className="text-right text-muted-foreground/50 select-none">
+                    {index + 1}
+                  </span>
+                  <code className="text-code-foreground block font-mono whitespace-pre">
+                    {line || " "}
+                  </code>
+                </div>
+              ))}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UsageSection({
+  from,
+  imports,
+  anatomy,
+}: {
+  from: string;
+  imports: string[];
+  anatomy: string;
+}) {
+  const importCode = `import {\n${imports.map((item) => `  ${item},`).join("\n")}\n} from "${from}"`;
+
+  return (
+    <div className="my-6 space-y-5">
+      <UsageCodeBlock value={importCode} lang="typescript" />
+      <UsageCodeBlock value={anatomy} lang="tsx" />
+    </div>
+  );
+}
+
 type TextProps = ComponentProps<"p">;
 type LinkProps = ComponentProps<"a">;
 type ListProps = ComponentProps<"ul">;
@@ -88,9 +175,34 @@ type TableRowProps = ComponentProps<"tr">;
 type TableHeaderProps = ComponentProps<"th">;
 type TableCellProps = ComponentProps<"td">;
 
+function getNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("");
+  }
+
+  if (React.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+
+  return "";
+}
+
+function getHeadingId(id: string | undefined, children: React.ReactNode) {
+  if (id) {
+    return id;
+  }
+
+  return slugifyHeading(getNodeText(children));
+}
+
 const H1 = ({ className, ...props }: ComponentProps<"h1">) => (
   <h1
-    className={cn("mt-2 scroll-m-28 font-heading text-3xl font-bold tracking-tight", className)}
+    id={getHeadingId(props.id, props.children)}
+    className={cn("mt-2 scroll-m-28 font-heading text-2xl font-bold tracking-tight", className)}
     {...props}
   />
 );
@@ -98,12 +210,7 @@ const H1 = ({ className, ...props }: ComponentProps<"h1">) => (
 const H2 = ({ className, ...props }: ComponentProps<"h2">) => {
   return (
     <h2
-      id={props.children
-        ?.toString()
-        .replace(/ /g, "-")
-        .replace(/'/g, "")
-        .replace(/\?/g, "")
-        .toLowerCase()}
+      id={getHeadingId(props.id, props.children)}
       className={cn(
         "[&+]*:[code]:text-xl mt-10 scroll-m-28 font-heading text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:!mt-0 [&+.steps>h3]:!mt-4 [&+h3]:!mt-6 [&+p]:!mt-4",
         className,
@@ -115,6 +222,7 @@ const H2 = ({ className, ...props }: ComponentProps<"h2">) => {
 
 const H3 = ({ className, ...props }: ComponentProps<"h3">) => (
   <h3
+    id={getHeadingId(props.id, props.children)}
     className={cn(
       "mt-12 scroll-m-28 font-heading text-lg font-medium tracking-tight [&+p]:!mt-4 *:[code]:text-xl",
       className,
@@ -125,6 +233,7 @@ const H3 = ({ className, ...props }: ComponentProps<"h3">) => (
 
 const H4 = ({ className, ...props }: ComponentProps<"h4">) => (
   <h4
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 font-heading text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -132,6 +241,7 @@ const H4 = ({ className, ...props }: ComponentProps<"h4">) => (
 
 const H5 = ({ className, ...props }: ComponentProps<"h5">) => (
   <h5
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -139,6 +249,7 @@ const H5 = ({ className, ...props }: ComponentProps<"h5">) => (
 
 const H6 = ({ className, ...props }: ComponentProps<"h6">) => (
   <h6
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -297,7 +408,9 @@ const Code = ({
 };
 
 export const mdxComponents = {
+  CopyButton,
   InstallationBlock,
+  UsageSection,
   h1: H1,
   h2: H2,
   h3: H3,

package/src/components/docs/markdown/copy-button.tsx

@@ -0,0 +1,41 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function CopyButton({
+  value,
+  className,
+  ariaLabel = "Copy",
+}: {
+  value: string;
+  className?: string;
+  children?: React.ReactNode;
+  ariaLabel?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  };
+
+  return (
+    <Button
+      variant={"ghost"}
+      size={"icon-xs"}
+      onClick={handleCopy}
+      type="button"
+      aria-label={ariaLabel}
+      className={cn(className)}
+    >
+      {copied ? <CheckIcon className="text-success" /> : <CopyIcon />}
+    </Button>
+  );
+}

package/src/components/docs/markdown/installation-block.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { Tabs } from "@base-ui/react/tabs";
-import { TerminalIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { TerminalIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import { CopyButton } from "./copy-button";
+
 interface InstallationBlockProps {
   name: string;
 }
@@ -18,7 +20,6 @@ const PACKAGE_MANAGERS = [
 ];
 
 export function InstallationBlock({ name }: InstallationBlockProps) {
-  const [copied, setCopied] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState("npx");
   const [highlighted, setHighlighted] = React.useState<string | null>(null);
 
@@ -75,18 +76,8 @@ export function InstallationBlock({ name }: InstallationBlockProps) {
     };
   }, [currentCommand]);
 
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(currentCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy!", err);
-    }
-  };
-
   return (
-    <div className="not-prose my-6 w-full overflow-hidden rounded-xl border bg-background">
+    <div className="not-prose my-6 w-full overflow-hidden border bg-background">
       <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
         <div className="flex h-10 items-center justify-between border-b px-3">
           <div className="flex items-center gap-3">
@@ -109,17 +100,7 @@ export function InstallationBlock({ name }: InstallationBlockProps) {
               ))}
             </Tabs.List>
           </div>
-          <button
-            onClick={copyToClipboard}
-            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
-            aria-label="Copy command"
-          >
-            {copied ? (
-              <CheckIcon className="h-3.5 w-3.5 text-success" />
-            ) : (
-              <CopyIcon className="h-3.5 w-3.5" />
-            )}
-          </button>
+          <CopyButton value={currentCommand} ariaLabel="Copy command" />
         </div>
 
         {PACKAGE_MANAGERS.map((pm) => (

package/src/components/docs/markdown/render-preview.tsx

@@ -104,7 +104,7 @@ export function RenderPreview({ name }: { name: string }) {
   const ExampleComponent = example.code;
 
   return (
-    <Tabs.Root className={"my-2 flex flex-col gap-2"}>
+    <Tabs.Root className={"my-2 flex max-w-sm flex-col gap-2 md:max-w-full"}>
       <Tabs.List className={"flex gap-2"}>
         <Tabs.Tab
           value="preview"

package/src/components/ui/button-group.tsx

@@ -43,7 +43,7 @@ function ButtonGroupText({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="button-group-text"
       className={cn(
-        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/ui/scroll-area.tsx

@@ -1,17 +1,26 @@
 "use client";
 
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import type { ReactNode, Ref } from "react";
 
 import { cn } from "@/lib/utils";
 
 function ScrollArea({
   className,
   children,
+  viewportRef,
   ...props
-}: ScrollAreaPrimitive.Root.Props & { children?: React.ReactNode }) {
+}: ScrollAreaPrimitive.Root.Props & {
+  children?: ReactNode;
+  viewportRef?: Ref<HTMLDivElement>;
+}) {
   return (
     <ScrollAreaPrimitive.Root className={cn("relative", className)} {...props}>
-      <ScrollAreaPrimitive.Viewport className="h-full w-full">
+      <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
+        data-scroll-area-viewport
+        className="h-full w-full"
+      >
         <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
       </ScrollAreaPrimitive.Viewport>
       <ScrollAreaScrollbar>

package/src/lib/docs-headings.ts

@@ -0,0 +1,72 @@
+export type TocHeading = {
+  id: string;
+  title: string;
+  level: number;
+};
+
+export function slugifyHeading(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/`/g, "")
+    .replace(/\[(.*?)\]\((.*?)\)/g, "$1")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&[a-z0-9#]+;/gi, "")
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+function sanitizeHeadingTitle(value: string) {
+  return value
+    .replace(/\s+#+\s*$/, "")
+    .replace(/`/g, "")
+    .replace(/\[(.*?)\]\((.*?)\)/g, "$1")
+    .replace(/[*_~]/g, "")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&[a-z0-9#]+;/gi, "")
+    .trim();
+}
+
+export function extractHeadingsFromMarkdown(content: string): TocHeading[] {
+  const headings: TocHeading[] = [];
+  const lines = content.split("\n");
+  let inCodeFence = false;
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+
+    if (line.startsWith("```")) {
+      inCodeFence = !inCodeFence;
+      continue;
+    }
+
+    if (inCodeFence) {
+      continue;
+    }
+
+    const match = line.match(/^(#{1,6})\s+(.+)$/);
+
+    if (!match) {
+      continue;
+    }
+
+    const level = match[1]?.length ?? 0;
+    const title = sanitizeHeadingTitle(match[2] ?? "");
+
+    if (!title) {
+      continue;
+    }
+
+    const id = slugifyHeading(title);
+
+    if (!id) {
+      continue;
+    }
+
+    headings.push({ id, title, level });
+  }
+
+  return headings;
+}

package/src/routeTree.gen.ts

@@ -9,11 +9,18 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as DocsRouteImport } from './routes/docs'
 import { Route as ComponentsRouteImport } from './routes/components'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ComponentsIndexRouteImport } from './routes/components.index'
+import { Route as DocsSlugRouteImport } from './routes/docs.$slug'
 import { Route as ComponentsSlugRouteImport } from './routes/components.$slug'
 
+const DocsRoute = DocsRouteImport.update({
+  id: '/docs',
+  path: '/docs',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ComponentsRoute = ComponentsRouteImport.update({
   id: '/components',
   path: '/components',
@@ -29,6 +36,11 @@ const ComponentsIndexRoute = ComponentsIndexRouteImport.update({
   path: '/',
   getParentRoute: () => ComponentsRoute,
 } as any)
+const DocsSlugRoute = DocsSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => DocsRoute,
+} as any)
 const ComponentsSlugRoute = ComponentsSlugRouteImport.update({
   id: '/$slug',
   path: '/$slug',
@@ -38,36 +50,63 @@ const ComponentsSlugRoute = ComponentsSlugRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/components': typeof ComponentsRouteWithChildren
+  '/docs': typeof DocsRouteWithChildren
   '/components/$slug': typeof ComponentsSlugRoute
+  '/docs/$slug': typeof DocsSlugRoute
   '/components/': typeof ComponentsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/docs': typeof DocsRouteWithChildren
   '/components/$slug': typeof ComponentsSlugRoute
+  '/docs/$slug': typeof DocsSlugRoute
   '/components': typeof ComponentsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/components': typeof ComponentsRouteWithChildren
+  '/docs': typeof DocsRouteWithChildren
   '/components/$slug': typeof ComponentsSlugRoute
+  '/docs/$slug': typeof DocsSlugRoute
   '/components/': typeof ComponentsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/components' | '/components/$slug' | '/components/'
+  fullPaths:
+    | '/'
+    | '/components'
+    | '/docs'
+    | '/components/$slug'
+    | '/docs/$slug'
+    | '/components/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/components/$slug' | '/components'
-  id: '__root__' | '/' | '/components' | '/components/$slug' | '/components/'
+  to: '/' | '/docs' | '/components/$slug' | '/docs/$slug' | '/components'
+  id:
+    | '__root__'
+    | '/'
+    | '/components'
+    | '/docs'
+    | '/components/$slug'
+    | '/docs/$slug'
+    | '/components/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ComponentsRoute: typeof ComponentsRouteWithChildren
+  DocsRoute: typeof DocsRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/docs': {
+      id: '/docs'
+      path: '/docs'
+      fullPath: '/docs'
+      preLoaderRoute: typeof DocsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/components': {
       id: '/components'
       path: '/components'
@@ -89,6 +128,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsIndexRouteImport
       parentRoute: typeof ComponentsRoute
     }
+    '/docs/$slug': {
+      id: '/docs/$slug'
+      path: '/$slug'
+      fullPath: '/docs/$slug'
+      preLoaderRoute: typeof DocsSlugRouteImport
+      parentRoute: typeof DocsRoute
+    }
     '/components/$slug': {
       id: '/components/$slug'
       path: '/$slug'
@@ -113,9 +159,20 @@ const ComponentsRouteWithChildren = ComponentsRoute._addFileChildren(
   ComponentsRouteChildren,
 )
 
+interface DocsRouteChildren {
+  DocsSlugRoute: typeof DocsSlugRoute
+}
+
+const DocsRouteChildren: DocsRouteChildren = {
+  DocsSlugRoute: DocsSlugRoute,
+}
+
+const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ComponentsRoute: ComponentsRouteWithChildren,
+  DocsRoute: DocsRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/src/routes/__root.tsx

@@ -46,9 +46,9 @@ function RootDocument({ children }: { children: React.ReactNode }) {
           <head>
             <HeadContent />
           </head>
-          <body className="flex h-dvh flex-col overflow-hidden">
+          <body className="flex h-dvh flex-col overflow-hidden bg-muted">
             <Header />
-            <main className=" container mx-auto flex min-h-0 flex-1 border-x">{children}</main>
+            <main className=" container mx-auto flex min-h-0 xl:bg-card flex-1 px-4 xl:p-0 ">{children}</main>
             <Footer />
             <TanStackDevtools
               config={{

package/src/routes/components.$slug.tsx

@@ -7,16 +7,27 @@ import { PageHeader } from "@/components/docs/layout/page-header";
 import { mdxComponents } from "@/components/docs/markdown/components";
 import { RenderPreview } from "@/components/docs/markdown/render-preview";
 
+const markdownFiles = import.meta.glob("../../content/components/*.mdx", {
+  query: "?url",
+  import: "default",
+  eager: true,
+}) as Record<string, string>;
+
 export const Route = createFileRoute("/components/$slug")({
   loader: ({ params }) => {
     const { slug } = params;
-    const component = (allComponents as any[]).find((c) => c.slug === slug);
+    const component = allComponents?.find((c) => c.slug === slug);
 
     if (!component) {
       throw notFound();
     }
 
-    return component;
+    const markdownLink = markdownFiles[`../../content/components/${component.slug}.mdx`];
+
+    return {
+      ...component,
+      markdownLink,
+    };
   },
   head: ({ loaderData }) => ({
     meta: [
@@ -51,8 +62,13 @@ function RouteComponent() {
 
   return (
     <div className=" flex flex-col gap-6 ">
-      <PageHeader title={component?.title} subtitle={component?.description} />
-      <div className="container mx-auto max-w-4xl min-w-0 p-6">
+      <PageHeader
+        title={component?.title}
+        subtitle={component?.description}
+        baseUILink={component?.referenceLink}
+        markdownLink={component?.markdownLink}
+      />
+      <div data-docs-content className="container mx-auto max-w-4xl min-w-0 p-6">
         {isMounted ? (
           <MDXContent code={component.mdx} components={{ ...mdxComponents, RenderPreview }} />
         ) : null}