shapes-ui 0.5.0 → 0.6.0

package/src/commands/init.ts

@@ -1,7 +1,6 @@
 import path from "node:path";
 
-import { confirm, intro, note, outro, select, text, spinner } from "@clack/prompts";
-import { execa } from "execa";
+import { confirm, intro, note, outro, select, text } from "@clack/prompts";
 import figlet from "figlet";
 import fs from "fs-extra";
 import gradient from "gradient-string";
@@ -15,7 +14,12 @@ import {
   isViteProject,
   readPackageJson,
 } from "@/utils/cli-utils";
-import { getInstallCommand } from "@/utils/package-manager";
+import { installDependencies } from "@/utils/dependency-installer";
+import {
+  type ContrastMode,
+  getDefaultBrandPaletteOptions,
+  writePaletteTokens,
+} from "@/utils/palette";
 import { type Config } from "@/utils/schema";
 
 const BASE_DEPS = [
@@ -28,15 +32,10 @@ const BASE_DEPS = [
 ];
 
 async function installDeps(deps: string[], dev = false) {
-  if (!deps.length) return;
-  const spin = spinner();
-  const label = dev ? "Installing dev dependencies" : "Installing dependencies";
-  spin.start(label);
-
-  const [command, ...args] = await getInstallCommand(deps, dev);
-  await execa(command, args);
-
-  spin.stop(pc.green("Dependencies installed"));
+  await installDependencies(deps, {
+    dev,
+    successMessage: pc.green("Dependencies installed"),
+  });
 }
 
 async function ensureTailwindStyles(cssPath: string) {
@@ -81,7 +80,30 @@ export async function initCommand() {
       options: [
         { label: "Default", value: "default" },
         { label: "Brutalist", value: "brutalist" },
+        { label: "Minimal", value: "minimal" },
+      ],
+    }),
+  );
+
+  const palette = exitIfCancelled(
+    await select({
+      message: "Pick a brand palette",
+      options: getDefaultBrandPaletteOptions().map((name) => ({
+        label: name[0].toUpperCase() + name.slice(1),
+        value: name,
+      })),
+      initialValue: "blue",
+    }),
+  );
+
+  const contrastMode = exitIfCancelled(
+    await select({
+      message: "Choose foreground contrast strategy",
+      options: [
+        { label: "Deterministic shades", value: "deterministic" },
+        { label: "Dynamic contrast", value: "dynamic" },
       ],
+      initialValue: "deterministic",
     }),
   );
 
@@ -121,9 +143,20 @@ export async function initCommand() {
   await installDeps(missingBaseDeps, false);
   await ensureTailwindStyles(cssPath);
 
+  const paletteResult = await writePaletteTokens({
+    cssPath,
+    paletteName: palette as string,
+    neutralPalette: "zinc",
+    contrastMode: contrastMode as ContrastMode,
+  });
+
   const config: Config = {
     $schema: "https://shapes-ui.com/schema.json",
     style: style as Config["style"],
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode,
+    },
     tailwind: { css: cssPath as string, baseColor: "zinc" },
     paths: { ui: uiPath as string, lib: "./src/lib" },
   };

package/src/commands/palette.ts

