@hyphacommerce/app-blocks 0.0.0-stage → 0.1.0

package/dist/react.js

@@ -0,0 +1,266 @@
+import { n as isElementType } from "./types-DpAvyvPv.js";
+import { Badge } from "@astryxdesign/core/Badge";
+import { Banner } from "@astryxdesign/core/Banner";
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { Divider } from "@astryxdesign/core/Divider";
+import { Heading } from "@astryxdesign/core/Heading";
+import { HStack, VStack } from "@astryxdesign/core/Layout";
+import { Link } from "@astryxdesign/core/Link";
+import { List, ListItem } from "@astryxdesign/core/List";
+import { MetadataList, MetadataListItem } from "@astryxdesign/core/MetadataList";
+import { NumberInput } from "@astryxdesign/core/NumberInput";
+import { Selector } from "@astryxdesign/core/Selector";
+import { Table } from "@astryxdesign/core/Table";
+import { Text } from "@astryxdesign/core/Text";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { useState, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/render.tsx
+/** Renders a version-1 tree; anything else, and unknown elements, render nothing. */
+function HyphaBlock({ tree, onAction, onNavigate }) {
+	if (tree.version !== 1) {
+		warn(`block version ${String(tree.version)} isn't supported: nothing rendered`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Element, {
+		element: tree.root,
+		handlers: {
+			onAction,
+			onNavigate
+		}
+	});
+}
+function warn(message) {
+	if (typeof process !== "undefined" && process.env.NODE_ENV === "production") return;
+	console.warn(`[@hyphacommerce/app-blocks] ${message}`);
+}
+const STACK_GAP = {
+	0: 0,
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4
+};
+function isKnown(element) {
+	return isElementType(element.type);
+}
+function Children({ elements, handlers }) {
+	return elements.map((child, place) => /* @__PURE__ */ jsx(Element, {
+		element: child,
+		handlers
+	}, `${place}:${child.type}`));
+}
+function Element({ element, handlers }) {
+	if (!isKnown(element)) {
+		warn(`unknown element type ${JSON.stringify(element.type)}: skipped`);
+		return null;
+	}
+	switch (element.type) {
+		case "card": return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(VStack, {
+			gap: 2,
+			children: [element.title ? /* @__PURE__ */ jsx(Heading, {
+				level: 3,
+				children: element.title
+			}) : null, /* @__PURE__ */ jsx(Children, {
+				elements: element.children,
+				handlers
+			})]
+		}) });
+		case "stack": return /* @__PURE__ */ jsx(VStack, {
+			gap: STACK_GAP[element.gap ?? 2],
+			children: /* @__PURE__ */ jsx(Children, {
+				elements: element.children,
+				handlers
+			})
+		});
+		case "row": return /* @__PURE__ */ jsx(HStack, {
+			gap: STACK_GAP[element.gap ?? 2],
+			hAlign: element.align ?? "start",
+			vAlign: "center",
+			wrap: "wrap",
+			children: /* @__PURE__ */ jsx(Children, {
+				elements: element.children,
+				handlers
+			})
+		});
+		case "text": return /* @__PURE__ */ jsx(Text, {
+			type: element.variant ?? "body",
+			weight: element.weight === "semibold" ? "semibold" : void 0,
+			children: element.value
+		});
+		case "heading": return /* @__PURE__ */ jsx(Heading, {
+			level: element.level ?? 3,
+			children: element.value
+		});
+		case "badge": return /* @__PURE__ */ jsx(Badge, {
+			label: element.value,
+			variant: element.tone ?? "neutral"
+		});
+		case "link":
+			if (!element.href.startsWith("https://")) return null;
+			return /* @__PURE__ */ jsx(Link, {
+				href: element.href,
+				isExternalLink: element.external ?? false,
+				isStandalone: true,
+				children: element.label
+			});
+		case "button": {
+			const variant = element.variant ?? "secondary";
+			if (element.navigate !== void 0) {
+				const path = element.navigate;
+				return /* @__PURE__ */ jsx(Button, {
+					label: element.label,
+					variant,
+					onClick: () => handlers.onNavigate?.(path)
+				});
+			}
+			const action = element.action;
+			return /* @__PURE__ */ jsx(Button, {
+				label: element.label,
+				variant,
+				isDisabled: !handlers.onAction,
+				clickAction: async () => {
+					await handlers.onAction?.(action);
+				}
+			});
+		}
+		case "divider": return /* @__PURE__ */ jsx(Divider, {});
+		case "image":
+			if (!element.src.startsWith("https://")) return null;
+			return /* @__PURE__ */ jsx("img", {
+				src: element.src,
+				alt: element.alt,
+				width: element.width,
+				height: element.height,
+				loading: "lazy",
+				style: {
+					maxWidth: "100%",
+					height: "auto"
+				}
+			});
+		case "list": return /* @__PURE__ */ jsx(List, {
+			hasDividers: true,
+			children: element.items.map((item, place) => /* @__PURE__ */ jsx(ListItem, {
+				label: item.label,
+				description: item.description
+			}, `${place}:${item.label}`))
+		});
+		case "table": return /* @__PURE__ */ jsx(BlockTable, { element });
+		case "keyvalue": return /* @__PURE__ */ jsx(MetadataList, { children: element.items.map((item, place) => /* @__PURE__ */ jsx(MetadataListItem, {
+			label: item.label,
+			children: item.value
+		}, `${place}:${item.label}`)) });
+		case "form": return /* @__PURE__ */ jsx(BlockForm, {
+			form: element,
+			onAction: handlers.onAction
+		});
+		case "banner": return /* @__PURE__ */ jsx(Banner, {
+			status: element.tone,
+			title: element.title,
+			description: element.description
+		});
+	}
+}
+function BlockTable({ element }) {
+	const columns = element.columns.map((column) => ({
+		key: column.key,
+		header: column.header,
+		align: column.align === "end" ? "end" : "start",
+		renderCell: (row) => {
+			const cell = row[column.key];
+			return typeof cell === "string" || typeof cell === "number" ? String(cell) : "—";
+		}
+	}));
+	const data = element.rows.map((row, place) => ({
+		...row,
+		__row: place
+	}));
+	return /* @__PURE__ */ jsx(Table, {
+		data,
+		columns,
+		idKey: "__row"
+	});
+}
+function initialValues(fields) {
+	const values = {};
+	for (const field of fields) if (field.input === "checkbox") values[field.name] = field.value ?? false;
+	else if (field.input === "number") values[field.name] = field.value ?? null;
+	else values[field.name] = field.value ?? "";
+	return values;
+}
+function BlockForm({ form, onAction }) {
+	const [values, setValues] = useState(() => initialValues(form.fields));
+	const [pending, startTransition] = useTransition();
+	const set = (name, value) => setValues((current) => ({
+		...current,
+		[name]: value
+	}));
+	const submit = (event) => {
+		event.preventDefault();
+		if (!onAction) return;
+		startTransition(async () => {
+			await onAction(form.action, values);
+		});
+	};
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: submit,
+		children: /* @__PURE__ */ jsxs(VStack, {
+			gap: 3,
+			children: [form.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
+				field,
+				value: values[field.name] ?? null,
+				onChange: set
+			}, field.name)), /* @__PURE__ */ jsx(HStack, {
+				hAlign: "end",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "primary",
+					label: form.submit_label ?? "Save",
+					isLoading: pending,
+					isDisabled: !onAction
+				})
+			})]
+		})
+	});
+}
+function FormField({ field, value, onChange }) {
+	const common = {
+		label: field.label,
+		description: field.description,
+		isRequired: field.required ?? false,
+		htmlName: field.name
+	};
+	switch (field.input) {
+		case "text": return /* @__PURE__ */ jsx(TextInput, {
+			...common,
+			placeholder: field.placeholder,
+			value: typeof value === "string" ? value : "",
+			onChange: (next) => onChange(field.name, next)
+		});
+		case "number": return /* @__PURE__ */ jsx(NumberInput, {
+			...common,
+			min: field.min,
+			max: field.max,
+			value: typeof value === "number" ? value : null,
+			onChange: (next) => onChange(field.name, next)
+		});
+		case "select": return /* @__PURE__ */ jsx(Selector, {
+			...common,
+			options: field.options,
+			value: typeof value === "string" && value !== "" ? value : void 0,
+			onChange: (next) => onChange(field.name, next)
+		});
+		case "checkbox": return /* @__PURE__ */ jsx(CheckboxInput, {
+			label: common.label,
+			description: common.description,
+			isRequired: common.isRequired,
+			htmlName: common.htmlName,
+			value: value === true,
+			onChange: (checked) => onChange(field.name, checked)
+		});
+	}
+}
+//#endregion
+export { HyphaBlock };

