@contentbit/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 contentbit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @contentbit/react
+
+React renderer for [Content Blocks](https://contentbit.dev) documents, with headless accessible defaults for every generic block.
+
+```tsx
+import { ContentBlocks } from '@contentbit/react'
+
+<ContentBlocks
+  document={result.document}
+  renderMarkdown={(md) => <Markdown source={md} />}
+/>
+```
+
+Pass `components` to override any block. A styled Tailwind pack is available through the shadcn registry: `pnpm dlx shadcn@latest add @contentbit/generic-pack`.
+
+Docs: [contentbit.dev/docs](https://contentbit.dev/docs)

package/dist/components.d.ts

@@ -0,0 +1,3 @@
+import type { BlockComponent } from './content-blocks.js';
+export declare const defaultComponents: Record<string, BlockComponent>;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AA+JzD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAS5D,CAAA"}

package/dist/components.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { splitProsCons } from '@contentbit/blocks';
+import { isValidatedBlock } from '@contentbit/core';
+import { useId, useState } from 'react';
+function childMarkdown(node) {
+    return isValidatedBlock(node) ? node.data.markdown : node.body;
+}
+const Callout = ({ node, ctx }) => {
+    const data = node.data;
+    const type = String(node.props.type ?? 'note');
+    const title = node.props.title;
+    return (_jsxs("aside", { className: `cb-callout cb-callout-${type}`, children: [title ? _jsx("div", { className: "cb-callout-title", children: title }) : null, ctx.renderMarkdown(data.markdown)] }));
+};
+const Steps = ({ node }) => {
+    const data = node.data;
+    return (_jsx("ol", { className: "cb-steps", children: data.items.map((item, i) => (_jsx("li", { children: item.text }, i))) }));
+};
+const KeyMetrics = ({ node }) => {
+    const data = node.data;
+    return (_jsx("div", { className: "cb-key-metrics", children: data.rows.map((row, i) => (_jsxs("div", { className: "cb-key-metrics-item", children: [_jsx("span", { className: "cb-key-metrics-value", children: row.value }), _jsx("span", { className: "cb-key-metrics-label", children: row.label })] }, i))) }));
+};
+const QuickRef = ({ node }) => {
+    const data = node.data;
+    return (_jsx("dl", { className: "cb-quick-ref", children: data.rows.map((row, i) => (_jsxs("div", { className: "cb-quick-ref-row", children: [_jsx("dt", { children: row.key }), _jsx("dd", { children: row.value })] }, i))) }));
+};
+const Comparison = ({ node }) => {
+    const data = node.data;
+    return (_jsxs("table", { className: "cb-comparison", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col" }), _jsx("th", { scope: "col", children: String(node.props.left) }), _jsx("th", { scope: "col", children: String(node.props.right) })] }) }), _jsx("tbody", { children: data.rows.map((row, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), _jsx("td", { children: row.left }), _jsx("td", { children: row.right })] }, i))) })] }));
+};
+const ProsCons = ({ node }) => {
+    const { pros, cons } = splitProsCons(node.data);
+    return (_jsxs("div", { className: "cb-pros-cons", children: [_jsxs("div", { className: "cb-pros-cons-pros", children: [_jsx("div", { className: "cb-pros-cons-heading", children: "Pros" }), _jsx("ul", { children: pros.map((p, i) => (_jsx("li", { children: p }, i))) })] }), _jsxs("div", { className: "cb-pros-cons-cons", children: [_jsx("div", { className: "cb-pros-cons-heading", children: "Cons" }), _jsx("ul", { children: cons.map((c, i) => (_jsx("li", { children: c }, i))) })] })] }));
+};
+const Tabs = ({ node, ctx }) => {
+    const data = node.data;
+    const [active, setActive] = useState(0);
+    const safeActive = active < data.blocks.length ? active : 0;
+    const id = useId();
+    return (_jsxs("div", { className: "cb-tabs", children: [_jsx("div", { role: "tablist", className: "cb-tab-bar", children: data.blocks.map((tab, i) => (_jsx("button", { type: "button", role: "tab", id: `${id}-tab-${i}`, "aria-selected": i === safeActive, "aria-controls": `${id}-panel-${i}`, className: "cb-tab-button", onClick: () => setActive(i), children: String(tab.props.title) }, i))) }), data.blocks.map((tab, i) => i === safeActive ? (_jsx("div", { role: "tabpanel", id: `${id}-panel-${i}`, "aria-labelledby": `${id}-tab-${i}`, className: "cb-tab-panel", children: ctx.renderMarkdown(childMarkdown(tab)) }, i)) : null)] }));
+};
+const Faq = ({ node, ctx }) => {
+    const data = node.data;
+    return (_jsx("div", { className: "cb-faq", children: data.blocks.map((item, i) => (_jsxs("details", { className: "cb-faq-item", children: [_jsx("summary", { children: String(item.props.question) }), ctx.renderMarkdown(childMarkdown(item))] }, i))) }));
+};
+export const defaultComponents = {
+    callout: Callout,
+    steps: Steps,
+    'key-metrics': KeyMetrics,
+    'quick-ref': QuickRef,
+    comparison: Comparison,
+    'pros-cons': ProsCons,
+    tabs: Tabs,
+    faq: Faq,
+};

package/dist/content-blocks.d.ts

@@ -0,0 +1,25 @@
+import type { ContentNode, DocumentNode, ValidatedBlockNode } from '@contentbit/core';
+import type { ComponentType, ReactNode } from 'react';
+export interface BlockRenderContext {
+    renderMarkdown(md: string): ReactNode;
+    renderNodes(nodes: ContentNode[]): ReactNode;
+}
+export interface BlockComponentProps<TData = unknown> {
+    node: ValidatedBlockNode<TData>;
+    ctx: BlockRenderContext;
+}
+export type BlockComponent = ComponentType<BlockComponentProps>;
+export interface ContentBlocksProps {
+    document: DocumentNode;
+    /** Per-block components; merged over the headless defaults. */
+    components?: Record<string, BlockComponent>;
+    /** Host markdown renderer for prose segments. Default: paragraphs of plain text. */
+    renderMarkdown?: (md: string) => ReactNode;
+    /** Rendered for blocks that failed validation. Default: escaped body paragraphs. */
+    fallback?: ComponentType<{
+        name: string;
+        body: string;
+    }>;
+}
+export declare function ContentBlocks(props: ContentBlocksProps): ReactNode;
+//# sourceMappingURL=content-blocks.d.ts.map

package/dist/content-blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-blocks.d.ts","sourceRoot":"","sources":["../src/content-blocks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOrD,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,CAAA;CAC7C;AAED,MAAM,WAAW,mBAAmB,CAAC,KAAK,GAAG,OAAO;IAClD,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAC/B,GAAG,EAAE,kBAAkB,CAAA;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAA;AAE/D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,YAAY,CAAA;IACtB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IAC3C,oFAAoF;IACpF,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAA;IAC1C,oFAAoF;IACpF,QAAQ,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACzD;AAaD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAoBlE"}

package/dist/content-blocks.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidatedBlock } from '@contentbit/core';
+import { Fragment } from 'react';
+import { defaultComponents } from './components.js';
+function DefaultMarkdown({ md }) {
+    return md
+        .trim()
+        .split(/\n{2,}/)
+        .map((p, i) => _jsx("p", { children: p }, i));
+}
+function DefaultFallback({ body }) {
+    return _jsx(DefaultMarkdown, { md: body });
+}
+export function ContentBlocks(props) {
+    const components = { ...defaultComponents, ...props.components };
+    const renderMarkdown = props.renderMarkdown ?? ((md) => _jsx(DefaultMarkdown, { md: md }));
+    const Fallback = props.fallback ?? DefaultFallback;
+    const ctx = {
+        renderMarkdown,
+        renderNodes(nodes) {
+            return nodes.map((node, i) => {
+                if (node.type === 'markdown')
+                    return _jsx(Fragment, { children: renderMarkdown(node.value) }, i);
+                const Component = components[node.name];
+                if (Component && isValidatedBlock(node)) {
+                    return _jsx(Component, { node: node, ctx: ctx }, i);
+                }
+                return _jsx(Fallback, { name: node.name, body: node.body }, i);
+            });
+        },
+    };
+    return _jsx(_Fragment, { children: ctx.renderNodes(props.document.children) });
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ContentBlocks, type BlockComponent, type BlockComponentProps, type BlockRenderContext, type ContentBlocksProps, } from './content-blocks.js';
+export { defaultComponents } from './components.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ContentBlocks, } from './content-blocks.js';
+export { defaultComponents } from './components.js';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@contentbit/react",
+  "version": "0.1.0",
+  "description": "React renderer for Content Blocks documents, with headless accessible defaults.",
+  "keywords": [
+    "content-blocks",
+    "headless",
+    "markdown",
+    "react",
+    "renderer"
+  ],
+  "homepage": "https://contentbit.dev",
+  "bugs": "https://github.com/agonist/contentbit/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agonist/contentbit.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@contentbit/blocks": "0.1.0",
+    "@contentbit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "happy-dom": "^20.3.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}