import * as __ctHelpers from "commontools"; import { pattern, UI } from "commontools"; interface Item { id: number; name: string; price: number; active: boolean; } interface State { items: Item[]; filter: string; discount: number; taxRate: number; } export default pattern((state) => { return { [UI]: (
Total items: {state.items.length}
Filtered count:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true }, filter: { type: "string", asOpaque: true } }, required: ["items", "filter"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, filter: state.filter } }, ({ state }) => state.items.filter((i) => i.name.includes(state.filter)).length)}
Item count: {state.items.length}
Active items: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.filter((i) => i.active).length)}
Discount percent: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { discount: { type: "number", asOpaque: true } }, required: ["discount"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { discount: state.discount } }, ({ state }) => state.discount * 100)}%
Tax percent: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { taxRate: { type: "number", asOpaque: true } }, required: ["taxRate"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { taxRate: state.taxRate } }, ({ state }) => state.taxRate * 100)}%
All active: {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.every((i) => i.active)), "Yes", "No")}
Any active: {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.some((i) => i.active)), "Yes", "No")}
Has expensive (gt 100):{" "} {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.some((i) => i.price > 100)), "Yes", "No")}