@monimesl/dot-renderer-react 0.1.0-alpha.2 → 0.1.0-alpha.23

package/dist/index.js

@@ -1,321 +1,43 @@
-import { createEvent, toList, toText } from "@monimesl/dot-core";
-import { Fragment, createContext, createElement, useContext, useMemo, useState, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
-import { createRoot } from "react-dom/client";
-//#region src/theme.ts
-const FONT_FAMILY = "system-ui, sans-serif";
-const DEFAULT_RADIUS = 12;
-const DEFAULT_COLORS = {
-	light: {
-		primary: "#1c1c1e",
-		background: "#f2f2f2",
-		surface: "#ffffff",
-		text: "#111111",
-		subtle: "#8e8e93",
-		muted: "#e9e9eb",
-		border: "#e9e9eb"
-	},
-	dark: {
-		primary: "#f5f5f5",
-		background: "#121212",
-		surface: "#1e1e1e",
-		text: "#f5f5f5",
-		subtle: "#8e8e93",
-		muted: "#2c2c2e",
-		border: "#2a2a2c"
-	}
-};
-function resolveTheme(theme, systemScheme) {
-	const scheme = !theme.scheme || theme.scheme === "system" ? systemScheme : theme.scheme;
-	const defaults = DEFAULT_COLORS[scheme];
-	const colors = theme.colors ?? {};
-	const pick = (color, fallback) => color?.[scheme] ?? fallback;
-	return {
-		scheme,
-		colors: {
-			primary: pick(colors.primary, defaults.primary),
-			background: pick(colors.background, defaults.background),
-			surface: pick(colors.surface, defaults.surface),
-			text: pick(colors.text, defaults.text),
-			subtle: defaults.subtle,
-			muted: defaults.muted,
-			border: defaults.border
-		},
-		radius: theme.radius ?? DEFAULT_RADIUS
-	};
-}
-const ThemeContext = createContext(resolveTheme({}, "light"));
-function useTheme() {
-	return useContext(ThemeContext);
-}
-//#endregion
-//#region src/components/tokens.ts
-const GAP = {
-	none: 0,
-	small: 4,
-	medium: 8,
-	large: 16
-};
-const FONT_SIZE = {
-	caption: 13,
-	body: 15,
-	title: 20
-};
-const CARD_RADIUS_SCALE = 1.5;
-const DISABLED_OPACITY = .6;
-//#endregion
-//#region src/components/button.tsx
-const Button = ({ variant = "primary", disabled, onClick, children }) => {
-	const { colors, radius } = useTheme();
-	const filled = variant === "primary" && !disabled;
-	let color = colors.text;
-	if (filled) color = colors.surface;
-	else if (disabled) color = colors.subtle;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: "dot-button",
-		"data-variant": variant,
-		disabled,
-		onClick: onClick ? () => onClick(createEvent("click")) : void 0,
-		style: {
-			padding: "10px 16px",
-			border: "none",
-			borderRadius: radius,
-			background: filled ? colors.primary : colors.muted,
-			color,
-			font: "inherit",
-			fontSize: FONT_SIZE.body,
-			fontWeight: 600,
-			opacity: disabled ? DISABLED_OPACITY : 1,
-			cursor: disabled ? "default" : "pointer"
-		},
-		children
-	});
-};
-//#endregion
-//#region src/components/image.tsx
-const Image = ({ src, alt, width, height, onLoad, onError }) => {
-	const { radius } = useTheme();
-	return /* @__PURE__ */ jsx("img", {
-		className: "dot-image",
-		src,
-		alt: alt ?? "",
-		width,
-		height,
-		style: { borderRadius: radius },
-		onLoad: onLoad ? (event) => {
-			const { naturalWidth, naturalHeight } = event.currentTarget;
-			onLoad(createEvent("load", {
-				width: naturalWidth,
-				height: naturalHeight
-			}));
-		} : void 0,
-		onError: onError ? () => onError(createEvent("error", { message: `Failed to load ${src}` })) : void 0
-	});
-};
-//#endregion
-//#region src/components/input.tsx
-const HTML_TYPES = {
-	text: {
-		type: "text",
-		inputMode: "text"
-	},
-	number: {
-		type: "text",
-		inputMode: "decimal"
-	},
-	email: {
-		type: "email",
-		inputMode: "email"
-	},
-	phone: {
-		type: "tel",
-		inputMode: "tel"
-	},
-	password: {
-		type: "password",
-		inputMode: "text"
-	}
-};
-const Input = ({ value, placeholder, label, type = "text", maxLength, disabled, onChange, onSubmit }) => {
-	const { colors, radius } = useTheme();
-	const [text, setText] = useState(value ?? "");
-	const [awaitingEcho, setAwaitingEcho] = useState([]);
-	const [previousValue, setPreviousValue] = useState(value);
-	if (value !== previousValue) {
-		setPreviousValue(value);
-		const echo = awaitingEcho.indexOf(value ?? "");
-		if (echo >= 0) setAwaitingEcho(awaitingEcho.slice(echo + 1));
-		else {
-			setAwaitingEcho([]);
-			setText(value ?? "");
-		}
-	}
-	return /* @__PURE__ */ jsx("input", {
-		className: "dot-input",
-		...HTML_TYPES[type],
-		value: text,
-		placeholder,
-		"aria-label": label,
-		maxLength,
-		disabled,
-		onChange: (event) => {
-			const next = event.currentTarget.value;
-			setText(next);
-			if (onChange && value !== void 0) setAwaitingEcho([...awaitingEcho, next]);
-			onChange?.(createEvent("change", { value: next }));
-		},
-		onKeyDown: (event) => {
-			if (event.key === "Enter" && onSubmit) onSubmit(createEvent("submit", { value: text }));
-		},
-		style: {
-			width: "100%",
-			boxSizing: "border-box",
-			padding: "12px 14px",
-			border: `1px solid ${colors.border}`,
-			borderRadius: radius,
-			background: colors.surface,
-			color: colors.text,
-			outlineColor: colors.primary,
-			font: "inherit",
-			fontSize: 16,
-			opacity: disabled ? DISABLED_OPACITY : 1
-		}
-	});
-};
-//#endregion
-//#region src/components/text.tsx
-const VARIANTS = {
-	body: { fontSize: FONT_SIZE.body },
-	caption: { fontSize: FONT_SIZE.caption },
-	title: {
-		fontSize: FONT_SIZE.title,
-		fontWeight: 600
-	}
-};
-const Text = ({ variant = "body", children }) => /* @__PURE__ */ jsx("span", {
-	className: "dot-text",
-	style: VARIANTS[variant],
-	children
-});
-//#endregion
-//#region src/components/view.tsx
-const ALIGN = {
-	stretch: "stretch",
-	start: "flex-start",
-	center: "center",
-	end: "flex-end"
-};
-const View = ({ direction = "column", gap = "medium", align = "stretch", variant = "plain", onTap, children }) => {
-	const { colors, radius } = useTheme();
-	const card = variant === "card";
-	return /* @__PURE__ */ jsx("div", {
-		className: "dot-view",
-		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
-		style: {
-			display: "flex",
-			flexDirection: direction,
-			gap: GAP[gap],
-			alignItems: ALIGN[align],
-			padding: card ? 16 : void 0,
-			borderRadius: card ? radius * CARD_RADIUS_SCALE : void 0,
-			background: card ? colors.surface : void 0,
-			border: card ? `1px solid ${colors.border}` : void 0,
-			cursor: onTap ? "pointer" : void 0
-		},
-		children
-	});
-};
-//#endregion
-//#region src/components/index.ts
-const builtins = {
-	Button,
-	Image,
-	Input,
-	Text,
-	View
-};
-//#endregion
-//#region src/page-root.tsx
-function PageRoot({ page, components }) {
-	const state = useSyncExternalStore(page.subscribe, page.getState);
-	const context = useMemo(() => ({
-		h(type, props, ...children) {
-			const component = components[type];
-			if (!component) throw new Error(`The renderer has no component registered for tag '<${type}>'`);
-			return createElement(component, props, ...children);
-		},
-		text: toText,
-		on: (handler) => page.on(handler),
-		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
-	}), [page, components]);
-	if (!state) return null;
-	return createElement(Fragment, null, ...page.viewRenderer(state, context));
-}
-//#endregion
-//#region src/root.tsx
-function Root({ page, dotContext, components, wrapper: Wrapper }) {
-	const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);
-	const systemContext = useSyncExternalStore(dotContext.systemContext.subscribe, dotContext.systemContext.get);
-	const resolved = useMemo(() => resolveTheme(theme, systemContext.scheme), [theme, systemContext.scheme]);
-	const content = /* @__PURE__ */ jsx(PageRoot, {
-		page,
-		components
-	});
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: resolved,
-		children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
-			theme: {
-				...theme,
-				scheme: resolved.scheme
-			},
-			children: content
-		}) : /* @__PURE__ */ jsx(DefaultSurface, { children: content })
-	});
-}
-function DefaultSurface({ children }) {
-	const { colors } = useTheme();
-	return /* @__PURE__ */ jsx("div", {
-		className: "dot-surface",
-		style: {
-			minHeight: "100vh",
-			boxSizing: "border-box",
-			padding: 16,
-			display: "flex",
-			flexDirection: "column",
-			gap: 12,
-			background: colors.background,
-			color: colors.text,
-			fontFamily: FONT_FAMILY
-		},
-		children
-	});
-}
-//#endregion
-//#region src/renderer.tsx
-function reactRenderer({ components = {}, wrapper } = {}) {
-	const registry = {
-		...builtins,
-		...components
-	};
-	return {
-		name: "react",
-		mount(container, page, dotContext) {
-			const root = createRoot(container);
-			root.render(/* @__PURE__ */ jsx(Root, {
-				page,
-				dotContext,
-				components: registry,
-				wrapper
-			}));
-			return () => root.unmount();
-		}
-	};
-}
-//#endregion
+import { resolveTheme, useTheme } from "./theme.js";
+import { AmountInput } from "./components/amount-input.js";
+import { Avatar } from "./components/avatar.js";
+import { Spinner } from "./components/spinner.js";
+import { Button } from "./components/button.js";
+import { Carousel } from "./components/carousel.js";
+import { Icon } from "./components/icon.js";
+import { Chip } from "./components/chip.js";
+import { CodeInput } from "./components/code-input.js";
+import { DetailRow } from "./components/detail-row.js";
+import { Disclosure } from "./components/disclosure.js";
+import { Divider } from "./components/divider.js";
+import { EmptyState } from "./components/empty-state.js";
+import { Badge, Notice, ProgressBar } from "./components/feedback.js";
+import { Footer } from "./components/footer.js";
+import { Grid, GridItem } from "./components/grid.js";
+import { Image } from "./components/image.js";
+import { Input } from "./components/input.js";
+import { Link } from "./components/link.js";
+import { List, ListItem } from "./components/list.js";
+import { Option } from "./components/option.js";
+import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
+import { QRCode } from "./components/qr-code.js";
+import { Text } from "./components/text.js";
+import { RichText } from "./components/rich-text.js";
+import { Scroll } from "./components/scroll.js";
+import { Sheet } from "./components/sheet.js";
+import { Select } from "./components/select.js";
+import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
+import { Stack } from "./components/stack.js";
+import { Step, Steps } from "./components/steps.js";
+import { Stepper } from "./components/stepper.js";
+import { Tab, Tabs } from "./components/tabs.js";
+import { TextArea } from "./components/text-area.js";
+import { Toast } from "./components/toast.js";
+import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
+import { View } from "./components/view.js";
+import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { builtins, src_default as default, resolveTheme, useTheme };
-
-//# sourceMappingURL=index.js.map
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/markdown.js

