zuii 1.1.0 → 1.2.1

package/style-dictionary/build.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+import StyleDictionary from 'style-dictionary';
+import { getConfigs } from './config.js';
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Parse les arguments CLI pour extraire les chemins de tokens et le chemin de sortie
+ * @returns {{ tokenPaths: string[], outputPath: string }}
+ */
+const parseArgs = () => {
+	const args = process.argv.slice(2);
+	let tokenPaths = [];
+	let outputPath = null;
+
+	for (let i = 0; i < args.length; i++) {
+		if (args[i] === '--output' || args[i] === '-o') {
+			outputPath = args[i + 1];
+			i++; // Skip next argument
+		} else {
+			tokenPaths.push(args[i]);
+		}
+	}
+
+	// Si aucun chemin de tokens n'est fourni, utiliser 'tokens' par défaut
+	if (tokenPaths.length === 0) {
+		tokenPaths = ['tokens'];
+	}
+
+	// Si aucun chemin de sortie n'est fourni, utiliser le répertoire courant du projet
+	if (!outputPath) {
+		outputPath = process.cwd();
+	}
+
+	return { tokenPaths, outputPath: resolve(outputPath) };
+};
+
+console.log('🚀 Starting Style Dictionary build...');
+
+/**
+ * Lance le build pour toutes les configurations générées à partir des chemins fournis
+ */
+const runBuild = async () => {
+	try {
+		const { tokenPaths, outputPath } = parseArgs();
+
+		console.log(`📂 Output directory: ${outputPath}`);
+
+		// Résoudre les chemins de tokens par rapport au répertoire courant
+		const resolvedTokenPaths = tokenPaths.map(path => {
+			// Si le chemin est absolu, l'utiliser tel quel
+			if (path.startsWith('/')) return path;
+			// Sinon, le résoudre par rapport au répertoire courant
+			return resolve(process.cwd(), path);
+		});
+
+		const configs = getConfigs(resolvedTokenPaths, outputPath);
+
+		for (const config of configs) {
+			console.log(`\n📦 Building source: ${config.source}`);
+			const sd = new StyleDictionary(config);
+			await sd.buildAllPlatforms();
+		}
+		console.log('\n✅ Build completed successfully!');
+	} catch (error) {
+		console.error('\n❌ Build failed:', error);
+		process.exit(1);
+	}
+};
+
+runBuild();
+

package/style-dictionary/config.js

@@ -0,0 +1,32 @@
+import { transforms } from './hooks/transforms.js';
+import { formats } from './hooks/formats.js';
+import { getPlatforms } from './platforms.js';
+
+/**
+ * Hooks partagés (transformations et formats) pour toutes les sources de tokens
+ */
+const hooks = {
+	transforms,
+	formats
+};
+
+/**
+ * Génère les configurations Style Dictionary pour les chemins de tokens fournis
+ * @param {string[]} paths - Tableau de chemins vers les dossiers de tokens
+ * @param {string} outputPath - Chemin de sortie pour les fichiers générés (défaut: 'src/core/styles/')
+ * @returns {Array} Tableau de configurations Style Dictionary
+ */
+export const getConfigs = (paths = ['tokens'], outputPath = 'src/core/styles/') => {
+	// S'assurer que outputPath se termine par un slash
+	const buildPath = outputPath.endsWith('/') ? outputPath : `${outputPath}/`;
+
+	return paths.map(path => ({
+		hooks,
+		source: [`${path}/**/*.json`],
+		platforms: getPlatforms(buildPath)
+	}));
+};
+
+// Export par défaut pour compatibilité
+export default getConfigs();
+

package/style-dictionary/hooks/formats.js

