@frontmcp/ui 0.5.1 → 0.6.1

package/react/types.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @file types.ts
+ * @description TypeScript types for React wrapper components.
+ *
+ * Re-exports element types from web-components for use with React refs,
+ * and defines React-specific prop interfaces.
+ *
+ * @module @frontmcp/ui/react/types
+ */
+import type { ReactNode } from 'react';
+import type { CardVariant, CardSize, BadgeVariant, BadgeSize } from '../components';
+export type { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from '../web-components';
+/**
+ * React props for Card component
+ */
+export interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle/description */
+    subtitle?: string;
+    /** Header actions content */
+    headerActions?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card size (padding) */
+    size?: CardSize;
+    /** Additional CSS classes */
+    className?: string;
+    /** Card ID */
+    id?: string;
+    /** Clickable card (adds hover effects) */
+    clickable?: boolean;
+    /** Click handler URL */
+    href?: string;
+    /** Card content */
+    children: ReactNode;
+}
+/**
+ * React props for Badge component
+ */
+export interface BadgeProps {
+    /** Badge variant */
+    variant?: BadgeVariant;
+    /** Badge size */
+    size?: BadgeSize;
+    /** Rounded pill style */
+    pill?: boolean;
+    /** Icon before text (ReactNode) */
+    icon?: ReactNode;
+    /** Dot indicator (no text) */
+    dot?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Removable badge */
+    removable?: boolean;
+    /** Badge content */
+    children?: ReactNode;
+}
+/**
+ * React props for Button component
+ */
+export interface ButtonProps {
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+    /** Button size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Icon position */
+    iconPosition?: 'left' | 'right';
+    /** Icon content */
+    icon?: ReactNode;
+    /** Button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Button content */
+    children: ReactNode;
+}
+/**
+ * React props for Alert component
+ */
+export interface AlertProps {
+    /** Alert variant */
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    /** Alert title */
+    title?: string;
+    /** Icon content */
+    icon?: ReactNode;
+    /** Dismissible */
+    dismissible?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Alert content */
+    children: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/react/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"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"}

package/react/utils.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @file utils.ts
+ * @description Utility functions for React wrapper components.
+ *
+ * Provides helpers for converting React children to HTML strings
+ * for SSR compatibility with FrontMCP web components.
+ *
+ * @module @frontmcp/ui/react/utils
+ */
+import type { ReactNode } from 'react';
+/**
+ * Convert React children to an HTML string for SSR.
+ *
+ * - Strings are escaped via escapeHtml()
+ * - Numbers are converted to strings
+ * - ReactNode is rendered via ReactDOMServer.renderToStaticMarkup()
+ * - null/undefined return empty string
+ *
+ * @param children - React children to convert
+ * @returns HTML string representation
+ *
+ * @example
+ * ```tsx
+ * // String children
+ * renderChildrenToString('Hello') // 'Hello' (escaped)
+ *
+ * // React element children
+ * renderChildrenToString(<div>Test</div>) // '<div>Test</div>'
+ *
+ * // Mixed children
+ * renderChildrenToString(['Hello', <span>World</span>])
+ * ```
+ */
+export declare function renderChildrenToString(children: ReactNode): string;
+/**
+ * Check if we're running in a browser environment
+ */
+export declare function isBrowser(): boolean;
+/**
+ * Check if we're running in a Node.js environment
+ */
+export declare function isServer(): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/react/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/react/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAiClE;AAED;;GAEG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAElC"}

package/render/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file render/index.ts
+ * @description React 19 static rendering utilities.
+ *
+ * @module @frontmcp/ui/render
+ */
+export { renderToString, renderToStringSync, isReactAvailable } from './prerender';
+//# sourceMappingURL=index.d.ts.map

package/render/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/render/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}

