orcheo-canvas 0.0.1

package/src/features/account/components/settings/team-billing-settings-tab.tsx

@@ -0,0 +1,164 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Separator } from "@/design-system/ui/separator";
+
+const TeamBillingSettingsTab = () => (
+  <div className="space-y-4">
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Management</CardTitle>
+        <CardDescription>
+          Manage your team members and their access levels.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <h3 className="text-sm font-medium">Current Plan</h3>
+            <div className="flex items-center justify-between rounded-lg border p-4">
+              <div>
+                <p className="font-medium">Pro Plan</p>
+                <p className="text-sm text-muted-foreground">
+                  $49/month • 10 team members • Unlimited workflows
+                </p>
+              </div>
+              <Button variant="outline">Upgrade</Button>
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <h3 className="text-sm font-medium">Team Members</h3>
+            <div className="rounded-lg border">
+              <div className="flex items-center justify-between p-4">
+                <div className="flex items-center space-x-3">
+                  <div className="h-9 w-9 rounded-full bg-primary/10"></div>
+                  <div>
+                    <p className="font-medium">Avery Chen</p>
+                    <p className="text-sm text-muted-foreground">
+                      avery@orcheo.dev • Owner
+                    </p>
+                  </div>
+                </div>
+                <Button variant="ghost" size="sm" disabled>
+                  You
+                </Button>
+              </div>
+              <Separator />
+
+              <div className="flex items-center justify-between p-4">
+                <div className="flex items-center space-x-3">
+                  <div className="h-9 w-9 rounded-full bg-primary/10"></div>
+                  <div>
+                    <p className="font-medium">Sky Patel</p>
+                    <p className="text-sm text-muted-foreground">
+                      sky@orcheo.dev • Admin
+                    </p>
+                  </div>
+                </div>
+                <Button variant="ghost" size="sm">
+                  Manage
+                </Button>
+              </div>
+              <Separator />
+
+              <div className="flex items-center justify-between p-4">
+                <div className="flex items-center space-x-3">
+                  <div className="h-9 w-9 rounded-full bg-primary/10"></div>
+                  <div>
+                    <p className="font-medium">Riley Morgan</p>
+                    <p className="text-sm text-muted-foreground">
+                      riley@orcheo.dev • Editor
+                    </p>
+                  </div>
+                </div>
+                <Button variant="ghost" size="sm">
+                  Manage
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-between">
+            <Button variant="outline">Invite Team Member</Button>
+            <Button variant="outline">Manage Team</Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader>
+        <CardTitle>Billing</CardTitle>
+        <CardDescription>
+          Manage your billing information and view your invoices.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="rounded-lg border">
+          <div className="flex items-center justify-between p-4">
+            <div>
+              <p className="font-medium">Payment Method</p>
+              <p className="text-sm text-muted-foreground">
+                Visa ending in 4242
+              </p>
+            </div>
+            <Button variant="ghost" size="sm">
+              Change
+            </Button>
+          </div>
+          <Separator />
+
+          <div className="flex items-center justify-between p-4">
+            <div>
+              <p className="font-medium">Billing Cycle</p>
+              <p className="text-sm text-muted-foreground">
+                Monthly • Next billing date: Nov 15, 2023
+              </p>
+            </div>
+            <Button variant="ghost" size="sm">
+              Change
+            </Button>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <h3 className="text-sm font-medium">Recent Invoices</h3>
+          <div className="rounded-lg border">
+            <div className="flex items-center justify-between p-4">
+              <div>
+                <p className="font-medium">October 2023</p>
+                <p className="text-sm text-muted-foreground">
+                  Pro Plan • $49.00
+                </p>
+              </div>
+              <Button variant="ghost" size="sm">
+                Download
+              </Button>
+            </div>
+            <Separator />
+
+            <div className="flex items-center justify-between p-4">
+              <div>
+                <p className="font-medium">September 2023</p>
+                <p className="text-sm text-muted-foreground">
+                  Pro Plan • $49.00
+                </p>
+              </div>
+              <Button variant="ghost" size="sm">
+                Download
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline">View All Invoices</Button>
+      </CardFooter>
+    </Card>
+  </div>
+);
+
+export default TeamBillingSettingsTab;

