@yarcl/react 0.1.0 → 0.2.0

package/dist/plugin.js

@@ -1,80 +1,154 @@
-import { existsSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { runnerImport } from 'vite';
 import { generateCss } from "./css.js";
-const VIRTUAL_CSS = 'virtual:yarcl.css';
-const RESOLVED_CSS = '\0' + VIRTUAL_CSS;
-const PACKAGE = '@yarcl/react';
-const defaultConfig = [new URL('./yarcl.config.ts', import.meta.url), new URL('../src/yarcl.config.ts', import.meta.url)]
-    .map((url) => fileURLToPath(url))
-    .find((file) => existsSync(file));
-/**
- * Vite plugin that connects the library to the consumer's config.
- *
- * - Aliases `@yarcl/config` to the consumer's config file (or the library default).
- * - Generates `virtual:yarcl.css` from the config at build time: CSS variables on `:root`
- *   and one `yarcl-{group}-{key}` class per key. No inline styles, no runtime cost.
- * - Warns when a color's foreground fails WCAG AA contrast.
- * - Regenerates the CSS when the config file changes.
- *
- * Must be paired with a matching `paths` entry for `@yarcl/config` in the
- * consumer's `tsconfig.json`, so the types resolve to the same file.
- *
- * @example
- * ```ts
- * // vite.config.ts
- * import { yarcl } from '@yarcl/react/plugin';
- *
- * export default defineConfig({
- *   plugins: [react(), yarcl({ config: 'src/yarcl.config.ts' })],
- * });
- * ```
- */
-export function yarcl({ config = 'src/yarcl.config.ts' } = {}) {
-    let root = process.cwd();
-    let target = defaultConfig;
-    let watched = new Set();
-    return {
-        name: 'yarcl',
-        config(userConfig) {
-            root = resolve(userConfig.root ?? process.cwd());
-            const consumerConfig = resolve(root, config);
-            target = existsSync(consumerConfig) ? consumerConfig : defaultConfig;
-            return {
-                resolve: { alias: { '@yarcl/config': target } },
-                optimizeDeps: {
-                    exclude: [PACKAGE],
-                    include: ['@floating-ui/react', 'date-fns', 'date-fns/locale', 'date-fns/locale/en-US'].map((dep) => `${PACKAGE} > ${dep}`),
-                },
-                ssr: { noExternal: [PACKAGE] },
-            };
-        },
-        resolveId(id) {
-            if (id === VIRTUAL_CSS)
-                return RESOLVED_CSS;
-        },
-        async load(id) {
-            if (id !== RESOLVED_CSS)
-                return;
-            const { module, dependencies } = await runnerImport(target, {
-                configFile: false,
-                root,
-                ssr: { noExternal: [PACKAGE] },
-                logLevel: 'error',
-            });
-            watched = new Set([target, ...dependencies.map((dep) => resolve(root, dep))]);
-            watched.forEach((file) => this.addWatchFile(file));
-            return generateCss(module.default, (message) => this.warn(message));
-        },
-        handleHotUpdate({ file, server, modules }) {
-            if (!watched.has(file))
-                return;
-            const css = server.moduleGraph.getModuleById(RESOLVED_CSS);
-            if (!css)
-                return;
-            server.moduleGraph.invalidateModule(css);
-            return [...modules, css];
-        },
-    };
+import { assertConfigMapping } from "./setup.js";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, extname, resolve } from "node:path";
+import { createJiti } from "jiti";
+import { createUnplugin } from "unplugin";
+//#region src/plugin.ts
+var VIRTUAL_CSS = "@yarcl/react/styles.css";
+var RESOLVED_CSS = `\0${VIRTUAL_CSS}`;
+var CONFIG_MODULE = "@yarcl/config";
+var PACKAGE = "@yarcl/react";
+var selfRequire = createRequire(typeof __filename === "string" ? __filename : import.meta.url);
+var extensions = [
+	"",
+	".ts",
+	".tsx",
+	".mts",
+	".cts",
+	".js",
+	".jsx",
+	".mjs",
+	".cjs",
+	".json"
+];
+var importPattern = /(?:\bimport\s*(?:[\s\S]*?\sfrom\s*)?|\bexport\s*[\s\S]*?\sfrom\s*|\bimport\s*\()(['"])(\.{1,2}\/[^'"]+)\1/g;
+function localDependency(importer, specifier) {
+	const candidate = resolve(dirname(importer), specifier);
+	for (const extension of extensions) {
+		const file = `${candidate}${extension}`;
+		if (existsSync(file)) return file;
+	}
+	for (const extension of extensions.slice(1)) {
+		const file = resolve(candidate, `index${extension}`);
+		if (existsSync(file)) return file;
+	}
 }
+async function configDependencies(entry) {
+	const dependencies = /* @__PURE__ */ new Set();
+	const visit = async (file) => {
+		if (dependencies.has(file)) return;
+		dependencies.add(file);
+		if (extname(file) === ".json") return;
+		const imports = [...(await readFile(file, "utf8")).matchAll(importPattern)].map((match) => localDependency(file, match[2])).filter((dependency) => dependency !== void 0);
+		await Promise.all(imports.map(visit));
+	};
+	await visit(entry);
+	return dependencies;
+}
+function defaultConfig() {
+	return selfRequire.resolve("@yarcl/react/defaults");
+}
+/** Shared yarcl plugin implementation used by every build-tool adapter. */
+var yarclPlugin = createUnplugin((options = {}, meta) => {
+	const configPath = options.config ?? "src/yarcl.config.ts";
+	let root = resolve(options.root ?? process.cwd());
+	let target = "";
+	let componentStyles = "";
+	let generatedStyles = "";
+	let staticStyles = "";
+	let referenceStyles = "";
+	let watched = /* @__PURE__ */ new Set();
+	const prepare = () => {
+		assertConfigMapping(root, configPath, meta.framework);
+		const consumerConfig = resolve(root, configPath);
+		const fallback = defaultConfig();
+		target = existsSync(consumerConfig) ? consumerConfig : fallback;
+		staticStyles = resolve(dirname(fallback), "styles.css");
+		referenceStyles = resolve(dirname(fallback), "reference/reference.css");
+	};
+	return {
+		name: "yarcl",
+		enforce: "pre",
+		buildStart() {
+			prepare();
+		},
+		resolveId: {
+			filter: { id: /^(?:@yarcl\/config|@yarcl\/react\/styles\.css)$/ },
+			handler(id) {
+				if (id === CONFIG_MODULE) return meta.framework === "esbuild" ? void 0 : target;
+				if (id === VIRTUAL_CSS) return RESOLVED_CSS;
+			}
+		},
+		load: {
+			filter: { id: /(?:@yarcl\/react\/styles\.css|\/(?:styles|reference)\.css)$/ },
+			async handler(id) {
+				if (meta.framework === "rollup" && (id === staticStyles || id === referenceStyles)) {
+					componentStyles += `${await readFile(id, "utf8")}\n`;
+					return "";
+				}
+				if (id !== RESOLVED_CSS) return;
+				const config = await createJiti(resolve(root, "package.json"), { moduleCache: false }).import(target, { default: true });
+				watched = existsSync(target) ? await configDependencies(target) : /* @__PURE__ */ new Set([target]);
+				watched.forEach((file) => this.addWatchFile(file));
+				const css = generateCss(config, (message) => this.warn(message));
+				if (meta.framework === "rollup") {
+					generatedStyles = css;
+					return "";
+				}
+				return css;
+			}
+		},
+		rollup: { generateBundle() {
+			this.emitFile({
+				type: "asset",
+				fileName: "yarcl.css",
+				source: `${generatedStyles}\n${componentStyles}`
+			});
+		} },
+		vite: {
+			config(userConfig) {
+				root = resolve(options.root ?? userConfig.root ?? process.cwd());
+				return {
+					optimizeDeps: {
+						exclude: [PACKAGE],
+						include: [
+							"@floating-ui/react",
+							"date-fns",
+							"date-fns/locale",
+							"date-fns/locale/en-US"
+						].map((dependency) => `${PACKAGE} > ${dependency}`)
+					},
+					ssr: { noExternal: [PACKAGE] }
+				};
+			},
+			handleHotUpdate({ file, server, modules }) {
+				if (!watched.has(file)) return;
+				const css = server.moduleGraph.getModuleById(RESOLVED_CSS);
+				if (!css) return;
+				server.moduleGraph.invalidateModule(css);
+				return [...modules, css];
+			}
+		},
+		webpack(compiler) {
+			root = resolve(options.root ?? compiler.context);
+		},
+		rspack(compiler) {
+			root = resolve(options.root ?? compiler.context);
+		},
+		esbuild: {
+			config(buildOptions) {
+				root = resolve(options.root ?? buildOptions.absWorkingDir ?? process.cwd());
+				prepare();
+			},
+			setup(build) {
+				build.onResolve({ filter: /^@yarcl\/config$/ }, () => ({ path: target }));
+			},
+			loader: "css"
+		}
+	};
+});
+//#endregion
+export { yarclPlugin };

package/dist/reference/DemoYarcl.d.ts

@@ -0,0 +1,12 @@
+import '@yarcl/react/styles.css';
+import '../styles.css';
+/** Props for {@link DemoYarcl}. */
+export interface DemoYarclProps {
+    /** Page heading. */
+    title?: string;
+}
+/**
+ * A package-wide demo for validating a yarcl installation and previewing its active config.
+ * Import from `@yarcl/react/demo`.
+ */
+export declare function DemoYarcl({ title }: DemoYarclProps): import("react").JSX.Element;

package/dist/reference/DemoYarcl.js

@@ -0,0 +1,312 @@
+import { ButtonGroup } from "../components/ButtonGroup.js";
+import { Spinner } from "../components/Spinner.js";
+import { Button } from "../components/Button.js";
+import { ToggleGroup } from "../components/ToggleGroup.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input } from "../components/Input.js";
+import { Textarea } from "../components/Textarea.js";
+import { NumberInput } from "../components/NumberInput.js";
+import { Checkbox } from "../components/Checkbox.js";
+import { RadioGroup } from "../components/RadioGroup.js";
+import { Radio } from "../components/Radio.js";
+import { Switch } from "../components/Switch.js";
+import { Slider } from "../components/Slider.js";
+import { Label } from "../components/Label.js";
+import { Field } from "../components/Field.js";
+import { Text } from "../components/Text.js";
+import { Heading } from "../components/Heading.js";
+import { Link } from "../components/Link.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { Stack } from "../components/Stack.js";
+import { Inline } from "../components/Inline.js";
+import { Card } from "../components/Card.js";
+import { Divider } from "../components/Divider.js";
+import { VisuallyHidden } from "../components/VisuallyHidden.js";
+import { Popover } from "../components/Popover.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { HoverCard } from "../components/HoverCard.js";
+import { Menu } from "../components/Menu.js";
+import { Select } from "../components/Select.js";
+import { Badge } from "../components/Badge.js";
+import { Combobox } from "../components/Combobox.js";
+import { DatePicker } from "../components/DatePicker.js";
+import { Dialog } from "../components/Dialog.js";
+import { Drawer } from "../components/Drawer.js";
+import { CommandPalette } from "../components/CommandPalette.js";
+import { Toaster } from "../components/Toast.js";
+import { Accordion } from "../components/Accordion.js";
+import { Tabs } from "../components/Tabs.js";
+import { Pagination } from "../components/Pagination.js";
+import { Table } from "../components/Table.js";
+import { Avatar, AvatarGroup } from "../components/Avatar.js";
+import { Alert } from "../components/Alert.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { Progress } from "../components/Progress.js";
+import { EmptyState } from "../components/EmptyState.js";
+import { DesignReference } from "./DesignReference.js";
+import "@yarcl/react/styles.css";
+import "../styles.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/reference/DemoYarcl.tsx
+var components = [
+	Accordion,
+	Alert,
+	Avatar,
+	AvatarGroup,
+	Badge,
+	Breadcrumb,
+	Button,
+	ButtonGroup,
+	Card,
+	Checkbox,
+	Combobox,
+	CommandPalette,
+	DatePicker,
+	Dialog,
+	Divider,
+	Drawer,
+	EmptyState,
+	Field,
+	Heading,
+	HoverCard,
+	IconButton,
+	Inline,
+	Input,
+	Label,
+	Link,
+	Menu,
+	NumberInput,
+	Pagination,
+	Popover,
+	Progress,
+	Radio,
+	RadioGroup,
+	Select,
+	Skeleton,
+	Slider,
+	Spinner,
+	Stack,
+	Switch,
+	Table,
+	Tabs,
+	Text,
+	Textarea,
+	Toaster,
+	ToggleGroup,
+	Tooltip,
+	VisuallyHidden
+];
+var options = [{
+	value: "first",
+	label: "First option"
+}, {
+	value: "second",
+	label: "Second option"
+}];
+/**
+* A package-wide demo for validating a yarcl installation and previewing its active config.
+* Import from `@yarcl/react/demo`.
+*/
+function DemoYarcl({ title = "yarcl demo" }) {
+	const componentNames = components.map((component) => component.name).join(",");
+	return /* @__PURE__ */ jsxs(Stack, {
+		"data-yarcl-components": componentNames,
+		children: [
+			/* @__PURE__ */ jsx(DesignReference, { title }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				children: "Components"
+			}),
+			/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+				/* @__PURE__ */ jsxs(Inline, { children: [
+					/* @__PURE__ */ jsx(Button, { children: "Button" }),
+					/* @__PURE__ */ jsx(IconButton, {
+						"aria-label": "Add item",
+						children: "+"
+					}),
+					/* @__PURE__ */ jsx(Badge, { children: "Badge" }),
+					/* @__PURE__ */ jsx(Avatar, { name: "Ada Lovelace" }),
+					/* @__PURE__ */ jsxs(AvatarGroup, {
+						"aria-label": "Team",
+						children: [/* @__PURE__ */ jsx(Avatar, { name: "Ada Lovelace" }), /* @__PURE__ */ jsx(Avatar, { name: "Grace Hopper" })]
+					}),
+					/* @__PURE__ */ jsx(Spinner, { label: "Loading" })
+				] }),
+				/* @__PURE__ */ jsxs(ButtonGroup, {
+					"aria-label": "Actions",
+					children: [/* @__PURE__ */ jsx(Button, { children: "Save" }), /* @__PURE__ */ jsx(Button, { children: "Cancel" })]
+				}),
+				/* @__PURE__ */ jsxs(ToggleGroup, {
+					type: "single",
+					defaultValue: "one",
+					"aria-label": "View",
+					children: [/* @__PURE__ */ jsx(ToggleGroup.Item, {
+						value: "one",
+						children: "One"
+					}), /* @__PURE__ */ jsx(ToggleGroup.Item, {
+						value: "two",
+						children: "Two"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: "Name",
+					children: /* @__PURE__ */ jsx(Input, { placeholder: "Ada Lovelace" })
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: "yarcl-demo-notes",
+					children: "Notes"
+				}),
+				/* @__PURE__ */ jsx(Textarea, { id: "yarcl-demo-notes" }),
+				/* @__PURE__ */ jsx(NumberInput, {
+					"aria-label": "Quantity",
+					defaultValue: 1
+				}),
+				/* @__PURE__ */ jsxs(Inline, { children: [
+					/* @__PURE__ */ jsx(Checkbox, {
+						defaultChecked: true,
+						children: "Checkbox"
+					}),
+					/* @__PURE__ */ jsx(Radio, {
+						name: "yarcl-demo-radio",
+						value: "radio",
+						defaultChecked: true,
+						children: "Radio"
+					}),
+					/* @__PURE__ */ jsx(Switch, {
+						defaultChecked: true,
+						children: "Switch"
+					})
+				] }),
+				/* @__PURE__ */ jsxs(RadioGroup, {
+					label: "Choice",
+					defaultValue: "first",
+					children: [/* @__PURE__ */ jsx(Radio, {
+						value: "first",
+						children: "First"
+					}), /* @__PURE__ */ jsx(Radio, {
+						value: "second",
+						children: "Second"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Slider, {
+					"aria-label": "Amount",
+					defaultValue: 50
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					"aria-label": "Select option",
+					options,
+					defaultValue: "first"
+				}),
+				/* @__PURE__ */ jsx(Combobox, {
+					"aria-label": "Search options",
+					options
+				}),
+				/* @__PURE__ */ jsx(DatePicker, { "aria-label": "Choose date" }),
+				/* @__PURE__ */ jsx(Progress, {
+					value: 60,
+					label: "Progress",
+					showValue: true
+				}),
+				/* @__PURE__ */ jsx(Alert, {
+					title: "Installation works",
+					children: "Every public component is available to this build."
+				}),
+				/* @__PURE__ */ jsx(Skeleton, {
+					lines: 2,
+					"aria-label": "Loading content"
+				}),
+				/* @__PURE__ */ jsx(EmptyState, {
+					title: "Nothing here",
+					description: "This is the empty state component."
+				}),
+				/* @__PURE__ */ jsxs(Breadcrumb, {
+					"aria-label": "Breadcrumb",
+					children: [/* @__PURE__ */ jsx(Breadcrumb.Item, {
+						href: "#",
+						children: "Home"
+					}), /* @__PURE__ */ jsx(Breadcrumb.Item, { children: "Demo" })]
+				}),
+				/* @__PURE__ */ jsxs(Text, { children: [
+					"Text with a ",
+					/* @__PURE__ */ jsx(Link, {
+						href: "#",
+						children: "link"
+					}),
+					" and ",
+					/* @__PURE__ */ jsx(VisuallyHidden, { children: "accessible context" }),
+					"."
+				] }),
+				/* @__PURE__ */ jsxs(Inline, { children: [
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: "Tooltip content",
+						children: /* @__PURE__ */ jsx(Button, { children: "Tooltip" })
+					}),
+					/* @__PURE__ */ jsx(HoverCard, {
+						content: "Hover card content",
+						children: /* @__PURE__ */ jsx(Button, { children: "Hover card" })
+					}),
+					/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Button, { children: "Popover" }) }), /* @__PURE__ */ jsx(Popover.Content, { children: "Popover content" })] }),
+					/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { children: "Menu" }) }), /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Menu.Item, { children: "Menu item" }) })] }),
+					/* @__PURE__ */ jsx(Dialog, {
+						trigger: /* @__PURE__ */ jsx(Button, { children: "Dialog" }),
+						title: "Dialog"
+					}),
+					/* @__PURE__ */ jsx(Drawer, {
+						trigger: /* @__PURE__ */ jsx(Button, { children: "Drawer" }),
+						title: "Drawer"
+					}),
+					/* @__PURE__ */ jsx(CommandPalette, {
+						commands: [],
+						trigger: /* @__PURE__ */ jsx(Button, { children: "Commands" })
+					})
+				] }),
+				/* @__PURE__ */ jsxs(Tabs, {
+					defaultValue: "first",
+					children: [
+						/* @__PURE__ */ jsxs(Tabs.List, {
+							"aria-label": "Demo tabs",
+							children: [/* @__PURE__ */ jsx(Tabs.Trigger, {
+								value: "first",
+								children: "First"
+							}), /* @__PURE__ */ jsx(Tabs.Trigger, {
+								value: "second",
+								children: "Second"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Tabs.Panel, {
+							value: "first",
+							children: "First panel"
+						}),
+						/* @__PURE__ */ jsx(Tabs.Panel, {
+							value: "second",
+							children: "Second panel"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Accordion, {
+					type: "single",
+					defaultValue: "first",
+					children: /* @__PURE__ */ jsxs(Accordion.Item, {
+						value: "first",
+						children: [/* @__PURE__ */ jsx(Accordion.Trigger, { children: "Details" }), /* @__PURE__ */ jsx(Accordion.Content, { children: "Accordion content" })]
+					})
+				}),
+				/* @__PURE__ */ jsx(Pagination, {
+					count: 5,
+					"aria-label": "Demo pages"
+				}),
+				/* @__PURE__ */ jsx(Table, {
+					caption: "Demo table",
+					children: /* @__PURE__ */ jsx(Table.Body, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [/* @__PURE__ */ jsx(Table.HeaderCell, {
+						scope: "row",
+						children: "Status"
+					}), /* @__PURE__ */ jsx(Table.Cell, { children: "Ready" })] }) })
+				})
+			] }) }),
+			/* @__PURE__ */ jsx(Toaster, {})
+		]
+	});
+}
+//#endregion
+export { DemoYarcl };

package/dist/reference/DesignReference.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import './reference.css';
+/** Props for {@link DesignReference}. */
+export interface DesignReferenceProps {
+    /**
+     * Page heading.
+     * @default 'Design reference'
+     */
+    title?: ReactNode;
+}
+/**
+ * A living reference of the active design system, rendered from the consumer's config:
+ * colors with contrast ratios, the size scale with live controls, radii, variants, spacing,
+ * shadows, fonts, text styles, heading levels, density, other tokens and defaults.
+ * Import from `@yarcl/react/reference`.
+ *
+ * @example
+ * ```tsx
+ * import { DesignReference } from '@yarcl/react/reference';
+ *
+ * <DesignReference title="Acme design system" />
+ * ```
+ */
+export declare function DesignReference({ title }: DesignReferenceProps): import("react").JSX.Element;