feat: upgrade internal deps, ui, tokens, types

tokens-studio · Dec 20, 2024 · c6fa359 · c6fa359
1 parent 259dbd1
commit c6fa359
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 152 deletions.
diff --git a/.changeset/perfect-schools-travel.md b/.changeset/perfect-schools-travel.md
@@ -0,0 +1,11 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": patch
+"@tokens-studio/react-storybook-graph-engine": patch
+"@tokens-studio/graph-editor": patch
+"@tokens-studio/graph-engine": patch
+"@tokens-studio/graph-engine-nodes-figma": patch
+"@tokens-studio/graph-engine-nodes-fs": patch
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Upgrade @tokens-studio dependencies to latest, to avoid un-dedupable shared deps with Studio App and stitches styles from old UI leaking through.
diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
@@ -56,9 +56,8 @@
     "@rematch/core": "2.2.0",
     "@tokens-studio/graph-engine": "*",
     "@tokens-studio/icons": "^0.1.4",
-    "@tokens-studio/tokens": "0.3.4",
-    "@tokens-studio/types": "^0.2.3",
-    "@tokens-studio/ui": "^1.0.7",
+    "@tokens-studio/types": "^0.5.1",
+    "@tokens-studio/ui": "^1.0.10",
     "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "classnames": "^2.3.2",
@@ -140,4 +139,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/graph-editor/src/data/version.ts b/packages/graph-editor/src/data/version.ts
@@ -1 +1 @@
-export const version = '4.3.8';
+export const version = '4.3.9';
diff --git a/packages/graph-engine/package.json b/packages/graph-engine/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@bundled-es-modules/deepmerge": "^4.3.1",
-    "@tokens-studio/types": "^0.3.0",
+    "@tokens-studio/types": "^0.5.1",
     "ajv": "^8.17.1",
     "color-blind-esm": "^0.1.4",
     "colorjs.io": "^0.5.2",
@@ -53,7 +53,7 @@
     "z-schema-esm": "^6.0.1"
   },
   "peerDependencies": {
-    "@tokens-studio/types": "^0.3.0"
+    "@tokens-studio/types": "^0.5.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",
@@ -72,4 +72,4 @@
     "tokens",
     "ui"
   ]
-}
+}
diff --git a/packages/graph-engine/src/utils/index.ts b/packages/graph-engine/src/utils/index.ts
@@ -37,7 +37,7 @@ export const flatten = (
 			acc.push({
 				name: [...keyPath, key].join('.'),
 				value: leaf.value,
-				type: leaf.type,
+				type: leaf.type!,
 				description: leaf.description
 			});
 			return acc;

diff --git a/packages/nodes-design-tokens/package.json b/packages/nodes-design-tokens/package.json
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@adobe/leonardo-contrast-colors": "^1.0.0",
-    "@tokens-studio/types": "^0.4.0",
-    "@tokens-studio/ui": "^0.6.9",
+    "@tokens-studio/types": "^0.5.1",
+    "@tokens-studio/ui": "^1.0.10",
     "colorjs.io": "^0.5.2",
     "dot-prop": "^8.0.2",
     "lodash.orderby": "^4.6.0",

diff --git a/packages/nodes-figma/package.json b/packages/nodes-figma/package.json
@@ -36,8 +36,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tokens-studio/types": "^0.4.0",
-    "@tokens-studio/ui": "^0.6.9",
+    "@tokens-studio/types": "^0.5.1",
+    "@tokens-studio/ui": "^1.0.10",
     "dot-prop": "^8.0.2"
   },
   "peerDependencies": {
@@ -65,4 +65,4 @@
     "tokens",
     "ui"
   ]
-}
+}
diff --git a/packages/nodes-figma/src/utils/tokenMerge.ts b/packages/nodes-figma/src/utils/tokenMerge.ts
@@ -16,7 +16,8 @@ export function mergeTokenExtensions(
 	figmaExtension: DeepPartial<FigmaExtension>
 ): SingleToken {
 	const existingExtensions = token.$extensions || {};
-	const existingFigmaExt = existingExtensions['com.figma'] || {};
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const existingFigmaExt = (existingExtensions['com.figma'] || {}) as Record<string, any>;
 
 	const mergedFigmaExt = {
 		...existingFigmaExt,

diff --git a/packages/nodes-fs/package.json b/packages/nodes-fs/package.json
@@ -31,7 +31,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@tokens-studio/ui": "^0.6.9",
+    "@tokens-studio/ui": "^1.0.10",
     "mobx-react-lite": "^4.0.5"
   },
   "peerDependencies": {

diff --git a/packages/storybook-react/package.json b/packages/storybook-react/package.json
@@ -33,11 +33,11 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@tokens-studio/sd-transforms": "^0.15.2",
+    "@tokens-studio/sd-transforms": "^1.2.9",
     "chokidar": "^3.6.0",
     "fbp-client": "^0.4.3",
     "fs-extra": "^11.2.0",
     "storybook": "^8.0.10",
-    "style-dictionary": "^4.0.0-prerelease.38"
+    "style-dictionary": "^4.3.0"
   }
-}
+}
diff --git a/packages/storybook-react/scripts/dev.ts b/packages/storybook-react/scripts/dev.ts
@@ -8,14 +8,14 @@ import {
 	nodes as designNodes,
 	flatTokensRestoreToMap
 } from '@tokens-studio/graph-engine-nodes-design-tokens';
