@kyro-cms/admin 0.2.4 → 0.3.0

package/src/theme/tokens.ts

@@ -0,0 +1,222 @@
+export interface ThemeColors {
+  primary?: string;
+  secondary?: string;
+  background?: string;
+  surface?: string;
+  text?: string;
+  textMuted?: string;
+  border?: string;
+  success?: string;
+  error?: string;
+  warning?: string;
+  info?: string;
+}
+
+export interface ThemeTypography {
+  fontFamily?: string;
+  fontFamilyMono?: string;
+  fontSize?: {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    "2xl"?: string;
+    "3xl"?: string;
+    "4xl"?: string;
+  };
+  fontWeight?: {
+    normal?: number;
+    medium?: number;
+    semibold?: number;
+    bold?: number;
+  };
+}
+
+export interface ThemeSpacing {
+  xs?: string;
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+  "2xl"?: string;
+}
+
+export interface ThemeRadius {
+  sm?: string;
+  md?: string;
+  lg?: string;
+  full?: string;
+}
+
+export interface ThemeShadows {
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+}
+
+export interface BlockThemeOverrides {
+  card?: {
+    background?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: string;
+  };
+  hero?: {
+    background?: string;
+    textAlign?: "left" | "center" | "right";
+  };
+  gallery?: {
+    gridColumns?: number;
+    gap?: string;
+  };
+  code?: {
+    fontFamily?: string;
+    fontSize?: string;
+    background?: string;
+  };
+}
+
+export interface FieldThemeOverrides {
+  input?: {
+    background?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    focusRing?: string;
+  };
+  select?: {
+    background?: string;
+    border?: string;
+  };
+  textarea?: {
+    background?: string;
+    minHeight?: string;
+  };
+  richText?: {
+    toolbarBackground?: string;
+    buttonActive?: string;
+  };
+  upload?: {
+    dropzoneBackground?: string;
+    dropzoneActive?: string;
+  };
+}
+
+export interface KyroTheme {
+  id?: string;
+  label?: string;
+  colors?: ThemeColors;
+  typography?: ThemeTypography;
+  spacing?: ThemeSpacing;
+  borderRadius?: ThemeRadius;
+  shadows?: ThemeShadows;
+  blocks?: BlockThemeOverrides;
+  fields?: FieldThemeOverrides;
+}
+
+export const LIGHT_THEME: KyroTheme = {
+  id: "light",
+  label: "Light",
+  colors: {
+    primary: "#3b82f6",
+    secondary: "#8b5cf6",
+    background: "#f8fafc",
+    surface: "#ffffff",
+    text: "#0f172a",
+    textMuted: "#64748b",
+    border: "#e2e8f0",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#06b6d4",
+  },
+  typography: {
+    fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+    fontFamilyMono: "'Fira Code', 'Cascadia Code', monospace",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+  },
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px",
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.1)",
+    xl: "0 20px 25px -5px rgba(0,0,0,0.1)",
+  },
+};
+
+export const DARK_THEME: KyroTheme = {
+  id: "dark",
+  label: "Dark",
+  colors: {
+    primary: "#60a5fa",
+    secondary: "#a78bfa",
+    background: "#0b1222",
+    surface: "#1e293b",
+    text: "#f1f5f9",
+    textMuted: "#94a3b8",
+    border: "#334155",
+    success: "#4ade80",
+    error: "#f87171",
+    warning: "#fbbf24",
+    info: "#22d3ee",
+  },
+  typography: {
+    fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+    fontFamilyMono: "'Fira Code', 'Cascadia Code', monospace",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+  },
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px",
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0,0,0,0.3)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.4)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
+    xl: "0 20px 25px -5px rgba(0,0,0,0.5)",
+  },
+};
+
+export function mergeThemes(
+  base: KyroTheme,
+  overrides: Partial<KyroTheme>,
+): KyroTheme {
+  return {
+    ...base,
+    ...overrides,
+    colors: { ...base.colors, ...overrides.colors },
+    typography: { ...base.typography, ...overrides.typography },
+    spacing: { ...base.spacing, ...overrides.spacing },
+    borderRadius: { ...base.borderRadius, ...overrides.borderRadius },
+    shadows: { ...base.shadows, ...overrides.shadows },
+    blocks: base.blocks
+      ? { ...base.blocks, ...overrides.blocks }
+      : overrides.blocks,
+    fields: base.fields
+      ? { ...base.fields, ...overrides.fields }
+      : overrides.fields,
+  };
+}

package/src/components/Modal.tsx

