Feat/prep master

[SorsOps]

PR Type

Enhancement, Bug fix, Documentation

---

Description

• Enhanced NoteNode with Markdown support and edit mode.
• Refactored CommandPalette to use ReactFlow and simplified event handling.
• Refactored EditorTab and various hooks to use MobX for state management.
• Added new design token examples for color scales, dynamic validation, and dynamic naming.
• Fixed issues with variadic port value setting and node deletion logic.
• Updated various components and hooks for better readability and maintainability.

---

Changes walkthrough 📝

	Relevant files
Enhancement	12 files noteNode.tsx Enhance NoteNode with Markdown support and edit mode.        packages/graph-editor/src/components/flow/nodes/noteNode.tsx Added Markdown support for note descriptions. Introduced edit mode toggle with an icon button. Updated styles for better UI consistency. +26/-12  index.tsx Refactor CommandPalette to use ReactFlow and simplify event handling. packages/graph-editor/src/components/commandPalette/index.tsx Removed unnecessary reactFlowWrapper prop. Utilized useReactFlow for cursor position. Simplified event listeners for mouse movements. +13/-13  index.tsx Refactor EditorTab to use MobX and clean up code.                packages/ui/src/components/editor/index.tsx Removed unused imports and forwardRef. Updated to use MobX for state management. Cleaned up commented-out code. +13/-16  useGetEditor.ts Refactor useGetEditor hook to use MobX and simplify example loading. packages/ui/src/hooks/useGetEditor.ts Removed Redux dependencies. Refactored to use MobX for state management. Simplified loadExample function. +9/-49    index.tsx Refactor Index page to use MobX and remove unnecessary props. packages/ui/src/pages/index.tsx Removed unnecessary theme prop. Updated to use MobX for state management. +5/-9      flatten.ts Simplify FlattenNode input schema.                                              packages/nodes-design-tokens/src/nodes/flatten.ts Removed variadic schema creation. Updated input type to use array of arrays. +3/-4      index.tsx Add RefState to MobX global state management.                        packages/ui/src/mobx/index.tsx Added RefState class for managing editor references. Updated GlobalState to include refs. +13/-0    objectMerge.ts Simplify ObjectMergeNode input schema.                                      packages/graph-engine/src/nodes/generic/objectMerge.ts Removed variadic schema creation. Updated input type to use array of objects. +3/-3      input.ts Simplify input node deserialization.                                          packages/graph-engine/src/nodes/generic/input.ts Removed unnecessary deserialization of inputs. Simplified input creation logic. +1/-11    useCanDeleteNode.ts Simplify useCanDeleteNode hook logic.                                        packages/graph-editor/src/hooks/useCanDeleteNode.ts Simplified logic for checking if a node can be deleted. +2/-4      node.tsx Make error prop optional in Node wrapper.                                packages/graph-editor/src/components/flow/wrapper/node.tsx Made error prop optional. +1/-1      reactflow.css Update handle positions in ReactFlow CSS.                                packages/graph-editor/src/css/reactflow.css Updated handle positions to be relative. Added missing top and left properties. +8/-2
Documentation	8 files examples.tsx Add new design token examples for color scales and dynamic validation. packages/ui/src/data/examples/examples.tsx Added new example JSON files for various design token scenarios. Updated the examples array with new entries. +46/-3    output.ts Add comments and format generic output node.                          packages/graph-engine/src/nodes/generic/output.ts Added comments for better code understanding. Minor formatting changes. +3/-2      EmptyStateEditor.tsx Reorder imports and format EmptyStateEditor.                          packages/ui/src/components/EmptyStateEditor.tsx Reordered imports for better readability. Minor formatting changes. +3/-3      story.stories.tsx Update CommandPalette story to remove unused props.            packages/graph-editor/src/components/commandPalette/story.stories.tsx Removed unused reactFlowWrapper prop. Updated story to reflect changes in CommandPalette. +1/-3      index.ts Reorder imports in Redux selectors.                                            packages/ui/src/redux/selectors/index.ts Reordered imports for better readability. +1/-1      colorCurves.json Add color curves example.                                                                packages/ui/src/data/examples/colorCurves.json Added new example for color curves. +2266/-1 colorScale.json Add color scale example.                                                                  packages/ui/src/data/examples/colorScale.json Added new example for color scale. +761/-0  dynamicNaming.json Add dynamic naming example.                                                            packages/ui/src/data/examples/dynamicNaming.json Added new example for dynamic naming. +377/-0
Bug fix	3 files graph.ts Fix and enhance variadic port value setting in Graph.        packages/graph-engine/src/graph/graph.ts Fixed issue with variadic port value setting. Added type update logic for variadic arrays. +8/-1      nodeContextMenu.tsx Fix node deletion logic in NodeContextMenu.                            packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx Fixed logic to correctly handle non-deletable nodes. +1/-1      compare.ts Fix missing break statement in compare node.                          packages/graph-engine/src/nodes/logic/compare.ts Added missing break statement in switch case. +1/-0
Dependencies	1 files package.json Bump version and add react-markdown dependency.                    packages/graph-editor/package.json Bumped version to 2.10.0. Added react-markdown dependency. +4/-3

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[changeset-bot]

