@kyro-cms/admin 0.1.2

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,462 @@
+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;
+}
+
+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,
+}: 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">
+        <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>
+    )
+  );
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+interface BadgeProps {
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  children: ReactNode;
+}
+
+export function Badge({ variant = 'default', children }: BadgeProps) {
+  return (
+    <span className={`kyro-badge kyro-badge-${variant}`}>
+      {children}
+    </span>
+  );
+}

package/src/components/ui/Button.tsx

@@ -0,0 +1,41 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  children: ReactNode;
+}
+
+export function Button({
+  variant = 'secondary',
+  size = 'md',
+  loading = false,
+  children,
+  className = '',
+  disabled,
+  ...props
+}: ButtonProps) {
+  const baseClass = 'kyro-btn';
+  const variantClass = `kyro-btn-${variant}`;
+  const sizeClass = `kyro-btn-${size}`;
+
+  return (
+    <button
+      className={`${baseClass} ${variantClass} ${sizeClass} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <span className="kyro-btn-loading">
+          <svg className="kyro-btn-spinner" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" fill="none" strokeDasharray="60 30" />
+          </svg>
+        </span>
+      ) : null}
+      <span className={loading ? 'kyro-btn-text-hidden' : ''}>
+        {children}
+      </span>
+    </button>
+  );
+}

package/src/components/ui/Dropdown.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useRef, useEffect, type ReactNode } from "react";
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  align?: "left" | "right";
+}
+
+export function Dropdown({
+  trigger,
+  children,
+  align = "right",
+}: DropdownProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <div onClick={() => setOpen(!open)} className="cursor-pointer">
+        {trigger}
+      </div>
+      {open && (
+        <div
+          className={`absolute z-50 mt-2 min-w-[180px] py-1 bg-white rounded-lg shadow-lg border border-gray-200 ${
+            align === "right" ? "right-0" : "left-0"
+          }`}
+          onClick={() => setOpen(false)}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface DropdownItemProps {
+  children: ReactNode;
+  onClick?: () => void;
+  icon?: ReactNode;
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export function DropdownItem({
+  children,
+  onClick,
+  icon,
+  danger,
+  disabled,
+}: DropdownItemProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left transition-colors ${
+        danger
+          ? "text-red-600 hover:bg-red-50"
+          : "text-gray-700 hover:bg-gray-50"
+      } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+    >
+      {icon && <span className="w-4 h-4">{icon}</span>}
+      {children}
+    </button>
+  );
+}
+
+export function DropdownSeparator() {
+  return <div className="my-1 border-t border-gray-100" />;
+}