@times-design-system/components-wordpress 1.3.0 → 1.5.0

package/scripts/create-wordpress-block.cjs

@@ -0,0 +1,681 @@
+#!/usr/bin/env node
+
+/**
+ * WordPress Block Creation Script
+ * 
+ * Transforms React components to WordPress blocks using the BLOCK_CREATION_CHECKLIST.md
+ * 
+ * Usage:
+ *   node scripts/create-wordpress-block.js [component-name]
+ *   node scripts/create-wordpress-block.js --list
+ *   node scripts/create-wordpress-block.js --status
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  cyan: '\x1b[36m',
+  blue: '\x1b[34m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function getReactComponents() {
+  const srcDir = path.join(__dirname, '../../components-react/src');
+  return fs.readdirSync(srcDir)
+    .filter(f => {
+      const stat = fs.statSync(path.join(srcDir, f));
+      return stat.isDirectory() && !f.startsWith('.');
+    })
+    .filter(f => f !== 'utils' && f !== 'index.js' && f !== 'styles.d.ts')
+    .sort();
+}
+
+function getWordPressBlocks() {
+  const blocksDir = path.join(__dirname, '../src/blocks');
+  if (!fs.existsSync(blocksDir)) {
+    return [];
+  }
+  return fs.readdirSync(blocksDir)
+    .filter(f => {
+      const stat = fs.statSync(path.join(blocksDir, f));
+      return stat.isDirectory() && !f.startsWith('.');
+    })
+    .sort();
+}
+
+function componentToBlockName(componentName) {
+  // Convert PascalCase to kebab-case
+  return componentName
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '');
+}
+
+function getTransformationStatus() {
+  const reactComponents = getReactComponents();
+  const wordPressBlocks = getWordPressBlocks();
+  
+  const status = {
+    transformed: [],
+    pending: [],
+    blocksWithoutComponent: [],
+  };
+
+  reactComponents.forEach(component => {
+    const blockName = componentToBlockName(component);
+    if (wordPressBlocks.includes(blockName)) {
+      status.transformed.push({ component, block: blockName });
+    } else {
+      status.pending.push({ component, blockName });
+    }
+  });
+
+  wordPressBlocks.forEach(block => {
+    const componentExists = reactComponents.some(c => componentToBlockName(c) === block);
+    if (!componentExists) {
+      status.blocksWithoutComponent.push(block);
+    }
+  });
+
+  return status;
+}
+
+function showStatus() {
+  const status = getTransformationStatus();
+
+  log('\n📊 Block Transformation Status', 'cyan');
+  log('━'.repeat(60), 'cyan');
+
+  log(`\n✅ Transformed Components (${status.transformed.length}):`, 'green');
+  status.transformed.forEach(({ component, block }) => {
+    log(`   ${component} → ${block}`);
+  });
+
+  if (status.pending.length > 0) {
+    log(`\n⏳ Pending Transformation (${status.pending.length}):`, 'yellow');
+    status.pending.forEach(({ component, blockName }) => {
+      log(`   ${component} → ${blockName}`);
+    });
+  }
+
+  if (status.blocksWithoutComponent.length > 0) {
+    log(`\n⚠️  Blocks Without Component (${status.blocksWithoutComponent.length}):`, 'yellow');
+    status.blocksWithoutComponent.forEach(block => {
+      log(`   ${block} (orphaned)`);
+    });
+  }
+
+  log(`\n📈 Overall: ${status.transformed.length}/${getReactComponents().length} components transformed`, 'bright');
+}
+
+function showAvailable() {
+  const status = getTransformationStatus();
+  
+  log('\n🔍 React Components & Transformation Status', 'cyan');
+  log('━'.repeat(60), 'cyan');
+
+  log('\n✅ Already Transformed:', 'green');
+  if (status.transformed.length === 0) {
+    log('   (none)');
+  } else {
+    status.transformed.forEach(({ component }) => {
+      log(`   ✓ ${component}`);
+    });
+  }
+
+  log('\n⏳ Ready for Transformation:', 'yellow');
+  if (status.pending.length === 0) {
+    log('   (none - all components have blocks!)');
+  } else {
+    status.pending.forEach(({ component, blockName }) => {
+      log(`   ○ ${component} → ${blockName}`);
+    });
+  }
+
+  log('\n💡 To transform a component, run:', 'cyan');
+  log('   npm run block:create -- <component-name>', 'dim');
+  log('\n   Example:', 'dim');
+  log('   npm run block:create -- DialogBox', 'dim');
+  log('\n   Or to see checklists for all pending:', 'dim');
+  log('   npm run block:create:all', 'dim');
+}
+
+function showChecklistsAll() {
+  const status = getTransformationStatus();
+
+  if (status.pending.length === 0) {
+    log('\n✅ All components have blocks! Nothing pending.\n', 'green');
+    return;
+  }
+
+  log(`\n📋 Checklists for All Pending Components (${status.pending.length})`, 'cyan');
+  log('━'.repeat(60), 'cyan');
+
+  status.pending.forEach(({ component, blockName }, index) => {
+    log(`\n[${index + 1}/${status.pending.length}] ${component} → ${blockName}`, 'bright');
+    log('─'.repeat(60), 'dim');
+    
+    const checklistPath = path.join(__dirname, '../BLOCK_CREATION_CHECKLIST.md');
+    log(`\n📝 Quick Start:`);
+    log(`\n1. Analyze the React component:`);
+    log(`   - Location: packages/components-react/src/${component}/`);
+    log(`   - Review props and variants`);
+    
+    log(`\n2. Create block files:`);
+    log(`   mkdir -p src/blocks/${blockName}`);
+    log(`   # Create: block.json, index.js, edit.js, save.js, render.php, style.css`);
+    
+    log(`\n3. Follow the checklist`);
+    log(`4. Test the block: npm run build`);
+    log(`5. Add tests: __tests__/blocks/${blockName}.test.js`);
+    
+    log(`\n📖 Full Checklist: ${checklistPath}\n`);
+  });
+
+  log('━'.repeat(60), 'cyan');
+  log(`\n📊 Summary: ${status.pending.length} components ready for transformation`, 'yellow');
+  log(`To execute transformations, run:`, 'dim');
+  log(`npm run block:create:all`, 'dim');
+  log(`\nOr for a specific component:`, 'dim');
+  log(`npm run block:create -- ComponentName\n`, 'dim');
+}
+
+function showChecklistForOne(componentName) {
+  const blockName = componentToBlockName(componentName);
+  const checklistPath = path.join(__dirname, '../BLOCK_CREATION_CHECKLIST.md');
+  
+  if (!fs.existsSync(checklistPath)) {
+    log(`❌ Checklist not found: ${checklistPath}`, 'red');
+    return;
+  }
+
+  log(`\n📋 Block Creation Checklist for ${componentName}`, 'cyan');
+  log('━'.repeat(60), 'cyan');
+  log(`\nComponent: ${componentName}`);
+  log(`Block Name: tds/${blockName}`);
+  log(`Directory: src/blocks/${blockName}/`);
+  log(`\n📖 Reference: ${checklistPath}`, 'dim');
+  
+  log(`\n📝 Quick Start:`, 'bright');
+  log(`\n1. Analyze the React component:`, 'green');
+  log(`   - Location: packages/components-react/src/${componentName}/`);
+  log(`   - Review props and variants`);
+  
+  log(`\n2. Create block files:`, 'green');
+  log(`   mkdir -p src/blocks/${blockName}`);
+  log(`   # Create: block.json, index.js, edit.js, save.js, render.php, style.css`);
+  
+  log(`\n3. Follow the checklist:`, 'green');
+  log(`   - Copy React component structure to WordPress block`);
+  log(`   - Define block.json attributes`);
+  log(`   - Implement edit.js (editor UI)`);
+  log(`   - Implement save.js (static output)`);
+  log(`   - Implement render.php (server-side rendering)`);
+  log(`   - Copy and adapt styles from React component`);
+  log(`   - Map CSS custom properties to resolved values`);
+  
+  log(`\n4. Test the block:`, 'green');
+  log(`   npm run build`);
+  log(`   # Test in WordPress Gutenberg editor`);
+  
+  log(`\n5. Add tests:`, 'green');
+  log(`   - Create __tests__/blocks/${blockName}.test.js`);
+  log(`   - Test all variants and states`);
+  
+  log(`\n📖 Full Checklist: ${checklistPath}`, 'yellow');
+  log('\nOpen the checklist file for detailed requirements.\n');
+}
+
+function executeTransformation(componentName) {
+  const blockName = componentToBlockName(componentName);
+  const blocksDir = path.join(__dirname, '../src/blocks');
+  const blockDir = path.join(blocksDir, blockName);
+  const reactCompDir = path.join(__dirname, '../../components-react/src', componentName);
+  
+  // Check if component exists
+  if (!fs.existsSync(reactCompDir)) {
+    log(`\n❌ React component not found: ${componentName}`, 'red');
+    process.exit(1);
+  }
+
+  // Check if block already exists
+  if (fs.existsSync(blockDir)) {
+    log(`\n⚠️  Block already exists: ${blockName}`, 'yellow');
+    log(`   Location: ${blockDir}`, 'dim');
+    process.exit(1);
+  }
+
+  // Create block directory structure
+  fs.mkdirSync(blockDir, { recursive: true });
+
+  // Generate block.json
+  const blockJson = {
+    $schema: 'https://schemas.wp.org/trunk/block.json',
+    apiVersion: 3,
+    name: `tds/${blockName}`,
+    title: `Times Design System - ${componentName}`,
+    category: 'common',
+    description: `WordPress block for Times Design System ${componentName} component`,
+    icon: 'block-default',
+    supports: {
+      html: false,
+      multiple: true,
+      reusable: true,
+      customClassName: true,
+    },
+    textdomain: 'times-blocks',
+    attributes: {
+      content: {
+        type: 'string',
+        default: '',
+      },
+    },
+    render: `file:./render.php`,
+    editorScript: `file:./index.js`,
+  };
+
+  fs.writeFileSync(
+    path.join(blockDir, 'block.json'),
+    JSON.stringify(blockJson, null, 2)
+  );
+
+  // Generate index.js (loader + register)
+  const indexJs = `/**
+ * WordPress Block Loader: ${componentName}
+ * 
+ * Reference: packages/components-react/src/${componentName}/
+ * TODO: Update attributes in block.json based on component props
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import { edit as Edit } from './edit';
+import { save as Save } from './save';
+import blockConfig from './block.json';
+
+registerBlockType(blockConfig.name, {
+  ...blockConfig,
+  edit: Edit,
+  save: Save,
+});
+`;
+
+  fs.writeFileSync(path.join(blockDir, 'index.js'), indexJs);
+
+  // Generate edit.js
+  const editJs = `/**
+ * Block Editor Component: ${componentName}
+ * 
+ * Renders the editor UI for the ${componentName} block in Gutenberg.
+ * Reference: packages/components-react/src/${componentName}/
+ */
+
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+
+export function edit(props) {
+  const { attributes, setAttributes } = props;
+  const blockProps = useBlockProps();
+
+  // TODO: Implement editor UI based on component props
+  // - Add inspector controls for attributes
+  // - Render preview of component in editor
+  // - Handle attribute changes via setAttributes()
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="${componentName} Settings" initialOpen={true}>
+          <TextControl
+            label="Content"
+            value={attributes.content || ''}
+            onChange={(content) => setAttributes({ content })}
+            placeholder="Enter content..."
+          />
+          {/* TODO: Add more controls based on component variants */}
+        </PanelBody>
+      </InspectorControls>
+      <div {...blockProps}>
+        <p>📝 ${componentName} block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the ${componentName} component here with current attributes
+        </p>
+      </div>
+    </>
+  );
+}
+`;
+
+  fs.writeFileSync(path.join(blockDir, 'edit.js'), editJs);
+
+  // Generate save.js
+  const saveJs = `/**
+ * Block Save Component: ${componentName}
+ * 
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/${componentName}/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual ${componentName} component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render ${componentName} component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}
+`;
+
+  fs.writeFileSync(path.join(blockDir, 'save.js'), saveJs);
+
+  // Generate render.php
+  const renderPhp = `<?php
+/**
+ * Block Rendering: ${componentName}
+ * 
+ * Server-side rendering for the ${componentName} block.
+ * Reference: packages/components-react/src/${componentName}/
+ * 
+ * @param array $attributes Block attributes
+ * @param string $content Saved block content
+ * @param WP_Block $block The block instance
+ * @return string Rendered HTML
+ */
+
+\$wrapper_attributes = get_block_wrapper_attributes();
+
+// TODO: Render the ${componentName} component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render ${componentName} component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-${blockName}--{modifier} -->
+</div>
+`;
+
+  fs.writeFileSync(path.join(blockDir, 'render.php'), renderPhp);
+
+  // Generate style.css
+  const styleCss = `/**
+ * Styles for ${componentName} Block
+ * 
+ * Reference: packages/components-react/src/${componentName}/
+ * Token Reference: packages/tokens/data/resolved-hexes.json
+ * 
+ * TODO: Adapt styles from React component
+ * - Copy relevant CSS from React component
+ * - Map CSS custom properties to resolved hex values
+ * - Use BEM naming: .tds-${blockName}--{modifier}
+ */
+
+.tds-${blockName} {
+  /* TODO: Add component styles here */
+}
+
+.tds-${blockName}--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-${blockName}--disabled {
+  /* TODO: Add disabled state styles */
+}
+`;
+
+  fs.writeFileSync(path.join(blockDir, 'style.css'), styleCss);
+
+  // Create test file
+  let testCreated = false;
+  try {
+    const { createBlockTest } = require('./create-wordpress-block-tests.cjs');
+    if (createBlockTest(componentName)) {
+      testCreated = true;
+    }
+  } catch (error) {
+    log(`   ⚠️  Could not auto-generate test: ${error.message}`, 'dim');
+  }
+
+  // Success output
+  log(`\n✅ Block Created Successfully!`, 'green');
+  log('━'.repeat(60), 'green');
+  
+  log(`\n📦 Block Details:`, 'bright');
+  log(`   Name: ${componentName}`);
+  log(`   Block: tds/${blockName}`);
+  log(`   Location: ${blockDir}`);
+
+  log(`\n📁 Generated Files:`, 'bright');
+  log(`   ✓ block.json     - Block configuration`);
+  log(`   ✓ index.js       - Block loader`);
+  log(`   ✓ edit.js        - Editor component`);
+  log(`   ✓ save.js        - Save component`);
+  log(`   ✓ render.php     - Server rendering`);
+  log(`   ✓ style.css      - Block styles`);
+  if (testCreated) {
+    log(`   ✓ [test] ${blockName}.test.js - Test file`);
+  }
+
+  log(`\n📋 Next Steps:`, 'cyan');
+  log(`\n   1. Review the React component:`, 'dim');
+  log(`      packages/components-react/src/${componentName}/`, 'dim');
+  
+  log(`\n   2. Update block.json attributes:`, 'dim');
+  log(`      ${blockDir}/block.json`, 'dim');
+  
+  log(`\n   3. Implement editor UI (edit.js):`, 'dim');
+  log(`      ${blockDir}/edit.js`, 'dim');
+  
+  log(`\n   4. Implement save component (save.js):`, 'dim');
+  log(`      ${blockDir}/save.js`, 'dim');
+  
+  log(`\n   5. Update server rendering (render.php):`, 'dim');
+  log(`      ${blockDir}/render.php`, 'dim');
+  
+  log(`\n   6. Add component styles (style.css):`, 'dim');
+  log(`      ${blockDir}/style.css`, 'dim');
+
+  log(`\n   7. Create and run tests:`, 'dim');
+  log(`      __tests__/blocks/${blockName}.test.js`, 'dim');
+
+  log(`\n   8. Build and test in WordPress:`, 'dim');
+  log(`      npm run build`, 'dim');
+  log(`      # Test in WordPress Gutenberg editor`, 'dim');
+
+  log(`\n📖 Reference Documentation:`, 'dim');
+  log(`   - BLOCK_CREATION_CHECKLIST.md`, 'dim');
+  log(`   - TRANSFORMATION_GUIDE.md`, 'dim');
+  log(`   - SCSS_VARIABLES_REFERENCE.md`, 'dim');
+  log('\n');
+}
+
+function executeAllTransformations() {
+  const status = getTransformationStatus();
+
+  if (status.pending.length === 0) {
+    log('\n✅ All components already have blocks!', 'green');
+    log('   Nothing to transform.\n', 'dim');
+    return;
+  }
+
+  log(`\n🚀 Executing Block Transformations (${status.pending.length} pending)`, 'cyan');
+  log('━'.repeat(60), 'cyan');
+
+  const results = {
+    created: [],
+    skipped: [],
+    errors: [],
+  };
+
+  status.pending.forEach(({ component, blockName }, index) => {
+    log(`\n[${index + 1}/${status.pending.length}] Transforming ${component}...`, 'bright');
+    
+    try {
+      executeTransformation(component);
+      results.created.push(component);
+    } catch (error) {
+      log(`   ❌ Error: ${error.message}`, 'red');
+      results.errors.push({ component, error: error.message });
+    }
+  });
+
+  // Summary
+  log('\n' + '━'.repeat(60), 'cyan');
+  log('\n📊 Transformation Summary:', 'bright');
+  log(`   ✅ Created: ${results.created.length}`, 'green');
+  log(`   ⚠️  Errors: ${results.errors.length}`, results.errors.length > 0 ? 'red' : 'dim');
+
+  if (results.created.length > 0) {
+    log(`\n✓ Successfully created blocks for:`, 'green');
+    results.created.forEach(c => log(`   - ${c}`, 'dim'));
+  }
+
+  if (results.errors.length > 0) {
+    log(`\n✗ Errors:`, 'red');
+    results.errors.forEach(({ component, error }) => {
+      log(`   - ${component}: ${error}`, 'dim');
+    });
+  }
+
+  log(`\n💡 Next: Review generated files and implement component logic`, 'cyan');
+  log(`   npm run build`, 'dim');
+  log('\n');
+}
+
+function showHelp() {
+  log('\n🚀 WordPress Block Transformation Tool', 'bright');
+  log('━'.repeat(60));
+  
+  log('\nUsage:', 'cyan');
+  log('  npm run block:create [command|component]', 'dim');
+  
+  log('\nCommands:', 'cyan');
+  log('  npm run block:status         Show transformation status', 'dim');
+  log('  npm run block:list           List components pending transformation', 'dim');
+  log('  npm run block:create -- NAME Execute transformation for specific component', 'dim');
+  log('  npm run block:create:all     Execute transformations for all pending', 'dim');
+  log('  npm run block:checklist -- NAME Show detailed checklist (no transformation)', 'dim');
+  log('  npm run block:checklist:all  Show all checklists (no transformation)', 'dim');
+  log('  npm run block:create -- --help Show this help message', 'dim');
+  
+  
+  log('\nExamples:', 'cyan');
+  log('\n  📊 Check status:', 'dim');
+  log('  npm run block:status', 'dim');
+  
+  log('\n  📋 List pending components:', 'dim');
+  log('  npm run block:list', 'dim');
+  
+  log('\n  ▶️  Execute transformation for one component:', 'dim');
+  log('  npm run block:create -- DialogBox', 'dim');
+  
+  log('\n  ▶️  Execute transformations for all pending:', 'dim');
+  log('  npm run block:create:all', 'dim');
+  
+  log('\n  📖 Show checklist for one component (no transformation):', 'dim');
+  log('  npm run block:checklist -- DialogBox', 'dim');
+  
+  log('\n  📖 Show checklists for all pending (no transformation):', 'dim');
+  log('  npm run block:checklist:all', 'dim');
+  
+  log('\nReference Files:', 'cyan');
+  log('  - BLOCK_CREATION_CHECKLIST.md    Step-by-step transformation guide', 'dim');
+  log('  - TRANSFORMATION_GUIDE.md        Component transformation patterns', 'dim');
+  log('  - SCSS_VARIABLES_REFERENCE.md   Design token value mappings', 'dim');
+  
+  log('\n');
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  
+  if (args.length === 0) {
+    showHelp();
+    process.exit(0);
+  }
+
+  const command = args[0].toLowerCase();
+  const reactComponents = getReactComponents();
+
+  switch (command) {
+    case '--help':
+    case '-h':
+      showHelp();
+      break;
+
+    case '--status':
+    case '-s':
+      showStatus();
+      break;
+
+    case '--list':
+    case '-l':
+      showAvailable();
+      break;
+
+    // Execute transformations
+    case '--all':
+    case '-a':
+      executeAllTransformations();
+      break;
+
+    // Show checklists (no transformation)
+    case '--checklist:all':
+    case '-ca':
+      showChecklistsAll();
+      break;
+
+    case '--checklist':
+    case '-c':
+      if (args.length < 2) {
+        log(`\n❌ Component name required with --checklist`, 'red');
+        log(`\nUsage: npm run block:checklist -- ComponentName`, 'dim');
+        process.exit(1);
+      }
+      const checklistComponent = args[1];
+      if (reactComponents.includes(checklistComponent)) {
+        showChecklistForOne(checklistComponent);
+      } else {
+        log(`\n❌ Component not found: ${checklistComponent}`, 'red');
+        log(`\nAvailable React components:`, 'yellow');
+        reactComponents.forEach(c => log(`   - ${c}`));
+        process.exit(1);
+      }
+      break;
+
+    default:
+      // Default: assume it's a component name and execute transformation
+      const componentName = args[0];
+      
+      if (reactComponents.includes(componentName)) {
+        executeTransformation(componentName);
+      } else {
+        log(`\n❌ Component not found: ${componentName}`, 'red');
+        log(`\nAvailable React components:`, 'yellow');
+        reactComponents.forEach(c => log(`   - ${c}`));
+        log(`\nRun with --help for more information\n`);
+        process.exit(1);
+      }
+  }
+}
+
+main();

package/src/blocks/dialog-box/block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "tds/dialog-box",
+  "title": "Times Design System - DialogBox",
+  "category": "common",
+  "description": "WordPress block for Times Design System DialogBox component",
+  "icon": "block-default",
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "reusable": true,
+    "customClassName": true
+  },
+  "textdomain": "times-blocks",
+  "attributes": {
+    "content": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "render": "file:./render.php",
+  "editorScript": "file:./index.js"
+}