Merge branch 'master' into feat/custom-preview

.changeset/fifty-lamps-turn.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Add utils css to fix visuals

.changeset/tidy-humans-melt.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": minor
+---
+
+Adds a new array node that removes an item at a specified index and returns both the modified array and the removed item. Supports both positive and negative indices for flexible array manipulation.

.changeset/wet-windows-smoke.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": minor
+---
+
+Added array group/ungroup nodes for token arrays

packages/graph-editor/package.json

@@ -57,7 +57,7 @@
     "@tokens-studio/graph-engine": "*",
     "@tokens-studio/icons": "^0.1.4",
     "@tokens-studio/types": "^0.5.1",
-    "@tokens-studio/ui": "^1.0.10",
+    "@tokens-studio/ui": "^1.0.13",
     "@tokens-studio/tokens": "^0.3.7",
     "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",

packages/graph-engine/src/nodes/array/index.ts

@@ -8,6 +8,7 @@ import indexArray from './indexArray.js';
 import inject from './inject.js';
 import length from './length.js';
 import push from './push.js';
+import remove from './remove.js';
 import replace from './replace.js';
 import reverse from './reverse.js';
 import slice from './slice.js';
@@ -24,6 +25,7 @@ export const nodes = [
 	inject,
 	length,
 	push,
+	remove,
 	replace,
 	reverse,
 	slice,

packages/graph-engine/src/nodes/array/remove.ts

@@ -0,0 +1,54 @@
+import { AnyArraySchema, NumberSchema } from '../../schemas/index.js';
+import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
+import { Node } from '../../programmatic/node.js';
+
+export default class NodeDefinition<T> extends Node {
+	static title = 'Remove Item';
+	static type = 'studio.tokens.array.remove';
+	static description =
+		'Removes an item from an array at a specified index and returns both the modified array and the removed item.';
+
+	declare inputs: ToInput<{
+		array: T[];
+		index: number;
+	}>;
+
+	declare outputs: ToOutput<{
+		array: T[];
+		item: T;
+	}>;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.addInput('array', {
+			type: AnyArraySchema
+		});
+		this.addInput('index', {
+			type: NumberSchema
+		});
+		this.addOutput('array', {
+			type: AnyArraySchema
+		});
+		this.addOutput('item', {
+			type: AnyArraySchema.items
+		});
+	}
+
+	execute(): void | Promise<void> {
+		const { index, array } = this.getAllInputs();
+		const arrayType = this.inputs.array.type;
+
+		// Create a copy and remove item if index is valid
+		const result = [...array];
+		const [removedItem] =
+			index >= -result.length && index < result.length
+				? result.splice(index, 1)
+				: [];
+
+		// Set the outputs
+		this.outputs.array.set(result, arrayType);
+		if (removedItem !== undefined) {
+			this.outputs.item.set(removedItem, arrayType.items);
+		}
+	}
+}

packages/graph-engine/tests/suites/nodes/array/remove.test.ts

@@ -0,0 +1,57 @@
+import { Graph } from '../../../../src/graph/graph.js';
+import { describe, expect, test } from 'vitest';
+import Node from '../../../../src/nodes/array/remove.js';
+
+describe('array/remove', () => {
+	test('removes an item at a positive index', async () => {
+		const graph = new Graph();
+		const node = new Node({ graph });
+
+		node.inputs.array.setValue([1, 2, 3, 4, 5]);
+		node.inputs.index.setValue(2);
+
+		await node.execute();
+
+		expect(node.outputs.array.value).to.eql([1, 2, 4, 5]);
+		expect(node.outputs.item.value).to.eql(3);
+	});
+
+	test('removes an item at a negative index', async () => {
+		const graph = new Graph();
+		const node = new Node({ graph });
+
+		node.inputs.array.setValue(['a', 'b', 'c', 'd']);
+		node.inputs.index.setValue(-2);
+
+		await node.execute();
+
+		expect(node.outputs.array.value).to.eql(['a', 'b', 'd']);
+		expect(node.outputs.item.value).to.eql('c');
+	});
+
+	test('does not modify array when index is out of bounds', async () => {
+		const graph = new Graph();
+		const node = new Node({ graph });
+
+		node.inputs.array.setValue([1, 2, 3]);
+		node.inputs.index.setValue(5);
+
+		await node.execute();
+
+		expect(node.outputs.array.value).to.eql([1, 2, 3]);
+		expect(node.outputs.item.value).to.be.undefined;
+	});
+
+	test('does not mutate the original array', async () => {
+		const graph = new Graph();
+		const node = new Node({ graph });
+
+		const originalArray = [1, 2, 3, 4];
+		node.inputs.array.setValue(originalArray);
+		node.inputs.index.setValue(1);
+
+		await node.execute();
+
+		expect(originalArray).to.eql([1, 2, 3, 4]);
+	});
+});

