@schalkneethling/miyagi-core 4.0.2

package/lib/styleguide/color-names.js

@@ -0,0 +1,150 @@
+export default [
+	"aliceblue",
+	"antiquewhite",
+	"aqua",
+	"aquamarine",
+	"azure",
+	"beige",
+	"bisque",
+	"black",
+	"blanchedalmond",
+	"blue",
+	"blueviolet",
+	"brown",
+	"burlywood",
+	"cadetblue",
+	"chartreuse",
+	"chocolate",
+	"coral",
+	"cornflowerblue",
+	"cornsilk",
+	"crimson",
+	"cyan",
+	"darkblue",
+	"darkcyan",
+	"darkgoldenrod",
+	"darkgray",
+	"darkgreen",
+	"darkgrey",
+	"darkkhaki",
+	"darkmagenta",
+	"darkolivegreen",
+	"darkorange",
+	"darkorchid",
+	"darkred",
+	"darksalmon",
+	"darkseagreen",
+	"darkslateblue",
+	"darkslategray",
+	"darkslategrey",
+	"darkturquoise",
+	"darkviolet",
+	"deeppink",
+	"deepskyblue",
+	"dimgray",
+	"dimgrey",
+	"dodgerblue",
+	"firebrick",
+	"floralwhite",
+	"forestgreen",
+	"fuchsia",
+	"gainsboro",
+	"ghostwhite",
+	"gold",
+	"goldenrod",
+	"gray",
+	"green",
+	"greenyellow",
+	"grey",
+	"honeydew",
+	"hotpink",
+	"indianred",
+	"indigo",
+	"ivory",
+	"khaki",
+	"lavender",
+	"lavenderblush",
+	"lawngreen",
+	"lemonchiffon",
+	"lightblue",
+	"lightcoral",
+	"lightcyan",
+	"lightgoldenrodyellow",
+	"lightgray",
+	"lightgreen",
+	"lightgrey",
+	"lightpink",
+	"lightsalmon",
+	"lightseagreen",
+	"lightskyblue",
+	"lightslategray",
+	"lightslategrey",
+	"lightsteelblue",
+	"lightyellow",
+	"lime",
+	"limegreen",
+	"linen",
+	"magenta",
+	"maroon",
+	"mediumaquamarine",
+	"mediumblue",
+	"mediumorchid",
+	"mediumpurple",
+	"mediumseagreen",
+	"mediumslateblue",
+	"mediumspringgreen",
+	"mediumturquoise",
+	"mediumvioletred",
+	"midnightblue",
+	"mintcream",
+	"mistyrose",
+	"moccasin",
+	"navajowhite",
+	"navy",
+	"oldlace",
+	"olive",
+	"olivedrab",
+	"orange",
+	"orangered",
+	"orchid",
+	"palegoldenrod",
+	"palegreen",
+	"paleturquoise",
+	"palevioletred",
+	"papayawhip",
+	"peachpuff",
+	"peru",
+	"pink",
+	"plum",
+	"powderblue",
+	"purple",
+	"rebeccapurple",
+	"red",
+	"rosybrown",
+	"royalblue",
+	"saddlebrown",
+	"salmon",
+	"sandybrown",
+	"seagreen",
+	"seashell",
+	"sienna",
+	"silver",
+	"skyblue",
+	"slateblue",
+	"slategray",
+	"slategrey",
+	"snow",
+	"springgreen",
+	"steelblue",
+	"tan",
+	"teal",
+	"thistle",
+	"tomato",
+	"turquoise",
+	"violet",
+	"wheat",
+	"white",
+	"whitesmoke",
+	"yellow",
+	"yellowgreen",
+];

package/lib/styleguide/colors.js

