@schalkneethling/miyagi-core 4.0.2

package/lib/state/index.js

@@ -0,0 +1,56 @@
+/**
+ * Module for saving all relevant data
+ * @module state
+ */
+
+import { getPartials } from "./partials.js";
+import { getFileContents } from "./file-contents.js";
+import getCSS from "./css.js";
+import { getMenu } from "./menu/index.js";
+import getComponents from "./components.js";
+import { getSourceTree } from "./source-tree.js";
+
+/**
+ * @param {object} methods
+ * @returns {Promise<object>}
+ */
+export default async function setState(methods) {
+	if (!global.state) {
+		global.state = {
+			routes: [],
+		};
+	}
+
+	if (methods.sourceTree) {
+		global.state.routes = [];
+		global.state.sourceTree = getSourceTree();
+	}
+
+	if (methods.fileContents) {
+		if (typeof methods.fileContents === "object") {
+			global.state.fileContents = methods.fileContents;
+		} else {
+			global.state.fileContents = await getFileContents(
+				global.state.sourceTree,
+			);
+		}
+	}
+
+	if (methods.partials) {
+		global.state.partials = getPartials(global.state.sourceTree);
+	}
+
+	if (methods.menu) {
+		global.state.menu = getMenu(global.state.sourceTree);
+		global.state.components = getComponents(
+			global.state.menu,
+			global.config.isBuild,
+		);
+	}
+
+	if (methods.css) {
+		global.state.css = getCSS(global.state.fileContents);
+	}
+
+	return global.state;
+}

package/lib/state/menu/index.js