package/render/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/ui/src/render/index.ts
+var render_exports = {};
+__export(render_exports, {
+  isReactAvailable: () => isReactAvailable,
+  renderToString: () => renderToString,
+  renderToStringSync: () => renderToStringSync
+});
+module.exports = __toCommonJS(render_exports);
+
+// libs/ui/src/render/prerender.ts
+async function renderToString(element) {
+  const { prerender } = await import("react-dom/static");
+  const { prelude } = await prerender(element);
+  const reader = prelude.getReader();
+  const chunks = [];
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (value) chunks.push(value);
+  }
+  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+  const combined = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    combined.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return new TextDecoder().decode(combined);
+}
+function renderToStringSync(element) {
+  const ReactDOMServer = require("react-dom/server");
+  return ReactDOMServer.renderToStaticMarkup(element);
+}
+function isReactAvailable() {
+  try {
+    require("react");
+    require("react-dom/server");
+    return true;
+  } catch {
+    return false;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isReactAvailable,
+  renderToString,
+  renderToStringSync
+});

package/render/prerender.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file prerender.ts
+ * @description React 19 static rendering utilities.
+ *
+ * Provides both async (prerender) and sync (renderToStaticMarkup) methods
+ * for converting React elements to HTML strings.
+ *
+ * @example Async rendering (recommended)
+ * ```typescript
+ * import { renderToString } from '@frontmcp/ui/render';
+ * import { Card } from '@frontmcp/ui/components';
+ *
+ * const html = await renderToString(<Card title="Hello">Content</Card>);
+ * ```
+ *
+ * @example Sync rendering (backwards compatible)
+ * ```typescript
+ * import { renderToStringSync } from '@frontmcp/ui/render';
+ *
+ * const html = renderToStringSync(<Card title="Hello">Content</Card>);
+ * ```
+ *
+ * @module @frontmcp/ui/render
+ */
+import type { ReactElement } from 'react';
+/**
+ * Render a React element to static HTML string using React 19's prerender API.
+ *
+ * This is the recommended async method that:
+ * - Waits for all Suspense boundaries to resolve
+ * - Uses React 19's streaming prerender API
+ * - Returns clean static HTML without hydration markers
+ *
+ * @param element - The React element to render
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderToString(element: ReactElement): Promise<string>;
+/**
+ * Render a React element to static HTML string synchronously.
+ *
+ * This is the sync method for backwards compatibility that:
+ * - Does NOT wait for Suspense boundaries
+ * - Uses React's renderToStaticMarkup
+ * - Returns clean static HTML without hydration markers
+ *
+ * @param element - The React element to render
+ * @returns HTML string
+ */
+export declare function renderToStringSync(element: ReactElement): string;
+/**
+ * Check if React and react-dom are available.
+ * Useful for conditional rendering in environments where React may not be installed.
+ *
+ * @returns true if React and react-dom are available
+ */
+export declare function isReactAvailable(): boolean;
+//# sourceMappingURL=prerender.d.ts.map

package/render/prerender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prerender.d.ts","sourceRoot":"","sources":["../../src/render/prerender.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;GAUG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CA0B3E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAKhE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAQ1C"}

package/renderers/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * React Renderer Module
+ *
+ * Provides the React renderer for template processing.
+ * Other renderers (HTML, MDX) and utilities are available in @frontmcp/uipack.
+ *
+ * @module @frontmcp/ui/renderers
+ *
+ * @example
+ * ```typescript
+ * import { reactRenderer, ReactRenderer } from '@frontmcp/ui/renderers';
+ * import { rendererRegistry } from '@frontmcp/uipack/renderers';
+ *
+ * // Register React renderer
+ * rendererRegistry.register(reactRenderer);
+ * ```
+ */
+export type { RendererType, UIRenderer, ToolUIProps, HydratedToolUIProps, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts, RenderResult, RendererRegistryOptions, DetectionResult, ReactComponentType, WrapperContext, ExtendedToolUIConfig, } from '@frontmcp/uipack/renderers';
+export { ReactRenderer, reactRenderer, buildHydrationScript } from './react.renderer';
+export { ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './react.adapter';
+//# sourceMappingURL=index.d.ts.map

package/renderers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}