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

package/README.md

@@ -1,3 +1,43 @@
 # @monimesl/dot-renderer-react
 
-Renders Dot pages with React. It is the compiler's default renderer.
+Renders Dot pages with React. Every dot runs with this renderer. Dots get it through
+`@monimesl/dot-runtime` and never import it themselves.
+
+## How it draws
+
+Each built-in component is a React component that draws plain elements with inline styles, in
+the colors and shape of the dot's theme. A small stylesheet, `dist/styles.css`, covers what inline
+styles can't do, such as keyframes and scroll bars. The compiler copies it into each dot as
+`dot.css`.
+
+Five components use [Base UI](https://base-ui.com)'s headless parts for the focus, keyboard and
+screen-reader behaviour that is hard to get right: `Sheet` (and the sheet a `Select` opens), `Tabs`,
+`Switch`, `Checkbox` and `RadioGroup`. A sheet keeps focus inside it, closes on Escape and stops the
+page behind from scrolling. Fields link their hint or error to the control they describe.
+
+Icons are [Phosphor](https://phosphoricons.com)'s bold artwork. A script generates them into the
+source at build time, from `@phosphor-icons/core`.
+
+## The theme
+
+A dot sets `scheme`, `colors` and `shape` in `defineDot`. The colors are `primary`, `background`,
+`surface` and `text`, each for light and dark. The renderer fills in the rest of the palette (the
+neutrals and the status colors) from Dash's own look. `useTheme()` gives a component the resolved
+theme.
+
+## Only the components a dot uses
+
+A dot's production build carries only the components its pages use. The compiler lists them from
+the pages, imports each one by name and makes the webview with
+`createReactRenderer({ components })`. The renderer is built as one file per module, with the
+libraries it bundles under `dist/vendor/`. So a dot's bundle can leave out a component, and
+anything only that component imports. A development build has every component, because a hot reload
+keeps the renderer the page already runs with.
+
+`reactRenderer()`, the default export, makes a renderer with every built-in component. Pass
+`components` to add or replace some, and `wrapper` to wrap each page.
+
+## React
+
+Hosts serve React, so dots don't bundle it. This package's build makes the React that hosts ship,
+in `dist/react-host/<version>/`. A dot's page imports it through an import map.

package/dist/LICENSE-PHOSPHOR

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,14 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __commonJSMin, __exportAll };

package/dist/_virtual/builtin_esm-external-require-react.js

@@ -0,0 +1,9 @@
+import { __commonJSMin } from "./_rolldown/runtime.js";
+import * as m from "react";
+//#region builtin:esm-external-require-react
+var require_builtin_esm_external_require_react = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = { ...m };
+}));
+//#endregion
+export default require_builtin_esm_external_require_react();
+export { require_builtin_esm_external_require_react };

package/dist/color.js

