@nxgt/mail-ui 0.1.0

package/components/timeline.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, getCurrentInstance, useAttrs } from 'vue';
+import { sharedMessage, type TimelineItem, type TimelineTone } from './ui';
+
+/**
+ * material-vue's Timeline: events one under the other, each a toned marker
+ * on a line, its title, a time on the right, and a description.
+ *
+ * An e-mail is built before it is sent, so a time is a label you write —
+ * a placeholder, as `{{ placeholder('signedInAt') }}` — never a relative time
+ * computed at build time. There is no loading state: an e-mail does not load.
+ */
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{ items: readonly TimelineItem[]; empty?: string }>();
+
+const MARKER: Record<TimelineTone, string> = {
+	default: 'border-border bg-muted text-muted-foreground',
+	primary: 'border-primary-40 bg-primary-15 text-primary',
+	success: 'border-success-40 bg-success-15 text-success',
+	info: 'border-info-40 bg-info-15 text-info',
+	warning: 'border-warning-40 bg-warning-15 text-warning',
+	error: 'border-error-40 bg-error-15 text-error',
+};
+
+const globals: Record<string, unknown> =
+	getCurrentInstance()?.appContext.config.globalProperties ?? {};
+const emptyText = computed(
+	() =>
+		props.empty ??
+		sharedMessage(globals, 'common.timeline.empty', 'No activity yet'),
+);
+const attrs = useAttrs();
+const classes = computed(() => twMerge('mb-4 w-full', attrs.class as string));
+const emptyClasses = computed(() =>
+	twMerge(
+		'mb-4 py-6 text-center text-sm text-muted-foreground',
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <table v-if="props.items.length > 0" v-bind="{ ...attrs, class: undefined }" :class="classes" role="presentation" cellpadding="0" cellspacing="0">
+    <template v-for="(item, position) in props.items" :key="item.id">
+      <tr>
+        <td colspan="2" class="w-8 align-top">
+          <span :class="`block h-8 w-8 rounded-full border border-solid text-center text-[12px] leading-[30px] ${MARKER[item.tone ?? 'default']}`" aria-hidden="true"><span data-maizzle-html-only>&#9679;</span></span>
+        </td>
+        <td class="pl-3 align-top">
+          <table class="w-full" role="presentation" cellpadding="0" cellspacing="0">
+            <tr>
+              <td class="pt-1 align-top text-sm font-medium leading-6 text-foreground">{{ item.title }}</td>
+              <td v-if="item.timestampLabel" class="whitespace-nowrap pl-3 pt-1 text-right align-top text-xs leading-6 text-muted-foreground">{{ item.timestampLabel }}</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td :class="['w-4 text-[1px] leading-px', position < props.items.length - 1 && 'border-r [border-right-style:solid] border-border']"><span data-maizzle-html-only>&zwj;</span></td>
+        <td class="w-4 text-[1px] leading-px"><span data-maizzle-html-only>&zwj;</span></td>
+        <td :class="['pl-3 align-top', position < props.items.length - 1 && 'pb-6']">
+          <p v-if="item.description" class="m-0 text-sm text-muted-foreground">{{ item.description }}</p>
+        </td>
+      </tr>
+    </template>
+  </table>
+  <p v-else v-bind="{ ...attrs, class: undefined }" :class="emptyClasses">{{ emptyText }}</p>
+</template>

package/components/typography.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { twMerge } from '@maizzle/framework';
+import { computed, useAttrs } from 'vue';
+
+/** material-vue's Typography, on the tag an e-mail reads it as. */
+type Variant =
+	| 'normal'
+	| 'headline-large'
+	| 'headline-medium'
+	| 'headline-small'
+	| 'title-large'
+	| 'title-medium'
+	| 'title-small'
+	| 'body-medium'
+	| 'body-small'
+	| 'caption';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+	defineProps<{
+		variant?: Variant;
+		/** Default `h1` for a headline, `h2`–`h4` for a title, else `p`. */
+		as?: string;
+	}>(),
+	{ variant: 'normal' },
+);
+
+const VARIANT: Record<Variant, string> = {
+	normal: 'text-sm',
+	'headline-large': 'text-4xl font-semibold',
+	'headline-medium': 'text-3xl font-semibold',
+	'headline-small': 'text-2xl font-semibold',
+	'title-large': 'text-xl font-semibold',
+	'title-medium': 'text-lg font-semibold',
+	'title-small': 'text-base font-semibold',
+	'body-medium': 'text-sm',
+	'body-small': 'text-xs',
+	caption: 'text-[10px] text-muted-foreground',
+};
+
+const TAG: Partial<Record<Variant, string>> = {
+	'headline-large': 'h1',
+	'headline-medium': 'h1',
+	'headline-small': 'h1',
+	'title-large': 'h2',
+	'title-medium': 'h3',
+	'title-small': 'h4',
+};
+
+const attrs = useAttrs();
+const tag = computed(() => props.as ?? TAG[props.variant] ?? 'p');
+const classes = computed(() =>
+	twMerge(
+		'm-0 mb-4 text-foreground',
+		VARIANT[props.variant],
+		attrs.class as string,
+	),
+);
+</script>
+
+<template>
+  <component :is="tag" v-bind="{ ...attrs, class: undefined }" :class="classes"><slot /></component>
+</template>

package/components/ui.ts

@@ -0,0 +1,166 @@
+/**
+ * What the components share. Shipped as source: Maizzle compiles it with the
+ * components that import it.
+ */
+import { Fragment, inject, isVNode, type VNode } from 'vue';
+
+/** material-vue's colours; `default` is the foreground. */
+export type Color =
+	| 'primary'
+	| 'secondary'
+	| 'info'
+	| 'success'
+	| 'warning'
+	| 'error'
+	| 'default';
+
+/** material-vue's tones for a status: its colours but `default`. */
+export type Tone = 'info' | 'success' | 'warning' | 'error';
+
+export interface Brand {
+	readonly name: string;
+	readonly url?: string;
+	readonly logo?: {
+		readonly src: string;
+		readonly width?: number;
+		readonly alt?: string;
+	};
+}
+
+export interface UiContext {
+	readonly brand: Brand;
+	readonly css: string;
+}
+
+/** Which part of an `NxTable` a cell is in, as its `NxTableHeader`/`Body`/`Footer` says. */
+export const TABLE_PART = 'nxgt:mail-ui:table-part';
+export type TablePart = 'header' | 'body' | 'footer';
+
+export type TimelineTone =
+	| 'default'
+	| 'primary'
+	| 'success'
+	| 'info'
+	| 'warning'
+	| 'error';
+
+/** An event of `NxTimeline`: material-vue's, with a written time only. */
+export interface TimelineItem {
+	readonly id: string;
+	readonly title: string;
+	readonly description?: string;
+	/** The time, as written: a placeholder, or a date you format. */
+	readonly timestampLabel?: string;
+	readonly tone?: TimelineTone;
+}
+
+/** The pixel size of the `NxAvatar`s inside, as `NxAvatar` or `NxAvatarGroup` says. */
+export const AVATAR_SIZE = 'nxgt:mail-ui:avatar-size';
+
+/** The brand and theme `ui()` provides. A component used without it **throws**. */
+export function useUi(component: string): UiContext {
+	const context = inject<UiContext | undefined>('nxgt:mail-ui', undefined);
+	if (context === undefined) {
+		throw new Error(
+			`${component}: ui() is not in the plugins of defineMailConfig`,
+		);
+	}
+	return context;
+}
+
+/** material-vue's Button variants, which its Chip takes too. */
+export type ColourVariant = 'filled' | 'tonal' | 'outlined' | 'ghost' | 'link';
+
+/** The token of a colour: `default` is the foreground. */
+const token = (color: Color) => (color === 'default' ? 'foreground' : color);
+
+/**
+ * The classes of a `variant` in a `color`, as material-vue's Button colours
+ * them: `NxButton`'s and `NxChip`'s, which each add their own.
+ */
+export function colourVariant(variant: ColourVariant, color: Color): string {
+	switch (variant) {
+		case 'filled':
+			return color === 'default'
+				? 'bg-foreground text-background'
+				: `bg-${color} text-${color}-foreground`;
+		case 'tonal':
+			return `bg-${token(color)}-15 text-${token(color)}`;
+		case 'outlined':
+			return `border border-solid border-${token(color)}-50 text-${token(color)}`;
+		case 'ghost':
+			return 'text-foreground';
+		case 'link':
+			return `text-${token(color)}`;
+	}
+}
+
+/**
+ * The components a slot holds, out of any `v-for` fragment, without its text
+ * or comments: what `NxAvatarGroup` and `NxSteps` lay out one by one.
+ */
+export function slotComponents(nodes: readonly unknown[] | undefined): VNode[] {
+	return (nodes ?? []).flatMap((node) => {
+		if (!isVNode(node)) return [];
+		if (node.type === Fragment) {
+			return slotComponents(Array.isArray(node.children) ? node.children : []);
+		}
+		return typeof node.type === 'symbol' ? [] : [node];
+	});
+}
+
+/**
+ * `t(key, args)` when `@nxgt/mail-i18n` is listed, else `fallback`: a shared
+ * message a component writes, in English without the i18n plugin.
+ */
+export function sharedMessage(
+	globals: Record<string, unknown>,
+	key: string,
+	fallback: string,
+	args?: Record<string, unknown>,
+): string {
+	return typeof globals.t === 'function'
+		? (globals.t(key, args) as string)
+		: fallback;
+}
+
+/** Which way a figure moved, as material-vue's StatCard tones its delta. */
+export type DeltaTone = 'up' | 'down' | 'neutral';
+
+/** A tone's arrow and colour. */
+const DELTA_LOOK: Record<DeltaTone, { glyph: string; colour: string }> = {
+	up: { glyph: '\u25B2', colour: 'text-success' },
+	down: { glyph: '\u25BC', colour: 'text-error' },
+	neutral: { glyph: '\u2013', colour: 'text-muted-foreground' },
+};
+
+/**
+ * A delta as material-vue's `formatStatDelta` writes it — `+12`, `-3`, `0` —
+ * with its tone, a glyph for its arrow (an e-mail has no icon font), and its
+ * colour. A string is written as given, `neutral` unless `tone` says.
+ */
+export function deltaOf(
+	delta: number | string,
+	tone?: DeltaTone,
+): { label: string; tone: DeltaTone; glyph: string; colour: string } {
+	const resolved: { label: string; tone: DeltaTone } =
+		typeof delta === 'string'
+			? { label: delta, tone: tone ?? 'neutral' }
+			: delta > 0
+				? { label: `+${delta}`, tone: tone ?? 'up' }
+				: delta < 0
+					? { label: `${delta}`, tone: tone ?? 'down' }
+					: { label: '0', tone: tone ?? 'neutral' };
+	return { ...resolved, ...DELTA_LOOK[resolved.tone] };
+}
+
+/** material-vue's small uppercase label over a figure or a list. */
+export const EYEBROW =
+	'm-0 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground';
+
+/** A link of `NxSeeAlso`, as material-vue's. */
+export interface SeeAlsoItem {
+	readonly id?: string;
+	readonly title: string;
+	readonly href: string;
+}

package/dist/catalogues.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The messages the layouts and templates share, in `en` and `fr`, for
+ * `@nxgt/mail-i18n`:
+ *
+ * ```ts
+ * i18n({ locales: ['en', 'fr'], catalogues: [uiCatalogues] })
+ * ```
+ *
+ * The project's `locales/<locale>.json` overrides any of them key by key. A
+ * project in another locale writes the `common` keys itself.
+ */
+export declare const uiCatalogues: {
+    readonly en: {
+        readonly common: {
+            readonly greeting: "Hello {name},";
+            readonly avatarGroup: {
+                readonly more: "{count, plural, other {# more}}";
+            };
+            readonly timeline: {
+                readonly empty: "No activity yet";
+            };
+            readonly metrics: {
+                readonly ofTarget: "of {target}";
+                readonly thisPeriod: "This period";
+                readonly lastPeriod: "Last period";
+            };
+            readonly seeAlso: "See also";
+            readonly footer: {
+                readonly why: "You received this e-mail because you have an account with {brand}.";
+                readonly ignore: "If you did not ask for this, you can ignore this e-mail.";
+            };
+        };
+    };
+    readonly fr: {
+        readonly common: {
+            readonly greeting: "Bonjour {name},";
+            readonly avatarGroup: {
+                readonly more: "{count, plural, one {# autre} other {# autres}}";
+            };
+            readonly timeline: {
+                readonly empty: "Aucune activité pour le moment";
+            };
+            readonly metrics: {
+                readonly ofTarget: "sur {target}";
+                readonly thisPeriod: "Cette période";
+                readonly lastPeriod: "Période précédente";
+            };
+            readonly seeAlso: "Voir aussi";
+            readonly footer: {
+                readonly why: "Vous recevez cet e-mail parce que vous avez un compte chez {brand}.";
+                readonly ignore: "Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail.";
+            };
+        };
+    };
+};
+//# sourceMappingURL=catalogues.d.ts.map

package/dist/catalogues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalogues.d.ts","sourceRoot":"","sources":["../src/catalogues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `@nxgt/mail-ui` — e-mail components in the style of `@nxgt/material-vue`,
+ * for a Maizzle project.
+ *
+ * ```ts
+ * // maizzle.config.ts
+ * import { defineMailConfig } from '@nxgt/mail-config';
+ * import { i18n } from '@nxgt/mail-i18n';
+ * import { ui, uiCatalogues } from '@nxgt/mail-ui';
+ *
+ * export default defineMailConfig({
+ *   plugins: [
+ *     ui({ brand: { name: 'Acme', url: 'https://acme.example' } }),
+ *     i18n({ locales: ['en', 'fr'], catalogues: [uiCatalogues] }),
+ *   ],
+ * });
+ * ```
+ *
+ * A template writes `<NxLayout>`, `<NxButton href="…">`, `<NxCard>`, … with
+ * material-vue's variants, colours and sizes, rendered with tables and
+ * inlined styles.
+ */
+import './vue';
+export { uiCatalogues } from './catalogues';
+export { type Brand, COMPONENTS_DIR, UI_CONTEXT, type UiContext, type UiOptions, ui, } from './plugin';
+export { THEME_FILE } from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EACN,KAAK,KAAK,EACV,cAAc,EACd,UAAU,EACV,KAAK,SAAS,EACd,KAAK,SAAS,EACd,EAAE,GACF,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,214 @@
+// src/catalogues.ts
+var uiCatalogues = {
+  en: {
+    common: {
+      greeting: "Hello {name},",
+      avatarGroup: { more: "{count, plural, other {# more}}" },
+      timeline: { empty: "No activity yet" },
+      metrics: {
+        ofTarget: "of {target}",
+        thisPeriod: "This period",
+        lastPeriod: "Last period"
+      },
+      seeAlso: "See also",
+      footer: {
+        why: "You received this e-mail because you have an account with {brand}.",
+        ignore: "If you did not ask for this, you can ignore this e-mail."
+      }
+    }
+  },
+  fr: {
+    common: {
+      greeting: "Bonjour {name},",
+      avatarGroup: { more: "{count, plural, one {# autre} other {# autres}}" },
+      timeline: { empty: "Aucune activité pour le moment" },
+      metrics: {
+        ofTarget: "sur {target}",
+        thisPeriod: "Cette période",
+        lastPeriod: "Période précédente"
+      },
+      seeAlso: "Voir aussi",
+      footer: {
+        why: "Vous recevez cet e-mail parce que vous avez un compte chez {brand}.",
+        ignore: "Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail."
+      }
+    }
+  }
+};
+// src/plugin.ts
+import { existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "node:fs";
+import { dirname as dirname2, resolve as resolve2 } from "node:path";
+import { fileURLToPath as fileURLToPath3 } from "node:url";
+import { isMainThread } from "node:worker_threads";
+import { defineMailPlugin } from "@nxgt/mail-config";
+
+// src/packaged.ts
+import { existsSync, readdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import Components from "unplugin-vue-components/vite";
+var PACKAGED = /[\\/]node_modules[\\/].*\.vue(\?vue.*)?$/;
+var MAIZZLE = /[\\/]node_modules[\\/]@maizzle[\\/]framework[\\/]/;
+function maizzleComponentsDir(from) {
+  for (let dir = from;; dir = dirname(dir)) {
+    const candidate = join(dir, "node_modules/@maizzle/framework/dist/components");
+    if (existsSync(candidate))
+      return candidate;
+    if (dirname(dir) === dir) {
+      throw new Error("ui: @maizzle/framework is not installed beside @nxgt/mail-ui");
+    }
+  }
+}
+var pascalCase = (name) => name.replace(/[-_\s]+(.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (c) => c.toUpperCase());
+function componentName(file, prefix) {
+  const name = pascalCase(file.slice(0, -".vue".length));
+  if (prefix === undefined)
+    return name;
+  return prefix + (name.startsWith(prefix) ? name.slice(prefix.length) : name);
+}
+function fileForTag(folders, tag) {
+  for (const { path, prefix } of folders) {
+    if (!existsSync(path))
+      continue;
+    const file = readdirSync(path).filter((entry) => entry.endsWith(".vue")).sort().find((entry) => componentName(entry, prefix) === tag);
+    if (file !== undefined)
+      return join(path, file);
+  }
+  return;
+}
+function packagedComponents(ours) {
+  const builtins = maizzleComponentsDir(dirname(fileURLToPath(import.meta.url)));
+  let root = process.cwd();
+  return [
+    {
+      name: "nxgt:mail-ui:root",
+      configResolved(config) {
+        root = config.root;
+      }
+    },
+    Components({
+      include: [PACKAGED],
+      exclude: [MAIZZLE],
+      dirs: [],
+      resolvers: [
+        (name) => fileForTag([{ path: resolve(root, "components") }, ours, { path: builtins }], name)
+      ],
+      dts: false
+    })
+  ];
+}
+
+// src/theme.ts
+import { readFileSync } from "node:fs";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+var THEME_FILE = fileURLToPath2(new URL("../theme.css", import.meta.url));
+var TOKEN = /^[a-z][a-z0-9-]*$/;
+var VALUE = /^(?!.*(?:\/\*|\*\/))[^;{}<>"'\\\r\n]+$/;
+function declaredTokens(css) {
+  return new Set(Array.from(css.matchAll(/^\s*--([a-z][a-z0-9-]*)\s*:/gm), (m) => m[1]));
+}
+function themeCss(theme) {
+  const css = readFileSync(THEME_FILE, "utf8");
+  const tokens = declaredTokens(css);
+  const overrides = [];
+  for (const [token, value] of Object.entries(theme)) {
+    if (!TOKEN.test(token) || !tokens.has(token)) {
+      throw new TypeError(`ui: theme.${token} is not a token of the theme — name one of theme.css without its --, as color-primary`);
+    }
+    if (typeof value !== "string" || !VALUE.test(value.trim())) {
+      throw new TypeError(`ui: theme.${token} must be a CSS value, as #0f766e or 8px`);
+    }
+    overrides.push(`	--${token}: ${value.trim()};`);
+  }
+  return overrides.length === 0 ? css : `${css}
+@theme {
+${overrides.join(`
+`)}
+}
+`;
+}
+
+// src/plugin.ts
+var UI_CONTEXT = "nxgt:mail-ui";
+var TYPES_FILE = ".maizzle/nxgt-mail-ui.d.ts";
+var TYPES_SOURCE = [
+  "// Generated by @nxgt/mail-ui each time the config loads. Never edited, never committed:",
+  "// it gives the templates `brand`.",
+  "import type {} from '@nxgt/mail-ui';",
+  ""
+].join(`
+`);
+function writeTypes() {
+  const file = resolve2(process.cwd(), TYPES_FILE);
+  if (existsSync2(file) && readFileSync2(file, "utf8") === TYPES_SOURCE)
+    return;
+  mkdirSync(dirname2(file), { recursive: true });
+  writeFileSync(file, TYPES_SOURCE);
+}
+var COMPONENTS_DIR = fileURLToPath3(new URL("../components", import.meta.url));
+var COMPONENTS = { path: COMPONENTS_DIR, prefix: "Nx" };
+var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isAbsoluteUrl = (value) => typeof value === "string" && /^https?:\/\/\S+$/.test(value);
+function checkBrand(brand) {
+  if (!isObject(brand)) {
+    throw new TypeError("ui: brand must be an object, as { name: 'Acme', url: 'https://acme.example' }");
+  }
+  if (typeof brand.name !== "string" || brand.name.trim() === "") {
+    throw new TypeError("ui: brand.name must be the name the e-mails show");
+  }
+  if (brand.url !== undefined && !isAbsoluteUrl(brand.url)) {
+    throw new TypeError("ui: brand.url must be an absolute http(s) URL");
+  }
+  const { logo } = brand;
+  if (logo === undefined)
+    return;
+  if (!isObject(logo) || !isAbsoluteUrl(logo.src)) {
+    throw new TypeError("ui: brand.logo.src must be an absolute http(s) URL — a mail client loads nothing relative");
+  }
+  if (logo.width !== undefined && (typeof logo.width !== "number" || !Number.isInteger(logo.width) || logo.width <= 0)) {
+    throw new TypeError("ui: brand.logo.width must be a width in pixels");
+  }
+  if (logo.alt !== undefined && typeof logo.alt !== "string") {
+    throw new TypeError("ui: brand.logo.alt must be a string");
+  }
+}
+function ui(options) {
+  if (!isObject(options)) {
+    throw new TypeError("ui: options must be an object, as { brand: { name: 'Acme' } }");
+  }
+  checkBrand(options.brand);
+  if (options.theme !== undefined && !isObject(options.theme)) {
+    throw new TypeError("ui: theme must be an object of tokens, as { 'color-primary': '#0f766e' }");
+  }
+  const brand = Object.freeze({
+    ...options.brand,
+    ...options.brand.logo && {
+      logo: Object.freeze({ ...options.brand.logo })
+    }
+  });
+  const context = Object.freeze({
+    brand,
+    css: themeCss(options.theme ?? {})
+  });
+  if (isMainThread)
+    writeTypes();
+  return defineMailPlugin({
+    name: "ui",
+    components: { source: [COMPONENTS] },
+    vite: { plugins: packagedComponents(COMPONENTS) },
+    vue: {
+      globalProperties: { brand },
+      plugins: [{ install: (app) => app.provide(UI_CONTEXT, context) }]
+    }
+  });
+}
+export {
+  COMPONENTS_DIR,
+  THEME_FILE,
+  UI_CONTEXT,
+  ui,
+  uiCatalogues
+};
+
+//# debugId=659CA3FBCE3C1FE364756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "sources": ["../src/catalogues.ts", "../src/plugin.ts", "../src/packaged.ts", "../src/theme.ts"],
+  "sourcesContent": [
+    "/**\n * The messages the layouts and templates share, in `en` and `fr`, for\n * `@nxgt/mail-i18n`:\n *\n * ```ts\n * i18n({ locales: ['en', 'fr'], catalogues: [uiCatalogues] })\n * ```\n *\n * The project's `locales/<locale>.json` overrides any of them key by key. A\n * project in another locale writes the `common` keys itself.\n */\nexport const uiCatalogues = {\n\ten: {\n\t\tcommon: {\n\t\t\tgreeting: 'Hello {name},',\n\t\t\tavatarGroup: { more: '{count, plural, other {# more}}' },\n\t\t\ttimeline: { empty: 'No activity yet' },\n\t\t\tmetrics: {\n\t\t\t\tofTarget: 'of {target}',\n\t\t\t\tthisPeriod: 'This period',\n\t\t\t\tlastPeriod: 'Last period',\n\t\t\t},\n\t\t\tseeAlso: 'See also',\n\t\t\tfooter: {\n\t\t\t\twhy: 'You received this e-mail because you have an account with {brand}.',\n\t\t\t\tignore: 'If you did not ask for this, you can ignore this e-mail.',\n\t\t\t},\n\t\t},\n\t},\n\tfr: {\n\t\tcommon: {\n\t\t\tgreeting: 'Bonjour {name},',\n\t\t\tavatarGroup: { more: '{count, plural, one {# autre} other {# autres}}' },\n\t\t\ttimeline: { empty: 'Aucune activité pour le moment' },\n\t\t\tmetrics: {\n\t\t\t\tofTarget: 'sur {target}',\n\t\t\t\tthisPeriod: 'Cette période',\n\t\t\t\tlastPeriod: 'Période précédente',\n\t\t\t},\n\t\t\tseeAlso: 'Voir aussi',\n\t\t\tfooter: {\n\t\t\t\twhy: 'Vous recevez cet e-mail parce que vous avez un compte chez {brand}.',\n\t\t\t\tignore:\n\t\t\t\t\t\"Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail.\",\n\t\t\t},\n\t\t},\n\t},\n} as const;\n",
+    "import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';\nimport { dirname, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { isMainThread } from 'node:worker_threads';\nimport { defineMailPlugin, type MailPlugin } from '@nxgt/mail-config';\nimport { packagedComponents } from './packaged';\nimport { themeCss } from './theme';\n\n/** Who sends the e-mail: the layout's header and footer. */\nexport interface Brand {\n\t/** The name the header shows without a logo, and the footer always. */\n\treadonly name: string;\n\t/** Where the header and the footer link to, as `https://acme.example`. */\n\treadonly url?: string;\n\t/** The header's image, by absolute URL: a mail client loads nothing relative. */\n\treadonly logo?: {\n\t\treadonly src: string;\n\t\t/** In pixels. Default 120. */\n\t\treadonly width?: number;\n\t\t/** Default the brand's name. */\n\t\treadonly alt?: string;\n\t};\n}\n\nexport interface UiOptions {\n\treadonly brand: Brand;\n\t/**\n\t * Tokens of `theme.css` to override, named without their `--`:\n\t * `{ 'color-primary': '#0f766e', 'radius-lg': '4px' }`. The tints of a\n\t * colour follow it.\n\t */\n\treadonly theme?: Readonly<Record<string, string>>;\n}\n\n/** What `NxLayout` injects: the brand and the theme's CSS. */\nexport interface UiContext {\n\treadonly brand: Brand;\n\treadonly css: string;\n}\n\n/** The `provide` key the components read the {@link UiContext} from. */\nexport const UI_CONTEXT = 'nxgt:mail-ui';\n\n/**\n * Where the template types go, under the project: `.maizzle/*.d.ts` is in the\n * starter's `tsconfig.json`, and `maizzle.config.ts` — which imports this\n * package — is not, so an editor would not know `brand` without it.\n */\nexport const TYPES_FILE = '.maizzle/nxgt-mail-ui.d.ts';\n\nconst TYPES_SOURCE = [\n\t'// Generated by @nxgt/mail-ui each time the config loads. Never edited, never committed:',\n\t'// it gives the templates `brand`.',\n\t\"import type {} from '@nxgt/mail-ui';\",\n\t'',\n].join('\\n');\n\n/** Writes the template types, only when they changed. */\nfunction writeTypes(): void {\n\tconst file = resolve(process.cwd(), TYPES_FILE);\n\tif (existsSync(file) && readFileSync(file, 'utf8') === TYPES_SOURCE) return;\n\tmkdirSync(dirname(file), { recursive: true });\n\twriteFileSync(file, TYPES_SOURCE);\n}\n\n/** The components, beside `src/` and `dist/` in the package. */\nexport const COMPONENTS_DIR = fileURLToPath(\n\tnew URL('../components', import.meta.url),\n);\n\n/**\n * Our components, under the prefix `Nx`: `card-header.vue` is\n * `<NxCardHeader>`, and Maizzle's own (`<Button>`) stay available.\n */\nconst COMPONENTS = { path: COMPONENTS_DIR, prefix: 'Nx' } as const;\n\nconst isObject = (value: unknown): value is Record<string, unknown> =>\n\ttypeof value === 'object' && value !== null && !Array.isArray(value);\n\nconst isAbsoluteUrl = (value: unknown): value is string =>\n\ttypeof value === 'string' && /^https?:\\/\\/\\S+$/.test(value);\n\nfunction checkBrand(brand: unknown): asserts brand is Brand {\n\tif (!isObject(brand)) {\n\t\tthrow new TypeError(\n\t\t\t\"ui: brand must be an object, as { name: 'Acme', url: 'https://acme.example' }\",\n\t\t);\n\t}\n\tif (typeof brand.name !== 'string' || brand.name.trim() === '') {\n\t\tthrow new TypeError('ui: brand.name must be the name the e-mails show');\n\t}\n\tif (brand.url !== undefined && !isAbsoluteUrl(brand.url)) {\n\t\tthrow new TypeError('ui: brand.url must be an absolute http(s) URL');\n\t}\n\tconst { logo } = brand;\n\tif (logo === undefined) return;\n\tif (!isObject(logo) || !isAbsoluteUrl(logo.src)) {\n\t\tthrow new TypeError(\n\t\t\t'ui: brand.logo.src must be an absolute http(s) URL — a mail client loads nothing relative',\n\t\t);\n\t}\n\tif (\n\t\tlogo.width !== undefined &&\n\t\t(typeof logo.width !== 'number' ||\n\t\t\t!Number.isInteger(logo.width) ||\n\t\t\tlogo.width <= 0)\n\t) {\n\t\tthrow new TypeError('ui: brand.logo.width must be a width in pixels');\n\t}\n\tif (logo.alt !== undefined && typeof logo.alt !== 'string') {\n\t\tthrow new TypeError('ui: brand.logo.alt must be a string');\n\t}\n}\n\n/**\n * The components of `@nxgt/mail-ui`, for `defineMailConfig`:\n *\n * ```ts\n * defineMailConfig({\n *   plugins: [ui({ brand: { name: 'Acme' } }), i18n({ locales: ['en', 'fr'] })],\n * });\n * ```\n *\n * It registers `NxLayout`, `NxButton`, … — a project's own\n * `components/nx-button.vue` replaces ours — gives every template `brand`,\n * and themes the layout with `theme.css` and the `theme` overrides.\n */\nexport function ui(options: UiOptions): MailPlugin {\n\tif (!isObject(options)) {\n\t\tthrow new TypeError(\n\t\t\t\"ui: options must be an object, as { brand: { name: 'Acme' } }\",\n\t\t);\n\t}\n\tcheckBrand(options.brand);\n\tif (options.theme !== undefined && !isObject(options.theme)) {\n\t\tthrow new TypeError(\n\t\t\t\"ui: theme must be an object of tokens, as { 'color-primary': '#0f766e' }\",\n\t\t);\n\t}\n\tconst brand: Brand = Object.freeze({\n\t\t...options.brand,\n\t\t...(options.brand.logo && {\n\t\t\tlogo: Object.freeze({ ...options.brand.logo }),\n\t\t}),\n\t});\n\tconst context: UiContext = Object.freeze({\n\t\tbrand,\n\t\tcss: themeCss(options.theme ?? {}),\n\t});\n\t// A parallel build loads the config in each worker: only the main thread writes.\n\tif (isMainThread) writeTypes();\n\treturn defineMailPlugin({\n\t\tname: 'ui',\n\t\tcomponents: { source: [COMPONENTS] },\n\t\tvite: { plugins: packagedComponents(COMPONENTS) },\n\t\tvue: {\n\t\t\tglobalProperties: { brand },\n\t\t\tplugins: [{ install: (app) => app.provide(UI_CONTEXT, context) }],\n\t\t},\n\t});\n}\n",
+    "import { existsSync, readdirSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { MaizzleConfig } from '@maizzle/framework';\nimport Components from 'unplugin-vue-components/vite';\n\n/** A Vite plugin, as Maizzle's `vite.plugins` takes one. */\ntype VitePlugins = NonNullable<NonNullable<MaizzleConfig['vite']>['plugins']>;\n\n/** A `.vue` file an installed package ships: ours, or a preset's. */\nconst PACKAGED = /[\\\\/]node_modules[\\\\/].*\\.vue(\\?vue.*)?$/;\n\n/** Maizzle's built-ins resolve their own imports; leave them be. */\nconst MAIZZLE = /[\\\\/]node_modules[\\\\/]@maizzle[\\\\/]framework[\\\\/]/;\n\n/**\n * The folder of `@maizzle/framework`'s built-in components, found the way\n * Node finds the package: up from here, through each `node_modules`. The\n * package exports no subpath to ask it with.\n */\nfunction maizzleComponentsDir(from: string): string {\n\tfor (let dir = from; ; dir = dirname(dir)) {\n\t\tconst candidate = join(\n\t\t\tdir,\n\t\t\t'node_modules/@maizzle/framework/dist/components',\n\t\t);\n\t\tif (existsSync(candidate)) return candidate;\n\t\tif (dirname(dir) === dir) {\n\t\t\tthrow new Error(\n\t\t\t\t'ui: @maizzle/framework is not installed beside @nxgt/mail-ui',\n\t\t\t);\n\t\t}\n\t}\n}\n\n/**\n * `card-header` in PascalCase, `CardHeader`, as Maizzle writes a file's name.\n * A copy of its `pascalCase` (`@maizzle/framework/dist/utils/componentSources.js`),\n * which the package does not export: change them together.\n */\nconst pascalCase = (name: string): string =>\n\tname\n\t\t.replace(/[-_\\s]+(.)/g, (_, c: string) => c.toUpperCase())\n\t\t.replace(/^(.)/, (c) => c.toUpperCase());\n\n/** A folder of components, and the prefix Maizzle gives their names, if any. */\nexport interface ComponentsFolder {\n\treadonly path: string;\n\treadonly prefix?: string;\n}\n\n/**\n * The name Maizzle gives the component of a file at the top of a folder, as\n * its `componentNameFromPath`: `card-header.vue` under the prefix `Nx` is\n * `NxCardHeader`, and so is `nx-card-header.vue` — a prefix the name already\n * starts with is not repeated. Without a prefix, `nx-badge.vue` is `NxBadge`.\n */\nfunction componentName(file: string, prefix: string | undefined): string {\n\tconst name = pascalCase(file.slice(0, -'.vue'.length));\n\tif (prefix === undefined) return name;\n\treturn prefix + (name.startsWith(prefix) ? name.slice(prefix.length) : name);\n}\n\n/**\n * The first `.vue` file at the top of `folders`, in order, that Maizzle names\n * `tag` — `button.vue` under the prefix `Nx`, or a project's `nx-button.vue`\n * or `NxButton.vue`, for `<NxButton>`. Named, not guessed: `2fa.vue` under\n * `Nx` is `<Nx2fa>`, which no case conversion of the tag gives back. A missing\n * folder is skipped.\n */\nexport function fileForTag(\n\tfolders: readonly ComponentsFolder[],\n\ttag: string,\n): string | undefined {\n\tfor (const { path, prefix } of folders) {\n\t\tif (!existsSync(path)) continue;\n\t\t// Sorted, so that of two files Maizzle would give the same name, as\n\t\t// `nx-badge.vue` and `NxBadge.vue`, the same one wins on every machine.\n\t\tconst file = readdirSync(path)\n\t\t\t.filter((entry) => entry.endsWith('.vue'))\n\t\t\t.sort()\n\t\t\t.find((entry) => componentName(entry, prefix) === tag);\n\t\tif (file !== undefined) return join(path, file);\n\t}\n\treturn undefined;\n}\n\n/**\n * Maizzle resolves the tags of a template (`<NxButton>`, `<Container>`) with\n * unplugin-vue-components, which skips every file under `node_modules` — so a\n * component or a template installed from npm would render empty, and the\n * build would pass. These plugins resolve the tags of those files the way\n * Maizzle would: the project's `components/` first, then ours, then Maizzle's\n * built-ins.\n */\nexport function packagedComponents(ours: ComponentsFolder): VitePlugins {\n\tconst builtins = maizzleComponentsDir(\n\t\tdirname(fileURLToPath(import.meta.url)),\n\t);\n\tlet root = process.cwd();\n\treturn [\n\t\t{\n\t\t\tname: 'nxgt:mail-ui:root',\n\t\t\tconfigResolved(config: { readonly root: string }) {\n\t\t\t\troot = config.root;\n\t\t\t},\n\t\t},\n\t\tComponents({\n\t\t\tinclude: [PACKAGED],\n\t\t\texclude: [MAIZZLE],\n\t\t\tdirs: [],\n\t\t\tresolvers: [\n\t\t\t\t(name) =>\n\t\t\t\t\tfileForTag(\n\t\t\t\t\t\t[{ path: resolve(root, 'components') }, ours, { path: builtins }],\n\t\t\t\t\t\tname,\n\t\t\t\t\t),\n\t\t\t],\n\t\t\tdts: false,\n\t\t}),\n\t];\n}\n",
+    "import { readFileSync } from 'node:fs';\nimport { fileURLToPath } from 'node:url';\n\n/** `theme.css`, beside `src/` and `dist/` in the package. */\nexport const THEME_FILE = fileURLToPath(\n\tnew URL('../theme.css', import.meta.url),\n);\n\n/** A token as `theme` names it: `color-primary`, `radius-lg`. */\nconst TOKEN = /^[a-z][a-z0-9-]*$/;\n\n/**\n * A value that stays inside its declaration: no `;`, brace, angle bracket,\n * quote, backslash, comment or line break.\n */\nconst VALUE = /^(?!.*(?:\\/\\*|\\*\\/))[^;{}<>\"'\\\\\\r\\n]+$/;\n\n/** The tokens `css` declares, without their `--`: `color-primary`, … */\nexport function declaredTokens(css: string): ReadonlySet<string> {\n\treturn new Set(\n\t\tArray.from(\n\t\t\tcss.matchAll(/^\\s*--([a-z][a-z0-9-]*)\\s*:/gm),\n\t\t\t(m) => m[1] as string,\n\t\t),\n\t);\n}\n\n/**\n * The CSS a layout puts under `@import \"@maizzle/tailwindcss\"`: the theme,\n * then an `@theme` block of the project's overrides, which wins. A token the\n * theme does not declare, or a value that is not one, **throws**.\n */\nexport function themeCss(theme: Readonly<Record<string, string>>): string {\n\tconst css = readFileSync(THEME_FILE, 'utf8');\n\tconst tokens = declaredTokens(css);\n\tconst overrides: string[] = [];\n\tfor (const [token, value] of Object.entries(theme)) {\n\t\tif (!TOKEN.test(token) || !tokens.has(token)) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`ui: theme.${token} is not a token of the theme — name one of theme.css without its --, as color-primary`,\n\t\t\t);\n\t\t}\n\t\tif (typeof value !== 'string' || !VALUE.test(value.trim())) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`ui: theme.${token} must be a CSS value, as #0f766e or 8px`,\n\t\t\t);\n\t\t}\n\t\toverrides.push(`\\t--${token}: ${value.trim()};`);\n\t}\n\treturn overrides.length === 0\n\t\t? css\n\t\t: `${css}\\n@theme {\\n${overrides.join('\\n')}\\n}\\n`;\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "659CA3FBCE3C1FE364756E2164756E21",
+  "names": []
+}