@monimesl/dot-simulator 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/client/simulator.js

@@ -15,72 +15,380 @@
 		}
 		return registry;
 	}
-	const builtinComponents = {
-		Button: defineComponent({
-			name: "Button",
-			props: {
-				variant: ["primary", "secondary"],
-				disabled: "boolean"
-			},
-			events: ["click"],
-			children: "text"
-		}),
-		Image: defineComponent({
-			name: "Image",
-			props: {
-				src: "string",
-				alt: "string",
-				width: "number",
-				height: "number"
-			},
-			events: ["load", "error"],
-			children: "none"
-		}),
-		Input: defineComponent({
-			name: "Input",
-			props: {
-				value: "string",
-				placeholder: "string",
-				label: "string",
-				type: [
-					"text",
-					"number",
-					"email",
-					"phone",
-					"password"
-				],
-				maxLength: "number",
-				disabled: "boolean"
-			},
-			events: ["change", "submit"],
-			children: "none"
-		}),
-		Text: defineComponent({
-			name: "Text",
-			props: { variant: [
+	const Button = defineComponent({
+		name: "Button",
+		props: {
+			variant: ["primary", "secondary"],
+			disabled: "boolean",
+			loading: "boolean"
+		},
+		events: ["click"],
+		children: "text"
+	});
+	const Divider = defineComponent({
+		name: "Divider",
+		children: "none"
+	});
+	const SIZES = [
+		"small",
+		"medium",
+		"large"
+	];
+	const TONES = [
+		"default",
+		"muted",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const STATUS_TONES = [
+		"default",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const ICON_NAMES = [
+		"arrow-down",
+		"arrow-left",
+		"arrow-right",
+		"arrow-up",
+		"bank",
+		"bell",
+		"bolt",
+		"calendar",
+		"card",
+		"cart",
+		"cash",
+		"check",
+		"chevron-down",
+		"chevron-left",
+		"chevron-right",
+		"chevron-up",
+		"clock",
+		"close",
+		"copy",
+		"download",
+		"edit",
+		"error",
+		"eye",
+		"eye-off",
+		"file",
+		"gift",
+		"grid",
+		"heart",
+		"help",
+		"history",
+		"home",
+		"image",
+		"info",
+		"list",
+		"location",
+		"lock",
+		"logout",
+		"mail",
+		"minus",
+		"mobile",
+		"more",
+		"phone",
+		"plus",
+		"qr-code",
+		"receipt",
+		"refresh",
+		"search",
+		"send",
+		"settings",
+		"share",
+		"star",
+		"success",
+		"trash",
+		"upload",
+		"user",
+		"users",
+		"wallet",
+		"warning",
+		"water",
+		"wifi"
+	];
+	const Spinner = defineComponent({
+		name: "Spinner",
+		props: { size: SIZES },
+		children: "none"
+	});
+	const ProgressBar = defineComponent({
+		name: "ProgressBar",
+		props: { value: "number" },
+		children: "none"
+	});
+	const Notice = defineComponent({
+		name: "Notice",
+		props: {
+			tone: STATUS_TONES,
+			title: "string"
+		},
+		children: "text"
+	});
+	const Badge = defineComponent({
+		name: "Badge",
+		props: { tone: STATUS_TONES },
+		children: "text"
+	});
+	const Footer = defineComponent({
+		name: "Footer",
+		children: "elements"
+	});
+	const Icon = defineComponent({
+		name: "Icon",
+		props: {
+			name: ICON_NAMES,
+			size: SIZES,
+			tone: TONES
+		},
+		children: "none",
+		inline: true
+	});
+	const Image = defineComponent({
+		name: "Image",
+		props: {
+			src: "string",
+			alt: "string",
+			width: "number",
+			height: "number",
+			fit: ["cover", "contain"],
+			shape: [
+				"rounded",
+				"square",
+				"circle"
+			]
+		},
+		events: ["load", "error"],
+		children: "none"
+	});
+	const Input = defineComponent({
+		name: "Input",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			prefix: "string",
+			suffix: "string",
+			type: [
+				"text",
+				"number",
+				"email",
+				"phone",
+				"password"
+			],
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change", "submit"],
+		children: "none"
+	});
+	const List = defineComponent({
+		name: "List",
+		children: "elements"
+	});
+	const ListItem = defineComponent({
+		name: "ListItem",
+		props: {
+			title: "string",
+			subtitle: "string",
+			value: "string",
+			icon: ICON_NAMES,
+			image: "string"
+		},
+		events: ["tap"],
+		children: "elements"
+	});
+	const Sheet = defineComponent({
+		name: "Sheet",
+		props: {
+			open: "boolean",
+			title: "string"
+		},
+		events: ["close"],
+		children: "elements"
+	});
+	const Toast = defineComponent({
+		name: "Toast",
+		props: {
+			message: "string",
+			tone: STATUS_TONES,
+			duration: "number"
+		},
+		events: ["hide"],
+		children: "none"
+	});
+	const Select = defineComponent({
+		name: "Select",
+		props: {
+			value: "string",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Option = defineComponent({
+		name: "Option",
+		props: {
+			value: "string",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Skeleton = defineComponent({
+		name: "Skeleton",
+		props: {
+			shape: [
+				"text",
+				"circle",
+				"box"
+			],
+			lines: "number",
+			height: "number"
+		},
+		children: "none"
+	});
+	const Text = defineComponent({
+		name: "Text",
+		props: {
+			variant: [
 				"title",
 				"body",
 				"caption"
-			] },
-			children: "text",
-			inline: true
-		}),
+			],
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			align: [
+				"start",
+				"center",
+				"end"
+			],
+			maxLines: "number"
+		},
+		children: "text",
+		inline: true
+	});
+	const TextArea = defineComponent({
+		name: "TextArea",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			rows: "number",
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Switch = defineComponent({
+		name: "Switch",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Checkbox = defineComponent({
+		name: "Checkbox",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const RadioGroup = defineComponent({
+		name: "RadioGroup",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Radio = defineComponent({
+		name: "Radio",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		children: "none"
+	});
+	const SPACE = [
+		"none",
+		"small",
+		"medium",
+		"large"
+	];
+	const builtinComponents = {
+		Badge,
+		Button,
+		Checkbox,
+		Divider,
+		Footer,
+		Icon,
+		Image,
+		Input,
+		List,
+		ListItem,
+		Notice,
+		Option,
+		ProgressBar,
+		Radio,
+		RadioGroup,
+		Select,
+		Sheet,
+		Skeleton,
+		Spinner,
+		Switch,
+		Text,
+		TextArea,
+		Toast,
 		View: defineComponent({
 			name: "View",
 			props: {
+				gap: SPACE,
 				direction: ["column", "row"],
-				gap: [
-					"none",
-					"small",
-					"medium",
-					"large"
-				],
 				align: [
 					"stretch",
 					"start",
 					"center",
 					"end"
 				],
+				justify: [
+					"start",
+					"center",
+					"end",
+					"between"
+				],
+				wrap: "boolean",
+				grow: "boolean",
+				padding: SPACE,
+				paddingTop: SPACE,
+				paddingStart: SPACE,
+				paddingEnd: SPACE,
+				paddingBottom: SPACE,
 				variant: ["plain", "card"]
 			},
 			events: ["tap"],
@@ -96,6 +404,8 @@
 			this.code = code;
 		}
 	};
+	const LABEL = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+	new RegExp(`^(?:\\*\\.${LABEL}(?:\\.${LABEL})+|${LABEL}(?:\\.${LABEL})*)$`);
 	const SEMVER_PATTERN = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
 	function majorVersion(version) {
 		return parseVersion(version).major;
@@ -436,10 +746,24 @@
 	//#region src/paths.ts
 	const CLIENT_PATH = "/__dot/";
 	const EVENTS_PATH = `${CLIENT_PATH}events`;
+	const HTTP_PATH = `${CLIENT_PATH}network/http/`;
+	const FILE_PATH = `${CLIENT_PATH}file/`;
 	const DOT_PATH = "/dot/";
 	const WEBVIEW_URL = `${DOT_PATH}ui/index.html`;
 	const MANIFEST_URL = `${DOT_PATH}manifest.json`;
 	//#endregion
+	//#region src/client/dash/dev-server.ts
+	async function callDevServer(path, params, signal) {
+		const answer = await (await fetch(path, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(params),
+			signal
+		})).json();
+		if ("error" in answer) throw new HostError(answer.error.code, answer.error.message);
+		return answer.result;
+	}
+	//#endregion
 	//#region src/client/dash/system.ts
 	const SHAKE_DURATION_MS = 300;
 	const SHAKE = [
@@ -458,6 +782,30 @@
 		phone.dataset.torch = state;
 		note(`torch: ${state}`);
 	}
+	async function copyText(note, text) {
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (error) {
+			throw new HostError("failed", `The browser kept the clipboard: ${error.message}`);
+		}
+		note(`copied: ${text}`);
+	}
+	function share(note, params) {
+		const parts = [
+			params.text,
+			params.url,
+			params.file && `file ${params.file}`
+		].filter(Boolean);
+		if (parts.length === 0) throw new HostError("invalid", "Give share a text, a url or a file");
+		note(`shared: ${parts.join(" · ")}`);
+	}
+	function delay(milliseconds, signal) {
+		if (!Number.isFinite(milliseconds) || milliseconds < 0) throw new HostError("invalid", `A delay is a number of milliseconds, 0 or more, not ${milliseconds}`);
+		return new Promise((resolve) => {
+			const timer = setTimeout(resolve, milliseconds);
+			signal.addEventListener("abort", () => clearTimeout(timer));
+		});
+	}
 	//#endregion
 	//#region src/client/dom.ts
 	function element(selector) {
@@ -506,13 +854,39 @@
 	}
 	//#endregion
 	//#region src/client/dash/index.ts
+	const HTTP_METHODS = [
+		"request",
+		"download",
+		"upload"
+	];
+	const FILE_OPERATIONS = [
+		"read",
+		"write",
+		"stat",
+		"list",
+		"createFolder",
+		"move",
+		"copy",
+		"remove",
+		"save",
+		"open",
+		"usage"
+	];
 	function dashHandlers(phone, note) {
 		return {
 			"dash.ui.alert": ({ params, signal }) => alert(phone, params, signal),
 			"dash.system.vibrate": ({ params }) => vibrate(phone, note, params),
-			"dash.system.torch": ({ params }) => torch(phone, note, params.state)
+			"dash.system.torch": ({ params }) => torch(phone, note, params.state),
+			"dash.system.copyText": ({ params }) => copyText(note, params.text),
+			"dash.system.share": ({ params }) => share(note, params),
+			"dash.system.delay": ({ params, signal }) => delay(params.milliseconds, signal),
+			...devServerHandlers("dash.network.http", HTTP_PATH, HTTP_METHODS),
+			...devServerHandlers("dash.file", FILE_PATH, FILE_OPERATIONS)
 		};
 	}
+	function devServerHandlers(group, path, names) {
+		return Object.fromEntries(names.map((name) => [`${group}.${name}`, ({ params, signal }) => callDevServer(`${path}${name}`, params, signal)]));
+	}
 	//#endregion
 	//#region src/client/dash/permissions.ts
 	const PERMISSION_SUMMARIES = { account: "see your Dash account: your name, and your email or phone" };