orcheo-canvas 0.0.1

package/src/design-system/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/design-system/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/design-system/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

package/src/design-system/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/design-system/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/src/design-system/ui/toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Toggle, toggleVariants };

package/src/design-system/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/features/account/components/settings/appearance-settings-tab.tsx

@@ -0,0 +1,70 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import ThemeSettings from "@features/account/components/theme-settings";
+
+const AppearanceSettingsTab = () => (
+  <div className="space-y-4">
+    <Card>
+      <CardHeader>
+        <CardTitle>Theme & Accessibility</CardTitle>
+        <CardDescription>
+          Customize the appearance of the application and accessibility
+          settings.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ThemeSettings />
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader>
+        <CardTitle>Interface Density</CardTitle>
+        <CardDescription>
+          Adjust the density of the user interface elements.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground">
+              <div className="mb-3 mt-2 space-y-2">
+                <div className="h-2 w-full rounded-lg bg-primary/10"></div>
+                <div className="h-2 w-full rounded-lg bg-primary/20"></div>
+                <div className="h-2 w-full rounded-lg bg-primary/10"></div>
+              </div>
+              <span className="text-xs font-medium">Compact</span>
+            </div>
+            <div className="flex flex-col items-center justify-between rounded-md border-2 border-primary bg-popover p-4 hover:bg-accent hover:text-accent-foreground">
+              <div className="mb-3 mt-2 space-y-3">
+                <div className="h-3 w-full rounded-lg bg-primary/10"></div>
+                <div className="h-3 w-full rounded-lg bg-primary/20"></div>
+                <div className="h-3 w-full rounded-lg bg-primary/10"></div>
+              </div>
+              <span className="text-xs font-medium">Default</span>
+            </div>
+            <div className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground">
+              <div className="mb-3 mt-2 space-y-4">
+                <div className="h-4 w-full rounded-lg bg-primary/10"></div>
+                <div className="h-4 w-full rounded-lg bg-primary/20"></div>
+                <div className="h-4 w-full rounded-lg bg-primary/10"></div>
+              </div>
+              <span className="text-xs font-medium">Comfortable</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Save Changes</Button>
+      </CardFooter>
+    </Card>
+  </div>
+);
+
+export default AppearanceSettingsTab;

