chore(svelte-examples): pull out of lib package (#3363)

* chore(svelte-examples): pull out of lib package

* chore(svelte-examples): cleanup

* chore(examples): add readme files

examples/react/cypress/components/hooks/useNodes.cy.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { ReactFlow, Node, useNodes } from '@xyflow/react';
+
+import { nodes } from '../../fixtures/simpleflow';
+
+const nodeDimensions = {
+  width: 100,
+  height: 50,
+};
+
+const initialNodes: Node[] = nodes.map((n) => ({
+  ...n,
+  style: nodeDimensions,
+}));
+
+const expectedNodes: Node[] = initialNodes.map((n) => ({
+  ...n,
+  positionAbsolute: n.position,
+  ...nodeDimensions,
+}));
+
+describe('useNodes.cy.tsx', () => {
+  it('handles nodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow nodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+
+  it('handles defaultNodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+});
+
+const HookHelperComponent = ({ onChange }: { onChange: (nodes: Node[]) => void }) => {
+  const nodes = useNodes();
+
+  useEffect(() => {
+    onChange(nodes);
+  }, [nodes]);
+
+  return null;
+};