-import { registerTransforms } from '@tokens-studio/sd-transforms';
+import { register } from '@tokens-studio/sd-transforms';
 import StyleDictionary from 'style-dictionary';
 import chokidar from 'chokidar';
 import fs from 'fs-extra';
-import pathLib from 'path';
+import pathLib from 'node:path';
+import type { IResolvedToken } from '@tokens-studio/graph-editor/index.js';
 
-//@ts-expect-error
-registerTransforms(StyleDictionary, { casing: 'kebab' });
+register(StyleDictionary);
 
 type GenerateTokens = {
 	component: string;
@@ -33,11 +33,7 @@ async function generateTokens(opts: GenerateTokens) {
 				.join(basepath, 'generated', 'tokens', `${theme}.json`)
 				.replace(/\\/g, '/')
 		],
-		fileHeader: {
-			autoGeneratedFileHeader: () => {
-				return [`Do not edit directly, this file was auto-generated`];
-			}
-		},
+		preprocessors: ['tokens-studio'],
 		platforms: {
 			css: {
 				transformGroup: 'tokens-studio',
@@ -48,23 +44,22 @@ async function generateTokens(opts: GenerateTokens) {
 							.replace(/\\/g, '/'),
 						format: 'css/variables',
 						options: {
-							selector: `.${component}--${theme}`,
-							fileHeader: 'autoGeneratedFileHeader'
+							selector: `.${component}--${theme}`
 						}
 					}
-
 					// component tokens, e.g. for design system developer
 					// ...generateComponentFiles([component], theme),
 				]
 			}
 		}
 	}));
 
-	for (const cfg of configs) {
+	const buildPlatforms = async cfg => {
 		const sd = new StyleDictionary(cfg);
 		await sd.cleanAllPlatforms();
 		await sd.buildAllPlatforms();
-	}
+	};
+	await Promise.all(configs.map(buildPlatforms));
 }
 
 //These are all the nodes that are available in the editor
@@ -166,7 +161,7 @@ ${Object.entries(meta)
 
 	type TokenFile = {
 		name: string;
-		tokens: unknown;
+		tokens: IResolvedToken[];
 	};
 
 	const tokenFiles: TokenFile[] = [];

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -43,9 +43,9 @@
     "@tokens-studio/graph-engine-nodes-design-tokens": "*",
     "@tokens-studio/graph-engine-nodes-figma": "*",
     "@tokens-studio/graph-engine-nodes-image": "*",
-    "@tokens-studio/icons": "0.1.4",
-    "@tokens-studio/tokens": "0.3.4",
-    "@tokens-studio/ui": "^1.0.7",
+    "@tokens-studio/icons": "^0.1.4",
+    "@tokens-studio/tokens": "^0.3.7",
+    "@tokens-studio/ui": "^1.0.10",
     "@ts-rest/core": "^3.51.0",
     "@ts-rest/open-api": "^3.51.0",
     "@ts-rest/react-query": "^3.51.0",
@@ -104,4 +104,4 @@
     "@welldone-software/why-did-you-render": "^7.0.1",
     "typescript": "^5.4.5"
   }
-}
+}
diff --git a/packages/ui/src/app/layout.tsx b/packages/ui/src/app/layout.tsx
@@ -5,7 +5,7 @@ import '@tokens-studio/tokens/css/ts-theme-dark.css';
 import '@tokens-studio/tokens/css/ts-theme-light.css';
 
 import '@tokens-studio/tokens/css/base.css';
-import '@tokens-studio/ui/normalize.css';
+import '@tokens-studio/ui/css/normalize.css';
 
 import '@fontsource/geist-mono/400.css';
 import '@fontsource/geist-mono/500.css';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const version = '4.3.8';
		export const version = '4.3.9';