refactor: clean up examples

Author: thedanchez

playground/examples/color-mode/page.tsx

@@ -2,61 +2,58 @@ import { type ColorMode } from "@xyflow/system";
 import { createSignal } from "solid-js";
 
 import { Background, Controls, MiniMap, Panel, SolidFlow } from "@/index";
-import type { Edge, Node } from "@/types";
 
-const initialNodes: Node[] = [
-  {
-    id: "A",
-    type: "default",
-    position: { x: 0, y: 0 },
-    data: { label: "Node A" },
-  },
-  {
-    id: "B",
-    type: "default",
-    position: { x: -100, y: 100 },
-    data: { label: "Node B" },
-  },
-  {
-    id: "C",
-    type: "default",
-    position: { x: 100, y: 100 },
-    data: { label: "Node C" },
-  },
-  {
-    id: "D",
-    type: "default",
-    position: { x: 0, y: 200 },
-    data: { label: "Node D" },
-  },
-];
+export function ColorMode() {
+  const [nodes] = createSignal([
+    {
+      id: "A",
+      type: "default",
+      position: { x: 0, y: 0 },
+      data: { label: "Node A" },
+    },
+    {
+      id: "B",
+      type: "default",
+      position: { x: -100, y: 100 },
+      data: { label: "Node B" },
+    },
+    {
+      id: "C",
+      type: "default",
+      position: { x: 100, y: 100 },
+      data: { label: "Node C" },
+    },
+    {
+      id: "D",
+      type: "default",
+      position: { x: 0, y: 200 },
+      data: { label: "Node D" },
+    },
+  ]);
 
-const initialEdges: Edge[] = [
-  {
-    id: "A-B",
-    source: "A",
-    target: "B",
-  },
-  {
-    id: "A-C",
-    source: "A",
-    target: "C",
-  },
-  {
-    id: "B-D",
-    source: "B",
-    target: "D",
-  },
-  {
-    id: "C-D",
-    source: "C",
-    target: "D",
-  },
-];
+  const [edges] = createSignal([
+    {
+      id: "A-B",
+      source: "A",
+      target: "B",
+    },
+    {
+      id: "A-C",
+      source: "A",
+      target: "C",
+    },
+    {
+      id: "B-D",
+      source: "B",
+      target: "D",
+    },
+    {
+      id: "C-D",
+      source: "C",
+      target: "D",
+    },
+  ]);
 
-export function ColorMode() {
-  const [nodes] = createSignal(initialNodes);
-  const [edges] = createSignal(initialEdges);
   const [colorMode, setColorMode] = createSignal<ColorMode>("light");
 
   return (

playground/examples/custom-node/page.tsx

@@ -20,7 +20,7 @@ const nodeTypes = {
 export function CustomNode() {
   const [backgroundColor, setBackgroundColor] = createSignal("#1A192B");
 
-  const [nodes, _setNodes] = createNodeStore<typeof nodeTypes>([
+  const [nodes] = createNodeStore<typeof nodeTypes>([
     {
       id: "1",
       type: "input",
@@ -50,7 +50,7 @@ export function CustomNode() {
     },
   ]);
 
-  const [edges, _setEdges] = createEdgeStore([
+  const [edges] = createEdgeStore([
     {
       id: "e1-2",
       source: "1",

playground/examples/drag-n-drop/page.tsx

@@ -1,5 +1,3 @@
-import { createEffect } from "solid-js";
-
 import { createEdgeStore } from "@/data/createEdgeStore";
 import { createNodeStore } from "@/data/createNodeStore";
 import { useSolidFlow } from "@/hooks";
@@ -32,7 +30,7 @@ export function DragNDrop() {
     },
   ]);
 
-  const [edges, _setEdges] = createEdgeStore([
+  const [edges] = createEdgeStore([
     {
       id: "1-2",
       type: "default",
@@ -81,14 +79,9 @@ export function DragNDrop() {
       data: { label: `${type} node` },
     };
 
-    console.log("ADD NODE >>>>", newNode);
     addNodes(newNode);
   };
 
-  createEffect(() => {
-    console.log("DRAG AND DROP NODES UPDATED >>>", nodes);
-  });
-
   return (
     <main style={{ height: "100%", display: "flex" }}>
       <SolidFlow nodes={nodes} edges={edges} fitView onDragOver={onDragOver} onDrop={onDrop}>