@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/fields/SelectField.tsx

@@ -1,4 +1,4 @@
-import type { SelectField as SelectFieldType } from '@kyro-cms/core';
+import type { SelectField as SelectFieldType } from "@kyro-cms/core";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
@@ -8,20 +8,32 @@ interface SelectFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function SelectField({ field, value, onChange, error, disabled }: SelectFieldComponentProps) {
+export default function SelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: SelectFieldComponentProps) {
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </label>
       )}
       <select
-        value={field.hasMany ? (Array.isArray(value) ? value.join(',') : '') : (value || '')}
+        value={
+          field.hasMany
+            ? Array.isArray(value)
+              ? value.join(",")
+              : ""
+            : value || ""
+        }
         onChange={(e) => {
           if (field.hasMany) {
-            const selected = e.target.value ? e.target.value.split(',') : [];
+            const selected = e.target.value ? e.target.value.split(",") : [];
             onChange?.(selected);
           } else {
             onChange?.(e.target.value);
@@ -32,13 +44,11 @@ export default function SelectField({ field, value, onChange, error, disabled }:
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
-            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "border-red-500 focus:border-red-500 focus:ring-red-500"
+            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+        } ${disabled || field.admin?.readOnly ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-muted)]" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"}`}
       >
-        {!field.required && (
-          <option value="">Select...</option>
-        )}
+        {!field.required && <option value="">Select...</option>}
         {field.options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
@@ -46,11 +56,11 @@ export default function SelectField({ field, value, onChange, error, disabled }:
         ))}
       </select>
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-red-500">{error}</p>}
     </div>
   );
 }

package/src/components/fields/TextField.tsx

@@ -1,4 +1,5 @@
-import type { TextField as TextFieldType } from '@kyro-cms/core';
+import { useEffect, useState } from "react";
+import type { TextField as TextFieldType } from "@kyro-cms/core";
 
 interface TextFieldComponentProps {
   field: TextFieldType;
@@ -8,16 +9,40 @@ interface TextFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function TextField({ field, value = '', onChange, error, disabled }: TextFieldComponentProps) {
-  const inputType = field.variant === 'email' ? 'email' 
-    : field.variant === 'password' ? 'password'
-    : field.variant === 'url' ? 'url'
-    : 'text';
+export default function TextField({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}: TextFieldComponentProps) {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    setIsDark(document.documentElement.classList.contains("dark"));
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const inputType =
+    field.variant === "email"
+      ? "email"
+      : field.variant === "password"
+        ? "password"
+        : field.variant === "url"
+          ? "url"
+          : "text";
 
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <label className="block text-sm font-medium">
           {field.label}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </label>
@@ -34,16 +59,22 @@ export default function TextField({ field, value = '', onChange, error, disabled
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
-            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+        } ${
+          disabled || field.admin?.readOnly
+            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
+            : isDark
+              ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+              : "bg-white text-gray-900"
+        }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-secondary)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-red-600">{error}</p>}
     </div>
   );
 }

package/src/components/fields/extensions/blockComponents.tsx

@@ -0,0 +1,237 @@
+import React from "react";
+import { ColumnsBlock } from "../../blocks/ColumnsBlock";
+import { HeadingBlock } from "../../blocks/HeadingBlock";
+import { ParagraphBlock } from "../../blocks/ParagraphBlock";
+import { DividerBlock } from "../../blocks/DividerBlock";
+import { ImageBlock } from "../../blocks/ImageBlock";
+import { VideoBlock } from "../../blocks/VideoBlock";
+import { ListBlock } from "../../blocks/ListBlock";
+import { CodeBlock } from "../../blocks/CodeBlock";
+import { LinkBlock } from "../../blocks/LinkBlock";
+import { FileBlock } from "../../blocks/FileBlock";
+import { VStackBlock } from "../../blocks/VStackBlock";
+import { ButtonBlock } from "../../blocks/ButtonBlock";
+import { AccordionBlock } from "../../blocks/AccordionBlock";
+
+import { HeroBlock } from "../../blocks/HeroBlock";
+import { ArrayBlock } from "../../blocks/ArrayBlock";
+import { RelationshipBlock } from "../../blocks/RelationshipBlock";
+
+import {
+  Columns3,
+  Heading1,
+  AlignLeft,
+  Minus,
+  Image,
+  Video,
+  List,
+  Code,
+  Link,
+  File,
+  ArrowDown,
+  MousePointerClick,
+  ChevronDown,
+  Star,
+  ListOrdered,
+  Link2,
+} from "lucide-react";
+
+// Block component registry
+export const BLOCK_COMPONENTS: Record<string, React.ComponentType<any>> = {
+  columns: ColumnsBlock,
+  heading: HeadingBlock,
+  paragraph: ParagraphBlock,
+  divider: DividerBlock,
+  image: ImageBlock,
+  video: VideoBlock,
+  list: ListBlock,
+  code: CodeBlock,
+  link: LinkBlock,
+  file: FileBlock,
+  vstack: VStackBlock,
+  button: ButtonBlock,
+  accordion: AccordionBlock,
+
+  hero: HeroBlock,
+  array: ArrayBlock,
+  relationship: RelationshipBlock,
+};
+
+// Icon mapping for drawer (actual Lucide components)
+export const blockIcons: Record<string, React.ReactNode> = {
+  columns: <Columns3 className="w-4 h-4" />,
+  heading: <Heading1 className="w-4 h-4" />,
+  paragraph: <AlignLeft className="w-4 h-4" />,
+  divider: <Minus className="w-4 h-4" />,
+  image: <Image className="w-4 h-4" />,
+  video: <Video className="w-4 h-4" />,
+  list: <List className="w-4 h-4" />,
+  code: <Code className="w-4 h-4" />,
+  link: <Link className="w-4 h-4" />,
+  file: <File className="w-4 h-4" />,
+  vstack: <ArrowDown className="w-4 h-4" />,
+  button: <MousePointerClick className="w-4 h-4" />,
+  accordion: <ChevronDown className="w-4 h-4" />,
+
+  hero: <Star className="w-4 h-4" />,
+  array: <ListOrdered className="w-4 h-4" />,
+  relationship: <Link2 className="w-4 h-4" />,
+};
+
+// Get block component by type
+export function getBlockComponent(type: string) {
+  return BLOCK_COMPONENTS[type];
+}
+
+// Check if block type is supported
+export function isSupportedBlockType(type: string): boolean {
+  return type in BLOCK_COMPONENTS;
+}
+
+// Get human-readable label for block type
+export function getBlockLabel(type: string): string {
+  const labelMap: Record<string, string> = {
+    paragraph: "Paragraph",
+    heading: "Heading",
+    image: "Image",
+    video: "Video",
+    link: "Link",
+    button: "Button",
+    list: "List",
+    code: "Code",
+    file: "File",
+    divider: "Divider",
+    accordion: "Accordion",
+    array: "Repeater",
+    hero: "Hero",
+    vstack: "VStack",
+    columns: "Columns",
+    relationship: "Relationship",
+  };
+  return labelMap[type] || type;
+}
+
+// Block categories for the drawer
+export const blockCategories = [
+  {
+    title: "Layout",
+    blocks: [
+      {
+        type: "columns",
+        label: "Columns",
+        icon: "columns",
+        description: "1-6 columns side-by-side",
+      },
+      {
+        type: "vstack",
+        label: "VStack",
+        icon: "vstack",
+        description: "Stack blocks vertically",
+      },
+      {
+        type: "hero",
+        label: "Hero",
+        icon: "hero",
+        description: "Hero with content + video",
+      },
+    ],
+  },
+  {
+    title: "Text",
+    blocks: [
+      {
+        type: "heading",
+        label: "Heading",
+        icon: "heading",
+        description: "H1-H3 heading",
+      },
+      {
+        type: "paragraph",
+        label: "Paragraph",
+        icon: "paragraph",
+        description: "Plain text content",
+      },
+      {
+        type: "list",
+        label: "List",
+        icon: "list",
+        description: "Ordered/unordered list",
+      },
+      { type: "link", label: "Link", icon: "link", description: "Hyperlink" },
+    ],
+  },
+  {
+    title: "Media",
+    blocks: [
+      {
+        type: "image",
+        label: "Image",
+        icon: "image",
+        description: "Single image",
+      },
+      {
+        type: "video",
+        label: "Video",
+        icon: "video",
+        description: "Embed video",
+      },
+      {
+        type: "file",
+        label: "File",
+        icon: "file",
+        description: "File download link",
+      },
+    ],
+  },
+  {
+    title: "Interactive",
+    blocks: [
+      {
+        type: "button",
+        label: "Button",
+        icon: "button",
+        description: "CTA button",
+      },
+      {
+        type: "accordion",
+        label: "Accordion",
+        icon: "accordion",
+        description: "Collapsible sections",
+      },
+    ],
+  },
+  {
+    title: "Data",
+    blocks: [
+      {
+        type: "array",
+        label: "Repeater",
+        icon: "array",
+        description: "Add multiple child blocks",
+      },
+      {
+        type: "code",
+        label: "Code",
+        icon: "code",
+        description: "Code snippet",
+      },
+      {
+        type: "relationship",
+        label: "Relationship",
+        icon: "relationship",
+        description: "Link to other collection",
+      },
+    ],
+  },
+  {
+    title: "Basic",
+    blocks: [
+      {
+        type: "divider",
+        label: "Divider",
+        icon: "divider",
+        description: "Horizontal separator",
+      },
+    ],
+  },
+];

package/src/components/fields/extensions/blocksStore.ts

@@ -0,0 +1,273 @@
+import { create } from "zustand";
+import type { BlockData } from "@kyro-cms/core";
+
+export interface BlocksStore {
+  blocks: BlockData[];
+  setBlocks: (blocks: BlockData[]) => void;
+  addBlock: (type: string, index?: number) => void;
+  updateBlock: (id: string, data: Partial<BlockData>) => void;
+  removeBlock: (id: string) => void;
+  moveBlock: (id: string, direction: "up" | "down") => void;
+  onBlocksChange: (() => void) | null;
+  setOnBlocksChange: (cb: () => void) => void;
+}
+
+// Helper to create new block (since we can't import createBlock from core in zustand)
+export function createNewBlock(type: string): BlockData {
+  const defaultData = getDefaultData(type);
+  // Extract options and children from defaultData if present
+  const { options, children, ...data } = defaultData;
+  return {
+    id: Math.random().toString(36).substr(2, 9),
+    type,
+    data,
+    options,
+    children,
+    order: Date.now(),
+  };
+}
+
+function getDefaultData(type: string): Record<string, any> {
+  const defaults: Record<string, any> = {
+    heading: { level: 1, text: "" },
+    paragraph: { text: "" },
+    divider: {},
+    callout: { text: "", variant: "info" },
+    image: { src: "", alt: "", caption: "" },
+    video: { src: "", title: "" },
+    list: { type: "unordered", items: "" },
+    code: { language: "plaintext", code: "" },
+    link: { url: "", text: "" },
+    table: { rows: 3, columns: 3, content: "" },
+    quote: { text: "", author: "" },
+    file: { filename: "", url: "" },
+    kyroColumns: { columns: 2, direction: "horizontal" },
+    vstack: { direction: "vertical", gap: "md" },
+    container: {
+      options: {
+        backgroundColor: "transparent",
+        padding: "md",
+        width: "full",
+        margin: "none",
+        minHeight: "none",
+        borderRadius: "none",
+      },
+      children: [],
+    },
+    button: { text: "Button", url: "", variant: "primary", size: "md" },
+    accordion: { title: "Accordion Item", content: "" },
+    gallery: { images: [] },
+    tabs: { tabs: [{ label: "Tab 1", content: "" }] },
+  };
+  return defaults[type] || {};
+}
+
+export const useBlocksStore = create<BlocksStore>((set, get) => ({
+  blocks: [],
+  setBlocks: (blocks) => set({ blocks }),
+  onBlocksChange: null,
+  setOnBlocksChange: (cb) => set({ onBlocksChange: cb }),
+  addBlock: (type, index) => {
+    const newBlock = createNewBlock(type);
+    const { blocks } = get();
+    const newBlocks = [...blocks];
+    if (index !== undefined) {
+      newBlocks.splice(index, 0, newBlock);
+    } else {
+      newBlocks.push(newBlock);
+    }
+    set({ blocks: newBlocks });
+    const { onBlocksChange } = get();
+    if (onBlocksChange) onBlocksChange();
+  },
+  updateBlock: (id, data) => {
+    const { blocks } = get();
+    
+    const updateRecursive = (blocksList: BlockData[]): BlockData[] => {
+      let changed = false;
+      const newList = blocksList.map(b => {
+        if (b.id === id) {
+          changed = true;
+          return { ...b, ...data };
+        }
+        
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = updateRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = updateRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = updateRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+  removeBlock: (id) => {
+    const { blocks } = get();
+    
+    const removeRecursive = (blocksList: BlockData[]): BlockData[] => {
+      const filtered = blocksList.filter(b => b.id !== id);
+      if (filtered.length !== blocksList.length) {
+        return filtered; // found and removed at this level
+      }
+      
+      let changed = false;
+      const newList = blocksList.map(b => {
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = removeRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = removeRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = removeRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+  moveBlock: (id, direction) => {
+    const { blocks } = get();
+    
+    const moveRecursive = (blocksList: BlockData[]): BlockData[] => {
+      const index = blocksList.findIndex(b => b.id === id);
+      if (index !== -1) {
+        const targetIndex = direction === "up" ? index - 1 : index + 1;
+        if (targetIndex >= 0 && targetIndex < blocksList.length) {
+          const newBlocksList = [...blocksList];
+          [newBlocksList[index], newBlocksList[targetIndex]] = [
+            newBlocksList[targetIndex],
+            newBlocksList[index],
+          ];
+          return newBlocksList;
+        }
+        return blocksList;
+      }
+      
+      let changed = false;
+      const newList = blocksList.map(b => {
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = moveRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = moveRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = moveRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+}));
+
+// Selector for individual block - only re-renders when that specific block changes
+export const useBlockById = (id: string) =>
+  useBlocksStore((state) => {
+    const findRecursive = (blocksList: BlockData[]): BlockData | undefined => {
+      for (const b of blocksList) {
+        if (b.id === id) return b;
+        if (b.children && b.children.length > 0) {
+          const found = findRecursive(b.children);
+          if (found) return found;
+        }
+        if (b.data?.columnData) {
+          for (const col of b.data.columnData) {
+            if (col.children && col.children.length > 0) {
+              const found = findRecursive(col.children);
+              if (found) return found;
+            }
+          }
+        }
+      }
+      return undefined;
+    };
+    return findRecursive(state.blocks);
+  });
+
+// Selector for block count - for quick checks
+export const useBlockCount = () =>
+  useBlocksStore((state) => state.blocks.length);
+
+// Get action functions without subscription - uses getState() for direct access
+// This prevents re-renders when other blocks change
+export const useBlockActions = () => {
+  return useBlocksStore.getState();
+};

package/src/components/fields/index.ts

@@ -0,0 +1,13 @@
+export { default as PortableTextField } from "./PortableTextField";
+export { PortableTextRenderer } from "./PortableTextRenderer";
+export { HybridContentField } from "./HybridContentField";
+export { CodeField } from "./CodeField";
+export { JSONField } from "./JSONField";
+export { MarkdownField } from "./MarkdownField";
+export { default as TextField } from "./TextField";
+export { default as NumberField } from "./NumberField";
+export { default as CheckboxField } from "./CheckboxField";
+export { default as DateField } from "./DateField";
+export { default as SelectField } from "./SelectField";
+export { default as RelationshipField } from "./RelationshipField";
+export { BlocksField } from "./BlocksField";