🦋 Changeset detected

Latest commit: 35f039c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@tokens-studio/graph-engine	Major
@tokens-studio/graph-editor	Major
@tokens-studio/graph-engine-nodes-audio	Major
@tokens-studio/graph-engine-nodes-design-tokens	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	4
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: In nodeContextMenu.tsx, the condition for checking if a node is deletable seems to be inverted. The condition if (!isDeletable) should likely be if (isDeletable) to correctly handle the deletion logic.
	Code Consistency: In useCanDeleteNode.ts, the condition simplification is good, but ensure it aligns with all use cases where the node's deletability is checked.
	Redundant Code: In output.ts of the graph-engine, the comment about creating outputs immediately seems misplaced or outdated. If it's crucial, it should be clarified or updated.
	Performance Concern: In graph.ts, the method for setting the value of a variadic port could be optimized. The current implementation might lead to performance issues for large arrays due to the use of concat.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Use the same function reference for adding and removing event listeners Ensure that the useEffect cleanup function correctly removes the event listener by referencing the exact function used in addEventListener. packages/graph-editor/src/components/commandPalette/index.tsx [106] -return () => document.removeEventListener('mousemove', move); +const moveHandler = debounce((e) => { + cursorPositionRef.current = { + x: e.clientX, + y: e.clientY, + }; +}, 100); +document.addEventListener('mousemove', moveHandler); +return () => document.removeEventListener('mousemove', moveHandler); Suggestion importance[1-10]: 10 Why: This suggestion correctly identifies a potential bug and provides a solution to ensure the event listener is properly removed, which is crucial for preventing memory leaks and unexpected behavior.	10
	Add error handling for null editor instances Replace the direct use of globalState.refs.editor.get() with a null check to ensure that the editor instance exists before performing operations on it. This will prevent potential runtime errors if the editor is not initialized. packages/ui/src/hooks/useGetEditor.ts [10-12] const editor = globalState.refs.editor.get(); if (!editor) { + console.error('Editor instance is not available.'); return; } Suggestion importance[1-10]: 8 Why: Adding error handling for null editor instances is a good practice to prevent potential runtime errors. The suggestion is contextually accurate and improves the robustness of the code.	8
	Add null check before setting the editor reference in global state Ensure the editor variable is checked for null or undefined before setting it in globalState.refs.editor.set(editor). This prevents setting an invalid reference in the global state. packages/ui/src/pages/index.tsx [30-33] const editor = globalState.refs.editor.get(); const ref = useCallback((editor) => { - globalState.refs.editor.set(editor); + if (editor) { + globalState.refs.editor.set(editor); + } else { + console.error('Invalid editor reference'); + } }, []); Suggestion importance[1-10]: 8 Why: Adding a null check before setting the editor reference in the global state is a good practice to avoid setting invalid references. This suggestion enhances the reliability of the code.	8
