Include React Bootstrap and examples; Start design tokens CLI

dequal/alts.ts

@@ -0,0 +1,78 @@
+// 227B – 128k op/s
+export function v227(foo, bar) {
+	var keys, ctor;
+	return foo === bar || (
+		foo && bar && (ctor=foo.constructor) === bar.constructor ?
+			ctor === RegExp ? foo.toString() == bar.toString()
+			: ctor === Date ? foo.getTime() == bar.getTime()
+			: ctor === Array ?
+				foo.length === bar.length && foo.every(function (val, idx) {
+					return v227(val, bar[idx]);
+				})
+			: ctor === Object
+				&& (keys=Object.keys(foo)).length === Object.keys(bar).length
+				&& keys.every(function (k) {
+					return k in bar && v227(foo[k], bar[k]);
+				})
+		: (foo !== foo && bar !== bar)
+	);
+}
+
+// 255B – 155k op/s
+export function v255(foo, bar) {
+	var ctor, len, k;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (ctor === Array && (len=foo.length) === bar.length) {
+			while (len-- > 0 && v255(foo[len], bar[len]));
+			return len === -1;
+		}
+		if (ctor === Object) {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (k in foo) {
+				if (!(k in bar) || !v255(foo[k], bar[k])) return false;
+			}
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}
+
+// 246B – 157k op/s
+export function v246(foo, bar) {
+	var ctor, i;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (ctor === Array) {
+			if (foo.length !== bar.length) return false;
+			for (i=0; i < foo.length; i++) if (!v246(foo[i], bar[i])) return false;
+			return true
+		}
+		if (ctor === Object) {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (i in foo) if (!(i in bar) || !v246(foo[i], bar[i])) return false;
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}
+
+// 225B - 97k op/s
+export function v225(foo, bar) {
+	var ctor, keys, len;
+	if (foo === bar) return true;
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+		if (typeof foo === 'object') {
+			if (Object.keys(foo).length !== Object.keys(bar).length) return false;
+			for (len in foo) if (!(len in bar) || !v225(foo[len], bar[len])) return false;
+			return true;
+		}
+	}
+	return foo !== foo && bar !== bar;
+}

dequal/index.ts

@@ -0,0 +1,84 @@
+var has = Object.prototype.hasOwnProperty;
+
+function find(iter, tar, key) {
+	for (key of iter.keys()) {
+		if (dequal(key, tar)) return key;
+	}
+}
+
+export function dequal(foo, bar) {
+	var ctor, len, tmp;
+	if (foo === bar) return true;
+
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+
+		if (ctor === Array) {
+			if ((len=foo.length) === bar.length) {
+				while (len-- && dequal(foo[len], bar[len]));
+			}
+			return len === -1;
+		}
+
+		if (ctor === Set) {
+			if (foo.size !== bar.size) {
+				return false;
+			}
+			for (len of foo) {
+				tmp = len;
+				if (tmp && typeof tmp === 'object') {
+					tmp = find(bar, tmp);
+					if (!tmp) return false;
+				}
+				if (!bar.has(tmp)) return false;
+			}
+			return true;
+		}
+
+		if (ctor === Map) {
+			if (foo.size !== bar.size) {
+				return false;
+			}
+			for (len of foo) {
+				tmp = len[0];
+				if (tmp && typeof tmp === 'object') {
+					tmp = find(bar, tmp);
+					if (!tmp) return false;
+				}
+				if (!dequal(len[1], bar.get(tmp))) {
+					return false;
+				}
+			}
+			return true;
+		}
+
+		if (ctor === ArrayBuffer) {
+			foo = new Uint8Array(foo);
+			bar = new Uint8Array(bar);
+		} else if (ctor === DataView) {
+			if ((len=foo.byteLength) === bar.byteLength) {
+				while (len-- && foo.getInt8(len) === bar.getInt8(len));
+			}
+			return len === -1;
+		}
+
+		if (ArrayBuffer.isView(foo)) {
+			if ((len=foo.byteLength) === bar.byteLength) {
+				while (len-- && foo[len] === bar[len]);
+			}
+			return len === -1;
+		}
+
+		if (!ctor || typeof foo === 'object') {
+			len = 0;
+			for (ctor in foo) {
+				if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+				if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+			}
+			return Object.keys(bar).length === len;
+		}
+	}
+
+	return foo !== foo && bar !== bar;
+}

dequal/lite.ts

@@ -0,0 +1,29 @@
+var has = Object.prototype.hasOwnProperty;
+
+export function dequal(foo, bar) {
+	var ctor, len;
+	if (foo === bar) return true;
+
+	if (foo && bar && (ctor=foo.constructor) === bar.constructor) {
+		if (ctor === Date) return foo.getTime() === bar.getTime();
+		if (ctor === RegExp) return foo.toString() === bar.toString();
+
+		if (ctor === Array) {
+			if ((len=foo.length) === bar.length) {
+				while (len-- && dequal(foo[len], bar[len]));
+			}
+			return len === -1;
+		}
+
+		if (!ctor || typeof foo === 'object') {
+			len = 0;
+			for (ctor in foo) {
+				if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+				if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+			}
+			return Object.keys(bar).length === len;
+		}
+	}
+
+	return foo !== foo && bar !== bar;
+}

