@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-feature-flag-row/index.tsx

@@ -0,0 +1,386 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { Switch } from "../switch"
+import { Progress } from "../progress"
+import { Input } from "../input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+import {
+  Flag,
+  MoreVertical,
+  Users,
+  Percent,
+  Calendar,
+  History,
+  Trash2,
+  Copy,
+  Edit,
+  Eye,
+  Clock,
+  Target,
+} from "lucide-react"
+
+export type FeatureFlagStatus = "enabled" | "disabled" | "percentage" | "segment"
+
+export interface FeatureFlagSegment {
+  id: string
+  name: string
+  description?: string
+}
+
+export interface FeatureFlag {
+  id: string
+  key: string
+  name: string
+  description?: string
+  status: FeatureFlagStatus
+  enabled: boolean
+  percentage?: number
+  segments?: FeatureFlagSegment[]
+  createdAt: Date
+  updatedAt: Date
+  createdBy?: string
+  environment?: string
+  tags?: string[]
+}
+
+export interface WakaFeatureFlagRowProps {
+  /** Feature flag data */
+  flag: FeatureFlag
+  /** Callback when toggling the flag */
+  onToggle?: (enabled: boolean) => void
+  /** Callback when changing percentage */
+  onPercentageChange?: (percentage: number) => void
+  /** Callback when editing the flag */
+  onEdit?: () => void
+  /** Callback when deleting the flag */
+  onDelete?: () => void
+  /** Callback when viewing history */
+  onViewHistory?: () => void
+  /** Callback when duplicating the flag */
+  onDuplicate?: () => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Compact mode */
+  compact?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const statusConfig: Record<FeatureFlagStatus, { label: string; color: string }> = {
+  enabled: { label: "Enabled", color: "bg-green-500" },
+  disabled: { label: "Disabled", color: "bg-gray-500" },
+  percentage: { label: "Percentage", color: "bg-blue-500" },
+  segment: { label: "Segment", color: "bg-purple-500" },
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+  })
+}
+
+export function WakaFeatureFlagRow({
+  flag,
+  onToggle,
+  onPercentageChange,
+  onEdit,
+  onDelete,
+  onViewHistory,
+  onDuplicate,
+  readOnly = false,
+  compact = false,
+  className,
+}: WakaFeatureFlagRowProps) {
+  const [localPercentage, setLocalPercentage] = React.useState(flag.percentage || 0)
+  const statusConf = statusConfig[flag.status]
+
+  const handlePercentageChange = (value: string) => {
+    const num = Math.min(100, Math.max(0, parseInt(value) || 0))
+    setLocalPercentage(num)
+  }
+
+  const handlePercentageBlur = () => {
+    if (localPercentage !== flag.percentage) {
+      onPercentageChange?.(localPercentage)
+    }
+  }
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-3 p-2 border-b hover:bg-muted/30 transition-colors",
+          !flag.enabled && "opacity-60",
+          className
+        )}
+      >
+        <Flag className={cn("h-4 w-4 shrink-0", flag.enabled ? "text-green-500" : "text-muted-foreground")} />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <code className="font-medium text-sm truncate">{flag.key}</code>
+            {flag.environment && (
+              <Badge variant="outline" className="text-xs">
+                {flag.environment}
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {flag.status === "percentage" && (
+          <Badge variant="secondary" className="text-xs">
+            <Percent className="h-3 w-3 mr-1" />
+            {flag.percentage}%
+          </Badge>
+        )}
+
+        {flag.status === "segment" && flag.segments && (
+          <Badge variant="secondary" className="text-xs">
+            <Users className="h-3 w-3 mr-1" />
+            {flag.segments.length}
+          </Badge>
+        )}
+
+        <Switch
+          checked={flag.enabled}
+          onCheckedChange={onToggle}
+          disabled={readOnly}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        "border rounded-lg p-4 transition-all",
+        flag.enabled ? "bg-green-500/5 border-green-500/30" : "bg-muted/30",
+        className
+      )}
+    >
+      <div className="flex items-start gap-4">
+        {/* Flag icon */}
+        <div className={cn(
+          "w-10 h-10 rounded-lg flex items-center justify-center shrink-0",
+          flag.enabled ? "bg-green-500/20" : "bg-muted"
+        )}>
+          <Flag className={cn("h-5 w-5", flag.enabled ? "text-green-500" : "text-muted-foreground")} />
+        </div>
+
+        {/* Main content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <code className="font-semibold">{flag.key}</code>
+            <Badge className={cn("text-white text-xs", statusConf.color)}>
+              {statusConf.label}
+            </Badge>
+            {flag.environment && (
+              <Badge variant="outline" className="text-xs">
+                {flag.environment}
+              </Badge>
+            )}
+            {flag.tags?.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+
+          <div className="text-sm font-medium mt-1">{flag.name}</div>
+
+          {flag.description && (
+            <p className="text-sm text-muted-foreground mt-1">{flag.description}</p>
+          )}
+
+          {/* Status-specific controls */}
+          {flag.status === "percentage" && (
+            <div className="mt-3 space-y-2">
+              <div className="flex items-center gap-3">
+                <Percent className="h-4 w-4 text-muted-foreground" />
+                <div className="flex-1 max-w-xs">
+                  <Progress value={localPercentage} className="h-2" />
+                </div>
+                <div className="flex items-center gap-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={localPercentage}
+                    onChange={(e) => handlePercentageChange(e.target.value)}
+                    onBlur={handlePercentageBlur}
+                    className="w-16 h-8 text-center"
+                    disabled={readOnly}
+                  />
+                  <span className="text-sm text-muted-foreground">%</span>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {localPercentage}% of users will see this feature
+              </p>
+            </div>
+          )}
+
+          {flag.status === "segment" && flag.segments && flag.segments.length > 0 && (
+            <div className="mt-3">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+                <Target className="h-4 w-4" />
+                Targeting {flag.segments.length} segment{flag.segments.length > 1 ? "s" : ""}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {flag.segments.map((segment) => (
+                  <TooltipProvider key={segment.id}>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <Badge variant="secondary" className="text-xs">
+                          <Users className="h-3 w-3 mr-1" />
+                          {segment.name}
+                        </Badge>
+                      </TooltipTrigger>
+                      {segment.description && (
+                        <TooltipContent>{segment.description}</TooltipContent>
+                      )}
+                    </Tooltip>
+                  </TooltipProvider>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Metadata */}
+          <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              Created {formatDate(flag.createdAt)}
+              {flag.createdBy && ` by ${flag.createdBy}`}
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              Updated {formatDate(flag.updatedAt)}
+            </span>
+          </div>
+        </div>
+
+        {/* Toggle and actions */}
+        <div className="flex items-center gap-2 shrink-0">
+          <Switch
+            checked={flag.enabled}
+            onCheckedChange={onToggle}
+            disabled={readOnly}
+          />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {onEdit && (
+                <DropdownMenuItem onClick={onEdit}>
+                  <Edit className="h-4 w-4 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+              )}
+              {onViewHistory && (
+                <DropdownMenuItem onClick={onViewHistory}>
+                  <History className="h-4 w-4 mr-2" />
+                  View History
+                </DropdownMenuItem>
+              )}
+              {onDuplicate && (
+                <DropdownMenuItem onClick={onDuplicate}>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Duplicate
+                </DropdownMenuItem>
+              )}
+              {onDelete && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample feature flags for demo
+export const defaultFeatureFlags: FeatureFlag[] = [
+  {
+    id: "1",
+    key: "new_checkout_flow",
+    name: "New Checkout Flow",
+    description: "Enable the redesigned checkout experience with improved UX",
+    status: "percentage",
+    enabled: true,
+    percentage: 25,
+    createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 2 * 24 * 3600000),
+    createdBy: "product-team",
+    environment: "production",
+    tags: ["checkout", "experiment"],
+  },
+  {
+    id: "2",
+    key: "dark_mode_v2",
+    name: "Dark Mode V2",
+    description: "Updated dark mode with better contrast and accessibility",
+    status: "enabled",
+    enabled: true,
+    createdAt: new Date(Date.now() - 60 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 7 * 24 * 3600000),
+    environment: "production",
+    tags: ["ui", "accessibility"],
+  },
+  {
+    id: "3",
+    key: "beta_features",
+    name: "Beta Features Access",
+    description: "Allow access to beta features for selected user segments",
+    status: "segment",
+    enabled: true,
+    segments: [
+      { id: "s1", name: "Beta Testers", description: "Users who opted into beta program" },
+      { id: "s2", name: "Premium Users", description: "Users with premium subscription" },
+    ],
+    createdAt: new Date(Date.now() - 90 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 1 * 24 * 3600000),
+    createdBy: "engineering",
+    environment: "production",
+  },
+  {
+    id: "4",
+    key: "legacy_api",
+    name: "Legacy API Support",
+    description: "Maintain backward compatibility with v1 API",
+    status: "disabled",
+    enabled: false,
+    createdAt: new Date(Date.now() - 180 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 14 * 24 * 3600000),
+    environment: "production",
+    tags: ["deprecated"],
+  },
+]

package/src/components/waka-funnel-chart/index.tsx

@@ -193,14 +193,14 @@ function formatValue(
 // ============================================================================
 
 const defaultColors = [
-  "#3b82f6", // blue-500
-  "#6366f1", // indigo-500
-  "#8b5cf6", // violet-500
-  "#a855f7", // purple-500
-  "#d946ef", // fuchsia-500
-  "#ec4899", // pink-500
-  "#f43f5e", // rose-500
-  "#ef4444", // red-500
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+  "hsl(var(--primary))",
+  "hsl(var(--info))",
+  "hsl(var(--destructive))",
 ]
 
 function getStageColor(index: number, stage: FunnelStage): string {

package/src/components/waka-health-pulse/index.tsx

@@ -33,15 +33,15 @@ export interface WakaHealthPulseProps {
 }
 
 // ============================================
-// DEFAULT COLORS
+// DEFAULT COLORS (using CSS variables for theme support)
 // ============================================
 
 const defaultColors: Record<HealthStatus, string> = {
-  healthy: "#22c55e",
-  warning: "#eab308",
-  critical: "#ef4444",
-  down: "#6b7280",
-  unknown: "#a855f7",
+  healthy: "hsl(var(--success))",
+  warning: "hsl(var(--warning))",
+  critical: "hsl(var(--destructive))",
+  down: "hsl(var(--muted-foreground))",
+  unknown: "hsl(var(--chart-3))",
 }
 
 // ============================================