Deploy to GitHub pages

CNAME

@@ -0,0 +1 @@
+reaflow.dev

assets/Basics-10dd212d.js

@@ -0,0 +1,43 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import"./chunk-HLWAVYOI-fce3c28f.js";import{M as r,C as i}from"./index-8e905c69.js";import{Simple as a}from"./Basic.stories-84c4d4ab.js";import{u as o}from"./index-2ef8b458.js";import"./index-1b03fe98.js";import"./iframe-ace6960f.js";import"../sb-preview/runtime.js";import"./react-18-5df836b6.js";import"./index-6fd5a17b.js";import"./chunk-EIRT5I3Z-f0a10e90.js";import"./_commonjs-dynamic-modules-302442b1.js";import"./index-d7bb098e.js";import"./index-356e4a49.js";import"./Icon-046b6023.js";import"./IntersectionQuery-1c2e7c35.js";import"./crudHelpers-031fd461.js";import"./graphHelpers-fa49f917.js";function t(s){const n=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",pre:"pre"},o(),s.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Docs/Getting Started/Basics"}),`
+`,e.jsx(n.h1,{id:"basics",children:"Basics"}),`
+`,e.jsx(n.h2,{id:"your-first-diagram",children:"Your First Diagram"}),`
+`,e.jsxs(n.p,{children:["Let's build our first diagram by defining some ",e.jsx(n.code,{children:"nodes"})," and ",e.jsx(n.code,{children:"edges"}),`.
+Nodes are the blocks and edges are the relationships between the blocks.`]}),`
+`,e.jsxs(n.p,{children:["The data shapes require one property of ",e.jsx(n.code,{children:"id"})," but you can pass ",e.jsx(n.code,{children:"text"}),`
+or `,e.jsx(n.code,{children:"icon"}),` to them to show some sort of indication what it represents.
+The `,e.jsx(n.code,{children:"id"})," property can be any ",e.jsx(n.code,{children:"string"}),` but for demonstration purposes
+we are going to use some basic strings.`]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-js",children:`const nodes = [
+ {
+ id: '1',
+ text: '1'
+ },
+ {
+ id: '2',
+ text: '2'
+ }
+];
+
+const edges = [
+ {
+ id: '1-2',
+ from: '1',
+ to: '2'
+ }
+];
+`})}),`
+`,e.jsxs(n.p,{children:["These shapes above will create two elements ",e.jsx(n.code,{children:"1"})," and ",e.jsx(n.code,{children:"2"}),` and create
+a relationship between them. Once we have this defined, we can simply
+pass these properties to the `,e.jsx(n.code,{children:"Canvas"})," and it will do the rest!"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`import React from 'react';
+import { Canvas } from 'reaflow';
+
+export const MyDiagram = () => (
+ <Canvas
+ nodes={nodes}
+ edges={edges}
+ />
+);
+`})}),`
+`,e.jsx(n.p,{children:"This will render a graph like this:"}),`
+`,e.jsx(i,{of:a})]})}function O(s={}){const{wrapper:n}=Object.assign({},o(),s.components);return n?e.jsx(n,Object.assign({},s,{children:e.jsx(t,s)})):t(s)}export{O as default};

assets/Components-a6c0f215.js

@@ -0,0 +1,34 @@
+import{j as e}from"./jsx-runtime-9c4ae004.js";import"./chunk-HLWAVYOI-fce3c28f.js";import{M as i,A as o}from"./index-8e905c69.js";import{C as t,N as c,E as h,P as l,M as a,A as x,R as j,L as m,I as p}from"./Icon-046b6023.js";import"./index-1b03fe98.js";import"./IntersectionQuery-1c2e7c35.js";import{u as d}from"./index-2ef8b458.js";import"./iframe-ace6960f.js";import"../sb-preview/runtime.js";import"./react-18-5df836b6.js";import"./index-6fd5a17b.js";import"./chunk-EIRT5I3Z-f0a10e90.js";import"./_commonjs-dynamic-modules-302442b1.js";import"./index-d7bb098e.js";import"./index-356e4a49.js";function r(s){const n=Object.assign({h1:"h1",p:"p",ul:"ul",li:"li",h2:"h2",code:"code"},d(),s.components);return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Docs/Getting Started/Components"}),`
+`,e.jsx(n.h1,{id:"components",children:"Components"}),`
+`,e.jsx(n.p,{children:`The library uses a variety of components internally that you can
+customize.`}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Canvas - The root component"}),`
+`,e.jsx(n.li,{children:"Node - The node element component"}),`
+`,e.jsx(n.li,{children:"Edge - The connector between nodes"}),`
+`,e.jsx(n.li,{children:"Port - The exit points of a node"}),`
+`,e.jsx(n.li,{children:"Marker Arrow - The shape used to connect show direction on the edges"}),`
+`,e.jsx(n.li,{children:"Add - The shape used on edges to show dropping between edges"}),`
+`,e.jsx(n.li,{children:"Remove - The shape used on nodes and edges to remove each"}),`
+`,e.jsx(n.li,{children:"Label - The component used by nodes and edges to show text"}),`
+`,e.jsx(n.li,{children:"Icon - The component used by nodes to show an icon"}),`
+`]}),`
+`,e.jsx(n.p,{children:"Below are the props from each component."}),`
+`,e.jsx(n.h2,{id:"canvas",children:e.jsx(n.code,{children:"Canvas"})}),`
+`,e.jsx(o,{of:t}),`
+`,e.jsx(n.h2,{id:"node",children:e.jsx(n.code,{children:"Node"})}),`
+`,e.jsx(o,{of:c}),`
+`,e.jsx(n.h2,{id:"edge",children:e.jsx(n.code,{children:"Edge"})}),`
+`,e.jsx(o,{of:h}),`
+`,e.jsx(n.h2,{id:"port",children:e.jsx(n.code,{children:"Port"})}),`
+`,e.jsx(o,{of:l}),`
+`,e.jsx(n.h2,{id:"markerarrow",children:e.jsx(n.code,{children:"MarkerArrow"})}),`
+`,e.jsx(o,{of:a}),`
+`,e.jsx(n.h2,{id:"add",children:e.jsx(n.code,{children:"Add"})}),`
+`,e.jsx(o,{of:x}),`
+`,e.jsx(n.h2,{id:"remove",children:e.jsx(n.code,{children:"Remove"})}),`
+`,e.jsx(o,{of:j}),`
+`,e.jsx(n.h2,{id:"label",children:e.jsx(n.code,{children:"Label"})}),`
+`,e.jsx(o,{of:m}),`
+`,e.jsx(n.h2,{id:"icon",children:e.jsx(n.code,{children:"Icon"})}),`
+`,e.jsx(o,{of:p})]})}function D(s={}){const{wrapper:n}=Object.assign({},d(),s.components);return n?e.jsx(n,Object.assign({},s,{children:e.jsx(r,s)})):r(s)}export{D as default};