@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/PluginsManager.tsx

@@ -0,0 +1,277 @@
+import React, { useState } from "react";
+import {
+  Blocks,
+  Settings,
+  ToggleRight,
+  ToggleLeft,
+  CheckCircle2,
+  Clock,
+  RefreshCw,
+  ShieldCheck,
+  Search,
+  Plus,
+  X,
+} from "./ui/icons";
+import { Modal, ModalContent, ModalActions } from "./ui/Modal";
+import { PageHeader } from "./ui/PageHeader";
+import { Badge } from "./ui/Badge";
+
+interface Plugin {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  enabled: boolean;
+  author: string;
+  updatedAt: string;
+  icon: string;
+  status: "active" | "error" | "update_available";
+}
+
+const mockPlugins: Plugin[] = [
+  {
+    id: "seo-optimizer",
+    name: "SEO Optimizer Pro",
+    description:
+      "Advanced meta tags, sitemaps, and rich snippets for all collections.",
+    version: "2.1.4",
+    enabled: true,
+    author: "Kyro Team",
+    updatedAt: "2024-05-10T14:30:00Z",
+    icon: "search",
+    status: "active",
+  },
+  {
+    id: "analytics-dashboard",
+    name: "Analytics Integration",
+    description:
+      "Connect to Google Analytics, Plausible, or Mixpanel for traffic insights.",
+    version: "1.0.2",
+    enabled: true,
+    author: "Kyro Team",
+    updatedAt: "2024-04-20T09:15:00Z",
+    icon: "activity",
+    status: "update_available",
+  },
+  {
+    id: "aws-s3-adapter",
+    name: "AWS S3 Storage",
+    description: "Cloud storage adapter for Media Library with S3 integration.",
+    version: "3.0.0",
+    enabled: false,
+    author: "AWS",
+    updatedAt: "2024-01-15T11:00:00Z",
+    icon: "database",
+    status: "active",
+  },
+  {
+    id: "ai-writer",
+    name: "AI Content Writer",
+    description:
+      "Generate blog posts and product descriptions with AI assistance.",
+    version: "1.2.0",
+    enabled: true,
+    author: "Kyro Team",
+    updatedAt: "2024-05-01T10:00:00Z",
+    icon: "sparkles",
+    status: "active",
+  },
+];
+
+export function PluginsManager() {
+  const [plugins, setPlugins] = useState<Plugin[]>(mockPlugins);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showConfigModal, setShowConfigModal] = useState<string | null>(null);
+
+  const togglePlugin = (id: string) => {
+    setPlugins((prev) =>
+      prev.map((p) => (p.id === id ? { ...p, enabled: !p.enabled } : p)),
+    );
+  };
+
+  const filteredPlugins = plugins.filter(
+    (p) =>
+      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      p.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  const activeCount = plugins.filter((p) => p.enabled).length;
+  const updateCount = plugins.filter(
+    (p) => p.status === "update_available",
+  ).length;
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
+      <PageHeader
+        title="Plugins"
+        description="Extend Kyro CMS with modular features and integrations."
+        icon={Blocks}
+        actions={[
+          {
+            label: "Marketplace",
+            onClick: () => (window.location.href = "/admin/marketplace"),
+            icon: Plus,
+          },
+        ]}
+      />
+
+      <div className="flex flex-col gap-8 surface-tile p-8">
+        {/* Stats Summary */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="p-4 rounded-2xl bg-[var(--kyro-bg-secondary)]/50 border border-[var(--kyro-border)] flex items-center gap-3 group hover:border-[var(--kyro-primary)]/30 transition-all">
+            <div className="p-2.5 bg-green-500/10 rounded-xl group-hover:scale-105 transition-transform">
+              <CheckCircle2 className="w-4 h-4 text-green-500" />
+            </div>
+            <div>
+              <div className="text-[9px] font-bold opacity-40 uppercase tracking-widest mb-0.5">Active</div>
+              <div className="text-sm font-bold tracking-tight">{activeCount} Plugins Enabled</div>
+            </div>
+          </div>
+          <div className="p-4 rounded-2xl bg-[var(--kyro-bg-secondary)]/50 border border-[var(--kyro-border)] flex items-center gap-3 group hover:border-[var(--kyro-primary)]/30 transition-all">
+            <div className="p-2.5 bg-amber-500/10 rounded-xl group-hover:scale-105 transition-transform">
+              <RefreshCw className={`w-4 h-4 text-amber-500 ${updateCount > 0 ? "animate-spin-slow" : ""}`} />
+            </div>
+            <div>
+              <div className="text-[9px] font-bold opacity-40 uppercase tracking-widest mb-0.5">Maintenance</div>
+              <div className="text-sm font-bold tracking-tight">{updateCount} Updates Ready</div>
+            </div>
+          </div>
+          <div className="p-4 rounded-2xl bg-[var(--kyro-bg-secondary)]/50 border border-[var(--kyro-border)] flex items-center gap-3 group hover:border-[var(--kyro-primary)]/30 transition-all">
+            <div className="p-2.5 bg-[var(--kyro-primary)]/10 rounded-xl group-hover:scale-105 transition-transform">
+              <ShieldCheck className="w-4 h-4 text-[var(--kyro-primary)]" />
+            </div>
+            <div>
+              <div className="text-[9px] font-bold opacity-40 uppercase tracking-widest mb-0.5">Security</div>
+              <div className="text-sm font-bold tracking-tight">Verified Ecosystem</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Search & Filter */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 border-b border-[var(--kyro-border)]/50">
+          <div className="relative group max-w-sm w-full">
+            <div className="absolute -inset-0.5 bg-gradient-to-r from-[var(--kyro-primary)]/10 to-transparent rounded-xl blur opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
+            <div className="relative">
+              <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-[var(--kyro-text-secondary)] opacity-40" />
+              <input
+                type="text"
+                placeholder="Search ecosystem..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs focus:outline-none focus:border-[var(--kyro-primary)]/50 transition-all"
+              />
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2 px-1">
+            <div className="w-0.5 h-3 bg-[var(--kyro-primary)] rounded-full" />
+            <h2 className="text-[10px] font-bold tracking-[0.2em] opacity-40 uppercase">Installed Extensions</h2>
+          </div>
+        </div>
+
+        {/* Plugin Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filteredPlugins.length > 0 ? (
+            filteredPlugins.map((plugin) => (
+              <div
+                key={plugin.id}
+                className={`group relative overflow-hidden bg-[var(--kyro-bg-secondary)]/30 border border-[var(--kyro-border)] rounded-2xl p-5 hover:border-[var(--kyro-primary)]/50 transition-all duration-300 ${!plugin.enabled ? "grayscale opacity-60" : ""}`}
+              >
+                <div className="flex flex-col gap-4 relative z-10">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-center gap-2.5">
+                      <div className="p-2 bg-[var(--kyro-surface)] rounded-xl group-hover:bg-[var(--kyro-primary)]/10 transition-colors shadow-sm">
+                        <Blocks className="w-5 h-5 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" />
+                      </div>
+                      <div>
+                        <h3 className="font-bold text-base leading-none mb-1.5">{plugin.name}</h3>
+                        <div className="flex items-center gap-1.5">
+                          <span className={`w-1 h-1 rounded-full ${plugin.enabled ? "bg-green-500" : "bg-red-500"}`} />
+                          <span className="text-[9px] font-bold opacity-40 uppercase tracking-tighter">
+                            {plugin.enabled ? "Active" : "Disabled"}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    {plugin.status === "update_available" && (
+                      <Badge variant="warning" className="text-[7px] font-bold px-1.5 py-0.5 animate-pulse">Update</Badge>
+                    )}
+                  </div>
+
+                  <p className="text-xs text-[var(--kyro-text-secondary)] opacity-70 leading-relaxed min-h-[32px] line-clamp-2">
+                    {plugin.description}
+                  </p>
+
+                  <div className="flex items-center justify-between pt-3 border-t border-[var(--kyro-border)]/50">
+                    <div className="flex items-center gap-3 text-[9px] font-bold opacity-40 uppercase tracking-widest">
+                      <div className="flex items-center gap-1">
+                        <Clock className="w-2.5 h-2.5" />
+                        v{plugin.version}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1.5">
+                      <button
+                        type="button"
+                        onClick={() => setShowConfigModal(plugin.id)}
+                        className="p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg hover:border-[var(--kyro-primary)] transition-all disabled:opacity-30 shadow-sm"
+                        disabled={!plugin.enabled}
+                      >
+                        <Settings className="w-3.5 h-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => togglePlugin(plugin.id)}
+                        className={`p-2 border rounded-lg transition-all shadow-sm ${plugin.enabled
+                          ? "bg-red-500/5 border-red-500/10 text-red-500/40 hover:text-red-500 hover:border-red-500/30"
+                          : "bg-green-500/5 border-green-500/10 text-green-500/40 hover:text-green-500 hover:border-green-500/30"
+                          }`}
+                      >
+                        {plugin.enabled ? <X className="w-3.5 h-3.5" /> : <Plus className="w-3.5 h-3.5" />}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="col-span-full p-12 text-center rounded-3xl border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30">
+              <Blocks className="w-10 h-10 mx-auto mb-3 text-[var(--kyro-text-secondary)] opacity-20" />
+              <h3 className="text-lg font-bold mb-1">No results</h3>
+              <p className="text-xs text-[var(--kyro-text-secondary)] opacity-50">Try adjusting your search query.</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modal */}
+      <Modal
+        open={!!showConfigModal}
+        onClose={() => setShowConfigModal(null)}
+        title="Plugin Architecture"
+        size="lg"
+      >
+        <ModalContent>
+          <div className="p-12 text-center space-y-4">
+            <div className="w-20 h-20 mx-auto bg-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center border border-[var(--kyro-border)] shadow-xl">
+              <Settings className="w-10 h-10 text-[var(--kyro-primary)] opacity-40 animate-spin-slow" />
+            </div>
+            <div>
+              <h4 className="text-xl font-bold mb-1">Advanced Configuration</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Settings for this plugin will be synthesized dynamically from its manifest.</p>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button
+            type="button"
+            onClick={() => setShowConfigModal(null)}
+            className="w-full py-3 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
+          >
+            Save Configuration
+          </button>
+        </ModalActions>
+      </Modal>
+    </div>
+  );
+}