Merge remote-tracking branch 'remotes/origin/master' into next

.changeset/eight-pans-reflect.md

@@ -0,0 +1,10 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": minor
+"@tokens-studio/graph-editor": minor
+"@tokens-studio/graph-engine": minor
+"@tokens-studio/graph-engine-nodes-image": minor
+"@tokens-studio/graph-engine-migration": minor
+"@tokens-studio/graph-engine-nodes-fs": minor
+---
+
+Removes tsup completely to prevent bundling, and rather to use raw typescript compilation

.changeset/shaggy-readers-shout.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": minor
+---
+
+Add support for all colorjs color spaces in the color nodes like color to string

.github/workflows/npm-release.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: "yarn"
 
       - name: Install dependencies

.github/workflows/pr-ci.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: "yarn"
 
       - name: Install turbo

.gitignore

@@ -8,4 +8,5 @@ dist
 docs
 yarn-error.log
 out
-data/postgres
+data/postgres
+*.tsbuildinfo

package.json

@@ -41,6 +41,7 @@
     ]
   },
   "dependencies": {
+    "ts-patch": "^3.2.1",
     "patch-package": "^8.0.0"
   },
   "devDependencies": {

packages/documentation/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # This Dockerfile is copy-pasted into our main docs at /docs/handbook/deploying-with-docker.
 # Make sure you update both files!

packages/graph-editor/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tokens-studio/graph-editor
 
+## 4.2.0
+
+### Minor Changes
+
+- 5878649: Update the build system on the editor to not bundle the compiled files which should allow for treeshaking
+
+### Patch Changes
+
+- ac96d35: Fix Icon Alignment on Quicksearch Group, Restyle Passthrough
+- 5af49ac: Fix an issue where create subgraph did not make the create inputs deletable
+- Updated dependencies [02620af]
+- Updated dependencies [bc39aeb]
+- Updated dependencies [83abbb5]
+- Updated dependencies [381fc4d]
+  - @tokens-studio/graph-engine@3.1.0
+
 ## 4.1.1
 
 ### Patch Changes

packages/graph-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokens-studio/graph-editor",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "UI for the graph engine",
   "author": "[email protected]",
   "type": "module",
@@ -10,20 +10,25 @@
     "url": "https://github.com/tokens-studio/graph-engine"
   },
   "exports": {
+    "./*": {
+      "import": "./dist/*",
+      "types": "./dist/*",
+      "style": "./dist/*"
+    },
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    },
-    "./index.css": "./dist/index.css"
+    }
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "start": "vite dev",
-    "build": "tsup",
+    "build": "node ./scripts/extractVersion.mjs && tspc  -p tsconfig.prod.json && npm run build:css",
+    "build:css": "postcss src/index.scss --base src  --dir dist --ext css",
     "build:storybook": "storybook build",
-    "dev": "tsup --watch",
+    "dev": "tspc -p tsconfig.prod.json --watch || npm run build:css --watch",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{tsx,ts,js,md,json}\" --write",
@@ -61,6 +66,7 @@
     "dagre": "^0.8.5",
     "dot-prop": "^8.0.0",
     "focus-trap-react": "^10.1.1",
+    "graphlib": "^2.1.8",
     "iconoir-react": "^7.6.0",
     "json5": "^2.2.3",
     "jszip": "^3.10.1",
@@ -102,23 +108,31 @@
     "@storybook/addon-mdx-gfm": "^8.0.9",
     "@storybook/react": "^8.0.9",
     "@storybook/react-vite": "^8.0.9",
+    "postcss-scss": "^4.0.9",
     "@tokens-studio/eslint-config-custom": "*",
     "@tokens-studio/prettier-config-custom": "*",
     "@types/graphlib": "^2.1.8",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.6.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
     "cypress": "^13.9.0",
     "cypress-react-selector": "^3.0.0",
-    "esbuild-sass-plugin": "^3.3.1",
+    "glob": "^11.0.0",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-css-variables": "^0.19.0",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^6.2.0",
+    "postcss-preset-env": "^10.0.5",
     "resp": "^0.1.1",
     "resq": "^1.11.0",
     "start-server-and-test": "^2.0.4",
     "storybook": "^8.0.9",
-    "tsup": "^8.1.0",
     "typescript": "^5.4.5",
+    "typescript-transform-paths": "^3.5.1",
     "vite": "^5.2.10",
-    "vite-plugin-babel": "^1.2.0",
     "vite-tsconfig-paths": "^4.2.2"
   },
   "publishConfig": {

packages/graph-editor/postcss.config.js

@@ -0,0 +1,23 @@
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import postcssImport from 'postcss-import';
+import postcssNested from 'postcss-nested';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
+  parser: 'postcss-scss',
+  plugins: [
+    postcssImport({
+      filter: (url) => {
+        if (url.startsWith('.')) {
+          return true;
+        }
+        return false;
+      },
+    }),
+    postcssNested(),
+    postcssPresetEnv(),
+    autoprefixer(),
+    cssnano(),
+  ],
+};

packages/graph-editor/scripts/extractVersion.mjs

@@ -0,0 +1,18 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+
+async function extractVersion() {
+    const raw = await fs.readFile('./package.json');
+    const packageJson = JSON.parse(raw);
+    const version = packageJson.version;
+    const filePath = path.join( 'src', 'data', 'version.ts');
+    const fileContent = `export const version = '${version}';\n`;
+
+    await fs.writeFile(filePath, fileContent);
+    console.log(`Updated version to ${version} in ${filePath}`);
+
+}
+
+
+extractVersion();

packages/graph-editor/src/components/ErrorBoundaryContent.tsx