package/src/features/account/components/settings/application-settings-tab.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Label } from "@/design-system/ui/label";
+import { Separator } from "@/design-system/ui/separator";
+import { Switch } from "@/design-system/ui/switch";
+
+type EditorSettingsState = {
+  autoSave: boolean;
+  showNodeLabels: boolean;
+  confirmBeforeDelete: boolean;
+  showMinimap: boolean;
+};
+
+const ApplicationSettingsTab = () => {
+  const [appSettings, setAppSettings] = useState<EditorSettingsState>({
+    autoSave: true,
+    showNodeLabels: true,
+    confirmBeforeDelete: true,
+    showMinimap: false,
+  });
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Workflow Editor Settings</CardTitle>
+          <CardDescription>
+            Configure how the workflow editor behaves.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="autosave" className="flex flex-col space-y-1">
+              <span>Auto-save Workflows</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Automatically save changes as you work
+              </span>
+            </Label>
+            <Switch
+              id="autosave"
+              checked={appSettings.autoSave}
+              onCheckedChange={(checked) =>
+                setAppSettings((prev) => ({ ...prev, autoSave: checked }))
+              }
+            />
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="nodelabels" className="flex flex-col space-y-1">
+              <span>Show Node Labels</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Display labels on workflow nodes
+              </span>
+            </Label>
+            <Switch
+              id="nodelabels"
+              checked={appSettings.showNodeLabels}
+              onCheckedChange={(checked) =>
+                setAppSettings((prev) => ({
+                  ...prev,
+                  showNodeLabels: checked,
+                }))
+              }
+            />
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="confirmdelete" className="flex flex-col space-y-1">
+              <span>Confirm Before Delete</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Show confirmation dialog before deleting nodes
+              </span>
+            </Label>
+            <Switch
+              id="confirmdelete"
+              checked={appSettings.confirmBeforeDelete}
+              onCheckedChange={(checked) =>
+                setAppSettings((prev) => ({
+                  ...prev,
+                  confirmBeforeDelete: checked,
+                }))
+              }
+            />
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="minimap" className="flex flex-col space-y-1">
+              <span>Show Minimap</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Display minimap navigation in workflow editor
+              </span>
+            </Label>
+            <Switch
+              id="minimap"
+              checked={appSettings.showMinimap}
+              onCheckedChange={(checked) =>
+                setAppSettings((prev) => ({ ...prev, showMinimap: checked }))
+              }
+            />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save Editor Settings</Button>
+        </CardFooter>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Data Storage</CardTitle>
+          <CardDescription>
+            Manage your data storage preferences.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <h3 className="font-medium">Storage Usage</h3>
+            <div className="h-4 w-full rounded-full bg-secondary">
+              <div
+                className="h-4 rounded-full bg-primary"
+                style={{ width: "35%" }}
+              ></div>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              3.5 GB used of 10 GB (35%)
+            </p>
+          </div>
+          <div className="pt-2">
+            <Button variant="outline">Manage Storage</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default ApplicationSettingsTab;

package/src/features/account/components/settings/notification-settings-tab.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Label } from "@/design-system/ui/label";
+import { Separator } from "@/design-system/ui/separator";
+import { Switch } from "@/design-system/ui/switch";
+
+type EmailNotificationState = {
+  workflow: boolean;
+  security: boolean;
+  marketing: boolean;
+};
+
+const NotificationSettingsTab = () => {
+  const [emailNotifications, setEmailNotifications] =
+    useState<EmailNotificationState>({
+      workflow: true,
+      security: true,
+      marketing: false,
+    });
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Email Notifications</CardTitle>
+          <CardDescription>
+            Configure when you'll receive email notifications.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="workflow" className="flex flex-col space-y-1">
+              <span>Workflow Notifications</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Receive emails when workflows fail or complete
+              </span>
+            </Label>
+            <Switch
+              id="workflow"
+              checked={emailNotifications.workflow}
+              onCheckedChange={(checked) =>
+                setEmailNotifications((prev) => ({
+                  ...prev,
+                  workflow: checked,
+                }))
+              }
+            />
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="security" className="flex flex-col space-y-1">
+              <span>Security Alerts</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Receive emails about security events
+              </span>
+            </Label>
+            <Switch
+              id="security"
+              checked={emailNotifications.security}
+              onCheckedChange={(checked) =>
+                setEmailNotifications((prev) => ({
+                  ...prev,
+                  security: checked,
+                }))
+              }
+            />
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between space-x-2">
+            <Label htmlFor="marketing" className="flex flex-col space-y-1">
+              <span>Marketing</span>
+              <span className="font-normal text-xs text-muted-foreground">
+                Receive emails about new features and updates
+              </span>
+            </Label>
+            <Switch
+              id="marketing"
+              checked={emailNotifications.marketing}
+              onCheckedChange={(checked) =>
+                setEmailNotifications((prev) => ({
+                  ...prev,
+                  marketing: checked,
+                }))
+              }
+            />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save Notification Settings</Button>
+        </CardFooter>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>In-App Notifications</CardTitle>
+          <CardDescription>
+            Configure notifications that appear within the application.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4">
+            <div className="flex items-center space-x-4 rounded-md border p-4">
+              <div>
+                <p className="text-sm font-medium leading-none">
+                  Workflow Status Updates
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Show notifications when workflow status changes
+                </p>
+              </div>
+              <div className="ml-auto">
+                <Switch defaultChecked />
+              </div>
+            </div>
+            <div className="flex items-center space-x-4 rounded-md border p-4">
+              <div>
+                <p className="text-sm font-medium leading-none">
+                  Team Mentions
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Show notifications when you're mentioned in comments
+                </p>
+              </div>
+              <div className="ml-auto">
+                <Switch defaultChecked />
+              </div>
+            </div>
+            <div className="flex items-center space-x-4 rounded-md border p-4">
+              <div>
+                <p className="text-sm font-medium leading-none">
+                  System Announcements
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Show notifications about system updates
+                </p>
+              </div>
+              <div className="ml-auto">
+                <Switch />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default NotificationSettingsTab;