Adds Example dialog

[six7]

Adds a way to load examples via the toolbar and via the empty state.

Decided to go with the command palette component for now as it would allow us to scale this to potentially dozens of nodes with an easy to use search interface that we could also extend with a preview on the right later on.

CleanShot.2023-10-07.at.10.33.16.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 858520e

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

This PR includes changesets to release 2 packages

Name	Type
@tokens-studio/graph-editor	Patch
@tokens-studio/graph-engine-ui	Patch

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 Analysis

• 🎯 Main theme: Adding functionality to load examples in the application
• 📝 PR summary: This PR introduces a new feature that allows users to load examples via the toolbar and via the empty state. It includes a new ExamplesPicker component, modifications to the EditorApp and EditorTab components, and updates to the redux state to accommodate the new feature.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 3, because the PR involves changes across multiple files and introduces new functionality. However, the code is well-structured and follows good practices, which makes it easier to review.
• 🔒 Security concerns: No security concerns found

PR Feedback

• 💡 General suggestions: The PR is well-structured and the code is clean. However, it would be beneficial to add tests for the new functionality to ensure it works as expected and prevent future regressions.

• 🤖 Code feedback:

  • relevant file: packages/ui/src/components/ExamplesPicker.tsx
    suggestion: Consider handling the case where the 'editor' is null more gracefully. Instead of just returning, you could show a user-friendly error message or notification. [important]
    relevant line: if (!editor) {

  • relevant file: packages/ui/src/components/ExamplesPicker.tsx
    suggestion: The setTimeout with 0 delay is used as a workaround to wait for the clear to finish. Consider refactoring this part to avoid using setTimeout. [medium]
    relevant line: setTimeout(() => {

How to use

To invoke the PR-Agent, add a comment using one of the following commands:
/review [-i]: Request a review of your Pull Request. For an incremental review, which only considers changes since the last review, include the '-i' option.
/describe: Modify the PR title and description based on the contents of the PR.
/improve [--extended]: Suggest improvements to the code in the PR. Extended mode employs several calls, and provides a more thorough feedback.
/ask <QUESTION>: Pose a question about the PR.
/update_changelog: Update the changelog based on the PR's contents.

To edit any configuration parameter from configuration.toml, add --config_path=new_value
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, use the /config command.