Performance	Debounce mousemove event to enhance performance Consider debouncing the mousemove event handler to improve performance and reduce the number of updates, especially in complex applications. packages/graph-editor/src/components/commandPalette/index.tsx [105] -document.addEventListener('mousemove', move); +import { debounce } from 'lodash'; +document.addEventListener('mousemove', debounce(move, 100)); Suggestion importance[1-10]: 9 Why: Debouncing the mousemove event handler is a valuable performance improvement, particularly in complex applications where frequent updates can be costly.	9
Possible issue	Standardize the data types of values in 'points' arrays to prevent type inconsistencies Ensure consistent data types for the 'points' arrays across all curve definitions. Currently, some 'points' arrays contain integers and others contain numbers. This inconsistency can lead to unexpected behavior or errors in data processing. It's recommended to standardize on one data type, preferably 'number' to accommodate fractional values. packages/ui/src/data/examples/colorCurves.json [14-28] "points": [ [ - 0, - 0 + 0.0, + 0.0 ], [ 0.4375, - 1 + 1.0 ], [ - 1, - 0 + 1.0, + 0.0 ], [ - 1, - 1 + 1.0, + 1.0 ] ] Suggestion importance[1-10]: 9 Why: The suggestion correctly identifies a potential issue with data type inconsistency in the 'points' arrays, which could lead to unexpected behavior. Standardizing on 'number' is a good practice to ensure consistency and accommodate fractional values.	9
Error handling	Add fallback for position conversion to handle potential errors Add error handling for the screenToFlowPosition method to manage cases where the conversion might fail or return unexpected results. packages/graph-editor/src/components/commandPalette/index.tsx [87] -position: reactflow.screenToFlowPosition(cursorPositionRef.current), +position: reactflow.screenToFlowPosition(cursorPositionRef.current) || { x: 0, y: 0 }, Suggestion importance[1-10]: 8 Why: Adding error handling for the screenToFlowPosition method is a good practice to ensure robustness, especially if the conversion might fail or return unexpected results.	8
Data integrity	Add "required" fields to JSON schemas to ensure essential properties are present For better data integrity and to avoid potential runtime errors, consider adding "required" fields in the JSON schemas where necessary. This ensures that essential properties must be present and correctly formatted. packages/ui/src/data/examples/colorScale.json [10-13] "type": { "$id": "https://schemas.tokens.studio/color.json", "title": "Color", - "type": "string" + "type": "string", + "required": ["title", "type"] } Suggestion importance[1-10]: 8 Why: Adding "required" fields to JSON schemas is important for ensuring data integrity and avoiding runtime errors. This suggestion addresses a significant aspect of data validation.	8
Enhancement	Improve type safety with type checking before casting Use TypeScript's type assertion to ensure type safety when casting file to SerializedGraph. This helps maintain strong typing and reduces potential runtime errors. packages/ui/src/hooks/useGetEditor.ts [16] -await editor.loadRaw(file as SerializedGraph) +if (file instanceof SerializedGraph) { + await editor.loadRaw(file) +} else { + console.error('File is not an instance of SerializedGraph'); +} Suggestion importance[1-10]: 7 Why: The suggestion improves type safety by checking the type before casting, which is beneficial. However, the existing code already uses TypeScript's type assertion, which is generally safe if used correctly.	7
	Standardize the precision of position values in JSON data Ensure consistent formatting and precision for the ui.position.x and ui.position.y values across different nodes to maintain a uniform layout and avoid minor visual discrepancies. packages/ui/src/data/examples/audio.json [35-36] -"ui.position.x": -391.3865505270938, -"ui.position.y": 194.07456979450214 +"ui.position.x": -391.39, +"ui.position.y": 194.07 Suggestion importance[1-10]: 5 Why: Standardizing the precision of position values in JSON data can improve visual consistency, but it is a minor enhancement. The suggestion is correct but not crucial.	5
Maintainability	Standardize the naming convention for "id" fields to improve readability Consider using a consistent naming convention for the "id" fields. Currently, the "id" fields use a mix of UUIDs and more descriptive names. Using a consistent format, either all UUIDs or descriptive names, can improve the readability and maintainability of the JSON structure. packages/ui/src/data/examples/colorScale.json [4-516] -"id": "30204297-03c6-480b-82c8-5ba44bdbf06d", -"id": "1cb6bbac-107e-4247-9d03-585631c435ad", -"id": "17c7dea5-5b17-417b-a93d-cf3246443ef3" +"id": "node-1", +"id": "node-2", +"id": "node-3" Suggestion importance[1-10]: 7 Why: Standardizing the naming convention for "id" fields can improve readability and maintainability, but it is not crucial for functionality. The suggestion is valid but not critical.	7
	Use references for repeated nested objects to reduce redundancy and improve management To reduce redundancy and improve data management, consider using references for repeated nested objects in the JSON structure. This approach can help manage large JSON files more efficiently by reusing existing definitions. packages/ui/src/data/examples/colorScale.json [10-33] -"type": { +"ColorType": { "$id": "https://schemas.tokens.studio/color.json", "title": "Color", "type": "string" }, -"type": { +"NumberType": { "$id": "https://schemas.tokens.studio/number.json", "title": "Number", "type": "number" } Suggestion importance[1-10]: 7 Why: Using references for repeated nested objects can reduce redundancy and improve data management, but it is a moderate improvement and not critical for the current functionality.	7
	Abstract repeated schema URLs into constants to simplify updates and enhance clarity To enhance the maintainability and scalability of the JSON structure, consider abstracting repeated schema URLs into a constants section at the top of the file. This change would make updates to schema URLs easier and the JSON structure cleaner. packages/ui/src/data/examples/colorScale.json [11-235] -"$id": "https://schemas.tokens.studio/color.json", -"$id": "https://schemas.tokens.studio/number.json", -"$id": "https://schemas.tokens.studio/string.json" +"$id": "SCHEMA_COLOR", +"$id": "SCHEMA_NUMBER", +"$id": "SCHEMA_STRING" Suggestion importance[1-10]: 6 Why: Abstracting repeated schema URLs into constants can simplify updates and enhance clarity, but it is a minor improvement and not essential for the current functionality.	6