shapes-ui 0.5.0 → 0.6.0

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];