@polyxd/react 0.1.0

package/dist/surface.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { SurfaceContext, ScopeContext, StepsContext, useSurface } from "./context.js";
+import { ROOT_SCOPE, resolve, resolveContext, set } from "./data.js";
+import { registry } from "./components/index.js";
+import { Avatar } from "./components/avatar.js";
+/** Renders one Polyxd UI document. */
+export function PolyxdSurface({ document: doc, data: initial, onAction, onDataChange, onDismiss, theme, mode, density, disclosure = "progressive", locale = "en-GB", resolveMedia, components: overrides, className }) {
+    const [data, setData] = useState(() => initial ?? doc.data ?? {});
+    const [portal, setPortal] = useState(null);
+    const byId = useMemo(() => new Map(doc.components.map((c) => [c.id, c])), [doc]);
+    const components = useMemo(() => ({ ...registry, ...overrides }), [overrides]);
+    const setValue = useCallback((pointer, value) => setData((d) => {
+        const next = set(d, pointer, value);
+        onDataChange?.(next);
+        return next;
+    }), [onDataChange]);
+    const dispatch = useCallback((action, scope, source) => {
+        if (!action)
+            return;
+        const { name, context } = action.event;
+        if (name === "ui.dismiss")
+            return onDismiss?.();
+        onAction?.({ name, context: resolveContext(context, data, scope), source });
+    }, [data, onAction, onDismiss]);
+    const value = { doc, byId, data, setValue, dispatch, locale, resolveMedia, portal, components, disclosure };
+    const rootIsDialog = byId.get(doc.root)?.component === "Confirm";
+    const nav = doc.components.find((c) => c.component === "Navigation");
+    return (_jsx(SurfaceContext.Provider, { value: value, children: _jsxs("div", { className: ["pxd-surface", doc.surface.presentation === "panel" ? "pxd-surface-panel" : null, nav ? "pxd-surface-with-nav" : null, className].filter(Boolean).join(" "), "data-pxd-theme": theme, "data-pxd-mode": mode, "data-pxd-density": density, "data-pxd-surface": doc.surface.id, lang: locale, children: [nav && _jsx(Render, { id: nav.id }), _jsxs("div", { className: "pxd-surface-main", children: [!rootIsDialog && _jsx(SurfaceHeader, {}), _jsx(Render, { id: doc.root })] }), _jsx("div", { ref: setPortal, className: "pxd-portal" })] }) }));
+}
+/** Title, and on a record page: where it sits, what state it's in, and what you can do to it. */
+function SurfaceHeader() {
+    const s = useSurface();
+    const { title, subtitle, breadcrumbs, badge, avatar, actions } = s.doc.surface;
+    const text = (v) => String(resolve(v, s.data, ROOT_SCOPE) ?? "");
+    const plain = !subtitle && !breadcrumbs && !badge && !avatar && !actions;
+    if (plain)
+        return _jsx("h1", { className: "pxd-surface-title", children: title });
+    return (_jsxs("header", { className: "pxd-page-header", children: [breadcrumbs && (_jsx("nav", { className: "pxd-breadcrumbs", "aria-label": "Breadcrumb", children: _jsx("ol", { children: breadcrumbs.map((c, i) => (_jsx("li", { children: c.action ? (_jsx("button", { type: "button", className: "pxd-link", onClick: () => s.dispatch(c.action, ROOT_SCOPE, s.doc.surface.id), children: text(c.label) })) : (text(c.label)) }, i))) }) })), _jsxs("div", { className: "pxd-page-header-main", children: [avatar !== undefined && _jsx(Avatar, { value: text(avatar), name: title, size: 48 }), _jsxs("div", { className: "pxd-page-header-text", children: [_jsxs("h1", { className: "pxd-surface-title", children: [title, badge && _jsx("span", { className: `pxd-badge pxd-tone-${badge.tone ?? "neutral"}`, children: text(badge.text) })] }), subtitle && _jsx("p", { className: "pxd-surface-subtitle", children: subtitle })] }), actions && (_jsx("div", { className: "pxd-page-header-actions", children: _jsx(Render, { id: actions }) }))] })] }));
+}
+/** Renders a component by id in the current scope. */
+export function Render({ id, scope }) {
+    const s = useSurface();
+    const current = useContext(ScopeContext);
+    const node = s.byId.get(id);
+    if (!node)
+        return null;
+    const effective = scope ?? current;
+    if (node.visible !== undefined && resolve(node.visible, s.data, effective) === false)
+        return null;
+    const Component = s.components[node.component];
+    const body = Component ? _jsx(Component, { node: node }) : _jsx(UnknownComponent, { node: node });
+    return scope ? _jsx(ScopeContext.Provider, { value: scope, children: body }) : body;
+}
+function UnknownComponent({ node }) {
+    return (_jsxs("div", { className: "pxd-unknown", role: "note", children: ["Unsupported component \u201C", node.component, "\u201D"] }));
+}
+/** Accessibility props from a node's `accessibility` block. */
+export function useA11y(node) {
+    const s = useSurface();
+    const scope = useContext(ScopeContext);
+    const a = node.accessibility;
+    // Which component rendered this element: for annotation, devtools and tests.
+    const ids = { "data-pxd-id": node.id, "data-pxd-component": node.component };
+    if (!a)
+        return ids;
+    const text = (v) => {
+        const r = resolve(v, s.data, scope);
+        return r === undefined ? undefined : String(r);
+    };
+    return {
+        ...ids,
+        "aria-label": a.label !== undefined ? text(a.label) : undefined,
+        "aria-description": a.description !== undefined ? text(a.description) : undefined,
+        "aria-live": a.live,
+        "aria-hidden": a.hidden || undefined,
+    };
+}
+export { StepsContext };
+//# sourceMappingURL=surface.js.map

package/dist/surface.js.map

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@polyxd/react",
+  "version": "0.1.0",
+  "description": "React renderer for Polyxd UI documents: Radix primitives styled by design-system tokens",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./themes/*": "./themes/*"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "themes",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "build:themes": "node scripts/build-themes.ts",
+    "test": "tsc -b && node --test \"test/**/*.test.ts\""
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "dependencies": {
+    "@polyxd/spec": "^0.1.0",
+    "radix-ui": "^1.6.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/visualfart/polyxd.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://polyxd.com",
+  "bugs": "https://github.com/visualfart/polyxd/issues",
+  "publishConfig": {
+    "access": "public"
+  }
+}