@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-env-var-editor/index.tsx

@@ -0,0 +1,417 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Badge } from "../badge"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Variable,
+  Plus,
+  Trash2,
+  Eye,
+  EyeOff,
+  Copy,
+  CheckCircle2,
+  Search,
+  Lock,
+  Unlock,
+  AlertTriangle,
+  Download,
+  Upload,
+  Save,
+} from "lucide-react"
+
+export interface EnvVariable {
+  key: string
+  value: string
+  isSecret?: boolean
+  isRequired?: boolean
+  description?: string
+  source?: string // e.g., "production", "staging", "local"
+}
+
+export interface WakaEnvVarEditorProps {
+  /** List of environment variables */
+  variables: EnvVariable[]
+  /** Callback when variables change */
+  onChange?: (variables: EnvVariable[]) => void
+  /** Callback when saving */
+  onSave?: (variables: EnvVariable[]) => void
+  /** Callback when importing */
+  onImport?: (content: string) => void
+  /** Callback when exporting */
+  onExport?: () => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Show source column */
+  showSource?: boolean
+  /** Title */
+  title?: string
+  /** Custom class name */
+  className?: string
+}
+
+function EnvVarRow({
+  variable,
+  index,
+  onChange,
+  onDelete,
+  readOnly,
+  showSource,
+}: {
+  variable: EnvVariable
+  index: number
+  onChange: (index: number, field: keyof EnvVariable, value: string | boolean) => void
+  onDelete: (index: number) => void
+  readOnly: boolean
+  showSource: boolean
+}) {
+  const [showValue, setShowValue] = React.useState(!variable.isSecret)
+  const [copied, setCopied] = React.useState(false)
+
+  const copyValue = () => {
+    navigator.clipboard.writeText(variable.value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const maskedValue = variable.isSecret && !showValue
+    ? "•".repeat(Math.min(variable.value.length, 20))
+    : variable.value
+
+  return (
+    <div className={cn(
+      "flex items-center gap-2 p-2 border-b hover:bg-muted/30 transition-colors",
+      variable.isRequired && !variable.value && "bg-yellow-500/5"
+    )}>
+      {/* Secret indicator */}
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              className={cn(
+                "p-1.5 rounded hover:bg-muted transition-colors",
+                readOnly && "pointer-events-none"
+              )}
+              onClick={() => !readOnly && onChange(index, "isSecret", !variable.isSecret)}
+            >
+              {variable.isSecret ? (
+                <Lock className="h-4 w-4 text-yellow-500" />
+              ) : (
+                <Unlock className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{variable.isSecret ? "Secret variable" : "Not a secret"}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      {/* Key */}
+      <Input
+        value={variable.key}
+        onChange={(e) => onChange(index, "key", e.target.value)}
+        placeholder="KEY_NAME"
+        className="font-mono text-sm w-48 h-8"
+        readOnly={readOnly}
+      />
+
+      <span className="text-muted-foreground">=</span>
+
+      {/* Value */}
+      <div className="flex-1 relative">
+        <Input
+          type={variable.isSecret && !showValue ? "password" : "text"}
+          value={variable.value}
+          onChange={(e) => onChange(index, "value", e.target.value)}
+          placeholder="value"
+          className="font-mono text-sm h-8 pr-16"
+          readOnly={readOnly}
+        />
+        <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+          {variable.isSecret && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0"
+              onClick={() => setShowValue(!showValue)}
+            >
+              {showValue ? (
+                <EyeOff className="h-3 w-3" />
+              ) : (
+                <Eye className="h-3 w-3" />
+              )}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0"
+            onClick={copyValue}
+          >
+            {copied ? (
+              <CheckCircle2 className="h-3 w-3 text-green-500" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Source */}
+      {showSource && variable.source && (
+        <Badge variant="outline" className="text-xs shrink-0">
+          {variable.source}
+        </Badge>
+      )}
+
+      {/* Required indicator */}
+      {variable.isRequired && !variable.value && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            </TooltipTrigger>
+            <TooltipContent>Required variable is empty</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Delete */}
+      {!readOnly && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+          onClick={() => onDelete(index)}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export function WakaEnvVarEditor({
+  variables: initialVariables,
+  onChange,
+  onSave,
+  onImport,
+  onExport,
+  readOnly = false,
+  showSource = false,
+  title = "Environment Variables",
+  className,
+}: WakaEnvVarEditorProps) {
+  const [variables, setVariables] = React.useState<EnvVariable[]>(initialVariables)
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [hasChanges, setHasChanges] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // Update internal state when props change
+  React.useEffect(() => {
+    setVariables(initialVariables)
+    setHasChanges(false)
+  }, [initialVariables])
+
+  const handleChange = (index: number, field: keyof EnvVariable, value: string | boolean) => {
+    const newVariables = [...variables]
+    newVariables[index] = { ...newVariables[index], [field]: value }
+    setVariables(newVariables)
+    setHasChanges(true)
+    onChange?.(newVariables)
+  }
+
+  const handleDelete = (index: number) => {
+    const newVariables = variables.filter((_, i) => i !== index)
+    setVariables(newVariables)
+    setHasChanges(true)
+    onChange?.(newVariables)
+  }
+
+  const handleAdd = () => {
+    const newVariables = [...variables, { key: "", value: "", isSecret: false }]
+    setVariables(newVariables)
+    setHasChanges(true)
+    onChange?.(newVariables)
+  }
+
+  const handleSave = () => {
+    onSave?.(variables)
+    setHasChanges(false)
+  }
+
+  const handleFileImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        const content = event.target?.result as string
+        if (onImport) {
+          onImport(content)
+        } else {
+          // Default .env parsing
+          const parsed = content
+            .split("\n")
+            .filter((line) => line.trim() && !line.startsWith("#"))
+            .map((line) => {
+              const [key, ...valueParts] = line.split("=")
+              const value = valueParts.join("=").replace(/^["']|["']$/g, "")
+              return { key: key.trim(), value, isSecret: key.includes("SECRET") || key.includes("PASSWORD") || key.includes("KEY") }
+            })
+          setVariables(parsed)
+          setHasChanges(true)
+          onChange?.(parsed)
+        }
+      }
+      reader.readAsText(file)
+    }
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ""
+    }
+  }
+
+  // Filter variables
+  const filteredVariables = variables.filter((v) =>
+    v.key.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    (!v.isSecret && v.value.toLowerCase().includes(searchQuery.toLowerCase()))
+  )
+
+  // Count secrets
+  const secretCount = variables.filter((v) => v.isSecret).length
+  const requiredEmpty = variables.filter((v) => v.isRequired && !v.value).length
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <Variable className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{variables.length}</Badge>
+          {secretCount > 0 && (
+            <Badge variant="outline" className="text-yellow-500">
+              <Lock className="h-3 w-3 mr-1" />
+              {secretCount} secrets
+            </Badge>
+          )}
+          {requiredEmpty > 0 && (
+            <Badge variant="outline" className="text-yellow-500">
+              <AlertTriangle className="h-3 w-3 mr-1" />
+              {requiredEmpty} missing
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {onSave && hasChanges && (
+            <Button size="sm" onClick={handleSave}>
+              <Save className="h-4 w-4 mr-1" />
+              Save
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b bg-muted/30">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search variables..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+
+        {!readOnly && (
+          <>
+            <Button variant="outline" size="sm" className="h-8" onClick={handleAdd}>
+              <Plus className="h-4 w-4 mr-1" />
+              Add
+            </Button>
+
+            <input
+              type="file"
+              ref={fileInputRef}
+              accept=".env,.txt"
+              onChange={handleFileImport}
+              className="hidden"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <Upload className="h-4 w-4 mr-1" />
+              Import
+            </Button>
+          </>
+        )}
+
+        {onExport && (
+          <Button variant="outline" size="sm" className="h-8" onClick={onExport}>
+            <Download className="h-4 w-4 mr-1" />
+            Export
+          </Button>
+        )}
+      </div>
+
+      {/* Variables list */}
+      <ScrollArea className="flex-1 max-h-[400px]">
+        {filteredVariables.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <Variable className="h-8 w-8 mb-2" />
+            <span>No variables found</span>
+            {!readOnly && (
+              <Button variant="link" size="sm" onClick={handleAdd}>
+                Add your first variable
+              </Button>
+            )}
+          </div>
+        ) : (
+          filteredVariables.map((variable, index) => (
+            <EnvVarRow
+              key={index}
+              variable={variable}
+              index={variables.indexOf(variable)}
+              onChange={handleChange}
+              onDelete={handleDelete}
+              readOnly={readOnly}
+              showSource={showSource}
+            />
+          ))
+        )}
+      </ScrollArea>
+
+      {/* Footer hint */}
+      {!readOnly && (
+        <div className="px-3 py-2 border-t bg-muted/30 text-xs text-muted-foreground">
+          💡 Click the lock icon to mark a variable as secret. Secrets are masked by default.
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Default sample variables for demo
+export const defaultEnvVariables: EnvVariable[] = [
+  { key: "NODE_ENV", value: "production", isRequired: true },
+  { key: "DATABASE_URL", value: "postgresql://user:pass@localhost:5432/db", isSecret: true, isRequired: true },
+  { key: "API_KEY", value: "sk-1234567890abcdef", isSecret: true },
+  { key: "PORT", value: "3000" },
+  { key: "LOG_LEVEL", value: "info" },
+  { key: "REDIS_URL", value: "redis://localhost:6379", isSecret: true },
+  { key: "AWS_ACCESS_KEY_ID", value: "", isSecret: true, isRequired: true },
+  { key: "AWS_SECRET_ACCESS_KEY", value: "", isSecret: true, isRequired: true },
+]