package/dist/types-CP_jLiHn.d.ts

@@ -0,0 +1,152 @@
+//#region src/types.d.ts
+type Gap = 0 | 1 | 2 | 3 | 4;
+type Tone = "neutral" | "info" | "success" | "warning" | "error";
+type BannerTone = Exclude<Tone, "neutral">;
+interface CardElement {
+  type: "card";
+  title?: string;
+  children: BlockElement[];
+}
+interface StackElement {
+  type: "stack";
+  gap?: Gap;
+  children: BlockElement[];
+}
+interface RowElement {
+  type: "row";
+  gap?: Gap;
+  align?: "start" | "center" | "end" | "between";
+  children: BlockElement[];
+}
+interface TextElement {
+  type: "text";
+  value: string;
+  variant?: "body" | "supporting" | "code";
+  weight?: "normal" | "semibold";
+}
+interface HeadingElement {
+  type: "heading";
+  value: string;
+  level?: 2 | 3 | 4;
+}
+interface BadgeElement {
+  type: "badge";
+  value: string;
+  tone?: Tone;
+}
+interface LinkElement {
+  type: "link";
+  label: string;
+  /** `https://` only. */
+  href: string;
+  external?: boolean;
+}
+interface ButtonBase {
+  type: "button";
+  label: string;
+  variant?: "primary" | "secondary" | "destructive";
+}
+/** Runs an action or navigates within the app's page: one of the two. */
+type ButtonElement = (ButtonBase & {
+  action: string;
+  navigate?: never;
+}) | (ButtonBase & {
+  navigate: string;
+  action?: never;
+});
+interface DividerElement {
+  type: "divider";
+}
+interface ImageElement {
+  type: "image";
+  /** `https://` only. */
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+}
+interface ListElement {
+  type: "list";
+  items: {
+    label: string;
+    description?: string;
+  }[];
+}
+interface TableElement {
+  type: "table";
+  columns: {
+    key: string;
+    header: string;
+    align?: "start" | "end";
+  }[];
+  rows: Record<string, string | number | null>[];
+}
+interface KeyValueElement {
+  type: "keyvalue";
+  items: {
+    label: string;
+    value: string;
+  }[];
+}
+interface FieldBase {
+  type: "field";
+  name: string;
+  label: string;
+  description?: string;
+  required?: boolean;
+}
+type FieldElement = (FieldBase & {
+  input: "text";
+  value?: string;
+  placeholder?: string;
+}) | (FieldBase & {
+  input: "number";
+  value?: number;
+  min?: number;
+  max?: number;
+}) | (FieldBase & {
+  input: "select";
+  value?: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+}) | (FieldBase & {
+  input: "checkbox";
+  value?: boolean;
+});
+interface FormElement {
+  type: "form";
+  action: string;
+  submit_label?: string;
+  fields: FieldElement[];
+}
+interface BannerElement {
+  type: "banner";
+  tone: BannerTone;
+  title: string;
+  description?: string;
+}
+/** Every element version 1 knows. */
+type KnownElement = CardElement | StackElement | RowElement | TextElement | HeadingElement | BadgeElement | LinkElement | ButtonElement | DividerElement | ImageElement | ListElement | TableElement | KeyValueElement | FormElement | BannerElement;
+type ElementType = KnownElement["type"];
+declare const ELEMENT_TYPES: readonly ElementType[];
+/** Whether version 1 knows the element type `type`. */
+declare function isElementType(type: string): type is ElementType;
+/**
+ * An element of a type a newer version added: allowed in a tree, rendered as nothing.
+ * (Typed loosely so trees from newer apps still type-check where they're passed through.)
+ */
+interface UnknownElement {
+  type: string;
+  [key: string]: unknown;
+}
+type BlockElement = KnownElement | UnknownElement;
+interface BlockTree {
+  version: 1;
+  root: BlockElement;
+}
+/** The values a form submits, by field name. */
+type FormValues = Record<string, string | number | boolean | null>;
+//#endregion
+export { TableElement as C, isElementType as D, UnknownElement as E, StackElement as S, Tone as T, KeyValueElement as _, BlockTree as a, ListElement as b, DividerElement as c, FieldElement as d, FormElement as f, ImageElement as g, HeadingElement as h, BlockElement as i, ELEMENT_TYPES as l, Gap as m, BannerElement as n, ButtonElement as o, FormValues as p, BannerTone as r, CardElement as s, BadgeElement as t, ElementType as u, KnownElement as v, TextElement as w, RowElement as x, LinkElement as y };