@@ -0,0 +1,135 @@
+import { getCustomProperties } from "./helpers.js";
+import colorNames from "./color-names.js";
+
+/**
+ * @param {object} obj
+ * @param {string} prefix
+ * @returns {Array}
+ */
+export default function getColors(obj, prefix) {
+	const types = ["typo", "decoration"];
+	const uppercasedPrefix = prefix.toUpperCase();
+
+	const colors = getCustomProperties(obj, prefix)
+		.filter(({ property, value }) => {
+			const lowerCasedValue = value.toLowerCase();
+			return (
+				property.match(`--${prefix}-(.)*`) &&
+				(lowerCasedValue.startsWith("rgb(") ||
+					lowerCasedValue.startsWith("rgba(") ||
+					(lowerCasedValue.startsWith("#") &&
+						Boolean(lowerCasedValue.match(new RegExp(/^#[a-f0-9]{3,8}$/)))) ||
+					lowerCasedValue.startsWith("hsl(") ||
+					lowerCasedValue.startsWith("hsla(") ||
+					(lowerCasedValue.startsWith("var(--") &&
+						lowerCasedValue.endsWith(")")) ||
+					colorNames.includes(value))
+			);
+		})
+		.map(({ property, value }) => {
+			const lowerCasedValue = value.toLowerCase();
+			const whitesArr = [
+				"#fff",
+				"#ffff",
+				"#ffffff",
+				"#ffffffff",
+				"hsl(0,0%,100%)",
+				"hsl(0, 0%,100%)",
+				"hsl(0,0%, 100%)",
+				"hsl(0, 0%, 100%)",
+				"rgb(255,255,255)",
+				"rgb(255, 255,255)",
+				"rgb(255,255, 255)",
+				"rgb(255, 255, 255)",
+				"rgba(255,255,255,1)",
+				"rgba(255, 255,255,1)",
+				"rgba(255, 255, 255,1)",
+				"rgba(255, 255,255, 1)",
+				"rgba(255,255, 255,1)",
+				"rgba(255,255, 255, 1)",
+				"rgba(255,255,255, 1)",
+				"rgba(255, 255, 255, 1)",
+				"white",
+				`var(--${uppercasedPrefix}-white)`,
+			];
+
+			types.forEach((type) => {
+				const uppercasedType = type.toUpperCase();
+
+				whitesArr.push(
+					`rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
+					`rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
+					`rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b),var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
+					`rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b), var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
+				);
+			});
+
+			const whites = new Set(whitesArr);
+			const customPropertyWithoutPrefix = property.replace(`--${prefix}-`, "");
+			const name = customPropertyWithoutPrefix
+				.replace(`${types[0]}-`, "")
+				.replace(`${types[1]}-`, "");
+			let type;
+
+			types.forEach((t) => {
+				if (
+					customPropertyWithoutPrefix.toUpperCase().startsWith(t.toUpperCase())
+				) {
+					type = t;
+				}
+			});
+
+			return {
+				name,
+				type,
+				customProp: property,
+				values: ["RGB", "Hex", "HSL"],
+				isWhite: whites.has(lowerCasedValue),
+			};
+		});
+
+	const deduped = [
+		{
+			type: "all",
+			styles: [],
+		},
+	];
+
+	types.forEach((type) => {
+		deduped.push({
+			type,
+			styles: [],
+		});
+	});
+
+	colors.forEach((color) => {
+		const t = color.type || "all";
+
+		if (
+			!deduped
+				.find(({ type }) => type === t)
+				.styles.find(({ name }) => name === color.name)
+		) {
+			deduped
+				.find(({ type }) => type === t)
+				.styles.push({
+					name: color.name,
+					customProp: color.customProp,
+					values: color.values,
+					isWhite: color.isWhite,
+				});
+		}
+	});
+
+	return deduped.map((entry) => {
+		entry.styles = entry.styles.sort((a, b) => {
+			const aUppercase = a.name.toUpperCase();
+			const bUppercase = b.name.toUpperCase();
+
+			if (aUppercase > bUppercase) return 1;
+			if (aUppercase < bUppercase) return -1;
+			return 0;
+		});
+		return entry;
+	});
+}

package/lib/styleguide/helpers.js

@@ -0,0 +1,37 @@
+export const getCustomProperties = function (obj, property, endsWith) {
+	var result = [];
+
+	if (obj instanceof Array) {
+		for (var i = 0; i < obj.length; i++) {
+			result = [...result, ...getCustomProperties(obj[i], property, endsWith)];
+		}
+	} else {
+		for (const prop in obj) {
+			if (prop == "property") {
+				if (endsWith) {
+					if (obj[prop].endsWith(`-${property}`)) {
+						result.push({
+							property: obj.property,
+							value: obj.value,
+						});
+					}
+				} else {
+					if (obj[prop].startsWith(`--${property}-`)) {
+						result.push({
+							property: obj.property,
+							value: obj.value,
+						});
+					}
+				}
+			}
+			if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
+				result = [
+					...result,
+					...getCustomProperties(obj[prop], property, endsWith),
+				];
+			}
+		}
+	}
+
+	return result;
+};

package/lib/styleguide/index.js

@@ -0,0 +1,17 @@
+import colors from "./colors.js";
+import typography from "./typography.js";
+import spacings from "./spacings.js";
+import mediaQueries from "./media-queries.js";
+
+export const getColors = (obj, prefix) => {
+	return colors(obj, prefix);
+};
+export const getTypography = (obj, prefix) => {
+	return typography(obj, prefix);
+};
+export const getSpacings = (obj, prefix) => {
+	return spacings(obj, prefix);
+};
+export const getMediaQueries = (obj) => {
+	return mediaQueries(obj);
+};

package/lib/styleguide/media-queries.js

@@ -0,0 +1,26 @@
+/**
+ * @param {object} obj
+ * @returns {Array}
+ */
+export default function getMediaQueries(obj) {
+	var result = [];
+
+	if (obj instanceof Array) {
+		for (var i = 0; i < obj.length; i++) {
+			result = [...result, ...getMediaQueries(obj[i])];
+		}
+	} else {
+		for (const prop in obj) {
+			if (prop == "type") {
+				if (obj[prop] === "media") {
+					result.push(obj.media);
+				}
+			}
+			if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
+				result = [...result, ...getMediaQueries(obj[prop])];
+			}
+		}
+	}
+
+	return result.filter((v, i, a) => a.indexOf(v) === i);
+}

package/lib/styleguide/spacings.js

@@ -0,0 +1,35 @@
+import { getCustomProperties } from "./helpers.js";
+
+/**
+ * @param {object} obj
+ * @param {string} prefix
+ * @returns {Array}
+ */
+export default function getSpacings(obj, prefix) {
+	const spacings = [];
+
+	getCustomProperties(obj, prefix).forEach(({ property, value, mq }) => {
+		// filter out negative spacings
+		if (property.startsWith(`--${prefix}-`) && !value.startsWith("-")) {
+			spacings.push({
+				name: property.replace(`--${prefix}-`, ""),
+				customProp: property,
+				value,
+				mq,
+			});
+		}
+	});
+
+	const deduped = {};
+
+	spacings.forEach((e) => {
+		if (!deduped[e.name]) {
+			deduped[e.name] = {
+				customProp: e.customProp,
+				value: e.value,
+			};
+		}
+	});
+
+	return Object.entries(deduped);
+}

package/lib/styleguide/typography.js

@@ -0,0 +1,61 @@
+import { getCustomProperties } from "./helpers.js";
+
+/**
+ * @param {object} obj
+ * @param {string} prefix
+ * @returns {Array}
+ */
+export default function getTypography(obj, prefix) {
+	const props = [
+		"font-family",
+		"font-feature-settings",
+		"font-kerning",
+		"font-size-adjust",
+		"font-size",
+		"font-stretch",
+		"font-style",
+		"font-variant-caps",
+		"font-variant",
+		"font-weight",
+		"letter-spacing",
+		"line-height",
+		"text-shadow",
+		"text-transform",
+	];
+
+	const deduped = {};
+
+	props.forEach((prop) => {
+		getCustomProperties(obj, prop, true).forEach(({ property }) => {
+			if (property.startsWith(`--${prefix}-`)) {
+				const name = property
+					.replace(`--${prefix}-`, "")
+					.replace(`-${prop}`, "");
+				const customPropName = property.replace(`-${prop}`, "");
+
+				if (!deduped[name]) {
+					deduped[name] = {
+						customProp: customPropName,
+						values: [],
+					};
+				}
+
+				if (!deduped[name].values.find(({ value }) => value === property)) {
+					deduped[name].values.push({
+						label: prop,
+						value: property,
+					});
+				}
+			}
+		});
+	});
+
+	return Object.entries(deduped).sort((a, b) => {
+		const aUppercase = a[0].toUpperCase();
+		const bUppercase = b[0].toUpperCase();
+
+		if (aUppercase > bUppercase) return 1;
+		if (aUppercase < bUppercase) return -1;
+		return 0;
+	});
+}

package/lib/validator/mocks.js

@@ -0,0 +1,105 @@
+import jsYaml from "js-yaml";
+import deepMerge from "deepmerge";
+import log from "../logger.js";
+import { t } from "../i18n/index.js";
+
+/**
+ * Module for validating mock data against JSON schema
+ * @module validatorSchema
+ * @param {object} component
+ * @param {Array} dataArray - an array with mock data
+ * @param {boolean} [noCli]
+ * @returns {null|object[]} null if there is no schema or an array with booleans defining the validity of the entries in the data array
+ */
+export default function validateMockData(component, dataArray, noCli) {
+	const componentSchema =
+		global.state.fileContents[component.paths.schema.full];
+
+	if (componentSchema) {
+		const schemas = [];
+
+		Object.entries(global.state.fileContents).forEach(([key, value]) => {
+			if (
+				key.endsWith(
+					`${global.config.files.schema.name}.${global.config.files.schema.extension}`,
+				)
+			) {
+				const arr = Array.isArray(value) ? value : [value];
+
+				arr.forEach((schema) => {
+					if (schema && componentSchema.$id !== schema.$id) {
+						schemas.push(schema);
+					}
+				});
+			}
+		});
+
+		const validity = [];
+		let validate;
+		let jsonSchemaValidator;
+
+		try {
+			jsonSchemaValidator = new global.config.schema.ajv(
+				deepMerge(
+					{
+						allErrors: true,
+						schemas: schemas.map((schema, i) => {
+							if (!schema.$id) {
+								schema.$id = i.toString();
+							}
+							return schema;
+						}),
+					},
+					global.config.schema.options || {},
+				),
+			);
+			validate = jsonSchemaValidator.compile(componentSchema);
+		} catch (e) {
+			const message = e.toString();
+			if (!noCli) {
+				log("error", `${component.paths.dir.short}:\n${message}`, e);
+			}
+			return [
+				{
+					type: "schema",
+					data: [{ message }],
+				},
+			];
+		}
+
+		if (validate && dataArray) {
+			dataArray.forEach((entry) => {
+				const valid = validate(entry?.resolved ?? {});
+				if (!valid && !noCli) {
+					validate.errors.forEach((error) => {
+						log(
+							"error",
+							`${component.paths.dir.short} # ${entry.name}\n${jsYaml.dump(error)}`,
+						);
+					});
+				}
+
+				if (!valid) {
+					validity.push({
+						variant: entry.name,
+						data: validate.errors,
+					});
+				}
+			});
+		}
+
+		return validity.map((item) => ({
+			type: "mocks",
+			...item,
+		}));
+	}
+
+	if (!global.config.isBuild && !noCli) {
+		log(
+			"warn",
+			`${component.paths.dir.short}: ${t("validator.mocks.noSchemaFound")}`,
+		);
+	}
+
+	return null;
+}

package/package.json

@@ -0,0 +1,117 @@
+{
+	"name": "@schalkneethling/miyagi-core",
+	"version": "4.0.2",
+	"description": "miyagi is a component development tool for JavaScript template engines.",
+	"main": "index.js",
+	"author": "Schalk Neethling <schalkneethling@duck.com>, Michael Großklaus <mail@mgrossklaus.de> (https://www.mgrossklaus.de)",
+	"license": "MIT",
+	"homepage": "https://www.miyagi.dev",
+	"bugs": "https://github.com/miyagi-dev/miyagi/issues",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:miyagi-dev/miyagi.git"
+	},
+	"type": "module",
+	"keywords": [
+		"components",
+		"pattern",
+		"library",
+		"html",
+		"frontend"
+	],
+	"engines": {
+		"node": ">=20.11.0"
+	},
+	"files": [
+		"api",
+		"bin",
+		"dist",
+		"frontend",
+		"index.js",
+		"lib"
+	],
+	"bin": {
+		"miyagi": "./bin/miyagi.js"
+	},
+	"dependencies": {
+		"@adobe/css-tools": "^4.4.4",
+		"@stoplight/json-schema-sampler": "^0.3.0",
+		"ajv": "^8.17.1",
+		"anymatch": "^3.1.3",
+		"cookie-parser": "^1.4.7",
+		"deepmerge": "^4.3.1",
+		"directory-tree": "^3.5.2",
+		"express": "^5.1.0",
+		"js-yaml": "^4.1.0",
+		"marked": "^16.4.1",
+		"node-watch": "^0.7.4",
+		"twing": "7.2.2",
+		"ws": "^8.18.3",
+		"yargs": "^18.0.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.39.2",
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@types/node": "^24.10.0",
+		"@vitest/coverage-v8": "^4.0.6",
+		"cssnano": "^7.1.2",
+		"eslint": "^9.39.0",
+		"eslint-plugin-jsdoc": "^61.1.11",
+		"globals": "^15.15.0",
+		"gulp": "^5.0.1",
+		"gulp-postcss": "^10.0.0",
+		"postcss": "^8.5.6",
+		"postcss-import": "^16.1.1",
+		"pre-commit": "^1.2.2",
+		"prettier": "^3.6.2",
+		"rollup": "^4.52.5",
+		"stylelint": "^16.25.0",
+		"stylelint-config-standard": "^39.0.1",
+		"typescript-eslint": "^8.46.2",
+		"vitest": "^4.0.6"
+	},
+	"scripts": {
+		"build": "gulp build",
+		"test": "vitest run --coverage --coverage.include=api --coverage.include=lib",
+		"lint": "stylelint frontend/assets/css/ && eslint lib/ && eslint frontend/assets/js/",
+		"fix": "eslint lib/ --fix && eslint frontend/assets/js/ --fix",
+		"release": "standard-version"
+	},
+	"browserslist": [
+		"last 2 versions",
+		"> 2%",
+		"not ie <= 11",
+		"not ie_mob <= 11",
+		"not op_mini all",
+		"not op_mob < 100",
+		"not baidu < 100",
+		"not and_qq < 100",
+		"not dead"
+	],
+	"pnpm": {
+		"overrides": {
+			"json-pointer": ">=0.6.2",
+			"minimist": "^1.2.6",
+			"globals": "^15.8.0"
+		}
+	},
+	"stylelint": {
+		"extends": [
+			"stylelint-config-standard"
+		],
+		"rules": {
+			"custom-property-pattern": null,
+			"declaration-block-no-redundant-longhand-properties": null,
+			"keyframes-name-pattern": null,
+			"no-descending-specificity": null,
+			"number-max-precision": 5,
+			"selector-class-pattern": null,
+			"media-feature-range-notation": null
+		}
+	},
+	"pre-commit": [
+		"lint",
+		"test"
+	]
+}