shapes-ui 0.4.2 → 0.6.0

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

@@ -40,17 +40,15 @@ export const Route = createRootRoute({
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense fallback={<SuspenseFallback className=" h-dvh" />}>
+    <Suspense fallback={<SuspenseFallback className="" />}>
       <ThemeProvider>
         <html lang="en">
           <head>
             <HeadContent />
           </head>
-          <body className="flex h-dvh flex-col">
+          <body className="flex h-dvh flex-col overflow-hidden bg-muted">
             <Header />
-            <main className=" container mx-auto flex flex-1 overflow-hidden 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}

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

@@ -0,0 +1,78 @@
+import { MDXContent } from "@content-collections/mdx/react";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { allDocs } from "content-collections";
+import { useEffect, useState } from "react";
+
+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/docs/*.mdx", {
+  query: "?url",
+  import: "default",
+  eager: true,
+}) as Record<string, string>;
+
+export const Route = createFileRoute("/docs/$slug")({
+  loader: ({ params }) => {
+    const { slug } = params;
+    const doc = allDocs?.find((d) => d.slug === slug);
+
+    if (!doc) {
+      throw notFound();
+    }
+
+    const markdownLink = markdownFiles[`../../content/docs/${doc.slug}.mdx`];
+
+    return {
+      ...doc,
+      markdownLink,
+    };
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: `${loaderData?.title} - Shapes UI`,
+      },
+    ],
+    links: [
+      {
+        rel: "icon",
+        href: "/favicon.ico",
+      },
+    ],
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const doc = Route.useLoaderData();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return (
+    <div className=" flex flex-col gap-6 ">
+      <PageHeader
+        title={doc?.title}
+        subtitle={doc?.description}
+        baseUILink={doc?.referenceLink}
+        markdownLink={doc?.markdownLink}
+      />
+      <div data-docs-content className="container mx-auto max-w-4xl min-w-0 p-6">
+        {isMounted ? (
+          <MDXContent code={doc.mdx} components={{ ...mdxComponents, RenderPreview }} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/routes/docs.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+import { SplitLayout } from "@/components/docs/layout/split-layout";
+
+export const Route = createFileRoute("/docs")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <SplitLayout>
+      <Outlet />
+    </SplitLayout>
+  );
+}

package/src/styles/styles.css

@@ -15,7 +15,7 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(55.553% 0.00006 271.152);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(57.7% 0.245 27.325);

package/src/utils/cli-utils.ts

@@ -13,14 +13,14 @@ export function exitIfCancelled<T>(value: T): Exclude<T, symbol> {
   return value as Exclude<T, symbol>;
 }
 
-export async function getConfig(): Promise<Config | null> {
-  const configPath = path.join(process.cwd(), "shapes.json");
+export async function getConfig(cwd = process.cwd()): Promise<Config | null> {
+  const configPath = path.join(cwd, "shapes.json");
   if (!fs.existsSync(configPath)) return null;
   return configSchema.parse(await fs.readJSON(configPath));
 }
 
-export async function readPackageJson() {
-  const pkgPath = path.join(process.cwd(), "package.json");
+export async function readPackageJson(cwd = process.cwd()) {
+  const pkgPath = path.join(cwd, "package.json");
   if (!(await fs.pathExists(pkgPath))) return null;
   return fs.readJSON(pkgPath);
 }
@@ -45,10 +45,10 @@ export function getMissingDeps(pkg: Record<string, any> | null, deps: string[])
   return deps.filter((dep) => !pkg.dependencies?.[dep] && !pkg.devDependencies?.[dep]);
 }
 
-export async function isViteProject() {
-  const viteConfigTs = path.join(process.cwd(), "vite.config.ts");
-  const viteConfigJs = path.join(process.cwd(), "vite.config.js");
-  const viteConfigMjs = path.join(process.cwd(), "vite.config.mjs");
+export async function isViteProject(cwd = process.cwd()) {
+  const viteConfigTs = path.join(cwd, "vite.config.ts");
+  const viteConfigJs = path.join(cwd, "vite.config.js");
+  const viteConfigMjs = path.join(cwd, "vite.config.mjs");
 
   return (
     (await fs.pathExists(viteConfigTs)) ||

package/src/utils/dependency-installer.ts

@@ -0,0 +1,30 @@
+import { spinner } from "@clack/prompts";
+import { execa } from "execa";
+
+import { getInstallCommand } from "@/utils/package-manager";
+
+type InstallDependenciesOptions = {
+  dev?: boolean;
+  label?: string;
+  successMessage?: string;
+  cwd?: string;
+};
+
+export async function installDependencies(
+  deps: string[],
+  options: InstallDependenciesOptions = {},
+) {
+  if (!deps.length) return;
+
+  const spin = spinner();
+  const label =
+    options.label ?? (options.dev ? "Installing dev dependencies" : "Installing dependencies");
+
+  spin.start(label);
+
+  const cwd = options.cwd ?? process.cwd();
+  const [command, ...args] = await getInstallCommand(deps, options.dev ?? false, cwd);
+  await execa(command, args, { cwd });
+
+  spin.stop(options.successMessage ?? "Dependencies installed");
+}

package/src/utils/package-manager.ts

@@ -1,15 +1,15 @@
 import { detect } from "detect-package-manager";
 
-export async function getPackageManager() {
+export async function getPackageManager(cwd = process.cwd()) {
   try {
-    return await detect();
+    return await detect({ cwd });
   } catch {
     return "npm";
   }
 }
 
-export async function getInstallCommand(deps: string[], dev = false) {
-  const pm = await getPackageManager();
+export async function getInstallCommand(deps: string[], dev = false, cwd = process.cwd()) {
+  const pm = await getPackageManager(cwd);
 
   if (pm === "yarn") {
     return ["yarn", "add", ...(dev ? ["-D"] : []), ...deps];