packages/nodes-design-tokens/package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@tokens-studio/types": "^0.5.1",
-    "@tokens-studio/ui": "^1.0.10",
+    "@tokens-studio/ui": "^1.0.13",
     "colorjs.io": "^0.5.2",
     "dot-prop": "^8.0.2",
     "lodash.orderby": "^4.6.0",

packages/nodes-design-tokens/src/nodes/arrays/group.ts

@@ -0,0 +1,48 @@
+import {
+	INodeDefinition,
+	Node,
+	StringSchema,
+	ToInput,
+	ToOutput
+} from '@tokens-studio/graph-engine';
+import { TokenSchema } from '../../schemas/index.js';
+import { arrayOf } from '../../schemas/utils.js';
+import type { SingleToken } from '@tokens-studio/types';
+
+export default class GroupArrayNode extends Node {
+	static title = 'Group token array';
+	static type = 'studio.tokens.design.array.group';
+	static description = 'Groups an array of tokens by adding a namespace';
+
+	declare inputs: ToInput<{
+		name: string;
+		tokens: SingleToken[];
+	}>;
+
+	declare outputs: ToOutput<{
+		tokens: SingleToken[];
+	}>;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.addInput('name', {
+			type: StringSchema
+		});
+		this.addInput('tokens', {
+			type: arrayOf(TokenSchema)
+		});
+		this.addOutput('tokens', {
+			type: arrayOf(TokenSchema)
+		});
+	}
+
+	execute(): void | Promise<void> {
+		const { name, tokens } = this.getAllInputs();
+		const output = tokens.map(token => ({
+			...token,
+			name: `${name}.${token.name}`
+		}));
+
+		this.outputs.tokens.set(output);
+	}
+}

packages/nodes-design-tokens/src/nodes/arrays/index.ts

@@ -0,0 +1,4 @@
+import GroupArrayNode from './group.js';
+import UngroupArrayNode from './ungroup.js';
+
+export const nodes = [GroupArrayNode, UngroupArrayNode];

packages/nodes-design-tokens/src/nodes/arrays/ungroup.ts

@@ -0,0 +1,53 @@
+import {
+	INodeDefinition,
+	Node,
+	StringSchema,
+	ToInput,
+	ToOutput
+} from '@tokens-studio/graph-engine';
+import { TokenSchema } from '../../schemas/index.js';
+import { arrayOf } from '../../schemas/utils.js';
+import type { SingleToken } from '@tokens-studio/types';
+
+export default class UngroupArrayNode extends Node {
+	static title = 'Ungroup token array';
+	static type = 'studio.tokens.design.array.ungroup';
+	static description =
+		'Ungroups an array of tokens by removing their namespace';
+
+	declare inputs: ToInput<{
+		name: string;
+		tokens: SingleToken[];
+	}>;
+
+	declare outputs: ToOutput<{
+		tokens: SingleToken[];
+	}>;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.addInput('name', {
+			type: StringSchema
+		});
+		this.addInput('tokens', {
+			type: arrayOf(TokenSchema)
+		});
+		this.addOutput('tokens', {
+			type: arrayOf(TokenSchema)
+		});
+	}
+
+	execute(): void | Promise<void> {
+		const { name, tokens } = this.getAllInputs();
+		const prefix = `${name}.`;
+
+		const output = tokens
+			.filter(token => token.name.startsWith(prefix))
+			.map(token => ({
+				...token,
+				name: token.name.slice(prefix.length)
+			}));
+
+		this.outputs.tokens.set(output);
+	}
+}

packages/nodes-design-tokens/src/nodes/index.ts

@@ -1,3 +1,4 @@
+import { nodes as arrays } from './arrays/index.js';
 import { nodes as naming } from './naming/index.js';
 import CreateBorderNode from './createBorder.js';
 import CreateBorderTokenNode from './createBorderToken.js';
@@ -51,7 +52,8 @@ export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
 	LeonardoColorNode,
 	LeonardoThemeNode,
 	SetToArrayNode,
