@uipath/apollo-wind 0.8.0 → 0.9.0

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.
Files changed (40) hide show
  1. package/dist/archived-ui-path.svg +3 -0
  2. package/dist/components/ui/index.cjs +10 -10
  3. package/dist/components/ui/input.cjs +1 -1
  4. package/dist/components/ui/input.js +1 -1
  5. package/dist/components/ui/select.cjs +1 -1
  6. package/dist/components/ui/select.js +1 -1
  7. package/dist/components/ui/textarea.cjs +1 -1
  8. package/dist/components/ui/textarea.js +1 -1
  9. package/dist/examples/admin-layout-example.cjs +490 -0
  10. package/dist/examples/admin-layout-example.js +411 -0
  11. package/dist/examples/app-shell-example.cjs +452 -0
  12. package/dist/examples/app-shell-example.js +418 -0
  13. package/dist/examples/dashboard-example.cjs +590 -0
  14. package/dist/examples/dashboard-example.js +556 -0
  15. package/dist/examples/data-management-example.cjs +584 -0
  16. package/dist/examples/data-management-example.js +550 -0
  17. package/dist/examples/flow-editor-layout-example.cjs +309 -0
  18. package/dist/examples/flow-editor-layout-example.js +269 -0
  19. package/dist/examples/flow-start-example.cjs +467 -0
  20. package/dist/examples/flow-start-example.js +433 -0
  21. package/dist/examples/form-builder-example.cjs +674 -0
  22. package/dist/examples/form-builder-example.js +640 -0
  23. package/dist/examples/new-project-example.cjs +550 -0
  24. package/dist/examples/new-project-example.js +516 -0
  25. package/dist/examples/settings-example.cjs +864 -0
  26. package/dist/examples/settings-example.js +830 -0
  27. package/dist/examples/vscode-example.cjs +340 -0
  28. package/dist/examples/vscode-example.js +270 -0
  29. package/dist/templates/admin-layout-example.d.ts +92 -0
  30. package/dist/templates/app-shell-example.d.ts +52 -0
  31. package/dist/templates/dashboard-example.d.ts +11 -0
  32. package/dist/templates/data-management-example.d.ts +1 -0
  33. package/dist/templates/flow-editor-layout-example.d.ts +22 -0
  34. package/dist/templates/flow-start-example.d.ts +30 -0
  35. package/dist/templates/form-builder-example.d.ts +1 -0
  36. package/dist/templates/new-project-example.d.ts +30 -0
  37. package/dist/templates/settings-example.d.ts +1 -0
  38. package/dist/templates/vscode-example.d.ts +80 -0
  39. package/dist/ui-path.svg +11 -0
  40. package/package.json +1 -1
