@baseplate-dev/project-builder-web/dist/assets/hierarchy-Bpe_B9GF.js

Web interface for constructing project builder JSON

import{i as r}from"./_virtual___federation_fn_import-o6aKHb82.js";import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{G as $,H as S,A as E,I as z}from"./index-B6LhSOJ-.js";import{s as I,U as A,b as M}from"./index-D_oO4W9-.js";import{b as B}from"./index.esm-B0dGSilx.js";import{s as P}from"./sortBy-C9bvycg5.js";function H(t){return $({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"15 10 20 15 15 20"},child:[]},{tag:"path",attr:{d:"M4 4v7a4 4 0 0 0 4 4h12"},child:[]}]})(t)}const{useProjectDefinition:T}=await r("@baseplate-dev/project-builder-lib/web"),{Button:D,ComboboxFieldController:U,Dialog:V,DialogContent:W,DialogFooter:G,DialogHeader:L,DialogTitle:O,InputFieldController:q}=await r("@baseplate-dev/ui-components"),{useEffect:J,useMemo:K}=await r("react"),{z:j}=await r("zod"),Q=j.object({id:j.string(),childName:j.string().min(1).regex(/^[a-z0-9-]+$/,"Must be lowercase, numbers, and dashes only"),parentRef:j.string().optional()});function X({feature:t,open:i,onClose:a}){const{definitionContainer:{definition:p},saveDefinitionWithFeedback:d}=T(),l=K(()=>({id:t?.id??"",childName:t?.name.split("/").pop()??"",parentRef:t?.parentRef}),[t]),{control:f,handleSubmit:w,reset:m,formState:{isSubmitting:v}}=B({resolver:I(Q),values:l});J(()=>{i&&m(l)},[i,l,m]);const y=w(n=>d(c=>{const x=c.features.find(s=>s.id===n.parentRef)?.name,h=n.parentRef?`${x}/${n.childName}`:n.childName;if(c.features.some(s=>s.id!==n.id&&s.name===h))throw new A("Feature with this name already exists");const b=[...c.features.filter(s=>s.id!==n.id),{id:n.id,name:h,parentRef:n.parentRef}];function F(s){const R=b.filter(u=>s?new RegExp(`^${s.name}/[^/]+$`).exec(u.name):!u.name.includes("/"));for(const u of R){const g=u.name.split("/").pop();if(!g)throw new Error("Invalid feature name");u.name=s?`${s.name}/${g}`:g,F(u)}}F(),c.features=P(b,[s=>s.name])},{onSuccess:()=>{a?.()}})),o=[{label:"None",value:void 0},...p.features.filter(n=>n.id!==t?.id).map(n=>({label:n.name,value:n.id}))];return e.jsx(V,{open:i,onOpenChange:n=>{n||a?.()},children:e.jsx(W,{children:e.jsxs("form",{className:"space-y-4",onSubmit:y,children:[e.jsx(L,{children:e.jsxs(O,{children:[t?.name?"Edit":"Add"," Feature"]})}),e.jsx(q,{control:f,name:"childName",label:"Name",autoComplete:"off","data-1p-ignore":!0}),e.jsx(U,{control:f,name:"parentRef",label:"Parent Feature",options:o}),e.jsxs(G,{children:[e.jsx(D,{onClick:a,variant:"secondary",children:"Cancel"}),e.jsx(D,{type:"submit",disabled:v,children:"Save"})]})]})})})}const{featureEntityType:C}=await r("@baseplate-dev/project-builder-lib"),{useProjectDefinition:Y}=await r("@baseplate-dev/project-builder-lib/web"),{Button:N,buttonVariants:Z,cn:_,useConfirmDialog:ee}=await r("@baseplate-dev/ui-components"),{useState:k}=await r("react");function te({feature:t,setFeatureToEdit:i,setShowFeatureForm:a,handleRemoveFeature:p}){const d=t.name.split("/").pop()??"";return e.jsxs("div",{className:"flex space-x-1",children:[e.jsx("button",{className:"mr-1 flex w-full flex-row items-center space-x-3",onClick:()=>{i(t),a(!0)},children:e.jsxs("div",{className:"flex w-full items-center space-x-1 truncate",title:d,children:[t.name.includes("/")&&e.jsxs(e.Fragment,{children:[t.name.split("/").slice(0,-2).map(l=>e.jsx("div",{className:"w-8 shrink-0"},l)),e.jsx(H,{className:"size-8 shrink-0 p-2"})]}),e.jsxs("div",{className:_(Z({variant:"secondary",size:"sm"}),"group w-full"),style:{justifyContent:"flex-start"},children:[d,e.jsx("div",{className:"flex-1"}),e.jsx(S,{className:"opacity-0 transition-opacity group-hover:opacity-100"})]})]})}),e.jsx(N,{className:"shrink-0",variant:"ghost",onClick:()=>{i({id:C.generateNewId(),name:"",parentRef:t.id}),a(!0)},size:"icon",title:`Add Sub-Feature to ${t.name}`,children:e.jsx(E,{})}),e.jsx(N,{className:"shrink-0",variant:"ghost",onClick:()=>{p(t)},size:"icon",title:`Delete ${t.name}`,children:e.jsx(z,{})})]})}const le=function(){const{definitionContainer:i,saveDefinitionWithFeedbackSync:a}=Y(),{requestConfirm:p}=ee(),{showRefIssues:d}=M(),[l,f]=k(),[w,m]=k(!1),{features:v}=i.definition,y=o=>{function n(x){const h=x.features.findIndex(b=>b.id===o.id);if(h===-1)throw new Error("Feature not found");x.features.splice(h,1)}const c=i.fixRefDeletions(n);if(c.type==="failure"){d({issues:c.issues});return}p({title:"Delete Feature",content:`Are you sure you want to delete ${o.name}?`,onConfirm:()=>{a(n,{successMessage:`Feature ${o.name} removed`})}})};return e.jsx("div",{className:"relative h-full max-h-full pb-(--action-bar-height)",children:e.jsxs("div",{className:"flex h-full max-h-full flex-1 flex-col overflow-y-auto px-6",children:[e.jsxs("div",{className:"sticky top-0 space-y-2 border-b bg-background py-6",children:[e.jsx("h1",{children:"Hierarchy"}),e.jsx("p",{className:"max-w-3xl text-muted-foreground",children:"All business logic and features are organized in a hierarchy. The structure of the features in the list below is the way the folder structure will be created in your backend/admin applications."})]}),e.jsxs("div",{className:"py-6",children:[e.jsx("div",{className:"mb-4 flex max-w-md flex-col gap-1",children:v.map(o=>e.jsx(te,{feature:o,setFeatureToEdit:f,setShowFeatureForm:m,handleRemoveFeature:y},o.id))}),e.jsx(N,{onClick:()=>{f({id:C.generateNewId(),name:"",parentRef:void 0}),m(!0)},variant:"secondary",size:"sm",children:"Add Feature"}),e.jsx(X,{feature:l,open:w,onClose:()=>{m(!1)}})]})]})})};export{le as component};
//# sourceMappingURL=hierarchy-Bpe_B9GF.js.map