@@ -0,0 +1,230 @@
+//#region src/markdown.ts
+const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}([-*_])( *\1){2,} *$/;
+const QUOTE = /^ {0,3}> ?/;
+const LIST_ITEM = /^ {0,3}([-*+]|\d{1,9}[.)])\s+/;
+const LINK = /^(!?)\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/;
+const AUTOLINK = /^<(https?:\/\/[^>\s]+)>/;
+const PUNCTUATION = /[!-/:-@[-`{-~]/;
+const ITEM_INDENT = "  ";
+function parseMarkdown(markdown) {
+	return parseBlocks(markdown.replace(/\r\n?/g, "\n").split("\n"));
+}
+function parseBlocks(lines) {
+	const blocks = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.trim() === "") {
+			index += 1;
+			continue;
+		}
+		const single = oneLineBlock(line);
+		if (single) {
+			blocks.push(single);
+			index += 1;
+		} else if (QUOTE.test(line)) {
+			const quoted = [];
+			while (index < lines.length && QUOTE.test(lines[index])) {
+				quoted.push(lines[index].replace(QUOTE, ""));
+				index += 1;
+			}
+			blocks.push({
+				kind: "quote",
+				blocks: parseBlocks(quoted)
+			});
+		} else if (LIST_ITEM.test(line)) {
+			const { list, next } = parseList(lines, index);
+			blocks.push(list);
+			index = next;
+		} else {
+			const paragraph = [];
+			while (index < lines.length && !endsParagraph(lines[index])) {
+				paragraph.push(lines[index]);
+				index += 1;
+			}
+			blocks.push({
+				kind: "paragraph",
+				content: parseInline(joinLines(paragraph))
+			});
+		}
+	}
+	return blocks;
+}
+function oneLineBlock(line) {
+	const heading = HEADING.exec(line);
+	if (heading) return {
+		kind: "heading",
+		level: Math.min(heading[1].length, 3),
+		content: parseInline(heading[2])
+	};
+	if (RULE.test(line)) return { kind: "rule" };
+	const trimmed = line.trim();
+	const picture = LINK.exec(trimmed);
+	if (picture && picture[1] === "!" && picture[0].length === trimmed.length) return {
+		kind: "image",
+		alt: picture[2],
+		src: picture[3]
+	};
+	return null;
+}
+function endsParagraph(line) {
+	return line.trim() === "" || HEADING.test(line) || RULE.test(line) || QUOTE.test(line) || LIST_ITEM.test(line);
+}
+function joinLines(lines) {
+	let text = "";
+	lines.forEach((line, index) => {
+		text += line.trim().replace(/\\$/, "");
+		if (index < lines.length - 1) text += /( {2,}|\\)$/.test(line) ? "\n" : " ";
+	});
+	return text;
+}
+function parseList(lines, start) {
+	const ordered = isOrdered(LIST_ITEM.exec(lines[start]));
+	const items = [];
+	let index = start;
+	while (index < lines.length) {
+		const marker = LIST_ITEM.exec(lines[index]);
+		if (!marker || isOrdered(marker) !== ordered) break;
+		const indent = marker[0].length;
+		const itemLines = [lines[index].slice(indent)];
+		index += 1;
+		while (index < lines.length) {
+			const line = lines[index];
+			if (line.trim() === "") {
+				if (!lines[index + 1]?.startsWith(ITEM_INDENT)) break;
+				itemLines.push("");
+			} else if (line.startsWith(ITEM_INDENT)) itemLines.push(withoutIndent(line, indent));
+			else if (endsParagraph(line)) break;
+			else itemLines.push(line);
+			index += 1;
+		}
+		items.push(parseBlocks(itemLines));
+	}
+	return {
+		list: {
+			kind: "list",
+			ordered,
+			items
+		},
+		next: index
+	};
+}
+function isOrdered(marker) {
+	return /\d/.test(marker[1]);
+}
+function withoutIndent(line, indent) {
+	const spaces = line.length - line.trimStart().length;
+	return line.slice(Math.min(spaces, indent));
+}
+function parseInline(text) {
+	const inlines = [];
+	let plain = "";
+	let index = 0;
+	const flush = () => {
+		if (plain) {
+			inlines.push({
+				kind: "text",
+				text: plain
+			});
+			plain = "";
+		}
+	};
+	const take = (inline, length) => {
+		flush();
+		inlines.push(inline);
+		index += length;
+	};
+	while (index < text.length) {
+		const char = text[index];
+		const next = text[index + 1];
+		const rest = text.slice(index);
+		if (char === "\\" && next !== void 0 && PUNCTUATION.test(next)) {
+			plain += next;
+			index += 2;
+			continue;
+		}
+		if (char === "\n") {
+			take({ kind: "break" }, 1);
+			continue;
+		}
+		if (char === "`") {
+			const codeEnd = text.indexOf("`", index + 1);
+			if (codeEnd > index + 1) {
+				take({
+					kind: "code",
+					text: text.slice(index + 1, codeEnd)
+				}, codeEnd + 1 - index);
+				continue;
+			}
+		}
+		const link = LINK.exec(rest);
+		if (link) {
+			const [whole, picture, label, href] = link;
+			take(picture === "!" ? {
+				kind: "text",
+				text: label
+			} : {
+				kind: "link",
+				href,
+				children: parseInline(label)
+			}, whole.length);
+			continue;
+		}
+		const autolink = AUTOLINK.exec(rest);
+		if (autolink) {
+			const [whole, href] = autolink;
+			take({
+				kind: "link",
+				href,
+				children: [{
+					kind: "text",
+					text: href
+				}]
+			}, whole.length);
+			continue;
+		}
+		if (char === "*" || char === "_") {
+			const strong = between(text, index, char + char);
+			if (strong) {
+				take({
+					kind: "strong",
+					children: parseInline(strong.inner)
+				}, strong.length);
+				continue;
+			}
+			const emphasis = between(text, index, char);
+			if (emphasis) {
+				take({
+					kind: "emphasis",
+					children: parseInline(emphasis.inner)
+				}, emphasis.length);
+				continue;
+			}
+		}
+		plain += char;
+		index += 1;
+	}
+	flush();
+	return inlines;
+}
+function between(text, start, delimiter) {
+	const open = start + delimiter.length;
+	if (!text.startsWith(delimiter, start) || open >= text.length || /\s/.test(text[open])) return null;
+	const underscore = delimiter.startsWith("_");
+	if (underscore && /\w/.test(text[start - 1] ?? "")) return null;
+	let close = text.indexOf(delimiter, open + 1);
+	while (close !== -1) {
+		const touchesSpace = /\s/.test(text[close - 1]);
+		const insideWord = underscore && /\w/.test(text[close + delimiter.length] ?? "");
+		const startsPair = delimiter.length === 1 && text[close + 1] === delimiter;
+		if (!touchesSpace && !insideWord && !startsPair) return {
+			inner: text.slice(open, close),
+			length: close + delimiter.length - start
+		};
+		close = text.indexOf(delimiter, close + (startsPair ? 2 : 1));
+	}
+	return null;
+}
+//#endregion
+export { parseInline, parseMarkdown };

package/dist/page-root.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ReactNode } from "react";
+import "@monimesl/dot-webview";

package/dist/page-root.js

@@ -0,0 +1,20 @@
+import { toList, toText } from "@monimesl/dot-core";
+import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
+//#region src/page-root.tsx
+function PageRoot({ page, components }) {
+	const state = useSyncExternalStore(page.subscribe, page.getState);
+	const context = useMemo(() => ({
+		h(type, props, ...children) {
+			const component = components[type];
+			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
+			return createElement(component, props, ...children);
+		},
+		text: toText,
+		on: (handler, data) => page.on(handler, data),
+		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
+	}), [page, components]);
+	if (!state) return null;
+	return page.viewRenderer(state, context);
+}
+//#endregion
+export { PageRoot };

package/dist/portal.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/portal.ts
+const PortalContainerContext = createContext(null);
+function usePortalContainer() {
+	return useContext(PortalContainerContext) ?? void 0;
+}
+//#endregion
+export { PortalContainerContext, usePortalContainer };