package/dist/examples/new-project-example.js ADDED
@@ -0,0 +1,516 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { ArrowUp, Plus, Search, X } from "lucide-react";
3
+ import { useMemo, useState } from "react";
4
+ import { Button } from "../components/ui/button.js";
5
+ import { Checkbox } from "../components/ui/checkbox.js";
6
+ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "../components/ui/drawer.js";
7
+ import { Input } from "../components/ui/input.js";
8
+ import { Label } from "../components/ui/label.js";
9
+ import { Textarea } from "../components/ui/textarea.js";
10
+ import { cn } from "../lib/index.js";
11
+ import { Column, Grid, Row } from "../components/ui/layout/index.js";
12
+ function NewProjectExample({ className, title = "Let's create an agentic process", subtitle = 'Design and orchestrate end-to-end processes with AI agents, robots, and people using BPMN-based diagrams.', templates = [
13
+ {
14
+ id: '1',
15
+ name: 'Invoice processing',
16
+ description: 'Automate the end-to-end process of capturing, validating, and approving invoices.',
17
+ usageCount: 3400,
18
+ category: 'financial',
19
+ tools: [
20
+ 'office365',
21
+ 'maestro'
22
+ ]
23
+ },
24
+ {
25
+ id: '2',
26
+ name: 'Loan processing',
27
+ description: 'Optimize the evaluation, approval, and disbursement of loans.',
28
+ usageCount: 1700,
29
+ category: 'financial',
30
+ tools: [
31
+ 'google',
32
+ 'maestro'
33
+ ]
34
+ },
35
+ {
36
+ id: '3',
37
+ name: 'Supplier onboarding',
38
+ description: 'Coordinate the registration, verification, and integration of new suppliers.',
39
+ usageCount: 1200,
40
+ category: 'other',
41
+ tools: [
42
+ 'office365',
43
+ 'maestro'
44
+ ]
45
+ }
46
+ ], categories = [
47
+ {
48
+ id: 'financial',
49
+ label: 'Financial'
50
+ },
51
+ {
52
+ id: 'healthcare',
53
+ label: 'Healthcare'
54
+ },
55
+ {
56
+ id: 'other',
57
+ label: 'Other'
58
+ }
59
+ ], tools = [
60
+ {
61
+ id: 'office365',
62
+ label: 'Office365'
63
+ },
64
+ {
65
+ id: 'jira',
66
+ label: 'Jira'
67
+ },
68
+ {
69
+ id: 'sap-concur',
70
+ label: 'SAP Concur'
71
+ },
72
+ {
73
+ id: 'slack',
74
+ label: 'Slack'
75
+ },
76
+ {
77
+ id: 'docusign',
78
+ label: 'DocuSign'
79
+ }
80
+ ], autopilot, onCreateBlank }) {
81
+ const [autopilotPrompt, setAutopilotPrompt] = useState('');
82
+ const [drawerOpen, setDrawerOpen] = useState(false);
83
+ const [searchQuery, setSearchQuery] = useState('');
84
+ const [selectedCategories, setSelectedCategories] = useState([]);
85
+ const [selectedTools, setSelectedTools] = useState([]);
86
+ const handleAutopilotSubmit = ()=>{
87
+ if (autopilot?.onSubmit && autopilotPrompt.trim()) autopilot.onSubmit(autopilotPrompt);
88
+ };
89
+ const formatUsageCount = (count)=>{
90
+ if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
91
+ return count.toString();
92
+ };
93
+ const toggleCategory = (categoryId)=>{
94
+ setSelectedCategories((prev)=>prev.includes(categoryId) ? prev.filter((c)=>c !== categoryId) : [
95
+ ...prev,
96
+ categoryId
97
+ ]);
98
+ };
99
+ const toggleTool = (toolId)=>{
100
+ setSelectedTools((prev)=>prev.includes(toolId) ? prev.filter((t)=>t !== toolId) : [
101
+ ...prev,
102
+ toolId
103
+ ]);
104
+ };
105
+ const filteredExamples = useMemo(()=>templates.filter((template)=>{
106
+ const matchesSearch = '' === searchQuery || template.name.toLowerCase().includes(searchQuery.toLowerCase()) || template.description.toLowerCase().includes(searchQuery.toLowerCase());
107
+ const matchesCategory = 0 === selectedCategories.length || template.category && selectedCategories.includes(template.category);
108
+ const matchesTools = 0 === selectedTools.length || template.tools && template.tools.some((tool)=>selectedTools.includes(tool));
109
+ return matchesSearch && matchesCategory && matchesTools;
110
+ }), [
111
+ templates,
112
+ searchQuery,
113
+ selectedCategories,
114
+ selectedTools
115
+ ]);
116
+ const ExampleCard = ({ template })=>/*#__PURE__*/ jsxs(Column, {
117
+ className: "group rounded-lg border border-border/30 bg-card p-8 transition-all hover:border-border/60 hover:shadow-sm",
118
+ children: [
119
+ /*#__PURE__*/ jsxs(Column, {
120
+ gap: 4,
121
+ flex: 1,
122
+ className: "mb-8",
123
+ children: [
124
+ /*#__PURE__*/ jsx("h3", {
125
+ className: "text-base font-semibold leading-tight",
126
+ children: template.name
127
+ }),
128
+ /*#__PURE__*/ jsx("p", {
129
+ className: "text-sm text-muted-foreground leading-relaxed",
130
+ children: template.description
131
+ }),
132
+ /*#__PURE__*/ jsxs(Row, {
133
+ gap: 1.5,
134
+ align: "center",
135
+ className: "text-xs text-muted-foreground",
136
+ children: [
137
+ /*#__PURE__*/ jsx("svg", {
138
+ className: "h-3.5 w-3.5",
139
+ fill: "none",
140
+ stroke: "currentColor",
141
+ viewBox: "0 0 24 24",
142
+ xmlns: "http://www.w3.org/2000/svg",
143
+ children: /*#__PURE__*/ jsx("path", {
144
+ strokeLinecap: "round",
145
+ strokeLinejoin: "round",
146
+ strokeWidth: 2,
147
+ d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
148
+ })
149
+ }),
150
+ /*#__PURE__*/ jsx("span", {
151
+ children: formatUsageCount(template.usageCount)
152
+ })
153
+ ]
154
+ })
155
+ ]
156
+ }),
157
+ /*#__PURE__*/ jsx(Button, {
158
+ variant: "outline",
159
+ size: "sm",
160
+ className: "h-9 w-full",
161
+ onClick: template.onUse,
162
+ children: "Use"
163
+ })
164
+ ]
165
+ });
166
+ return /*#__PURE__*/ jsxs(Fragment, {
167
+ children: [
168
+ /*#__PURE__*/ jsxs(Column, {
169
+ minH: "screen",
170
+ gap: 8,
171
+ className: cn('bg-background px-8 py-16 md:px-16 md:py-20', className),
172
+ children: [
173
+ /*#__PURE__*/ jsx("div", {
174
+ children: /*#__PURE__*/ jsxs(Row, {
175
+ justify: "between",
176
+ align: "start",
177
+ gap: 8,
178
+ children: [
179
+ /*#__PURE__*/ jsxs(Column, {
180
+ flex: 1,
181
+ children: [
182
+ /*#__PURE__*/ jsx("h1", {
183
+ className: "text-3xl font-bold tracking-tight",
184
+ children: title
185
+ }),
186
+ /*#__PURE__*/ jsx("p", {
187
+ className: "mt-4 text-base text-muted-foreground",
188
+ children: subtitle
189
+ })
190
+ ]
191
+ }),
192
+ /*#__PURE__*/ jsx(Button, {
193
+ variant: "link",
194
+ onClick: ()=>setDrawerOpen(true),
195
+ className: "shrink-0",
196
+ children: "Explore templates"
197
+ })
198
+ ]
199
+ })
200
+ }),
201
+ /*#__PURE__*/ jsxs(Grid, {
202
+ gap: 8,
203
+ cols: 1,
204
+ className: "sm:grid-cols-2 lg:grid-cols-4",
205
+ children: [
206
+ /*#__PURE__*/ jsxs("button", {
207
+ className: "group flex cursor-pointer flex-col items-center justify-between rounded-lg border border-dashed border-border/40 bg-card p-8 text-center transition-all hover:border-border/70 hover:shadow-sm",
208
+ onClick: onCreateBlank,
209
+ children: [
210
+ /*#__PURE__*/ jsxs(Column, {
211
+ gap: 4,
212
+ w: "full",
213
+ children: [
214
+ /*#__PURE__*/ jsx("h3", {
215
+ className: "text-base font-semibold",
216
+ children: "Blank agentic process"
217
+ }),
218
+ /*#__PURE__*/ jsx("p", {
219
+ className: "text-sm text-muted-foreground",
220
+ children: "Start building without a template."
221
+ })
222
+ ]
223
+ }),
224
+ /*#__PURE__*/ jsx("div", {
225
+ className: "mt-8 flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-border/50",
226
+ children: /*#__PURE__*/ jsx(Plus, {
227
+ className: "h-8 w-8 text-primary"
228
+ })
229
+ })
230
+ ]
231
+ }),
232
+ templates.slice(0, 3).map((template)=>/*#__PURE__*/ jsx(ExampleCard, {
233
+ template: template
234
+ }, template.id))
235
+ ]
236
+ }),
237
+ autopilot && /*#__PURE__*/ jsxs("div", {
238
+ className: "mx-auto w-full max-w-3xl",
239
+ children: [
240
+ /*#__PURE__*/ jsx("h2", {
241
+ className: "mb-6 text-lg font-semibold",
242
+ children: "Autopilot"
243
+ }),
244
+ /*#__PURE__*/ jsxs("div", {
245
+ className: "rounded-lg border border-border/30 bg-card",
246
+ children: [
247
+ /*#__PURE__*/ jsxs("div", {
248
+ className: "relative p-6",
249
+ children: [
250
+ /*#__PURE__*/ jsx(Textarea, {
251
+ placeholder: autopilot.placeholder,
252
+ value: autopilotPrompt,
253
+ onChange: (e)=>setAutopilotPrompt(e.target.value),
254
+ className: "min-h-[120px] resize-none border-0 p-0 pb-12 text-sm placeholder:text-muted-foreground/50 focus-visible:ring-0",
255
+ onKeyDown: (e)=>{
256
+ if ('Enter' === e.key && (e.metaKey || e.ctrlKey)) {
257
+ e.preventDefault();
258
+ handleAutopilotSubmit();
259
+ }
260
+ }
261
+ }),
262
+ /*#__PURE__*/ jsxs("div", {
263
+ className: "absolute bottom-6 left-6 right-6 flex items-center justify-between",
264
+ children: [
265
+ /*#__PURE__*/ jsx(Button, {
266
+ variant: "ghost",
267
+ size: "icon",
268
+ className: "h-8 w-8",
269
+ onClick: ()=>setAutopilotPrompt(''),
270
+ disabled: !autopilotPrompt,
271
+ "aria-label": "Clear prompt",
272
+ children: /*#__PURE__*/ jsx(Plus, {
273
+ className: "h-4 w-4"
274
+ })
275
+ }),
276
+ /*#__PURE__*/ jsx(Button, {
277
+ variant: "ghost",
278
+ size: "icon",
279
+ className: "h-8 w-8",
280
+ onClick: handleAutopilotSubmit,
281
+ disabled: !autopilotPrompt.trim(),
282
+ "aria-label": "Submit prompt",
283
+ children: /*#__PURE__*/ jsx(ArrowUp, {
284
+ className: "h-4 w-4"
285
+ })
286
+ })
287
+ ]
288
+ })
289
+ ]
290
+ }),
291
+ autopilot.disclaimer && /*#__PURE__*/ jsx("div", {
292
+ className: "border-t border-border/20 px-6 py-3 text-center",
293
+ children: /*#__PURE__*/ jsx("p", {
294
+ className: "text-xs text-muted-foreground",
295
+ children: autopilot.disclaimer
296
+ })
297
+ })
298
+ ]
299
+ })
300
+ ]
301
+ })
302
+ ]
303
+ }),
304
+ /*#__PURE__*/ jsx(Drawer, {
305
+ open: drawerOpen,
306
+ onOpenChange: setDrawerOpen,
307
+ children: /*#__PURE__*/ jsxs(DrawerContent, {
308
+ className: "max-h-[75vh]",
309
+ children: [
310
+ /*#__PURE__*/ jsx(DrawerHeader, {
311
+ className: "border-b px-4 py-2 md:px-6 md:py-3",
312
+ children: /*#__PURE__*/ jsxs(Row, {
313
+ justify: "between",
314
+ align: "start",
315
+ children: [
316
+ /*#__PURE__*/ jsxs("div", {
317
+ children: [
318
+ /*#__PURE__*/ jsx(DrawerTitle, {
319
+ className: "text-base md:text-lg",
320
+ children: "Explore templates"
321
+ }),
322
+ /*#__PURE__*/ jsx(DrawerDescription, {
323
+ className: "text-xs md:text-sm",
324
+ children: "Build, customise and deploy an Agentic Process starting from a template."
325
+ })
326
+ ]
327
+ }),
328
+ /*#__PURE__*/ jsx(DrawerClose, {
329
+ asChild: true,
330
+ children: /*#__PURE__*/ jsxs(Button, {
331
+ variant: "ghost",
332
+ size: "icon",
333
+ className: "h-7 w-7 md:h-8 md:w-8 shrink-0",
334
+ children: [
335
+ /*#__PURE__*/ jsx(X, {
336
+ className: "h-3 w-3 md:h-4 md:w-4"
337
+ }),
338
+ /*#__PURE__*/ jsx("span", {
339
+ className: "sr-only",
340
+ children: "Close"
341
+ })
342
+ ]
343
+ })
344
+ })
345
+ ]
346
+ })
347
+ }),
348
+ /*#__PURE__*/ jsxs(Row, {
349
+ overflow: "hidden",
350
+ className: "h-[calc(75vh-80px)]",
351
+ children: [
352
+ /*#__PURE__*/ jsxs("div", {
353
+ className: "hidden w-56 border-r bg-muted/20 p-3 md:block",
354
+ children: [
355
+ /*#__PURE__*/ jsx("div", {
356
+ className: "mb-3",
357
+ children: /*#__PURE__*/ jsxs("div", {
358
+ className: "relative",
359
+ children: [
360
+ /*#__PURE__*/ jsx(Search, {
361
+ className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground"
362
+ }),
363
+ /*#__PURE__*/ jsx(Input, {
364
+ placeholder: "Search",
365
+ value: searchQuery,
366
+ onChange: (e)=>setSearchQuery(e.target.value),
367
+ className: "h-8 pl-7 text-xs"
368
+ })
369
+ ]
370
+ })
371
+ }),
372
+ /*#__PURE__*/ jsxs(Column, {
373
+ gap: 3,
374
+ children: [
375
+ /*#__PURE__*/ jsxs("div", {
376
+ children: [
377
+ /*#__PURE__*/ jsxs(Row, {
378
+ justify: "between",
379
+ align: "center",
380
+ className: "mb-1.5",
381
+ children: [
382
+ /*#__PURE__*/ jsx("h4", {
383
+ className: "text-xs font-semibold",
384
+ children: "Category"
385
+ }),
386
+ /*#__PURE__*/ jsx(Button, {
387
+ variant: "ghost",
388
+ size: "sm",
389
+ className: "h-auto p-0 text-[10px]",
390
+ onClick: ()=>setSelectedCategories([]),
391
+ children: "Clear"
392
+ })
393
+ ]
394
+ }),
395
+ /*#__PURE__*/ jsx(Column, {
396
+ gap: 1.5,
397
+ children: categories.map((category)=>/*#__PURE__*/ jsxs(Row, {
398
+ gap: 2,
399
+ align: "center",
400
+ children: [
401
+ /*#__PURE__*/ jsx(Checkbox, {
402
+ id: `category-${category.id}`,
403
+ checked: selectedCategories.includes(category.id),
404
+ onCheckedChange: ()=>toggleCategory(category.id),
405
+ className: "h-3 w-3"
406
+ }),
407
+ /*#__PURE__*/ jsx(Label, {
408
+ htmlFor: `category-${category.id}`,
409
+ className: "cursor-pointer text-xs font-normal",
410
+ children: category.label
411
+ })
412
+ ]
413
+ }, category.id))
414
+ })
415
+ ]
416
+ }),
417
+ /*#__PURE__*/ jsxs("div", {
418
+ children: [
419
+ /*#__PURE__*/ jsxs(Row, {
420
+ justify: "between",
421
+ align: "center",
422
+ className: "mb-1.5",
423
+ children: [
424
+ /*#__PURE__*/ jsx("h4", {
425
+ className: "text-xs font-semibold",
426
+ children: "Tool"
427
+ }),
428
+ /*#__PURE__*/ jsx(Button, {
429
+ variant: "ghost",
430
+ size: "sm",
431
+ className: "h-auto p-0 text-[10px]",
432
+ onClick: ()=>setSelectedTools([]),
433
+ children: "Clear"
434
+ })
435
+ ]
436
+ }),
437
+ /*#__PURE__*/ jsx(Column, {
438
+ gap: 1.5,
439
+ children: tools.map((tool)=>/*#__PURE__*/ jsxs(Row, {
440
+ gap: 2,
441
+ align: "center",
442
+ children: [
443
+ /*#__PURE__*/ jsx(Checkbox, {
444
+ id: `tool-${tool.id}`,
445
+ checked: selectedTools.includes(tool.id),
446
+ onCheckedChange: ()=>toggleTool(tool.id),
447
+ className: "h-3 w-3"
448
+ }),
449
+ /*#__PURE__*/ jsx(Label, {
450
+ htmlFor: `tool-${tool.id}`,
451
+ className: "cursor-pointer text-xs font-normal",
452
+ children: tool.label
453
+ })
454
+ ]
455
+ }, tool.id))
456
+ })
457
+ ]
458
+ }),
459
+ /*#__PURE__*/ jsx(Button, {
460
+ variant: "link",
461
+ size: "sm",
462
+ className: "h-auto p-0 text-[10px]",
463
+ children: "Show more"
464
+ })
465
+ ]
466
+ })
467
+ ]
468
+ }),
469
+ /*#__PURE__*/ jsxs("div", {
470
+ className: "flex-1 overflow-y-auto p-3 md:p-4",
471
+ children: [
472
+ /*#__PURE__*/ jsx("div", {
473
+ className: "mb-3 md:hidden",
474
+ children: /*#__PURE__*/ jsxs("div", {
475
+ className: "relative",
476
+ children: [
477
+ /*#__PURE__*/ jsx(Search, {
478
+ className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
479
+ }),
480
+ /*#__PURE__*/ jsx(Input, {
481
+ placeholder: "Search",
482
+ value: searchQuery,
483
+ onChange: (e)=>setSearchQuery(e.target.value),
484
+ className: "pl-8 text-sm"
485
+ })
486
+ ]
487
+ })
488
+ }),
489
+ /*#__PURE__*/ jsx(Grid, {
490
+ gap: 3,
491
+ cols: 1,
492
+ className: "sm:grid-cols-2 lg:grid-cols-3",
493
+ children: filteredExamples.map((template)=>/*#__PURE__*/ jsx(ExampleCard, {
494
+ template: template
495
+ }, template.id))
496
+ }),
497
+ 0 === filteredExamples.length && /*#__PURE__*/ jsx(Row, {
498
+ h: 32,
499
+ justify: "center",
500
+ align: "center",
501
+ children: /*#__PURE__*/ jsx("p", {
502
+ className: "text-sm text-muted-foreground",
503
+ children: "No templates found"
504
+ })
505
+ })
506
+ ]
507
+ })
508
+ ]
509
+ })
510
+ ]
511
+ })
512
+ })
513
+ ]
514
+ });
515
+ }
516
+ export { NewProjectExample };