@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/layout/Sidebar.tsx

@@ -1,497 +0,0 @@
-import React, { useState, useEffect } from "react";
-import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core";
-
-interface SidebarProps {
-  collections: Record<string, CollectionConfig>;
-  globals: Record<string, GlobalConfig>;
-  activeCollection: string | null;
-  activeGlobal: string | null;
-  onCollectionClick: (name: string) => void;
-  onGlobalClick: (name: string) => void;
-  defaultCollapsed?: boolean;
-  onToggleCollapse?: (collapsed: boolean) => void;
-  user?: { id: string; email: string; role: string } | null;
-  onLogout?: () => void;
-}
-
-interface CollectionGroup {
-  label: string;
-  collections: [string, CollectionConfig][];
-}
-
-function groupCollections(
-  entries: [string, CollectionConfig][],
-): CollectionGroup[] {
-  const groups: Record<string, [string, CollectionConfig][]> = {
-    content: [],
-    ecommerce: [],
-    other: [],
-  };
-
-  const contentCollections = ["posts", "pages", "media", "categories", "tags"];
-  const ecommerceCollections = [
-    "products",
-    "orders",
-    "customers",
-    "coupons",
-    "inventory",
-  ];
-
-  for (const [name, config] of entries) {
-    if (contentCollections.includes(name)) {
-      groups.content.push([name, config]);
-    } else if (ecommerceCollections.includes(name)) {
-      groups.ecommerce.push([name, config]);
-    } else {
-      groups.other.push([name, config]);
-    }
-  }
-
-  const result: CollectionGroup[] = [];
-
-  if (groups.content.length > 0) {
-    result.push({ label: "Content", collections: groups.content });
-  }
-  if (groups.ecommerce.length > 0) {
-    result.push({ label: "E-commerce", collections: groups.ecommerce });
-  }
-  if (groups.other.length > 0) {
-    if (groups.content.length === 0 && groups.ecommerce.length === 0) {
-      result.push({ label: "Collections", collections: groups.other });
-    } else {
-      result.push({ label: "Other", collections: groups.other });
-    }
-  }
-
-  return result;
-}
-
-function getGlobalIcon(slug: string): React.ReactElement {
-  const icons: Record<string, React.ReactElement> = {
-    "site-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-        <polyline points="9,22 9,12 15,12 15,22" />
-      </svg>
-    ),
-    "seo-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="11" cy="11" r="8" />
-        <path d="m21 21-4.35-4.35" />
-      </svg>
-    ),
-    "social-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="18" cy="5" r="3" />
-        <circle cx="6" cy="12" r="3" />
-        <circle cx="18" cy="19" r="3" />
-        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
-        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
-      </svg>
-    ),
-    "email-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-        <polyline points="22,6 12,13 2,6" />
-      </svg>
-    ),
-    "storage-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M22 12.22A2 2 0 0 0 21.78 10H20a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h.22" />
-        <path d="M2 12.22A2 2 0 0 1 2.22 10H4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2.22" />
-        <path d="M22 4.28A2 2 0 0 0 21.78 2H20a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h.22" />
-        <path d="M2 4.28A2 2 0 0 1 2.22 2H4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2.22" />
-      </svg>
-    ),
-    "access-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-      </svg>
-    ),
-    "store-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
-        <path d="M3 6h18" />
-        <path d="M16 10a4 4 0 0 1-8 0" />
-      </svg>
-    ),
-    "payment-settings": (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-        <line x1="1" y1="10" x2="23" y2="10" />
-      </svg>
-    ),
-  };
-
-  return (
-    icons[slug] || (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="12" cy="12" r="3" />
-        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-      </svg>
-    )
-  );
-}
-
-export function Sidebar({
-  collections,
-  globals,
-  activeCollection,
-  activeGlobal,
-  onCollectionClick,
-  onGlobalClick,
-  defaultCollapsed = false,
-  onToggleCollapse,
-  user,
-  onLogout,
-}: SidebarProps) {
-  const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem("kyro-sidebar-collapsed");
-      return stored ? stored === "true" : defaultCollapsed;
-    }
-    return defaultCollapsed;
-  });
-
-  useEffect(() => {
-    localStorage.setItem("kyro-sidebar-collapsed", String(collapsed));
-    onToggleCollapse?.(collapsed);
-  }, [collapsed, onToggleCollapse]);
-
-  const collectionEntries = Object.entries(collections);
-  const globalEntries = Object.entries(globals);
-  const collectionGroups = groupCollections(collectionEntries);
-
-  const toggleCollapse = () => {
-    setCollapsed((prev) => !prev);
-  };
-
-  return (
-    <aside className={`kyro-sidebar ${collapsed ? "collapsed" : ""}`}>
-      <div className="kyro-sidebar-logo">
-        {!collapsed && <span className="kyro-sidebar-logo-text">Kyro</span>}
-        {collapsed && (
-          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-bold text-sm">
-            K
-          </div>
-        )}
-      </div>
-
-      <nav className="kyro-sidebar-nav">
-        {collectionGroups.map((group) => (
-          <div key={group.label} className="kyro-sidebar-section">
-            {!collapsed && (
-              <div className="kyro-sidebar-section-title">{group.label}</div>
-            )}
-            {group.collections.map(([name, config]) => (
-              <button
-                key={name}
-                className={`kyro-sidebar-item ${
-                  activeCollection === name ? "active" : ""
-                }`}
-                onClick={() => onCollectionClick(name)}
-                title={collapsed ? config.label || name : undefined}
-              >
-                <CollectionIcon type={name} />
-                {!collapsed && <span>{config.label || name}</span>}
-              </button>
-            ))}
-          </div>
-        ))}
-
-        {globalEntries.length > 0 && (
-          <div className="kyro-sidebar-section">
-            {!collapsed && (
-              <div className="kyro-sidebar-section-title">Settings</div>
-            )}
-            {globalEntries.map(([name, config]) => (
-              <button
-                key={name}
-                className={`kyro-sidebar-item ${
-                  activeGlobal === name ? "active" : ""
-                }`}
-                onClick={() => onGlobalClick(name)}
-                title={collapsed ? config.label || name : undefined}
-              >
-                {getGlobalIcon(name)}
-                {!collapsed && <span>{config.label || name}</span>}
-              </button>
-            ))}
-          </div>
-        )}
-      </nav>
-
-      <div className="kyro-sidebar-footer">
-        {user && (
-          <div className="kyro-sidebar-user-info">
-            {!collapsed && (
-              <>
-                <div className="kyro-sidebar-user-email" title={user.email}>
-                  {user.email}
-                </div>
-                <div className="kyro-sidebar-user-role">{user.role}</div>
-              </>
-            )}
-            {onLogout && (
-              <button
-                className="kyro-sidebar-item kyro-sidebar-logout"
-                onClick={onLogout}
-                title={collapsed ? "Logout" : undefined}
-              >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
-                </svg>
-                {!collapsed && <span>Logout</span>}
-              </button>
-            )}
-          </div>
-        )}
-        <button
-          className="kyro-sidebar-item"
-          onClick={toggleCollapse}
-          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-        >
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            {collapsed ? (
-              <path d="M13 17l5-5-5-5M6 17l5-5-5-5" />
-            ) : (
-              <path d="M11 17l-5-5 5-5M18 17l-5-5 5-5" />
-            )}
-          </svg>
-          {!collapsed && <span>Collapse</span>}
-        </button>
-      </div>
-    </aside>
-  );
-}
-
-function CollectionIcon({ type }: { type: string }): React.ReactElement {
-  const iconMap: Record<string, React.ReactElement> = {
-    posts: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-        <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
-      </svg>
-    ),
-    pages: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-        <path d="M14 2v6h6" />
-      </svg>
-    ),
-    products: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
-        <path d="M3 6h18M16 10a4 4 0 0 1-8 0" />
-      </svg>
-    ),
-    orders: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
-        <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
-      </svg>
-    ),
-    customers: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-        <circle cx="9" cy="7" r="4" />
-        <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-      </svg>
-    ),
-    media: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-        <circle cx="8.5" cy="8.5" r="1.5" />
-        <path d="M21 15l-5-5L5 21" />
-      </svg>
-    ),
-    categories: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-      </svg>
-    ),
-    tags: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
-        <line x1="7" y1="7" x2="7.01" y2="7" />
-      </svg>
-    ),
-    coupons: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
-        <line x1="7" y1="7" x2="7.01" y2="7" />
-      </svg>
-    ),
-    inventory: (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-        <polyline points="3.27,6.96 12,12.01 20.73,6.96" />
-        <line x1="12" y1="22.08" x2="12" y2="12" />
-      </svg>
-    ),
-  };
-
-  return (
-    iconMap[type] || (
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
-      </svg>
-    )
-  );
-}