boltdocs 1.0.4 → 1.3.1

package/src/client/theme/components/PackageManagerTabs/PackageManagerTabs.tsx

@@ -1,154 +1,154 @@
-import { useState, useCallback } from "react";
-import { Copy, Check } from "lucide-react";
-import { NPM } from "../../icons/npm";
-import { Pnpm } from "../../icons/pnpm";
-import { Bun } from "../../icons/bun";
-import { Deno } from "../../icons/deno";
-
-interface PackageManagerTabsProps {
-  command: string;
-  pkg?: string;
-  className?: string;
-}
-
-type PackageManager = "npm" | "pnpm" | "bun" | "deno";
-
-const MANAGERS: {
-  id: PackageManager;
-  label: string;
-  icon: any;
-}[] = [
-  { id: "npm", label: "npm", icon: NPM },
-  { id: "pnpm", label: "pnpm", icon: Pnpm },
-  { id: "bun", label: "bun", icon: Bun },
-  { id: "deno", label: "deno", icon: Deno },
-];
-
-/**
- * Returns the exact command for a specific package manager based on the action.
- * Maps generic actions like 'install' to their specific permutations (e.g., yarn add, npm install).
- */
-function getCommandForManager(
-  manager: PackageManager,
-  command: string,
-  pkg: string,
-): string {
-  const isInstall =
-    command === "install" || command === "add" || command === "i";
-  const isCreate = command === "create" || command === "init";
-  const isRun = command === "run" || command === "exec";
-
-  // Installation commands
-  if (isInstall) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm install${pkgArgs}`;
-    if (manager === "pnpm") return pkg ? `pnpm add${pkgArgs}` : `pnpm install`;
-    if (manager === "bun") return pkg ? `bun add${pkgArgs}` : `bun install`;
-    if (manager === "deno")
-      return pkg ? `deno install npm:${pkg}` : `deno install`;
-  }
-
-  // Create/Init commands
-  if (isCreate) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm create${pkgArgs}`;
-    if (manager === "pnpm") return `pnpm create${pkgArgs}`;
-    if (manager === "bun") return `bun create${pkgArgs}`;
-    if (manager === "deno") return `deno run -A npm:create-${pkg}`; // Approximation
-  }
-
-  // Run/Exec commands
-  if (isRun) {
-    const pkgArgs = pkg ? ` ${pkg}` : "";
-    if (manager === "npm") return `npm run${pkgArgs}`;
-    if (manager === "pnpm") return `pnpm run${pkgArgs}`;
-    if (manager === "bun") return `bun run${pkgArgs}`;
-    if (manager === "deno") return `deno task ${pkg}`;
-  }
-
-  // Fallback: just prefix the manager
-  const pkgArgs = pkg ? ` ${pkg}` : "";
-  return `${manager} ${command}${pkgArgs}`;
-}
-
-export function PackageManagerTabs({
-  command,
-  pkg = "",
-  className = "",
-}: PackageManagerTabsProps) {
-  const [activeTab, setActiveTab] = useState<PackageManager>("npm");
-  const [copied, setCopied] = useState(false);
-
-  const activeCommand = getCommandForManager(activeTab, command, pkg);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(activeCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = activeCommand;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [activeCommand]);
-
-  return (
-    <div className={`pkg-tabs-wrapper ${className}`}>
-      {/* Tab Headers */}
-      <div className="pkg-tabs-header">
-        {MANAGERS.map((mgr) => {
-          const Icon = mgr.icon;
-          const isActive = activeTab === mgr.id;
-          return (
-            <button
-              key={mgr.id}
-              className={`pkg-tab-btn ${isActive ? "active" : ""}`}
-              onClick={() => setActiveTab(mgr.id)}
-              aria-selected={isActive}
-              role="tab"
-            >
-              <Icon className="pkg-tab-icon" width="16" height="16" />
-              <span>{mgr.label}</span>
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Code Block Content */}
-      <div className="code-block-wrapper pkg-tabs-content">
-        <div className="code-block-header">
-          <span className="code-block-lang">bash</span>
-          <button
-            className={`code-block-copy ${copied ? "copied" : ""}`}
-            onClick={handleCopy}
-            type="button"
-            aria-label="Copy code"
-          >
-            {copied ? (
-              <>
-                <Check size={12} />
-              </>
-            ) : (
-              <>
-                <Copy size={12} />
-              </>
-            )}
-          </button>
-        </div>
-        <pre>
-          <code>
-            <span className="line">{activeCommand}</span>
-          </code>
-        </pre>
-      </div>
-    </div>
-  );
-}
+import { useState, useCallback } from "react";
+import { Copy, Check } from "lucide-react";
+import { NPM } from "../../icons/npm";
+import { Pnpm } from "../../icons/pnpm";
+import { Bun } from "../../icons/bun";
+import { Deno } from "../../icons/deno";
+
+interface PackageManagerTabsProps {
+  command: string;
+  pkg?: string;
+  className?: string;
+}
+
+type PackageManager = "npm" | "pnpm" | "bun" | "deno";
+
+const MANAGERS: {
+  id: PackageManager;
+  label: string;
+  icon: any;
+}[] = [
+  { id: "npm", label: "npm", icon: NPM },
+  { id: "pnpm", label: "pnpm", icon: Pnpm },
+  { id: "bun", label: "bun", icon: Bun },
+  { id: "deno", label: "deno", icon: Deno },
+];
+
+/**
+ * Returns the exact command for a specific package manager based on the action.
+ * Maps generic actions like 'install' to their specific permutations (e.g., yarn add, npm install).
+ */
+function getCommandForManager(
+  manager: PackageManager,
+  command: string,
+  pkg: string,
+): string {
+  const isInstall =
+    command === "install" || command === "add" || command === "i";
+  const isCreate = command === "create" || command === "init";
+  const isRun = command === "run" || command === "exec";
+
+  // Installation commands
+  if (isInstall) {
+    const pkgArgs = pkg ? ` ${pkg}` : "";
+    if (manager === "npm") return `npm install${pkgArgs}`;
+    if (manager === "pnpm") return pkg ? `pnpm add${pkgArgs}` : `pnpm install`;
+    if (manager === "bun") return pkg ? `bun add${pkgArgs}` : `bun install`;
+    if (manager === "deno")
+      return pkg ? `deno install npm:${pkg}` : `deno install`;
+  }
+
+  // Create/Init commands
+  if (isCreate) {
+    const pkgArgs = pkg ? ` ${pkg}` : "";
+    if (manager === "npm") return `npm create${pkgArgs}`;
+    if (manager === "pnpm") return `pnpm create${pkgArgs}`;
+    if (manager === "bun") return `bun create${pkgArgs}`;
+    if (manager === "deno") return `deno run -A npm:create-${pkg}`; // Approximation
+  }
+
+  // Run/Exec commands
+  if (isRun) {
+    const pkgArgs = pkg ? ` ${pkg}` : "";
+    if (manager === "npm") return `npm run${pkgArgs}`;
+    if (manager === "pnpm") return `pnpm run${pkgArgs}`;
+    if (manager === "bun") return `bun run${pkgArgs}`;
+    if (manager === "deno") return `deno task ${pkg}`;
+  }
+
+  // Fallback: just prefix the manager
+  const pkgArgs = pkg ? ` ${pkg}` : "";
+  return `${manager} ${command}${pkgArgs}`;
+}
+
+export function PackageManagerTabs({
+  command,
+  pkg = "",
+  className = "",
+}: PackageManagerTabsProps) {
+  const [activeTab, setActiveTab] = useState<PackageManager>("npm");
+  const [copied, setCopied] = useState(false);
+
+  const activeCommand = getCommandForManager(activeTab, command, pkg);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(activeCommand);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = activeCommand;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [activeCommand]);
+
+  return (
+    <div className={`pkg-tabs-wrapper ${className}`}>
+      {/* Tab Headers */}
+      <div className="pkg-tabs-header">
+        {MANAGERS.map((mgr) => {
+          const Icon = mgr.icon;
+          const isActive = activeTab === mgr.id;
+          return (
+            <button
+              key={mgr.id}
+              className={`pkg-tab-btn ${isActive ? "active" : ""}`}
+              onClick={() => setActiveTab(mgr.id)}
+              aria-selected={isActive}
+              role="tab"
+            >
+              <Icon className="pkg-tab-icon" width="16" height="16" />
+              <span>{mgr.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Code Block Content */}
+      <div className="code-block-wrapper pkg-tabs-content">
+        <div className="code-block-header">
+          <span className="code-block-lang">bash</span>
+          <button
+            className={`code-block-copy ${copied ? "copied" : ""}`}
+            onClick={handleCopy}
+            type="button"
+            aria-label="Copy code"
+          >
+            {copied ? (
+              <>
+                <Check size={12} />
+              </>
+            ) : (
+              <>
+                <Copy size={12} />
+              </>
+            )}
+          </button>
+        </div>
+        <pre>
+          <code>
+            <span className="line">{activeCommand}</span>
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/src/client/theme/components/PackageManagerTabs/index.ts

@@ -1 +1 @@
-export { PackageManagerTabs } from "./PackageManagerTabs";
+export { PackageManagerTabs } from "./PackageManagerTabs";

package/src/client/theme/components/PackageManagerTabs/pkg-tabs.css

@@ -1,64 +1,64 @@
-
-/* ═══════════════════════════════════════════════════════════
-   PACKAGE MANAGER TABS
-   ═══════════════════════════════════════════════════════════ */
-.pkg-tabs-wrapper {
-    margin: 1.5rem 0;
-}
-
-.pkg-tabs-header {
-    display: flex;
-    gap: 0.25rem;
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-    margin-bottom: -0.5rem; /* pull down to meet code block */
-    scrollbar-width: none;
-}
-
-.pkg-tabs-header::-webkit-scrollbar {
-    display: none;
-}
-
-.pkg-tab-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 1rem;
-    background-color: var(--ld-bg-soft);
-    border: 1px solid var(--ld-border-subtle);
-    border-bottom: none;
-    border-radius: var(--ld-radius-md) var(--ld-radius-md) 0 0;
-    color: var(--ld-text-muted);
-    font-family: var(--ld-font-sans);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    opacity: 0.7;
-}
-
-.pkg-tab-btn:hover {
-    color: var(--ld-text-main);
-    background-color: var(--ld-bg-mute);
-    opacity: 1;
-}
-
-.pkg-tab-btn.active {
-    background-color: var(--ld-code-bg);
-    color: var(--ld-text-main);
-    border-color: var(--ld-border-subtle);
-    opacity: 1;
-    position: relative;
-    z-index: 2;
-    margin-bottom: -1px; /* Overlap border */
-}
-
-.pkg-tab-icon {
-    display: inline-block;
-}
-
-/* Ensure tab content sits seamlessly below the tabs */
-.pkg-tabs-content {
-    margin-top: 0 !important;
-    border-top-left-radius: 0 !important;
-}
+
+/* ═══════════════════════════════════════════════════════════
+   PACKAGE MANAGER TABS
+   ═══════════════════════════════════════════════════════════ */
+.pkg-tabs-wrapper {
+    margin: 1.5rem 0;
+}
+
+.pkg-tabs-header {
+    display: flex;
+    gap: 0.25rem;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    margin-bottom: -0.5rem; /* pull down to meet code block */
+    scrollbar-width: none;
+}
+
+.pkg-tabs-header::-webkit-scrollbar {
+    display: none;
+}
+
+.pkg-tab-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--ld-bg-soft);
+    border: 1px solid var(--ld-border-subtle);
+    border-bottom: none;
+    border-radius: var(--ld-radius-md) var(--ld-radius-md) 0 0;
+    color: var(--ld-text-muted);
+    font-family: var(--ld-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    opacity: 0.7;
+}
+
+.pkg-tab-btn:hover {
+    color: var(--ld-text-main);
+    background-color: var(--ld-bg-mute);
+    opacity: 1;
+}
+
+.pkg-tab-btn.active {
+    background-color: var(--ld-code-bg);
+    color: var(--ld-text-main);
+    border-color: var(--ld-border-subtle);
+    opacity: 1;
+    position: relative;
+    z-index: 2;
+    margin-bottom: -1px; /* Overlap border */
+}
+
+.pkg-tab-icon {
+    display: inline-block;
+}
+
+/* Ensure tab content sits seamlessly below the tabs */
+.pkg-tabs-content {
+    margin-top: 0 !important;
+    border-top-left-radius: 0 !important;
+}