design-tokens-cli/chooseTransform.ts

@@ -0,0 +1,27 @@
+import { toCustomProps } from './transformers/toCustomProps.js';
+import { toScssVars } from './transformers/toScssVars.js';
+import { toESM } from './transformers/toESM.js';
+import { toJSON } from './transformers/toJSON.js';
+
+/**
+ * Convert an object of design token name/value pairs into Scss (Sass) variables
+ * @param {Object} pairs The flattened token key/value pairs
+ * @param {String} as What the tokens should be transformed into
+ * @returns {String}
+ */
+ const chooseTransform = (pairs, as, groupName, config) => {
+  switch (as) {
+    case 'css':
+      return toCustomProps(pairs, config);
+    case 'scss':
+      return toScssVars(pairs, config);
+    case 'mjs' || 'js':
+      return toESM(pairs, groupName, config);
+    case 'json':
+      return toJSON(pairs, config);
+    default: 
+      throw new Error(`The 'as' value ${as} is not recognized.`);
+  }
+}
+
+export { chooseTransform }

design-tokens-cli/example/tokens-layout/inset.tokens.json

@@ -0,0 +1,20 @@
+{
+	"inset": {
+		"a": {
+			"$value": {
+				"left": "0",
+				"top": "0",
+				"bottom": "0",
+				"right": "0"
+			}
+		},
+		"b": {
+			"$value": {
+				"left": "50%",
+				"top": "50%",
+				"bottom": "50%",
+				"right": "50%"
+			}
+		}	
+	}
+}

design-tokens-cli/example/tokens-layout/size.tokens.json

@@ -0,0 +1,88 @@
+{
+	"sizing": {
+		"relative": {
+			"0": {
+				"$value": "0",
+				"comment": "no spacing, zero."
+			},
+			"25": {
+				"$value": ".0625",
+				"comment": ".0625rem, 1px"
+			},
+			"50": {
+				"$value": ".125rem",
+				"comment": ".125rem, 2px"
+			},
+			"100": {
+				"$value": ".25rem",
+				"comment": ".25rem, 4px."
+			},
+			"200": {
+				"$value": ".5rem",
+				"comment": ".5rem, 8px."
+			},
+			"400": {
+				"$value": "1rem",
+				"comment": "1rem, 16px."
+			},
+			"600": {
+				"$value": "1.5rem",
+				"comment": "1.5rem, 24px."
+			},
+			"800": {
+				"$value": "2rem",
+				"comment": "2rem, 32px."
+			},
+			"1200": {
+				"$value": "3rem",
+				"comment": "3rem, 48px."
+			},
+			"1600": {
+				"$value": "4rem",
+				"comment": "4rem, 64px."
+			}
+		},
+		"absolute": {
+			"0": {
+				"$value": "0",
+				"comment": "no spacing, zero."
+			},
+			"25": {
+				"$value": "1px",
+				"comment": ".0625rem, 1px"
+			},
+			"50": {
+				"$value": "2px",
+				"comment": ".125rem, 2px"
+			},
+			"100": {
+				"$value": "4px",
+				"comment": ".25rem, 4px."
+			},
+			"200": {
+				"$value": "8px",
+				"comment": ".5rem, 8px."
+			},
+			"400": {
+				"$value": "16px",
+				"comment": "1rem, 16px."
+			},
+			"600": {
+				"$value": "24px",
+				"comment": "1.5rem, 24px."
+			},
+			"800": {
+				"$value": "32px",
+				"comment": "2rem, 32px."
+			},
+			"1200": {
+				"$value": "48px",
+				"comment": "3rem, 48px."
+			},
+			"1600": {
+				"$value": "64px",
+				"comment": "4rem, 64px."
+			}
+		}
+	}
+}

design-tokens-cli/example/tokens-type/color.tokens

@@ -0,0 +1,50 @@
+{
+	"color": {
+		"white": {
+			"name": "white",
+			"$value": "#ffffff"
+		},
+		"blanche": {
+			"name": "white",
+			"$value": "{color.white}"
+		},
+		"weiss": {
+			"name": "white",
+			"$value": "{color.blanche}"
+		},
+		"black": {
+			"name": "black",
+			"$value": "#000000"
+		},
+		"grayscale": {
+			"200": {
+				"name": "grayscale-200",
+				"$value": "#f8f8f8"
+			},
+			"300": {
+				"name": "grayscale-300",
+				"$value": "#f3f3f3"
+			},
+			"400": {
+				"name": "grayscale-400",
+				"$value": "#dadada"
+			},
+			"500": {
+				"name": "grayscale-500",
+				"$value": "#999999"
+			},
+			"600": {
+				"name": "grayscale-600",
+				"$value": "#666666"
+			},
+			"700": {
+				"name": "grayscale-700",
+				"$value": "#555555"
+			},
+			"800": {
+				"name": "grayscale-800",
+				"$value": "#222222"
+			}
+		}
+	}
+}