-	naming
+	naming,
+	arrays
 );
 
 /**

packages/nodes-design-tokens/tests/arrays/group.test.ts

@@ -0,0 +1,25 @@
+import { Graph } from '@tokens-studio/graph-engine';
+import { SingleToken } from '@tokens-studio/types';
+import { describe, expect, it } from 'vitest';
+import GroupArrayNode from '../../src/nodes/arrays/group.js';
+
+describe('GroupArrayNode', () => {
+	it('should add namespace to token names', async () => {
+		const graph = new Graph();
+		const node = new GroupArrayNode({ graph });
+
+		const tokens = [
+			{ name: 'color', value: '#ff0000', type: 'color' },
+			{ name: 'size', value: '16px', type: 'dimension' }
+		] as SingleToken[];
+
+		node.inputs.name.setValue('theme');
+		node.inputs.tokens.setValue(tokens);
+		await node.execute();
+
+		expect(node.outputs.tokens.value).toEqual([
+			{ name: 'theme.color', value: '#ff0000', type: 'color' },
+			{ name: 'theme.size', value: '16px', type: 'dimension' }
+		]);
+	});
+});

packages/nodes-design-tokens/tests/arrays/ungroup.test.ts

@@ -0,0 +1,26 @@
+import { Graph } from '@tokens-studio/graph-engine';
+import { SingleToken } from '@tokens-studio/types';
+import { describe, expect, it } from 'vitest';
+import UngroupArrayNode from '../../src/nodes/arrays/ungroup.js';
+
+describe('UngroupArrayNode', () => {
+	it('should remove namespace from token names', async () => {
+		const graph = new Graph();
+		const node = new UngroupArrayNode({ graph });
+
+		const tokens = [
+			{ name: 'theme.color', value: '#ff0000', type: 'color' },
+			{ name: 'theme.size', value: '16px', type: 'dimension' },
+			{ name: 'other.value', value: '20px', type: 'dimension' }
+		] as SingleToken[];
+
+		node.inputs.name.setValue('theme');
+		node.inputs.tokens.setValue(tokens);
+		await node.execute();
+
+		expect(node.outputs.tokens.value).toEqual([
+			{ name: 'color', value: '#ff0000', type: 'color' },
+			{ name: 'size', value: '16px', type: 'dimension' }
+		]);
+	});
+});

packages/nodes-figma/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@tokens-studio/types": "^0.5.1",
-    "@tokens-studio/ui": "^1.0.10",
+    "@tokens-studio/ui": "^1.0.13",
     "dot-prop": "^8.0.2"
   },
   "peerDependencies": {

packages/nodes-fs/package.json

@@ -31,7 +31,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tokens-studio/ui": "^1.0.10",
+    "@tokens-studio/ui": "^1.0.13",
     "mobx-react-lite": "^4.0.5"
   },
   "peerDependencies": {

packages/ui/package.json

@@ -46,7 +46,7 @@
     "@tokens-studio/graph-engine-nodes-image": "*",
     "@tokens-studio/icons": "^0.1.4",
     "@tokens-studio/tokens": "^0.3.7",
-    "@tokens-studio/ui": "^1.0.10",
+    "@tokens-studio/ui": "^1.0.13",
     "@ts-rest/core": "^3.51.0",
     "@ts-rest/open-api": "^3.51.0",
     "@ts-rest/react-query": "^3.51.0",

packages/ui/src/app/layout.tsx

@@ -6,6 +6,7 @@ import '@tokens-studio/tokens/css/ts-theme-light.css';
 
 import '@tokens-studio/tokens/css/base.css';
 import '@tokens-studio/ui/css/normalize.css';
+import '@tokens-studio/ui/css/utils.css';
 
 import '@fontsource/geist-mono/400.css';
 import '@fontsource/geist-mono/500.css';

yarn.lock

@@ -6147,10 +6147,10 @@
   resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.5.1.tgz#5037e58c4b2c306762f12e8d9685e9aeebb21685"
   integrity sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA==
 
-"@tokens-studio/ui@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-1.0.10.tgz#8529bfaae9f663e6d0683b03ae2b5f0135c643f2"
-  integrity sha512-FJCzMg9geaYWWpfxsGRTxGyDDE+IIExAE05ek78ljz3R5BftgGafnS3plLx5sMBPLN61k2aMUBiJah2bW1PBIQ==
+"@tokens-studio/ui@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-1.0.13.tgz#e4e7356b2cbfa506f871227d4b21a35607fd09b1"
+  integrity sha512-KvFBpWpWtShnsXXPyLU4xsMYI3Hws1A9N4IIbqOMbv7hpihcixktF81yq44txPkvn8JNw1xob9ZhofqDa1cwwg==
   dependencies:
     "@radix-ui/react-accordion" "^1.1.2"
     "@radix-ui/react-avatar" "^1.0.2"
@@ -6169,7 +6169,6 @@
     "@radix-ui/react-toast" "^1.1.3"
     "@radix-ui/react-toggle-group" "^1.0.2"
     "@radix-ui/react-tooltip" "^1.0.4"
-    "@tokens-studio/icons" "^0.1.4"
     clsx "^2.1.1"
 
 "@trysound/[email protected]":