@@ -1,206 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  type ReactNode,
-} from "react";
-import {
-  Modal as UIModal,
-  ModalContent,
-  ModalActions,
-  ConfirmModal,
-} from "./ui/Modal";
-import { PromptModal } from "./ui/PromptModal";
-
-export { UIModal as Modal, UIModal, ModalContent, ModalActions, ConfirmModal };
-
-// ============================================================================
-// Global Modal Context for programmatic access
-// ============================================================================
-
-type ModalVariant = "alert" | "confirm" | "prompt";
-
-interface ModalState {
-  variant: ModalVariant;
-  open: boolean;
-  title: string;
-  message?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  onConfirm?: (value?: string) => void;
-  onCancel?: () => void;
-  danger?: boolean;
-}
-
-const initialState: ModalState = {
-  variant: "alert",
-  open: false,
-  title: "",
-  message: "",
-  onConfirm: () => {},
-  onCancel: () => {},
-  danger: false,
-};
-
-interface ModalContextType {
-  showAlert: (title: string, message?: string) => void;
-  showConfirm: (
-    title: string,
-    message: string,
-    onConfirm: () => void,
-    options?: { danger?: boolean },
-  ) => void;
-  showPrompt: (
-    title: string,
-    message: string,
-    onConfirm: (value: string) => void,
-    options?: { placeholder?: string; defaultValue?: string },
-  ) => void;
-  closeModal: () => void;
-}
-
-const ModalContext = createContext<ModalContextType | null>(null);
-
-export function useModal() {
-  const context = useContext(ModalContext);
-  if (!context) {
-    throw new Error("useModal must be used within ModalProvider");
-  }
-  return context;
-}
-
-interface ModalProviderProps {
-  children: ReactNode;
-}
-
-export function ModalProvider({ children }: ModalProviderProps) {
-  const [state, setState] = useState<ModalState>(initialState);
-  const [inputValue, setInputValue] = useState(state.defaultValue || "");
-
-  const showAlert = useCallback((title: string, message?: string) => {
-    setState({
-      variant: "alert",
-      open: true,
-      title,
-      message,
-      onConfirm: () => setState((s) => ({ ...s, open: false })),
-      onCancel: () => setState((s) => ({ ...s, open: false })),
-    });
-  }, []);
-
-  const showConfirm = useCallback(
-    (
-      title: string,
-      message: string,
-      onConfirm: () => void,
-      options?: { danger?: boolean },
-    ) => {
-      setState({
-        variant: "confirm",
-        open: true,
-        title,
-        message,
-        danger: options?.danger,
-        onConfirm: () => {
-          onConfirm();
-          setState((s) => ({ ...s, open: false }));
-        },
-        onCancel: () => setState((s) => ({ ...s, open: false })),
-      });
-    },
-    [],
-  );
-
-  const showPrompt = useCallback(
-    (
-      title: string,
-      message: string,
-      onConfirm: (value: string) => void,
-      options?: { placeholder?: string; defaultValue?: string },
-    ) => {
-      setState({
-        variant: "prompt",
-        open: true,
-        title,
-        message,
-        placeholder: options?.placeholder,
-        defaultValue: options?.defaultValue,
-        onConfirm: (value) => {
-          onConfirm(value || "");
-          setState((s) => ({ ...s, open: false }));
-        },
-        onCancel: () => setState((s) => ({ ...s, open: false })),
-      });
-    },
-    [],
-  );
-
-  const closeModal = useCallback(() => {
-    setState((s) => ({ ...s, open: false }));
-  }, []);
-
-  // Re-order so imports come first, then showAlert
-  const handleShowAlert = (title: string, message?: string) => {
-    setState({
-      variant: "alert",
-      open: true,
-      title,
-      message,
-      onConfirm: () => setState((s) => ({ ...s, open: false })),
-      onCancel: () => setState((s) => ({ ...s, open: false })),
-    });
-  };
-
-  return (
-    <ModalContext.Provider
-      value={{
-        showAlert: handleShowAlert,
-        showConfirm,
-        showPrompt,
-        closeModal,
-      }}
-    >
-      {children}
-      {state.variant === "confirm" && (
-        <ConfirmModal
-          open={state.open}
-          onClose={state.onCancel || closeModal}
-          onConfirm={() => state.onConfirm?.()}
-          title={state.title}
-          message={state.message || ""}
-          variant={state.danger ? "danger" : "default"}
-        />
-      )}
-      {state.variant === "alert" && (
-        <UIModal
-          open={state.open}
-          onClose={state.onCancel || closeModal}
-          title={state.title}
-          size="sm"
-          footer={
-            <button
-              type="button"
-              onClick={() => state.onConfirm?.()}
-              className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
-            >
-              OK
-            </button>
-          }
-        >
-          <p className="text-[var(--kyro-text-secondary)]">{state.message}</p>
-        </UIModal>
-      )}
-      {state.variant === "prompt" && (
-        <PromptModal
-          open={state.open}
-          onClose={state.onCancel || closeModal}
-          onSubmit={(value) => state.onConfirm?.(value)}
-          title={state.title}
-          placeholder={state.placeholder}
-          defaultValue={state.defaultValue}
-        />
-      )}
-    </ModalContext.Provider>
-  );
-}

package/src/components/index.ts

@@ -1,29 +0,0 @@
-export { Admin } from "./Admin";
-export { ListView } from "./ListView";
-export { DetailView } from "./DetailView";
-export { CreateView } from "./CreateView";
-export { Dashboard } from "./Dashboard";
-export { AutoForm } from "./AutoForm";
-export {
-  ActionBar,
-  type ActionBarProps,
-  type DocumentStatus,
-  type SaveStatus,
-} from "./ActionBar";
-export { BulkActionsBar } from "./BulkActionsBar";
-export { StatusBadge, CountBadge } from "./StatusBadge";
-export { VersionHistoryPanel } from "./VersionHistoryPanel";
-export {
-  ThemeProvider,
-  LightThemeProvider,
-  DarkThemeProvider,
-  useTheme,
-  type ThemeMode,
-} from "./ThemeProvider";
-export * from "./ui/Button";
-export * from "./ui/Badge";
-export * from "./ui/Spinner";
-export * from "./ui/Toast";
-export { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
-export { Modal, ConfirmModal } from "./ui/Modal";
-export { SlidePanel } from "./ui/SlidePanel";

package/src/env.ts

@@ -1,20 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-const envPath = path.join(process.cwd(), "..", ".env");
-if (fs.existsSync(envPath)) {
-  const envContent = fs.readFileSync(envPath, "utf-8");
-  envContent.split("\n").forEach((line) => {
-    const trimmed = line.trim();
-    if (trimmed && !trimmed.startsWith("#")) {
-      const eqIndex = trimmed.indexOf("=");
-      if (eqIndex > 0) {
-        const key = trimmed.substring(0, eqIndex);
-        const value = trimmed.substring(eqIndex + 1);
-        if (!process.env[key]) {
-          process.env[key] = value;
-        }
-      }
-    }
-  });
-}