@jhits/plugin-blog 0.0.10 → 0.0.11

package/src/lib/blocks/BlockRenderer.tsx

@@ -1,141 +0,0 @@
-/**
- * Block Renderer
- * Library component for rendering blocks (decoupled from editor)
- * This is the "headless" rendering layer
- * 
- * Multi-Tenant: Uses Preview components from client-provided blocks
- */
-
-'use client';
-
-import React from 'react';
-import { Block, BlockPreviewProps } from '../../types/block';
-import { blockRegistry } from '../../registry/BlockRegistry';
-import { getChildBlocks } from '../utils/blockHelpers';
-
-/**
- * Block Renderer Props
- */
-export interface BlockRendererProps {
-    /** Block to render */
-    block: Block;
-    
-    /** Custom renderers for specific block types (optional override) */
-    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
-    
-    /** Additional context for rendering */
-    context?: {
-        siteId?: string;
-        locale?: string;
-        [key: string]: unknown;
-    };
-}
-
-/**
- * Block Renderer Component
- * Renders a single block using its Preview component from the registry
- * 
- * This is the headless rendering layer - it uses the Preview component
- * provided by the client application, allowing each client to have
- * their own design system in the frontend while the editor uses
- * the dashboard's design system.
- */
-export function BlockRenderer({ 
-    block, 
-    customRenderers,
-    context = {}
-}: BlockRendererProps) {
-    // Check for custom renderer override first
-    if (customRenderers?.has(block.type)) {
-        const CustomRenderer = customRenderers.get(block.type)!;
-        return <CustomRenderer block={block} context={context} />;
-    }
-
-    // Get block definition from registry
-    const definition = blockRegistry.get(block.type);
-    if (!definition) {
-        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
-            blockRegistry.getAll().map(b => b.type).join(', '));
-        return (
-            <div className="p-4 border border-red-300 bg-red-50 rounded">
-                <p className="text-red-600">Unknown block type: {block.type}</p>
-                <p className="text-xs text-red-500 mt-1">
-                    Make sure this block type is registered via customBlocks prop
-                </p>
-            </div>
-        );
-    }
-
-    // Use the Preview component from the block definition
-    // This is provided by the client application
-    const PreviewComponent = definition.components.Preview;
-    
-    // Check if this is a container block with children
-    const isContainer = definition.isContainer === true;
-    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
-        ? (typeof block.children[0] === 'object' 
-            ? block.children as Block[]
-            : [])
-        : [];
-    
-    // If container block, pass child blocks and render function
-    if (isContainer) {
-        return (
-            <PreviewComponent 
-                block={block} 
-                context={context}
-                childBlocks={childBlocks}
-                renderChild={(childBlock: Block) => (
-                    <BlockRenderer
-                        block={childBlock}
-                        customRenderers={customRenderers}
-                        context={context}
-                    />
-                )}
-            />
-        );
-    }
-    
-    return <PreviewComponent block={block} context={context} />;
-}
-
-/**
- * Blocks Renderer
- * Renders an array of blocks
- */
-export interface BlocksRendererProps {
-    /** Array of blocks to render */
-    blocks: Block[];
-    
-    /** Custom renderers for specific block types */
-    customRenderers?: Map<string, React.ComponentType<{ block: Block }>>;
-    
-    /** Additional props to pass to renderers */
-    renderProps?: Record<string, unknown>;
-    
-    /** Wrapper component for the blocks */
-    wrapper?: React.ComponentType<{ children: React.ReactNode }>;
-}
-
-export function BlocksRenderer({
-    blocks,
-    customRenderers,
-    renderProps,
-    wrapper: Wrapper,
-}: BlocksRendererProps) {
-    const content = blocks.map((block, index) => (
-        <BlockRenderer
-            key={block.id || index}
-            block={block}
-            customRenderers={customRenderers}
-            context={renderProps}
-        />
-    ));
-
-    if (Wrapper) {
-        return <Wrapper>{content}</Wrapper>;
-    }
-
-    return <>{content}</>;
-}
-

package/src/lib/blocks/index.ts

@@ -1,6 +0,0 @@
-/**
- * Block library exports
- */
-
-export * from './BlockRenderer';
-

package/src/lib/config-storage.d.ts