@@ -0,0 +1,275 @@
+/**
+ * Module for creating a menu object
+ * @module stateMenu
+ */
+
+import path from "path";
+import getSourceStructure from "./structure.js";
+import * as helpers from "../../helpers.js";
+import { getMenu as getDocsMenu } from "../docs.js";
+
+/**
+ * @param {object} directory - file tree object
+ * @returns {Array} file tree object of the component file in the given directory
+ */
+function getComponentFiles(directory) {
+	return directory.children.filter((child) => {
+		const baseName =
+			global.config.files.templates.name === "<component>"
+				? child.name.replace(`.${global.config.files.templates.extension}`, "")
+				: global.config.files.templates.name;
+
+		if (helpers.docFileIsIndexFile(child.path)) return true;
+
+		if (helpers.fileIsTemplateFile(child.name)) {
+			if (
+				global.config.files.templates.name === "<component>" &&
+				directory.name === baseName
+			)
+				return true;
+
+			if (global.config.files.templates.name === baseName) return true;
+		}
+
+		return false;
+	});
+}
+
+/**
+ * @param {object} directory - file tree object
+ * @returns {boolean} returns true if the given directory has a component file with the same name
+ */
+function hasComponentFileWithCorrectNameAsChild(directory) {
+	return (
+		directory.children &&
+		directory.children.length &&
+		getComponentFiles(directory).length > 0
+	);
+}
+
+/**
+ * @param {object} directory - file tree object
+ * @returns {object} adapted file tree object
+ */
+function getDataForLinkedDirectory(directory) {
+	const shortPath = helpers.getShortPathFromFullPath(directory.path);
+	const normalizedShortPath = helpers.normalizeString(shortPath);
+	const name = directory.name.replaceAll("-", " ");
+
+	return {
+		type: directory.type,
+		section: "components",
+		name,
+		fullPath: directory.path,
+		shortPath,
+		normalizedShortPath,
+		url: global.config.isBuild
+			? `/component-${normalizedShortPath}-embedded.html`
+			: `/component?file=${shortPath}&embedded=true`,
+		variations:
+			directory.variations.map((variation) => {
+				const normalizedName = helpers.normalizeString(variation.name);
+
+				return {
+					...variation,
+					normalizedName,
+					parentShortPath: shortPath,
+					url: global.config.isBuild
+						? `component-${normalizedShortPath}-variation-${normalizedName}-embedded.html`
+						: `/component?file=${shortPath}&variation=${encodeURIComponent(
+								variation.name,
+							)}&embedded=true`,
+				};
+			}) || [],
+		index: directory.index,
+		id: normalizedShortPath,
+	};
+}
+
+/**
+ * @param {object} file
+ * @returns {object}
+ */
+function getDataForDocumentationFile(file) {
+	const shortPath = helpers
+		.getShortPathFromFullPath(file.path)
+		.replace(".md", "");
+	const normalizedShortPath = helpers.normalizeString(shortPath);
+
+	return {
+		type: file.type,
+		name: path
+			.basename(file.name, ".md")
+			.replaceAll("-", " ")
+			.replaceAll("_", " "),
+		fullPath: file.path,
+		shortPath,
+		normalizedShortPath,
+		url: global.config.isBuild
+			? `/component-${normalizedShortPath}-embedded.html`
+			: `/component?file=${shortPath}&embedded=true`,
+		index: file.index,
+		id: normalizedShortPath,
+	};
+}
+
+/**
+ * @param {object} directory - file tree object
+ * @returns {object} adapted file tree object
+ */
+function getDataForDirectory(directory) {
+	const shortPath = path.relative(
+		path.join(process.cwd(), global.config.components.folder),
+		directory.path,
+	);
+
+	return {
+		type: directory.type,
+		name: directory.name.replaceAll("-", " "),
+		fullPath: directory.path,
+		shortPath,
+		index: directory.index,
+		id: helpers.normalizeString(shortPath),
+	};
+}
+
+/**
+ * @param {object} directory - file tree object
+ * @returns {object} adapted file tree object
+ */
+function restructureDirectory(directory) {
+	let item;
+
+	if (hasComponentFileWithCorrectNameAsChild(directory)) {
+		item = getDataForLinkedDirectory(directory);
+	} else {
+		item = getDataForDirectory(directory);
+	}
+
+	return item;
+}
+
+/**
+ * @param {object} item - file tree object
+ * @returns {boolean} returns true if the given file tree object has children
+ */
+function hasChildren(item) {
+	return item.children && item.children.length > 0;
+}
+
+/**
+ * @param {object} sourceTree
+ * @returns {object[]} array with adapted menu items
+ */
+export const getMenu = function (sourceTree) {
+	const srcStructure = getSourceStructure();
+	const arr = [];
+	let componentsMenu;
+
+	(function restructure(structure, array) {
+		for (const item of structure) {
+			if (item.type === "directory") {
+				const restructured = restructureDirectory(item);
+
+				if (hasChildren(item)) {
+					restructured.children = [];
+					restructure(item.children, restructured.children);
+
+					if (restructured.children.length === 0) {
+						delete restructured.children;
+					}
+
+					if (restructured.children) {
+						restructured.children.sort(function (a, b) {
+							const nameA = a.name.toLowerCase();
+							const nameB = b.name.toLowerCase();
+
+							if (nameA < nameB) return -1;
+							if (nameA > nameB) return 1;
+
+							return 0;
+						});
+					}
+				}
+				array.push(restructured);
+			} else if (
+				helpers.fileIsDocumentationFile(item.path) &&
+				!item.path.endsWith("index.md") &&
+				!item.path.endsWith("README.md") &&
+				path.basename(item.path, ".md") !==
+					path.dirname(item.path).split("/")[
+						path.dirname(item.path).split("/").length - 1
+					]
+			) {
+				array.push(getDataForDocumentationFile(item));
+			}
+		}
+	})(srcStructure, arr);
+
+	if (arr.length > 0) {
+		componentsMenu = {
+			topLevel: true,
+			section: "components",
+			name: "components",
+			type: "directory",
+			shortPath: "components",
+			file: null,
+			children: arr,
+			id: "components",
+		};
+	}
+
+	const docsMenu = getDocsMenu(sourceTree.docs);
+	const designTokensMenu = getDesignTokensMenu();
+
+	if (!docsMenu && !designTokensMenu && componentsMenu)
+		return componentsMenu.children;
+
+	const menus = [];
+	if (designTokensMenu) menus.push(designTokensMenu);
+	if (componentsMenu) menus.push(componentsMenu);
+	if (docsMenu) menus.push(docsMenu);
+
+	return menus;
+};
+
+/**
+ * @returns {object}
+ */
+function getDesignTokensMenu() {
+	if (global.config.assets.customProperties.files.length === 0) return null;
+
+	return {
+		topLevel: true,
+		name: "Design Tokens",
+		id: "design-tokens",
+		type: "directory",
+		shortPath: "design-tokens",
+		children: [
+			{
+				section: "design-tokens",
+				type: "file",
+				name: "colors",
+				url: global.config.isBuild
+					? "iframe-design-tokens-colors.html"
+					: "/iframe/design-tokens/colors",
+			},
+			{
+				section: "design-tokens",
+				type: "file",
+				name: "sizes",
+				url: global.config.isBuild
+					? "iframe-design-tokens-sizes.html"
+					: "/iframe/design-tokens/sizes",
+			},
+			{
+				section: "design-tokens",
+				type: "file",
+				name: "typography",
+				url: global.config.isBuild
+					? "iframe-design-tokens-typography.html"
+					: "/iframe/design-tokens/typography",
+			},
+		],
+	};
+}