@@ -0,0 +1,86 @@
+import { hexToRgb } from '../utils/color.js';
+
+/**
+ * Formats personnalisés Style Dictionary
+ */
+export const formats = {
+	/**
+	 * Format SCSS avec maps imbriquées
+	 */
+	'scss/variables-with-map': ({ dictionary }) => {
+		const processMap = (obj, depth = 0) => {
+			const indent = '  '.repeat(depth + 1);
+			let output = '';
+			if (obj.hasOwnProperty('value')) return `(${obj.value})`;
+			const keys = Object.keys(obj).filter(key =>
+				key !== 'original' && key !== 'filePath' && key !== 'isSource' &&
+				key !== 'path' && key !== 'name' && key !== 'attributes' && key !== 'modify'
+			);
+			if (keys.length === 0) return '()';
+			output += '(\n';
+			keys.forEach(key => {
+				const value = obj[key];
+				output += `${indent}"${key}": ${processMap(value, depth + 1)},\n`;
+			});
+			output += `${'  '.repeat(depth)})`;
+			return output;
+		};
+		let output = `/**\n * Auto-generated\n */\n`;
+		Object.keys(dictionary.tokens).forEach(category => {
+			const mapContent = processMap(dictionary.tokens[category]);
+			output += `\n$${category}: ${mapContent};\n`;
+		});
+		return output;
+	},
+	/**
+	 * Format CSS personnalisé avec variations automatiques pour Bootstrap
+	 */
+	'css/custom-format': ({ dictionary }) => {
+		let output = `/**\n * Auto-generated\n */\n\n:root {\n`;
+		output += dictionary.allTokens
+			.filter(token => token.isSource)
+			.map(token => {
+				let name = token.name.replace('color-', '').replace('brands-', '').replace('-alias', '');
+				let tokenOutput = `  --${name}: ${token.value};`;
+				if (token.path.includes('color') && !name.includes('emphasis') && !name.includes('subtle') && !name.includes('gray')) {
+					const rgb = hexToRgb(token.value);
+					if (rgb) tokenOutput += `\n  --${name}-rgb: ${rgb};`;
+				}
+				if (token.path.includes('brands') && token.value.startsWith('#')) {
+					const rgb = hexToRgb(token.value);
+					if (rgb) {
+						tokenOutput += `\n  --${name}-rgb: ${rgb};`;
+						const variations = token.original?.variations;
+						const mixPercent = token.original?.mixPercent;
+						if (variations?.dark) {
+							tokenOutput += `\n  --${name}-dark: ${variations.dark};`;
+							const darkRgb = hexToRgb(variations.dark);
+							if (darkRgb) tokenOutput += `\n  --${name}-dark-rgb: ${darkRgb};`;
+						} else {
+							const mixPercentDark = mixPercent?.dark ?? 70;
+							tokenOutput += `\n  --${name}-dark: color-mix(in srgb, var(--${name}), var(--black) ${mixPercentDark}%);`;
+						}
+						if (variations?.light) {
+							tokenOutput += `\n  --${name}-light: ${variations.light};`;
+							const lightRgb = hexToRgb(variations.light);
+							if (lightRgb) tokenOutput += `\n  --${name}-light-rgb: ${lightRgb};`;
+						} else {
+							const mixPercentLight = mixPercent?.light ?? 80;
+							tokenOutput += `\n  --${name}-light: color-mix(in srgb, var(--${name}), var(--white) ${mixPercentLight}%);`;
+						}
+						tokenOutput += `\n  --${name}-text-emphasis: var(--${name}-dark);`;
+						tokenOutput += `\n  --${name}-bg-subtle: var(--${name}-light);`;
+						if (variations?.border) {
+							tokenOutput += `\n  --${name}-border-subtle: ${variations.border};`;
+						} else {
+							const mixPercentBorder = mixPercent?.border ?? 60;
+							tokenOutput += `\n  --${name}-border-subtle: color-mix(in srgb, var(--${name}), var(--white) ${mixPercentBorder}%);`;
+						}
+					}
+				}
+				return tokenOutput;
+			}).join('\n');
+		output += `\n}`;
+		return output;
+	}
+};

package/style-dictionary/hooks/transforms.js

