@hypoth-ui/docs-renderer-next 0.1.0

package/components/tokens-used.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+
+interface TokensUsedProps {
+  tokens: string[];
+}
+
+/**
+ * Display tokens used by a component
+ * Links each token to its documentation page
+ */
+export function TokensUsed({ tokens }: TokensUsedProps) {
+  if (!tokens || tokens.length === 0) {
+    return null;
+  }
+
+  // Group tokens by category
+  const tokensByCategory = new Map<string, string[]>();
+
+  for (const token of tokens) {
+    const parts = token.split(".");
+    const category = parts[0];
+    if (!category) continue;
+    if (!tokensByCategory.has(category)) {
+      tokensByCategory.set(category, []);
+    }
+    tokensByCategory.get(category)?.push(token);
+  }
+
+  const categories = Array.from(tokensByCategory.keys()).sort();
+
+  return (
+    <section className="tokens-used">
+      <h2>Design Tokens</h2>
+      <p className="tokens-used-intro">
+        This component uses the following design tokens for theming:
+      </p>
+
+      <div className="tokens-used-categories">
+        {categories.map((category) => (
+          <div key={category} className="tokens-used-category">
+            <h3>
+              <Link href={`/tokens/${category}`}>{formatCategoryName(category)}</Link>
+            </h3>
+            <ul className="tokens-used-list">
+              {(tokensByCategory.get(category) ?? []).map((token) => (
+                <li key={token}>
+                  <code className="token-path">{token}</code>
+                  <code className="token-css-var">var(--{token.replace(/\./g, "-")})</code>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      <style jsx>{`
+        .tokens-used {
+          margin-top: 2rem;
+          padding: 1.5rem;
+          background: var(--color-background-subtle, #f9fafb);
+          border-radius: var(--radius-md, 6px);
+        }
+
+        .tokens-used h2 {
+          margin: 0 0 0.5rem;
+          font-size: 1.25rem;
+        }
+
+        .tokens-used-intro {
+          margin: 0 0 1rem;
+          color: var(--color-text-secondary, #6b7280);
+        }
+
+        .tokens-used-categories {
+          display: grid;
+          gap: 1rem;
+        }
+
+        .tokens-used-category h3 {
+          margin: 0 0 0.5rem;
+          font-size: 1rem;
+          text-transform: capitalize;
+        }
+
+        .tokens-used-category h3 a {
+          color: var(--color-primary, #0066cc);
+          text-decoration: none;
+        }
+
+        .tokens-used-category h3 a:hover {
+          text-decoration: underline;
+        }
+
+        .tokens-used-list {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        .tokens-used-list li {
+          display: flex;
+          gap: 1rem;
+          padding: 0.5rem 0;
+          border-bottom: 1px solid var(--color-border-default, #e5e7eb);
+        }
+
+        .tokens-used-list li:last-child {
+          border-bottom: none;
+        }
+
+        .token-path {
+          font-family: monospace;
+          font-size: 0.875rem;
+          color: var(--color-text-primary, #111827);
+        }
+
+        .token-css-var {
+          font-family: monospace;
+          font-size: 0.875rem;
+          color: var(--color-text-secondary, #6b7280);
+        }
+      `}</style>
+    </section>
+  );
+}
+
+/**
+ * Format category name for display
+ */
+function formatCategoryName(category: string): string {
+  if (category === "z-index") return "Z-Index";
+  return category.charAt(0).toUpperCase() + category.slice(1);
+}

package/components/upgrade/upgrade-prompt.tsx

@@ -0,0 +1,141 @@
+/**
+ * Upgrade Prompt Component
+ *
+ * Displays a call-to-action for users to upgrade their edition tier
+ * to access premium content and features.
+ */
+
+import type { Edition, UpgradeConfig } from "@hypoth-ui/docs-core";
+
+export interface UpgradePromptProps {
+  /** Current user edition */
+  currentEdition: Edition;
+  /** Required edition for access */
+  requiredEdition: Edition;
+  /** Upgrade configuration from edition config */
+  upgradeConfig?: UpgradeConfig;
+  /** Component or feature name being blocked */
+  itemName?: string;
+  /** Component ID (for URL params) */
+  componentId?: string;
+  /** Visual variant */
+  variant?: "inline" | "full-page" | "card";
+}
+
+/**
+ * Default upgrade configuration
+ */
+const DEFAULT_UPGRADE_CONFIG: UpgradeConfig = {
+  url: "/upgrade",
+  ctaText: "Upgrade Now",
+  message: "Upgrade your plan to access this content.",
+};
+
+/**
+ * Edition display names
+ */
+const EDITION_NAMES: Record<Edition, string> = {
+  core: "Core",
+  pro: "Pro",
+  enterprise: "Enterprise",
+};
+
+/**
+ * Edition tier descriptions
+ */
+const EDITION_DESCRIPTIONS: Record<Edition, string> = {
+  core: "Basic components for getting started",
+  pro: "Advanced features and additional components",
+  enterprise: "Full access to all components and features",
+};
+
+export function UpgradePrompt({
+  currentEdition,
+  requiredEdition,
+  upgradeConfig = DEFAULT_UPGRADE_CONFIG,
+  itemName,
+  componentId,
+  variant = "card",
+}: UpgradePromptProps) {
+  const config = { ...DEFAULT_UPGRADE_CONFIG, ...upgradeConfig };
+
+  // Build upgrade URL with optional component parameter
+  const upgradeUrl = componentId
+    ? `${config.url}?component=${componentId}&from=${currentEdition}&to=${requiredEdition}`
+    : `${config.url}?from=${currentEdition}&to=${requiredEdition}`;
+
+  const message = config.message || DEFAULT_UPGRADE_CONFIG.message;
+
+  if (variant === "inline") {
+    return (
+      <span className="upgrade-prompt upgrade-prompt--inline">
+        <span className="upgrade-prompt__icon" aria-hidden="true">
+          🔒
+        </span>
+        <span className="upgrade-prompt__text">
+          {itemName ? `${itemName} requires ` : "Requires "}
+          <strong>{EDITION_NAMES[requiredEdition]}</strong> edition.{" "}
+          <a href={upgradeUrl} className="upgrade-prompt__link">
+            {config.ctaText}
+          </a>
+        </span>
+      </span>
+    );
+  }
+
+  if (variant === "full-page") {
+    return (
+      <div className="upgrade-prompt upgrade-prompt--full-page">
+        <div className="upgrade-prompt__container">
+          <div className="upgrade-prompt__icon" aria-hidden="true">
+            🔒
+          </div>
+          <h1 className="upgrade-prompt__title">
+            {itemName ? `${itemName} requires an upgrade` : "Upgrade Required"}
+          </h1>
+          <p className="upgrade-prompt__message">{message}</p>
+          <div className="upgrade-prompt__tiers">
+            <div className="upgrade-prompt__tier upgrade-prompt__tier--current">
+              <h2>Current: {EDITION_NAMES[currentEdition]}</h2>
+              <p>{EDITION_DESCRIPTIONS[currentEdition]}</p>
+            </div>
+            <div className="upgrade-prompt__arrow" aria-hidden="true">
+              →
+            </div>
+            <div className="upgrade-prompt__tier upgrade-prompt__tier--required">
+              <h2>Required: {EDITION_NAMES[requiredEdition]}</h2>
+              <p>{EDITION_DESCRIPTIONS[requiredEdition]}</p>
+            </div>
+          </div>
+          <a href={upgradeUrl} className="upgrade-prompt__cta">
+            {config.ctaText}
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // Default: card variant
+  return (
+    <div className="upgrade-prompt upgrade-prompt--card">
+      <div className="upgrade-prompt__header">
+        <span className="upgrade-prompt__icon" aria-hidden="true">
+          🔒
+        </span>
+        <span className="upgrade-prompt__badge">{EDITION_NAMES[requiredEdition]} Edition</span>
+      </div>
+      <div className="upgrade-prompt__body">
+        <h3 className="upgrade-prompt__title">
+          {itemName ? `${itemName} requires an upgrade` : "Premium Content"}
+        </h3>
+        <p className="upgrade-prompt__message">{message}</p>
+      </div>
+      <div className="upgrade-prompt__footer">
+        <span className="upgrade-prompt__current">Your plan: {EDITION_NAMES[currentEdition]}</span>
+        <a href={upgradeUrl} className="upgrade-prompt__cta">
+          {config.ctaText}
+        </a>
+      </div>
+    </div>
+  );
+}

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+export * from '@hypoth-ui/docs-core';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface SearchInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Custom class name */
+    className?: string;
+    /** Whether search is enabled */
+    enabled?: boolean;
+}
+declare function SearchInput({ placeholder, className, enabled, }: SearchInputProps): react.JSX.Element | null;
+
+interface LiveExampleProps {
+    /** The live preview content */
+    children: ReactNode;
+    /** Source code to display */
+    code: string;
+    /** Language for syntax highlighting */
+    language?: string;
+    /** Title for the example */
+    title?: string;
+    /** Description of what the example demonstrates */
+    description?: string;
+    /** Whether to show code by default */
+    defaultShowCode?: boolean;
+    /** Available variants/tabs */
+    variants?: Array<{
+        name: string;
+        code: string;
+        preview: ReactNode;
+    }>;
+    /** Custom class name */
+    className?: string;
+}
+declare function LiveExample({ children, code, language, title, description, defaultShowCode, variants, className, }: LiveExampleProps): react.JSX.Element;
+/**
+ * Simple code block without live preview
+ */
+interface CodeBlockProps {
+    /** Source code to display */
+    code: string;
+    /** Language for syntax highlighting */
+    language?: string;
+    /** Filename to display */
+    filename?: string;
+    /** Whether to show line numbers */
+    showLineNumbers?: boolean;
+    /** Lines to highlight */
+    highlightLines?: number[];
+    /** Custom class name */
+    className?: string;
+}
+declare function CodeBlock({ code, language, filename, showLineNumbers, highlightLines, className, }: CodeBlockProps): react.JSX.Element;
+
+declare const COMPONENTS_PATH = "./components";
+declare const STYLES_PATH = "./styles";
+
+export { COMPONENTS_PATH, CodeBlock, type CodeBlockProps, LiveExample, type LiveExampleProps, STYLES_PATH, SearchInput, type SearchInputProps };