add array group/ungroup nodes

.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/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' }
+		]);
+	});
+});