@@ -1,30 +0,0 @@
-/**
- * Plugin Configuration Storage
- * Stores plugin-specific configuration in MongoDB
- * Used by both client apps and dashboard
- */
-export interface PluginConfigDocument {
-    _id?: string;
-    pluginId: string;
-    siteId: string;
-    config: {
-        customBlocks?: unknown[];
-        darkMode?: boolean;
-        backgroundColors?: {
-            light: string;
-            dark?: string;
-        };
-        [key: string]: unknown;
-    };
-    updatedAt: Date;
-}
-export declare function getPluginConfigCollection(getDb: () => Promise<{
-    db: any;
-}>): Promise<any>;
-export declare function getPluginConfig(getDb: () => Promise<{
-    db: any;
-}>, pluginId: string, siteId?: string): Promise<PluginConfigDocument | null>;
-export declare function savePluginConfig(getDb: () => Promise<{
-    db: any;
-}>, pluginId: string, siteId: string, config: PluginConfigDocument['config']): Promise<void>;
-//# sourceMappingURL=config-storage.d.ts.map

package/src/lib/config-storage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-storage.d.ts","sourceRoot":"","sources":["config-storage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,oBAAoB;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACJ,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;QACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gBAAgB,CAAC,EAAE;YACf,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;IACF,SAAS,EAAE,IAAI,CAAC;CACnB;AAKD,wBAAsB,yBAAyB,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,gBAIhF;AAGD,wBAAsB,eAAe,CACjC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,EACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAkB,GAC3B,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAGtC;AAGD,wBAAsB,gBAAgB,CAClC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,EACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,GACvC,OAAO,CAAC,IAAI,CAAC,CAiBf"}

package/src/lib/config-storage.js