@@ -1,5 +1,6 @@
 import { Button, Stack, Text } from '@tokens-studio/ui';
-import { ImperativeEditorRef, mainGraphSelector } from '../index.js';
+import { ImperativeEditorRef } from '@/editor/editorTypes.js';
+import { mainGraphSelector } from '@/redux/selectors/graph.js';
 import { title } from '@/annotations/index.js';
 import { useSelector } from 'react-redux';
 import React from 'react';

packages/graph-editor/src/components/commandPalette/index.tsx

@@ -74,7 +74,7 @@ const CommandMenuGroup = observer(
       <Command.Group
         key={group.key}
         heading={
-          <Stack align="center">
+          <Stack align="center" gap={2} css={{ color: '$fgMuted' }}>
             {group.icon}
             {group.title}
           </Stack>

packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx

@@ -163,9 +163,6 @@ export const NodeContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     <Menu id={id}>
       <Item onClick={onDuplicate}>Duplicate</Item>
       <Item onClick={focus}>Focus</Item>
-      <Item disabled={!isDeletable} onClick={deleteEl}>
-        Delete
-      </Item>
       <Item onClick={forceExecution}>Force Execution</Item>
       <Separator />
       {nodes?.length == 1 && (
@@ -174,8 +171,11 @@ export const NodeContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
           <Item onClick={onTraceTarget}>Trace Downstream</Item>
         </>
       )}
-
       <Item onClick={onResetTrace}>Reset Trace</Item>
+      <Separator />
+      <Item disabled={!isDeletable} onClick={deleteEl}>
+        Delete
+      </Item>
     </Menu>
   );
 };

packages/graph-editor/src/components/controls/any.tsx

@@ -30,7 +30,6 @@ export const AnyField = observer(({ port, readOnly }: IField) => {
     <Stack direction="column" gap={3}>
       <Select value={inputType} onValueChange={setInputType}>
         <Select.Trigger label="Type" value={inputType} />
-        {/* @ts-expect-error */}
         <Select.Content css={{ maxHeight: '200px' }} position="popper">
           {AllSchemas.map((x, i) => (
             <Select.Item value={x.$id!} key={i}>

packages/graph-editor/src/components/controls/array.tsx

@@ -209,7 +209,6 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
       <Stack direction="column" gap={3}>
         <Select value={selectItemsType} onValueChange={setSelectItemsType}>
           <Select.Trigger label="Type" value={selectItemsType} />
-          {/* @ts-expect-error */}
           <Select.Content css={{ maxHeight: '200px' }} position="popper">
             {AllSchemas.map((x, i) => (
               <Select.Item value={x.$id!} key={i}>

packages/graph-editor/src/components/controls/color.tsx

@@ -23,7 +23,7 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
   }, [port.value]);
 
   const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+    (e: React.ChangeEvent<HTMLInputElement> | string) => {
       let col;
       //Weird  problem with the color picker if the user decides to use the text input
       if (typeof e === 'string') {

packages/graph-editor/src/components/controls/enumerated.tsx

@@ -17,7 +17,6 @@ export const EnumeratedTextfield = observer(({ port, readOnly }: IField) => {
   return (
     <Select value={port.value || '-'} onValueChange={onChange}>
       <Select.Trigger label="Value" value={port.value || '-'} />
-      {/* @ts-expect-error */}
       <Select.Content css={{ maxHeight: '200px' }} position="popper">
         {port.type.enum.map((x, i) => (
           <Select.Item value={x} key={i}>

packages/graph-editor/src/components/debugger/index.tsx

@@ -1,4 +1,3 @@
-import './debugger.scss';
 import { Box, Stack, Text } from '@tokens-studio/ui';
 import { DebugInfo, debugInfo } from './data.js';
 import {

packages/graph-editor/src/components/flow/handles.tsx

@@ -35,7 +35,6 @@ export const HandleContainer = ({
   children,
   shouldHide = false,
   full,
-  isSmall,
   className,
 }: HolderProps) => {
   if (shouldHide) return null;
@@ -48,7 +47,6 @@ export const HandleContainer = ({
           flexBasis: full ? '100%' : '50%',
           position: 'relative',
           textAlign: type === 'source' ? 'right' : 'left',
-          minWidth: isSmall ? 'auto' : '150px',
         }}
         className={className}
       >
@@ -151,6 +149,11 @@ const HandleHolder = styled(Box, {
         minHeight: '1em',
       },
     },
+    isAnchor: {
+      true: {
+        padding: '$2 $2',
+      },
+    },
   },
 });
 
@@ -167,6 +170,7 @@ export interface HandleProps {
   //Inline typing info
   type?: string;
   variadic?: boolean;
+  isAnchor?: boolean;
 }
 
 export const Handle = (props: HandleProps) => {
@@ -182,6 +186,7 @@ export const Handle = (props: HandleProps) => {
     isConnected,
     backgroundColor,
     variadic,
+    isAnchor,
   } = props;
   const { position, type } = useHandle();
   const isValidConnection = useIsValidConnection();
@@ -192,6 +197,7 @@ export const Handle = (props: HandleProps) => {
   return (
     <HandleHolder
       collapsed={collapsed || shouldHide}
+      isAnchor={isAnchor}
       css={{
         flexDirection: type === 'target' ? 'row' : 'row-reverse',
       }}
@@ -213,6 +219,7 @@ export const Handle = (props: HandleProps) => {
           isValidConnection={isValidConnection}
           isConnected={isConnected}
           isArray={isArray}
+          isAnchor={isAnchor}
         ></StyledRawHandle>
       </Tooltip>
       <Stack