schema-components 1.1.0 → 1.3.0

package/dist/themes/mui.mjs

@@ -0,0 +1,227 @@
+import { isObject } from "../core/guards.mjs";
+import { headlessResolver, toReactNode } from "../react/headless.mjs";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/themes/mui.tsx
+function ariaRequired(tree) {
+	return { required: tree.isOptional === false };
+}
+function renderStringInput(props) {
+	const strValue = typeof props.value === "string" ? props.value : "";
+	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
+		variant: "body2",
+		children: strValue || "—"
+	});
+	return /* @__PURE__ */ jsx(MuiTextField, {
+		label,
+		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+		value: props.writeOnly ? "" : strValue,
+		onChange: (e) => {
+			props.onChange(e.target.value);
+		},
+		fullWidth: true,
+		size: "small",
+		variant: "outlined",
+		inputProps: {
+			minLength: props.constraints.minLength,
+			maxLength: props.constraints.maxLength
+		},
+		...ariaRequired(props.tree)
+	});
+}
+function renderNumberInput(props) {
+	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	if (props.readOnly) {
+		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(MuiTypography, {
+			variant: "body2",
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(MuiTypography, {
+			variant: "body2",
+			children: props.value.toLocaleString()
+		});
+	}
+	return /* @__PURE__ */ jsx(MuiTextField, {
+		label,
+		type: "number",
+		value: typeof props.value === "number" ? props.value : "",
+		onChange: (e) => {
+			props.onChange(Number(e.target.value));
+		},
+		fullWidth: true,
+		size: "small",
+		variant: "outlined",
+		inputProps: {
+			min: props.constraints.minimum,
+			max: props.constraints.maximum
+		},
+		...ariaRequired(props.tree)
+	});
+}
+function renderBooleanInput(props) {
+	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	if (props.readOnly) {
+		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(MuiTypography, {
+			variant: "body2",
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(MuiTypography, {
+			variant: "body2",
+			children: props.value ? "Yes" : "No"
+		});
+	}
+	return /* @__PURE__ */ jsx(MuiFormControlLabel, {
+		control: /* @__PURE__ */ jsx(MuiCheckbox, {
+			checked: props.value === true,
+			onChange: (e) => {
+				props.onChange(e.target.checked);
+			}
+		}),
+		label
+	});
+}
+function renderEnumInput(props) {
+	const enumValue = typeof props.value === "string" ? props.value : "";
+	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
+		variant: "body2",
+		children: enumValue || "—"
+	});
+	return /* @__PURE__ */ jsxs(MuiTextField, {
+		select: true,
+		label,
+		value: props.writeOnly ? "" : enumValue,
+		onChange: (e) => {
+			props.onChange(e.target.value);
+		},
+		fullWidth: true,
+		size: "small",
+		variant: "outlined",
+		...ariaRequired(props.tree),
+		children: [/* @__PURE__ */ jsxs(MuiMenuItem, {
+			value: "",
+			children: ["Select", "…"]
+		}), (props.enumValues ?? []).map((v) => /* @__PURE__ */ jsx(MuiMenuItem, {
+			value: v,
+			children: v
+		}, v))]
+	});
+}
+function renderObjectContainer(props) {
+	const fields = props.fields;
+	if (fields === void 0) return null;
+	const obj = isObject(props.value) ? props.value : {};
+	return /* @__PURE__ */ jsxs(MuiBox, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		},
+		children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx(MuiTypography, {
+			variant: "h6",
+			children: props.meta.description
+		}), Object.entries(fields).map(([key, field]) => {
+			const childValue = obj[key];
+			const childOnChange = (v) => {
+				const updated = {};
+				for (const [k, val] of Object.entries(obj)) updated[k] = val;
+				updated[key] = v;
+				props.onChange(updated);
+			};
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(field, childValue, childOnChange)) }, key);
+		})]
+	});
+}
+function renderArrayContainer(props) {
+	const arr = Array.isArray(props.value) ? props.value : [];
+	const element = props.element;
+	if (element === void 0) return null;
+	return /* @__PURE__ */ jsx(MuiBox, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		children: arr.map((item, i) => {
+			const childOnChange = (v) => {
+				const next = arr.slice();
+				next[i] = v;
+				props.onChange(next);
+			};
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange)) }, String(i));
+		})
+	});
+}
+/**
+* MUI components are not bundled with this adapter.
+* Instead, the resolver uses thin wrapper components that delegate to
+* the consuming project's MUI installation.
+*
+* This avoids a hard dependency on @mui/material while providing
+* type-safe rendering. If MUI is not installed, these wrappers
+* render basic HTML elements as fallback.
+*
+* To use real MUI components, wrap your app with MuiProvider:
+*   import { MuiProvider } from "schema-components/themes/mui";
+*   import { TextField, Checkbox, ... } from "@mui/material";
+*
+*   <MuiProvider
+*     TextField={TextField}
+*     Checkbox={Checkbox}
+*     ...
+*   >
+*     <SchemaComponent ... />
+*   </MuiProvider>
+*/
+function stripChildren(props) {
+	const rest = { ...props };
+	if ("children" in rest) delete rest.children;
+	return rest;
+}
+let MuiTextField = (props) => /* @__PURE__ */ jsx("input", { ...stripChildren(props) });
+let MuiCheckbox = (props) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	...stripChildren(props)
+});
+let MuiTypography = (props) => /* @__PURE__ */ jsx("span", { ...props });
+let MuiBox = (props) => /* @__PURE__ */ jsx("div", { ...props });
+let MuiMenuItem = (props) => /* @__PURE__ */ jsx("option", { ...props });
+let MuiFormControlLabel = (props) => {
+	const { control, label, ...rest } = props;
+	return /* @__PURE__ */ jsxs("label", {
+		...rest,
+		children: [isValidElement(control) ? control : null, typeof label === "string" ? label : null]
+	});
+};
+/**
+* Register real MUI components. Call once at app startup.
+*/
+function registerMuiComponents(components) {
+	MuiTextField = components.TextField;
+	MuiCheckbox = components.Checkbox;
+	MuiTypography = components.Typography;
+	MuiBox = components.Box;
+	MuiMenuItem = components.MenuItem;
+	MuiFormControlLabel = components.FormControlLabel;
+}
+function buildResolver() {
+	const resolver = {
+		string: renderStringInput,
+		number: renderNumberInput,
+		boolean: renderBooleanInput,
+		enum: renderEnumInput,
+		object: renderObjectContainer,
+		array: renderArrayContainer
+	};
+	if (headlessResolver.literal !== void 0) resolver.literal = headlessResolver.literal;
+	if (headlessResolver.union !== void 0) resolver.union = headlessResolver.union;
+	if (headlessResolver.discriminatedUnion !== void 0) resolver.discriminatedUnion = headlessResolver.discriminatedUnion;
+	if (headlessResolver.record !== void 0) resolver.record = headlessResolver.record;
+	if (headlessResolver.file !== void 0) resolver.file = headlessResolver.file;
+	if (headlessResolver.unknown !== void 0) resolver.unknown = headlessResolver.unknown;
+	return resolver;
+}
+const muiResolver = buildResolver();
+//#endregion
+export { muiResolver, registerMuiComponents };