@@ -0,0 +1,55 @@
+import path from "node:path";
+
+import { intro, note, outro } from "@clack/prompts";
+import fs from "fs-extra";
+import pc from "picocolors";
+
+import { getConfig } from "@/utils/cli-utils";
+import { normalizeContrastMode, writePaletteTokens } from "@/utils/palette";
+
+type PaletteSetOptions = {
+  cssPath?: string;
+  contrastMode?: string;
+  refresh?: boolean;
+};
+
+export async function paletteSetCommand(name: string, options: PaletteSetOptions = {}) {
+  intro(pc.bgCyan(pc.black(" Update Shapes palette ")));
+
+  const config = await getConfig();
+  if (!config) {
+    throw new Error("Could not find shapes.json. Run `shapes-ui init` first.");
+  }
+
+  const contrastMode = normalizeContrastMode(options.contrastMode ?? config.palette?.contrastMode);
+  const cssPath = options.cssPath ?? config.tailwind.css;
+  const neutralPalette = config.tailwind.baseColor;
+
+  const result = await writePaletteTokens({
+    cssPath,
+    paletteName: name,
+    neutralPalette,
+    contrastMode,
+    refresh: options.refresh,
+  });
+
+  const updatedConfig = {
+    ...config,
+    palette: {
+      name: result.paletteName,
+      contrastMode: result.contrastMode,
+    },
+    tailwind: {
+      ...config.tailwind,
+      css: cssPath,
+    },
+  };
+
+  await fs.writeJSON(path.join(process.cwd(), "shapes.json"), updatedConfig, { spaces: 2 });
+
+  note(
+    `palette=${result.paletteName} neutral=${result.neutralPalette} contrast=${result.contrastMode} source=${result.source}`,
+    "Palette updated",
+  );
+  outro(pc.green("Shapes UI palette updated."));
+}

package/src/components/docs/layout/footer.tsx