package/dist/types-DpAvyvPv.js

@@ -0,0 +1,25 @@
+//#region src/types.ts
+const ELEMENT_TYPES = [
+	"card",
+	"stack",
+	"row",
+	"text",
+	"heading",
+	"badge",
+	"link",
+	"button",
+	"divider",
+	"image",
+	"list",
+	"table",
+	"keyvalue",
+	"form",
+	"banner"
+];
+const KNOWN_TYPES = new Set(ELEMENT_TYPES);
+/** Whether version 1 knows the element type `type`. */
+function isElementType(type) {
+	return KNOWN_TYPES.has(type);
+}
+//#endregion
+export { isElementType as n, ELEMENT_TYPES as t };

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@hyphacommerce/app-blocks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Hypha's declarative app blocks, version 1: the JSON Schema, TypeScript types, a validator and the reference React renderer on Astryx.",
+  "homepage": "https://hyphacommerce.com",
+  "bugs": "https://github.com/hyphacommerce/hypha/issues",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hyphacommerce/hypha.git",
+    "directory": "packages/app-blocks"
+  },
+  "files": [
+    "dist",
+    "schema",
+    "LICENSE-MIT",
+    "LICENSE-APACHE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./schema/block.v1.json": "./schema/block.v1.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@astryxdesign/core": "0.7.1",
+    "@stylexjs/stylex": "0.19.1",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "ajv": "8.20.0",
+    "jiti": "2.7.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "@astryxdesign/core": "0.7.1",
+    "react": ">=19.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "node --test src/*.test.ts",
+    "typecheck": "tsc --noEmit"
+  }
 }