/** * Schema Library - Manage all schema configurations * Dashboard view for created schemas */ import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { PlusIcon, MagnifyingGlassIcon, Squares2X2Icon, ListBulletIcon, EllipsisVerticalIcon, DocumentDuplicateIcon, ArrowDownTrayIcon, TrashIcon, PencilSquareIcon, CircleStackIcon, GlobeAltIcon, CheckCircleIcon, FolderIcon } from '@heroicons/react/24/outline'; import { Button, Input, Select, Toggle, Card, Badge, Alert } from '../../../../components/ui'; import { schemaTypes } from '../utils/schemaTypes'; const SchemaLibrary = ({ schemas, onAddNew, onEdit, onDelete, onToggleStatus, onDuplicate }) => { const [searchTerm, setSearchTerm] = useState(''); const [filterType, setFilterType] = useState('all'); const [view, setView] = useState('grid'); // grid or list const [showMenu, setShowMenu] = useState(null); const adminBase = typeof window !== 'undefined' && window?.prorankSeo?.adminUrl ? window.prorankSeo.adminUrl : '/wp-admin/'; const normalizedAdminBase = adminBase.endsWith('/') ? adminBase : `${adminBase}/`; const newPageEditorUrl = `${normalizedAdminBase}post-new.php?post_type=page`; const newPostEditorUrl = `${normalizedAdminBase}post-new.php`; const schemaDocsUrl = 'https://prorank.io/docs/schema-markup'; /** * Handle schema export - downloads schema config as JSON file */ const handleExport = (schema) => { const exportData = { version: '1.0', exported: new Date().toISOString(), plugin: 'prorank-seo', schema: { name: schema.name, type: schema.type, targeting: schema.targeting, mapping: schema.mapping, priority: schema.priority || 10 } }; const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `schema-${schema.type}-${Date.now()}.json`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }; /** * Handle schema duplication */ const handleDuplicate = (schema) => { if (onDuplicate) { onDuplicate(schema); } }; // Filter schemas const filteredSchemas = schemas.filter(schema => { const matchesSearch = !searchTerm || schema.name.toLowerCase().includes(searchTerm.toLowerCase()) || schema.type.toLowerCase().includes(searchTerm.toLowerCase()); const matchesType = filterType === 'all' || schema.type === filterType; return matchesSearch && matchesType; }); // Get unique schema types for filter const uniqueTypes = [...new Set(schemas.map(s => s.type))]; const getSchemaIcon = (type) => { return schemaTypes[type]?.icon || CircleStackIcon; }; const getSchemaLabel = (type) => { return schemaTypes[type]?.label || type; }; const getTargetingSummary = (targeting) => { const parts = []; if (targeting.mode === 'auto') { return __('Automatic targeting', 'prorank-seo'); } if (targeting.postTypes?.length) { parts.push(`${targeting.postTypes.length} post types`); } if (targeting.categories?.length) { parts.push(`${targeting.categories.length} categories`); } if (targeting.tags?.length) { parts.push(`${targeting.tags.length} tags`); } if (targeting.specific?.length) { parts.push(`${targeting.specific.length} specific pages`); } if (targeting.rules?.length) { parts.push(`${targeting.rules.length} custom rules`); } return parts.length ? parts.join(', ') : __('No targeting set', 'prorank-seo'); }; const getMappingSummary = (mapping) => { const mapped = Object.keys(mapping).length; if (mapped === 0) return __('No fields mapped', 'prorank-seo'); return `${mapped} fields mapped`; }; const getTargetingScopeCount = (targeting = {}) => { if (!targeting || typeof targeting !== 'object') { return 0; } if (targeting.mode === 'auto') { return 1; } return ( (targeting.postTypes?.length || 0) + (targeting.categories?.length || 0) + (targeting.tags?.length || 0) + (targeting.specific?.length || 0) + (targeting.rules?.length || 0) + (targeting.userRoles?.length || 0) ); }; const handleMenuAction = (action, schema) => { setShowMenu(null); switch (action) { case 'edit': onEdit(schema); break; case 'duplicate': handleDuplicate(schema); break; case 'export': handleExport(schema); break; case 'delete': onDelete(schema.id); break; default: break; } }; return (
{/* Header */}

{__('Schema Configurations', 'prorank-seo')}

{__('Manage your schema markup configurations. Each configuration can be applied to multiple pages automatically.', 'prorank-seo')}

{/* Quick Links: FAQ/HowTo Blocks */}

{__('Use FAQ & HowTo Schema Blocks', 'prorank-seo')}

{__('Open the editor and insert “ProRank FAQ Schema” or “ProRank HowTo Schema” blocks from the ProRank SEO category.', 'prorank-seo')}

{__('New Page Editor', 'prorank-seo')} {__('New Post Editor', 'prorank-seo')} {__('Schema Docs', 'prorank-seo')}
{/* Stats Cards */}
{schemas.length}
{__('Total Schemas', 'prorank-seo')}
{schemas.filter(s => s.status === 'active').length}
{__('Active Schemas', 'prorank-seo')}
{uniqueTypes.length}
{__('Schema Types', 'prorank-seo')}
{schemas.reduce((acc, s) => acc + getTargetingScopeCount(s.targeting), 0)}
{__('Target Rules', 'prorank-seo')}
{/* Controls */}
setSearchTerm(value)} placeholder={__('Search schemas...', 'prorank-seo')} leftIcon={MagnifyingGlassIcon} />
{/* Empty State */} {filteredSchemas.length === 0 ? (

{__('No Schemas Found', 'prorank-seo')}

{searchTerm ? __('No schemas match your search criteria.', 'prorank-seo') : __("You haven't created any schema configurations yet.", 'prorank-seo') }

{!searchTerm && ( )} ) : ( /* Schema Grid/List */
{filteredSchemas.map(schema => (
{/* Header */}
{schema.icon || '📄'}

{schema.name}

{getSchemaLabel(schema.type)}
{/* Status Toggle */} onToggleStatus(schema)} size="sm" />
{/* Details */}
{getTargetingSummary(schema.targeting)}
{getMappingSummary(schema.mapping)}
{schema.priority && (
{__('Priority:', 'prorank-seo')} {schema.priority}
)}
{/* Actions */}
)}
))}
)} {/* Footer Info */}

{__('Pro Tip:', 'prorank-seo')}

{__('Schema configurations are applied in priority order. Higher priority schemas override lower ones when multiple schemas target the same content.', 'prorank-seo')}

{/* Click outside to close menu */} {showMenu && (
setShowMenu(null)} /> )}
); }; export default SchemaLibrary;