@@ -0,0 +1,107 @@
+//#region src/color.ts
+const READABLE_CONTRAST = 4.5;
+function contrast(first, second) {
+	const firstLuminance = luminance(first);
+	const secondLuminance = luminance(second);
+	const lighter = Math.max(firstLuminance, secondLuminance);
+	const darker = Math.min(firstLuminance, secondLuminance);
+	return (lighter + .05) / (darker + .05);
+}
+function darken(color, points) {
+	const [hue, saturation, lightness] = toHsl(channels(color));
+	return toHex(fromHsl(hue, saturation, Math.max(0, lightness - points / 100)));
+}
+function luminance(color) {
+	const [red, green, blue] = channels(color).map(linearLight);
+	return .2126 * red + .7152 * green + .0722 * blue;
+}
+function linearLight(channel) {
+	const share = channel / 255;
+	if (share <= .03928) return share / 12.92;
+	return ((share + .055) / 1.055) ** 2.4;
+}
+function channels(color) {
+	let hex = color.slice(1);
+	if (hex.length === 3 || hex.length === 4) hex = [...hex].map((digit) => digit + digit).join("");
+	const [red, green, blue] = [
+		0,
+		2,
+		4
+	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+	return [
+		red,
+		green,
+		blue
+	];
+}
+function toHex(rgb) {
+	return `#${rgb.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function toHsl([red, green, blue]) {
+	const redShare = red / 255;
+	const greenShare = green / 255;
+	const blueShare = blue / 255;
+	const max = Math.max(redShare, greenShare, blueShare);
+	const min = Math.min(redShare, greenShare, blueShare);
+	const lightness = (max + min) / 2;
+	const chroma = max - min;
+	if (chroma === 0) return [
+		0,
+		0,
+		lightness
+	];
+	const saturation = chroma / (1 - Math.abs(2 * lightness - 1));
+	let hue;
+	if (max === redShare) hue = (greenShare - blueShare) / chroma % 6;
+	else if (max === greenShare) hue = (blueShare - redShare) / chroma + 2;
+	else hue = (redShare - greenShare) / chroma + 4;
+	return [
+		(hue * 60 + 360) % 360,
+		saturation,
+		lightness
+	];
+}
+function fromHsl(hue, saturation, lightness) {
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const middle = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const [red, green, blue] = [
+		[
+			chroma,
+			middle,
+			0
+		],
+		[
+			middle,
+			chroma,
+			0
+		],
+		[
+			0,
+			chroma,
+			middle
+		],
+		[
+			0,
+			middle,
+			chroma
+		],
+		[
+			middle,
+			0,
+			chroma
+		],
+		[
+			chroma,
+			0,
+			middle
+		]
+	][Math.floor(hue / 60) % 6];
+	const lift = lightness - chroma / 2;
+	return [
+		(red + lift) * 255,
+		(green + lift) * 255,
+		(blue + lift) * 255
+	];
+}
+//#endregion
+export { READABLE_CONTRAST, contrast, darken };

package/dist/components/amount-input.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { AmountInput } from "@monimesl/dot-core";
+//#region src/components/amount-input.d.ts
+declare const AmountInput$1: ReactComponent<typeof AmountInput>;
+//#endregion
+export { AmountInput$1 as AmountInput };

package/dist/components/amount-input.js

@@ -0,0 +1,109 @@
+import { useTheme } from "../theme.js";
+import { SPACE, WEIGHTS } from "./tokens.js";
+import { Field } from "./field.js";
+import { BARE_INPUT_STYLE, useFieldBox, useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/amount-input.tsx
+const AMOUNT_FONT_SIZE = 28;
+const DEFAULT_CURRENCY = "SLE";
+const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit = "minor", label, placeholder, hint, error, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const decimalPlaces = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
+	const scale = unit === "major" ? 10 ** decimalPlaces : 1;
+	const show = (minor) => formatMinorUnits(minor, decimalPlaces);
+	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : show(Number(sent)));
+	const box = useFieldBox(error, disabled);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		noteId,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-amount-input",
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "baseline",
+				gap: SPACE.medium,
+				padding: "10px 14px"
+			},
+			children: [currency ? /* @__PURE__ */ jsx("span", {
+				style: {
+					color: colors.subtle,
+					fontSize: 20,
+					fontWeight: WEIGHTS.medium
+				},
+				children: currency
+			}) : null, /* @__PURE__ */ jsx("input", {
+				value: text,
+				placeholder: placeholder ?? show(0),
+				inputMode: decimalPlaces > 0 ? "decimal" : "numeric",
+				disabled,
+				...controlAttributes,
+				onFocus: box.onFocus,
+				onBlur: () => {
+					box.onBlur();
+					const amount = toMinorUnits(text, decimalPlaces);
+					if (amount !== null) reshowText(show(amount));
+				},
+				onChange: (event) => {
+					const typed = cleanAmount(event.currentTarget.value, decimalPlaces);
+					const amount = toMinorUnits(typed, decimalPlaces);
+					typeText(typed, amount === null ? "" : String(amount));
+					onChange?.(createEvent("change", { value: amount === null ? null : amount / scale }));
+				},
+				style: {
+					...BARE_INPUT_STYLE,
+					padding: 0,
+					fontSize: AMOUNT_FONT_SIZE,
+					fontWeight: WEIGHTS.bold
+				}
+			})]
+		})
+	});
+};
+function currencyMinorUnits(currency) {
+	try {
+		return new Intl.NumberFormat("en", {
+			style: "currency",
+			currency
+		}).resolvedOptions().maximumFractionDigits ?? 2;
+	} catch {
+		return 2;
+	}
+}
+function amountText(value, scale) {
+	if (value === void 0) return;
+	return Number.isFinite(value) ? String(Math.round(value * scale)) : "";
+}
+function cleanAmount(typed, decimalPlaces) {
+	const [whole = "", ...fractions] = typed.replace(/[^\d.]/g, "").split(".");
+	const digits = whole.replace(/^0+/, "") || whole.slice(0, 1);
+	if (decimalPlaces === 0 || fractions.length === 0) return groupThousands(digits);
+	const fraction = fractions.join("").slice(0, decimalPlaces);
+	return `${groupThousands(digits) || "0"}.${fraction}`;
+}
+function toMinorUnits(text, decimalPlaces) {
+	const plain = text.replaceAll(",", "");
+	if (plain === "") return null;
+	const [whole = "", fraction = ""] = plain.split(".");
+	const fractionDigits = fraction.padEnd(decimalPlaces, "0").slice(0, decimalPlaces);
+	return Number(`${whole}${fractionDigits}`);
+}
+function formatMinorUnits(minorUnits, decimalPlaces) {
+	const digits = String(Math.abs(minorUnits)).padStart(decimalPlaces + 1, "0");
+	const wholeEnd = digits.length - decimalPlaces;
+	const grouped = groupThousands(digits.slice(0, wholeEnd));
+	if (decimalPlaces === 0) return grouped;
+	return `${grouped}.${digits.slice(wholeEnd)}`;
+}
+function groupThousands(digits) {
+	const groups = [];
+	for (let end = digits.length; end > 0; end -= 3) groups.unshift(digits.slice(Math.max(0, end - 3), end));
+	return groups.join(",");
+}
+//#endregion
+export { AmountInput$1 as AmountInput };

package/dist/components/avatar.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Avatar } from "@monimesl/dot-core";
+//#region src/components/avatar.d.ts
+declare const Avatar$1: ReactComponent<typeof Avatar>;
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/components/avatar.js

@@ -0,0 +1,63 @@
+import { useTheme } from "../theme.js";
+import { WEIGHTS } from "./tokens.js";
+import { USER_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar.tsx
+const AVATAR_SIZE = {
+	small: 32,
+	medium: 40,
+	large: 56
+};
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "";
+	return (words.length === 1 ? [words[0]] : [words[0], words[words.length - 1]]).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+const Avatar = ({ name = "", image, size = "medium" }) => {
+	const { colors } = useTheme();
+	const [failed, setFailed] = useState();
+	const pixels = AVATAR_SIZE[size];
+	const letters = initials(name);
+	let content;
+	if (image && failed !== image) content = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		onError: () => setFailed(image),
+		style: {
+			width: "100%",
+			height: "100%",
+			objectFit: "cover"
+		}
+	});
+	else if (letters) content = letters;
+	else content = /* @__PURE__ */ jsx(IconSvg, {
+		artwork: USER_ARTWORK,
+		size: Math.round(pixels * .55),
+		color: "currentColor"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-avatar",
+		role: "img",
+		"aria-label": name || void 0,
+		style: {
+			display: "inline-flex",
+			flexShrink: 0,
+			alignItems: "center",
+			justifyContent: "center",
+			width: pixels,
+			height: pixels,
+			borderRadius: "50%",
+			overflow: "hidden",
+			background: colors.muted,
+			color: colors.subtle,
+			fontSize: Math.round(pixels * .4),
+			fontWeight: WEIGHTS.bold,
+			lineHeight: 1
+		},
+		children: content
+	});
+};
+//#endregion
+export { Avatar };

package/dist/components/box.js

@@ -0,0 +1,58 @@
+import { CARD_RADIUS_SCALE } from "./tokens.js";
+import { isTone, toneBackground } from "./tones.js";
+import { BACKGROUNDS } from "@monimesl/dot-core";
+//#region src/components/box.ts
+const RADIUS_SCALE = {
+	none: 0,
+	small: .5,
+	medium: 1,
+	large: CARD_RADIUS_SCALE
+};
+const FULL_RADIUS = 9999;
+const BACKGROUND_WORDS = new Set(BACKGROUNDS.words);
+function boxStyle(props, theme, look = {}) {
+	const background = props.background ?? look.background;
+	const border = props.border ?? look.border;
+	const radius = props.radius ?? look.radius;
+	const style = {};
+	if (background !== void 0) style.background = backgroundColor(background, theme);
+	if (border !== void 0) {
+		const color = border === "strong" ? theme.colors.subtle : theme.colors.border;
+		style.border = border === "none" ? "none" : `1px solid ${color}`;
+	}
+	if (radius !== void 0) {
+		style.borderRadius = radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius];
+		style.overflow = "hidden";
+	}
+	if (props.width !== void 0) {
+		style.width = cssLength(props.width);
+		style.flexShrink = 0;
+	}
+	if (props.aspect !== void 0) style.aspectRatio = props.aspect.replace(":", " / ");
+	else if (props.height !== void 0) {
+		style.height = cssLength(props.height);
+		style.flexShrink = 0;
+	}
+	if (props.minHeight !== void 0) style.minHeight = props.minHeight;
+	if (props.maxWidth !== void 0) style.maxWidth = props.maxWidth;
+	return style;
+}
+function backgroundColor(background, theme) {
+	if (isTone(background)) return toneBackground(theme.colors, background);
+	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
+	return customColor(background, theme);
+}
+function customColor(name, theme) {
+	const color = theme.customColors[name];
+	if (color === void 0 && !unknownColors.has(name)) {
+		unknownColors.add(name);
+		console.warn(`The theme has no colour named "${name}". Add it to colors.custom in dot.ts.`);
+	}
+	return color;
+}
+const unknownColors = /* @__PURE__ */ new Set();
+function cssLength(value) {
+	return value === "fill" ? "100%" : value;
+}
+//#endregion
+export { boxStyle, customColor };

package/dist/components/button.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Button } from "@monimesl/dot-core";
+//#region src/components/button.d.ts
+declare const Button$1: ReactComponent<typeof Button>;
+//#endregion
+export { Button$1 as Button };

package/dist/components/button.js

@@ -0,0 +1,42 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { LoadingIcon } from "./spinner.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button.tsx
+const Button$1 = ({ variant = "primary", disabled, loading, onClick, children }) => {
+	const { colors, radius } = useTheme();
+	const filled = variant === "primary" && !disabled;
+	let color = colors.text;
+	if (filled) color = colors.onPrimary;
+	else if (disabled) color = colors.subtle;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-button",
+		"data-variant": variant,
+		disabled: Boolean(disabled),
+		"aria-busy": loading || void 0,
+		"aria-disabled": loading || void 0,
+		onClick: onClick && !loading ? () => onClick(createEvent("click")) : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: SPACE.medium,
+			minHeight: 48,
+			padding: "12px 20px",
+			border: "none",
+			borderRadius: radius,
+			background: filled ? colors.primary : colors.muted,
+			color,
+			fontSize: FONT_SIZE.body,
+			fontWeight: WEIGHTS.bold,
+			lineHeight: "normal",
+			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled || loading ? "default" : "pointer"
+		},
+		children: [loading ? /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE.small }) : null, children]
+	});
+};
+//#endregion
+export { Button$1 as Button };

package/dist/components/carousel.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Carousel } from "@monimesl/dot-core";
+//#region src/components/carousel.d.ts
+declare const Carousel$1: ReactComponent<typeof Carousel>;
+//#endregion
+export { Carousel$1 as Carousel };