@@ -1,31 +0,0 @@
-/**
- * Plugin Configuration Storage
- * Stores plugin-specific configuration in MongoDB
- * Used by both client apps and dashboard
- */
-const COLLECTION_NAME = 'pluginConfigs';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function getPluginConfigCollection(getDb) {
-    const { db } = await getDb();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return db.collection(COLLECTION_NAME);
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function getPluginConfig(getDb, pluginId, siteId = 'default') {
-    const collection = await getPluginConfigCollection(getDb);
-    return collection.findOne({ pluginId, siteId });
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function savePluginConfig(getDb, pluginId, siteId, config) {
-    const collection = await getPluginConfigCollection(getDb);
-    await collection.updateOne({ pluginId, siteId }, {
-        $set: {
-            config,
-            updatedAt: new Date()
-        },
-        $setOnInsert: {
-            pluginId,
-            siteId
-        }
-    }, { upsert: true });
-}

package/src/lib/config-storage.ts

@@ -1,65 +0,0 @@
-/**
- * Plugin Configuration Storage
- * Stores plugin-specific configuration in MongoDB
- * Used by both client apps and dashboard
- */
-
-export interface PluginConfigDocument {
-    _id?: string;
-    pluginId: string;
-    siteId: string;
-    config: {
-        customBlocks?: unknown[];
-        darkMode?: boolean;
-        backgroundColors?: {
-            light: string;
-            dark?: string;
-        };
-        [key: string]: unknown;
-    };
-    updatedAt: Date;
-}
-
-const COLLECTION_NAME = 'pluginConfigs';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function getPluginConfigCollection(getDb: () => Promise<{ db: any }>) {
-    const { db } = await getDb();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (db as any).collection(COLLECTION_NAME);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function getPluginConfig(
-    getDb: () => Promise<{ db: any }>,
-    pluginId: string,
-    siteId: string = 'default'
-): Promise<PluginConfigDocument | null> {
-    const collection = await getPluginConfigCollection(getDb);
-    return collection.findOne({ pluginId, siteId }) as Promise<PluginConfigDocument | null>;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function savePluginConfig(
-    getDb: () => Promise<{ db: any }>,
-    pluginId: string,
-    siteId: string,
-    config: PluginConfigDocument['config']
-): Promise<void> {
-    const collection = await getPluginConfigCollection(getDb);
-    
-    await collection.updateOne(
-        { pluginId, siteId },
-        {
-            $set: {
-                config,
-                updatedAt: new Date()
-            },
-            $setOnInsert: {
-                pluginId,
-                siteId
-            }
-        },
-        { upsert: true }
-    );
-}

package/src/lib/index.ts

@@ -1,9 +0,0 @@
-/**
- * Library exports
- * All decoupled, reusable components and utilities
- */
-
-export * from './blocks';
-export * from './utils';
-export * from './migration';
-

package/src/lib/layouts/blocks/ColumnsBlock.d.ts

@@ -1,25 +0,0 @@
-/**
- * Columns Block
- * Flex/grid container with configurable column layouts
- */
-import React from 'react';
-import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
-import { Block } from '../../../types/block';
-/**
- * Columns Block Edit Component
- */
-export declare const ColumnsEdit: React.FC<BlockEditProps & {
-    childBlocks: Block[];
-    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
-    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
-    onChildBlockDelete: (id: string, containerId: string) => void;
-    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
-}>;
-/**
- * Columns Block Preview Component
- */
-export declare const ColumnsPreview: React.FC<BlockPreviewProps & {
-    childBlocks?: Block[];
-    renderChild?: (block: Block) => React.ReactNode;
-}>;
-//# sourceMappingURL=ColumnsBlock.d.ts.map

package/src/lib/layouts/blocks/ColumnsBlock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnsBlock.d.ts","sourceRoot":"","sources":["ColumnsBlock.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,GAAG;IAChD,WAAW,EAAE,KAAK,EAAE,CAAC;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5F,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjF,CAyLI,CAAC;AAEN;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG;IACtD,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD,CAgFA,CAAC"}

package/src/lib/layouts/blocks/ColumnsBlock.js

@@ -1,182 +0,0 @@
-/**
- * Columns Block
- * Flex/grid container with configurable column layouts
- */
-'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Plus, Trash2 } from 'lucide-react';
-import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
-import { COLUMN_LAYOUTS } from '../index';
-/**
- * Columns Block Edit Component
- */
-export const ColumnsEdit = ({ block, onUpdate, isSelected, childBlocks = [], onChildBlockAdd, onChildBlockUpdate, onChildBlockDelete, onChildBlockMove, }) => {
-    // Support both old layout-based system and new dynamic column count
-    const columnCount = block.data.columnCount;
-    const layout = block.data.layout;
-    // Determine number of columns: use columnCount if set, otherwise derive from layout
-    let numColumns;
-    let gridClass;
-    let columnWidths;
-    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
-    const gridClassMap = {
-        1: 'grid-cols-1',
-        2: 'grid-cols-2',
-        3: 'grid-cols-3',
-        4: 'grid-cols-4',
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-    };
-    if (columnCount !== undefined && columnCount > 0) {
-        // Dynamic column system
-        numColumns = columnCount;
-        // Create equal-width columns
-        const widthPercent = Math.floor(100 / numColumns);
-        columnWidths = Array(numColumns).fill(widthPercent);
-        // Use explicit grid class from map, fallback to inline style if needed
-        gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
-    }
-    else if (layout && COLUMN_LAYOUTS[layout]) {
-        // Legacy layout-based system
-        const layoutConfig = COLUMN_LAYOUTS[layout];
-        numColumns = layoutConfig.widths.length;
-        gridClass = layoutConfig.grid;
-        columnWidths = layoutConfig.widths;
-    }
-    else {
-        // Default to 2 columns
-        numColumns = 2;
-        gridClass = 'grid-cols-2';
-        columnWidths = [50, 50];
-    }
-    // Split child blocks into columns based on columnIndex in meta, or round-robin
-    const columns = Array.from({ length: numColumns }, () => []);
-    childBlocks.forEach((childBlock) => {
-        var _a;
-        const columnIndex = (_a = childBlock.meta) === null || _a === void 0 ? void 0 : _a.columnIndex;
-        if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
-            columns[columnIndex].push(childBlock);
-        }
-        else {
-            // Fallback to round-robin if no columnIndex specified
-            const index = childBlocks.indexOf(childBlock);
-            columns[index % numColumns].push(childBlock);
-        }
-    });
-    // Get column widths from data or use equal widths
-    const storedWidths = block.data.columnWidths;
-    const currentWidths = storedWidths && storedWidths.length === numColumns
-        ? storedWidths
-        : columnWidths; // Use calculated equal widths if not set
-    // Add column handler
-    const addColumn = () => {
-        if (numColumns >= 4)
-            return; // Max 4 columns
-        const newColumnCount = numColumns + 1;
-        // Calculate new equal widths
-        const newWidthPercent = Math.floor(100 / newColumnCount);
-        const newWidths = Array(newColumnCount).fill(newWidthPercent);
-        onUpdate(Object.assign(Object.assign({}, block.data), { columnCount: newColumnCount, columnWidths: newWidths, 
-            // Clear layout if using dynamic columns
-            layout: undefined }));
-    };
-    // Delete column handler
-    const deleteColumn = (colIndex) => {
-        if (numColumns <= 1)
-            return; // Don't allow deleting the last column
-        // Move blocks from deleted column to the last column (or previous column if deleting last)
-        const blocksToMove = columns[colIndex] || [];
-        const targetColumnIndex = colIndex === numColumns - 1 ? numColumns - 2 : numColumns - 1;
-        const targetColumn = columns[targetColumnIndex] || [];
-        // Move each block to the target column using moveBlock (which will update meta.columnIndex)
-        blocksToMove.forEach((blockToMove, blockIndex) => {
-            const newIndex = targetColumn.length + blockIndex;
-            onChildBlockMove(blockToMove.id, newIndex, `${block.id}-col-${targetColumnIndex}`);
-        });
-        // Update column count and widths after moving blocks
-        const newColumnCount = numColumns - 1;
-        // Remove the deleted column's width and redistribute
-        const newWidths = currentWidths.filter((_, i) => i !== colIndex);
-        // Normalize to ensure they sum to 100
-        const total = newWidths.reduce((sum, w) => sum + w, 0);
-        const normalizedWidths = newWidths.map(w => Math.round((w / total) * 100));
-        onUpdate(Object.assign(Object.assign({}, block.data), { columnCount: newColumnCount, columnWidths: normalizedWidths, layout: undefined }));
-    };
-    return (_jsxs("div", { className: "rounded-xl bg-white relative", children: [_jsx("div", { className: "grid gap-8 p-6", style: {
-                    gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
-                }, children: Array.from({ length: numColumns }).map((_, colIndex) => (_jsx("div", { className: `group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
-                        ? 'border-primary/20'
-                        : 'border-gray-200/50'}`, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("span", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400", children: ["Column ", colIndex + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[9px] text-gray-500", children: [currentWidths[colIndex], "%"] }), numColumns > 1 && (_jsx("button", { onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    deleteColumn(colIndex);
-                                                }, className: "opacity-0 group-hover/col:opacity-100 p-1 text-neutral-400 hover:text-red-500 transition-all rounded", title: "Delete Column", "aria-label": "Delete Column", children: _jsx(Trash2, { size: 10 }) }))] })] }), _jsx(LayoutContainer, { blocks: columns[colIndex] || [], containerId: `${block.id}-col-${colIndex}`, onBlockAdd: onChildBlockAdd, onBlockUpdate: onChildBlockUpdate, onBlockDelete: onChildBlockDelete, onBlockMove: onChildBlockMove, emptyLabel: `Drop blocks in column ${colIndex + 1}` })] }) }, colIndex))) }), numColumns < 4 && (_jsx("button", { onClick: addColumn, className: "absolute top-0 right-0 h-8 w-8 flex items-center justify-center bg-white border-l border-b border-gray-200 text-primary hover:bg-primary hover:text-white transition-all z-10 rounded-br-xl", title: "Add Column", children: _jsx(Plus, { size: 16 }) }))] }));
-};
-/**
- * Columns Block Preview Component
- */
-export const ColumnsPreview = ({ block, childBlocks = [], renderChild, context }) => {
-    // Support both old layout-based system and new dynamic column count
-    const columnCount = block.data.columnCount;
-    const layout = block.data.layout;
-    // Determine number of columns: use columnCount if set, otherwise derive from layout
-    let numColumns;
-    let gridClass;
-    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
-    const gridClassMap = {
-        1: 'grid-cols-1',
-        2: 'grid-cols-2',
-        3: 'grid-cols-3',
-        4: 'grid-cols-4',
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-    };
-    // Get column widths
-    const storedWidths = block.data.columnWidths;
-    if (columnCount !== undefined && columnCount > 0) {
-        // Dynamic column system
-        numColumns = columnCount;
-        gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
-    }
-    else if (layout && COLUMN_LAYOUTS[layout]) {
-        // Legacy layout-based system
-        const layoutConfig = COLUMN_LAYOUTS[layout];
-        numColumns = layoutConfig.widths.length;
-        gridClass = layoutConfig.grid;
-    }
-    else {
-        // Default to 2 columns
-        numColumns = 2;
-        gridClass = 'grid-cols-2';
-    }
-    // Use stored widths if available, otherwise use equal widths
-    const columnWidths = storedWidths && storedWidths.length === numColumns
-        ? storedWidths
-        : Array(numColumns).fill(Math.floor(100 / numColumns));
-    // If childBlocks are provided, use them; otherwise get from block.children
-    const children = childBlocks.length > 0
-        ? childBlocks
-        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
-            ? block.children
-            : []);
-    // Split child blocks into columns based on columnIndex in meta, or round-robin
-    const columns = Array.from({ length: numColumns }, () => []);
-    children.forEach((childBlock) => {
-        var _a;
-        const columnIndex = (_a = childBlock.meta) === null || _a === void 0 ? void 0 : _a.columnIndex;
-        if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
-            columns[columnIndex].push(childBlock);
-        }
-        else {
-            // Fallback to round-robin if no columnIndex specified
-            const index = children.indexOf(childBlock);
-            columns[index % numColumns].push(childBlock);
-        }
-    });
-    return (_jsx("div", { className: "grid gap-8 my-8", style: {
-            gridTemplateColumns: columnWidths.map(w => `${w}%`).join(' '),
-        }, children: Array.from({ length: numColumns }).map((_, colIndex) => {
-            var _a;
-            return (_jsx("div", { className: "min-h-[100px]", children: (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.map((childBlock) => (_jsx(React.Fragment, { children: renderChild ? renderChild(childBlock) : null }, childBlock.id))) }, colIndex));
-        }) }));
-};