package/lib/state/menu/structure.js

@@ -0,0 +1,146 @@
+/**
+ * Module for getting the structure for the menu
+ * @module stateMenuStructure
+ */
+
+import config from "../../default-config.js";
+import { t } from "../../i18n/index.js";
+import log from "../../logger.js";
+import * as helpers from "../../helpers.js";
+
+/**
+ * @param {object} json - mock data object
+ * @param {string} fullPath - the path of the mock file
+ * @returns {Array} all valid variation objects
+ */
+function getAllValidVariations(json, fullPath) {
+	let arr = [];
+
+	if (json) {
+		const variations = json.$variants;
+		const rootData = helpers.removeInternalKeys(json);
+
+		if (Object.keys(rootData).length > 0 && !json.$hidden) {
+			arr.push({
+				name: json.$name || config.defaultVariationName,
+				data: rootData,
+			});
+		}
+
+		if (variations) {
+			for (const [i, variation] of variations.entries()) {
+				const variationData = helpers.removeInternalKeys(variation);
+				if (variation.$name) {
+					arr.push({
+						name: variation.$name,
+						data: variationData,
+					});
+				} else if (fullPath) {
+					const shortPath = helpers.getShortPathFromFullPath(fullPath);
+					log(
+						"warn",
+						t("noNameSetForVariation")
+							.replace("{{i}}", i)
+							.replace("{{file}}", shortPath),
+					);
+				}
+			}
+		}
+	} else {
+		arr.push({
+			name: config.defaultVariationName,
+			data: {},
+		});
+	}
+
+	return arr;
+}
+
+/**
+ * @param {string} mockFilePath - mock file to get the data from
+ * @returns {object[]} all valid variations for the given mock file
+ */
+function getData(mockFilePath) {
+	let result;
+
+	if (mockFilePath && global.state.fileContents[mockFilePath]) {
+		result = global.state.fileContents[mockFilePath];
+	}
+
+	return getAllValidVariations(result, mockFilePath);
+}
+
+/**
+ * @param {object} obj - file tree object
+ * @returns {Array} all variations for the mock file of the given file tree object
+ */
+function getVariations(obj) {
+	const { mocks } = global.config.files;
+	const tplChild = obj.children.find(
+		(o) =>
+			o.name ===
+			`${helpers.getResolvedFileName(
+				global.config.files.templates.name,
+				obj.name,
+			)}.${global.config.files.templates.extension}`,
+	);
+	const jsonChild = obj.children.find((o) =>
+		[
+			`${mocks.name}.${mocks.extension[0]}`,
+			`${mocks.name}.${mocks.extension[1]}`,
+		].includes(o.name),
+	);
+
+	if (tplChild) {
+		return getData(jsonChild ? jsonChild.path : null);
+	}
+
+	return [];
+}
+
+/**
+ * @param {object} obj - the source object to update
+ * @returns {object} the updated object
+ */
+function updateSourceObject(obj) {
+	const o = { ...obj };
+
+	if (o.children) {
+		o.variations = getVariations(o);
+		o.children = o.children.map((child) => updateSourceObject(child));
+	}
+
+	return o;
+}
+
+/**
+ * Adds the given index to the given object and recursively calls this
+ * method for its children
+ * @param {object} obj - the object to which the index should be added
+ * @param {number} index - the index that should be added
+ * @returns {object} the updated object
+ */
+function addIndices(obj, index) {
+	const o = { ...obj };
+	o.index = index;
+
+	if (o.children) {
+		o.children = o.children.map((child) => {
+			delete child.size;
+			return addIndices(child, child.type === "directory" ? index + 1 : index);
+		});
+	}
+
+	return o;
+}
+
+/**
+ * @returns {object}
+ */
+export default function setMenuStructure() {
+	let result = updateSourceObject(global.state.sourceTree.components);
+
+	result = addIndices(result, -1);
+
+	return result && result.children ? result.children : [];
+}