package/dist/themes/shadcn.d.mts

@@ -1,4 +1,4 @@
-import { b as ComponentResolver } from "../types-BU0ETFHk.mjs";
+import { b as ComponentResolver } from "../types-DDCD6Xnx.mjs";
 
 //#region src/themes/shadcn.d.ts
 declare const shadcnResolver: ComponentResolver;

package/dist/{types-BU0ETFHk.d.mts → types-DDCD6Xnx.d.mts}

@@ -75,6 +75,7 @@ interface ComponentResolver {
   array?: RenderFunction;
   record?: RenderFunction;
   union?: RenderFunction;
+  discriminatedUnion?: RenderFunction;
   literal?: RenderFunction;
   file?: RenderFunction;
   unknown?: RenderFunction;
@@ -94,11 +95,12 @@ interface HtmlResolver {
   array?: HtmlRenderFunction;
   record?: HtmlRenderFunction;
   union?: HtmlRenderFunction;
+  discriminatedUnion?: HtmlRenderFunction;
   literal?: HtmlRenderFunction;
   file?: HtmlRenderFunction;
   unknown?: HtmlRenderFunction;
 }
-declare const RESOLVER_KEYS: readonly ["string", "number", "boolean", "enum", "object", "array", "record", "union", "literal", "file", "unknown"];
+declare const RESOLVER_KEYS: readonly ["string", "number", "boolean", "enum", "object", "array", "record", "union", "discriminatedUnion", "literal", "file", "unknown"];
 type ResolverKey = (typeof RESOLVER_KEYS)[number];
 /**
  * Map a schema type to the resolver key that handles it.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "schema-components",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "main": "./dist/index.mjs",
@@ -40,12 +40,14 @@
         "_lint": "eslint --cache 'src/**/*.{ts,tsx}'",
         "_lint:fix": "eslint --cache --fix 'src/**/*.{ts,tsx}'",
         "_test": "node --test 'tests/**/*.unit.test.ts' 'tests/**/*.integration.test.ts'",
-        "_test:coverage": "node --test --experimental-test-coverage --test-coverage-lines=80 --test-coverage-branches=80 --test-coverage-functions=80 --test-coverage-include='src/**/*.ts' --test-coverage-include='src/**/*.tsx' 'tests/**/*.unit.test.ts' 'tests/**/*.integration.test.ts'",
+        "_test:ssr": "node --test 'tests/ssr.e2e.test.ts'",
+        "_test:coverage": "node --test --experimental-test-coverage --test-coverage-lines=80 --test-coverage-branches=75 --test-coverage-functions=80 --test-coverage-include='src/**/*.ts' --test-coverage-include='src/**/*.tsx' 'tests/**/*.unit.test.ts' 'tests/**/*.integration.test.ts'",
         "_build": "tsdown && cp src/html/styles.css dist/html/styles.css",
         "typecheck": "turbo run _typecheck",
         "lint": "turbo run _lint",
         "lint:fix": "turbo run _lint:fix",
         "test": "turbo run _test",
+        "test-storybook": "vitest run --project=storybook",
         "test:coverage": "turbo run _test:coverage",
         "check": "turbo run _check",
         "validate": "turbo run _validate",
@@ -85,30 +87,39 @@
         "@commitlint/cli": "20.5.3",
         "@commitlint/config-conventional": "20.5.3",
         "@eslint/js": "10.0.1",
+        "@playwright/test": "1.59.1",
         "@semantic-release/changelog": "6.0.3",
         "@semantic-release/git": "10.0.1",
         "@semantic-release/github": "12.0.6",
-        "@storybook/react": "10.4.0",
-        "@storybook/react-vite": "10.4.0",
+        "@storybook/addon-a11y": "10.3.6",
+        "@storybook/addon-vitest": "10.3.6",
+        "@storybook/react": "10.3.6",
+        "@storybook/react-vite": "10.3.6",
         "@types/node": "25.6.0",
         "@types/react": "19.2.14",
+        "@types/react-dom": "19.2.3",
+        "@vitest/browser": "4.1.5",
+        "@vitest/browser-playwright": "4.1.5",
+        "@vitest/coverage-v8": "4.1.5",
         "conventional-changelog-conventionalcommits": "9.3.1",
         "eslint": "10.3.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-prettier": "5.5.5",
         "husky": "9.1.7",
         "lint-staged": "17.0.2",
+        "playwright": "^1.59.1",
         "prettier": "3.8.3",
         "react": "19.2.6",
         "react-dom": "19.2.6",
         "semantic-release": "25.0.3",
-        "storybook": "10.4.0",
-        "tsdown": "0.21.10",
+        "storybook": "10.3.6",
+        "tsdown": "0.22.0",
         "tslib": "2.8.1",
         "turbo": "2.9.9",
         "typescript": "6.0.3",
         "typescript-eslint": "8.59.2",
-        "vite": "^8.0.12",
+        "vite": "^8.0.11",
+        "vitest": "4.1.5",
         "zod": "4.4.3"
     },
     "packageManager": "pnpm@10.33.1"