feat(react-docs): add reusable ui components based on shadcn/ui (#531)

* feat(components): initialize components page * feat(components): create example component page * feat(components): setup ui components section in the docs * fix(build): add global env to turbo config * feat(components): add syntax highlighting * display other ui component dependencies correctly * removed syntax highlighter, use nextra mdx highlighter * Improve texts * Improve introduction * migrated ui project to web repo * fix typo * fix turbo.json * try to load files from file system instead of url * add test to see if build succeeds * add ui-components as dependency * update lockfile * add test to see if build succeeds * remove test * add discussions template * remove discussion template * remove some parts * chore(build): update turbo * refactor(components): cleanup zoom slider component * change ui-component request url * feat(components): add noindex,nofollow and overview page * removed from navbar * modified navbar, changed url from ui to components * changed wording from ui to component * adjusted styling of logos * fix(components): typos * fixed styling of pro site * renamed previous components to built-in components * reorganized sections * feat(components): add tracking * change * changed build outputs * chore(build): use separate task for generating the components registry * fix(build): create a separate task for generating the registry * feat(components): configure tracking * added lucide as dependency * adjust navbar for svelteflow.dev * style(navbar): re-add shortcuts to docsearch * fix merge issues with main * delete unused whats new script * moved configs out of packages folder * removed xy-stylguide app * reinstalled * updated dependencies * reinstalled dependencies * updated next dependencies and moved mdx-compile code to xy-shared * cleaned up global styles * fixed up xyflow.com * moved fonts to xy-shared * moved references out of page-data * get rid of styles folder * moved all of the getmdxunderroute functions to xy-shared * implemented useConfigContext and remove -with-frontmatter wrappers * moved sites to layouts, got rid of a couple of components * fix imports * remove last -with-frontmatter components and move contents of sites to layouts * updated to a single typescript version * updated to a single eslint version * updated to a single react version * updated all dependencies of xy-ui * chore(components): minor text adjustments * fix(zoom-slider): add button as a dep * updated all dependencies and removed all unsused dependencies * updated some more dependencies * fixed lint error * reworked the way routes are handled for the RemoteCodeViewer * added static code viewer * cleaned up some more code and added scrollable tablist * use npm2yarn for our codeblock * fix(react-docs): remove duplicate pro label from example pages * fix style * use new code viewer everywhere * fix huge import sizes * activate turbo tui * fix showcase border * update turbo and pnpm * updated dependencies one last time :) * fix title rendering & remove head component * remove falsey export * upgrade npm2yarn, now npx commands are also transformed * feat(ui-components): add PlaceholderNode component * feat(ui-components): add new placeholder node page and link * fix big bundle size * feat(ui-components): create new annotation component * refactor(ui-components): improvements to export function placeholder node * fix(placeholderNode): typo * tried to make it look nices * fix(ui-components): missing display name * 📝 Create a blog post announcing our new components release. * 📝 Create a whats-new entry for the components release on reactflow.dev . * updated turbo.json to reflect build dependencies * removed scrollbar styling for code viewer * fix(build): change import * refactor(blog): fix some typos * update turbo.json * feat(ui-components): create labeled group node * re-added code viewer options, and refined styles for horizontal and vertical layouts * updated turbo.json * updated turbo.json * docs: add abbey to team description :) * add open in stackblitz button to new code viewer * feat(ui-components): create zoom select component * style(ui-components): fix placeholder node appearance * add open in codesanbox button * feat(ui-components): create devtools component * remove warning from tailwind example, it works now * remove old code viewer, clean up some code * fetch latest svelte flow version * register env variable * added npm2yarn to components * removed inter & favicon * typo * fixed node inspector * changed code viewer for devtools * style(ui-components): darkmode support labeled group node * refactor(ui-components): rename annotation node and add darkmode support * style(ui-components): fix placeholder node pixel offset * restructured menu * feat(ui-components): connect annotations to parent nodes * refactor(components): group components in the sidebar * make button-edge a little more general * refactor(ui-components): export all loggers; pass as props to DevTools; NodeInspector func. fixes; export all loggers -> pass as props of DevTools Component darkmode styling * fix(ui-components): remove extra import * refactor(navbar): hide elements of the navbar on smaller screens * style(ui-components): devtools button color adjustment * add floating edges to annotation example * 🔧 Change imports to use 'with' syntax for compat with recent nodejs versions. * 🔧 Include ui components demo site in xyflow.com env. * 📝 Add images and embeds to components blog post. * little bit better annotation nodes * remove console output * refactor(components): add beta callout, remove motivation in favor of blog * refactor(ui-components): add togglegroup devtools; separate tools; update docs * style(ui-components): devtools darkmode fix * perf(ui-components): add nodeClickDistance to placeholder node * Create `AnimatedSvgEdge` component. (#549) * 🔧 Change imports to use 'with' syntax for compat with recent nodejs versions. * 🔧 Include ui components demo site in xyflow.com env. * 📝 Add images and embeds to components blog post. * ✨ Create an AnimatedSvgEdge component. * ♻️ Use a package icon from lucide in demo. * 📝 Add page for animated svg edge component. * roll back changes to annotation node * refactor(components): put components into subfolders (#559) * refactor(tooltip-node): add handles and position option * refactor(components): fix typo * fix(components): use latest version of shadcn cli for init and installation * refactor(components): use component id in the url too * fix(ui-components): move zoom select calculation to inside selector * style(components): add some spacing * change date on whats new article * simplified labeled handle * change shadcn.config.js to components.json * refactor(components): remove beta callout from components page * fix(annotation-node): added flexibility for arrowStyles with CSSProperties * 📝 Address blog post feedback. --------- Co-authored-by: peterkogo <[email protected]> Co-authored-by: moklick <[email protected]> Co-authored-by: Peter Kogo <[email protected]> Co-authored-by: Abbey Yacoe <[email protected]> Co-authored-by: Hayleigh Thompson <[email protected]>
xyflow · Nov 5, 2024 · b90adc2 · b90adc2
1 parent b7e975c
commit b90adc2
Show file tree

Hide file tree

Showing 696 changed files with 13,936 additions and 19,539 deletions.
diff --git a/apps/example-apps/package.json b/apps/example-apps/package.json
@@ -10,28 +10,28 @@
     "screenshots": "concurrently \"vite dev\" \"node scripts/generate-screenshots.js\""
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.4",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "concurrently": "^9.0.1",
     "cors": "^2.8.5",
-    "express": "^4.20.0",
+    "express": "^4.21.1",
     "glob": "^11.0.0",
-    "picocolors": "^1.1.0",
-    "svelte-check": "^3.8.5",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.1"
+    "picocolors": "^1.1.1",
+    "svelte-check": "^4.0.5",
+    "tslib": "^2.8.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.10"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.1",
-    "@threlte/core": "^6.1.0",
-    "@xyflow/react": "^12.1.1",
-    "@xyflow/svelte": "^0.1.16",
+    "@dagrejs/dagre": "^1.1.4",
+    "@threlte/core": "^7.3.1",
+    "@xyflow/react": "^12.3.2",
+    "@xyflow/svelte": "^0.1.21",
     "d3-drag": "^3.0.0",
     "d3-force": "^3.0.0",
     "d3-hierarchy": "^3.1.2",
@@ -40,17 +40,17 @@
     "elkjs": "^0.9.3",
     "entitree-flex": "^0.4.1",
     "html-to-image": "^1.11.11",
-    "nanoid": "^4.0.2",
+    "nanoid": "^5.0.7",
     "puppeteer": "^22.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-remark": "^2.1.0",
-    "styled-components": "^6.1.11",
-    "svelte": "^4.2.18",
-    "svelte-feather-icons": "^4.0.1",
+    "styled-components": "^6.1.13",
+    "svelte": "^4.2.19",
+    "svelte-feather-icons": "^4.1.0",
     "twind": "^0.16.19",
     "webcola": "^3.4.0",
-    "zustand": "5.0.0-rc.2"
+    "zustand": "5.0.0"
   }
 }