@@ -0,0 +1,49 @@
+import { colord, extend } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
+
+extend([mixPlugin]);
+
+/**
+ * Transformations Style Dictionary
+ */
+export const transforms = {
+	/**
+	 * Transformation de nom en kebab-case
+	 */
+	'name/kebab': {
+		type: 'name',
+		transform: (token) => token.path.join('-').toLowerCase()
+	},
+	/**
+	 * Transformation de nom en CONSTANT_CASE
+	 */
+	'name/constant': {
+		type: 'name',
+		transform: (token) => token.path.join('_').toUpperCase().replace(/-/g, '_')
+	},
+	/**
+	 * Transformation de modification de couleurs (darken, lighten, alpha, mix)
+	 */
+	'color/modify': {
+		type: 'value',
+		transitive: true,
+		matcher: (token) => {
+			// token.path est un tableau comme ['color', 'gray', '100'] ou ['brands', 'primary']
+			const isColor = token.path[0] === 'color' || token.path[0] === 'brands';
+			const hasModify = !!token.modify;
+			return isColor && hasModify;
+		},
+		transform: (token) => {
+			let color = colord(token.value);
+			if (token.modify && Array.isArray(token.modify)) {
+				token.modify.forEach(mod => {
+					if (mod.type === 'darken') color = color.darken(mod.amount);
+					else if (mod.type === 'lighten') color = color.lighten(mod.amount);
+					else if (mod.type === 'alpha') color = color.alpha(mod.amount);
+					else if (mod.type === 'mix') color = color.mix(mod.color, mod.amount);
+				});
+			}
+			return color.toHex();
+		}
+	}
+};

package/style-dictionary/platforms.js

@@ -0,0 +1,50 @@
+/**
+ * Génère les configurations de plateforme pour une destination donnée
+ *
+ * @param {string} buildPath - Chemin de sortie des fichiers
+ */
+export const getPlatforms = (buildPath) => ({
+	scss: {
+		transforms: [
+			'attribute/cti',
+			'name/kebab',
+			'size/rem',
+			'color/css',
+			'fontFamily/css',
+			'shadow/css/shorthand'
+		],
+		buildPath,
+		files: [{
+			destination: '_tokens.scss',
+			format: 'scss/variables-with-map'
+		}]
+	},
+	css: {
+		transforms: [
+			'attribute/cti',
+			'name/kebab',
+			'size/rem',
+			'color/css',
+			'fontFamily/css',
+			'shadow/css/shorthand'
+		],
+		buildPath,
+		files: [{
+			destination: 'tokens.css',
+			format: 'css/custom-format'
+		}]
+	},
+	ts: {
+		transforms: [
+			'attribute/cti',
+			'name/constant',
+			'size/rem',
+			'color/hex'
+		],
+		buildPath,
+		files: [{
+			destination: 'tokens.ts',
+			format: 'javascript/es6'
+		}]
+	}
+});

package/style-dictionary/utils/color.js

@@ -0,0 +1,20 @@
+/**
+ * Convertit une couleur hexadécimale en valeurs RGB séparées par des virgules
+ *
+ * @param {string} hex - Couleur au format hexadécimal (#RGB ou #RRGGBB)
+ * @returns {string|null} Valeurs RGB au format "r, g, b" (ex: "255, 0, 0") ou null si invalide
+ */
+export const hexToRgb = (hex) => {
+	if (typeof hex !== 'string' || !hex.startsWith('#')) return null;
+	let r, g, b;
+	if (hex.length === 4) {
+		r = parseInt(hex[1] + hex[1], 16);
+		g = parseInt(hex[2] + hex[2], 16);
+		b = parseInt(hex[3] + hex[3], 16);
+	} else {
+		r = parseInt(hex.slice(1, 3), 16);
+		g = parseInt(hex.slice(3, 5), 16);
+		b = parseInt(hex.slice(5, 7), 16);
+	}
+	return `${r}, ${g}, ${b}`;
+};

package/dist/components/Button/js/Button.d.ts

@@ -1,6 +0,0 @@
-export interface ButtonConfig {
-    label: string;
-    variant?: 'primary' | 'secondary';
-    onClick?: () => void;
-}
-export declare const renderButton: (config: ButtonConfig) => HTMLElement;

package/dist/components/Button/js/Button.js

@@ -1,7 +0,0 @@
-const n = (t) => {
-  const e = document.createElement("button");
-  return e.innerText = t.label, e.classList.add("z-btn"), t.variant && e.classList.add(`is-${t.variant}`), t.onClick && e.addEventListener("click", t.onClick), e;
-};
-export {
-  n as renderButton
-};