@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

package/dist/examples/form-builder-example.js

@@ -1,640 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Button } from "../components/ui/button.js";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
-import { Checkbox } from "../components/ui/checkbox.js";
-import { Input } from "../components/ui/input.js";
-import { Label } from "../components/ui/label.js";
-import { RadioGroup, RadioGroupItem } from "../components/ui/radio-group.js";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../components/ui/resizable.js";
-import { ScrollArea } from "../components/ui/scroll-area.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
-import { Slider } from "../components/ui/slider.js";
-import { Switch } from "../components/ui/switch.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs.js";
-import { Textarea } from "../components/ui/textarea.js";
-import { Column, Grid, Row } from "../components/ui/layout/index.js";
-function FormBuilderExample() {
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-        bio: '',
-        theme: 'system',
-        language: 'en',
-        notifications: true,
-        newsletter: false,
-        visibility: 'public',
-        experience: 5,
-        interests: [],
-        customJson: '{}'
-    });
-    const updateField = (field, value)=>{
-        setFormData((prev)=>({
-                ...prev,
-                [field]: value
-            }));
-    };
-    const handleReset = ()=>{
-        setFormData({
-            firstName: '',
-            lastName: '',
-            email: '',
-            phone: '',
-            bio: '',
-            theme: 'system',
-            language: 'en',
-            notifications: true,
-            newsletter: false,
-            visibility: 'public',
-            experience: 5,
-            interests: [],
-            customJson: '{}'
-        });
-    };
-    const handleSubmit = (e)=>{
-        e.preventDefault();
-        alert('Form submitted! Check the JSON preview.');
-    };
-    return /*#__PURE__*/ jsx(Column, {
-        h: "screen",
-        w: "full",
-        className: "bg-background",
-        children: /*#__PURE__*/ jsxs(ResizablePanelGroup, {
-            direction: "horizontal",
-            children: [
-                /*#__PURE__*/ jsx(ResizablePanel, {
-                    defaultSize: 50,
-                    minSize: 30,
-                    children: /*#__PURE__*/ jsx(ScrollArea, {
-                        className: "h-screen",
-                        children: /*#__PURE__*/ jsxs("div", {
-                            className: "p-6",
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: "mb-6",
-                                    children: [
-                                        /*#__PURE__*/ jsx("h1", {
-                                            className: "text-3xl font-bold tracking-tight",
-                                            children: "Form Builder"
-                                        }),
-                                        /*#__PURE__*/ jsx("p", {
-                                            className: "text-muted-foreground",
-                                            children: "A powerful example showcasing forms, tabs, and live JSON preview"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("form", {
-                                    onSubmit: handleSubmit,
-                                    className: "space-y-6",
-                                    children: [
-                                        /*#__PURE__*/ jsxs(Tabs, {
-                                            defaultValue: "personal",
-                                            className: "w-full",
-                                            children: [
-                                                /*#__PURE__*/ jsxs(TabsList, {
-                                                    className: "grid w-full grid-cols-4",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "personal",
-                                                            children: "Personal"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "preferences",
-                                                            children: "Preferences"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "settings",
-                                                            children: "Settings"
-                                                        }),
-                                                        /*#__PURE__*/ jsx(TabsTrigger, {
-                                                            value: "advanced",
-                                                            children: "Advanced"
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "personal",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Personal Information"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Enter your personal details below"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-4",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Grid, {
-                                                                        gap: 4,
-                                                                        cols: 2,
-                                                                        className: "md:grid-cols-2",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "firstName",
-                                                                                        children: "First Name"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                                        id: "firstName",
-                                                                                        placeholder: "John",
-                                                                                        value: formData.firstName,
-                                                                                        onChange: (e)=>updateField('firstName', e.target.value)
-                                                                                    })
-                                                                                ]
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "lastName",
-                                                                                        children: "Last Name"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx(Input, {
-                                                                                        id: "lastName",
-                                                                                        placeholder: "Doe",
-                                                                                        value: formData.lastName,
-                                                                                        onChange: (e)=>updateField('lastName', e.target.value)
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "email",
-                                                                                children: "Email"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Input, {
-                                                                                id: "email",
-                                                                                type: "email",
-                                                                                placeholder: "john.doe@example.com",
-                                                                                value: formData.email,
-                                                                                onChange: (e)=>updateField('email', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "phone",
-                                                                                children: "Phone Number"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Input, {
-                                                                                id: "phone",
-                                                                                type: "tel",
-                                                                                placeholder: "+1 (555) 000-0000",
-                                                                                value: formData.phone,
-                                                                                onChange: (e)=>updateField('phone', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "bio",
-                                                                                children: "Bio"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Textarea, {
-                                                                                id: "bio",
-                                                                                placeholder: "Tell us about yourself...",
-                                                                                rows: 4,
-                                                                                value: formData.bio,
-                                                                                onChange: (e)=>updateField('bio', e.target.value)
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "preferences",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Preferences"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Customize your experience"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-6",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "theme",
-                                                                                children: "Theme"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                                value: formData.theme,
-                                                                                onValueChange: (value)=>updateField('theme', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                                        id: "theme",
-                                                                                        children: /*#__PURE__*/ jsx(SelectValue, {
-                                                                                            placeholder: "Select a theme"
-                                                                                        })
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "light",
-                                                                                                children: "Light"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "dark",
-                                                                                                children: "Dark"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "system",
-                                                                                                children: "System"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 2,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "language",
-                                                                                children: "Language"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Select, {
-                                                                                value: formData.language,
-                                                                                onValueChange: (value)=>updateField('language', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(SelectTrigger, {
-                                                                                        id: "language",
-                                                                                        children: /*#__PURE__*/ jsx(SelectValue, {
-                                                                                            placeholder: "Select a language"
-                                                                                        })
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(SelectContent, {
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "en",
-                                                                                                children: "English"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "es",
-                                                                                                children: "Spanish"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "fr",
-                                                                                                children: "French"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "de",
-                                                                                                children: "German"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(SelectItem, {
-                                                                                                value: "ja",
-                                                                                                children: "Japanese"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                        justify: "between",
-                                                                        align: "center",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsxs(Column, {
-                                                                                gap: 0.5,
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx(Label, {
-                                                                                        htmlFor: "notifications",
-                                                                                        children: "Notifications"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx("p", {
-                                                                                        className: "text-sm text-muted-foreground",
-                                                                                        children: "Receive notifications about your account"
-                                                                                    })
-                                                                                ]
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Switch, {
-                                                                                id: "notifications",
-                                                                                checked: formData.notifications,
-                                                                                onCheckedChange: (checked)=>updateField('notifications', checked)
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                        gap: 2,
-                                                                        align: "center",
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Checkbox, {
-                                                                                id: "newsletter",
-                                                                                checked: formData.newsletter,
-                                                                                onCheckedChange: (checked)=>updateField('newsletter', !!checked)
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                htmlFor: "newsletter",
-                                                                                className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                                                                                children: "Subscribe to newsletter"
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "settings",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Settings"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Configure your account settings"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxs(CardContent, {
-                                                                className: "space-y-6",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                children: "Profile Visibility"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(RadioGroup, {
-                                                                                value: formData.visibility,
-                                                                                onValueChange: (value)=>updateField('visibility', value),
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "public",
-                                                                                                id: "public"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "public",
-                                                                                                className: "font-normal",
-                                                                                                children: "Public - Anyone can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "private",
-                                                                                                id: "private"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "private",
-                                                                                                className: "font-normal",
-                                                                                                children: "Private - Only you can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(RadioGroupItem, {
-                                                                                                value: "friends",
-                                                                                                id: "friends"
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: "friends",
-                                                                                                className: "font-normal",
-                                                                                                children: "Friends - Only friends can see your profile"
-                                                                                            })
-                                                                                        ]
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Row, {
-                                                                                justify: "between",
-                                                                                align: "center",
-                                                                                children: /*#__PURE__*/ jsxs(Label, {
-                                                                                    htmlFor: "experience",
-                                                                                    children: [
-                                                                                        "Experience Level: ",
-                                                                                        formData.experience
-                                                                                    ]
-                                                                                })
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Slider, {
-                                                                                id: "experience",
-                                                                                min: 0,
-                                                                                max: 10,
-                                                                                step: 1,
-                                                                                value: [
-                                                                                    formData.experience
-                                                                                ],
-                                                                                onValueChange: (value)=>updateField('experience', value[0])
-                                                                            }),
-                                                                            /*#__PURE__*/ jsxs(Row, {
-                                                                                justify: "between",
-                                                                                className: "text-xs text-muted-foreground",
-                                                                                children: [
-                                                                                    /*#__PURE__*/ jsx("span", {
-                                                                                        children: "Beginner"
-                                                                                    }),
-                                                                                    /*#__PURE__*/ jsx("span", {
-                                                                                        children: "Expert"
-                                                                                    })
-                                                                                ]
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsxs(Column, {
-                                                                        gap: 3,
-                                                                        children: [
-                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                children: "Interests"
-                                                                            }),
-                                                                            /*#__PURE__*/ jsx(Column, {
-                                                                                gap: 2,
-                                                                                children: [
-                                                                                    'Technology',
-                                                                                    'Design',
-                                                                                    'Business',
-                                                                                    'Science',
-                                                                                    'Arts'
-                                                                                ].map((interest)=>/*#__PURE__*/ jsxs(Row, {
-                                                                                        gap: 2,
-                                                                                        align: "center",
-                                                                                        children: [
-                                                                                            /*#__PURE__*/ jsx(Checkbox, {
-                                                                                                id: interest,
-                                                                                                checked: formData.interests.includes(interest),
-                                                                                                onCheckedChange: (checked)=>{
-                                                                                                    checked ? updateField('interests', [
-                                                                                                        ...formData.interests,
-                                                                                                        interest
-                                                                                                    ]) : updateField('interests', formData.interests.filter((i)=>i !== interest));
-                                                                                                }
-                                                                                            }),
-                                                                                            /*#__PURE__*/ jsx(Label, {
-                                                                                                htmlFor: interest,
-                                                                                                className: "text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                                                                                                children: interest
-                                                                                            })
-                                                                                        ]
-                                                                                    }, interest))
-                                                                            })
-                                                                        ]
-                                                                    })
-                                                                ]
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ jsx(TabsContent, {
-                                                    value: "advanced",
-                                                    className: "space-y-4",
-                                                    children: /*#__PURE__*/ jsxs(Card, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(CardHeader, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(CardTitle, {
-                                                                        children: "Advanced Settings"
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(CardDescription, {
-                                                                        children: "Configure advanced options with custom JSON"
-                                                                    })
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(CardContent, {
-                                                                className: "space-y-4",
-                                                                children: /*#__PURE__*/ jsxs(Column, {
-                                                                    gap: 2,
-                                                                    children: [
-                                                                        /*#__PURE__*/ jsx(Label, {
-                                                                            htmlFor: "customJson",
-                                                                            children: "Custom Configuration (JSON)"
-                                                                        }),
-                                                                        /*#__PURE__*/ jsx(Textarea, {
-                                                                            id: "customJson",
-                                                                            placeholder: '{"key": "value"}',
-                                                                            rows: 10,
-                                                                            className: "font-mono text-sm",
-                                                                            value: formData.customJson,
-                                                                            onChange: (e)=>updateField('customJson', e.target.value)
-                                                                        }),
-                                                                        /*#__PURE__*/ jsx("p", {
-                                                                            className: "text-xs text-muted-foreground",
-                                                                            children: "Enter valid JSON for custom configuration"
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            })
-                                                        ]
-                                                    })
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Row, {
-                                            gap: 4,
-                                            children: [
-                                                /*#__PURE__*/ jsx(Button, {
-                                                    type: "submit",
-                                                    children: "Submit"
-                                                }),
-                                                /*#__PURE__*/ jsx(Button, {
-                                                    type: "button",
-                                                    variant: "outline",
-                                                    onClick: handleReset,
-                                                    children: "Reset"
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    })
-                }),
-                /*#__PURE__*/ jsx(ResizableHandle, {
-                    withHandle: true
-                }),
-                /*#__PURE__*/ jsx(ResizablePanel, {
-                    defaultSize: 50,
-                    minSize: 30,
-                    children: /*#__PURE__*/ jsx(Column, {
-                        h: "screen",
-                        className: "border-l",
-                        children: /*#__PURE__*/ jsx(ScrollArea, {
-                            className: "h-full",
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "p-6",
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "mb-4",
-                                        children: [
-                                            /*#__PURE__*/ jsx("h2", {
-                                                className: "text-2xl font-bold tracking-tight",
-                                                children: "JSON Preview"
-                                            }),
-                                            /*#__PURE__*/ jsx("p", {
-                                                className: "text-muted-foreground",
-                                                children: "Live preview of your form data"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsx(Card, {
-                                        children: /*#__PURE__*/ jsx(CardContent, {
-                                            className: "p-4",
-                                            children: /*#__PURE__*/ jsx("pre", {
-                                                className: "overflow-x-auto text-sm",
-                                                children: /*#__PURE__*/ jsx("code", {
-                                                    children: JSON.stringify(formData, null, 2)
-                                                })
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
-                        })
-                    })
-                })
-            ]
-        })
-    });
-}
-export { FormBuilderExample };