@@ -2,8 +2,8 @@ import { Badge } from "@/components/ui/badge";
 
 export function Footer() {
   return (
-    <footer className=" h-12 border-t">
-      <div className=" container mx-auto flex h-full items-center border-x px-4">
+    <footer className=" z-10 h-12">
+      <div className=" container mx-auto flex h-full items-center  px-4">
         <Badge variant={"info"}>Alpha</Badge>
       </div>
     </footer>

package/src/components/docs/layout/header.tsx

@@ -1,6 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import {  SunMoonIcon } from "lucide-react";
-
+import { SunMoonIcon } from "lucide-react";
 
 import { DocsButton } from "@/components/docs/docs-button";
 import { useTheme } from "@/components/docs/theme-provider";
@@ -10,16 +9,16 @@ import { MobileMenu } from "./mobile-menu";
 export function Header() {
   const { toggleTheme, theme } = useTheme();
 
-
   return (
-    <header className=" sticky top-0 z-10 h-12 border-b bg-background">
-      <div className=" container mx-auto  flex h-full items-center justify-between border-x px-4">
-        <Link to="/">
+    <header className=" sticky top-0 z-10 h-12">
+      <div className=" container mx-auto  flex h-full items-center justify-between px-4">
+        <Link to="/" className="flex items-center gap-2 font-medium font-heading tracking-wide">
           <img
             src={theme === "dark" ? "/shps_white.svg" : "/shps_black.svg"}
             alt="Shapes UI Logo"
-            className=" size-6"
+            className=" size-5"
           />
+          shapes ui
         </Link>
 
         <div className=" mx-auto hidden gap-4 lg:flex">
@@ -31,9 +30,8 @@ export function Header() {
         <DocsButton onClick={toggleTheme} variant={"ghost"} className={"hidden lg:inline-flex"}>
           <SunMoonIcon className=" size-4" />
         </DocsButton>
-      <MobileMenu  />
+        <MobileMenu />
       </div>
-
     </header>
   );
 }

package/src/components/docs/layout/mobile-menu.tsx

@@ -13,7 +13,6 @@ export function MobileMenu() {
   return <Drawer open={open} onOpenChange={setOpen} >
     <DrawerTrigger className={'flex md:hidden'} render={<Button size={'xs'} variant={'secondary'} >
       <MenuIcon  />
-      Navigation
     </Button>} />
     <DrawerPopup position="bottom">
       <nav className="mt-4 flex flex-col gap-2">

package/src/components/docs/layout/nav-list.tsx

@@ -17,9 +17,9 @@ function NavSection({ title, children }: { title: string; children: React.ReactN
 
 export function NavSidebar({ className, ...props }: ComponentProps<"nav">) {
   return (
-    <nav className={cn("hidden h-full min-h-0 w-64 flex-col p-4 lg:flex", className)} {...props}>
+    <nav className={cn("hidden h-full min-h-0 w-64 flex-col p-4 bg-card lg:flex", className)} {...props}>
       <NavSection title="Components">
-        <ScrollArea className="h-full">
+        <ScrollArea className="h-[98%]">
           <ul>
             {[...allComponents]
               .sort((a, b) => a.title.localeCompare(b.title))

package/src/components/docs/layout/page-header.tsx

@@ -1,33 +1,78 @@
+import { IconMarkdown } from "@tabler/icons-react";
+import { ChevronDownIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
+import BaseUI from "@/assets/base-ui.svg?url";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group";
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/components/ui/menu";
 import { cn } from "@/lib/utils";
 
-import CircuitBoard from "./circuit-board";
-
 export function PageHeader({
   title,
   subtitle,
   children,
+  baseUILink,
+  markdownLink,
   className,
   ...props
 }: ComponentProps<"div"> & {
   title: string;
   subtitle?: string;
+  baseUILink?: string;
+  markdownLink?: string;
 }) {
+  const handleOpenMarkdown = () => {
+    if (!markdownLink) {
+      return;
+    }
+
+    window.open(markdownLink, "_blank", "noopener,noreferrer");
+  };
+
   return (
     <div
       className={cn(
-        "flex h-32 items-center overflow-hidden border-b bg-background md:h-60",
+        "flex items-start justify-between overflow-hidden bg-background max-w-7xl mx-auto p-4 lg:px-0  ",
         className,
       )}
       {...props}
     >
-      <div className=" flex flex-col gap-1 p-6">
-        <h1 className="font-heading text-3xl font-bold xl:text-5xl">{title}</h1>
-        {subtitle && <p className="text-xs text-muted-foreground md:text-sm">{subtitle}</p>}
+      <div className=" flex flex-col">
+        <h1 className="font-heading text-2xl font-bold xl:text-3xl">{title}</h1>
+        {subtitle && <p className="text-xs w-2/3 text-muted-foreground md:text-sm">{subtitle}</p>}
         {children}
       </div>
-      <CircuitBoard className="mask-rtl ml-auto h-full max-w-70 text-foreground/40" />
+
+      <div className="flex flex-col">
+        <ButtonGroup>
+          <ButtonGroupText>
+            View
+        </ButtonGroupText>
+          <ButtonGroupSeparator />
+          <Menu>
+            <MenuTrigger
+              render={
+                <Button variant={"secondary"} size={"icon"}>
+                  <ChevronDownIcon />
+                </Button>
+              }
+            />
+            <MenuPopup align="end">
+              <MenuItem onClick={handleOpenMarkdown} disabled={!markdownLink}>
+                <IconMarkdown />
+                Markdown
+              </MenuItem>
+              {baseUILink && (
+                <MenuItem>
+                  <img className="size-4" alt="Base UI" src={BaseUI} />
+                  Base UI
+                </MenuItem>
+              )}
+            </MenuPopup>
+          </Menu>
+        </ButtonGroup>
+      </div>
     </div>
   );
 }

package/src/components/docs/layout/split-layout.tsx

@@ -1,24 +1,23 @@
-import { ComponentProps } from "react";
+import { ComponentProps, useState } from "react";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 import { NavSidebar } from "./nav-list";
+import { TableOfContent } from "./table-of-content";
 
-export function SplitLayout({
-  children,
-  className,
+export function SplitLayout({ children, className, ...props }: ComponentProps<"div">) {
+  const [contentViewport, setContentViewport] = useState<HTMLDivElement | null>(null);
 
-  ...props
-}: ComponentProps<"div">) {
   return (
-    <div className={cn("flex h-full min-h-0 w-full", className)} {...props}>
+    <div className={cn("flex h-full min-h-0 w-full border", className)} {...props}>
       <NavSidebar />
-      <main className="min-w-0 flex-1">
-        <ScrollArea className="h-full">
-          <div className="min-h-full lg:border-l">{children}</div>
+      <main className="min-w-0 flex-1 bg-card ">
+        <ScrollArea viewportRef={setContentViewport} className="h-full">
+          <div className="min-h-full">{children}</div>
         </ScrollArea>
       </main>
+      <TableOfContent contentViewport={contentViewport} />
     </div>
   );
 }

package/src/components/docs/layout/table-of-content.tsx

@@ -0,0 +1,145 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { allComponents, allDocs } from "content-collections";
+import { useEffect, useMemo, useState } from "react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { TocHeading } from "@/lib/docs-headings";
+import { cn } from "@/lib/utils";
+
+function getRouteContent(pathname: string): TocHeading[] {
+  const [section, slug] = pathname.split("/").filter(Boolean);
+
+  if (!slug) {
+    return [];
+  }
+
+  if (section === "components") {
+    const current = allComponents.find((component) => component.slug === slug) as
+      | { toc?: TocHeading[] }
+      | undefined;
+
+    return current?.toc ?? [];
+  }
+
+  if (section === "docs") {
+    const current = allDocs.find((doc) => doc.slug === slug) as { toc?: TocHeading[] } | undefined;
+
+    return current?.toc ?? [];
+  }
+
+  return [];
+}
+
+type TableOfContentProps = {
+  contentViewport: HTMLDivElement | null;
+};
+
+export const TableOfContent = ({ contentViewport }: TableOfContentProps) => {
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const toc = useMemo(() => getRouteContent(pathname), [pathname]);
+  const [activeId, setActiveId] = useState<string>(toc[0]?.id ?? "");
+
+  useEffect(() => {
+    if (!toc.length) {
+      setActiveId("");
+      return;
+    }
+
+    let frameId = 0;
+    let warmupInterval: number | undefined;
+
+    const computeActiveHeading = () => {
+      const topOffset = contentViewport ? contentViewport.getBoundingClientRect().top + 96 : 120;
+
+      const renderedHeadings = toc
+        .map((heading) => ({
+          id: heading.id,
+          element: document.getElementById(heading.id),
+        }))
+        .filter((item) => item.element);
+
+      if (!renderedHeadings.length) {
+        return;
+      }
+
+      let nextActive = renderedHeadings[0]?.id ?? "";
+
+      for (const item of renderedHeadings) {
+        if ((item.element?.getBoundingClientRect().top ?? Number.POSITIVE_INFINITY) <= topOffset) {
+          nextActive = item.id;
+          continue;
+        }
+
+        break;
+      }
+
+      setActiveId((prev) => (prev === nextActive ? prev : nextActive));
+    };
+
+    const scheduleActiveUpdate = () => {
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+
+      frameId = requestAnimationFrame(() => {
+        computeActiveHeading();
+        frameId = 0;
+      });
+    };
+
+    contentViewport?.addEventListener("scroll", scheduleActiveUpdate, { passive: true });
+    window.addEventListener("resize", scheduleActiveUpdate);
+
+    scheduleActiveUpdate();
+    warmupInterval = window.setInterval(scheduleActiveUpdate, 80);
+    window.setTimeout(() => {
+      if (warmupInterval) {
+        window.clearInterval(warmupInterval);
+      }
+    }, 1500);
+
+    return () => {
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+
+      if (warmupInterval) {
+        window.clearInterval(warmupInterval);
+      }
+
+      contentViewport?.removeEventListener("scroll", scheduleActiveUpdate);
+      window.removeEventListener("resize", scheduleActiveUpdate);
+    };
+  }, [contentViewport, pathname, toc]);
+
+  return (
+    <aside className="hidden h-full min-h-0 w-64 flex-col p-4 xl:flex">
+      <h4 className="pl-2 font-heading text-xs font-medium text-muted-foreground">On this page</h4>
+      <ScrollArea className="mt-2 h-[98%]">
+        <ul className="space-y-1">
+          {toc.map((heading) => {
+            const isActive = activeId === heading.id;
+
+            return (
+              <li key={heading.id}>
+                <Link
+                  to="."
+                  hash={heading.id}
+                  style={{ paddingLeft: `${(heading.level - 1) * 10}px` }}
+                  className={cn(
+                    "block truncate rounded px-2 py-1.5 text-xs transition-colors",
+                    isActive
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                  )}
+                >
+                  {heading.title}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </ScrollArea>
+    </aside>
+  );
+};