@schalkneethling/miyagi-core 4.0.2

package/lib/render/views/iframe/design-tokens/colors.js

@@ -0,0 +1,52 @@
+import config from "../../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../../helpers.js";
+import { getColors, getMediaQueries } from "../../../../styleguide/index.js";
+
+/**
+ * @param {object} o
+ * @param {object} o.res
+ * @param {Function} [o.cb]
+ * @param {object} o.cookies
+ */
+export default async function ({ res, cb, cookies }) {
+	const colors = global.state.css
+		? getColors(
+				global.state.css,
+				global.config.assets.customProperties.prefixes.color,
+			)
+		: [];
+	const mediaQueries = global.state.css
+		? getMediaQueries(global.state.css)
+		: [];
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"design-tokens/colors.twig.miyagi",
+		{
+			additionalCssFiles: global.config.assets?.customProperties?.files || [],
+			colors:
+				colors.map(({ styles }) => styles.length).reduce((a, b) => a + b, 0) > 0
+					? colors
+					: [],
+			isBuild: global.config.isBuild,
+			lang: global.config.ui.lang,
+			mediaQueries,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			projectName: config.projectName,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/iframe/design-tokens/index.js

@@ -0,0 +1,9 @@
+import colors from "./colors.js";
+import sizes from "./sizes.js";
+import typography from "./typography.js";
+
+export default {
+	colors,
+	sizes,
+	typography,
+};

package/lib/render/views/iframe/design-tokens/sizes.js

@@ -0,0 +1,49 @@
+import config from "../../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../../helpers.js";
+import { getSpacings, getMediaQueries } from "../../../../styleguide/index.js";
+
+/**
+ * @param {object} o
+ * @param {object} o.res
+ * @param {Function} [o.cb]
+ * @param {object} o.cookies
+ */
+export default async function ({ res, cb, cookies }) {
+	const spacings = global.state.css
+		? getSpacings(
+				global.state.css,
+				global.config.assets.customProperties.prefixes.spacing,
+			)
+		: [];
+	const mediaQueries = global.state.css
+		? getMediaQueries(global.state.css)
+		: [];
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"design-tokens/sizes.twig.miyagi",
+		{
+			additionalCssFiles: global.config.assets?.customProperties?.files || [],
+			isBuild: global.config.isBuild,
+			lang: global.config.ui.lang,
+			mediaQueries,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			spacings: spacings.length > 0 ? spacings : null,
+			projectName: config.projectName,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/iframe/design-tokens/typography.js

@@ -0,0 +1,52 @@
+import config from "../../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../../helpers.js";
+import {
+	getTypography,
+	getMediaQueries,
+} from "../../../../styleguide/index.js";
+
+/**
+ * @param {object} o
+ * @param {object} o.res
+ * @param {Function} [o.cb]
+ * @param {object} o.cookies
+ */
+export default async function ({ res, cb, cookies }) {
+	const typography = global.state.css
+		? getTypography(
+				global.state.css,
+				global.config.assets.customProperties.prefixes.typo,
+			)
+		: [];
+	const mediaQueries = global.state.css
+		? getMediaQueries(global.state.css)
+		: [];
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"design-tokens/typography.twig.miyagi",
+		{
+			additionalCssFiles: global.config.assets?.customProperties?.files || [],
+			isBuild: global.config.isBuild,
+			lang: global.config.ui.lang,
+			mediaQueries,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			typography: typography.length > 0 ? typography : null,
+			projectName: config.projectName,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/iframe/docs.js

@@ -0,0 +1,68 @@
+import path from "path";
+import config from "../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.doc
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ */
+export default async function renderIframeDocs({ res, doc, cb, cookies }) {
+	const fullPath = doc.paths.dir.full;
+	const shortPath = doc.paths.dir.short;
+	const componentDocumentation = global.state.fileContents[fullPath];
+	const componentName = getHeadlineFromFileName(shortPath);
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"iframe_component.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			prod: process.env.NODE_ENV === "production",
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			documentation: componentDocumentation,
+			name: componentDocumentation?.includes("<h1") ? null : componentName,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}
+
+/**
+ * @param {string} file
+ * @returns {string}
+ */
+function getHeadlineFromFileName(file) {
+	if (typeof file !== "string") return "";
+
+	let fileName = file;
+
+	if (fileName.startsWith("/")) {
+		fileName = fileName.slice(1);
+	}
+
+	if (file.endsWith("README.md") || file.endsWith("index.md")) {
+		fileName = path.dirname(fileName);
+	} else {
+		fileName = path.basename(fileName, ".md");
+	}
+
+	return fileName.replaceAll("-", " ");
+}

package/lib/render/views/iframe/index.js

@@ -0,0 +1,44 @@
+import config from "../../../default-config.js";
+import * as helpers from "../../../helpers.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ * @returns {Promise}
+ */
+export default async function renderIframeIndex({ res, cb, cookies }) {
+	const documentation =
+		global.state.fileContents[helpers.getFullPathFromShortPath("README.md")];
+
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"iframe_index.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			prod: process.env.NODE_ENV === "production",
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			documentation,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/iframe/variation.js

@@ -0,0 +1,116 @@
+import path from "path";
+import config from "../../../default-config.js";
+import { t } from "../../../i18n/index.js";
+import * as helpers from "../../../helpers.js";
+import validateMocks from "../../../validator/mocks.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} [object.res] - the express response object
+ * @param {object} object.component
+ * @param {string} [object.variation] - the variation name
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ * @param {object} [object.data]
+ * @returns {Promise} gets resolved when the variation has been rendered
+ */
+export default async function renderIframeVariation({
+	res,
+	component,
+	variation,
+	cb,
+	cookies,
+	data,
+}) {
+	const rawComponentData = (data && data.raw) ?? null;
+	const componentData = (data && data.resolved) ?? null;
+	const themeMode = getThemeMode(cookies);
+
+	const validatedMocks = validateMocks(component, [
+		{
+			resolved: componentData,
+			name: variation,
+		},
+	]);
+
+	let standaloneUrl;
+
+	if (global.config.isBuild) {
+		standaloneUrl = `component-${helpers.normalizeString(
+			path.dirname(component.paths.tpl.short),
+		)}-variation-${helpers.normalizeString(variation)}.html`;
+	} else {
+		standaloneUrl = `/component?file=${path.dirname(
+			component.paths.tpl.short,
+		)}&variation=${encodeURIComponent(variation)}`;
+	}
+
+	const mockValidation = validatedMocks
+		? {
+				valid: validatedMocks.length === 0,
+				copy: t(
+					`validator.mocks.${validatedMocks.length === 0 ? "valid" : "invalid"}`,
+				),
+			}
+		: null;
+	const fileContents = {
+		mocks: {
+			type: global.config.files.mocks.extension[0],
+		},
+	};
+
+	return new Promise((resolve, reject) => {
+		global.app.render(
+			component.paths.tpl.full,
+			componentData ?? {},
+			async (error, result) => {
+				if (error) {
+					if (global.config.isBuild) {
+						if (cb) {
+							cb(error);
+						}
+					} else {
+						reject(error);
+					}
+				} else if (res) {
+					await res.render(
+						"iframe_component_variation.twig.miyagi",
+						{
+							html: result,
+							standaloneUrl,
+							miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+							prod: process.env.NODE_ENV === "production",
+							projectName: config.projectName,
+							isBuild: global.config.isBuild,
+							userUiConfig: getUserUiConfig(cookies),
+							theme: themeMode
+								? Object.assign(global.config.ui.theme, { mode: themeMode })
+								: global.config.ui.theme,
+							mockData: JSON.stringify(rawComponentData),
+							mockDataResolved: JSON.stringify(componentData),
+							variation,
+							normalizedVariation: helpers.normalizeString(variation),
+							mockValidation,
+							mocks: fileContents.mocks,
+							uiTextDirection: global.config.ui.textDirection,
+						},
+						(html) => {
+							if (res.send) {
+								res.send(html);
+							}
+
+							if (cb) {
+								cb(null, html);
+							}
+						},
+					);
+
+					resolve();
+				} else {
+					resolve(result);
+				}
+			},
+		);
+	});
+}

package/lib/render/views/iframe/variation.standalone.js

@@ -0,0 +1,89 @@
+import path from "path";
+import config from "../../../default-config.js";
+import { getUserUiConfig } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} [object.res] - the express response object
+ * @param {object} object.component
+ * @param {object} object.componentData
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ * @returns {Promise} gets resolved when the variation has been rendered
+ */
+export default async function renderIframeVariationStandalone({
+	res,
+	component,
+	componentData,
+	cb,
+	cookies,
+}) {
+	const directoryPath = component.paths.dir.short;
+
+	return new Promise((resolve, reject) => {
+		global.app.render(
+			component.paths.tpl.full,
+			componentData ?? {},
+			async (error, result) => {
+				if (error) {
+					if (global.config.isBuild) {
+						if (cb) {
+							cb(error);
+						}
+					} else {
+						reject(error);
+					}
+				} else if (res) {
+					const componentsEntry = global.state.components.find(
+						({ shortPath }) => shortPath === directoryPath,
+					);
+
+					await res.render(
+						"component_variation.twig.miyagi",
+						{
+							html: result,
+							cssFiles: global.config.assets.css,
+							jsFilesHead: global.config.assets.js.filter(
+								(entry) => entry.position === "head" || !entry.position,
+							),
+							jsFilesBody: global.config.assets.js.filter(
+								(entry) => entry.position === "body",
+							),
+							assets: {
+								css: componentsEntry
+									? componentsEntry.assets.css
+										? path.join("/", componentsEntry.assets.css)
+										: false
+									: false,
+								js: componentsEntry
+									? componentsEntry.assets.js
+										? path.join("/", componentsEntry.assets.js)
+										: false
+									: false,
+							},
+							miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+							prod: process.env.NODE_ENV === "production",
+							projectName: config.projectName,
+							isBuild: global.config.isBuild,
+							userUiConfig: getUserUiConfig(cookies),
+							componentLanguage: global.config.components.lang,
+						},
+						(html) => {
+							if (res.send) {
+								res.send(html);
+							}
+
+							if (cb) {
+								cb(null, html);
+							}
+						},
+					);
+
+					resolve();
+				} else {
+					resolve(result);
+				}
+			},
+		);
+	});
+}

package/lib/render/views/main/component.docs.js

@@ -0,0 +1,53 @@
+import config from "../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.component
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ */
+export default async function renderMainComponentDocs({
+	res,
+	component,
+	cb,
+	cookies,
+}) {
+	const iframeSrc = component.route.embedded;
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"main.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			folders: global.state.menu,
+			components: global.state.components,
+			flatUrlPattern: global.config.isBuild
+				? "/show-{{component}}.html"
+				: "/show?file={{component}}",
+			iframeSrc,
+			requestedComponent: component.paths.dir.short,
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			indexPath: global.config.indexPath.embedded,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			basePath: global.config.isBuild ? global.config.build.basePath : "/",
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/main/component.js

@@ -0,0 +1,74 @@
+import config from "../../../default-config.js";
+import * as helpers from "../../../helpers.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.component
+ * @param {string} [object.variation] - the variation name
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ */
+export default async function renderMainComponent({
+	res,
+	component,
+	variation,
+	cb,
+	cookies,
+}) {
+	let iframeSrc = component.route.default;
+	const themeMode = getThemeMode(cookies);
+
+	if (variation) {
+		if (global.config.isBuild) {
+			iframeSrc = iframeSrc.replace(
+				/\.html$/,
+				`-variation-${helpers.normalizeString(variation)}.html`,
+			);
+		} else {
+			iframeSrc += `&variation=${variation}`;
+		}
+	}
+
+	if (global.config.isBuild) {
+		iframeSrc = iframeSrc.replace(/\.html$/, "-embedded.html");
+	} else {
+		iframeSrc += "&embedded=true";
+	}
+
+	await res.render(
+		"main.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			folders: global.state.menu,
+			components: global.state.components,
+			flatUrlPattern: global.config.isBuild
+				? "/show-{{component}}.html"
+				: "/show?file={{component}}",
+			iframeSrc,
+			requestedComponent: component.paths.dir.short,
+			requestedVariation: variation,
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			indexPath: global.config.indexPath.embedded,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			basePath: global.config.isBuild ? global.config.build.basePath : "/",
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}

package/lib/render/views/main/design-tokens.js

@@ -0,0 +1,53 @@
+import config from "../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {Function} [object.cb] - callback function
+ * @param {string} object.type
+ * @param {object} [object.cookies]
+ */
+export default function renderMainDesignTokens({ res, cb, cookies, type }) {
+	if (!["colors", "sizes", "typography"].includes(type)) return;
+
+	const themeMode = getThemeMode(cookies);
+
+	res.render(
+		"main.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			folders: global.state.menu,
+			components: global.state.components,
+			flatUrlPattern: global.config.isBuild
+				? "/show-{{component}}.html"
+				: "/show?file={{component}}",
+			iframeSrc: global.config.isBuild
+				? `/iframe-design-tokens-${type}.html`
+				: `/iframe/design-tokens/${type}`,
+			showAll: true,
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			indexPath: global.config.indexPath.embedded,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			basePath: global.config.isBuild ? global.config.build.basePath : "/",
+			uiTextDirection: global.config.ui.textDirection,
+			requestedComponent: "design-tokens",
+			requestedVariation: type,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}