diff --git a/.gitignore b/.gitignore index 3e76b366a..59fce6c8b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ coverage out/ build sitemap.xml +next-env.d.ts # misc .DS_Store diff --git a/.prettierrc b/.prettierrc index 1b1393573..2aa412e96 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,6 @@ "useTabs": false, "singleQuote": true, "printWidth": 90, - "proseWrap": "always" + "proseWrap": "always", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index dcfed6e47..beb752304 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,11 +1,11 @@ ## Our Pledge -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and -expression, level of experience, education, socio-economic status, nationality, -personal appearance, race, religion, or sexual orientation. +In the interest of fostering an open and welcoming environment, we as contributors and +maintainers pledge to making participation in our project and our community a +harassment-free experience for everyone, regardless of age, body size, disability, +ethnicity, sex characteristics, gender identity and expression, level of experience, +education, socio-economic status, nationality, personal appearance, race, religion, or +sexual orientation. ## Our Standards @@ -19,41 +19,41 @@ Examples of behavior that contributes to creating a positive environment include Examples of unacceptable behavior by participants include: -- The use of sexualized language or imagery and unwelcome sexual attention or - advances +- The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment -- Publishing others' private information, such as a physical or electronic - address, without explicit permission +- Publishing others' private information, such as a physical or electronic address, + without explicit permission ## Our Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective and/or -restorative action in response to any instances of unacceptable behavior. +Project maintainers are responsible for clarifying the standards of acceptable behavior +and are expected to take appropriate and fair corrective and/or restorative action in +response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or reject -comments, commits, code, wiki edits, issues, and other contributions that are -not aligned to this Code of Conduct, or to ban temporarily or permanently any -contributor for other behaviors that they deem inappropriate, threatening, -offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject comments, +commits, code, wiki edits, issues, and other contributions that are not aligned to this +Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors +that they deem inappropriate, threatening, offensive, or harmful. -Where it is appropriate and parties consent, project maintainers will endeavour -to facilitate restorative justice over punitive action. +Where it is appropriate and parties consent, project maintainers will endeavour to +facilitate restorative justice over punitive action. ## Scope -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. +This Code of Conduct applies both within project spaces and in public spaces when an +individual is representing the project or its community. Examples of representing a +project or community include using an official project e-mail address, posting via an +official social media account, or acting as an appointed representative at an online or +offline event. Representation of a project may be further defined and clarified by project +maintainers. -Additionally, we ask that all community members uphold the standards laid out in -this Code of Conduct to create a safe and welcome space for all. +Additionally, we ask that all community members uphold the standards laid out in this Code +of Conduct to create a safe and welcome space for all. ## Attribution -This Code of Conduct is a direct descendant of the [Gleam Code of Conduct](https://github.com/gleam-lang/gleam/blob/f793b5d28a3102276a8b861c7e16a19c5231426e/CODE_OF_CONDUCT.md), -which is itself a descendant of the [Contributor Covenant (v1.4)](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html). +This Code of Conduct is a direct descendant of the +[Gleam Code of Conduct](https://github.com/gleam-lang/gleam/blob/f793b5d28a3102276a8b861c7e16a19c5231426e/CODE_OF_CONDUCT.md), +which is itself a descendant of the +[Contributor Covenant (v1.4)](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3fb165a5e..3ce582c04 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,59 +1,57 @@ # Contributing to React Flow -Hello there! So glad you want to help out with our documentation đŸ€— You’re the -best. Here’s a guide for how you can contribute to the project. +Hello there! So glad you want to help out with our documentation đŸ€— You’re the best. +Here’s a guide for how you can contribute to the project. # Our Contributing Philosophy -The direction of each of our libraries, which new features are added, and which -are left out, is decided by the core team (sometimes referred to as a “cathedral” -style of development). The core team is paid to do this work -([see how here](https://reactflow.dev/blog/asking-for-money-for-open-source/)). -With this model we ensure that the people doing the most work on the library are -paid for their time and effort, and that we prevent the library from bloating. +The direction of each of our libraries, which new features are added, and which are left +out, is decided by the core team (sometimes referred to as a “cathedral” style of +development). The core team is paid to do this work +([see how here](https://reactflow.dev/blog/asking-for-money-for-open-source/)). With this +model we ensure that the people doing the most work on the library are paid for their time +and effort, and that we prevent the library from bloating. That being said, our libraries are only interesting **because of the people who make -things with them** Some of the most important and undervalued work in open source -is from non-code contributions, and that is where we can use the most help from you. +things with them** Some of the most important and undervalued work in open source is from +non-code contributions, and that is where we can use the most help from you. # How can I help? The things we need the most help for the library and its community are: **🐛 Bug reports:** We simply can’t catch them all. Check -[existing issues](https://github.com/xyflow/xyflow/issues/) and -discussions first, then [create a new issue](https://github.com/xyflow/xyflow/issues/new/choose) -to tell us what’s up. +[existing issues](https://github.com/xyflow/xyflow/issues/) and discussions first, then +[create a new issue](https://github.com/xyflow/xyflow/issues/new/choose) to tell us what’s +up. **💬 Answering questions** in our [Discord Server](https://discord.gg/Bqt6xrs) and -[Github discussions](https://github.com/xyflow/xyflow/discussions). This is -surprisingly high-impact for us! Folks always have questions and we can't always -get round to them all. +[Github discussions](https://github.com/xyflow/xyflow/discussions). This is surprisingly +high-impact for us! Folks always have questions and we can't always get round to them all. 🎬 **Create tutorials** for React Flow. Send them to us and we’ll happily share them! -**✏ Edit our docs**: This repo contains the docs sites for both React Flow and -Svelte Flow. If you notice a typo or think something can be clearer, you can let -us know by opening an issue or PR here. +**✏ Edit our docs**: This repo contains the docs sites for both React Flow and Svelte +Flow. If you notice a typo or think something can be clearer, you can let us know by +opening an issue or PR here. All interactions should be done with care following our [Code of Conduct](https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md). ## Enhancements -If you have an idea or suggestion for an enhancement to the React Flow library, -please use the [New Features](https://github.com/xyflow/xyflow/discussions/categories/new-features) -discussion section. If you want to build it yourself, **please reach out to us -before you dive into a new pull request.** The direction of React Flow and which -new features are added are discussed in our Discord Server and in +If you have an idea or suggestion for an enhancement to the React Flow library, please use +the [New Features](https://github.com/xyflow/xyflow/discussions/categories/new-features) +discussion section. If you want to build it yourself, **please reach out to us before you +dive into a new pull request.** The direction of React Flow and which new features are +added are discussed in our Discord Server and in [this Github discussions section](https://github.com/xyflow/xyflow/discussions/categories/new-features), and in the end they are decided by the core team. -Talking to us first about the enhancement you want to build will be the most likely -way to get your pull request into the library (see Our Contributing Philosophy -above). We would hate to see you write code you’re proud of, just to learn that -we’ve already been working on the same thing, or that we feel doesn’t fit into -the core library. +Talking to us first about the enhancement you want to build will be the most likely way to +get your pull request into the library (see Our Contributing Philosophy above). We would +hate to see you write code you’re proud of, just to learn that we’ve already been working +on the same thing, or that we feel doesn’t fit into the core library. ### Contact us @@ -70,5 +68,6 @@ Please use a meaningful commit message and add a little description of your chan 1. Install dependencies `pnpm install` 2. Start dev server `pnpm dev` -3. Test your changes with the existing examples or add a new one if it's needed for your changes +3. Test your changes with the existing examples or add a new one if it's needed for your + changes 4. Run tests `pnpm test` and add new new tests if you are introducing a new feature diff --git a/README.md b/README.md index e67faf017..9df953829 100644 --- a/README.md +++ b/README.md @@ -5,60 +5,56 @@ This monorepo contains our team website and the docs for our libraries. - [xyflow.com](https://xyflow.com) - our team website and blog -- [reactflow.dev](https://reactflow.dev) - the website and documentation for the React Flow library -- [svelteflow.dev](https://svelteflow.dev) - the website and documentation for the Svelte Flow library +- [reactflow.dev](https://reactflow.dev) - the website and documentation for the React + Flow library +- [svelteflow.dev](https://svelteflow.dev) - the website and documentation for the Svelte + Flow library ## What's inside? -We're using [Turborepo](https://turbo.build/repo) to manage this monorepo because -there's a lot going on. +We're using [Turborepo](https://turbo.build/repo) to manage this monorepo because there's +a lot going on. ### apps/ -The apps directory contains projects that run on the backend or applications we -might want to run during development: +The apps directory contains projects that run on the backend or applications we might want +to run during development: -- `apps/example-apps` contains all of our examples and tutorials for ReactFlow and SvelteFlow. -- `apps/ui-components` houses all of the components for [React Flow Components](https://reactflow.dev/components). +- `apps/example-apps` contains all of our examples and tutorials for ReactFlow and + SvelteFlow. +- `apps/ui-components` houses all of the components for + [React Flow Components](https://reactflow.dev/components). ### packages/ -The packages in this monorepo are reusable self-contained bits that we want to -share across our apps and websites. Much of it is configuration for the different -tools we use: +The packages in this monorepo are reusable self-contained bits that we want to share +across our apps and websites. Much of it is configuration for the different tools we use: - `packages/eslint-config-xyflow` -- `packages/xy-tailwind-config` - `packages/xy-tsconfig` -- `packages/xy-ui` is a React component library that contains any components that - we want to share across our websites. The package encompasses everything from - page layouts, UI building blocks, and complex widgets. We often use - [Shadcn](https://ui.shadcn.com) when looking to add new components, and we style - everything with [Tailwind](https://tailwindcss.com). ### sites/ -Each directory in the sites folder is a separate website that we deploy. The name -of the directory always corresponds to the domain name of the website: +Each directory in the sites folder is a separate website that we deploy. The name of the +directory always corresponds to the domain name of the website: -- `sites/reactflow.dev` is the documentation site for React Flow. It, and the - rest of sites, are built with [Nextra](https://nextra.site/) and - [Next.js](https://nextjs.org/). +- `sites/reactflow.dev` is the documentation site for React Flow. It, and the rest of + sites, are built with [Nextra](https://nextra.site/) and [Next.js](https://nextjs.org/). - `sites/svelteflow.dev` is the documentation for our newest library, Svelte Flow. -- `sites/xyflow.com` is the new home page for our organization. It contains our - blog and some information on how we approach open source development. +- `sites/xyflow.com` is the new home page for our organization. It contains our blog and + some information on how we approach open source development. ## Getting started -To run any of the websites locally, you'll first need to install the dependencies -and packages. We recommend using [pnpm](https://pnpm.io/) to manage your dependencies. +To run any of the websites locally, you'll first need to install the dependencies and +packages. We recommend using [pnpm](https://pnpm.io/) to manage your dependencies. ```sh pnpm install ``` -If you take a peek in `package.json` you'll see we have a few different scripts -to run our apps. If you just want to run everything at once, you can just do: +If you take a peek in `package.json` you'll see we have a few different scripts to run our +apps. If you just want to run everything at once, you can just do: ```sh pnpm run dev @@ -79,39 +75,41 @@ For everything else, there is an individual script to run each app independently ### Displaying Showcase Projects -We have a database of projects that use our libraries stored in notion. Both the -React Flow and Svelte Flow sites are fetching this data at build time using `getStaticProps`. You need to have a `.env.local` file with a `NOTION_API_SECRET` to make this work locally. Otherwise, placeholder showcases are shown. +We have a database of projects that use our libraries stored in notion. Both the React +Flow and Svelte Flow sites are fetching this data at build time using `getStaticProps`. +You need to have a `.env.local` file with a `NOTION_API_SECRET` to make this work locally. +Otherwise, placeholder showcases are shown. ### Update React Flow and Svelte Flow dependencies -There is a Github action that checks the latest React Flow and Svelte Flow versions -daily and creates a PR if there is a new version. +There is a Github action that checks the latest React Flow and Svelte Flow versions daily +and creates a PR if there is a new version. --- ## Support our work with React Flow Pro -React Flow and Svelte Flow are open-source MIT-licensed libraries, and it will -be forever. Our libraries enable thousands of solo developers and organizations -like Stripe and Linkedin to build their node-based apps. With so many active -users, it takes time and effort to maintain the library, docs, and community. -We can’t do that without your support. +React Flow and Svelte Flow are open-source MIT-licensed libraries, and it will be forever. +Our libraries enable thousands of solo developers and organizations like Stripe and +Linkedin to build their node-based apps. With so many active users, it takes time and +effort to maintain the library, docs, and community. We can’t do that without your +support. [](https://reactflow.dev/pro) -Why Subscribe? With your subscription, you are ensuring the sustainable -maintenance and development of both React Flow and Svelte Flow. This is how we -make sure these libraries stay MIT-licensed. In return, you get high-quality, -maintained, updated libraries, along with benefits like direct support, -prioritized feature requests, and access to our Pro Examples. +Why Subscribe? With your subscription, you are ensuring the sustainable maintenance and +development of both React Flow and Svelte Flow. This is how we make sure these libraries +stay MIT-licensed. In return, you get high-quality, maintained, updated libraries, along +with benefits like direct support, prioritized feature requests, and access to our Pro +Examples. --- ## Contact us -We're happy to try and answer any questions you have about our libraries. We're -also always excited when folks want to share their projects with us. There are -a few ways you can get in touch: +We're happy to try and answer any questions you have about our libraries. We're also +always excited when folks want to share their projects with us. There are a few ways you +can get in touch: - Use the contact form on our [website](https://xyflow.com/contact). - Drop us an email at [info@xyflow.com](mailto:info@xyflow.com) diff --git a/apps/example-apps/.env b/apps/example-apps/.env new file mode 100644 index 000000000..c7276a4b4 --- /dev/null +++ b/apps/example-apps/.env @@ -0,0 +1 @@ +ENABLE_EXPERIMENTAL_COREPACK=1 diff --git a/apps/example-apps/README.md b/apps/example-apps/README.md index ee95d8eb2..38d262e49 100644 --- a/apps/example-apps/README.md +++ b/apps/example-apps/README.md @@ -4,26 +4,25 @@ ### `pnpm dev` -Starts the vite dev server, with hot reloading. We have a custom plugin configured -to re-generate the `source.json` file whenever an example is updated, but this -will *not* hot-reload any external apps that are consuming it. +Starts the vite dev server, with hot reloading. We have a custom plugin configured to +re-generate the `source.json` file whenever an example is updated, but this will _not_ +hot-reload any external apps that are consuming it. -Also note that changing an example without triggering a hot-reload (eg you have -navigated to example `A` and then changed some files in example `B`) this wil -*not* trigger a re-generate of the `source.json` file. +Also note that changing an example without triggering a hot-reload (eg you have navigated +to example `A` and then changed some files in example `B`) this wil _not_ trigger a +re-generate of the `source.json` file. ### `pnpm scaffold` -You can run this script to generate a new React or Svelte example under a given -path. It will scaffold out all the files necessary for a new example, including -the entry `index.html` and a minimal React or Svelte component. +You can run this script to generate a new React or Svelte example under a given path. It +will scaffold out all the files necessary for a new example, including the entry +`index.html` and a minimal React or Svelte component. ### `pnpm build` -Runs the `vite build` command. The same plugin that we use to generate the -`source.json` files during dev will be used here at the beginning of the build. +Runs the `vite build` command. The same plugin that we use to generate the `source.json` +files during dev will be used here at the beginning of the build. ### `pnpm screenshots` -This command updates all preview screenshots for everything under /react and -/svelte. +This command updates all preview screenshots for everything under /react and /svelte. diff --git a/apps/example-apps/package.json b/apps/example-apps/package.json index 013d4d037..e4e77c5c4 100644 --- a/apps/example-apps/package.json +++ b/apps/example-apps/package.json @@ -7,28 +7,28 @@ "dev": "vite dev", "build": "vite build", "scaffold": "node scripts/scaffold/index.js", - "screenshots": "concurrently \"vite dev\" \"node scripts/generate-screenshots.js\"", - "screenshots:missing": "node scripts/generate-screenshots.js --only-missing" + "screenshots": "pnpm run build && concurrently --kill-others --success first \"vite preview --host 127.0.0.1 --strictPort --port 4173\" \"pnpm exec tsx scripts/generate-screenshots.ts --base-url http://127.0.0.1:4173\"", + "screenshots:missing": "pnpm run build && concurrently --kill-others --success first \"vite preview --host 127.0.0.1 --strictPort --port 4173\" \"pnpm exec tsx scripts/generate-screenshots.ts --only-missing --base-url http://127.0.0.1:4173\"" + }, + "exports": { + "./package.json": "./package.json" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.3", "@tsconfig/svelte": "^5.0.4", - "@types/cors": "^2.8.17", - "@types/express": "^5.0.1", - "@types/react": "^19.2.0", - "@types/react-dom": "^19.2.0", + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", "@vitejs/plugin-react": "^4.4.1", "concurrently": "^9.1.2", - "cors": "^2.8.5", - "express": "^5.1.0", "glob": "^11.0.2", - "picocolors": "^1.1.1", "svelte-check": "^4.1.6", - "tslib": "^2.8.1", - "typescript": "^5.8.3", + "tsx": "^4.19.2", + "typescript": "catalog:", "vite": "^6.3.3" }, "dependencies": { + "@blazediff/core": "^1.9.1", "@dagrejs/dagre": "^1.1.4", "@lucide/svelte": "^0.510.0", "@neodrag/react": "^2.3.1", @@ -36,8 +36,8 @@ "@radix-ui/react-slot": "^1.2.0", "@tailwindcss/vite": "^4.1.16", "@threlte/core": "^8.0.2", - "@xyflow/react": "^12.10.0", - "@xyflow/svelte": "1.4.1", + "@xyflow/react": "catalog:", + "@xyflow/svelte": "catalog:", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "d3-drag": "^3.0.0", @@ -52,16 +52,17 @@ "nanoid": "^5.1.5", "perfect-freehand": "^1.2.2", "puppeteer": "^24.7.2", - "react": "^19.2.0", - "react-dom": "^19.2.0", + "react": "catalog:", + "react-dom": "catalog:", "react-icons": "^5.5.0", "react-remark": "^2.1.0", + "sharp": "^0.34.4", "svelte": "^5.28.2", "svelte-feather-icons": "^4.2.0", "tailwind-merge": "^3.2.0", - "tailwindcss": "^4.1.16", + "tailwindcss": "catalog:", "twind": "^0.16.19", "webcola": "^3.4.0", "zustand": "5.0.3" } -} \ No newline at end of file +} diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/App.tsx b/apps/example-apps/react/examples/edges/animating-edges-svg/App.tsx index 46056ce41..47e93951e 100644 --- a/apps/example-apps/react/examples/edges/animating-edges-svg/App.tsx +++ b/apps/example-apps/react/examples/edges/animating-edges-svg/App.tsx @@ -1,10 +1,5 @@ import React from 'react'; -import { - ReactFlow, - useNodesState, - useEdgesState, - Background, -} from '@xyflow/react'; +import { ReactFlow, useNodesState, useEdgesState, Background } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; @@ -19,9 +14,7 @@ const edgeTypes = { animatedSvg: AnimatedSVGEdge, }; -const initialEdges = [ - { id: '1->2', type: 'animatedSvg', source: '1', target: '2' }, -]; +const initialEdges = [{ id: '1->2', type: 'animatedSvg', source: '1', target: '2' }]; const EdgesFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); @@ -35,6 +28,7 @@ const EdgesFlow = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/index.tsx b/apps/example-apps/react/examples/edges/animating-edges-svg/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/examples/edges/animating-edges-svg/index.tsx +++ b/apps/example-apps/react/examples/edges/animating-edges-svg/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/preview-dark.jpg b/apps/example-apps/react/examples/edges/animating-edges-svg/preview-dark.jpg new file mode 100644 index 000000000..01673163c Binary files /dev/null and b/apps/example-apps/react/examples/edges/animating-edges-svg/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/preview.jpg b/apps/example-apps/react/examples/edges/animating-edges-svg/preview.jpg index d59b95bc6..ddbd3bf65 100644 Binary files a/apps/example-apps/react/examples/edges/animating-edges-svg/preview.jpg and b/apps/example-apps/react/examples/edges/animating-edges-svg/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/animating-edges/App.tsx b/apps/example-apps/react/examples/edges/animating-edges/App.tsx index 1e9cdafaf..387d49d1d 100644 --- a/apps/example-apps/react/examples/edges/animating-edges/App.tsx +++ b/apps/example-apps/react/examples/edges/animating-edges/App.tsx @@ -1,10 +1,5 @@ import React from 'react'; -import { - ReactFlow, - useNodesState, - useEdgesState, - Background, -} from '@xyflow/react'; +import { ReactFlow, useNodesState, useEdgesState, Background } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; @@ -42,6 +37,7 @@ const EdgesFlow = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/animating-edges/index.tsx b/apps/example-apps/react/examples/edges/animating-edges/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/examples/edges/animating-edges/index.tsx +++ b/apps/example-apps/react/examples/edges/animating-edges/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/examples/edges/animating-edges/preview-dark.jpg b/apps/example-apps/react/examples/edges/animating-edges/preview-dark.jpg new file mode 100644 index 000000000..c93c6c1e0 Binary files /dev/null and b/apps/example-apps/react/examples/edges/animating-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/animating-edges/preview.jpg b/apps/example-apps/react/examples/edges/animating-edges/preview.jpg index e77947e6d..a825b7f03 100644 Binary files a/apps/example-apps/react/examples/edges/animating-edges/preview.jpg and b/apps/example-apps/react/examples/edges/animating-edges/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/custom-connectionline/App.jsx b/apps/example-apps/react/examples/edges/custom-connectionline/App.jsx index 7c6591991..2e6507c30 100644 --- a/apps/example-apps/react/examples/edges/custom-connectionline/App.jsx +++ b/apps/example-apps/react/examples/edges/custom-connectionline/App.jsx @@ -46,6 +46,7 @@ const ConnectionLineFlow = () => { fitViewOptions={{ padding: 0.2, }} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/custom-connectionline/preview-dark.jpg b/apps/example-apps/react/examples/edges/custom-connectionline/preview-dark.jpg new file mode 100644 index 000000000..4c091c7d6 Binary files /dev/null and b/apps/example-apps/react/examples/edges/custom-connectionline/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/custom-connectionline/preview.jpg b/apps/example-apps/react/examples/edges/custom-connectionline/preview.jpg index eb3fc9d2f..39a6973fa 100644 Binary files a/apps/example-apps/react/examples/edges/custom-connectionline/preview.jpg and b/apps/example-apps/react/examples/edges/custom-connectionline/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/custom-edges/App.tsx b/apps/example-apps/react/examples/edges/custom-edges/App.tsx index fcd52b60c..34159b890 100644 --- a/apps/example-apps/react/examples/edges/custom-edges/App.tsx +++ b/apps/example-apps/react/examples/edges/custom-edges/App.tsx @@ -123,6 +123,7 @@ const EdgesFlow = () => { fitView attributionPosition="top-right" connectionMode={ConnectionMode.Loose} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalEdge.tsx b/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalEdge.tsx index 6a6a75300..fe58e2ff1 100644 --- a/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalEdge.tsx +++ b/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalEdge.tsx @@ -21,9 +21,7 @@ export const getSpecialPath = ( const centerX = (sourceX + targetX) / 2; const centerY = (sourceY + targetY) / 2; - return `M ${sourceX} ${sourceY} Q ${centerX} ${ - centerY + offset - } ${targetX} ${targetY}`; + return `M ${sourceX} ${sourceY} Q ${centerX} ${centerY + offset} ${targetX} ${targetY}`; }; export default function CustomEdge({ diff --git a/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalNode.tsx b/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalNode.tsx index 2a01d9354..b4aa36d5f 100644 --- a/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalNode.tsx +++ b/apps/example-apps/react/examples/edges/custom-edges/BiDirectionalNode.tsx @@ -1,10 +1,5 @@ import React, { memo } from 'react'; -import { - type BuiltInNode, - type NodeProps, - Handle, - Position, -} from '@xyflow/react'; +import { type BuiltInNode, type NodeProps, Handle, Position } from '@xyflow/react'; const BiDirectionalNode = ({ data }: NodeProps) => { return ( diff --git a/apps/example-apps/react/examples/edges/custom-edges/preview-dark.jpg b/apps/example-apps/react/examples/edges/custom-edges/preview-dark.jpg new file mode 100644 index 000000000..5c589e93f Binary files /dev/null and b/apps/example-apps/react/examples/edges/custom-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/custom-edges/preview.jpg b/apps/example-apps/react/examples/edges/custom-edges/preview.jpg index 318c96f26..e8f8e0516 100644 Binary files a/apps/example-apps/react/examples/edges/custom-edges/preview.jpg and b/apps/example-apps/react/examples/edges/custom-edges/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/delete-edge-on-drop/App.jsx b/apps/example-apps/react/examples/edges/delete-edge-on-drop/App.jsx index 8db12ede9..b3be1c938 100644 --- a/apps/example-apps/react/examples/edges/delete-edge-on-drop/App.jsx +++ b/apps/example-apps/react/examples/edges/delete-edge-on-drop/App.jsx @@ -73,6 +73,7 @@ const DeleteEdgeDrop = () => { onConnect={onConnect} fitView attributionPosition="top-right" + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview-dark.jpg b/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview-dark.jpg new file mode 100644 index 000000000..5a4675428 Binary files /dev/null and b/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview.jpg b/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview.jpg index 4744f5e56..7ea4a32e6 100644 Binary files a/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview.jpg and b/apps/example-apps/react/examples/edges/delete-edge-on-drop/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-intersection/App.tsx b/apps/example-apps/react/examples/edges/edge-intersection/App.tsx index d94acc4eb..a84d7b653 100644 --- a/apps/example-apps/react/examples/edges/edge-intersection/App.tsx +++ b/apps/example-apps/react/examples/edges/edge-intersection/App.tsx @@ -70,9 +70,7 @@ export default function App() { const onNodeDrag: OnNodeDrag = useCallback( (e, node) => { - const nodeDiv = document.querySelector( - `.react-flow__node[data-id=${node.id}]`, - ); + const nodeDiv = document.querySelector(`.react-flow__node[data-id=${node.id}]`); if (!nodeDiv) return; @@ -108,6 +106,7 @@ export default function App() { onNodeDrag={onNodeDrag} defaultEdgeOptions={defaultEdgeOptions} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/edge-intersection/preview-dark.jpg b/apps/example-apps/react/examples/edges/edge-intersection/preview-dark.jpg new file mode 100644 index 000000000..d6d572e44 Binary files /dev/null and b/apps/example-apps/react/examples/edges/edge-intersection/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-intersection/preview.jpg b/apps/example-apps/react/examples/edges/edge-intersection/preview.jpg index 87a666910..a35f5defe 100644 Binary files a/apps/example-apps/react/examples/edges/edge-intersection/preview.jpg and b/apps/example-apps/react/examples/edges/edge-intersection/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/App.tsx b/apps/example-apps/react/examples/edges/edge-label-renderer/App.tsx index 4714ff008..6327170d3 100644 --- a/apps/example-apps/react/examples/edges/edge-label-renderer/App.tsx +++ b/apps/example-apps/react/examples/edges/edge-label-renderer/App.tsx @@ -73,6 +73,7 @@ const EdgesFlow = () => { onConnect={onConnect} edgeTypes={edgeTypes} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/CustomEdgeStartEnd.tsx b/apps/example-apps/react/examples/edges/edge-label-renderer/CustomEdgeStartEnd.tsx index b12845a7d..058181af5 100644 --- a/apps/example-apps/react/examples/edges/edge-label-renderer/CustomEdgeStartEnd.tsx +++ b/apps/example-apps/react/examples/edges/edge-label-renderer/CustomEdgeStartEnd.tsx @@ -13,11 +13,13 @@ function EdgeLabel({ transform, label }: { transform: string; label: string }) {
> -> = ({ +const CustomEdge: FC>> = ({ id, sourceX, sourceY, diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/preview-dark.jpg b/apps/example-apps/react/examples/edges/edge-label-renderer/preview-dark.jpg new file mode 100644 index 000000000..a020b3f8e Binary files /dev/null and b/apps/example-apps/react/examples/edges/edge-label-renderer/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/preview.jpg b/apps/example-apps/react/examples/edges/edge-label-renderer/preview.jpg index cd1cad9c0..2975822c1 100644 Binary files a/apps/example-apps/react/examples/edges/edge-label-renderer/preview.jpg and b/apps/example-apps/react/examples/edges/edge-label-renderer/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-toolbar/App.tsx b/apps/example-apps/react/examples/edges/edge-toolbar/App.tsx index d36f4efef..841d27e9c 100644 --- a/apps/example-apps/react/examples/edges/edge-toolbar/App.tsx +++ b/apps/example-apps/react/examples/edges/edge-toolbar/App.tsx @@ -74,6 +74,7 @@ export default function EdgeToolbarExample() { defaultEdges={initialEdges} fitView edgeTypes={edgeTypes} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/edge-toolbar/EdgeWithToolbar.tsx b/apps/example-apps/react/examples/edges/edge-toolbar/EdgeWithToolbar.tsx index 9e72dd657..729e9e5b6 100644 --- a/apps/example-apps/react/examples/edges/edge-toolbar/EdgeWithToolbar.tsx +++ b/apps/example-apps/react/examples/edges/edge-toolbar/EdgeWithToolbar.tsx @@ -22,7 +22,9 @@ export function EdgeWithToolbar(props: EdgeProps) {
{ onConnect={onConnect} fitView minZoom={0.2} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/edge-types/preview-dark.jpg b/apps/example-apps/react/examples/edges/edge-types/preview-dark.jpg new file mode 100644 index 000000000..aebf4d556 Binary files /dev/null and b/apps/example-apps/react/examples/edges/edge-types/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/edge-types/preview.jpg b/apps/example-apps/react/examples/edges/edge-types/preview.jpg index 633cf2c42..3addef2ab 100644 Binary files a/apps/example-apps/react/examples/edges/edge-types/preview.jpg and b/apps/example-apps/react/examples/edges/edge-types/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/editable-edge/README.mdx b/apps/example-apps/react/examples/edges/editable-edge/README.mdx deleted file mode 100644 index 5823be41e..000000000 --- a/apps/example-apps/react/examples/edges/editable-edge/README.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Editable Edge -description: Implement a custom edge with draggable control points to change the path of an edge -is_pro_example: true ---- - -This example explains how to implement a routable and editable edge with draggable control points to change the path of an edge. It also includes a custom connection line that can be used to draw a freeform edge. For this you need to press "Space" while doing a connection. - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/edges/floating-edges/App.jsx b/apps/example-apps/react/examples/edges/floating-edges/App.jsx index b95c5b803..bca721946 100644 --- a/apps/example-apps/react/examples/edges/floating-edges/App.jsx +++ b/apps/example-apps/react/examples/edges/floating-edges/App.jsx @@ -49,6 +49,7 @@ const NodeAsHandleFlow = () => { fitView edgeTypes={edgeTypes} connectionLineComponent={FloatingConnectionLine} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/floating-edges/preview-dark.jpg b/apps/example-apps/react/examples/edges/floating-edges/preview-dark.jpg new file mode 100644 index 000000000..fe65b431a Binary files /dev/null and b/apps/example-apps/react/examples/edges/floating-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/floating-edges/preview.jpg b/apps/example-apps/react/examples/edges/floating-edges/preview.jpg index 990939d48..f630e437b 100644 Binary files a/apps/example-apps/react/examples/edges/floating-edges/preview.jpg and b/apps/example-apps/react/examples/edges/floating-edges/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/markers/App.tsx b/apps/example-apps/react/examples/edges/markers/App.tsx index 2c8673d2c..b230735c7 100644 --- a/apps/example-apps/react/examples/edges/markers/App.tsx +++ b/apps/example-apps/react/examples/edges/markers/App.tsx @@ -216,6 +216,7 @@ export default function MarkersExample() { defaultEdges={defaultEdges} fitView edgeTypes={edgeTypes} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/markers/preview-dark.jpg b/apps/example-apps/react/examples/edges/markers/preview-dark.jpg new file mode 100644 index 000000000..eb9b6e7d4 Binary files /dev/null and b/apps/example-apps/react/examples/edges/markers/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/markers/preview.jpg b/apps/example-apps/react/examples/edges/markers/preview.jpg index 26e5d7b72..06b13a4c8 100644 Binary files a/apps/example-apps/react/examples/edges/markers/preview.jpg and b/apps/example-apps/react/examples/edges/markers/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/multi-connection-line/App.jsx b/apps/example-apps/react/examples/edges/multi-connection-line/App.jsx index b639daa95..221692377 100644 --- a/apps/example-apps/react/examples/edges/multi-connection-line/App.jsx +++ b/apps/example-apps/react/examples/edges/multi-connection-line/App.jsx @@ -67,6 +67,7 @@ const ConnectionLineFlow = () => { fitViewOptions={{ padding: 0.2, }} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/multi-connection-line/preview-dark.jpg b/apps/example-apps/react/examples/edges/multi-connection-line/preview-dark.jpg new file mode 100644 index 000000000..85afdff01 Binary files /dev/null and b/apps/example-apps/react/examples/edges/multi-connection-line/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/multi-connection-line/preview.jpg b/apps/example-apps/react/examples/edges/multi-connection-line/preview.jpg index 24b8a44c4..307aa285f 100644 Binary files a/apps/example-apps/react/examples/edges/multi-connection-line/preview.jpg and b/apps/example-apps/react/examples/edges/multi-connection-line/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/reconnect-edge/App.jsx b/apps/example-apps/react/examples/edges/reconnect-edge/App.jsx index 97727b103..3a205c0d2 100644 --- a/apps/example-apps/react/examples/edges/reconnect-edge/App.jsx +++ b/apps/example-apps/react/examples/edges/reconnect-edge/App.jsx @@ -46,8 +46,6 @@ const initialNodes = [ }, position: { x: 400, y: 100 }, style: { - background: '#D6D5E6', - color: '#333', width: 180, }, }, @@ -134,6 +132,7 @@ const EdgeReconnect = () => { onConnect={onConnect} fitView attributionPosition="top-right" + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/reconnect-edge/preview-dark.jpg b/apps/example-apps/react/examples/edges/reconnect-edge/preview-dark.jpg new file mode 100644 index 000000000..63259f663 Binary files /dev/null and b/apps/example-apps/react/examples/edges/reconnect-edge/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/reconnect-edge/preview.jpg b/apps/example-apps/react/examples/edges/reconnect-edge/preview.jpg index d4000f47e..cb3aa1c04 100644 Binary files a/apps/example-apps/react/examples/edges/reconnect-edge/preview.jpg and b/apps/example-apps/react/examples/edges/reconnect-edge/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/simple-floating-edges/App.jsx b/apps/example-apps/react/examples/edges/simple-floating-edges/App.jsx index bdbd92543..9f6f224aa 100644 --- a/apps/example-apps/react/examples/edges/simple-floating-edges/App.jsx +++ b/apps/example-apps/react/examples/edges/simple-floating-edges/App.jsx @@ -87,6 +87,7 @@ const NodeAsHandleFlow = () => { fitView fitViewOptions={fitViewOptions} connectionMode={ConnectionMode.Loose} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/simple-floating-edges/preview-dark.jpg b/apps/example-apps/react/examples/edges/simple-floating-edges/preview-dark.jpg new file mode 100644 index 000000000..c7b10fc1a Binary files /dev/null and b/apps/example-apps/react/examples/edges/simple-floating-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/simple-floating-edges/preview.jpg b/apps/example-apps/react/examples/edges/simple-floating-edges/preview.jpg index 6a4264161..5241a3791 100644 Binary files a/apps/example-apps/react/examples/edges/simple-floating-edges/preview.jpg and b/apps/example-apps/react/examples/edges/simple-floating-edges/preview.jpg differ diff --git a/apps/example-apps/react/examples/edges/temporary-edges/App.jsx b/apps/example-apps/react/examples/edges/temporary-edges/App.jsx index a2e094370..4c6cbefab 100644 --- a/apps/example-apps/react/examples/edges/temporary-edges/App.jsx +++ b/apps/example-apps/react/examples/edges/temporary-edges/App.jsx @@ -34,6 +34,7 @@ const IncompleteEdge = () => { onEdgesChange={onEdgesChange} fitView {...handlers} + colorMode="system" > diff --git a/apps/example-apps/react/examples/edges/temporary-edges/preview-dark.jpg b/apps/example-apps/react/examples/edges/temporary-edges/preview-dark.jpg new file mode 100644 index 000000000..0c8d86902 Binary files /dev/null and b/apps/example-apps/react/examples/edges/temporary-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/edges/temporary-edges/preview.jpg b/apps/example-apps/react/examples/edges/temporary-edges/preview.jpg index b3dabcc03..18d7d19b0 100644 Binary files a/apps/example-apps/react/examples/edges/temporary-edges/preview.jpg and b/apps/example-apps/react/examples/edges/temporary-edges/preview.jpg differ diff --git a/apps/example-apps/react/examples/grouping/parent-child-relation/README.mdx b/apps/example-apps/react/examples/grouping/parent-child-relation/README.mdx deleted file mode 100644 index 2a74b2e50..000000000 --- a/apps/example-apps/react/examples/grouping/parent-child-relation/README.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Parent Child Relation -description: Dynamically attach and detach nodes from parent containers with drag and drop functionality -is_pro_example: true ---- - -This example demonstrates how to dynamically create parent-child relationships between nodes. You can drag a node over a group node to attach it as a child, and use the toolbar's "detach" button to remove it. The implementation handles the complex position calculations needed when transforming absolute positions to parent-relative coordinates. - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/grouping/selection-grouping/README.mdx b/apps/example-apps/react/examples/grouping/selection-grouping/README.mdx deleted file mode 100644 index e26dac575..000000000 --- a/apps/example-apps/react/examples/grouping/selection-grouping/README.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Selection Grouping -description: This example demonstrates how to create dynamic node grouping in React Flow. -is_pro_example: true ---- - -This example demonstrates how to create dynamic node grouping in React Flow. You can select multiple nodes by holding Shift and clicking, then use the "Group Nodes" button in the appearing toolbar to group them together. When a group node is selected, an "Ungroup" button appears that detaches all child nodes. Group nodes are fully resizable and automatically adjust their dimensions based on their child nodes. - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/grouping/sub-flows/App.jsx b/apps/example-apps/react/examples/grouping/sub-flows/App.jsx index 495b488f6..2cefcc5e7 100644 --- a/apps/example-apps/react/examples/grouping/sub-flows/App.jsx +++ b/apps/example-apps/react/examples/grouping/sub-flows/App.jsx @@ -101,6 +101,7 @@ const NestedFlow = () => { onConnect={onConnect} className="react-flow-subflows-example" fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/grouping/sub-flows/preview-dark.jpg b/apps/example-apps/react/examples/grouping/sub-flows/preview-dark.jpg new file mode 100644 index 000000000..440786952 Binary files /dev/null and b/apps/example-apps/react/examples/grouping/sub-flows/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/grouping/sub-flows/preview.jpg b/apps/example-apps/react/examples/grouping/sub-flows/preview.jpg index ea7437872..acbf6fa4d 100644 Binary files a/apps/example-apps/react/examples/grouping/sub-flows/preview.jpg and b/apps/example-apps/react/examples/grouping/sub-flows/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/collaborative/README.mdx b/apps/example-apps/react/examples/interaction/collaborative/README.mdx deleted file mode 100644 index 4c5bb6eab..000000000 --- a/apps/example-apps/react/examples/interaction/collaborative/README.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Collaborative -description: Build a collaborative graph for multiple users with React Flow and yjs -is_pro_example: true ---- - -This example shows how to build a collaborative graph for multiple users with React Flow -and [yjs](https://github.com/yjs/yjs). The example can be used as a starting point to -build multi-user flows and editors. Note that the room is not globally shared: to open the -same flow in another tab, you can click the button below, or copy the URL from the "Share" -button inside the flow. **To add new nodes to the flow, right click on the canvas.** - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react), - [yjs](https://www.npmjs.com/package/yjs), - [y-websocket](https://www.npmjs.com/package/y-websocket) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/interaction/computing-flows/App.tsx b/apps/example-apps/react/examples/interaction/computing-flows/App.tsx index 8d8f84d47..d186c8768 100644 --- a/apps/example-apps/react/examples/interaction/computing-flows/App.tsx +++ b/apps/example-apps/react/examples/interaction/computing-flows/App.tsx @@ -90,6 +90,7 @@ const CustomNodeFlow = () => { onConnect={onConnect} nodeTypes={nodeTypes} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/computing-flows/ResultNode.tsx b/apps/example-apps/react/examples/interaction/computing-flows/ResultNode.tsx index 2c161a413..8d172a4d1 100644 --- a/apps/example-apps/react/examples/interaction/computing-flows/ResultNode.tsx +++ b/apps/example-apps/react/examples/interaction/computing-flows/ResultNode.tsx @@ -1,10 +1,5 @@ import { memo } from 'react'; -import { - Handle, - Position, - useNodeConnections, - useNodesData, -} from '@xyflow/react'; +import { Handle, Position, useNodeConnections, useNodesData } from '@xyflow/react'; import { isTextNode, type MyNode } from './initialElements'; function ResultNode() { @@ -21,8 +16,7 @@ function ResultNode() {
incoming texts:{' '} - {textNodes.map(({ data }, i) =>
{data.text}
) || - 'none'} + {textNodes.map(({ data }, i) =>
{data.text}
) || 'none'}
); diff --git a/apps/example-apps/react/examples/interaction/computing-flows/initialElements.ts b/apps/example-apps/react/examples/interaction/computing-flows/initialElements.ts index 7b1b322a5..1080d5f0f 100644 --- a/apps/example-apps/react/examples/interaction/computing-flows/initialElements.ts +++ b/apps/example-apps/react/examples/interaction/computing-flows/initialElements.ts @@ -5,8 +5,6 @@ export type ResultNode = Node<{}, 'result'>; export type UppercaseNode = Node<{ text: string }, 'uppercase'>; export type MyNode = TextNode | ResultNode | UppercaseNode; -export function isTextNode( - node: any, -): node is TextNode | UppercaseNode | undefined { +export function isTextNode(node: any): node is TextNode | UppercaseNode | undefined { return !node ? false : node.type === 'text' || node.type === 'uppercase'; } diff --git a/apps/example-apps/react/examples/interaction/computing-flows/preview-dark.jpg b/apps/example-apps/react/examples/interaction/computing-flows/preview-dark.jpg new file mode 100644 index 000000000..d5a9449b7 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/computing-flows/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/computing-flows/preview.jpg b/apps/example-apps/react/examples/interaction/computing-flows/preview.jpg index 6d482c36a..8409ae962 100644 Binary files a/apps/example-apps/react/examples/interaction/computing-flows/preview.jpg and b/apps/example-apps/react/examples/interaction/computing-flows/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/connection-events/App.jsx b/apps/example-apps/react/examples/interaction/connection-events/App.jsx index 085083762..7928f50fd 100644 --- a/apps/example-apps/react/examples/interaction/connection-events/App.jsx +++ b/apps/example-apps/react/examples/interaction/connection-events/App.jsx @@ -121,6 +121,7 @@ const Flow = () => { onReconnect={onReconnect} onReconnectEnd={onReconnectEnd} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/connection-events/index.css b/apps/example-apps/react/examples/interaction/connection-events/index.css index 251dd7c5f..3d120a8bd 100644 --- a/apps/example-apps/react/examples/interaction/connection-events/index.css +++ b/apps/example-apps/react/examples/interaction/connection-events/index.css @@ -19,7 +19,9 @@ body { pointer-events: none; font-family: monospace; padding: 0.5rem; - background-color: ghostwhite; + background-color: var(--xy-theme-panel-bg); + color: var(--xy-theme-panel-text); + border: 1px solid var(--xy-theme-subtle-border); border-radius: 4px; & > p { diff --git a/apps/example-apps/react/examples/interaction/connection-events/preview-dark.jpg b/apps/example-apps/react/examples/interaction/connection-events/preview-dark.jpg new file mode 100644 index 000000000..cd7aa1a96 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/connection-events/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/connection-events/preview.jpg b/apps/example-apps/react/examples/interaction/connection-events/preview.jpg index 700f2a637..90e973f4c 100644 Binary files a/apps/example-apps/react/examples/interaction/connection-events/preview.jpg and b/apps/example-apps/react/examples/interaction/connection-events/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/context-menu/App.jsx b/apps/example-apps/react/examples/interaction/context-menu/App.jsx index 2c5b31898..22a4b7df6 100644 --- a/apps/example-apps/react/examples/interaction/context-menu/App.jsx +++ b/apps/example-apps/react/examples/interaction/context-menu/App.jsx @@ -57,6 +57,7 @@ const Flow = () => { onPaneClick={onPaneClick} onNodeContextMenu={onNodeContextMenu} fitView + colorMode="system" > {menu && } diff --git a/apps/example-apps/react/examples/interaction/context-menu/preview-dark.jpg b/apps/example-apps/react/examples/interaction/context-menu/preview-dark.jpg new file mode 100644 index 000000000..fba6d2f4e Binary files /dev/null and b/apps/example-apps/react/examples/interaction/context-menu/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/context-menu/preview.jpg b/apps/example-apps/react/examples/interaction/context-menu/preview.jpg index 584af24cc..3cb5338e2 100644 Binary files a/apps/example-apps/react/examples/interaction/context-menu/preview.jpg and b/apps/example-apps/react/examples/interaction/context-menu/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/App.jsx b/apps/example-apps/react/examples/interaction/contextual-zoom/App.jsx index 00dda59fc..5e02a6d8e 100644 --- a/apps/example-apps/react/examples/interaction/contextual-zoom/App.jsx +++ b/apps/example-apps/react/examples/interaction/contextual-zoom/App.jsx @@ -79,6 +79,7 @@ const ContextualZoomFlow = () => { defaultViewport={defaultViewport} attributionPosition="top-right" fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/index.css b/apps/example-apps/react/examples/interaction/contextual-zoom/index.css index 48db7e38e..b0d9e4fee 100644 --- a/apps/example-apps/react/examples/interaction/contextual-zoom/index.css +++ b/apps/example-apps/react/examples/interaction/contextual-zoom/index.css @@ -14,8 +14,8 @@ body { .react-flow__node-zoom { font-size: 12px; - background: #fff; - border: 1px solid inherit; + background: var(--xy-node-background-color-default); + border: var(--xy-node-border-default); border-radius: 5px; text-align: center; width: 150px; @@ -32,7 +32,7 @@ body { } .placeholder div { - background: #eee; + background: var(--xy-theme-muted-bg); width: 100%; height: 10px; margin-bottom: 4px; diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/preview-dark.jpg b/apps/example-apps/react/examples/interaction/contextual-zoom/preview-dark.jpg new file mode 100644 index 000000000..c2b704b23 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/contextual-zoom/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/preview.jpg b/apps/example-apps/react/examples/interaction/contextual-zoom/preview.jpg index ddc51c203..2c39c8c69 100644 Binary files a/apps/example-apps/react/examples/interaction/contextual-zoom/preview.jpg and b/apps/example-apps/react/examples/interaction/contextual-zoom/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/copy-paste/README.mdx b/apps/example-apps/react/examples/interaction/copy-paste/README.mdx deleted file mode 100644 index 14d4084a2..000000000 --- a/apps/example-apps/react/examples/interaction/copy-paste/README.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Copy and Paste -description: Select nodes and edges to cut, copy, and paste -is_pro_example: true ---- - -This example demonstrates how to copy and paste nodes and edges within a React Flow graph. Try using Shift + click + drag to select multiple nodes to copy. - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-custom/App.tsx b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/App.tsx index 9369c8d48..21f66afe3 100644 --- a/apps/example-apps/react/examples/interaction/drag-and-drop-custom/App.tsx +++ b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/App.tsx @@ -43,6 +43,7 @@ function DnDFlow() { onEdgesChange={onEdgesChange} onConnect={onConnect} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview-dark.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview-dark.jpg new file mode 100644 index 000000000..0276b8ba0 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview.jpg new file mode 100644 index 000000000..571bf7ce4 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/drag-and-drop-custom/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/App.tsx b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/App.tsx index b66e16e3d..ade9258bd 100644 --- a/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/App.tsx +++ b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/App.tsx @@ -42,6 +42,7 @@ function DnDFlow() { onEdgesChange={onEdgesChange} onConnect={onConnect} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview-dark.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview-dark.jpg new file mode 100644 index 000000000..0276b8ba0 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview.jpg new file mode 100644 index 000000000..571bf7ce4 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/drag-and-drop-neodrag/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/App.jsx b/apps/example-apps/react/examples/interaction/drag-and-drop/App.jsx index 985334f96..70b8b7158 100644 --- a/apps/example-apps/react/examples/interaction/drag-and-drop/App.jsx +++ b/apps/example-apps/react/examples/interaction/drag-and-drop/App.jsx @@ -88,6 +88,7 @@ const DnDFlow = () => { onDragStart={onDragStart} onDragOver={onDragOver} fitView + colorMode='system' > diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/index.css b/apps/example-apps/react/examples/interaction/drag-and-drop/index.css index edce7369b..e2bc4eada 100644 --- a/apps/example-apps/react/examples/interaction/drag-and-drop/index.css +++ b/apps/example-apps/react/examples/interaction/drag-and-drop/index.css @@ -20,10 +20,26 @@ body { } .dndflow aside { - border-right: 1px solid #eee; + border-right: 1px solid var(--xy-theme-subtle-border); padding: 15px 10px; font-size: 12px; - background: #fcfcfc; + background: var(--xy-theme-panel-bg); + color: var(--xy-theme-panel-text); +} + +/* Sidebar is outside .react-flow so it doesn't get theme variables in dark mode. */ +@media (prefers-color-scheme: dark) { + .dndflow aside { + background: #141519; + color: #f3f4f6; + border-right-color: #3f434c; + } + + .dndflow .dndnode { + border-color: #3f434c; + background: #1a1b1e; + color: #f3f4f6; + } } .dndflow aside .description { @@ -33,7 +49,7 @@ body { .dndflow .dndnode { height: 20px; padding: 4px; - border: 1px solid #1a192b; + border: 1px solid; border-radius: 2px; margin-bottom: 10px; display: flex; @@ -42,14 +58,6 @@ body { cursor: grab; } -.dndflow .dndnode.input { - border-color: #0041d0; -} - -.dndflow .dndnode.output { - border-color: #ff0072; -} - .dndflow .reactflow-wrapper { flex-grow: 1; height: 100%; diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/preview-dark.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop/preview-dark.jpg new file mode 100644 index 000000000..40f1b12f7 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/drag-and-drop/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/preview.jpg b/apps/example-apps/react/examples/interaction/drag-and-drop/preview.jpg index 70154fd76..45a9e024a 100644 Binary files a/apps/example-apps/react/examples/interaction/drag-and-drop/preview.jpg and b/apps/example-apps/react/examples/interaction/drag-and-drop/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/helper-lines/README.mdx b/apps/example-apps/react/examples/interaction/helper-lines/README.mdx deleted file mode 100644 index dad850294..000000000 --- a/apps/example-apps/react/examples/interaction/helper-lines/README.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Helper Lines -description: Display lines that help to visually align nodes, with automatic snapping for precise positioning and layout control. -is_pro_example: true -is_free: true ---- - -This example demonstrates how to implement alignment helper lines. As you drag nodes around, these visual guides appear automatically to help align nodes with each other, while a snapping mechanism ensures precise positioning. - -The implementation handles both horizontal and vertical alignment and works correctly with the viewport's transform and scale, ensuring the guides remain accurate even when zoomed or panned. - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/interaction/interaction-props/App.jsx b/apps/example-apps/react/examples/interaction/interaction-props/App.jsx index 305fdc917..afd9e0190 100644 --- a/apps/example-apps/react/examples/interaction/interaction-props/App.jsx +++ b/apps/example-apps/react/examples/interaction/interaction-props/App.jsx @@ -93,6 +93,7 @@ const InteractionFlow = () => { onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined} fitView attributionPosition="top-right" + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/interaction-props/README.mdx b/apps/example-apps/react/examples/interaction/interaction-props/README.mdx deleted file mode 100644 index 422222bea..000000000 --- a/apps/example-apps/react/examples/interaction/interaction-props/README.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Interaction Props -description: The most popular props used for interactivity of a diagram -hidden: true ---- - -This example shows the different props like `nodesDraggable`, `zoomOnScroll` or `panOnDrag` that control the interactivity of a diagram. You can find a list with all props that can be used to manage the interactivity in the [interaction props section](/api-reference/react-flow#interaction). - - diff --git a/apps/example-apps/react/examples/interaction/interaction-props/preview-dark.jpg b/apps/example-apps/react/examples/interaction/interaction-props/preview-dark.jpg new file mode 100644 index 000000000..d76c599c3 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/interaction-props/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/interaction-props/preview.jpg b/apps/example-apps/react/examples/interaction/interaction-props/preview.jpg index 91e07781b..53bdbb3fd 100644 Binary files a/apps/example-apps/react/examples/interaction/interaction-props/preview.jpg and b/apps/example-apps/react/examples/interaction/interaction-props/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/prevent-cycles/App.jsx b/apps/example-apps/react/examples/interaction/prevent-cycles/App.jsx index c56b9f898..8a6677ccd 100644 --- a/apps/example-apps/react/examples/interaction/prevent-cycles/App.jsx +++ b/apps/example-apps/react/examples/interaction/prevent-cycles/App.jsx @@ -60,6 +60,7 @@ const Flow = () => { onConnect={onConnect} isValidConnection={isValidConnection} fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/prevent-cycles/preview-dark.jpg b/apps/example-apps/react/examples/interaction/prevent-cycles/preview-dark.jpg new file mode 100644 index 000000000..4ace228e3 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/prevent-cycles/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/prevent-cycles/preview.jpg b/apps/example-apps/react/examples/interaction/prevent-cycles/preview.jpg index 6601ec8a6..97d5d5e8a 100644 Binary files a/apps/example-apps/react/examples/interaction/prevent-cycles/preview.jpg and b/apps/example-apps/react/examples/interaction/prevent-cycles/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/save-and-restore/App.jsx b/apps/example-apps/react/examples/interaction/save-and-restore/App.jsx index 5a3b456e7..af43da309 100644 --- a/apps/example-apps/react/examples/interaction/save-and-restore/App.jsx +++ b/apps/example-apps/react/examples/interaction/save-and-restore/App.jsx @@ -77,6 +77,7 @@ const SaveRestore = () => { onInit={setRfInstance} fitView fitViewOptions={{ padding: 2 }} + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/save-and-restore/preview-dark.jpg b/apps/example-apps/react/examples/interaction/save-and-restore/preview-dark.jpg new file mode 100644 index 000000000..26454e791 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/save-and-restore/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/save-and-restore/preview.jpg b/apps/example-apps/react/examples/interaction/save-and-restore/preview.jpg index a1e634168..7d88685e9 100644 Binary files a/apps/example-apps/react/examples/interaction/save-and-restore/preview.jpg and b/apps/example-apps/react/examples/interaction/save-and-restore/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/touch-device/App.jsx b/apps/example-apps/react/examples/interaction/touch-device/App.jsx index 400876569..ef064fa6e 100644 --- a/apps/example-apps/react/examples/interaction/touch-device/App.jsx +++ b/apps/example-apps/react/examples/interaction/touch-device/App.jsx @@ -46,6 +46,7 @@ const TouchDeviceFlow = () => { onEdgesChange={onEdgesChange} className="touch-flow" fitView + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/touch-device/preview-dark.jpg b/apps/example-apps/react/examples/interaction/touch-device/preview-dark.jpg new file mode 100644 index 000000000..f341eb63f Binary files /dev/null and b/apps/example-apps/react/examples/interaction/touch-device/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/touch-device/preview.jpg b/apps/example-apps/react/examples/interaction/touch-device/preview.jpg index 2e8bc5d26..e626c9096 100644 Binary files a/apps/example-apps/react/examples/interaction/touch-device/preview.jpg and b/apps/example-apps/react/examples/interaction/touch-device/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/undo-redo/README.mdx b/apps/example-apps/react/examples/interaction/undo-redo/README.mdx deleted file mode 100644 index fbb8ad772..000000000 --- a/apps/example-apps/react/examples/interaction/undo-redo/README.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Undo and Redo -description: Undo and redo functionality for moving, adding, and deleting nodes and edges -is_pro_example: true ---- - -This example demonstrates how to implement undo and redo functionality for a React Flow graph. Users can track and revert changes when moving, adding, or deleting nodes and edges. The implementation uses a snapshot-based approach with the `useUndoRedo` hook that manages past and future states, allowing users to navigate through their editing history with button clicks or keyboard shortcuts (Ctrl+Z and Ctrl+Shift+Z). - - - -### About this Pro Example - -- Dependencies: [@xyflow/react](https://www.npmjs.com/package/@xyflow/react) -- License: [xyflow Pro License](https://xyflow.com/pro-license) diff --git a/apps/example-apps/react/examples/interaction/validation/App.jsx b/apps/example-apps/react/examples/interaction/validation/App.jsx index d7f088985..41011fcc2 100644 --- a/apps/example-apps/react/examples/interaction/validation/App.jsx +++ b/apps/example-apps/react/examples/interaction/validation/App.jsx @@ -67,6 +67,7 @@ const ValidationFlow = () => { onConnectEnd={onConnectEnd} fitView attributionPosition="bottom-left" + colorMode="system" > diff --git a/apps/example-apps/react/examples/interaction/validation/index.css b/apps/example-apps/react/examples/interaction/validation/index.css index b4b1268dd..0b872ad2c 100644 --- a/apps/example-apps/react/examples/interaction/validation/index.css +++ b/apps/example-apps/react/examples/interaction/validation/index.css @@ -14,25 +14,21 @@ body { .validationflow .react-flow__node { width: 150px; - border-radius: 5px; - padding: 10px; - color: #555; - border: 1px solid #ddd; + min-height: 44px; text-align: center; font-size: 12px; } .validationflow .react-flow__node-customnode { - background: #e6e6e9; - border: 1px solid #ddd; + background: var(--xy-theme-muted-bg); } .react-flow__node-custominput .react-flow__handle { - background: #e6e6e9; + background: var(--xy-theme-muted-bg); } .validationflow .react-flow__node-custominput { - background: #fff; + background: var(--xy-node-background-color-default); } .validationflow .react-flow__handle.connectingto { diff --git a/apps/example-apps/react/examples/interaction/validation/preview-dark.jpg b/apps/example-apps/react/examples/interaction/validation/preview-dark.jpg new file mode 100644 index 000000000..81116e234 Binary files /dev/null and b/apps/example-apps/react/examples/interaction/validation/preview-dark.jpg differ diff --git a/apps/example-apps/react/examples/interaction/validation/preview.jpg b/apps/example-apps/react/examples/interaction/validation/preview.jpg index b7d86f669..c2beb6afe 100644 Binary files a/apps/example-apps/react/examples/interaction/validation/preview.jpg and b/apps/example-apps/react/examples/interaction/validation/preview.jpg differ diff --git a/apps/example-apps/react/examples/interaction/zoom-transitions/App.jsx b/apps/example-apps/react/examples/interaction/zoom-transitions/App.jsx index 11bea2a11..5dc1c0c51 100644 --- a/apps/example-apps/react/examples/interaction/zoom-transitions/App.jsx +++ b/apps/example-apps/react/examples/interaction/zoom-transitions/App.jsx @@ -52,6 +52,7 @@ const ZoomTransition = () => { onEdgesChange={onEdgesChange} onConnect={onConnect} fitView + colorMode="system" > diff --git a/apps/example-apps/react/learn/layouting-flow-2-dagre/preview-dark.jpg b/apps/example-apps/react/learn/layouting-flow-2-dagre/preview-dark.jpg new file mode 100644 index 000000000..ab21bf59e Binary files /dev/null and b/apps/example-apps/react/learn/layouting-flow-2-dagre/preview-dark.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-2-dagre/preview.jpg b/apps/example-apps/react/learn/layouting-flow-2-dagre/preview.jpg index fa35b4423..d68931ae7 100644 Binary files a/apps/example-apps/react/learn/layouting-flow-2-dagre/preview.jpg and b/apps/example-apps/react/learn/layouting-flow-2-dagre/preview.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/App.jsx b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/App.jsx index efca22de6..62f85215b 100644 --- a/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/App.jsx +++ b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/App.jsx @@ -64,6 +64,7 @@ const LayoutFlow = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView + colorMode="system" > diff --git a/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview-dark.jpg b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview-dark.jpg new file mode 100644 index 000000000..ab21bf59e Binary files /dev/null and b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview-dark.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview.jpg b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview.jpg index 8d5917a02..d68931ae7 100644 Binary files a/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview.jpg and b/apps/example-apps/react/learn/layouting-flow-3-d3-hierarchy/preview.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-4-d3-force/App.jsx b/apps/example-apps/react/learn/layouting-flow-4-d3-force/App.jsx index 35526ce5b..43e036ccc 100644 --- a/apps/example-apps/react/learn/layouting-flow-4-d3-force/App.jsx +++ b/apps/example-apps/react/learn/layouting-flow-4-d3-force/App.jsx @@ -138,6 +138,7 @@ const LayoutFlow = () => { onNodeDragStop={dragEvents.stop} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + colorMode="system" > {initialized && ( diff --git a/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview-dark.jpg b/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview-dark.jpg new file mode 100644 index 000000000..e849738e1 Binary files /dev/null and b/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview-dark.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview.jpg b/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview.jpg index 14490421b..9de545b0f 100644 Binary files a/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview.jpg and b/apps/example-apps/react/learn/layouting-flow-4-d3-force/preview.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-5-cola/App.jsx b/apps/example-apps/react/learn/layouting-flow-5-cola/App.jsx index 0ebaec999..1076ceed8 100644 --- a/apps/example-apps/react/learn/layouting-flow-5-cola/App.jsx +++ b/apps/example-apps/react/learn/layouting-flow-5-cola/App.jsx @@ -107,6 +107,7 @@ const LayoutFlow = () => { edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + colorMode="system" > {initialized && ( diff --git a/apps/example-apps/react/learn/layouting-flow-5-cola/preview-dark.jpg b/apps/example-apps/react/learn/layouting-flow-5-cola/preview-dark.jpg new file mode 100644 index 000000000..e849738e1 Binary files /dev/null and b/apps/example-apps/react/learn/layouting-flow-5-cola/preview-dark.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-5-cola/preview.jpg b/apps/example-apps/react/learn/layouting-flow-5-cola/preview.jpg index 8d8aea001..9de545b0f 100644 Binary files a/apps/example-apps/react/learn/layouting-flow-5-cola/preview.jpg and b/apps/example-apps/react/learn/layouting-flow-5-cola/preview.jpg differ diff --git a/apps/example-apps/react/learn/layouting-flow-6-elkjs/App.jsx b/apps/example-apps/react/learn/layouting-flow-6-elkjs/App.jsx index 9e9513947..ca43b6c83 100644 --- a/apps/example-apps/react/learn/layouting-flow-6-elkjs/App.jsx +++ b/apps/example-apps/react/learn/layouting-flow-6-elkjs/App.jsx @@ -62,6 +62,7 @@ const LayoutFlow = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView + colorMode="system" > 
{String(data.value).padStart(3, ' ')}
- + diff --git a/apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx b/apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx index 9892700ab..7d8697ad3 100644 --- a/apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx +++ b/apps/example-apps/react/tutorials/components/complete/components/nodes/sum-node.tsx @@ -78,7 +78,7 @@ export function SumNode({ id }: NodeProps) { - + diff --git a/apps/example-apps/react/tutorials/components/complete/components/ui/dropdown-menu.tsx b/apps/example-apps/react/tutorials/components/complete/components/ui/dropdown-menu.tsx index dff3838c0..a949d637f 100644 --- a/apps/example-apps/react/tutorials/components/complete/components/ui/dropdown-menu.tsx +++ b/apps/example-apps/react/tutorials/components/complete/components/ui/dropdown-menu.tsx @@ -35,7 +35,7 @@ function DropdownMenuContent({ data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn( - 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', + 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md', className, )} {...props} @@ -65,7 +65,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className, )} {...props} @@ -83,7 +83,7 @@ function DropdownMenuCheckboxItem({ ); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/components/complete/preview-dark.jpg b/apps/example-apps/react/tutorials/components/complete/preview-dark.jpg new file mode 100644 index 000000000..406828bd6 Binary files /dev/null and b/apps/example-apps/react/tutorials/components/complete/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/components/complete/preview.jpg b/apps/example-apps/react/tutorials/components/complete/preview.jpg index 5f464a59c..21ec8ad3e 100644 Binary files a/apps/example-apps/react/tutorials/components/complete/preview.jpg and b/apps/example-apps/react/tutorials/components/complete/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/components/tooltip/App.tsx b/apps/example-apps/react/tutorials/components/tooltip/App.tsx index db031d18a..538fa0a72 100644 --- a/apps/example-apps/react/tutorials/components/tooltip/App.tsx +++ b/apps/example-apps/react/tutorials/components/tooltip/App.tsx @@ -39,7 +39,7 @@ function Flow() { const [nodes, , onNodesChange] = useNodesState(initialNodes); return ( -
+
) {
); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/app/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/app/preview-dark.jpg new file mode 100644 index 000000000..7212558ff Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/app/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/app/preview.jpg b/apps/example-apps/react/tutorials/mindmap/app/preview.jpg index e94a5e2c3..0a9442807 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/app/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/app/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/create-nodes/index.tsx b/apps/example-apps/react/tutorials/mindmap/create-nodes/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/create-nodes/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/create-nodes/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/create-nodes/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/create-nodes/preview-dark.jpg new file mode 100644 index 000000000..e865ed00b Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/create-nodes/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/create-nodes/preview.jpg b/apps/example-apps/react/tutorials/mindmap/create-nodes/preview.jpg index 781d4b52c..de87e873b 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/create-nodes/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/create-nodes/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/index.tsx b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview-dark.jpg new file mode 100644 index 000000000..e865ed00b Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview.jpg b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview.jpg index 781d4b52c..de87e873b 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/custom-nodes-edges/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/getting-started/index.tsx b/apps/example-apps/react/tutorials/mindmap/getting-started/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/getting-started/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/getting-started/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/getting-started/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/getting-started/preview-dark.jpg new file mode 100644 index 000000000..ceae25745 Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/getting-started/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/index.tsx b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview-dark.jpg new file mode 100644 index 000000000..11bf7298c Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview.jpg index 1a62358e1..9f921d797 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-2/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/index.tsx b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview-dark.jpg new file mode 100644 index 000000000..11bf7298c Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview.jpg index 1a62358e1..9f921d797 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-3/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/index.tsx b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview-dark.jpg new file mode 100644 index 000000000..e06ddbe4a Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview.jpg index 79544ed9c..3980acff0 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/node-as-handle-4/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle/index.tsx b/apps/example-apps/react/tutorials/mindmap/node-as-handle/index.tsx index 4f123d35c..5def1cb16 100644 --- a/apps/example-apps/react/tutorials/mindmap/node-as-handle/index.tsx +++ b/apps/example-apps/react/tutorials/mindmap/node-as-handle/index.tsx @@ -6,4 +6,4 @@ import './index.css'; const container = document.querySelector('#app'); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview-dark.jpg new file mode 100644 index 000000000..2202f5786 Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview.jpg b/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview.jpg index a0825c1f6..463936f80 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/node-as-handle/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/App.tsx b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/App.tsx index 209cf6af7..1b26f8c6a 100644 --- a/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/App.tsx +++ b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/App.tsx @@ -27,9 +27,7 @@ const defaultEdgeOptions = { style: connectionLineStyle, type: 'mindmap' }; function Flow() { // whenever you use multiple values, you should use shallow for making sure that the component only re-renders when one of the values change - const { nodes, edges, onNodesChange, onEdgesChange } = useStore( - useShallow(selector), - ); + const { nodes, edges, onNodesChange, onEdgesChange } = useStore(useShallow(selector)); return ( ); \ No newline at end of file +root.render(); diff --git a/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview-dark.jpg b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview-dark.jpg new file mode 100644 index 000000000..15345336d Binary files /dev/null and b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview.jpg b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview.jpg index ab7a359b7..91f4458ec 100644 Binary files a/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview.jpg and b/apps/example-apps/react/tutorials/mindmap/store-nodes-edges/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/app/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/app/preview-dark.jpg new file mode 100644 index 000000000..c849f66da Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/app/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/app/preview.jpg b/apps/example-apps/react/tutorials/presentation/app/preview.jpg index 50853d5ff..ed3157fac 100644 Binary files a/apps/example-apps/react/tutorials/presentation/app/preview.jpg and b/apps/example-apps/react/tutorials/presentation/app/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/app/slides.ts b/apps/example-apps/react/tutorials/presentation/app/slides.ts index 433e5b196..feeaaf832 100644 --- a/apps/example-apps/react/tutorials/presentation/app/slides.ts +++ b/apps/example-apps/react/tutorials/presentation/app/slides.ts @@ -1,11 +1,6 @@ import { type Edge, type Node } from '@xyflow/react'; -import { - SLIDE_WIDTH, - SLIDE_HEIGHT, - SLIDE_PADDING, - type SlideData, -} from './Slide'; +import { SLIDE_WIDTH, SLIDE_HEIGHT, SLIDE_PADDING, type SlideData } from './Slide'; const slide01 = { id: '01', @@ -67,10 +62,7 @@ export const slides = Object.fromEntries( [slide01, slide02, slide03, slide04].map(({ id, data }) => [id, data]), ) as Record; -export const slidesToElements = ( - initial: string, - slides: Record, -) => { +export const slidesToElements = (initial: string, slides: Record) => { const stack = [{ id: initial, position: { x: 0, y: 0 } }]; const visited = new Set(); const nodes: Node[] = []; diff --git a/apps/example-apps/react/tutorials/presentation/focus-on-click/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/focus-on-click/preview-dark.jpg new file mode 100644 index 000000000..ca9a644cb Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/focus-on-click/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/focus-on-click/preview.jpg b/apps/example-apps/react/tutorials/presentation/focus-on-click/preview.jpg index b2ba0367a..23abbec65 100644 Binary files a/apps/example-apps/react/tutorials/presentation/focus-on-click/preview.jpg and b/apps/example-apps/react/tutorials/presentation/focus-on-click/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/focus-on-click/slides.ts b/apps/example-apps/react/tutorials/presentation/focus-on-click/slides.ts index ec9549b32..544a8783c 100644 --- a/apps/example-apps/react/tutorials/presentation/focus-on-click/slides.ts +++ b/apps/example-apps/react/tutorials/presentation/focus-on-click/slides.ts @@ -56,10 +56,7 @@ export const slides = Object.fromEntries( [slide01, slide02, slide03, slide04].map(({ id, data }) => [id, data]), ) as Record; -export const slidesToElements = ( - start: string, - slides: Record, -) => { +export const slidesToElements = (start: string, slides: Record) => { const stack = [{ id: start, position: { x: 0, y: 0 } }]; const visited = new Set(); const nodes = [] as Node[]; diff --git a/apps/example-apps/react/tutorials/presentation/layout-demo/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/layout-demo/preview-dark.jpg new file mode 100644 index 000000000..7e7c95edd Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/layout-demo/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/layout-demo/preview.jpg b/apps/example-apps/react/tutorials/presentation/layout-demo/preview.jpg index 14ae20fac..d032c5160 100644 Binary files a/apps/example-apps/react/tutorials/presentation/layout-demo/preview.jpg and b/apps/example-apps/react/tutorials/presentation/layout-demo/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/rendering-markdown/App.tsx b/apps/example-apps/react/tutorials/presentation/rendering-markdown/App.tsx index adfe3742e..401cd805f 100644 --- a/apps/example-apps/react/tutorials/presentation/rendering-markdown/App.tsx +++ b/apps/example-apps/react/tutorials/presentation/rendering-markdown/App.tsx @@ -31,8 +31,7 @@ function App() { type: 'slide', position: { x: SLIDE_WIDTH * 2, y: 0 }, data: { - source: - "It's markdown so we can write **bold text** or `code snippets` too!", + source: "It's markdown so we can write **bold text** or `code snippets` too!", }, }, ]; diff --git a/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview-dark.jpg new file mode 100644 index 000000000..ab689123f Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview.jpg b/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview.jpg index 21246b78d..5bf9c94f8 100644 Binary files a/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview.jpg and b/apps/example-apps/react/tutorials/presentation/rendering-markdown/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/scaffold/App.tsx b/apps/example-apps/react/tutorials/presentation/scaffold/App.tsx index 025b731b5..c085b7f0b 100644 --- a/apps/example-apps/react/tutorials/presentation/scaffold/App.tsx +++ b/apps/example-apps/react/tutorials/presentation/scaffold/App.tsx @@ -13,9 +13,7 @@ const nodeTypes = { }; function App() { - const nodes = [ - { id: '0', type: 'slide', position: { x: 0, y: 0 }, data: {} }, - ]; + const nodes = [{ id: '0', type: 'slide', position: { x: 0, y: 0 }, data: {} }]; return ( diff --git a/apps/example-apps/react/tutorials/presentation/scaffold/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/scaffold/preview-dark.jpg new file mode 100644 index 000000000..522a83491 Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/scaffold/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/scaffold/preview.jpg b/apps/example-apps/react/tutorials/presentation/scaffold/preview.jpg index 8e6aa4596..2d72bd250 100644 Binary files a/apps/example-apps/react/tutorials/presentation/scaffold/preview.jpg and b/apps/example-apps/react/tutorials/presentation/scaffold/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/slide-controls/App.tsx b/apps/example-apps/react/tutorials/presentation/slide-controls/App.tsx index 4002e0760..c282da59a 100644 --- a/apps/example-apps/react/tutorials/presentation/slide-controls/App.tsx +++ b/apps/example-apps/react/tutorials/presentation/slide-controls/App.tsx @@ -13,13 +13,7 @@ import { import '@xyflow/react/dist/style.css'; import slides from './slides'; -import { - Slide, - SLIDE_WIDTH, - SLIDE_HEIGHT, - SLIDE_PADDING, - type SlideData, -} from './Slide'; +import { Slide, SLIDE_WIDTH, SLIDE_HEIGHT, SLIDE_PADDING, type SlideData } from './Slide'; const slidesToElements = () => { const start = Object.keys(slides)[0]; diff --git a/apps/example-apps/react/tutorials/presentation/slide-controls/preview-dark.jpg b/apps/example-apps/react/tutorials/presentation/slide-controls/preview-dark.jpg new file mode 100644 index 000000000..c849f66da Binary files /dev/null and b/apps/example-apps/react/tutorials/presentation/slide-controls/preview-dark.jpg differ diff --git a/apps/example-apps/react/tutorials/presentation/slide-controls/preview.jpg b/apps/example-apps/react/tutorials/presentation/slide-controls/preview.jpg index 50853d5ff..ed3157fac 100644 Binary files a/apps/example-apps/react/tutorials/presentation/slide-controls/preview.jpg and b/apps/example-apps/react/tutorials/presentation/slide-controls/preview.jpg differ diff --git a/apps/example-apps/react/tutorials/webaudio/custom-node/nodes/Osc.jsx b/apps/example-apps/react/tutorials/webaudio/custom-node/nodes/Osc.jsx index 58b7c862c..365f3d02d 100644 --- a/apps/example-apps/react/tutorials/webaudio/custom-node/nodes/Osc.jsx +++ b/apps/example-apps/react/tutorials/webaudio/custom-node/nodes/Osc.jsx @@ -15,11 +15,7 @@ export default function Osc({ id, data }) { return (
-

- Osc -

+

Osc

-
+