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

package/src/blocks/tab-group/edit.js

@@ -0,0 +1,41 @@
+/**
+ * Block Editor Component: TabGroup
+ *
+ * Renders the editor UI for the TabGroup block in Gutenberg.
+ * Reference: packages/components-react/src/TabGroup/
+ */
+
+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="TabGroup 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>📝 TabGroup block editor</p>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          TODO: Render the TabGroup component here with current attributes
+        </p>
+      </div>
+    </>
+  );
+}

package/src/blocks/tab-group/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress Block Loader: TabGroup
+ *
+ * Reference: packages/components-react/src/TabGroup/
+ * 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
+});

package/src/blocks/tab-group/render.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Rendering: TabGroup
+ * 
+ * Server-side rendering for the TabGroup block.
+ * Reference: packages/components-react/src/TabGroup/
+ * 
+ * @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 TabGroup component
+// Extract attributes and render appropriate HTML with BEM classes
+
+?>
+<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
+  <!-- TODO: Render TabGroup component here -->
+  <!-- Use CSS custom properties from packages/tokens/data/resolved-hexes.json -->
+  <!-- Apply BEM naming: tds-tab-group--{modifier} -->
+</div>

package/src/blocks/tab-group/save.js

@@ -0,0 +1,23 @@
+/**
+ * Block Save Component: TabGroup
+ *
+ * Renders the static output saved to the database.
+ * Reference: packages/components-react/src/TabGroup/
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+
+export function save(props) {
+  const { attributes } = props;
+  const blockProps = useBlockProps.save();
+
+  // TODO: Render the actual TabGroup component with attributes
+  // This output is saved to the database and displayed on the frontend
+
+  return (
+    <div {...blockProps}>
+      {/* TODO: Render TabGroup component */}
+      {attributes.content && <p>{attributes.content}</p>}
+    </div>
+  );
+}

package/src/blocks/tab-group/style.css

@@ -0,0 +1,23 @@
+/**
+ * Styles for TabGroup Block
+ * 
+ * Reference: packages/components-react/src/TabGroup/
+ * 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-tab-group--{modifier}
+ */
+
+.tds-tab-group {
+  /* TODO: Add component styles here */
+}
+
+.tds-tab-group--focus {
+  /* TODO: Add focus state styles */
+}
+
+.tds-tab-group--disabled {
+  /* TODO: Add disabled state styles */
+}

package/vitest.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    pool: 'forks',
+    include: ['./__tests__/**/*.test.{js,jsx,ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        '**/*.d.ts',
+        '**/*.test.ts',
+        '**/*.test.tsx',
+        '**/*.test.js',
+        '**/*.test.jsx'
+      ]
+    }
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'],
+    conditions: ['node']
+  }
+});

package/vitest.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    pool: 'forks',
+    include: ['./__tests__/**/*.test.{js,jsx,ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        '**/*.d.ts',
+        '**/*.test.ts',
+        '**/*.test.tsx',
+        '**/*.test.js',
+        '**/*.test.jsx'
+      ]
+    }
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'],
+    conditions: ['node']
+  }
+});

package/vitest.setup.ts

@@ -0,0 +1,129 @@
+import '@testing-library/jest-dom';
+import { expect, afterEach, beforeEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import React from 'react';
+
+interface MockProps {
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+interface MockSelectOption {
+  value: string;
+  label: string;
+}
+
+interface MockSelectControlProps {
+  value: string;
+  onChange: (value: string) => void;
+  options?: MockSelectOption[];
+  [key: string]: unknown;
+}
+
+interface MockTextControlProps {
+  value: string;
+  onChange: (value: string) => void;
+  [key: string]: unknown;
+}
+
+interface MockToggleControlProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  [key: string]: unknown;
+}
+
+interface MockRichTextProps {
+  value: string;
+  onChange: (value: string) => void;
+  [key: string]: unknown;
+}
+
+// Mock WordPress block editor
+vi.mock('@wordpress/block-editor', () => ({
+  useBlockProps: vi.fn(() => ({ className: 'wp-block' })),
+  InspectorControls: ({ children }: MockProps) =>
+    React.createElement(
+      'div',
+      { 'data-testid': 'inspector-controls' },
+      children
+    ),
+  RichText: ({ value, onChange, ...props }: MockRichTextProps) =>
+    React.createElement(
+      'div',
+      {
+        ...props,
+        'data-testid': 'rich-text',
+        contentEditable: true
+      },
+      value
+    )
+}));
+
+// Mock WordPress components
+vi.mock('@wordpress/components', () => ({
+  PanelBody: ({ children }: MockProps) =>
+    React.createElement('div', { 'data-testid': 'panel-body' }, children),
+  SelectControl: ({ value, onChange, options }: MockSelectControlProps) =>
+    React.createElement(
+      'select',
+      {
+        value,
+        onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
+          onChange(e.target.value),
+        'data-testid': 'select-control'
+      },
+      options?.map((opt: MockSelectOption) =>
+        React.createElement(
+          'option',
+          { key: opt.value, value: opt.value },
+          opt.label
+        )
+      )
+    ),
+  TextControl: ({ value, onChange }: MockTextControlProps) =>
+    React.createElement('input', {
+      type: 'text',
+      value,
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        onChange(e.target.value),
+      'data-testid': 'text-control'
+    }),
+  ToggleControl: ({ checked, onChange }: MockToggleControlProps) =>
+    React.createElement('input', {
+      type: 'checkbox',
+      checked,
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        onChange(e.target.checked),
+      'data-testid': 'toggle-control'
+    })
+}));
+
+// Mock WordPress element
+vi.mock(
+  '@wordpress/element',
+  () => ({
+    Fragment: ({ children }: MockProps) => children
+  }),
+  { esmock: true }
+);
+
+// Mock WordPress blocks
+vi.mock('@wordpress/blocks', () => ({
+  registerBlockType: vi.fn()
+}));
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock console methods to reduce noise during tests
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.warn.mockRestore?.();
+  console.error.mockRestore?.();
+});