@baseplate-dev/project-builder-web
Version:
Web interface for constructing project builder JSON
3 lines (2 loc) • 5.57 kB
JavaScript
import{i as l}from"./_virtual___federation_fn_import-DOo8C-zl.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-G5ZRloOW.js";import{b as I,U as A,c as M}from"./index-DiAhmW9l.js";import{f as B}from"./index.esm-DImnoN58.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 l("@baseplate-dev/project-builder-lib/web"),{Button:D,ComboboxFieldController:U,Dialog:V,DialogContent:W,DialogFooter:G,DialogHeader:L,DialogTitle:O,InputFieldController:q}=await l("@baseplate-dev/ui-components"),{useEffect:J,useMemo:K}=await l("react"),{z:w}=await l("zod"),Q=w.object({id:w.string(),childName:w.string().min(1).regex(/^[a-z0-9-]+$/,"Must be lowercase, numbers, and dashes only"),parentRef:w.string().optional()});function X({feature:t,open:n,onClose:a}){const{definitionContainer:{definition:u},saveDefinitionWithFeedback:d}=T(),r=K(()=>({id:t?.id??"",childName:t?.name.split("/").pop()??"",parentRef:t?.parentRef}),[t]),{control:f,handleSubmit:p,reset:h,formState:{isSubmitting:v}}=B({resolver:I(Q),values:r});J(()=>{n&&h(r)},[n,r,h]);const o=p(s=>d(c=>{const b=c.features.find(i=>i.id===s.parentRef)?.name,j=s.parentRef?`${b}/${s.childName}`:s.childName;if(c.features.some(i=>i.id!==s.id&&i.name===j))throw new A("Feature with this name already exists");const N=[...c.features.filter(i=>i.id!==s.id),{id:s.id,name:j,parentRef:s.parentRef}];function F(i){const C=N.filter(m=>i?new RegExp(`^${i.name}/[^/]+$`).exec(m.name):!m.name.includes("/"));for(const m of C){const y=m.name.split("/").pop();if(!y)throw new Error("Invalid feature name");m.name=i?`${i.name}/${y}`:y,F(m)}}F(),c.features=P(N,[i=>i.name])},{onSuccess:()=>{a?.()}})),x=[{label:"None",value:void 0},...u.features.filter(s=>s.id!==t?.id).map(s=>({label:s.name,value:s.id}))];return e.jsx(V,{open:n,onOpenChange:s=>{s||a?.()},children:e.jsx(W,{children:e.jsxs("form",{className:"space-y-4",onSubmit:o,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:x}),e.jsxs(G,{children:[e.jsx(D,{onClick:a,variant:"secondary",children:"Cancel"}),e.jsx(D,{type:"submit",disabled:v,children:"Save"})]})]})})})}const{featureEntityType:R}=await l("@baseplate-dev/project-builder-lib"),{useProjectDefinition:Y}=await l("@baseplate-dev/project-builder-lib/web"),{Button:g,buttonVariants:Z,cn:_,useConfirmDialog:ee}=await l("@baseplate-dev/ui-components"),{useState:k}=await l("react");function le(){const{definitionContainer:t,saveDefinitionWithFeedbackSync:n}=Y(),{requestConfirm:a}=ee(),{showRefIssues:u}=M(),[d,r]=k(),[f,p]=k(!1),{features:h}=t.definition,v=o=>{function x(c){const b=c.features.findIndex(j=>j.id===o.id);if(b===-1)throw new Error("Feature not found");c.features.splice(b,1)}const s=t.fixRefDeletions(x);if(s.type==="failure"){u({issues:s.issues});return}a({title:"Delete Feature",content:`Are you sure you want to delete ${o.name}?`,onConfirm:()=>{n(x,{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:h.map(o=>e.jsx(te,{feature:o,setFeatureToEdit:r,setShowFeatureForm:p,handleRemoveFeature:v},o.id))}),e.jsx(g,{onClick:()=>{r({id:R.generateNewId(),name:"",parentRef:void 0}),p(!0)},variant:"secondary",size:"sm",children:"Add Feature"}),e.jsx(X,{feature:d,open:f,onClose:()=>{p(!1)}})]})]})})}function te({feature:t,setFeatureToEdit:n,setShowFeatureForm:a,handleRemoveFeature:u}){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:()=>{n(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(r=>e.jsx("div",{className:"w-8 shrink-0"},r)),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(g,{className:"shrink-0",variant:"ghost",onClick:()=>{n({id:R.generateNewId(),name:"",parentRef:t.id}),a(!0)},size:"icon",title:`Add Sub-Feature to ${t.name}`,children:e.jsx(E,{})}),e.jsx(g,{className:"shrink-0",variant:"ghost",onClick:()=>{u(t)},size:"icon",title:`Delete ${t.name}`,children:e.jsx(z,{})})]})}export{le as component};
//# sourceMappingURL=hierarchy-BlW_9XCA.js.map