https://www.overflow.dev/ui-components/assets/js/62f9c120.865ff85f.js

1"use strict";(self.webpackChunk_synergycodes_overflow_ui_website=self.webpackChunk_synergycodes_overflow_ui_website||[]).push([[6522],{2899:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>d,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"generated-docs/decision-logs/nodes.decision-log.md","title":"Node Components Design and Implementation","description":"Proposed by: Piotr B\u0142aszczyk","source":"@site/docs/generated-docs/decision-logs/nodes.decision-log.md.md","sourceDirName":"generated-docs/decision-logs","slug":"/generated-docs/decision-logs/nodes.decision-log.md","permalink":"/ui-components/generated-docs/decision-logs/nodes.decision-log.md","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"mainSidebar","previous":{"title":"Folder Structure","permalink":"/ui-components/generated-docs/decision-logs/folder-structure.decision-log.md"}}');var i=o(4489),t=o(3237);const d={},r="Node Components Design and Implementation",l={},a=[{value:"Context",id:"context",level:2},{value:"Decision",id:"decision",level:2},{value:"Usage Example",id:"usage-example",level:2},{value:"Consequences",id:"consequences",level:2},{value:"Status",id:"status",level:2}];function c(e){const n={code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,t.R)(),...e.components},{Code:o}=n;return o||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Code",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"node-components-design-and-implementation",children:"Node Components Design and Implementation"})}),"\n",(0,i.jsxs)(n.p,{children:["Proposed by: ",(0,i.jsx)(n.strong,{children:"Piotr B\u0142aszczyk"})]}),"\n",(0,i.jsxs)(n.p,{children:["Date: ",(0,i.jsx)(n.strong,{children:"02.04.2025"})]}),"\n",(0,i.jsx)(n.h2,{id:"context",children:"Context"}),"\n",(0,i.jsx)(n.p,{children:"In the project, node components have been implemented to provide base parts that allow developers to build node templates on their own. Since the library does not have a direct dependency on React Flow, elements such as handles need to be provided as children. This ensures flexibility in defining the node structure."}),"\n",(0,i.jsx)(n.p,{children:"Some nodes in the project may have one or more handles. Providing them as children allows for greater customization and control over their placement and behavior."}),"\n",(0,i.jsx)(n.p,{children:"Several components have been designed to be used together or separately. They provide a well-structured foundation for quickly building visually appealing nodes."}),"\n",(0,i.jsx)(n.h2,{id:"decision",children:"Decision"}),"\n",(0,i.jsx)(n.p,{children:"To meet these requirements, the following components were introduced:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"NodeAsPortWrapper"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Any React Flow node can be wrapped with this component to make the entire node function as a port during connections."}),"\n",(0,i.jsx)(n.li,{children:"This enables easy and efficient flow creation by simplifying how nodes interact with edges."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"NodePanel"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"A foundational building block for nodes."}),"\n",(0,i.jsx)(n.li,{children:"Offers a well-designed interface for various states, leveraging the Overflow UI design system."}),"\n",(0,i.jsxs)(n.li,{children:["Accepts three slots as children for structuring the node: ",(0,i.jsx)(n.code,{children:"header"}),", ",(0,i.jsx)(n.code,{children:"content"}),", and ",(0,i.jsx)(n.code,{children:"handles"}),"."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"NodeIcon & NodeDescription"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Small helper components for quickly creating a node header."}),"\n",(0,i.jsx)(n.li,{children:"These components can also be reused in other parts of the application, such as palettes or the sidebar header properties."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"usage-example",children:"Usage Example"}

1),"\n",(0,i.jsx)(o,{codeblock:{value:'<NodeAsPortWrapper isConnecting={false} targetPortPosition="top">\n  <NodePanel selected={false}>\n    <NodeHeaderSlot>\n      <NodeIcon icon={<Icon name="Airplane" />} />\n      <NodeDescription label="Trigger" description="Initiate task" />\n    </NodeHeaderSlot>\n    <NodeHandlesSlot isVisible={true}>\n      <Handle id="target" position={Position.Top} type="target" />\n      <Handle id="source" position={Position.Bottom} type="source" />\n    </NodeHandlesSlot>\n  </NodePanel>\n</NodeAsPortWrapper>',lang:"tsx",meta:"",code:'<NodeAsPortWrapper isConnecting={false} targetPortPosition="top">\n  <NodePanel selected={false}>\n    <NodeHeaderSlot>\n      <NodeIcon icon={<Icon name="Airplane" />} />\n      <NodeDescription label="Trigger" description="Initiate task" />\n    </NodeHeaderSlot>\n    <NodeHandlesSlot isVisible={true}>\n      <Handle id="target" position={Position.Top} type="target" />\n      <Handle id="source" position={Position.Bottom} type="source" />\n    </NodeHandlesSlot>\n  </NodePanel>\n</NodeAsPortWrapper>',tokens:[["<","#89DDFF"],["NodeAsPortWrapper","#FFCB6B"]," ",["isConnecting","#C792EA"],["={","#89DDFF"],["false","#FF9CAC"],["}","#89DDFF"]," ",["targetPortPosition","#C792EA"],['="',"#89DDFF"],["top","#C3E88D"],['">',"#89DDFF"],"\n  ",["<","#89DDFF"],["NodePanel","#FFCB6B"]," ",["selected","#C792EA"],["={","#89DDFF"],["false","#FF9CAC"],["}>","#89DDFF"],"\n    ",["<","#89DDFF"],["NodeHeaderSlot","#FFCB6B"],[">","#89DDFF"],"\n      ",["<","#89DDFF"],["NodeIcon","#FFCB6B"]," ",["icon","#C792EA"],["={<","#89DDFF"],["Icon","#FFCB6B"]," ",["name","#C792EA"],['="',"#89DDFF"],["Airplane","#C3E88D"],['" />} />',"#89DDFF"],"\n      ",["<","#89DDFF"],["NodeDescription","#FFCB6B"]," ",["label","#C792EA"],['="',"#89DDFF"],["Trigger","#C3E88D"],['"',"#89DDFF"]," ",["description","#C792EA"],['="',"#89DDFF"],["Initiate task","#C3E88D"],['" />',"#89DDFF"],"\n    ",["</","#89DDFF"],["NodeHeaderSlot","#FFCB6B"],[">","#89DDFF"],"\n    ",["<","#89DDFF"],["NodeHandlesSlot","#FFCB6B"]," ",["isVisible","#C792EA"],["={","#89DDFF"],["true","#FF9CAC"],["}>","#89DDFF"],"\n      ",["<","#89DDFF"],["Handle","#FFCB6B"]," ",["id","#C792EA"],['="',"#89DDFF"],["target","#C3E88D"],['"',"#89DDFF"]," ",["position","#C792EA"],["={","#89DDFF"],["Position","#A6ACCD"],[".","#89DDFF"],["Top","#A6ACCD"],["}","#89DDFF"]," ",["type","#C792EA"],['="',"#89DDFF"],["target","#C3E88D"],['" />',"#89DDFF"],"\n      ",["<","#89DDFF"],["Handle","#FFCB6B"]," ",["id","#C792EA"],['="',"#89DDFF"],["source","#C3E88D"],['"',"#89DDFF"]," ",["position","#C792EA"],["={","#89DDFF"],["Position","#A6ACCD"],[".","#89DDFF"],["Bottom","#A6ACCD"],["}","#89DDFF"]," ",["type","#C792EA"],['="',"#89DDFF"],["source","#C3E88D"],['" />',"#89DDFF"],"\n    ",["</","#89DDFF"],["NodeHandlesSlot","#FFCB6B"],[">","#89DDFF"],"\n  ",["</","#89DDFF"],["NodePanel","#FFCB6B"],[">","#89DDFF"],"\n",["</","#89DDFF"],["NodeAsPortWrapper","#FFCB6B"],[">","#89DDFF"]],annotations:[],themeName:"material-palenight",style:{color:"#A6ACCD",background:"#292D3E",colorScheme:"dark"}}}),"\n",(0,i.jsx)(n.h2,{id:"consequences",children:"Consequences"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Flexibility"}),": By not enforcing a direct React Flow dependency, the components can be used in various scenarios while still allowing full control over node structure."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Maintainability"}),": The modular nature of the components ensures easier updates and modifications."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Customizability"}),": Providing handles and other elements as children allows for tailored node definitions."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Reusability"}),": Common design elements such as headers and descriptions can be used across multiple parts of the application."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"status",children:"Status"}),"\n",(0,i.jsx)(n.p,{children:"Accepted"})]})}function p(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}}}]);