package/src/features/account/components/theme-settings.tsx

@@ -0,0 +1,228 @@
+import React from "react";
+import { Check, Monitor, Moon, Palette, Sliders, Sun, Zap } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+import { Label } from "@/design-system/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/design-system/ui/radio-group";
+import { Separator } from "@/design-system/ui/separator";
+import { Switch } from "@/design-system/ui/switch";
+import { cn } from "@/lib/utils";
+
+import { useThemePreferences } from "./use-theme-preferences";
+
+interface ThemeSettingsProps {
+  onThemeChange?: (theme: "light" | "dark" | "system") => void;
+  onReducedMotionChange?: (enabled: boolean) => void;
+  onHighContrastChange?: (enabled: boolean) => void;
+  className?: string;
+}
+
+const accentColors = [
+  { name: "Blue", value: "blue", class: "bg-blue-500" },
+  { name: "Green", value: "green", class: "bg-green-500" },
+  { name: "Purple", value: "purple", class: "bg-purple-500" },
+  { name: "Red", value: "red", class: "bg-red-500" },
+  { name: "Orange", value: "orange", class: "bg-orange-500" },
+  { name: "Pink", value: "pink", class: "bg-pink-500" },
+];
+
+export default function ThemeSettings({
+  onThemeChange,
+  onReducedMotionChange,
+  onHighContrastChange,
+  className,
+}: ThemeSettingsProps) {
+  const {
+    accentColor,
+    highContrast,
+    reducedMotion,
+    setAccentColor,
+    setHighContrast,
+    setReducedMotion,
+    setTheme,
+    theme,
+  } = useThemePreferences({
+    onThemeChange,
+    onHighContrastChange,
+    onReducedMotionChange,
+  });
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      <div>
+        <h3 className="text-lg font-medium flex items-center gap-2">
+          <Palette className="h-5 w-5" />
+          Appearance
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          Customize the appearance of the application
+        </p>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-medium mb-3">Theme</h4>
+          <div className="grid grid-cols-3 gap-2">
+            <ThemeCard
+              label="Light"
+              icon={<Sun className="h-6 w-6" />}
+              isActive={theme === "light"}
+              onClick={() => setTheme("light")}
+            />
+            <ThemeCard
+              label="Dark"
+              icon={<Moon className="h-6 w-6" />}
+              isActive={theme === "dark"}
+              onClick={() => setTheme("dark")}
+            />
+            <ThemeCard
+              label="System"
+              icon={<Monitor className="h-6 w-6" />}
+              isActive={theme === "system"}
+              onClick={() => setTheme("system")}
+            />
+          </div>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-medium mb-3">Accent Color</h4>
+          <RadioGroup
+            value={accentColor}
+            onValueChange={setAccentColor}
+            className="grid grid-cols-3 sm:grid-cols-6 gap-2"
+          >
+            {accentColors.map((color) => (
+              <div key={color.value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={color.value}
+                  id={`color-${color.value}`}
+                  className="sr-only"
+                />
+
+                <Label
+                  htmlFor={`color-${color.value}`}
+                  className={cn(
+                    "h-8 w-full cursor-pointer rounded-md border-2 flex items-center justify-center",
+                    accentColor === color.value
+                      ? "border-primary"
+                      : "border-transparent",
+                  )}
+                >
+                  <span className={cn("h-6 w-6 rounded-full", color.class)} />
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <SectionHeader
+          icon={<Sliders className="h-4 w-4" />}
+          title="Accessibility"
+        />
+
+        <PreferenceToggle
+          id="reduced-motion"
+          label="Reduced motion"
+          description="Reduce the amount of animations"
+          checked={reducedMotion}
+          onToggle={setReducedMotion}
+        />
+
+        <PreferenceToggle
+          id="high-contrast"
+          label="High contrast"
+          description="Increase the contrast for better visibility"
+          checked={highContrast}
+          onToggle={setHighContrast}
+        />
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <SectionHeader icon={<Zap className="h-4 w-4" />} title="Performance" />
+
+        <PreferenceToggle
+          id="disable-animations"
+          label="Disable animations"
+          description="Turn off all animations for better performance"
+        />
+      </div>
+    </div>
+  );
+}
+
+interface ThemeCardProps {
+  label: string;
+  icon: React.ReactNode;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const ThemeCard: React.FC<ThemeCardProps> = ({
+  icon,
+  isActive,
+  label,
+  onClick,
+}) => (
+  <Button
+    variant={isActive ? "default" : "outline"}
+    className="flex flex-col items-center justify-center gap-2 h-24"
+    onClick={onClick}
+  >
+    {icon}
+    <span>{label}</span>
+    {isActive && (
+      <Check className="absolute top-2 right-2 h-4 w-4 text-primary-foreground" />
+    )}
+  </Button>
+);
+
+interface PreferenceToggleProps {
+  id: string;
+  label: string;
+  description: string;
+  checked?: boolean;
+  onToggle?: (checked: boolean) => void;
+}
+
+const PreferenceToggle: React.FC<PreferenceToggleProps> = ({
+  checked,
+  description,
+  id,
+  label,
+  onToggle,
+}) => {
+  const switchProps =
+    typeof checked === "boolean" ? { checked, onCheckedChange: onToggle } : {};
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="space-y-0.5">
+        <Label htmlFor={id}>{label}</Label>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <Switch id={id} {...switchProps} />
+    </div>
+  );
+};
+
+interface SectionHeaderProps {
+  icon: React.ReactNode;
+  title: string;
+}
+
+const SectionHeader: React.FC<SectionHeaderProps> = ({ icon, title }) => (
+  <div>
+    <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
+      {icon}
+      {title}
+    </h4>
+  </div>
+);

package/src/features/account/components/use-theme-preferences.ts

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+
+type ThemeOption = "light" | "dark" | "system";
+
+interface UseThemePreferencesArgs {
+  onThemeChange?: (theme: ThemeOption) => void;
+  onReducedMotionChange?: (enabled: boolean) => void;
+  onHighContrastChange?: (enabled: boolean) => void;
+}
+
+const isBrowser = () => typeof window !== "undefined";
+
+const getSystemTheme = (): ThemeOption => {
+  if (!isBrowser()) {
+    return "light";
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+const getStoredTheme = (): ThemeOption => {
+  if (!isBrowser()) {
+    return "system";
+  }
+
+  return (localStorage.getItem("theme") as ThemeOption | null) ?? "system";
+};
+
+const getStoredBoolean = (key: string): boolean => {
+  if (!isBrowser()) {
+    return false;
+  }
+
+  return localStorage.getItem(key) === "true";
+};
+
+const getStoredAccentColor = (): string => {
+  if (!isBrowser()) {
+    return "blue";
+  }
+
+  return localStorage.getItem("accentColor") || "blue";
+};
+
+export const useThemePreferences = ({
+  onThemeChange,
+  onReducedMotionChange,
+  onHighContrastChange,
+}: UseThemePreferencesArgs) => {
+  const [theme, setTheme] = useState<ThemeOption>(() => getStoredTheme());
+  const [reducedMotion, setReducedMotion] = useState(() =>
+    getStoredBoolean("reducedMotion"),
+  );
+  const [highContrast, setHighContrast] = useState(() =>
+    getStoredBoolean("highContrast"),
+  );
+  const [accentColor, setAccentColor] = useState(() => getStoredAccentColor());
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("theme", theme);
+    const nextTheme = theme === "system" ? getSystemTheme() : theme;
+    document.documentElement.classList.toggle("dark", nextTheme === "dark");
+    onThemeChange?.(theme);
+  }, [theme, onThemeChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("reducedMotion", String(reducedMotion));
+    document.documentElement.classList.toggle("reduce-motion", reducedMotion);
+    onReducedMotionChange?.(reducedMotion);
+  }, [reducedMotion, onReducedMotionChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("highContrast", String(highContrast));
+    document.documentElement.classList.toggle("high-contrast", highContrast);
+    onHighContrastChange?.(highContrast);
+  }, [highContrast, onHighContrastChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("accentColor", accentColor);
+    document.documentElement.setAttribute("data-accent", accentColor);
+  }, [accentColor]);
+
+  return {
+    accentColor,
+    highContrast,
+    reducedMotion,
+    setAccentColor,
+    setHighContrast,
+    setReducedMotion,
+    setTheme,
+    theme,
+  };
+};

package/src/features/account/pages/profile/components/profile-api-keys-tab.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+
+export function ProfileApiKeysTab() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>API Keys</CardTitle>
+        <CardDescription>
+          Manage your API keys for programmatic access to Orcheo Canvas.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between rounded-lg border p-4">
+          <div className="space-y-0.5">
+            <div className="font-medium">Production Key</div>
+            <div className="text-sm text-muted-foreground">
+              Created on Jan 12, 2023 • Last used 2 days ago
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm">
+              View
+            </Button>
+            <Button variant="destructive" size="sm">
+              Revoke
+            </Button>
+          </div>
+        </div>
+        <div className="flex items-center justify-between rounded-lg border p-4">
+          <div className="space-y-0.5">
+            <div className="font-medium">Development Key</div>
+            <div className="text-sm text-muted-foreground">
+              Created on Mar 5, 2023 • Last used 5 hours ago
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm">
+              View
+            </Button>
+            <Button variant="destructive" size="sm">
+              Revoke
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Generate New API Key</Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/features/account/pages/profile/components/profile-general-tab.tsx

@@ -0,0 +1,125 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { Separator } from "@/design-system/ui/separator";
+
+import type { ProfileUser } from "../types";
+
+interface ProfileGeneralTabProps {
+  user: ProfileUser;
+}
+
+export function ProfileGeneralTab({ user }: ProfileGeneralTabProps) {
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile Information</CardTitle>
+          <CardDescription>
+            Update your account profile information and email address.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-20 w-20">
+              <AvatarImage src={user.avatar} alt={user.name} />
+              <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
+            </Avatar>
+            <div className="space-y-1">
+              <h3 className="font-medium">{user.name}</h3>
+              <div className="flex items-center space-x-2">
+                <Badge variant="outline">{user.role}</Badge>
+                <span className="text-sm text-muted-foreground">
+                  Member since {user.joinDate}
+                </span>
+              </div>
+              <Button size="sm" variant="outline">
+                Change Avatar
+              </Button>
+            </div>
+          </div>
+          <Separator />
+          <form className="space-y-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  defaultValue={user.name}
+                  placeholder="Your name"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  defaultValue={user.email}
+                  placeholder="Your email"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="bio">Bio</Label>
+              <textarea
+                id="bio"
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                placeholder="Write a short bio about yourself"
+              />
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <Button>Save Changes</Button>
+        </CardFooter>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Preferences</CardTitle>
+          <CardDescription>
+            Manage your notification preferences and timezone settings.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="timezone">Timezone</Label>
+            <select
+              id="timezone"
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <option value="UTC">UTC (Coordinated Universal Time)</option>
+              <option value="America/New_York">
+                Eastern Time (US & Canada)
+              </option>
+              <option value="America/Chicago">
+                Central Time (US & Canada)
+              </option>
+              <option value="America/Denver">
+                Mountain Time (US & Canada)
+              </option>
+              <option value="America/Los_Angeles">
+                Pacific Time (US & Canada)
+              </option>
+              <option value="Europe/London">London (GMT/BST)</option>
+              <option value="Europe/Paris">Paris, Berlin, Rome (CET)</option>
+            </select>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save Preferences</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}