diff --git a/apps/example-apps/react/learn/devtools/NodeInspector.tsx b/apps/example-apps/react/learn/devtools/NodeInspector.tsx
@@ -1,42 +1,50 @@
-import { useNodes, EdgeLabelRenderer } from '@xyflow/react';
+import {
+  useNodes,
+  ViewportPortal,
+  useReactFlow,
+  type XYPosition,
+} from '@xyflow/react';
 
 export default function NodeInspector() {
+  const { getInternalNode } = useReactFlow();
   const nodes = useNodes();
 
   return (
-    <EdgeLabelRenderer>
+    <ViewportPortal>
       <div className="react-flow__devtools-nodeinspector">
         {nodes.map((node) => {
-          const x = node.position.x || 0;
-          const y = node.position.y || 0;
-          const width = node.width || 0;
-          const height = node.height || 0;
+          const internalNode = getInternalNode(node.id);
+          if (!internalNode) {
+            return null;
+          }
+
+          const absPosition = internalNode?.internals.positionAbsolute;
 
           return (
             <NodeInfo
               key={node.id}
               id={node.id}
-              selected={node.selected}
+              selected={!!node.selected}
               type={node.type || 'default'}
-              x={x}
-              y={y}
-              width={width}
-              height={height}
+              position={node.position}
+              absPosition={absPosition}
+              width={node.measured?.width ?? 0}
+              height={node.measured?.height ?? 0}
               data={node.data}
             />
           );
         })}
       </div>
-    </EdgeLabelRenderer>
+    </ViewportPortal>
   );
 }
 
 type NodeInfoProps = {
   id: string;
   type: string;
   selected: boolean;
-  x: number;
-  y: number;
+  position: XYPosition;
+  absPosition: XYPosition;
   width?: number;
   height?: number;
   data: any;
@@ -46,8 +54,8 @@ function NodeInfo({
   id,
   type,
   selected,
-  x,
-  y,
+  position,
+  absPosition,
   width,
   height,
   data,
@@ -61,15 +69,15 @@ function NodeInfo({
       className="react-flow__devtools-nodeinfo"
       style={{
         position: 'absolute',
-        transform: `translate(${x}px, ${y + height}px)`,
+        transform: `translate(${absPosition.x}px, ${absPosition.y + height}px)`,
         width: width * 2,
       }}
     >
       <div>id: {id}</div>
       <div>type: {type}</div>
       <div>selected: {selected ? 'true' : 'false'}</div>
       <div>
-        position: {x.toFixed(1)}, {y.toFixed(1)}
+        position: {position.x.toFixed(1)}, {position.y.toFixed(1)}
       </div>
       <div>
         dimensions: {width} × {height}

diff --git a/apps/example-apps/react/learn/devtools/ViewportLogger.tsx b/apps/example-apps/react/learn/devtools/ViewportLogger.tsx
@@ -8,5 +8,5 @@ export default function ViewportLogger() {
       )}, zoom: ${s.transform[2].toFixed(2)}`,
   );
 
-  return <Panel position="top-right">{viewport}</Panel>;
+  return <Panel position="bottom-left">{viewport}</Panel>;
 }
diff --git a/apps/ui-components/.eslintignore b/apps/ui-components/.eslintignore
@@ -0,0 +1 @@
+templates/**
diff --git a/apps/ui-components/.eslintrc.json b/apps/ui-components/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/ui-components/.gitignore b/apps/ui-components/.gitignore
@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+public/registry/**
+public/demo/**
diff --git a/apps/ui-components/.prettierrc b/apps/ui-components/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/ui-components/README.md b/apps/ui-components/README.md
@@ -0,0 +1,37 @@
+# React Flow components for shadcn/cli
+
+This application is used for developing and publishing new components that can be installed by running the shadcn cli.
+
+## Adding components
+
+```bash
+npx shadcn init # initialize shadcn
+npx shadcn add http://ui.reactflow.dev/<component-name>.json ## adding component
+```
+
+## Developing new components
+
+We have an initialization script that can be run via
+
+```bash
+pnpm add-component <component-name>
+```
+
+This adds the following files:
+
+```bash
+components/
+├─ xy/
+│  ├─ <component-name>/
+│  │  ├─ index.tsx      # source code of the component
+│  │  ├─ demo.tsx       # small demo showing usage to appear on website
+│  │  ├─ registry.json  # shadcn configuration
+app/
+├─ <component-name>/
+│  ├─ page.tsx          # route for rendering component
+
+```
+
+## Deploying components
+
+Inside the `scripts/` folder you will find a script called `generate-registry.js`. This script is executed when running `pnpm build`. It generates registry files for the cli (`regsitry/<component-name>.json`), as well as a `demo/<component-name>.json` file with the example code for each component and saves them inside the `public/` folder. This way by building and deploying the app we can directly host all neccessary files needed for the cli and integrating it with our website.
diff --git a/apps/ui-components/app/components/animated-svg-edge/page.tsx b/apps/ui-components/app/components/animated-svg-edge/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/animated-svg-edge/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/annotation-node/page.tsx b/apps/ui-components/app/components/annotation-node/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/annotation-node/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/base-handle/page.tsx b/apps/ui-components/app/components/base-handle/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Background, ReactFlow } from "@xyflow/react";
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/base-handle/demo";
+
+const defaultNodes = [
+  {
+    id: "1",
+    position: { x: 200, y: 200 },
+    data: {},
+    type: "customNode",
+  },
+];
+
+const nodeTypes = {
+  customNode: Demo,
+};
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <div className="h-full w-full">
+        <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
+          <Background />
+        </ReactFlow>
+      </div>
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/base-node/page.tsx b/apps/ui-components/app/components/base-node/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/base-node/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/button-edge/page.tsx b/apps/ui-components/app/components/button-edge/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/button-edge/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/database-schema-node/page.tsx b/apps/ui-components/app/components/database-schema-node/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/database-schema-node/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/devtools/page.tsx b/apps/ui-components/app/components/devtools/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/devtools/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/labeled-group-node/page.tsx b/apps/ui-components/app/components/labeled-group-node/page.tsx
@@ -0,0 +1,10 @@
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/labeled-group-node/demo";
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <Demo />
+    </DemoWrapper>
+  );
+}
diff --git a/apps/ui-components/app/components/labeled-handle/page.tsx b/apps/ui-components/app/components/labeled-handle/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Background, ReactFlow } from "@xyflow/react";
+import DemoWrapper from "@/components/demo-wrapper";
+import Demo from "@/registry/components/labeled-handle/demo";
+
+const defaultNodes = [
+  {
+    id: "1",
+    position: { x: 200, y: 200 },
+    data: {},
+    type: "customNode",
+  },
+];
+
+const nodeTypes = {
+  customNode: Demo,
+};
+
+export default function DemoPage() {
+  return (
+    <DemoWrapper>
+      <div className="h-full w-full">
+        <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
+          <Background />
+        </ReactFlow>
+      </div>
+    </DemoWrapper>
+  );
+}