@nice2dev/ui 1.0.22 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +54 -0
- package/dist/NiceErrorBoundary-BNhkOZtq.cjs +1 -0
- package/dist/NiceErrorBoundary-DyPWyuki.js +770 -0
- package/dist/NiceForm-D_ifvkIf.js +5386 -0
- package/dist/NiceForm-kd4essRP.cjs +382 -0
- package/dist/NiceForm.css +1 -1
- package/dist/NiceModal-4DLpDmAl.js +95 -0
- package/dist/NiceModal-D2xJTZZf.cjs +1 -0
- package/dist/NiceModuleLifecyclePanel-BZMUuDad.js +6807 -0
- package/dist/NiceModuleLifecyclePanel-C54g5eV_.cjs +1 -0
- package/dist/NicePagination-3be3_sVK.js +171 -0
- package/dist/NicePagination-BCRsVzkR.cjs +1 -0
- package/dist/NicePinCodeInput-BD2bMmVF.cjs +696 -0
- package/dist/NicePinCodeInput-DCLRLR8a.js +13097 -0
- package/dist/NiceSavedQueryPanel-DT9v7kUB.cjs +596 -0
- package/dist/NiceSavedQueryPanel-RLj3BnDR.js +6866 -0
- package/dist/NiceTabs-CFA8DGYR.cjs +1 -0
- package/dist/NiceTabs-Cx9DN6QD.js +1657 -0
- package/dist/NiceWindow-5VCSBJrc.js +1592 -0
- package/dist/NiceWindow-BEFAUTLp.cjs +1 -0
- package/dist/charts-De7FYS1U.cjs +761 -0
- package/dist/charts-DjFvhCdD.js +4657 -0
- package/dist/charts.cjs +1 -1
- package/dist/charts.mjs +1 -1
- package/dist/core-CT5vpy5U.js +25248 -0
- package/dist/core-CZE5v34h.cjs +122 -0
- package/dist/data-branching-B7dCyaWr.cjs +1 -0
- package/dist/data-branching-BPAeL45o.js +6133 -0
- package/dist/data-branching.cjs +1 -1
- package/dist/data-branching.mjs +1 -1
- package/dist/data.cjs +1 -1
- package/dist/data.d.ts +36 -1
- package/dist/data.mjs +1 -1
- package/dist/devops-C3Pmbnxc.js +7684 -0
- package/dist/devops-CrXz348W.cjs +17 -0
- package/dist/devops.cjs +1 -1
- package/dist/devops.mjs +1 -1
- package/dist/editors.cjs +1 -1
- package/dist/editors.d.ts +5 -2
- package/dist/editors.mjs +3 -3
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.mjs +2 -2
- package/dist/index-9Gi1mNY7.js +67912 -0
- package/dist/index-Di3Cgr1P.cjs +5518 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +257 -46
- package/dist/index.mjs +743 -740
- package/dist/lazy.cjs +1 -1
- package/dist/lazy.mjs +24 -24
- package/dist/navigation.cjs +1 -1
- package/dist/navigation.d.ts +30 -4
- package/dist/navigation.mjs +4 -4
- package/dist/no-code-CHvv1KjZ.cjs +332 -0
- package/dist/no-code-CyvddsYt.js +7133 -0
- package/dist/no-code.cjs +1 -1
- package/dist/no-code.mjs +1 -1
- package/dist/overlays.cjs +1 -1
- package/dist/overlays.mjs +31 -31
- package/dist/style.css +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,332 @@
|
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),H=require("./core-CZE5v34h.cjs"),h=require("react"),fe=[{target:".nice-lowcode-studio",titleKey:"tutorial.lowCodeStudio.intro.title",title:"Low-code studio",contentKey:"tutorial.lowCodeStudio.intro.content",content:"Drag components from the sidebar onto the canvas, then switch between Design, Preview and Code tabs to build and export your app.",placement:"auto"}],be=({projectId:a,components:f=[],theme:v="light",onChange:y,onSave:T,className:b,tutorial:j})=>{const[s,C]=h.useState("design");return e.jsxs("div",{className:`nice-lowcode-studio nice-lowcode-studio--${v} ${b||""}`,"data-project":a,children:[e.jsxs("header",{className:"nice-lowcode-studio__header",children:[e.jsx("h1",{children:"Low-Code Studio"}),e.jsxs("nav",{className:"nice-lowcode-studio__tabs",children:[e.jsx("button",{onClick:()=>C("design"),className:s==="design"?"active":"",children:"Design"}),e.jsx("button",{onClick:()=>C("preview"),className:s==="preview"?"active":"",children:"Preview"}),e.jsx("button",{onClick:()=>C("code"),className:s==="code"?"active":"",children:"Code"})]}),e.jsx("button",{onClick:()=>T?.({}),children:"Save"}),e.jsx(H.wl,{steps:H.xl(j,fe)})]}),e.jsxs("div",{className:"nice-lowcode-studio__body",children:[e.jsxs("aside",{className:"nice-lowcode-studio__sidebar",children:[e.jsx("h2",{children:"Components"}),e.jsx("ul",{children:f.map(n=>e.jsx("li",{draggable:!0,children:n.name},n.id))})]}),e.jsxs("main",{className:"nice-lowcode-studio__canvas",children:[s==="design"&&e.jsx("div",{className:"nice-lowcode-studio__design-canvas",children:e.jsx("p",{children:"Drop components here"})}),s==="preview"&&e.jsx("div",{className:"nice-lowcode-studio__preview",children:e.jsx("p",{children:"Preview mode"})}),s==="code"&&e.jsx("div",{className:"nice-lowcode-studio__code",children:e.jsx("pre",{children:"// Generated code will appear here"})})]}),e.jsxs("aside",{className:"nice-lowcode-studio__properties",children:[e.jsx("h2",{children:"Properties"}),e.jsx("p",{children:"Select a component to edit properties"})]})]})]})},ve=[{target:".nice-component-designer",titleKey:"tutorial.componentDesigner.intro.title",title:"Component designer",contentKey:"tutorial.componentDesigner.intro.content",content:"Name your component, declare its props with types and requirements, and preview the generated TypeScript interface live.",placement:"auto"}],je=({component:a,propTypes:f=[],onChange:v,theme:y="light",className:T,tutorial:b})=>{const[j,s]=h.useState(a||{name:"NewComponent",props:[]}),C=n=>{const c={...j,...n};s(c),v?.(c)};return e.jsxs("div",{className:`nice-component-designer nice-component-designer--${y} ${T||""}`,style:{position:"relative"},children:[e.jsx("span",{style:{position:"absolute",top:6,right:6,zIndex:20},children:e.jsx(H.wl,{steps:H.xl(b,ve)})}),e.jsxs("section",{className:"nice-component-designer__header",children:[e.jsx("input",{type:"text",value:j.name,onChange:n=>C({name:n.target.value}),placeholder:"Component Name"}),e.jsx("input",{type:"text",value:j.description||"",onChange:n=>C({description:n.target.value}),placeholder:"Description"})]}),e.jsxs("section",{className:"nice-component-designer__props",children:[e.jsx("h3",{children:"Props"}),j.props.map((n,c)=>e.jsxs("div",{className:"nice-component-designer__prop",children:[e.jsx("input",{type:"text",value:n.name,readOnly:!0}),e.jsx("span",{children:n.type}),n.required&&e.jsx("span",{children:"required"})]},c)),e.jsx("button",{onClick:()=>C({props:[...j.props,{name:"newProp",type:"string"}]}),children:"Add Prop"})]}),e.jsxs("section",{className:"nice-component-designer__preview",children:[e.jsx("h3",{children:"Preview"}),e.jsx("pre",{children:`interface ${j.name}Props {
|
|
2
|
+
${j.props.map(n=>` ${n.name}${n.required?"":"?"}: ${n.type};`).join(`
|
|
3
|
+
`)}
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export const ${j.name}: React.FC<${j.name}Props> = (props) => {
|
|
7
|
+
return <div>Component</div>;
|
|
8
|
+
};`})]})]})},Se=[{target:".nice-page-builder",titleKey:"tutorial.pageBuilder.intro.title",title:"Page builder",contentKey:"tutorial.pageBuilder.intro.content",content:"Drag components from the sidebar onto the responsive grid, switch the desktop/tablet/mobile preview, and save the layout.",placement:"auto"}],ke=({initialLayout:a,components:f=[],grid:v={columns:12,gap:16,padding:24},onChange:y,onSave:T,theme:b="light",previewMode:j="desktop",className:s,tutorial:C})=>{const[n,c]=h.useState(a||{id:"page-1",name:"New Page",rows:[]}),[w,B]=h.useState(null),k=R=>{c(R),y?.(R)},L=()=>{const R={id:`row-${Date.now()}`,columns:[{id:`col-${Date.now()}`,width:12,components:[]}]};k({...n,rows:[...n.rows,R]})},D={desktop:"100%",tablet:"768px",mobile:"375px"}[j];return e.jsxs("div",{className:`nice-page-builder nice-page-builder--${b} ${s||""}`,children:[e.jsxs("aside",{className:"nice-page-builder__sidebar",children:[e.jsx("h3",{children:"Components"}),e.jsx("ul",{className:"nice-page-builder__components",children:f.map(R=>e.jsxs("li",{draggable:!0,className:"nice-page-builder__component-item",children:[R.icon&&e.jsx("span",{children:R.icon}),R.name]},R.id))})]}),e.jsxs("main",{className:"nice-page-builder__canvas",children:[e.jsxs("header",{className:"nice-page-builder__toolbar",children:[e.jsx("input",{type:"text",value:n.name,onChange:R=>k({...n,name:R.target.value})}),e.jsxs("div",{className:"nice-page-builder__preview-modes",children:[e.jsx("button",{className:j==="desktop"?"active":"",children:"Desktop"}),e.jsx("button",{className:j==="tablet"?"active":"",children:"Tablet"}),e.jsx("button",{className:j==="mobile"?"active":"",children:"Mobile"})]}),e.jsx("button",{onClick:()=>T?.(n),children:"Save"}),e.jsx(H.wl,{steps:H.xl(C,Se)})]}),e.jsxs("div",{className:"nice-page-builder__viewport",style:{maxWidth:D},children:[n.rows.map(R=>e.jsx("div",{className:"nice-page-builder__row",children:R.columns.map(z=>e.jsx("div",{className:"nice-page-builder__column",style:{width:`${z.width/12*100}%`},children:z.components.length===0?e.jsx("div",{className:"nice-page-builder__dropzone",children:"Drop components here"}):z.components.map(q=>e.jsx("div",{className:`nice-page-builder__placed-component ${w===q.id?"selected":""}`,onClick:()=>B(q.id),children:q.type},q.id))},z.id))},R.id)),e.jsx("button",{onClick:L,className:"nice-page-builder__add-row",children:"+ Add Row"})]})]}),e.jsxs("aside",{className:"nice-page-builder__properties",children:[e.jsx("h3",{children:"Properties"}),w?e.jsx("p",{children:"Edit properties for selected component"}):e.jsx("p",{children:"Select a component to edit"})]})]})},we=({code:a,language:f="typescript",lineNumbers:v=!0,livePreview:y=!1,showDiff:T=!1,previousCode:b,theme:j="light",copyable:s=!0,onCopy:C,className:n})=>{const[c,w]=h.useState(!1),B=async()=>{await navigator.clipboard.writeText(a),w(!0),C?.(),setTimeout(()=>w(!1),2e3)},k=a.split(`
|
|
9
|
+
`),L=()=>e.jsx("div",{className:"nice-code-preview__line-numbers",children:k.map((q,F)=>e.jsx("span",{children:F+1},F))}),D=()=>e.jsx("pre",{className:`nice-code-preview__code language-${f}`,children:e.jsx("code",{children:a})}),R=()=>b?(b.split(`
|
|
10
|
+
`),a.split(`
|
|
11
|
+
`),e.jsxs("div",{className:"nice-code-preview__diff",children:[e.jsxs("div",{className:"nice-code-preview__diff-panel nice-code-preview__diff-panel--old",children:[e.jsx("h4",{children:"Previous"}),e.jsx("pre",{children:b})]}),e.jsxs("div",{className:"nice-code-preview__diff-panel nice-code-preview__diff-panel--new",children:[e.jsx("h4",{children:"Current"}),e.jsx("pre",{children:a})]})]})):null,z=()=>f!=="html"&&f!=="jsx"&&f!=="tsx"?e.jsx("div",{className:"nice-code-preview__live-preview",children:e.jsx("p",{children:"Live preview only available for HTML, JSX, and TSX"})}):e.jsx("div",{className:"nice-code-preview__live-preview",children:e.jsx("iframe",{srcDoc:f==="html"?a:'<div id="root"></div><script>/* Preview not available for JSX */<\/script>',title:"Live Preview",sandbox:"allow-scripts"})});return e.jsxs("div",{className:`nice-code-preview nice-code-preview--${j} ${n||""}`,children:[e.jsxs("header",{className:"nice-code-preview__header",children:[e.jsx("span",{className:"nice-code-preview__language",children:f}),s&&e.jsx("button",{onClick:B,className:"nice-code-preview__copy-btn",children:c?"✓ Copied":"Copy"})]}),T&&b?R():e.jsxs("div",{className:"nice-code-preview__body",children:[v&&L(),D()]}),y&&e.jsxs("div",{className:"nice-code-preview__preview-section",children:[e.jsx("h4",{children:"Preview"}),z()]})]})},$e=[{target:".nice-state-designer",titleKey:"tutorial.stateDesigner.intro.title",title:"State designer",contentKey:"tutorial.stateDesigner.intro.content",content:"Model your store as slices with fields and actions, pick a target (e.g. Zustand) and export ready-to-use state-management code.",placement:"auto"}],Ce={id:"store-1",name:"AppStore",description:"Main application state store",slices:[{id:"slice-auth",name:"auth",description:"Authentication state",state:[{id:"f1",name:"user",type:"object",nullable:!0,description:"Current user"},{id:"f2",name:"isAuthenticated",type:"boolean",defaultValue:!1},{id:"f3",name:"token",type:"string",nullable:!0},{id:"f4",name:"loading",type:"boolean",defaultValue:!1},{id:"f5",name:"error",type:"string",nullable:!0}],actions:[{id:"a1",name:"login",description:"Authenticate user",async:!0,params:[{id:"p1",name:"email",type:"string",required:!0},{id:"p2",name:"password",type:"string",required:!0}],reducerSteps:[{id:"s1",type:"set",field:"loading",value:"true"},{id:"s2",type:"set",field:"error",value:"null"},{id:"s3",type:"set",field:"user",value:"response.user"},{id:"s4",type:"set",field:"token",value:"response.token"},{id:"s5",type:"set",field:"isAuthenticated",value:"true"},{id:"s6",type:"set",field:"loading",value:"false"}]},{id:"a2",name:"logout",description:"Clear user session",params:[],reducerSteps:[{id:"s1",type:"reset",field:"user"},{id:"s2",type:"set",field:"isAuthenticated",value:"false"},{id:"s3",type:"reset",field:"token"}]}],selectors:[{id:"sel1",name:"selectUser",expression:"state.auth.user",dependencies:["user"],memoized:!0},{id:"sel2",name:"selectIsLoggedIn",expression:"state.auth.isAuthenticated",dependencies:["isAuthenticated"]}]},{id:"slice-cart",name:"cart",description:"Shopping cart state",state:[{id:"f1",name:"items",type:"array",defaultValue:[],description:"Cart items"},{id:"f2",name:"total",type:"number",defaultValue:0},{id:"f3",name:"currency",type:"string",defaultValue:"USD"}],actions:[{id:"a1",name:"addItem",params:[{id:"p1",name:"item",type:"object",required:!0}],reducerSteps:[{id:"s1",type:"push",field:"items",value:"item"},{id:"s2",type:"update",field:"total",value:"state.total + item.price"}]},{id:"a2",name:"removeItem",params:[{id:"p1",name:"itemId",type:"string",required:!0}],reducerSteps:[{id:"s1",type:"remove",field:"items",value:"item.id !== itemId"}]},{id:"a3",name:"clearCart",params:[],reducerSteps:[{id:"s1",type:"set",field:"items",value:"[]"},{id:"s2",type:"set",field:"total",value:"0"}]}],selectors:[{id:"sel1",name:"selectCartItems",expression:"state.cart.items",dependencies:["items"]},{id:"sel2",name:"selectCartCount",expression:"state.cart.items.length",dependencies:["items"],memoized:!0},{id:"sel3",name:"selectCartTotal",expression:"state.cart.total",dependencies:["total"]}],computed:[{id:"c1",name:"itemCount",expression:"items.length",dependencies:["items"]}]}],middleware:[{type:"immer",enabled:!0},{type:"devtools",enabled:!0},{type:"persist",enabled:!0}],persist:{enabled:!0,key:"app-store",storage:"localStorage",whitelist:["auth.token","cart.items"],version:1},devtools:{enabled:!0,name:"AppStore",trace:!0}},Te=[{id:"tpl-auth",name:"Authentication",description:"User authentication with token",icon:"🔐",store:{slices:[{id:"auth",name:"auth",state:[{id:"user",name:"user",type:"object",nullable:!0},{id:"token",name:"token",type:"string",nullable:!0},{id:"isAuthenticated",name:"isAuthenticated",type:"boolean",defaultValue:!1}],actions:[],selectors:[]}]}},{id:"tpl-crud",name:"CRUD Entity",description:"Standard entity with loading states",icon:"📦",store:{slices:[{id:"entity",name:"entity",state:[{id:"items",name:"items",type:"array",defaultValue:[]},{id:"selected",name:"selected",type:"object",nullable:!0},{id:"loading",name:"loading",type:"boolean",defaultValue:!1},{id:"error",name:"error",type:"string",nullable:!0}],actions:[],selectors:[]}]}},{id:"tpl-ui",name:"UI State",description:"Theme, sidebar, modal states",icon:"🎨",store:{slices:[{id:"ui",name:"ui",state:[{id:"theme",name:"theme",type:"enum",defaultValue:"light"},{id:"sidebarOpen",name:"sidebarOpen",type:"boolean",defaultValue:!0},{id:"activeModal",name:"activeModal",type:"string",nullable:!0}],actions:[],selectors:[]}]}}],Q={string:"📝",number:"🔢",boolean:"✓",array:"📋",object:"{}",date:"📅",enum:"📊",custom:"⚙️"},ee=a=>{const f=["import { create } from 'zustand'"];a.middleware?.some(n=>n.type==="devtools"&&n.enabled)&&f.push("import { devtools } from 'zustand/middleware'"),a.middleware?.some(n=>n.type==="persist"&&n.enabled)&&f.push("import { persist } from 'zustand/middleware'"),a.middleware?.some(n=>n.type==="immer"&&n.enabled)&&f.push("import { immer } from 'zustand/middleware/immer'");const v=[];a.slices.forEach(n=>{v.push(`interface ${te(n.name)}State {`),n.state.forEach(c=>{const w=re(c.type,c.nullable);v.push(` ${c.name}: ${w};`)}),v.push("}"),v.push("")}),v.push("interface Actions {"),a.slices.forEach(n=>{n.actions.forEach(c=>{const w=c.params.map(k=>`${k.name}: ${re(k.type)}`).join(", "),B=c.async?"Promise<void>":"void";v.push(` ${c.name}: (${w}) => ${B};`)})}),v.push("}");const y=a.slices.map(n=>`${te(n.name)}State`).join(" & ");v.push(""),v.push(`type StoreState = ${y} & Actions;`);const T=[];a.slices.forEach(n=>{n.state.forEach(c=>{const w=c.defaultValue!==void 0?JSON.stringify(c.defaultValue):c.nullable?"null":le(c.type);T.push(` ${c.name}: ${w},`)})});const b=[];a.slices.forEach(n=>{n.actions.forEach(c=>{const w=c.params.map(k=>k.name).join(", "),B=c.async?"async ":"";b.push(` ${c.name}: ${B}(${w}) => {`),c.async?(b.push(" set({ loading: true, error: null });"),b.push(" try {"),b.push(" // TODO: API call"),b.push(` // const response = await api.${c.name}(${w});`),c.reducerSteps.forEach(k=>{k.type==="set"&&b.push(` set({ ${k.field}: ${k.value} });`)}),b.push(" } catch (error) {"),b.push(" set({ error: error.message, loading: false });"),b.push(" }")):(b.push(" set((state) => {"),c.reducerSteps.forEach(k=>{k.type==="set"?b.push(` state.${k.field} = ${k.value};`):k.type==="push"?b.push(` state.${k.field}.push(${k.value});`):k.type==="reset"&&b.push(` state.${k.field} = null;`)}),b.push(" });")),b.push(" },")})});let j="",s="";if(a.middleware?.some(n=>n.type==="immer"&&n.enabled)&&(j+="immer(",s=")"+s),a.middleware?.some(n=>n.type==="devtools"&&n.enabled)&&(j+="devtools(",s=`, { name: '${a.devtools?.name||a.name}' })`+s),a.persist?.enabled){j+="persist(";const n=[`name: '${a.persist.key}'`];a.persist.whitelist&&n.push(`partialize: (state) => ({ ${a.persist.whitelist.map(c=>c.split(".").pop()).join(", ")} })`),s=`, { ${n.join(", ")} })`+s}return`${f.join(`
|
|
12
|
+
`)}
|
|
13
|
+
|
|
14
|
+
// Types
|
|
15
|
+
${v.join(`
|
|
16
|
+
`)}
|
|
17
|
+
|
|
18
|
+
// Store
|
|
19
|
+
export const use${a.name} = create<StoreState>()(
|
|
20
|
+
${j}(set, get) => ({
|
|
21
|
+
// Initial State
|
|
22
|
+
${T.join(`
|
|
23
|
+
`)}
|
|
24
|
+
|
|
25
|
+
// Actions
|
|
26
|
+
${b.join(`
|
|
27
|
+
`)}
|
|
28
|
+
})${s}
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
// Selectors
|
|
32
|
+
${a.slices.flatMap(n=>n.selectors.map(c=>`export const ${c.name} = (state: StoreState) => ${c.expression.replace("state.","state.")};`)).join(`
|
|
33
|
+
`)}
|
|
34
|
+
`},te=a=>a.charAt(0).toUpperCase()+a.slice(1),re=(a,f)=>{const v={string:"string",number:"number",boolean:"boolean",array:"unknown[]",object:"Record<string, unknown>",date:"Date",enum:"string",custom:"unknown"}[a];return f?`${v} | null`:v},le=a=>({string:"''",number:"0",boolean:"false",array:"[]",object:"{}",date:"new Date()",enum:"''",custom:"null"})[a],ce=({store:a=Ce,templates:f=Te,onStoreChange:v,onExport:y,onSave:T,tutorial:b,className:j,style:s,"data-testid":C})=>{const[n,c]=h.useState(a),[w,B]=h.useState("slices"),[k,L]=h.useState(n.slices[0]?.id||null),[D,R]=h.useState(null),[z,q]=h.useState("zustand"),[F,O]=h.useState(!1),[u,N]=h.useState(null),[I,V]=h.useState(""),[E,U]=h.useState("string"),M=h.useMemo(()=>n.slices.find(o=>o.id===k),[n.slices,k]),W=h.useCallback(o=>{const d={...n,...o};c(d),v?.(d)},[n,v]),g=()=>{const o={id:`slice-${Date.now()}`,name:"newSlice",state:[],actions:[],selectors:[]};W({slices:[...n.slices,o]}),L(o.id)},t=()=>{if(!M||!I)return;const o={id:`field-${Date.now()}`,name:I,type:E,defaultValue:le(E).replace(/'/g,"")},d=n.slices.map(P=>P.id===M.id?{...P,state:[...P.state,o]}:P);W({slices:d}),V("")},r=()=>{if(!M)return;const o={id:`action-${Date.now()}`,name:"newAction",params:[],reducerSteps:[]},d=n.slices.map(P=>P.id===M.id?{...P,actions:[...P.actions,o]}:P);W({slices:d}),R(o.id)},m=h.useCallback(()=>{let o="";z==="zustand"?o=ee(n):o=`// Export for ${z} coming soon...
|
|
35
|
+
// Store: ${n.name}`,y?.(o,z)},[n,z,y]),x=h.useMemo(()=>z==="zustand"?ee(n):`// ${z} export coming soon...`,[n,z]),i={bg:"var(--bg-elevated, #1e1e1e)",cardBg:"var(--bg-elevated, #252525)",border:"var(--bg-tertiary, #333)",text:"var(--text-primary, #e0e0e0)",textMuted:"var(--text-muted, #888)",accent:"var(--color-primary, #3b82f6)"};return e.jsxs("div",{className:`nice-state-designer ${j||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:i.bg,color:i.text,fontFamily:"system-ui, sans-serif",...s},"data-testid":C,children:[e.jsxs("div",{style:{padding:"16px 20px",borderBottom:`1px solid ${i.border}`,display:"flex",alignItems:"center",gap:16},children:[e.jsx("h3",{style:{margin:0,fontSize:18},children:"🗂️ State Designer"}),e.jsx("div",{style:{display:"flex",alignItems:"center",gap:8},children:e.jsx("input",{type:"text",value:n.name,onChange:o=>W({name:o.target.value}),style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.cardBg,color:i.text,fontSize:14,fontWeight:600}})}),e.jsxs("div",{style:{marginLeft:"auto",display:"flex",gap:8,alignItems:"center"},children:[e.jsx(H.wl,{steps:H.xl(b,$e)}),e.jsx("button",{onClick:()=>O(!0),style:{padding:"8px 16px",borderRadius:6,border:`1px solid ${i.border}`,background:"transparent",color:i.text,cursor:"pointer",fontSize:13},children:"📋 Templates"}),e.jsx("button",{onClick:()=>T?.(n),style:{padding:"8px 16px",borderRadius:6,border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13,fontWeight:500},children:"💾 Save"})]})]}),e.jsx("div",{style:{display:"flex",borderBottom:`1px solid ${i.border}`,padding:"0 20px"},children:["slices","actions","selectors","settings","preview"].map(o=>e.jsxs("button",{onClick:()=>B(o),style:{padding:"12px 20px",border:"none",background:"transparent",color:w===o?i.text:i.textMuted,cursor:"pointer",fontSize:13,fontWeight:w===o?600:400,borderBottom:w===o?`2px solid ${i.accent}`:"2px solid transparent",marginBottom:-1},children:[o==="slices"&&"📦 Slices",o==="actions"&&"⚡ Actions",o==="selectors"&&"🎯 Selectors",o==="settings"&&"⚙️ Settings",o==="preview"&&"👁️ Preview"]},o))}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[(w==="slices"||w==="actions"||w==="selectors")&&e.jsxs("div",{style:{width:200,borderRight:`1px solid ${i.border}`,padding:12,display:"flex",flexDirection:"column",gap:8},children:[e.jsx("div",{style:{fontSize:11,color:i.textMuted,marginBottom:4},children:"SLICES"}),n.slices.map(o=>e.jsxs("button",{onClick:()=>L(o.id),style:{padding:"10px 12px",borderRadius:6,border:"none",background:k===o.id?i.accent+"30":i.cardBg,color:i.text,cursor:"pointer",textAlign:"left",fontSize:13},children:["📦 ",o.name,e.jsxs("div",{style:{fontSize:10,color:i.textMuted},children:[o.state.length," fields • ",o.actions.length," actions"]})]},o.id)),e.jsx("button",{onClick:g,style:{padding:"10px 12px",borderRadius:6,border:`1px dashed ${i.border}`,background:"transparent",color:i.textMuted,cursor:"pointer",fontSize:13},children:"+ Add Slice"})]}),e.jsxs("div",{style:{flex:1,overflow:"auto",padding:20},children:[w==="slices"&&M&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:20},children:[e.jsxs("h4",{style:{margin:0},children:["📦 ",M.name]}),e.jsx("input",{type:"text",value:M.name,onChange:o=>{const d=n.slices.map(P=>P.id===M.id?{...P,name:o.target.value}:P);W({slices:d})},style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.cardBg,color:i.text,fontSize:13}})]}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsxs("div",{style:{fontSize:12,color:i.textMuted,marginBottom:12},children:["STATE FIELDS (",M.state.length,")"]}),e.jsxs("div",{style:{border:`1px solid ${i.border}`,borderRadius:8,overflow:"hidden"},children:[M.state.map(o=>e.jsxs("div",{style:{padding:"12px 16px",borderBottom:`1px solid ${i.border}`,display:"flex",alignItems:"center",gap:12},children:[e.jsx("span",{style:{fontSize:16},children:Q[o.type]}),e.jsxs("div",{style:{flex:1},children:[e.jsx("div",{style:{fontWeight:500,fontFamily:"monospace"},children:o.name}),e.jsxs("div",{style:{fontSize:11,color:i.textMuted},children:[o.type,o.nullable&&"?",o.defaultValue!==void 0&&` = ${JSON.stringify(o.defaultValue)}`]})]}),e.jsx("button",{onClick:()=>{const d=n.slices.map(P=>P.id===M.id?{...P,state:P.state.filter(p=>p.id!==o.id)}:P);W({slices:d})},style:{padding:4,border:"none",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:14},children:"🗑️"})]},o.id)),e.jsxs("div",{style:{padding:"12px 16px",display:"flex",alignItems:"center",gap:8,background:i.cardBg},children:[e.jsx("input",{type:"text",placeholder:"fieldName",value:I,onChange:o=>V(o.target.value),style:{flex:1,padding:"8px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.bg,color:i.text,fontSize:13,fontFamily:"monospace"}}),e.jsx("select",{value:E,onChange:o=>U(o.target.value),style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.bg,color:i.text,fontSize:13},children:Object.keys(Q).map(o=>e.jsx("option",{value:o,children:o},o))}),e.jsx("button",{onClick:t,disabled:!I,style:{padding:"8px 16px",borderRadius:4,border:"none",background:I?i.accent:i.border,color:"var(--bg-primary, #fff)",cursor:I?"pointer":"not-allowed",fontSize:13},children:"+ Add"})]})]})]})]}),w==="actions"&&M&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:20},children:[e.jsxs("h4",{style:{margin:0},children:["⚡ Actions for ",M.name]}),e.jsx("button",{onClick:r,style:{padding:"6px 12px",borderRadius:4,border:"none",background:i.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"+ Add Action"})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12},children:M.actions.map(o=>e.jsxs("div",{style:{padding:16,background:i.cardBg,borderRadius:8,border:`1px solid ${D===o.id?i.accent:i.border}`,cursor:"pointer"},onClick:()=>R(o.id),children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontWeight:600,fontFamily:"monospace"},children:o.name}),o.async&&e.jsx("span",{style:{padding:"2px 6px",background:"var(--nice-accent-tint-12, #8b5cf620)",color:"var(--color-accent, #8b5cf6)",borderRadius:4,fontSize:10},children:"async"}),e.jsxs("span",{style:{fontSize:11,color:i.textMuted},children:["(",o.params.map(d=>`${d.name}: ${d.type}`).join(", "),")"]})]}),o.description&&e.jsx("div",{style:{fontSize:12,color:i.textMuted,marginTop:4},children:o.description}),e.jsxs("div",{style:{fontSize:11,color:i.textMuted,marginTop:8},children:[o.reducerSteps.length," reducer steps"]})]},o.id))})]}),w==="selectors"&&M&&e.jsxs("div",{children:[e.jsx("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:20},children:e.jsxs("h4",{style:{margin:0},children:["🎯 Selectors for ",M.name]})}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12},children:M.selectors.map(o=>e.jsxs("div",{style:{padding:16,background:i.cardBg,borderRadius:8,border:`1px solid ${i.border}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontWeight:600,fontFamily:"monospace"},children:o.name}),o.memoized&&e.jsx("span",{style:{padding:"2px 6px",background:"var(--nice-success-tint-12, #22c55e20)",color:"var(--color-success, #22c55e)",borderRadius:4,fontSize:10},children:"memoized"})]}),e.jsx("code",{style:{display:"block",marginTop:8,padding:8,background:i.bg,borderRadius:4,fontSize:12,color:"var(--color-warning, #f59e0b)"},children:o.expression})]},o.id))})]}),w==="settings"&&e.jsxs("div",{style:{maxWidth:600},children:[e.jsx("h4",{style:{marginTop:0},children:"Middleware"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12,marginBottom:24},children:n.middleware?.map(o=>e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:12,padding:12,background:i.cardBg,borderRadius:8,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:o.enabled,onChange:d=>{const P=n.middleware?.map(p=>p.type===o.type?{...p,enabled:d.target.checked}:p);W({middleware:P})}}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:500,textTransform:"capitalize"},children:o.type}),e.jsxs("div",{style:{fontSize:11,color:i.textMuted},children:[o.type==="immer"&&"Enable immutable state updates",o.type==="devtools"&&"Redux DevTools integration",o.type==="persist"&&"Persist state to storage"]})]})]},o.type))}),n.persist?.enabled&&e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Persistence"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12,marginBottom:24},children:[e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:12,color:i.textMuted,marginBottom:4},children:"Storage Key"}),e.jsx("input",{type:"text",value:n.persist.key,onChange:o=>W({persist:{...n.persist,key:o.target.value}}),style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.cardBg,color:i.text,fontSize:13,width:"100%",boxSizing:"border-box"}})]}),e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:12,color:i.textMuted,marginBottom:4},children:"Storage Type"}),e.jsxs("select",{value:n.persist.storage,onChange:o=>W({persist:{...n.persist,storage:o.target.value}}),style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.cardBg,color:i.text,fontSize:13},children:[e.jsx("option",{value:"localStorage",children:"localStorage"}),e.jsx("option",{value:"sessionStorage",children:"sessionStorage"}),e.jsx("option",{value:"indexedDB",children:"indexedDB"})]})]})]})]})]}),w==="preview"&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:16},children:[e.jsxs("select",{value:z,onChange:o=>q(o.target.value),style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${i.border}`,background:i.cardBg,color:i.text,fontSize:13},children:[e.jsx("option",{value:"zustand",children:"Zustand"}),e.jsx("option",{value:"redux-toolkit",children:"Redux Toolkit"}),e.jsx("option",{value:"jotai",children:"Jotai"}),e.jsx("option",{value:"recoil",children:"Recoil"}),e.jsx("option",{value:"mobx",children:"MobX"})]}),e.jsx("button",{onClick:m,style:{padding:"8px 16px",borderRadius:4,border:"none",background:i.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13},children:"📤 Export"}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(x),style:{padding:"8px 16px",borderRadius:4,border:`1px solid ${i.border}`,background:"transparent",color:i.text,cursor:"pointer",fontSize:13},children:"📋 Copy"})]}),e.jsx("pre",{style:{flex:1,padding:16,background:i.cardBg,borderRadius:8,overflow:"auto",fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace",margin:0,whiteSpace:"pre-wrap"},children:x})]})]})]}),F&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},onClick:()=>O(!1),children:e.jsxs("div",{style:{background:i.cardBg,borderRadius:12,padding:24,width:500,maxHeight:"80vh",overflow:"auto"},onClick:o=>o.stopPropagation(),children:[e.jsx("h4",{style:{margin:"0 0 16px"},children:"📋 State Templates"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12},children:f.map(o=>e.jsx("button",{onClick:()=>{o.store.slices&&W({slices:[...n.slices,...o.store.slices]}),O(!1)},style:{padding:16,borderRadius:8,border:`1px solid ${i.border}`,background:i.bg,color:i.text,cursor:"pointer",textAlign:"left"},children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:24},children:o.icon}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:600},children:o.name}),e.jsx("div",{style:{fontSize:12,color:i.textMuted},children:o.description})]})]})},o.id))})]})})]})},ze=Object.freeze(Object.defineProperty({__proto__:null,NiceStateDesigner:ce},Symbol.toStringTag,{value:"Module"})),Re={id:"api-1",name:"UserAPI",description:"User management API client",baseUrl:"https://api.example.com/v1",version:"1.0.0",endpoints:[{id:"ep-1",name:"getUsers",description:"Get list of users",method:"GET",path:"/users",tags:["users"],queryParams:[{id:"p1",name:"page",type:"number",defaultValue:1},{id:"p2",name:"limit",type:"number",defaultValue:10},{id:"p3",name:"search",type:"string"}],responses:[{status:200,description:"Success",schema:{type:"array",items:{type:"object"}}},{status:401,description:"Unauthorized"}],cache:{enabled:!0,ttl:60,strategy:"stale-while-revalidate"}},{id:"ep-2",name:"getUserById",description:"Get single user by ID",method:"GET",path:"/users/{id}",tags:["users"],pathParams:[{id:"p1",name:"id",type:"string",required:!0}],responses:[{status:200,description:"Success"},{status:404,description:"Not found"}],cache:{enabled:!0,ttl:300,strategy:"cache-first"}},{id:"ep-3",name:"createUser",description:"Create new user",method:"POST",path:"/users",tags:["users"],body:{contentType:"application/json",schema:{type:"object",properties:{name:{type:"string"},email:{type:"string"},role:{type:"string"}},required:["name","email"]}},responses:[{status:201,description:"Created"},{status:400,description:"Validation error"}],retry:{enabled:!0,maxAttempts:3,backoff:"exponential",retryOn:[500,502,503]}},{id:"ep-4",name:"updateUser",description:"Update user by ID",method:"PUT",path:"/users/{id}",tags:["users"],pathParams:[{id:"p1",name:"id",type:"string",required:!0}],body:{contentType:"application/json",schema:{type:"object",properties:{name:{type:"string"},email:{type:"string"}}}},responses:[{status:200,description:"Updated"},{status:404,description:"Not found"}]},{id:"ep-5",name:"deleteUser",description:"Delete user by ID",method:"DELETE",path:"/users/{id}",tags:["users"],pathParams:[{id:"p1",name:"id",type:"string",required:!0}],responses:[{status:204,description:"Deleted"},{status:404,description:"Not found"}]}],auth:{type:"bearer",tokenSource:"state.auth.token",headerName:"Authorization",prefix:"Bearer"},globalHeaders:{"Content-Type":"application/json",Accept:"application/json"},errorHandling:{globalErrorHandler:!0,retryOnNetworkError:!0,transformError:!0},cacheConfig:{enabled:!0,storage:"memory",defaultTTL:300}},K={GET:"var(--color-success, #22c55e)",POST:"var(--color-primary, #3b82f6)",PUT:"var(--color-warning, #f59e0b)",PATCH:"var(--color-accent, #8b5cf6)",DELETE:"var(--color-error, #ef4444)",HEAD:"var(--text-muted, #6b7280)",OPTIONS:"var(--text-muted, #6b7280)"},Ne=a=>{const f=["import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';"],v=[];a.endpoints.forEach(s=>{s.body?.schema&&v.push(`export interface ${Y(s.name)}Request ${pe(s.body.schema)}`),v.push(`export interface ${Y(s.name)}Response {
|
|
36
|
+
// TODO: Define response type based on schema
|
|
37
|
+
data: unknown;
|
|
38
|
+
}`)});const y=[];a.endpoints.forEach(s=>{const C=s.pathParams?.map(D=>`${D.name}: ${D.type}`).join(", ")||"",n=s.queryParams?.length?`params?: { ${s.queryParams.map(D=>`${D.name}${D.required?"":"?"}: ${D.type}`).join("; ")} }`:"",c=s.body?`data: ${Y(s.name)}Request`:"",w=[C,n,c].filter(Boolean).join(", ");let B=`'${s.path}'`;s.pathParams?.forEach(D=>{B=B.replace(`{${D.name}}`,`\${${D.name}}`)}),s.pathParams?.length&&(B="`"+B.slice(1,-1)+"`");const k=s.cache?.enabled?`
|
|
39
|
+
// Cache: ${s.cache.strategy}, TTL: ${s.cache.ttl}s`:"",L=s.retry?.enabled?`
|
|
40
|
+
// Retry: ${s.retry.maxAttempts} attempts, ${s.retry.backoff} backoff`:"";y.push(`
|
|
41
|
+
/**
|
|
42
|
+
* ${s.description||s.name}${k}${L}
|
|
43
|
+
*/
|
|
44
|
+
async ${s.name}(${w}): Promise<${Y(s.name)}Response> {
|
|
45
|
+
const response = await this.client.${s.method.toLowerCase()}<${Y(s.name)}Response>(
|
|
46
|
+
${B}${s.queryParams?.length?", { params }":""}${s.body?", data":""}
|
|
47
|
+
);
|
|
48
|
+
return response.data;
|
|
49
|
+
}`)});let T="";a.auth?.type==="bearer"&&(T=`
|
|
50
|
+
// Auth interceptor
|
|
51
|
+
this.client.interceptors.request.use((config) => {
|
|
52
|
+
const token = ${a.auth.tokenSource||"getToken()"};
|
|
53
|
+
if (token) {
|
|
54
|
+
config.headers['${a.auth.headerName||"Authorization"}'] = '${a.auth.prefix||"Bearer"} ' + token;
|
|
55
|
+
}
|
|
56
|
+
return config;
|
|
57
|
+
});`);const b=a.errorHandling?.globalErrorHandler?`
|
|
58
|
+
// Error interceptor
|
|
59
|
+
this.client.interceptors.response.use(
|
|
60
|
+
(response) => response,
|
|
61
|
+
(error) => {
|
|
62
|
+
// Transform and handle errors
|
|
63
|
+
const message = error.response?.data?.message || error.message;
|
|
64
|
+
console.error('[API Error]', message);
|
|
65
|
+
return Promise.reject(error);
|
|
66
|
+
}
|
|
67
|
+
);`:"";return`${f.join(`
|
|
68
|
+
`)}
|
|
69
|
+
|
|
70
|
+
// Types
|
|
71
|
+
${v.join(`
|
|
72
|
+
|
|
73
|
+
`)}
|
|
74
|
+
|
|
75
|
+
// API Client
|
|
76
|
+
export class ${a.name} {
|
|
77
|
+
private client: AxiosInstance;
|
|
78
|
+
|
|
79
|
+
constructor(baseURL: string = '${a.baseUrl}') {
|
|
80
|
+
this.client = axios.create({
|
|
81
|
+
baseURL,
|
|
82
|
+
headers: ${JSON.stringify(a.globalHeaders||{},null,8).replace(/\n/g,`
|
|
83
|
+
`)},
|
|
84
|
+
});
|
|
85
|
+
${T}${b}
|
|
86
|
+
}
|
|
87
|
+
${y.join("")}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Default instance
|
|
91
|
+
export const ${a.name.charAt(0).toLowerCase()+a.name.slice(1)} = new ${a.name}();
|
|
92
|
+
`},Y=a=>a.charAt(0).toUpperCase()+a.slice(1),pe=a=>a.type==="object"&&a.properties?`{
|
|
93
|
+
${Object.entries(a.properties).map(([v,y])=>{const T=a.required?.includes(v)?"":"?";return` ${v}${T}: ${ue(y)};`}).join(`
|
|
94
|
+
`)}
|
|
95
|
+
}`:"{}",ue=a=>{switch(a.type){case"string":return"string";case"number":return"number";case"boolean":return"boolean";case"array":return a.items?`${ue(a.items)}[]`:"unknown[]";case"object":return a.properties?pe(a):"Record<string, unknown>";default:return"unknown"}},ge=({flow:a=Re,dataSources:f=[],onFlowChange:v,onExport:y,onTest:T,onSave:b,className:j,style:s,"data-testid":C})=>{const[n,c]=h.useState(a),[w,B]=h.useState("endpoints"),[k,L]=h.useState(n.endpoints[0]?.id||null),[D,R]=h.useState(!1),[z,q]=h.useState(null),[F,O]=h.useState(!1),u=h.useMemo(()=>n.endpoints.find(t=>t.id===k),[n.endpoints,k]),N=h.useCallback(t=>{const r={...n,...t};c(r),v?.(r)},[n,v]),I=h.useCallback((t,r)=>{const m=n.endpoints.map(x=>x.id===t?{...x,...r}:x);N({endpoints:m})},[n.endpoints,N]),V=t=>{const r={id:`ep-${Date.now()}`,name:"newEndpoint",method:t,path:"/new-path",responses:[{status:200,description:"Success"}]};N({endpoints:[...n.endpoints,r]}),L(r.id),R(!1)},E=t=>{N({endpoints:n.endpoints.filter(r=>r.id!==t)}),k===t&&L(n.endpoints[0]?.id||null)},U=async()=>{u&&(O(!0),q(null),await new Promise(t=>setTimeout(t,1e3)),q({status:200,body:{message:"Mock response",timestamp:new Date().toISOString()}}),O(!1),T?.(u.id))},M=h.useMemo(()=>Ne(n),[n]),W=()=>{y?.(M)};h.useMemo(()=>{const t=new Set;return n.endpoints.forEach(r=>r.tags?.forEach(m=>t.add(m))),Array.from(t)},[n.endpoints]);const g={bg:"var(--bg-elevated, #1e1e1e)",cardBg:"var(--bg-elevated, #252525)",border:"var(--bg-tertiary, #333)",text:"var(--text-primary, #e0e0e0)",textMuted:"var(--text-muted, #888)",accent:"var(--color-primary, #3b82f6)"};return e.jsxs("div",{className:`nice-api-flow ${j||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:g.bg,color:g.text,fontFamily:"system-ui, sans-serif",...s},"data-testid":C,children:[e.jsxs("div",{style:{padding:"16px 20px",borderBottom:`1px solid ${g.border}`,display:"flex",alignItems:"center",gap:16},children:[e.jsx("h3",{style:{margin:0,fontSize:18},children:"🔌 API Flow"}),e.jsx("input",{type:"text",value:n.name,onChange:t=>N({name:t.target.value}),style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:14,fontWeight:600}}),e.jsx("input",{type:"text",value:n.baseUrl,onChange:t=>N({baseUrl:t.target.value}),placeholder:"Base URL",style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,width:300}}),e.jsx("div",{style:{marginLeft:"auto",display:"flex",gap:8},children:e.jsx("button",{onClick:()=>b?.(n),style:{padding:"8px 16px",borderRadius:6,border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13,fontWeight:500},children:"💾 Save"})})]}),e.jsx("div",{style:{display:"flex",borderBottom:`1px solid ${g.border}`,padding:"0 20px"},children:["endpoints","auth","settings","test","preview"].map(t=>e.jsxs("button",{onClick:()=>B(t),style:{padding:"12px 20px",border:"none",background:"transparent",color:w===t?g.text:g.textMuted,cursor:"pointer",fontSize:13,fontWeight:w===t?600:400,borderBottom:w===t?`2px solid ${g.accent}`:"2px solid transparent",marginBottom:-1},children:[t==="endpoints"&&"🔗 Endpoints",t==="auth"&&"🔐 Auth",t==="settings"&&"⚙️ Settings",t==="test"&&"🧪 Test",t==="preview"&&"👁️ Preview"]},t))}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[w==="endpoints"&&e.jsxs("div",{style:{width:280,borderRight:`1px solid ${g.border}`,padding:12,display:"flex",flexDirection:"column",gap:4,overflow:"auto"},children:[e.jsxs("div",{style:{fontSize:11,color:g.textMuted,marginBottom:8},children:["ENDPOINTS (",n.endpoints.length,")"]}),n.endpoints.map(t=>e.jsxs("button",{onClick:()=>L(t.id),style:{padding:"10px 12px",borderRadius:6,border:"none",background:k===t.id?g.accent+"30":g.cardBg,color:g.text,cursor:"pointer",textAlign:"left",display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{padding:"2px 6px",borderRadius:4,background:K[t.method]+"30",color:K[t.method],fontSize:10,fontWeight:600},children:t.method}),e.jsxs("div",{style:{flex:1,overflow:"hidden"},children:[e.jsx("div",{style:{fontFamily:"monospace",fontSize:12},children:t.name}),e.jsx("div",{style:{fontSize:10,color:g.textMuted,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.path})]})]},t.id)),e.jsx("button",{onClick:()=>R(!0),style:{padding:"10px 12px",borderRadius:6,border:`1px dashed ${g.border}`,background:"transparent",color:g.textMuted,cursor:"pointer",fontSize:13,marginTop:8},children:"+ Add Endpoint"})]}),e.jsxs("div",{style:{flex:1,overflow:"auto",padding:20},children:[w==="endpoints"&&u&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:24},children:[e.jsx("select",{value:u.method,onChange:t=>I(u.id,{method:t.target.value}),style:{padding:"8px 12px",borderRadius:6,border:"none",background:K[u.method]+"30",color:K[u.method],fontSize:13,fontWeight:600,cursor:"pointer"},children:["GET","POST","PUT","PATCH","DELETE"].map(t=>e.jsx("option",{value:t,children:t},t))}),e.jsx("input",{type:"text",value:u.path,onChange:t=>I(u.id,{path:t.target.value}),style:{flex:1,padding:"8px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:14,fontFamily:"monospace"}}),e.jsx("button",{onClick:()=>E(u.id),style:{padding:"8px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:13},children:"🗑️ Delete"})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 2fr",gap:16,marginBottom:24},children:[e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:12,color:g.textMuted,marginBottom:4},children:"Name"}),e.jsx("input",{type:"text",value:u.name,onChange:t=>I(u.id,{name:t.target.value}),style:{width:"100%",padding:"8px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,fontFamily:"monospace",boxSizing:"border-box"}})]}),e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:12,color:g.textMuted,marginBottom:4},children:"Description"}),e.jsx("input",{type:"text",value:u.description||"",onChange:t=>I(u.id,{description:t.target.value}),style:{width:"100%",padding:"8px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,boxSizing:"border-box"}})]})]}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsx("h4",{style:{margin:"0 0 12px",display:"flex",alignItems:"center",gap:8},children:"📋 Parameters"}),u.pathParams&&u.pathParams.length>0&&e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("div",{style:{fontSize:11,color:g.textMuted,marginBottom:8},children:"PATH PARAMETERS"}),u.pathParams.map(t=>e.jsxs("div",{style:{padding:12,background:g.cardBg,borderRadius:6,marginBottom:8,display:"flex",gap:12,alignItems:"center"},children:[e.jsx("code",{style:{fontWeight:600},children:t.name}),e.jsx("span",{style:{color:g.textMuted,fontSize:12},children:t.type}),t.required&&e.jsx("span",{style:{color:"var(--color-error, #ef4444)",fontSize:10},children:"required"})]},t.id))]}),u.queryParams&&u.queryParams.length>0&&e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("div",{style:{fontSize:11,color:g.textMuted,marginBottom:8},children:"QUERY PARAMETERS"}),u.queryParams.map(t=>e.jsxs("div",{style:{padding:12,background:g.cardBg,borderRadius:6,marginBottom:8,display:"flex",gap:12,alignItems:"center"},children:[e.jsx("code",{style:{fontWeight:600},children:t.name}),e.jsx("span",{style:{color:g.textMuted,fontSize:12},children:t.type}),t.defaultValue!==void 0&&e.jsxs("span",{style:{color:"var(--color-warning, #f59e0b)",fontSize:11},children:["= ",JSON.stringify(t.defaultValue)]})]},t.id))]}),u.body&&e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("div",{style:{fontSize:11,color:g.textMuted,marginBottom:8},children:"REQUEST BODY"}),e.jsxs("div",{style:{padding:12,background:g.cardBg,borderRadius:6},children:[e.jsxs("div",{style:{fontSize:12,marginBottom:8},children:["Content-Type: ",e.jsx("code",{children:u.body.contentType})]}),u.body.schema&&e.jsx("pre",{style:{margin:0,padding:12,background:g.bg,borderRadius:4,fontSize:11,overflow:"auto"},children:JSON.stringify(u.body.schema,null,2)})]})]})]}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsx("h4",{style:{margin:"0 0 12px"},children:"📤 Responses"}),e.jsx("div",{style:{display:"flex",gap:12,flexWrap:"wrap"},children:u.responses.map(t=>e.jsxs("div",{style:{padding:12,background:g.cardBg,borderRadius:6,minWidth:120},children:[e.jsx("div",{style:{fontSize:18,fontWeight:600,color:t.status<300?"var(--color-success, #22c55e)":t.status<400?"var(--color-warning, #f59e0b)":"var(--color-error, #ef4444)"},children:t.status}),e.jsx("div",{style:{fontSize:11,color:g.textMuted},children:t.description})]},t.status))})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16},children:[e.jsxs("div",{style:{padding:16,background:g.cardBg,borderRadius:8},children:[e.jsxs("h5",{style:{margin:"0 0 12px",display:"flex",alignItems:"center",gap:8},children:[e.jsx("input",{type:"checkbox",checked:u.cache?.enabled||!1,onChange:t=>I(u.id,{cache:{...u.cache,enabled:t.target.checked}})}),"📦 Cache"]}),u.cache?.enabled&&e.jsxs("div",{style:{fontSize:12,color:g.textMuted},children:["TTL: ",u.cache.ttl,"s • Strategy: ",u.cache.strategy]})]}),e.jsxs("div",{style:{padding:16,background:g.cardBg,borderRadius:8},children:[e.jsxs("h5",{style:{margin:"0 0 12px",display:"flex",alignItems:"center",gap:8},children:[e.jsx("input",{type:"checkbox",checked:u.retry?.enabled||!1,onChange:t=>I(u.id,{retry:{...u.retry,enabled:t.target.checked,maxAttempts:3,backoff:"exponential"}})}),"🔄 Retry"]}),u.retry?.enabled&&e.jsxs("div",{style:{fontSize:12,color:g.textMuted},children:["Max: ",u.retry.maxAttempts," • ",u.retry.backoff," ","backoff"]})]})]})]}),w==="auth"&&e.jsxs("div",{style:{maxWidth:500},children:[e.jsx("h4",{style:{marginTop:0},children:"🔐 Authentication"}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsx("label",{style:{display:"block",fontSize:12,color:g.textMuted,marginBottom:8},children:"Auth Type"}),e.jsxs("select",{value:n.auth?.type||"none",onChange:t=>N({auth:{...n.auth,type:t.target.value}}),style:{padding:"10px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,width:"100%"},children:[e.jsx("option",{value:"none",children:"None"}),e.jsx("option",{value:"bearer",children:"Bearer Token"}),e.jsx("option",{value:"basic",children:"Basic Auth"}),e.jsx("option",{value:"api-key",children:"API Key"}),e.jsx("option",{value:"oauth2",children:"OAuth 2.0"})]})]}),n.auth?.type==="bearer"&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("label",{style:{display:"block",fontSize:12,color:g.textMuted,marginBottom:8},children:"Token Source"}),e.jsx("input",{type:"text",value:n.auth.tokenSource||"",onChange:t=>N({auth:{...n.auth,tokenSource:t.target.value}}),placeholder:"state.auth.token",style:{width:"100%",padding:"10px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,fontFamily:"monospace",boxSizing:"border-box"}})]}),e.jsxs("div",{style:{marginBottom:16},children:[e.jsx("label",{style:{display:"block",fontSize:12,color:g.textMuted,marginBottom:8},children:"Header Name"}),e.jsx("input",{type:"text",value:n.auth.headerName||"Authorization",onChange:t=>N({auth:{...n.auth,headerName:t.target.value}}),style:{width:"100%",padding:"10px 12px",borderRadius:6,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,boxSizing:"border-box"}})]})]}),e.jsx("h4",{children:"🌐 Global Headers"}),e.jsx("div",{style:{padding:16,background:g.cardBg,borderRadius:8},children:Object.entries(n.globalHeaders||{}).map(([t,r])=>e.jsxs("div",{style:{display:"flex",gap:8,marginBottom:8,alignItems:"center"},children:[e.jsx("code",{style:{flex:1},children:t}),e.jsx("span",{style:{color:g.textMuted},children:":"}),e.jsx("code",{style:{flex:2,color:"var(--color-success, #22c55e)"},children:r})]},t))})]}),w==="settings"&&e.jsxs("div",{style:{maxWidth:500},children:[e.jsx("h4",{style:{marginTop:0},children:"⚙️ Global Settings"}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsx("h5",{children:"Error Handling"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:12,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:n.errorHandling?.globalErrorHandler||!1,onChange:t=>N({errorHandling:{...n.errorHandling,globalErrorHandler:t.target.checked}})}),"Global error handler"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:12,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:n.errorHandling?.retryOnNetworkError||!1,onChange:t=>N({errorHandling:{...n.errorHandling,retryOnNetworkError:t.target.checked}})}),"Retry on network errors"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:12,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:n.errorHandling?.transformError||!1,onChange:t=>N({errorHandling:{...n.errorHandling,transformError:t.target.checked}})}),"Transform error responses"]})]})]}),e.jsxs("div",{style:{marginBottom:24},children:[e.jsx("h5",{children:"Default Cache Settings"}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:12,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:n.cacheConfig?.enabled||!1,onChange:t=>N({cacheConfig:{...n.cacheConfig,enabled:t.target.checked}})}),"Enable caching"]}),n.cacheConfig?.enabled&&e.jsxs("div",{style:{display:"flex",gap:16},children:[e.jsxs("div",{children:[e.jsx("label",{style:{fontSize:12,color:g.textMuted},children:"Storage"}),e.jsxs("select",{value:n.cacheConfig.storage,onChange:t=>N({cacheConfig:{...n.cacheConfig,storage:t.target.value}}),style:{display:"block",marginTop:4,padding:"8px 12px",borderRadius:4,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13},children:[e.jsx("option",{value:"memory",children:"Memory"}),e.jsx("option",{value:"localStorage",children:"localStorage"}),e.jsx("option",{value:"sessionStorage",children:"sessionStorage"})]})]}),e.jsxs("div",{children:[e.jsx("label",{style:{fontSize:12,color:g.textMuted},children:"Default TTL (seconds)"}),e.jsx("input",{type:"number",value:n.cacheConfig.defaultTTL,onChange:t=>N({cacheConfig:{...n.cacheConfig,defaultTTL:parseInt(t.target.value)}}),style:{display:"block",marginTop:4,padding:"8px 12px",borderRadius:4,border:`1px solid ${g.border}`,background:g.cardBg,color:g.text,fontSize:13,width:100}})]})]})]})]}),w==="test"&&u&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:24},children:[e.jsx("span",{style:{padding:"4px 8px",borderRadius:4,background:K[u.method]+"30",color:K[u.method],fontSize:12,fontWeight:600},children:u.method}),e.jsxs("code",{style:{flex:1,fontSize:14},children:[n.baseUrl,u.path]}),e.jsx("button",{onClick:U,disabled:F,style:{padding:"10px 20px",borderRadius:6,border:"none",background:g.accent,color:"var(--bg-primary, #fff)",cursor:F?"not-allowed":"pointer",fontSize:13,fontWeight:500,opacity:F?.7:1},children:F?"⏳ Testing...":"🚀 Send Request"})]}),z&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:12},children:[e.jsx("span",{style:{fontSize:18,fontWeight:600,color:z.status<300?"var(--color-success, #22c55e)":"var(--color-error, #ef4444)"},children:z.status}),e.jsx("span",{style:{color:g.textMuted},children:z.status<300?"OK":"Error"})]}),e.jsx("pre",{style:{padding:16,background:g.cardBg,borderRadius:8,overflow:"auto",fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace",margin:0},children:JSON.stringify(z.body,null,2)})]})]}),w==="preview"&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",gap:12,marginBottom:16},children:[e.jsx("button",{onClick:W,style:{padding:"8px 16px",borderRadius:4,border:"none",background:g.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13},children:"📤 Export"}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(M),style:{padding:"8px 16px",borderRadius:4,border:`1px solid ${g.border}`,background:"transparent",color:g.text,cursor:"pointer",fontSize:13},children:"📋 Copy"})]}),e.jsx("pre",{style:{flex:1,padding:16,background:g.cardBg,borderRadius:8,overflow:"auto",fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace",margin:0,whiteSpace:"pre-wrap"},children:M})]})]})]}),D&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},onClick:()=>R(!1),children:e.jsxs("div",{style:{background:g.cardBg,borderRadius:12,padding:24,width:400},onClick:t=>t.stopPropagation(),children:[e.jsx("h4",{style:{margin:"0 0 16px"},children:"➕ Add Endpoint"}),e.jsx("p",{style:{color:g.textMuted,fontSize:13,marginBottom:16},children:"Select HTTP method for new endpoint:"}),e.jsx("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:["GET","POST","PUT","PATCH","DELETE"].map(t=>e.jsx("button",{onClick:()=>V(t),style:{padding:"12px 24px",borderRadius:6,border:"none",background:K[t]+"30",color:K[t],cursor:"pointer",fontSize:14,fontWeight:600},children:t},t))})]})})]})},Be=Object.freeze(Object.defineProperty({__proto__:null,NiceAPIFlow:ge},Symbol.toStringTag,{value:"Module"})),Ee={id:"map-1",name:"UserToContact",description:"Transform User API response to Contact entity",sourceSchema:{name:"UserResponse",type:"object",fields:[{id:"s1",name:"id",path:"id",type:"number"},{id:"s2",name:"firstName",path:"firstName",type:"string"},{id:"s3",name:"lastName",path:"lastName",type:"string"},{id:"s4",name:"email",path:"email",type:"string"},{id:"s5",name:"phone",path:"phone",type:"string",nullable:!0},{id:"s6",name:"address",path:"address",type:"object",children:[{id:"s6a",name:"street",path:"address.street",type:"string"},{id:"s6b",name:"city",path:"address.city",type:"string"},{id:"s6c",name:"zipCode",path:"address.zipCode",type:"string"},{id:"s6d",name:"country",path:"address.country",type:"string"}]},{id:"s7",name:"metadata",path:"metadata",type:"object",children:[{id:"s7a",name:"createdAt",path:"metadata.createdAt",type:"date"},{id:"s7b",name:"updatedAt",path:"metadata.updatedAt",type:"date"}]}]},targetSchema:{name:"Contact",type:"object",fields:[{id:"t1",name:"contactId",path:"contactId",type:"string"},{id:"t2",name:"fullName",path:"fullName",type:"string"},{id:"t3",name:"emailAddress",path:"emailAddress",type:"string"},{id:"t4",name:"phoneNumber",path:"phoneNumber",type:"string",nullable:!0},{id:"t5",name:"location",path:"location",type:"string"},{id:"t6",name:"fullAddress",path:"fullAddress",type:"string"},{id:"t7",name:"createdDate",path:"createdDate",type:"string"},{id:"t8",name:"isActive",path:"isActive",type:"boolean"}]},fieldMappings:[{id:"m1",sourceField:"id",targetField:"contactId",transform:"tr-1"},{id:"m2",sourceField:"firstName,lastName",targetField:"fullName",transform:"tr-2"},{id:"m3",sourceField:"email",targetField:"emailAddress"},{id:"m4",sourceField:"phone",targetField:"phoneNumber",defaultValue:""},{id:"m5",sourceField:"address.city,address.country",targetField:"location",transform:"tr-3"},{id:"m6",sourceField:"address",targetField:"fullAddress",transform:"tr-4"},{id:"m7",sourceField:"metadata.createdAt",targetField:"createdDate",transform:"tr-5"},{id:"m8",sourceField:"",targetField:"isActive",defaultValue:!0}],transformations:[{id:"tr-1",name:"ID to String",type:"format",config:{format:"USR-{value}"}},{id:"tr-2",name:"Full Name",type:"concat",config:{separator:" "}},{id:"tr-3",name:"Location",type:"concat",config:{separator:", "}},{id:"tr-4",name:"Full Address",type:"custom",config:{expression:"`${address.street}, ${address.zipCode} ${address.city}, ${address.country}`"}},{id:"tr-5",name:"Format Date",type:"format",config:{format:"YYYY-MM-DD"}}],validationRules:[{id:"v1",field:"emailAddress",type:"required",message:"Email is required"},{id:"v2",field:"emailAddress",type:"pattern",value:"^\\S+@\\S+\\.\\S+$",message:"Invalid email format"},{id:"v3",field:"contactId",type:"required",message:"Contact ID is required"}]},ne={string:"var(--color-success, #22c55e)",number:"var(--color-primary, #3b82f6)",boolean:"var(--color-warning, #f59e0b)",date:"var(--color-accent, #8b5cf6)",array:"var(--color-info, #06b6d4)",object:"var(--color-accent-pink, #ec4899)",any:"var(--text-muted, #6b7280)"},oe={string:"📝",number:"🔢",boolean:"✓",date:"📅",array:"📋",object:"{}",any:"❓"},ae={direct:"➡️",format:"📝",convert:"🔄",concat:"🔗",split:"✂️",calculate:"🧮",lookup:"🔍",conditional:"❓",custom:"⚙️"},Me=a=>{const f=ie(a.sourceSchema),v=ie(a.targetSchema),y=a.fieldMappings.map(b=>{const j=a.transformations.find(n=>n.id===b.transform),s=b.targetField;if(!b.sourceField)return` result.${s} = ${JSON.stringify(b.defaultValue)};`;const C=b.sourceField.split(",").map(n=>n.trim());if(j)switch(j.type){case"concat":return` result.${s} = [${C.map(n=>`source.${n}`).join(", ")}].filter(Boolean).join('${j.config.separator||" "}');`;case"format":if(C.length===1){const n=j.config.format||"{value}";return n.includes("{value}")?` result.${s} = '${n}'.replace('{value}', String(source.${C[0]}));`:` result.${s} = formatDate(source.${C[0]}, '${n}');`}break;case"custom":return` result.${s} = ${j.config.expression?.replace(/(\w+)\.(\w+)/g,"source.$1.$2")};`;case"convert":return` result.${s} = ${j.config.convertTo}(source.${C[0]});`}if(C.length===1){const n=b.defaultValue!==void 0?` ?? ${JSON.stringify(b.defaultValue)}`:"";return` result.${s} = source.${C[0]}${n};`}return` // TODO: Manual mapping for ${s}`}),T=a.validationRules.map(b=>{switch(b.type){case"required":return` if (!data.${b.field}) errors.push('${b.message||b.field+" is required"}');`;case"pattern":return` if (data.${b.field} && !/${b.value}/.test(data.${b.field})) errors.push('${b.message||"Invalid format"}');`;default:return` // ${b.type} validation for ${b.field}`}});return`/**
|
|
96
|
+
* ${a.name}
|
|
97
|
+
* ${a.description||""}
|
|
98
|
+
* Auto-generated by NiceDataMapper
|
|
99
|
+
*/
|
|
100
|
+
|
|
101
|
+
// Source Type
|
|
102
|
+
${f}
|
|
103
|
+
|
|
104
|
+
// Target Type
|
|
105
|
+
${v}
|
|
106
|
+
|
|
107
|
+
// Validation
|
|
108
|
+
export function validate${a.targetSchema.name}(data: ${a.targetSchema.name}): string[] {
|
|
109
|
+
const errors: string[] = [];
|
|
110
|
+
${T.join(`
|
|
111
|
+
`)}
|
|
112
|
+
return errors;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// Mapper
|
|
116
|
+
export function ${a.name.charAt(0).toLowerCase()+a.name.slice(1)}(source: ${a.sourceSchema.name}): ${a.targetSchema.name} {
|
|
117
|
+
const result = {} as ${a.targetSchema.name};
|
|
118
|
+
|
|
119
|
+
${y.join(`
|
|
120
|
+
`)}
|
|
121
|
+
|
|
122
|
+
return result;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Helper functions
|
|
126
|
+
function formatDate(date: string | Date, format: string): string {
|
|
127
|
+
const d = typeof date === 'string' ? new Date(date) : date;
|
|
128
|
+
const year = d.getFullYear();
|
|
129
|
+
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
130
|
+
const day = String(d.getDate()).padStart(2, '0');
|
|
131
|
+
return format
|
|
132
|
+
.replace('YYYY', String(year))
|
|
133
|
+
.replace('MM', month)
|
|
134
|
+
.replace('DD', day);
|
|
135
|
+
}
|
|
136
|
+
`},ie=(a,f)=>{const v=(T,b)=>{const j=" ".repeat(b),s=T.nullable?"?":"";if(T.type==="object"&&T.children){const n=T.children.map(c=>v(c,b+1)).join(`
|
|
137
|
+
`);return`${j}${T.name}${s}: {
|
|
138
|
+
${n}
|
|
139
|
+
${j}};`}const C={string:"string",number:"number",boolean:"boolean",date:"string | Date",array:"unknown[]",object:"Record<string, unknown>",any:"unknown"}[T.type];return`${j}${T.name}${s}: ${C};`},y=a.fields.map(T=>v(T,1)).join(`
|
|
140
|
+
`);return`interface ${a.name} {
|
|
141
|
+
${y}
|
|
142
|
+
}`},me=({mapping:a=Ee,sourceSchemas:f=[],targetSchemas:v=[],onMappingChange:y,onExport:T,onTest:b,onSave:j,className:s,style:C,"data-testid":n})=>{const[c,w]=h.useState(a),[B,k]=h.useState("mapping"),[L,D]=h.useState(null),[R,z]=h.useState(""),[q,F]=h.useState(""),[O,u]=h.useState(null),N=h.useCallback(r=>{const m={...c,...r};w(m),y?.(m)},[c,y]),I=(r,m="")=>{const x=[];return r.forEach(i=>{x.push(i),i.children&&x.push(...I(i.children,i.path+"."))}),x},V=h.useMemo(()=>I(c.sourceSchema.fields),[c.sourceSchema.fields]),E=h.useMemo(()=>I(c.targetSchema.fields),[c.targetSchema.fields]),U=(r,m)=>{const x={id:`mapping-${Date.now()}`,sourceField:r,targetField:m};N({fieldMappings:[...c.fieldMappings,x]})},M=r=>{N({fieldMappings:c.fieldMappings.filter(m=>m.id!==r)})},W=()=>{try{const r=JSON.parse(R),m={};c.fieldMappings.forEach(x=>{if(!x.sourceField){m[x.targetField]=x.defaultValue;return}const i=x.sourceField.split(",").map(P=>P.trim()),o=P=>P.split(".").reduce((p,_)=>p?.[_],r),d=c.transformations.find(P=>P.id===x.transform);if(d?.type==="concat")m[x.targetField]=i.map(o).filter(Boolean).join(d.config.separator||" ");else if(d?.type==="format"&&i.length===1){const P=o(i[0]);m[x.targetField]=(d.config.format||"{value}").replace("{value}",String(P))}else i.length===1&&(m[x.targetField]=o(i[0])??x.defaultValue)}),F(JSON.stringify(m,null,2)),b?.(m)}catch(r){F(`Error: ${r.message}`)}},g=h.useMemo(()=>Me(c),[c]),t={bg:"var(--bg-elevated, #1e1e1e)",cardBg:"var(--bg-elevated, #252525)",border:"var(--bg-tertiary, #333)",text:"var(--text-primary, #e0e0e0)",textMuted:"var(--text-muted, #888)",accent:"var(--color-primary, #3b82f6)"};return e.jsxs("div",{className:`nice-data-mapper ${s||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:t.bg,color:t.text,fontFamily:"system-ui, sans-serif",...C},"data-testid":n,children:[e.jsxs("div",{style:{padding:"16px 20px",borderBottom:`1px solid ${t.border}`,display:"flex",alignItems:"center",gap:16},children:[e.jsx("h3",{style:{margin:0,fontSize:18},children:"🔄 Data Mapper"}),e.jsx("input",{type:"text",value:c.name,onChange:r=>N({name:r.target.value}),style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.cardBg,color:t.text,fontSize:14,fontWeight:600}}),e.jsx("div",{style:{marginLeft:"auto",display:"flex",gap:8},children:e.jsx("button",{onClick:()=>j?.(c),style:{padding:"8px 16px",borderRadius:6,border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13,fontWeight:500},children:"💾 Save"})})]}),e.jsx("div",{style:{display:"flex",borderBottom:`1px solid ${t.border}`,padding:"0 20px"},children:["mapping","transforms","validation","test","preview"].map(r=>e.jsxs("button",{onClick:()=>k(r),style:{padding:"12px 20px",border:"none",background:"transparent",color:B===r?t.text:t.textMuted,cursor:"pointer",fontSize:13,fontWeight:B===r?600:400,borderBottom:B===r?`2px solid ${t.accent}`:"2px solid transparent",marginBottom:-1},children:[r==="mapping"&&"🔗 Mapping",r==="transforms"&&"⚡ Transforms",r==="validation"&&"✓ Validation",r==="test"&&"🧪 Test",r==="preview"&&"👁️ Preview"]},r))}),e.jsxs("div",{style:{flex:1,overflow:"auto",padding:20},children:[B==="mapping"&&e.jsxs("div",{style:{display:"flex",gap:24,height:"100%"},children:[e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",background:"var(--nice-success-tint-12, #22c55e20)",borderRadius:"8px 8px 0 0",fontSize:13,fontWeight:600},children:["📥 Source: ",c.sourceSchema.name]}),e.jsx("div",{style:{flex:1,border:`1px solid ${t.border}`,borderTop:"none",borderRadius:"0 0 8px 8px",overflow:"auto"},children:V.map(r=>{const m=r.path.split(".").length-1,x=c.fieldMappings.some(i=>i.sourceField.split(",").some(o=>o.trim()===r.path));return e.jsxs("div",{draggable:!0,onDragStart:()=>u(r.path),onDragEnd:()=>u(null),style:{padding:"10px 12px",paddingLeft:12+m*16,borderBottom:`1px solid ${t.border}`,display:"flex",alignItems:"center",gap:8,cursor:"grab",background:x?"var(--nice-success-tint-10, #22c55e10)":"transparent",opacity:r.type==="object"&&r.children?.7:1},children:[e.jsx("span",{style:{color:ne[r.type],fontSize:14},children:oe[r.type]}),e.jsx("span",{style:{fontFamily:"monospace",fontSize:12},children:r.name}),e.jsx("span",{style:{fontSize:10,color:t.textMuted},children:r.type}),x&&e.jsx("span",{style:{marginLeft:"auto",color:"var(--color-success, #22c55e)",fontSize:10},children:"✓"})]},r.id)})})]}),e.jsxs("div",{style:{width:300,display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",background:t.accent+"20",borderRadius:"8px 8px 0 0",fontSize:13,fontWeight:600},children:["🔗 Mappings (",c.fieldMappings.length,")"]}),e.jsx("div",{style:{flex:1,border:`1px solid ${t.border}`,borderTop:"none",borderRadius:"0 0 8px 8px",overflow:"auto",padding:8},children:c.fieldMappings.map(r=>{const m=c.transformations.find(x=>x.id===r.transform);return e.jsxs("div",{style:{padding:8,background:t.cardBg,borderRadius:6,marginBottom:8,fontSize:11},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[e.jsx("code",{style:{color:"var(--color-success, #22c55e)"},children:r.sourceField||"(default)"}),e.jsx("span",{style:{color:t.textMuted},children:"→"}),e.jsx("code",{style:{color:"var(--color-primary, #3b82f6)"},children:r.targetField}),e.jsx("button",{onClick:()=>M(r.id),style:{marginLeft:"auto",padding:2,border:"none",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:10},children:"✕"})]}),m&&e.jsxs("div",{style:{color:t.textMuted,display:"flex",alignItems:"center",gap:4},children:[ae[m.type]," ",m.name]}),r.defaultValue!==void 0&&e.jsxs("div",{style:{color:"var(--color-warning, #f59e0b)"},children:["Default: ",JSON.stringify(r.defaultValue)]})]},r.id)})})]}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",background:"var(--nice-primary-tint-12, #3b82f620)",borderRadius:"8px 8px 0 0",fontSize:13,fontWeight:600},children:["📤 Target: ",c.targetSchema.name]}),e.jsx("div",{style:{flex:1,border:`1px solid ${t.border}`,borderTop:"none",borderRadius:"0 0 8px 8px",overflow:"auto"},children:E.map(r=>{const m=r.path.split(".").length-1,x=c.fieldMappings.some(i=>i.targetField===r.path);return e.jsxs("div",{onDragOver:i=>i.preventDefault(),onDrop:()=>{O&&!x&&U(O,r.path)},style:{padding:"10px 12px",paddingLeft:12+m*16,borderBottom:`1px solid ${t.border}`,display:"flex",alignItems:"center",gap:8,background:O&&!x?t.accent+"10":x?"#3b82f610":"transparent",transition:"background 0.15s"},children:[e.jsx("span",{style:{color:ne[r.type],fontSize:14},children:oe[r.type]}),e.jsx("span",{style:{fontFamily:"monospace",fontSize:12},children:r.name}),e.jsx("span",{style:{fontSize:10,color:t.textMuted},children:r.type}),r.nullable&&e.jsx("span",{style:{fontSize:10,color:t.textMuted},children:"?"}),x&&e.jsx("span",{style:{marginLeft:"auto",color:"var(--color-primary, #3b82f6)",fontSize:10},children:"✓"})]},r.id)})})]})]}),B==="transforms"&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:20},children:[e.jsx("h4",{style:{margin:0},children:"⚡ Transformations"}),e.jsx("button",{onClick:()=>{const r={id:`tr-${Date.now()}`,name:"New Transform",type:"direct",config:{}};N({transformations:[...c.transformations,r]})},style:{padding:"6px 12px",borderRadius:4,border:"none",background:t.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"+ Add Transform"})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))",gap:16},children:c.transformations.map(r=>e.jsxs("div",{style:{padding:16,background:t.cardBg,borderRadius:8,border:`1px solid ${t.border}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,marginBottom:12},children:[e.jsx("span",{style:{fontSize:20},children:ae[r.type]}),e.jsx("input",{type:"text",value:r.name,onChange:m=>{const x=c.transformations.map(i=>i.id===r.id?{...i,name:m.target.value}:i);N({transformations:x})},style:{flex:1,padding:"6px 8px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:13,fontWeight:600}})]}),e.jsxs("div",{style:{marginBottom:12},children:[e.jsx("label",{style:{display:"block",fontSize:11,color:t.textMuted,marginBottom:4},children:"Type"}),e.jsxs("select",{value:r.type,onChange:m=>{const x=c.transformations.map(i=>i.id===r.id?{...i,type:m.target.value}:i);N({transformations:x})},style:{width:"100%",padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12},children:[e.jsx("option",{value:"direct",children:"Direct"}),e.jsx("option",{value:"format",children:"Format"}),e.jsx("option",{value:"convert",children:"Convert"}),e.jsx("option",{value:"concat",children:"Concatenate"}),e.jsx("option",{value:"split",children:"Split"}),e.jsx("option",{value:"calculate",children:"Calculate"}),e.jsx("option",{value:"lookup",children:"Lookup"}),e.jsx("option",{value:"conditional",children:"Conditional"}),e.jsx("option",{value:"custom",children:"Custom"})]})]}),(r.type==="format"||r.type==="concat")&&e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:11,color:t.textMuted,marginBottom:4},children:r.type==="format"?"Format Pattern":"Separator"}),e.jsx("input",{type:"text",value:r.type==="format"?r.config.format||"":r.config.separator||"",onChange:m=>{const x=c.transformations.map(i=>i.id===r.id?{...i,config:{...i.config,[r.type==="format"?"format":"separator"]:m.target.value}}:i);N({transformations:x})},placeholder:r.type==="format"?"{value} or YYYY-MM-DD":", ",style:{width:"100%",padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,fontFamily:"monospace",boxSizing:"border-box"}})]}),r.type==="custom"&&e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:11,color:t.textMuted,marginBottom:4},children:"Expression"}),e.jsx("textarea",{value:r.config.expression||"",onChange:m=>{const x=c.transformations.map(i=>i.id===r.id?{...i,config:{...i.config,expression:m.target.value}}:i);N({transformations:x})},rows:3,style:{width:"100%",padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,fontFamily:"monospace",resize:"vertical",boxSizing:"border-box"}})]})]},r.id))})]}),B==="validation"&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:20},children:[e.jsx("h4",{style:{margin:0},children:"✓ Validation Rules"}),e.jsx("button",{onClick:()=>{const r={id:`v-${Date.now()}`,field:"",type:"required",message:""};N({validationRules:[...c.validationRules,r]})},style:{padding:"6px 12px",borderRadius:4,border:"none",background:t.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"+ Add Rule"})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:12},children:c.validationRules.map(r=>e.jsxs("div",{style:{padding:16,background:t.cardBg,borderRadius:8,display:"flex",gap:12,alignItems:"center"},children:[e.jsxs("select",{value:r.field,onChange:m=>{const x=c.validationRules.map(i=>i.id===r.id?{...i,field:m.target.value}:i);N({validationRules:x})},style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12},children:[e.jsx("option",{value:"",children:"Select field..."}),E.map(m=>e.jsx("option",{value:m.path,children:m.path},m.id))]}),e.jsxs("select",{value:r.type,onChange:m=>{const x=c.validationRules.map(i=>i.id===r.id?{...i,type:m.target.value}:i);N({validationRules:x})},style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12},children:[e.jsx("option",{value:"required",children:"Required"}),e.jsx("option",{value:"type",children:"Type"}),e.jsx("option",{value:"min",children:"Min"}),e.jsx("option",{value:"max",children:"Max"}),e.jsx("option",{value:"pattern",children:"Pattern"}),e.jsx("option",{value:"enum",children:"Enum"}),e.jsx("option",{value:"custom",children:"Custom"})]}),(r.type==="pattern"||r.type==="min"||r.type==="max")&&e.jsx("input",{type:"text",value:String(r.value||""),onChange:m=>{const x=c.validationRules.map(i=>i.id===r.id?{...i,value:m.target.value}:i);N({validationRules:x})},placeholder:"Value",style:{padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,width:150}}),e.jsx("input",{type:"text",value:r.message||"",onChange:m=>{const x=c.validationRules.map(i=>i.id===r.id?{...i,message:m.target.value}:i);N({validationRules:x})},placeholder:"Error message",style:{flex:1,padding:"8px 12px",borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12}}),e.jsx("button",{onClick:()=>{N({validationRules:c.validationRules.filter(m=>m.id!==r.id)})},style:{padding:6,border:"none",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:14},children:"🗑️"})]},r.id))})]}),B==="test"&&e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:20,height:"100%"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:12},children:[e.jsx("h4",{style:{margin:0},children:"📥 Input"}),e.jsx("button",{onClick:()=>{const r={},m=(x,i)=>{x.forEach(o=>{o.children&&o.type==="object"?(i[o.name]={},m(o.children,i[o.name])):i[o.name]={string:"sample",number:42,boolean:!0,date:new Date().toISOString(),array:[],object:{},any:null}[o.type]})};m(c.sourceSchema.fields,r),z(JSON.stringify(r,null,2))},style:{padding:"4px 8px",borderRadius:4,border:`1px solid ${t.border}`,background:"transparent",color:t.text,cursor:"pointer",fontSize:11},children:"Generate Sample"})]}),e.jsx("textarea",{value:R,onChange:r=>z(r.target.value),placeholder:"Paste JSON input here...",style:{flex:1,padding:12,borderRadius:8,border:`1px solid ${t.border}`,background:t.cardBg,color:t.text,fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace",resize:"none"}})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:12},children:[e.jsx("h4",{style:{margin:0},children:"📤 Output"}),e.jsx("button",{onClick:W,style:{padding:"6px 16px",borderRadius:4,border:"none",background:t.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"🔄 Transform"})]}),e.jsx("pre",{style:{flex:1,padding:12,borderRadius:8,background:t.cardBg,margin:0,overflow:"auto",fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace"},children:q||"Run transform to see output"})]})]}),B==="preview"&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",gap:12,marginBottom:16},children:[e.jsx("button",{onClick:()=>T?.(g),style:{padding:"8px 16px",borderRadius:4,border:"none",background:t.accent,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13},children:"📤 Export"}),e.jsx("button",{onClick:()=>navigator.clipboard.writeText(g),style:{padding:"8px 16px",borderRadius:4,border:`1px solid ${t.border}`,background:"transparent",color:t.text,cursor:"pointer",fontSize:13},children:"📋 Copy"})]}),e.jsx("pre",{style:{flex:1,padding:16,background:t.cardBg,borderRadius:8,overflow:"auto",fontSize:12,fontFamily:"JetBrains Mono, Consolas, monospace",margin:0,whiteSpace:"pre-wrap"},children:g})]})]})]})},De=Object.freeze(Object.defineProperty({__proto__:null,NiceDataMapper:me},Symbol.toStringTag,{value:"Module"})),Ie=[{type:"ui-event",label:"UI Event",icon:"🖱️",color:"var(--color-primary, #3b82f6)",configSchema:[{name:"element",label:"Element Selector",type:"string",required:!0},{name:"event",label:"Event Type",type:"select",required:!0,options:[{value:"click",label:"Click"},{value:"change",label:"Change"},{value:"submit",label:"Submit"},{value:"focus",label:"Focus"},{value:"blur",label:"Blur"},{value:"keydown",label:"Key Down"},{value:"keyup",label:"Key Up"}]}]},{type:"api-response",label:"API Response",icon:"🌐",color:"var(--color-success, #22c55e)",configSchema:[{name:"endpoint",label:"Endpoint Pattern",type:"string",required:!0},{name:"method",label:"Method",type:"select",options:[{value:"GET",label:"GET"},{value:"POST",label:"POST"},{value:"PUT",label:"PUT"},{value:"DELETE",label:"DELETE"},{value:"*",label:"Any"}]},{name:"statusCode",label:"Status Code",type:"string"}]},{type:"websocket",label:"WebSocket",icon:"🔌",color:"var(--color-accent, #8b5cf6)",configSchema:[{name:"channel",label:"Channel",type:"string",required:!0},{name:"messageType",label:"Message Type",type:"string"}]},{type:"timer",label:"Timer",icon:"⏱️",color:"var(--color-warning, #f59e0b)",configSchema:[{name:"interval",label:"Interval (ms)",type:"number",required:!0,default:1e3},{name:"repeat",label:"Repeat",type:"boolean",default:!0}]},{type:"state-change",label:"State Change",icon:"📊",color:"var(--color-accent-pink, #ec4899)",configSchema:[{name:"selector",label:"State Selector",type:"string",required:!0},{name:"deep",label:"Deep Compare",type:"boolean",default:!1}]},{type:"broadcast",label:"Broadcast",icon:"📡",color:"var(--color-info, #06b6d4)",configSchema:[{name:"eventName",label:"Event Name",type:"string",required:!0}]}],Pe=[{type:"action",label:"Action",icon:"⚡",color:"var(--color-primary, #3b82f6)",configSchema:[{name:"actionType",label:"Action",type:"string",required:!0},{name:"payload",label:"Payload",type:"json"}]},{type:"transform",label:"Transform",icon:"🔄",color:"var(--color-accent, #8b5cf6)",configSchema:[{name:"expression",label:"Transform Expression",type:"code",required:!0}]},{type:"dispatch",label:"Dispatch",icon:"📤",color:"var(--color-success, #22c55e)",configSchema:[{name:"eventName",label:"Event Name",type:"string",required:!0},{name:"payload",label:"Payload",type:"json"}]},{type:"api-call",label:"API Call",icon:"🌐",color:"var(--color-warning, #f59e0b)",configSchema:[{name:"endpoint",label:"Endpoint",type:"string",required:!0},{name:"method",label:"Method",type:"select",options:[{value:"GET",label:"GET"},{value:"POST",label:"POST"},{value:"PUT",label:"PUT"},{value:"DELETE",label:"DELETE"}]},{name:"body",label:"Body",type:"json"}]},{type:"state-update",label:"State Update",icon:"📊",color:"var(--color-accent-pink, #ec4899)",configSchema:[{name:"path",label:"State Path",type:"string",required:!0},{name:"value",label:"Value Expression",type:"code"}]},{type:"notification",label:"Notification",icon:"🔔",color:"var(--color-info, #06b6d4)",configSchema:[{name:"type",label:"Type",type:"select",options:[{value:"success",label:"Success"},{value:"error",label:"Error"},{value:"warning",label:"Warning"},{value:"info",label:"Info"}]},{name:"message",label:"Message",type:"string",required:!0},{name:"duration",label:"Duration (ms)",type:"number",default:3e3}]},{type:"log",label:"Console Log",icon:"📝",color:"var(--text-muted, #6b7280)",configSchema:[{name:"level",label:"Level",type:"select",options:[{value:"log",label:"Log"},{value:"warn",label:"Warn"},{value:"error",label:"Error"},{value:"debug",label:"Debug"}]},{name:"message",label:"Message",type:"string"}]},{type:"delay",label:"Delay",icon:"⏳",color:"var(--nice-accent, #a855f7)",configSchema:[{name:"duration",label:"Duration (ms)",type:"number",required:!0,default:1e3}]},{type:"branch",label:"Conditional Branch",icon:"🔀",color:"var(--nice-info, #14b8a6)",configSchema:[{name:"condition",label:"Condition",type:"code",required:!0},{name:"trueBranch",label:"If True",type:"string"},{name:"falseBranch",label:"If False",type:"string"}]}],Ae=[{id:"flow-1",name:"Form Submit Handler",description:"Handle form submission with validation",enabled:!0,source:{id:"src-1",type:"ui-event",config:{element:"#contact-form",event:"submit"}},handlers:[{id:"h-1",type:"transform",config:{expression:"(event) => event.formData"}},{id:"h-2",type:"api-call",config:{endpoint:"/api/contact",method:"POST",body:"{{data}}"},modifiers:[{type:"debounce",value:500,unit:"ms"}]},{id:"h-3",type:"notification",config:{type:"success",message:"Form submitted successfully!"}}],errorHandler:{id:"err-1",type:"notification",config:{type:"error",message:"Failed to submit form"}}},{id:"flow-2",name:"Real-time Updates",description:"Handle WebSocket messages",enabled:!0,source:{id:"src-2",type:"websocket",config:{channel:"notifications",messageType:"update"}},handlers:[{id:"h-4",type:"state-update",config:{path:"notifications",value:"(state, data) => [...state.notifications, data]"}},{id:"h-5",type:"notification",config:{type:"info",message:"{{data.title}}",duration:5e3}}]},{id:"flow-3",name:"Auto-save Draft",description:"Periodically save form draft",enabled:!1,source:{id:"src-3",type:"timer",config:{interval:3e4,repeat:!0}},handlers:[{id:"h-6",type:"transform",config:{expression:"() => getFormData()"}},{id:"h-7",type:"api-call",config:{endpoint:"/api/draft",method:"PUT"},condition:{field:"isDirty",operator:"eq",value:!0}},{id:"h-8",type:"log",config:{level:"debug",message:"Draft saved"}}]}],_e=a=>{const f=a.filter(y=>y.enabled);return`/**
|
|
143
|
+
* Generated Event Orchestration
|
|
144
|
+
* @generated by NiceEventOrchestrator
|
|
145
|
+
*/
|
|
146
|
+
|
|
147
|
+
import { createEventBus, EventHandler, EventSource } from '@nice2dev/events';
|
|
148
|
+
|
|
149
|
+
// Event Bus Instance
|
|
150
|
+
export const eventBus = createEventBus();
|
|
151
|
+
|
|
152
|
+
// Event Types
|
|
153
|
+
${f.map(y=>`export type ${y.name.replace(/\s+/g,"")}Event = {
|
|
154
|
+
source: '${y.source.type}';
|
|
155
|
+
payload: unknown;
|
|
156
|
+
};`).join(`
|
|
157
|
+
|
|
158
|
+
`)}
|
|
159
|
+
|
|
160
|
+
// Event Handlers
|
|
161
|
+
${f.map(y=>{const T=JSON.stringify(y.source.config,null,2),b=y.handlers.flatMap(j=>j.modifiers||[]).map(j=>`.${j.type}(${j.value})`).join("");return`
|
|
162
|
+
/**
|
|
163
|
+
* ${y.name}
|
|
164
|
+
* ${y.description||""}
|
|
165
|
+
*/
|
|
166
|
+
export const ${y.name.replace(/\s+/g,"").toLowerCase()}Handler = eventBus
|
|
167
|
+
.on('${y.source.type}', ${T})${b}
|
|
168
|
+
.pipe(
|
|
169
|
+
${y.handlers.map((j,s)=>` // Step ${s+1}: ${j.type}
|
|
170
|
+
async (event) => {
|
|
171
|
+
${se(j)}
|
|
172
|
+
},`).join(`
|
|
173
|
+
`)}
|
|
174
|
+
)
|
|
175
|
+
${y.errorHandler?`.catch(async (error) => {
|
|
176
|
+
${se(y.errorHandler)}
|
|
177
|
+
})`:""};`}).join(`
|
|
178
|
+
`)}
|
|
179
|
+
|
|
180
|
+
// Initialize all handlers
|
|
181
|
+
export function initEventOrchestration() {
|
|
182
|
+
${f.map(y=>` ${y.name.replace(/\s+/g,"").toLowerCase()}Handler.start();`).join(`
|
|
183
|
+
`)}
|
|
184
|
+
console.log('Event orchestration initialized');
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Cleanup
|
|
188
|
+
export function destroyEventOrchestration() {
|
|
189
|
+
${f.map(y=>` ${y.name.replace(/\s+/g,"").toLowerCase()}Handler.stop();`).join(`
|
|
190
|
+
`)}
|
|
191
|
+
}
|
|
192
|
+
`},se=a=>{switch(a.type){case"action":return`dispatch({ type: '${a.config.actionType}', payload: ${JSON.stringify(a.config.payload)} });`;case"transform":return`return (${a.config.expression})(event);`;case"dispatch":return`eventBus.emit('${a.config.eventName}', ${JSON.stringify(a.config.payload)});`;case"api-call":return`await fetch('${a.config.endpoint}', { method: '${a.config.method}', body: JSON.stringify(event.payload) });`;case"state-update":return`updateState('${a.config.path}', ${a.config.value});`;case"notification":return`showNotification({ type: '${a.config.type}', message: '${a.config.message}' });`;case"log":return`console.${a.config.level||"log"}('${a.config.message}', event);`;case"delay":return`await new Promise(r => setTimeout(r, ${a.config.duration}));`;case"branch":return`if (${a.config.condition}) { /* true branch */ } else { /* false branch */ }`;default:return"// Unknown handler type"}},xe=({flows:a=Ae,eventSources:f=Ie,eventHandlers:v=Pe,onFlowsChange:y,onExport:T,onTest:b,className:j,style:s,"data-testid":C})=>{const[n,c]=h.useState(a),[w,B]=h.useState(n[0]?.id??null),[k,L]=h.useState("visual"),[D,R]=h.useState(!1),[z,q]=h.useState(""),[F,O]=h.useState(new Set),u=h.useMemo(()=>n.find(r=>r.id===w),[n,w]),N=h.useMemo(()=>_e(n),[n]),I=h.useCallback((r,m)=>{c(x=>{const i=x.map(o=>o.id===r?{...o,...m}:o);return y?.(i),i})},[y]),V=()=>{if(!z.trim())return;const r={id:`flow-${Date.now()}`,name:z,enabled:!0,source:{id:`src-${Date.now()}`,type:"ui-event",config:{element:"",event:"click"}},handlers:[]};c(m=>{const x=[...m,r];return y?.(x),x}),B(r.id),R(!1),q("")},E=r=>{c(m=>{const x=m.filter(i=>i.id!==r);return y?.(x),x}),w===r&&B(n[0]?.id??null)},U=r=>{if(!u)return;const m=v.find(o=>o.type===r),x={};m?.configSchema.forEach(o=>{o.default!==void 0&&(x[o.name]=o.default)});const i={id:`handler-${Date.now()}`,type:r,config:x};I(u.id,{handlers:[...u.handlers,i]}),O(o=>new Set([...o,i.id]))},M=(r,m)=>{u&&I(u.id,{handlers:u.handlers.map(x=>x.id===r?{...x,...m}:x)})},W=r=>{u&&I(u.id,{handlers:u.handlers.filter(m=>m.id!==r)})},g=(r,m)=>{if(!u)return;const x=u.handlers.find(d=>d.id===r);if(!x)return;const o=x.modifiers?.find(d=>d.type===m)?x.modifiers?.filter(d=>d.type!==m):[...x.modifiers||[],{type:m,value:500,unit:"ms"}];M(r,{modifiers:o})},t={bg:"var(--bg-elevated, #1e1e1e)",cardBg:"var(--bg-elevated, #252525)",border:"var(--bg-tertiary, #333)",text:"var(--text-primary, #e0e0e0)",textMuted:"var(--text-muted, #888)"};return e.jsxs("div",{className:`nice-event-orchestrator ${j||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:t.bg,color:t.text,fontFamily:"system-ui, sans-serif",...s},"data-testid":C,children:[e.jsxs("div",{style:{padding:"12px 20px",borderBottom:`1px solid ${t.border}`,display:"flex",alignItems:"center",gap:16},children:[e.jsx("h3",{style:{margin:0,fontSize:16},children:"⚡ Event Orchestrator"}),e.jsx("div",{style:{display:"flex",border:`1px solid ${t.border}`,borderRadius:6,overflow:"hidden",marginLeft:"auto"},children:["visual","code","split"].map(r=>e.jsxs("button",{onClick:()=>L(r),style:{padding:"6px 12px",border:"none",background:k===r?t.cardBg:"transparent",color:t.text,cursor:"pointer",fontSize:12,textTransform:"capitalize"},children:[r==="visual"?"🎨":r==="code"?"📝":"📐"," ",r]},r))}),e.jsx("button",{onClick:()=>T?.(N),style:{padding:"8px 16px",borderRadius:6,border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13,fontWeight:500},children:"📤 Export"})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[(k==="visual"||k==="split")&&e.jsxs("div",{style:{width:240,borderRight:`1px solid ${t.border}`,display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:`1px solid ${t.border}`,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("span",{style:{fontSize:12,fontWeight:600},children:"Event Flows"}),e.jsx("button",{onClick:()=>R(!0),style:{padding:"4px 8px",borderRadius:4,border:`1px solid ${t.border}`,background:"transparent",color:t.text,cursor:"pointer",fontSize:12},children:"+"})]}),e.jsxs("div",{style:{flex:1,overflow:"auto",padding:8},children:[n.map(r=>{const m=f.find(x=>x.type===r.source.type);return e.jsxs("div",{onClick:()=>B(r.id),style:{padding:12,background:w===r.id?t.cardBg:"transparent",borderRadius:6,cursor:"pointer",marginBottom:4,border:`1px solid ${w===r.id?t.border:"transparent"}`,opacity:r.enabled?1:.5},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{children:m?.icon??"⚡"}),e.jsx("span",{style:{flex:1,fontSize:13,fontWeight:500},children:r.name}),e.jsx("span",{style:{width:8,height:8,borderRadius:"50%",background:r.enabled?"var(--color-success, #22c55e)":"var(--color-error, #ef4444)"}})]}),e.jsxs("div",{style:{fontSize:10,color:t.textMuted,marginTop:4},children:[r.handlers.length," handler",r.handlers.length!==1?"s":""]})]},r.id)}),D&&e.jsxs("div",{style:{padding:12,background:t.cardBg,borderRadius:6,border:"1px solid var(--nice-primary, #3b82f6)"},children:[e.jsx("input",{type:"text",value:z,onChange:r=>q(r.target.value),placeholder:"Flow name...",autoFocus:!0,style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,marginBottom:8,boxSizing:"border-box"},onKeyDown:r=>r.key==="Enter"&&V()}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>R(!1),style:{flex:1,padding:6,borderRadius:4,border:`1px solid ${t.border}`,background:"transparent",color:t.text,cursor:"pointer",fontSize:11},children:"Cancel"}),e.jsx("button",{onClick:V,style:{flex:1,padding:6,borderRadius:4,border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:11},children:"Add"})]})]})]})]}),(k==="visual"||k==="split")&&u&&e.jsxs("div",{style:{flex:k==="split"?1:2,overflow:"auto",padding:20},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:20},children:[e.jsx("input",{type:"text",value:u.name,onChange:r=>I(u.id,{name:r.target.value}),style:{flex:1,padding:10,borderRadius:6,border:`1px solid ${t.border}`,background:t.cardBg,color:t.text,fontSize:16,fontWeight:600}}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:u.enabled,onChange:r=>I(u.id,{enabled:r.target.checked})}),e.jsx("span",{style:{fontSize:12},children:"Enabled"})]}),e.jsx("button",{onClick:()=>b?.(u.id),style:{padding:"8px 16px",borderRadius:6,border:`1px solid ${t.border}`,background:"transparent",color:t.text,cursor:"pointer",fontSize:12},children:"▶️ Test"}),e.jsx("button",{onClick:()=>E(u.id),style:{padding:"8px 12px",borderRadius:6,border:"1px solid var(--nice-danger, #ef4444)",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:12},children:"🗑️"})]}),e.jsxs("div",{style:{padding:16,background:t.cardBg,borderRadius:8,marginBottom:16,borderLeft:`4px solid ${f.find(r=>r.type===u.source.type)?.color??"var(--text-muted, #888)"}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,marginBottom:12},children:[e.jsx("span",{style:{fontSize:20},children:f.find(r=>r.type===u.source.type)?.icon??"⚡"}),e.jsx("span",{style:{fontWeight:600},children:"Event Source"})]}),e.jsx("select",{value:u.source.type,onChange:r=>I(u.id,{source:{...u.source,type:r.target.value,config:{}}}),style:{width:"100%",padding:10,borderRadius:6,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:13,marginBottom:12},children:f.map(r=>e.jsxs("option",{value:r.type,children:[r.icon," ",r.label]},r.type))}),f.find(r=>r.type===u.source.type)?.configSchema.map(r=>e.jsxs("div",{style:{marginBottom:8},children:[e.jsxs("label",{style:{display:"block",fontSize:11,color:t.textMuted,marginBottom:4},children:[r.label," ",r.required&&e.jsx("span",{style:{color:"var(--color-error, #ef4444)"},children:"*"})]}),r.type==="select"?e.jsx("select",{value:String(u.source.config[r.name]??""),onChange:m=>I(u.id,{source:{...u.source,config:{...u.source.config,[r.name]:m.target.value}}}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12},children:r.options?.map(m=>e.jsx("option",{value:m.value,children:m.label},m.value))}):e.jsx("input",{type:r.type==="number"?"number":"text",value:String(u.source.config[r.name]??""),onChange:m=>I(u.id,{source:{...u.source,config:{...u.source.config,[r.name]:r.type==="number"?Number(m.target.value):m.target.value}}}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,boxSizing:"border-box"}})]},r.name))]}),e.jsx("div",{style:{textAlign:"center",color:t.textMuted,marginBottom:16},children:"⬇️"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[u.handlers.map((r,m)=>{const x=v.find(o=>o.type===r.type),i=F.has(r.id);return e.jsxs(h.Fragment,{children:[e.jsxs("div",{style:{padding:16,background:t.cardBg,borderRadius:8,borderLeft:`4px solid ${x?.color??"var(--text-muted, #888)"}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer"},onClick:()=>O(o=>{const d=new Set(o);return d.has(r.id)?d.delete(r.id):d.add(r.id),d}),children:[e.jsx("span",{style:{fontSize:16},children:x?.icon??"⚡"}),e.jsxs("span",{style:{fontWeight:500},children:[m+1,". ",x?.label??r.type]}),r.modifiers?.map(o=>e.jsxs("span",{style:{padding:"2px 6px",background:"var(--nice-accent-tint-12, #8b5cf620)",color:"var(--color-accent, #8b5cf6)",borderRadius:4,fontSize:10},children:[o.type,": ",o.value,"ms"]},o.type)),e.jsx("span",{style:{marginLeft:"auto",color:t.textMuted},children:i?"▼":"▶"})]}),i&&e.jsxs("div",{style:{marginTop:12,paddingTop:12,borderTop:`1px solid ${t.border}`},children:[e.jsx("select",{value:r.type,onChange:o=>M(r.id,{type:o.target.value}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,marginBottom:12},children:v.map(o=>e.jsxs("option",{value:o.type,children:[o.icon," ",o.label]},o.type))}),x?.configSchema.map(o=>e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("label",{style:{display:"block",fontSize:11,color:t.textMuted,marginBottom:4},children:o.label}),o.type==="code"?e.jsx("textarea",{value:String(r.config[o.name]??""),onChange:d=>M(r.id,{config:{...r.config,[o.name]:d.target.value}}),rows:3,style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontFamily:"monospace",fontSize:11,resize:"vertical",boxSizing:"border-box"}}):o.type==="select"?e.jsx("select",{value:String(r.config[o.name]??""),onChange:d=>M(r.id,{config:{...r.config,[o.name]:d.target.value}}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12},children:o.options?.map(d=>e.jsx("option",{value:d.value,children:d.label},d.value))}):e.jsx("input",{type:o.type==="number"?"number":"text",value:String(r.config[o.name]??""),onChange:d=>M(r.id,{config:{...r.config,[o.name]:o.type==="number"?Number(d.target.value):d.target.value}}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${t.border}`,background:t.bg,color:t.text,fontSize:12,boxSizing:"border-box"}})]},o.name)),e.jsxs("div",{style:{marginTop:12},children:[e.jsx("div",{style:{fontSize:11,color:t.textMuted,marginBottom:8},children:"Modifiers"}),e.jsx("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:["debounce","throttle","delay","retry","once"].map(o=>e.jsx("button",{onClick:()=>g(r.id,o),style:{padding:"4px 8px",borderRadius:4,border:`1px solid ${r.modifiers?.some(d=>d.type===o)?"var(--color-accent, #8b5cf6)":t.border}`,background:r.modifiers?.some(d=>d.type===o)?"var(--nice-accent-tint-12, #8b5cf620)":"transparent",color:t.text,cursor:"pointer",fontSize:11},children:o},o))})]}),e.jsx("button",{onClick:()=>W(r.id),style:{marginTop:12,padding:"6px 12px",borderRadius:4,border:"1px solid var(--nice-danger, #ef4444)",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:11},children:"🗑️ Remove Handler"})]})]}),m<u.handlers.length-1&&e.jsx("div",{style:{textAlign:"center",color:t.textMuted},children:"⬇️"})]},r.id)}),e.jsxs("div",{style:{padding:16,border:`1px dashed ${t.border}`,borderRadius:8,textAlign:"center"},children:[e.jsx("div",{style:{fontSize:12,color:t.textMuted,marginBottom:12},children:"Add Handler"}),e.jsx("div",{style:{display:"flex",gap:8,flexWrap:"wrap",justifyContent:"center"},children:v.map(r=>e.jsxs("button",{onClick:()=>U(r.type),style:{padding:"6px 12px",borderRadius:4,border:`1px solid ${r.color}`,background:`${r.color}20`,color:t.text,cursor:"pointer",fontSize:11},children:[r.icon," ",r.label]},r.type))})]})]})]}),(k==="code"||k==="split")&&e.jsx("div",{style:{flex:1,overflow:"auto",padding:16,background:"var(--bg-canvas, #0d1117)",borderLeft:k==="split"?`1px solid ${t.border}`:void 0},children:e.jsx("pre",{style:{margin:0,fontFamily:"Consolas, Monaco, monospace",fontSize:12,lineHeight:1.5,color:"var(--text-primary, #e6edf3)",whiteSpace:"pre-wrap"},children:N})})]})]})},Fe=Object.freeze(Object.defineProperty({__proto__:null,NiceEventOrchestrator:xe},Symbol.toStringTag,{value:"Module"})),Oe=[{target:".nice-test-builder",titleKey:"tutorial.testBuilder.intro.title",title:"Test builder",contentKey:"tutorial.testBuilder.intro.content",content:"Build test suites visually: add cases and interaction steps with assertions, run them, and export to a ready-to-run .test.tsx file.",placement:"auto"}],X={render:{label:"Render",icon:"🎨",color:"var(--color-primary, #3b82f6)"},click:{label:"Click",icon:"👆",color:"var(--color-success, #22c55e)",hasTarget:!0},type:{label:"Type",icon:"⌨️",color:"var(--color-warning, #f59e0b)",hasTarget:!0,hasValue:!0},select:{label:"Select",icon:"📋",color:"var(--color-accent, #8b5cf6)",hasTarget:!0,hasValue:!0},hover:{label:"Hover",icon:"🖱️",color:"var(--color-accent-pink, #ec4899)",hasTarget:!0},focus:{label:"Focus",icon:"🎯",color:"var(--color-info, #06b6d4)",hasTarget:!0},blur:{label:"Blur",icon:"💨",color:"var(--text-muted, #6b7280)",hasTarget:!0},submit:{label:"Submit",icon:"📤",color:"var(--nice-info, #14b8a6)",hasTarget:!0},keypress:{label:"Key Press",icon:"⌨️",color:"var(--nice-accent, #a855f7)",hasValue:!0},wait:{label:"Wait",icon:"⏳",color:"var(--nice-warning, #f97316)",hasValue:!0},scroll:{label:"Scroll",icon:"📜",color:"var(--nice-success, #84cc16)",hasTarget:!0},drag:{label:"Drag & Drop",icon:"✋",color:"var(--color-warning, #eab308)",hasTarget:!0,hasValue:!0},assert:{label:"Assert",icon:"✅",color:"var(--color-success, #22c55e)",hasTarget:!0,hasValue:!0},snapshot:{label:"Snapshot",icon:"📸",color:"var(--color-primary, #3b82f6)"},"a11y-check":{label:"A11y Check",icon:"♿",color:"var(--color-accent, #8b5cf6)"}},Le=[{id:"suite-1",name:"Button Component Tests",componentName:"NiceButton",setup:{mocks:[{name:"onClick",type:"function"}]},tests:[{id:"test-1",name:"renders with correct text",type:"unit",steps:[{id:"step-1",action:"render"},{id:"step-2",action:"assert",target:"button",value:{matcher:"toHaveTextContent",expected:"Click me"}}]},{id:"test-2",name:"calls onClick when clicked",type:"unit",steps:[{id:"step-3",action:"render"},{id:"step-4",action:"click",target:"button"},{id:"step-5",action:"assert",value:{mock:"onClick",matcher:"toHaveBeenCalled"}}]},{id:"test-3",name:"is disabled when loading",type:"unit",steps:[{id:"step-6",action:"render"},{id:"step-7",action:"assert",target:"button",value:{matcher:"toHaveAttribute",expected:["disabled","true"]}}]}]},{id:"suite-2",name:"Form Integration Tests",componentName:"ContactForm",setup:{mocks:[{name:"api.submit",type:"api",returnValue:{success:!0}}],providers:[{name:"FormProvider",props:{}}]},tests:[{id:"test-4",name:"submits form with valid data",type:"integration",steps:[{id:"step-8",action:"render"},{id:"step-9",action:"type",target:'input[name="email"]',value:"test@example.com"},{id:"step-10",action:"type",target:'input[name="message"]',value:"Hello!"},{id:"step-11",action:"click",target:'button[type="submit"]'},{id:"step-12",action:"wait",value:{type:"api",timeout:1e3}},{id:"step-13",action:"assert",target:".success-message",value:{matcher:"toBeInTheDocument"}}]},{id:"test-5",name:"shows validation errors",type:"integration",steps:[{id:"step-14",action:"render"},{id:"step-15",action:"click",target:'button[type="submit"]'},{id:"step-16",action:"assert",target:".error",value:{matcher:"toHaveTextContent",expected:"Email is required"}}]}]}],qe=a=>a.map(f=>{const v=new Set(["import { render, screen, fireEvent, waitFor } from '@testing-library/react';","import userEvent from '@testing-library/user-event';",`import { ${f.componentName} } from './${f.componentName}';`]);f.setup?.mocks.forEach(s=>{s.type==="api"&&(v.add("import { rest } from 'msw';"),v.add("import { setupServer } from 'msw/node';"))});const y=f.setup?.mocks.map(s=>s.type==="function"?`const ${s.name} = jest.fn();`:s.type==="api"?`// API mock: ${s.name}`:"").filter(Boolean).join(`
|
|
193
|
+
`),b=f.setup?.providers&&f.setup.providers.length>0?`const Wrapper = ({ children }) => (
|
|
194
|
+
${f.setup.providers.map(s=>`<${s.name}>`).join(`
|
|
195
|
+
`)}
|
|
196
|
+
{children}
|
|
197
|
+
${f.setup.providers.reverse().map(s=>`</${s.name}>`).join(`
|
|
198
|
+
`)}
|
|
199
|
+
);`:"",j=f.tests.map(s=>{const C=s.skip?".skip":s.only?".only":"",n=s.steps.map(c=>We(c,f)).join(`
|
|
200
|
+
`);return`
|
|
201
|
+
it${C}('${s.name}', async () => {
|
|
202
|
+
${n}
|
|
203
|
+
});`}).join(`
|
|
204
|
+
`);return`/**
|
|
205
|
+
* ${f.name}
|
|
206
|
+
* @generated by NiceTestBuilder
|
|
207
|
+
*/
|
|
208
|
+
|
|
209
|
+
${Array.from(v).join(`
|
|
210
|
+
`)}
|
|
211
|
+
|
|
212
|
+
describe('${f.componentName}', () => {
|
|
213
|
+
${y?` // Mocks
|
|
214
|
+
${y}
|
|
215
|
+
`:""}
|
|
216
|
+
${b?` ${b}
|
|
217
|
+
`:""}
|
|
218
|
+
beforeEach(() => {
|
|
219
|
+
jest.clearAllMocks();
|
|
220
|
+
});
|
|
221
|
+
${j}
|
|
222
|
+
});
|
|
223
|
+
`}).join(`
|
|
224
|
+
|
|
225
|
+
`),We=(a,f)=>{switch(X[a.action],a.action){case"render":{const v=f.setup?.providers&&f.setup.providers.length>0,y=f.setup?.props?` {...${JSON.stringify(f.setup.props)}}`:"";return v?`render(<${f.componentName}${y} />, { wrapper: Wrapper });`:`render(<${f.componentName}${y} />);`}case"click":return`await userEvent.click(screen.getByRole('${a.target?.replace(/[[\]'"]/g,"")}'));`;case"type":return`await userEvent.type(screen.getByRole('textbox', { name: /${a.target}/ }), '${a.value}');`;case"select":return`await userEvent.selectOptions(screen.getByRole('combobox'), '${a.value}');`;case"hover":return`await userEvent.hover(screen.getByRole('${a.target}'));`;case"focus":return`screen.getByRole('${a.target}').focus();`;case"blur":return`screen.getByRole('${a.target}').blur();`;case"submit":return"fireEvent.submit(screen.getByRole('form'));";case"wait":if(typeof a.value=="object"&&a.value!==null){const v=a.value;return v.type==="timeout"?`await new Promise(r => setTimeout(r, ${v.value}));`:`await waitFor(() => expect(/* condition */).toBeTruthy(), { timeout: ${v.timeout??1e3} });`}return`await new Promise(r => setTimeout(r, ${a.value}));`;case"assert":if(typeof a.value=="object"&&a.value!==null){const v=a.value;if(v.mock)return`expect(${v.mock}).${v.matcher}(${v.expected?JSON.stringify(v.expected):""});`;const y=a.target?`screen.getByRole('${a.target}')`:"result",T=v.expected!==void 0?JSON.stringify(v.expected):"";return`expect(${y}).${v.matcher}(${T});`}return`expect(screen.getByRole('${a.target}')).toBeInTheDocument();`;case"snapshot":return"expect(container).toMatchSnapshot();";case"a11y-check":return`const results = await axe(container);
|
|
226
|
+
expect(results).toHaveNoViolations();`;default:return`// ${a.action}: ${JSON.stringify(a)}`}},he=({componentName:a="MyComponent",testSuites:f=Le,availableMocks:v=[],onSuitesChange:y,onExport:T,onRun:b,onRunAll:j,tutorial:s,className:C,style:n,"data-testid":c})=>{const[w,B]=h.useState(f),[k,L]=h.useState(w[0]?.id??null),[D,R]=h.useState(null),[z,q]=h.useState("visual"),[F,O]=h.useState(!1),[u,N]=h.useState(""),[I,V]=h.useState(new Set),E=h.useMemo(()=>w.find(p=>p.id===k),[w,k]);h.useMemo(()=>E?.tests.find(p=>p.id===D),[E,D]);const U=h.useMemo(()=>qe(w),[w]),M=h.useCallback((p,_)=>{B(l=>{const $=l.map(S=>S.id===p?{...S,..._}:S);return y?.($),$})},[y]),W=()=>{if(!u.trim())return;const p={id:`suite-${Date.now()}`,name:u,componentName:a,tests:[]};B(_=>{const l=[..._,p];return y?.(l),l}),L(p.id),O(!1),N("")},g=p=>{B(_=>{const l=_.filter($=>$.id!==p);return y?.(l),l}),k===p&&L(w[0]?.id??null)},t=()=>{if(!E)return;const p={id:`test-${Date.now()}`,name:"New test",type:"unit",steps:[{id:`step-${Date.now()}`,action:"render"}]};M(E.id,{tests:[...E.tests,p]}),R(p.id),V(_=>new Set([..._,p.id]))},r=(p,_)=>{E&&M(E.id,{tests:E.tests.map(l=>l.id===p?{...l,..._}:l)})},m=p=>{E&&(M(E.id,{tests:E.tests.filter(_=>_.id!==p)}),D===p&&R(null))},x=(p,_)=>{if(!E)return;const l=E.tests.find(S=>S.id===p);if(!l)return;const $={id:`step-${Date.now()}`,action:_};r(p,{steps:[...l.steps,$]})},i=(p,_,l)=>{if(!E)return;const $=E.tests.find(S=>S.id===p);$&&r(p,{steps:$.steps.map(S=>S.id===_?{...S,...l}:S)})},o=(p,_)=>{if(!E)return;const l=E.tests.find($=>$.id===p);l&&r(p,{steps:l.steps.filter($=>$.id!==_)})},d={bg:"var(--bg-elevated, #1e1e1e)",cardBg:"var(--bg-elevated, #252525)",border:"var(--bg-tertiary, #333)",text:"var(--text-primary, #e0e0e0)",textMuted:"var(--text-muted, #888)"},P=h.useMemo(()=>{const p=w.reduce((l,$)=>l+$.tests.length,0),_=w.reduce((l,$)=>l+$.tests.filter(S=>S.skip).length,0);return{total:p,skipped:_}},[w]);return e.jsxs("div",{className:`nice-test-builder ${C||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:d.bg,color:d.text,fontFamily:"system-ui, sans-serif",...n},"data-testid":c,children:[e.jsxs("div",{style:{padding:"12px 20px",borderBottom:`1px solid ${d.border}`,display:"flex",alignItems:"center",gap:16},children:[e.jsx("h3",{style:{margin:0,fontSize:16},children:"🧪 Test Builder"}),e.jsxs("div",{style:{fontSize:12,color:d.textMuted},children:[P.total," tests • ",P.skipped," skipped"]}),e.jsx("div",{style:{display:"flex",border:`1px solid ${d.border}`,borderRadius:6,overflow:"hidden",marginLeft:"auto"},children:["visual","code","split"].map(p=>e.jsxs("button",{onClick:()=>q(p),style:{padding:"6px 12px",border:"none",background:z===p?d.cardBg:"transparent",color:d.text,cursor:"pointer",fontSize:12,textTransform:"capitalize"},children:[p==="visual"?"🎨":p==="code"?"📝":"📐"," ",p]},p))}),e.jsx("button",{onClick:j,style:{padding:"8px 16px",borderRadius:6,border:`1px solid ${d.border}`,background:"transparent",color:d.text,cursor:"pointer",fontSize:13},children:"▶️ Run All"}),e.jsx("button",{onClick:()=>T?.(U),style:{padding:"8px 16px",borderRadius:6,border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:13,fontWeight:500},children:"📤 Export"}),e.jsx(H.wl,{steps:H.xl(s,Oe)})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[(z==="visual"||z==="split")&&e.jsxs("div",{style:{width:220,borderRight:`1px solid ${d.border}`,display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:`1px solid ${d.border}`,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("span",{style:{fontSize:12,fontWeight:600},children:"Test Suites"}),e.jsx("button",{onClick:()=>O(!0),style:{padding:"4px 8px",borderRadius:4,border:`1px solid ${d.border}`,background:"transparent",color:d.text,cursor:"pointer",fontSize:12},children:"+"})]}),e.jsxs("div",{style:{flex:1,overflow:"auto",padding:8},children:[w.map(p=>e.jsxs("div",{onClick:()=>{L(p.id),R(null)},style:{padding:12,background:k===p.id?d.cardBg:"transparent",borderRadius:6,cursor:"pointer",marginBottom:4,border:`1px solid ${k===p.id?d.border:"transparent"}`},children:[e.jsx("div",{style:{fontSize:13,fontWeight:500},children:p.name}),e.jsxs("div",{style:{fontSize:10,color:d.textMuted,marginTop:4},children:[p.componentName," • ",p.tests.length," test",p.tests.length!==1?"s":""]})]},p.id)),F&&e.jsxs("div",{style:{padding:12,background:d.cardBg,borderRadius:6,border:"1px solid var(--nice-primary, #3b82f6)"},children:[e.jsx("input",{type:"text",value:u,onChange:p=>N(p.target.value),placeholder:"Suite name...",autoFocus:!0,style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${d.border}`,background:d.bg,color:d.text,fontSize:12,marginBottom:8,boxSizing:"border-box"},onKeyDown:p=>p.key==="Enter"&&W()}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>O(!1),style:{flex:1,padding:6,borderRadius:4,border:`1px solid ${d.border}`,background:"transparent",color:d.text,cursor:"pointer",fontSize:11},children:"Cancel"}),e.jsx("button",{onClick:W,style:{flex:1,padding:6,borderRadius:4,border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:11},children:"Add"})]})]})]})]}),(z==="visual"||z==="split")&&E&&e.jsxs("div",{style:{flex:z==="split"?1:2,overflow:"auto",padding:20},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginBottom:20},children:[e.jsx("input",{type:"text",value:E.name,onChange:p=>M(E.id,{name:p.target.value}),style:{flex:1,padding:10,borderRadius:6,border:`1px solid ${d.border}`,background:d.cardBg,color:d.text,fontSize:16,fontWeight:600}}),e.jsx("button",{onClick:()=>b?.(E.id),style:{padding:"8px 16px",borderRadius:6,border:`1px solid ${d.border}`,background:"transparent",color:d.text,cursor:"pointer",fontSize:12},children:"▶️ Run Suite"}),e.jsx("button",{onClick:()=>g(E.id),style:{padding:"8px 12px",borderRadius:6,border:"1px solid var(--nice-danger, #ef4444)",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:12},children:"🗑️"})]}),e.jsxs("div",{style:{marginBottom:20},children:[e.jsx("label",{style:{display:"block",fontSize:11,color:d.textMuted,marginBottom:6},children:"Component"}),e.jsx("input",{type:"text",value:E.componentName,onChange:p=>M(E.id,{componentName:p.target.value}),style:{width:200,padding:8,borderRadius:4,border:`1px solid ${d.border}`,background:d.cardBg,color:d.text,fontSize:13}})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[E.tests.map((p,_)=>{const l=I.has(p.id),$={unit:{color:"var(--color-primary, #3b82f6)",icon:"🧩"},integration:{color:"var(--color-success, #22c55e)",icon:"🔗"},e2e:{color:"var(--color-accent, #8b5cf6)",icon:"🌐"},snapshot:{color:"var(--color-warning, #f59e0b)",icon:"📸"},accessibility:{color:"var(--color-accent-pink, #ec4899)",icon:"♿"}};return e.jsxs("div",{style:{background:d.cardBg,borderRadius:8,border:`1px solid ${D===p.id?"var(--color-primary, #3b82f6)":d.border}`,overflow:"hidden"},children:[e.jsxs("div",{style:{padding:12,display:"flex",alignItems:"center",gap:8,cursor:"pointer",borderLeft:`4px solid ${$[p.type].color}`},onClick:()=>{R(p.id),V(S=>{const A=new Set(S);return A.has(p.id)?A.delete(p.id):A.add(p.id),A})},children:[e.jsx("span",{children:$[p.type].icon}),e.jsxs("span",{style:{fontWeight:500,opacity:p.skip?.5:1},children:[_+1,". ",p.name]}),p.skip&&e.jsx("span",{style:{padding:"2px 6px",background:"var(--nice-warning-tint-20, #f59e0b30)",color:"var(--color-warning, #f59e0b)",borderRadius:4,fontSize:10},children:"SKIPPED"}),p.only&&e.jsx("span",{style:{padding:"2px 6px",background:"#8b5cf630",color:"var(--color-accent, #8b5cf6)",borderRadius:4,fontSize:10},children:"ONLY"}),e.jsxs("span",{style:{marginLeft:"auto",fontSize:11,color:d.textMuted},children:[p.steps.length," step",p.steps.length!==1?"s":""]}),e.jsx("span",{style:{color:d.textMuted},children:l?"▼":"▶"})]}),l&&e.jsxs("div",{style:{padding:16,borderTop:`1px solid ${d.border}`},children:[e.jsxs("div",{style:{display:"flex",gap:12,marginBottom:16},children:[e.jsxs("div",{style:{flex:1},children:[e.jsx("label",{style:{display:"block",fontSize:11,color:d.textMuted,marginBottom:4},children:"Test Name"}),e.jsx("input",{type:"text",value:p.name,onChange:S=>r(p.id,{name:S.target.value}),style:{width:"100%",padding:8,borderRadius:4,border:`1px solid ${d.border}`,background:d.bg,color:d.text,fontSize:12,boxSizing:"border-box"}})]}),e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:11,color:d.textMuted,marginBottom:4},children:"Type"}),e.jsxs("select",{value:p.type,onChange:S=>r(p.id,{type:S.target.value}),style:{padding:8,borderRadius:4,border:`1px solid ${d.border}`,background:d.bg,color:d.text,fontSize:12},children:[e.jsx("option",{value:"unit",children:"🧩 Unit"}),e.jsx("option",{value:"integration",children:"🔗 Integration"}),e.jsx("option",{value:"e2e",children:"🌐 E2E"}),e.jsx("option",{value:"snapshot",children:"📸 Snapshot"}),e.jsx("option",{value:"accessibility",children:"♿ A11y"})]})]}),e.jsxs("div",{style:{display:"flex",gap:8,alignItems:"flex-end"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:4,fontSize:11},children:[e.jsx("input",{type:"checkbox",checked:p.skip??!1,onChange:S=>r(p.id,{skip:S.target.checked,only:!1})}),"Skip"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:4,fontSize:11},children:[e.jsx("input",{type:"checkbox",checked:p.only??!1,onChange:S=>r(p.id,{only:S.target.checked,skip:!1})}),"Only"]})]})]}),e.jsxs("div",{style:{marginBottom:12},children:[e.jsx("div",{style:{fontSize:11,color:d.textMuted,marginBottom:8},children:"Steps"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:p.steps.map((S,A)=>{const J=X[S.action];return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,padding:10,background:d.bg,borderRadius:6,borderLeft:`3px solid ${J.color}`},children:[e.jsx("span",{style:{width:20,textAlign:"center",fontSize:11,color:d.textMuted},children:A+1}),e.jsx("span",{children:J.icon}),e.jsx("select",{value:S.action,onChange:G=>i(p.id,S.id,{action:G.target.value}),style:{padding:6,borderRadius:4,border:`1px solid ${d.border}`,background:d.cardBg,color:d.text,fontSize:11},children:Object.entries(X).map(([G,Z])=>e.jsxs("option",{value:G,children:[Z.icon," ",Z.label]},G))}),J.hasTarget&&e.jsx("input",{type:"text",value:S.target??"",onChange:G=>i(p.id,S.id,{target:G.target.value}),placeholder:"Target selector",style:{flex:1,padding:6,borderRadius:4,border:`1px solid ${d.border}`,background:d.cardBg,color:d.text,fontSize:11}}),J.hasValue&&S.action!=="assert"&&e.jsx("input",{type:"text",value:typeof S.value=="string"?S.value:"",onChange:G=>i(p.id,S.id,{value:G.target.value}),placeholder:"Value",style:{width:120,padding:6,borderRadius:4,border:`1px solid ${d.border}`,background:d.cardBg,color:d.text,fontSize:11}}),e.jsx("button",{onClick:()=>o(p.id,S.id),style:{padding:4,borderRadius:4,border:"none",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:12},children:"×"})]},S.id)})})]}),e.jsx("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:Object.entries(X).slice(0,8).map(([S,A])=>e.jsxs("button",{onClick:()=>x(p.id,S),style:{padding:"4px 8px",borderRadius:4,border:`1px solid ${A.color}40`,background:`${A.color}20`,color:d.text,cursor:"pointer",fontSize:10},children:[A.icon," ",A.label]},S))}),e.jsx("div",{style:{marginTop:16,display:"flex",gap:8},children:e.jsx("button",{onClick:()=>m(p.id),style:{padding:"6px 12px",borderRadius:4,border:"1px solid var(--nice-danger, #ef4444)",background:"transparent",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:11},children:"🗑️ Delete Test"})})]})]},p.id)}),e.jsx("button",{onClick:t,style:{padding:16,borderRadius:8,border:`1px dashed ${d.border}`,background:"transparent",color:d.textMuted,cursor:"pointer",fontSize:13},children:"+ Add Test"})]})]}),(z==="code"||z==="split")&&e.jsx("div",{style:{flex:1,overflow:"auto",padding:16,background:"var(--bg-canvas, #0d1117)",borderLeft:z==="split"?`1px solid ${d.border}`:void 0},children:e.jsx("pre",{style:{margin:0,fontFamily:"Consolas, Monaco, monospace",fontSize:12,lineHeight:1.5,color:"var(--text-primary, #e6edf3)",whiteSpace:"pre-wrap"},children:U})})]})]})},Ve=Object.freeze(Object.defineProperty({__proto__:null,NiceTestBuilder:he},Symbol.toStringTag,{value:"Module"})),Ue=[{id:"react",name:"React",icon:"⚛️",description:"React component templates",templates:[{id:"react-component",name:"React Component",description:"Basic React functional component",category:"components",icon:"📦",engine:"handlebars",variables:[{id:"componentName",name:"componentName",type:"string",required:!0,defaultValue:"MyComponent"},{id:"withProps",name:"withProps",type:"boolean",defaultValue:!0},{id:"withTests",name:"withTests",type:"boolean",defaultValue:!0},{id:"withStory",name:"withStory",type:"boolean",defaultValue:!1}],files:[{id:"component",name:"{{componentName}}.tsx",path:"src/components/{{componentName}}",language:"typescript",content:`import React from 'react';
|
|
227
|
+
{{#if withProps}}
|
|
228
|
+
export interface {{componentName}}Props {
|
|
229
|
+
children?: React.ReactNode;
|
|
230
|
+
className?: string;
|
|
231
|
+
}
|
|
232
|
+
{{/if}}
|
|
233
|
+
|
|
234
|
+
export const {{componentName}}: React.FC{{#if withProps}}<{{componentName}}Props>{{/if}} = ({{#if withProps}}{ children, className }{{/if}}) => {
|
|
235
|
+
return (
|
|
236
|
+
<div className={className}>
|
|
237
|
+
{children}
|
|
238
|
+
</div>
|
|
239
|
+
);
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
export default {{componentName}};
|
|
243
|
+
`},{id:"test",name:"{{componentName}}.test.tsx",path:"src/components/{{componentName}}",language:"typescript",condition:"withTests === true",content:`import { render, screen } from '@testing-library/react';
|
|
244
|
+
import { {{componentName}} } from './{{componentName}}';
|
|
245
|
+
|
|
246
|
+
describe('{{componentName}}', () => {
|
|
247
|
+
it('renders children', () => {
|
|
248
|
+
render(<{{componentName}}>Test Content</{{componentName}}>);
|
|
249
|
+
expect(screen.getByText('Test Content')).toBeInTheDocument();
|
|
250
|
+
});
|
|
251
|
+
});
|
|
252
|
+
`},{id:"story",name:"{{componentName}}.stories.tsx",path:"src/components/{{componentName}}",language:"typescript",condition:"withStory === true",content:`import type { Meta, StoryObj } from '@storybook/react';
|
|
253
|
+
import { {{componentName}} } from './{{componentName}}';
|
|
254
|
+
|
|
255
|
+
const meta: Meta<typeof {{componentName}}> = {
|
|
256
|
+
title: 'Components/{{componentName}}',
|
|
257
|
+
component: {{componentName}},
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
export default meta;
|
|
261
|
+
type Story = StoryObj<typeof {{componentName}}>;
|
|
262
|
+
|
|
263
|
+
export const Default: Story = {
|
|
264
|
+
args: {},
|
|
265
|
+
};
|
|
266
|
+
`},{id:"index",name:"index.ts",path:"src/components/{{componentName}}",language:"typescript",content:`export { {{componentName}} } from './{{componentName}}';
|
|
267
|
+
export type { {{componentName}}Props } from './{{componentName}}';
|
|
268
|
+
`}]}]},{id:"nextjs",name:"Next.js",icon:"▲",description:"Next.js page and API templates",templates:[{id:"nextjs-page",name:"Next.js Page",description:"Next.js App Router page",category:"pages",icon:"📄",engine:"handlebars",variables:[{id:"pageName",name:"pageName",type:"string",required:!0,defaultValue:"about"},{id:"withMetadata",name:"withMetadata",type:"boolean",defaultValue:!0},{id:"withLoading",name:"withLoading",type:"boolean",defaultValue:!1},{id:"withError",name:"withError",type:"boolean",defaultValue:!1}],files:[{id:"page",name:"page.tsx",path:"app/{{pageName}}",language:"typescript",content:`{{#if withMetadata}}
|
|
269
|
+
import type { Metadata } from 'next';
|
|
270
|
+
|
|
271
|
+
export const metadata: Metadata = {
|
|
272
|
+
title: '{{pageName}}',
|
|
273
|
+
description: '{{pageName}} page',
|
|
274
|
+
};
|
|
275
|
+
{{/if}}
|
|
276
|
+
|
|
277
|
+
export default function {{pascalCase pageName}}Page() {
|
|
278
|
+
return (
|
|
279
|
+
<main>
|
|
280
|
+
<h1>{{pageName}}</h1>
|
|
281
|
+
</main>
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
`},{id:"loading",name:"loading.tsx",path:"app/{{pageName}}",language:"typescript",condition:"withLoading === true",content:`export default function Loading() {
|
|
285
|
+
return <div>Loading...</div>;
|
|
286
|
+
}
|
|
287
|
+
`},{id:"error",name:"error.tsx",path:"app/{{pageName}}",language:"typescript",condition:"withError === true",content:`'use client';
|
|
288
|
+
|
|
289
|
+
export default function Error({
|
|
290
|
+
error,
|
|
291
|
+
reset,
|
|
292
|
+
}: {
|
|
293
|
+
error: Error & { digest?: string };
|
|
294
|
+
reset: () => void;
|
|
295
|
+
}) {
|
|
296
|
+
return (
|
|
297
|
+
<div>
|
|
298
|
+
<h2>Something went wrong!</h2>
|
|
299
|
+
<button onClick={reset}>Try again</button>
|
|
300
|
+
</div>
|
|
301
|
+
);
|
|
302
|
+
}
|
|
303
|
+
`}]},{id:"nextjs-api",name:"Next.js API Route",description:"Next.js App Router API handler",category:"api",icon:"🔌",engine:"handlebars",variables:[{id:"routeName",name:"routeName",type:"string",required:!0,defaultValue:"users"},{id:"methods",name:"methods",type:"array",defaultValue:["GET","POST"]}],files:[{id:"route",name:"route.ts",path:"app/api/{{routeName}}",language:"typescript",content:`import { NextResponse } from 'next/server';
|
|
304
|
+
|
|
305
|
+
{{#if (includes methods 'GET')}}
|
|
306
|
+
export async function GET() {
|
|
307
|
+
return NextResponse.json({ message: 'GET {{routeName}}' });
|
|
308
|
+
}
|
|
309
|
+
{{/if}}
|
|
310
|
+
|
|
311
|
+
{{#if (includes methods 'POST')}}
|
|
312
|
+
export async function POST(request: Request) {
|
|
313
|
+
const body = await request.json();
|
|
314
|
+
return NextResponse.json({ message: 'POST {{routeName}}', data: body });
|
|
315
|
+
}
|
|
316
|
+
{{/if}}
|
|
317
|
+
|
|
318
|
+
{{#if (includes methods 'PUT')}}
|
|
319
|
+
export async function PUT(request: Request) {
|
|
320
|
+
const body = await request.json();
|
|
321
|
+
return NextResponse.json({ message: 'PUT {{routeName}}', data: body });
|
|
322
|
+
}
|
|
323
|
+
{{/if}}
|
|
324
|
+
|
|
325
|
+
{{#if (includes methods 'DELETE')}}
|
|
326
|
+
export async function DELETE() {
|
|
327
|
+
return NextResponse.json({ message: 'DELETE {{routeName}}' });
|
|
328
|
+
}
|
|
329
|
+
{{/if}}
|
|
330
|
+
`}]}]}],de=(a,f,v)=>{let y=a;Object.entries(f).forEach(([j,s])=>{const C=new RegExp(`\\{\\{\\s*${j}\\s*\\}\\}`,"g");y=y.replace(C,String(s));const n=new RegExp(`\\{\\{\\s*pascalCase\\s+${j}\\s*\\}\\}`,"g");if(typeof s=="string"){const c=s.charAt(0).toUpperCase()+s.slice(1);y=y.replace(n,c)}});const T=/\{\{#if\s+([^}]+)\}\}([\s\S]*?)\{\{\/if\}\}/g;y=y.replace(T,(j,s,C)=>{const n=s.trim(),c=n.match(/(\w+)\s*===?\s*(\w+|true|false|'[^']*'|"[^"]*")/);if(c){const[,B,k]=c,L=f[B];let D=k;return k==="true"?D=!0:k==="false"?D=!1:(k.startsWith("'")||k.startsWith('"'))&&(D=k.slice(1,-1)),L===D?C:""}return f[n]?C:""});const b=/\{\{#if\s+\(includes\s+(\w+)\s+'([^']+)'\)\}\}([\s\S]*?)\{\{\/if\}\}/g;return y=y.replace(b,(j,s,C,n)=>{const c=f[s];return Array.isArray(c)&&c.includes(C)?n:""}),y},He=(a,f)=>{try{const v=a.split(/\s*(===|!==|==|!=)\s*/);if(v.length===3){const[y,T,b]=v,j=f[y.trim()],s=b.trim();let C=s;switch(s==="true"?C=!0:s==="false"?C=!1:(s.startsWith("'")||s.startsWith('"'))&&(C=s.slice(1,-1)),T){case"===":case"==":return j===C;case"!==":case"!=":return j!==C}}return!!f[a.trim()]}catch{return!0}},ye=({templates:a,presets:f=Ue,selectedTemplate:v,defaultEngine:y="handlebars",showLibrary:T=!0,onTemplateSelect:b,onTemplateCreate:j,onTemplateUpdate:s,onTemplateDelete:C,onGenerate:n,onExport:c,onImport:w,className:B,style:k,"data-testid":L="nice-code-template"})=>{const[D,R]=h.useState(a),[z,q]=h.useState(v||null),[F,O]=h.useState({}),[u,N]=h.useState("editor"),[I,V]=h.useState(null),[E,U]=h.useState(!1),[M,W]=h.useState(!1),g=h.useMemo(()=>{const l=f.flatMap($=>$.templates);return[...D,...l]},[D,f]),t=h.useMemo(()=>g.find(l=>l.id===z),[g,z]),r=h.useMemo(()=>t?.files.find(l=>l.id===I)||t?.files[0],[t,I]);h.useEffect(()=>{if(t){const l={};t.variables.forEach($=>{l[$.name]=$.defaultValue??""}),O(l),V(t.files[0]?.id||null)}},[t]);const m=h.useMemo(()=>t?t.files.filter(l=>l.condition?He(l.condition,F):!0).map(l=>({path:de(`${l.path}/${l.name}`,F,t.engine),content:de(l.content,F,t.engine),language:l.language})):[],[t,F]),x=h.useCallback(l=>{q(l.id),b?.(l)},[b]),i=h.useCallback(()=>{n?.(m,F)},[m,F,n]),o=h.useCallback(()=>{const l={id:crypto.randomUUID(),name:"New Template",description:"Custom template",category:"custom",icon:"📄",engine:y,variables:[{id:"1",name:"name",type:"string",required:!0,defaultValue:"MyName"}],files:[{id:"1",name:"{{name}}.ts",path:"src",language:"typescript",content:`// {{name}}
|
|
331
|
+
export const {{name}} = {};`}]};R($=>[...$,l]),q(l.id),U(!1),j?.(l)},[y,j]),d=h.useCallback((l,$)=>{if(!t)return;const S={...t,files:t.files.map(A=>A.id===l?{...A,content:$}:A)};R(A=>A.map(J=>J.id===S.id?S:J)),s?.(S)},[t,s]),P=h.useCallback(()=>{if(!t)return;const l={id:crypto.randomUUID(),name:"new-file.ts",path:"src",language:"typescript",content:`// New file
|
|
332
|
+
`},$={...t,files:[...t.files,l]};R(S=>S.map(A=>A.id===$.id?$:A)),V(l.id),s?.($)},[t,s]),p=h.useCallback(l=>{if(!t)return;const $={...t,files:t.files.filter(S=>S.id!==l)};R(S=>S.map(A=>A.id===$.id?$:A)),V($.files[0]?.id||null),s?.($)},[t,s]),_=l=>{const $=F[l.name];switch(l.type){case"boolean":return e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer"},children:[e.jsx("input",{type:"checkbox",checked:!!$,onChange:S=>O(A=>({...A,[l.name]:S.target.checked}))}),e.jsx("span",{children:l.name})]});case"select":return e.jsx("select",{value:String($),onChange:S=>O(A=>({...A,[l.name]:S.target.value})),style:{width:"100%",padding:"8px 12px",background:"var(--text-secondary, #374151)",border:"1px solid var(--nice-text-secondary, #4b5563)",borderRadius:6,color:"var(--bg-primary, #fff)"},children:l.options?.map(S=>e.jsx("option",{value:S,children:S},S))});case"array":return e.jsx("input",{type:"text",value:Array.isArray($)?$.join(", "):"",onChange:S=>O(A=>({...A,[l.name]:S.target.value.split(",").map(J=>J.trim())})),placeholder:"value1, value2, value3",style:{width:"100%",padding:"8px 12px",background:"var(--text-secondary, #374151)",border:"1px solid var(--nice-text-secondary, #4b5563)",borderRadius:6,color:"var(--bg-primary, #fff)"}});case"number":return e.jsx("input",{type:"number",value:Number($),onChange:S=>O(A=>({...A,[l.name]:Number(S.target.value)})),style:{width:"100%",padding:"8px 12px",background:"var(--text-secondary, #374151)",border:"1px solid var(--nice-text-secondary, #4b5563)",borderRadius:6,color:"var(--bg-primary, #fff)"}});default:return e.jsx("input",{type:"text",value:String($??""),onChange:S=>O(A=>({...A,[l.name]:S.target.value})),style:{width:"100%",padding:"8px 12px",background:"var(--text-secondary, #374151)",border:"1px solid var(--nice-text-secondary, #4b5563)",borderRadius:6,color:"var(--bg-primary, #fff)"}})}};return e.jsxs("div",{className:`nice-code-template ${B||""}`,style:{display:"flex",height:"100%",background:"var(--bg-canvas, #0d1117)",color:"var(--text-primary, #e6edf3)",fontFamily:"system-ui, sans-serif",...k},"data-testid":L,children:[T&&e.jsxs("div",{style:{width:280,borderRight:"1px solid var(--nice-border, #30363d)",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--nice-border, #30363d)",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("span",{style:{fontWeight:500},children:"📚 Templates"}),e.jsx("button",{onClick:o,style:{padding:"4px 8px",background:"var(--color-primary, #3b82f6)",border:"none",borderRadius:4,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"+ New"})]}),e.jsxs("div",{style:{flex:1,overflow:"auto"},children:[D.length>0&&e.jsxs("div",{style:{padding:8},children:[e.jsx("div",{style:{fontSize:11,color:"var(--text-muted, #8b949e)",padding:"8px 8px 4px",fontWeight:500},children:"CUSTOM"}),D.map(l=>e.jsxs("div",{onClick:()=>x(l),style:{padding:"10px 12px",borderRadius:6,cursor:"pointer",background:z===l.id?"var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))":"transparent",display:"flex",alignItems:"center",gap:10},children:[e.jsx("span",{children:l.icon||"📄"}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:13},children:l.name}),e.jsx("div",{style:{fontSize:11,color:"var(--text-muted, #8b949e)"},children:l.category})]})]},l.id))]}),f.map(l=>e.jsxs("div",{style:{padding:8},children:[e.jsxs("div",{style:{fontSize:11,color:"var(--text-muted, #8b949e)",padding:"8px 8px 4px",fontWeight:500,display:"flex",alignItems:"center",gap:6},children:[e.jsx("span",{children:l.icon}),l.name.toUpperCase()]}),l.templates.map($=>e.jsxs("div",{onClick:()=>x($),style:{padding:"10px 12px",borderRadius:6,cursor:"pointer",background:z===$.id?"var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))":"transparent",display:"flex",alignItems:"center",gap:10},children:[e.jsx("span",{children:$.icon||"📄"}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:13},children:$.name}),e.jsx("div",{style:{fontSize:11,color:"var(--text-muted, #8b949e)"},children:$.description})]})]},$.id))]},l.id))]})]}),e.jsx("div",{style:{flex:1,display:"flex",flexDirection:"column"},children:t?e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--nice-border, #30363d)",background:"var(--bg-elevated, #161b22)",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("span",{style:{fontSize:24},children:t.icon||"📄"}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:500},children:t.name}),e.jsx("div",{style:{fontSize:12,color:"var(--text-muted, #8b949e)"},children:t.description})]})]}),e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("button",{onClick:()=>c?.(t,"json"),style:{padding:"6px 12px",background:"var(--text-secondary, #374151)",border:"none",borderRadius:6,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"📤 Export"}),e.jsx("button",{onClick:i,style:{padding:"6px 16px",background:"var(--color-success, #22c55e)",border:"none",borderRadius:6,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12,fontWeight:500},children:"⚡ Generate"})]})]}),e.jsx("div",{style:{display:"flex",borderBottom:"1px solid var(--nice-border, #30363d)",background:"var(--bg-elevated, #161b22)"},children:["variables","editor","preview"].map(l=>e.jsxs("button",{onClick:()=>N(l),style:{padding:"10px 20px",background:u===l?"var(--bg-canvas, #0d1117)":"transparent",border:"none",borderBottom:u===l?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent",color:u===l?"var(--bg-primary, #fff)":"var(--text-muted, #8b949e)",cursor:"pointer",textTransform:"capitalize"},children:[l==="variables"&&"⚙️ ",l==="editor"&&"✏️ ",l==="preview"&&"👁️ ",l]},l))}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[u==="variables"&&e.jsx("div",{style:{flex:1,padding:20,overflow:"auto"},children:e.jsxs("div",{style:{maxWidth:500},children:[e.jsx("h3",{style:{marginBottom:20},children:"Template Variables"}),t.variables.map(l=>e.jsxs("div",{style:{marginBottom:16},children:[e.jsxs("label",{style:{display:"block",fontSize:12,color:"var(--text-muted, #8b949e)",marginBottom:4},children:[l.name,l.required&&e.jsx("span",{style:{color:"var(--color-error, #ef4444)"},children:" *"})]}),_(l),l.description&&e.jsx("div",{style:{fontSize:11,color:"var(--text-muted, #6b7280)",marginTop:4},children:l.description})]},l.id))]})}),u==="editor"&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{width:200,borderRight:"1px solid var(--nice-border, #30363d)",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"8px 12px",borderBottom:"1px solid var(--nice-border, #30363d)",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("span",{style:{fontSize:12,color:"var(--text-muted, #8b949e)"},children:"Files"}),e.jsx("button",{onClick:P,style:{padding:"2px 6px",background:"var(--text-secondary, #374151)",border:"none",borderRadius:4,color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:12},children:"+"})]}),e.jsx("div",{style:{flex:1,overflow:"auto"},children:t.files.map(l=>e.jsxs("div",{onClick:()=>V(l.id),style:{padding:"8px 12px",cursor:"pointer",background:I===l.id?"var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))":"transparent",borderLeft:I===l.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("div",{style:{fontSize:12,overflow:"hidden",textOverflow:"ellipsis"},children:l.name}),e.jsx("button",{onClick:$=>{$.stopPropagation(),p(l.id)},style:{background:"none",border:"none",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:12,opacity:.7},children:"✕"})]},l.id))})]}),e.jsx("div",{style:{flex:1,display:"flex",flexDirection:"column"},children:r&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{padding:"8px 12px",borderBottom:"1px solid var(--nice-border, #30363d)",background:"var(--bg-elevated, #161b22)",fontSize:12},children:[r.path,"/",r.name,r.condition&&e.jsxs("span",{style:{color:"var(--color-warning, #f59e0b)",marginLeft:8},children:["(if: ",r.condition,")"]})]}),e.jsx("textarea",{value:r.content,onChange:l=>d(r.id,l.target.value),style:{flex:1,padding:16,background:"var(--bg-canvas, #0d1117)",color:"var(--text-primary, #e6edf3)",border:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontSize:13,lineHeight:1.5,resize:"none"}})]})})]}),u==="preview"&&e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsx("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--nice-border, #30363d)",background:"var(--bg-elevated, #161b22)"},children:e.jsxs("span",{style:{fontSize:12,color:"var(--text-muted, #8b949e)"},children:[m.length," file(s) will be generated"]})}),e.jsx("div",{style:{flex:1,overflow:"auto"},children:m.map((l,$)=>e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-border, #30363d)"},children:[e.jsxs("div",{style:{padding:"8px 16px",background:"var(--text-primary, #1f2937)",fontFamily:"monospace",fontSize:12,color:"var(--text-muted, #8b949e)"},children:["📄 ",l.path]}),e.jsx("pre",{style:{margin:0,padding:16,background:"var(--bg-canvas, #0d1117)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontSize:12,lineHeight:1.5,overflow:"auto"},children:l.content})]},$))})]})]})]}):e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"var(--text-muted, #8b949e)"},children:[e.jsx("span",{style:{fontSize:64,marginBottom:16},children:"📚"}),e.jsx("span",{style:{fontSize:18},children:"Select a template"}),e.jsx("span",{style:{fontSize:12,marginTop:4},children:"Choose from the library or create a new template"}),e.jsx("button",{onClick:o,style:{marginTop:20,padding:"10px 20px",background:"var(--color-primary, #3b82f6)",border:"none",borderRadius:6,color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"➕ Create Template"})]})})]})},Je=Object.freeze(Object.defineProperty({__proto__:null,NiceCodeTemplate:ye},Symbol.toStringTag,{value:"Module"}));exports.NiceAPIFlow=ge;exports.NiceAPIFlow$1=Be;exports.NiceCodePreview=we;exports.NiceCodeTemplate=ye;exports.NiceCodeTemplate$1=Je;exports.NiceComponentDesigner=je;exports.NiceDataMapper=me;exports.NiceDataMapper$1=De;exports.NiceEventOrchestrator=xe;exports.NiceEventOrchestrator$1=Fe;exports.NiceLowCodeStudio=be;exports.NicePageBuilder=ke;exports.NiceStateDesigner=ce;exports.NiceStateDesigner$1=ze;exports.NiceTestBuilder=he;exports.NiceTestBuilder$1=Ve;
|