package/lib/state/partials.js

@@ -0,0 +1,23 @@
+/**
+ * Module for getting all partials
+ * @module statePartials
+ */
+
+import * as helpers from "../helpers.js";
+
+export const getPartials = function (tree) {
+	const partials = {};
+
+	(function getPartials(entry) {
+		if (
+			entry.type === "file" &&
+			entry.name.endsWith(`.${global.config.files.templates.extension}`)
+		) {
+			partials[helpers.getShortPathFromFullPath(entry.path)] = entry.path;
+		} else if (entry.type === "directory") {
+			entry.children.forEach((item) => getPartials(item));
+		}
+	})(tree.components);
+
+	return partials;
+};

package/lib/state/source-tree.js

@@ -0,0 +1,75 @@
+/**
+ * Module for getting a source tree of the project
+ * @module stateSourcetree
+ */
+
+import dirTree from "directory-tree";
+import path from "path";
+import { t } from "../i18n/index.js";
+import log from "../logger.js";
+import * as helpers from "../helpers.js";
+
+/**
+ * @returns {object} the source tree object
+ */
+export const getSourceTree = function () {
+	const tree = {};
+	const { files } = global.config;
+	const sources = [];
+
+	if (global.config.components?.folder) {
+		sources.push({
+			type: "components",
+			dir: global.config.components.folder,
+			extensions: new RegExp(
+				`.(md|${files.css.extension}|${files.js.extension}|${
+					files.mocks.extension[0]
+				}|${files.mocks.extension[1]}|${
+					files.schema.extension
+				}|${helpers.getSingleFileExtension(files.templates.extension)})$`,
+			),
+			configStr: "components.folder",
+		});
+	}
+
+	if (global.config.docs?.folder) {
+		sources.push({
+			type: "docs",
+			dir: global.config.docs.folder,
+			extensions: /\.md/,
+			configStr: "docs.folder",
+		});
+	}
+
+	sources.forEach(({ type, extensions, dir, configStr }) => {
+		if (dir) {
+			const exclude = [];
+
+			const { ignores = [] } = global.config[type];
+			for (const ignore of ignores) {
+				const escapedIgnore = ignore.replaceAll(/\\/g, "\\\\");
+				exclude.push(new RegExp(escapedIgnore.replaceAll(/\./g, "\\.")));
+			}
+
+			const subTree = dirTree(path.join(process.cwd(), dir), {
+				attributes: ["type"],
+				extensions,
+				exclude,
+			});
+
+			if (!subTree) {
+				log(
+					"warn",
+					t("srcFolderNotFound")
+						.replaceAll("{{directory}}", `./${dir}`)
+						.replaceAll("{{type}}", type)
+						.replaceAll("{{config}}", configStr),
+				);
+			}
+
+			tree[type] = subTree;
+		}
+	});
+
+	return tree || {};
+};