@wp-typia/project-tools 0.16.2 → 0.16.4

package/templates/interactivity/src/edit.tsx.mustache

@@ -1,270 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
-import { PanelBody, RangeControl, TextControl, Button, Notice } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import currentManifest from './typia.manifest.json';
-import {
-  InspectorFromManifest,
-  type ManifestDocument,
-  useEditorFields,
-  useTypedAttributeUpdater,
-} from '@wp-typia/block-runtime/inspector';
-import type { {{pascalCase}}Attributes } from './types';
-import {
-  sanitize{{pascalCase}}Attributes,
-  validate{{pascalCase}}Attributes,
-} from './validators';
-import { useTypiaValidation } from './hooks';
-
-export default function Edit({ attributes, setAttributes, isSelected }: {
-  attributes: {{pascalCase}}Attributes;
-  setAttributes: (attrs: Partial<{{pascalCase}}Attributes>) => void;
-  isSelected: boolean;
-}) {
-  const [isPreviewing, setIsPreviewing] = useState(false);
-  const editorFields = useEditorFields(currentManifest as ManifestDocument, {
-    manual: ['content', 'clickCount', 'maxClicks', 'autoPlayInterval', 'uniqueId'],
-    labels: {
-      alignment: __('Alignment', '{{textDomain}}'),
-      animation: __('Animation', '{{textDomain}}'),
-      interactiveMode: __('Interactive Mode', '{{textDomain}}'),
-      isVisible: __('Visible', '{{textDomain}}'),
-      showCounter: __('Show Counter', '{{textDomain}}'),
-    },
-  });
-  const { errorMessages, isValid } = useTypiaValidation(
-    attributes,
-    validate{{pascalCase}}Attributes,
-  );
-  const validateEditorUpdate = (nextAttributes: {{pascalCase}}Attributes) => {
-    try {
-      return {
-        data: sanitize{{pascalCase}}Attributes(nextAttributes),
-        errors: [],
-        isValid: true as const,
-      };
-    } catch {
-      return validate{{pascalCase}}Attributes(nextAttributes);
-    }
-  };
-  const { updateField } = useTypedAttributeUpdater(
-    attributes,
-    setAttributes,
-    validateEditorUpdate
-  );
-  const alignmentValue = editorFields.getStringValue(
-    attributes,
-    'alignment',
-    'left'
-  );
-  const isVisible = editorFields.getBooleanValue(
-    attributes,
-    'isVisible',
-    true
-  );
-  const showCounter = editorFields.getBooleanValue(
-    attributes,
-    'showCounter',
-    true
-  );
-  const interactiveMode = editorFields.getStringValue(
-    attributes,
-    'interactiveMode',
-    'click'
-  );
-  const animation = editorFields.getStringValue(
-    attributes,
-    'animation',
-    'none'
-  );
-
-  const blockProps = useBlockProps({
-    className: `{{cssClassName}} {{cssClassName}}--${interactiveMode}`,
-    'data-wp-interactive': '{{slugKebabCase}}',
-    'data-wp-context': JSON.stringify({
-      clicks: attributes.clickCount,
-      isAnimating: attributes.isAnimating,
-      isVisible,
-      lastInteraction: '',
-      animation,
-      interactiveMode,
-      maxClicks: attributes.maxClicks,
-      autoPlayInterval: attributes.autoPlayInterval
-    })
-  });
-
-  const resetCounter = () => {
-    updateField('clickCount', 0);
-    updateField('isAnimating', false);
-  };
-
-  const testAnimation = () => {
-    updateField('isAnimating', true);
-    setTimeout(() => {
-      updateField('isAnimating', false);
-    }, 1000);
-  };
-
-  return (
-    <>
-      <BlockControls>
-        <AlignmentToolbar
-          value={alignmentValue}
-          onChange={(value) => updateField('alignment', (value || alignmentValue) as NonNullable<{{pascalCase}}Attributes['alignment']>)}
-        />
-      </BlockControls>
-
-      <InspectorControls>
-        <InspectorFromManifest
-          attributes={attributes}
-          fieldLookup={editorFields}
-          onChange={updateField}
-          paths={['alignment', 'interactiveMode', 'animation', 'showCounter', 'isVisible']}
-          title={__('Interactive Settings', '{{textDomain}}')}
-        />
-
-        <PanelBody title={__('Counter Settings', '{{textDomain}}')}>
-          <RangeControl
-            label={__('Max Clicks', '{{textDomain}}')}
-            value={attributes.maxClicks}
-            onChange={(value) => updateField('maxClicks', value ?? attributes.maxClicks ?? 0)}
-            min={0}
-            max={100}
-            help={__('Set to 0 for unlimited clicks', '{{textDomain}}')}
-          />
-
-          {interactiveMode === 'auto' && (
-            <RangeControl
-              label={__('Auto Play Interval (ms)', '{{textDomain}}')}
-              value={attributes.autoPlayInterval}
-              onChange={(value) => updateField('autoPlayInterval', value ?? attributes.autoPlayInterval ?? 0)}
-              min={100}
-              max={5000}
-              step={100}
-              help={__('Interval between automatic animations', '{{textDomain}}')}
-            />
-          )}
-
-          <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
-            <Button
-              variant="secondary"
-              onClick={resetCounter}
-              isSmall
-            >
-              {__('Reset Counter', '{{textDomain}}')}
-            </Button>
-            <Button
-              variant="secondary"
-              onClick={testAnimation}
-              isSmall
-            >
-              {__('Test Animation', '{{textDomain}}')}
-            </Button>
-          </div>
-
-          <TextControl
-            label={__('Unique ID', '{{textDomain}}')}
-            value={attributes.uniqueId}
-            onChange={(value) => updateField('uniqueId', value)}
-            help={__('Optional unique identifier for this block instance', '{{textDomain}}')}
-          />
-        </PanelBody>
-
-        {!isValid && (
-          <PanelBody title={__('Validation Errors', '{{textDomain}}')} initialOpen>
-            {errorMessages.map((error, index) => (
-              <Notice key={index} status="error" isDismissible={false}>
-                {error}
-              </Notice>
-            ))}
-          </PanelBody>
-        )}
-
-        {isSelected && (
-          <PanelBody title={__('Preview', '{{textDomain}}')}>
-            <Button
-              variant={isPreviewing ? 'primary' : 'secondary'}
-              onClick={() => setIsPreviewing(!isPreviewing)}
-              aria-pressed={isPreviewing}
-              isSmall
-            >
-              {isPreviewing
-                ? __('Disable Preview Mode', '{{textDomain}}')
-                : __('Enable Preview Mode', '{{textDomain}}')}
-            </Button>
-
-            {attributes.clickCount > 0 && (
-              <Notice status="info" isDismissible={false}>
-                {__('Current clicks:', '{{textDomain}}')} {attributes.clickCount}
-                {attributes.maxClicks > 0 && ` / ${attributes.maxClicks}`}
-              </Notice>
-            )}
-          </PanelBody>
-        )}
-      </InspectorControls>
-
-      <div {...blockProps}>
-        <div
-          className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
-          style={{ textAlign: alignmentValue }}
-          data-wp-on--click={isPreviewing ? 'actions.handleClick' : undefined}
-          data-wp-on--mouseenter={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
-          data-wp-on--mouseleave={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
-        >
-          <RichText
-            tagName="p"
-            value={attributes.content}
-            onChange={(value) => updateField('content', value)}
-            placeholder={__('{{title}} – click me to interact!', '{{textDomain}}')}
-          />
-
-          {!isValid && (
-            <Notice status="error" isDismissible={false}>
-              <p>
-                <strong>{__('Validation Errors', '{{textDomain}}')}</strong>
-              </p>
-              <ul style={{ margin: 0, paddingLeft: '1em' }}>
-                {errorMessages.map((error, index) => (
-                  <li key={index}>{error}</li>
-                ))}
-              </ul>
-            </Notice>
-          )}
-
-          {showCounter && (
-            <div className="{{cssClassName}}__counter">
-              <span className="{{cssClassName}}__counter-label">
-                {__('Clicks:', '{{textDomain}}')}
-              </span>
-              <span
-                className="{{cssClassName}}__counter-value"
-                data-wp-text="state.clicks"
-              >
-                {attributes.clickCount}
-              </span>
-            </div>
-          )}
-
-          {attributes.maxClicks > 0 && (
-            <div className="{{cssClassName}}__progress">
-              <div
-                className="{{cssClassName}}__progress-bar"
-                style={{ width: `${(attributes.clickCount / attributes.maxClicks) * 100}%` }}
-                data-wp-style--width="state.progress + '%'"
-              />
-            </div>
-          )}
-
-          {animation !== 'none' && (
-            <div
-              className={`{{cssClassName}}__animation ${attributes.isAnimating ? 'is-active' : ''}`}
-              data-wp-class--is-active="state.isAnimating"
-            >
-              {animation}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}

package/templates/interactivity/src/index.tsx.mustache

@@ -1,33 +0,0 @@
-import { registerBlockType } from '@wordpress/blocks';
-import type { BlockConfiguration } from '@wordpress/blocks';
-import type { BlockSupports } from '@wp-typia/block-types/blocks/supports';
-import {
-  buildScaffoldBlockRegistration,
-  type ScaffoldBlockMetadata,
-} from '@wp-typia/block-runtime/blocks';
-
-import Edit from './edit';
-import Save from './save';
-import metadata from './block.json';
-import './editor.scss';
-import './style.scss';
-
-import type { {{pascalCase}}Attributes } from './types';
-
-const scaffoldSupports = {
-  html: false,
-  align: true,
-  anchor: true,
-  className: true,
-  interactivity: true,
-} satisfies BlockSupports;
-
-const registration = buildScaffoldBlockRegistration<
-  BlockConfiguration<{{pascalCase}}Attributes>
->(metadata as ScaffoldBlockMetadata, {
-  supports: scaffoldSupports,
-  edit: Edit,
-  save: Save,
-});
-
-registerBlockType<{{pascalCase}}Attributes>(registration.name, registration.settings);

package/templates/interactivity/src/interactivity.ts.mustache

@@ -1,152 +0,0 @@
-/**
- * WordPress Interactivity API implementation for {{title}} block
- */
-import { store, getContext, getElement } from '@wordpress/interactivity';
-
-// Store configuration
-store('{{slugKebabCase}}', {
-  // State - reactive data that updates the UI
-  state: {
-    get clicks() {
-      return getContext().clicks;
-    },
-    get isAnimating() {
-      return getContext().isAnimating;
-    },
-    get isVisible() {
-      return getContext().isVisible;
-    },
-    get animationClass() {
-      const context = getContext();
-      if (!context.isAnimating) return '';
-
-      switch (context.animation) {
-        case 'bounce':
-          return 'animate-bounce';
-        case 'pulse':
-          return 'animate-pulse';
-        case 'shake':
-          return 'animate-shake';
-        case 'flip':
-          return 'animate-flip';
-        default:
-          return '';
-      }
-    },
-    get progress() {
-      const context = getContext();
-      return context.maxClicks > 0 ? (context.clicks / context.maxClicks) * 100 : 0;
-    },
-    get clampedClicks() {
-      const context = getContext();
-      return context.maxClicks > 0
-        ? Math.min(context.clicks, context.maxClicks)
-        : context.clicks;
-    },
-    get isComplete() {
-      const context = getContext();
-      return context.clicks >= context.maxClicks && context.maxClicks > 0;
-    }
-  },
-
-  // Actions - user interactions
-  actions: {
-    // Handle block click
-    handleClick: () => {
-      const context = getContext();
-      const { element } = getElement();
-
-      // Increment click counter
-      context.clicks += 1;
-      context.lastInteraction = 'click';
-
-      // Trigger animation
-      if (context.animation !== 'none') {
-        context.isAnimating = true;
-        setTimeout(() => {
-          context.isAnimating = false;
-        }, 1000);
-      }
-
-      // Emit custom event
-      element.dispatchEvent(new CustomEvent('{{slugKebabCase}}:click', {
-        detail: { clicks: context.clicks }
-      }));
-
-      // Check if max clicks reached
-      if (context.maxClicks > 0 && context.clicks >= context.maxClicks) {
-        element.dispatchEvent(new CustomEvent('{{slugKebabCase}}:complete', {
-          detail: { totalClicks: context.clicks }
-        }));
-      }
-    },
-
-    // Handle hover events
-    handleMouseEnter: () => {
-      const context = getContext();
-      if (context.interactiveMode === 'hover') {
-        context.isAnimating = true;
-        context.lastInteraction = 'hover';
-      }
-    },
-
-    handleMouseLeave: () => {
-      const context = getContext();
-      if (context.interactiveMode === 'hover') {
-        context.isAnimating = false;
-      }
-    },
-
-    // Toggle visibility
-    toggleVisibility: () => {
-      const context = getContext();
-      context.isVisible = !context.isVisible;
-    },
-
-    // Reset counter
-    reset: () => {
-      const context = getContext();
-      context.clicks = 0;
-      context.isAnimating = false;
-      context.lastInteraction = 'reset';
-    },
-
-    // Start/stop auto play
-    toggleAutoPlay: () => {
-      const context = getContext();
-      if (context.autoPlayInterval > 0) {
-        if (context.autoPlayTimer) {
-          clearInterval(context.autoPlayTimer);
-          context.autoPlayTimer = null;
-        } else {
-          context.autoPlayTimer = setInterval(() => {
-            context.clicks += 1;
-            context.isAnimating = true;
-            setTimeout(() => {
-              context.isAnimating = false;
-            }, 500);
-          }, context.autoPlayInterval);
-        }
-      }
-    }
-  }
-});
-
-// Type definitions for TypeScript
-declare global {
-  namespace WordPress {
-    namespace Interactivity {
-      interface {{pascalCase}}Context {
-        clicks: number;
-        isAnimating: boolean;
-        isVisible: boolean;
-        lastInteraction: string;
-        animation: string;
-        interactiveMode: string;
-        maxClicks: number;
-        autoPlayInterval: number;
-        autoPlayTimer?: number;
-      }
-    }
-  }
-}

package/templates/interactivity/src/save.tsx.mustache

@@ -1,101 +0,0 @@
-import { useBlockProps, RichText } from '@wordpress/block-editor';
-import type { {{pascalCase}}Attributes } from './types';
-
-export default function Save({ attributes }: { attributes: {{pascalCase}}Attributes }) {
-  const blockProps = useBlockProps.save({
-    className: `{{cssClassName}} {{cssClassName}}--${attributes.interactiveMode}`,
-    'data-wp-interactive': '{{slugKebabCase}}',
-    'data-wp-context': JSON.stringify({
-      clicks: attributes.clickCount,
-      isAnimating: attributes.isAnimating,
-      isVisible: attributes.isVisible,
-      lastInteraction: '',
-      animation: attributes.animation,
-      interactiveMode: attributes.interactiveMode,
-      maxClicks: attributes.maxClicks,
-      autoPlayInterval: attributes.autoPlayInterval
-    })
-  });
-
-  return (
-    <div {...blockProps}>
-      <div
-        className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
-        style={{ textAlign: attributes.alignment }}
-        data-wp-on--click="actions.handleClick"
-        data-wp-on--mouseenter={attributes.interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
-        data-wp-on--mouseleave={attributes.interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
-        data-wp-bind--hidden="!state.isVisible"
-      >
-        <RichText.Content
-          tagName="p"
-          value={attributes.content}
-          className="{{cssClassName}}__text"
-        />
-
-        {attributes.showCounter && (
-          <div
-            className="{{cssClassName}}__counter"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            <span className="{{cssClassName}}__counter-label">
-              Clicks:
-            </span>
-            <span
-              className="{{cssClassName}}__counter-value"
-              data-wp-text="state.clicks"
-            >
-              {attributes.clickCount}
-            </span>
-          </div>
-        )}
-
-        {attributes.maxClicks > 0 && (
-          <div className="{{cssClassName}}__progress">
-            <div
-              className="{{cssClassName}}__progress-bar"
-              role="progressbar"
-              aria-label="Click progress"
-              aria-valuemin={0}
-              aria-valuemax={attributes.maxClicks}
-              aria-valuenow={Math.min(attributes.clickCount, attributes.maxClicks)}
-              data-wp-bind--aria-valuenow="state.clampedClicks"
-              data-wp-style--width="state.progress + '%'"
-            />
-          </div>
-        )}
-
-        <div
-          className={`{{cssClassName}}__animation ${attributes.animation}`}
-          aria-hidden="true"
-          data-wp-class--is-active="state.isAnimating"
-        />
-
-        {attributes.maxClicks > 0 && (
-          <div
-            className="{{cssClassName}}__completion"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-            data-wp-bind--hidden="!state.isComplete"
-          >
-            🎉 Complete!
-          </div>
-        )}
-
-        <button
-          className="{{cssClassName}}__reset"
-          data-wp-on--click="actions.reset"
-          aria-label="Reset counter"
-        >
-          <span aria-hidden="true">↻</span>
-          <span className="screen-reader-text">
-            Reset counter
-          </span>
-        </button>
-      </div>
-    </div>
-  );
-}

package/templates/interactivity/src/types.ts.mustache

@@ -1,32 +0,0 @@
-import type { TextAlignment } from "@wp-typia/block-types/block-editor/alignment";
-import type {
-  TypiaValidationError,
-  ValidationResult,
-} from "@wp-typia/block-runtime/validation";
-import { tags } from "typia";
-
-export type { TypiaValidationError, ValidationResult } from "@wp-typia/block-runtime/validation";
-
-export interface {{pascalCase}}Attributes {
-  content: string & tags.MinLength<1> & tags.MaxLength<1000> & tags.Default<"">;
-  alignment?: TextAlignment & tags.Default<"left">;
-  isVisible?: boolean & tags.Default<true>;
-  interactiveMode?: ('click' | 'hover' | 'auto') & tags.Default<"click">;
-  animation?: ('none' | 'bounce' | 'pulse' | 'shake' | 'flip') & tags.Default<"none">;
-  clickCount?: number & tags.Minimum<0> & tags.Type<"uint32"> & tags.Default<0>;
-  isAnimating?: boolean & tags.Default<false>;
-  showCounter?: boolean & tags.Default<true>;
-  maxClicks?: number & tags.Minimum<0> & tags.Type<"uint32"> & tags.Default<10>;
-  autoPlayInterval?: number & tags.Minimum<0> & tags.Type<"uint32"> & tags.Default<0>;
-  uniqueId?: string & tags.Default<"">;
-}
-
-export interface {{pascalCase}}Context {
-  clicks: number;
-  isAnimating: boolean;
-  isVisible: boolean;
-  lastInteraction: string;
-  animationClass: string;
-}
-
-export type {{pascalCase}}ValidationResult = ValidationResult<{{pascalCase}}Attributes>;

package/templates/interactivity/src/validators.ts.mustache

@@ -1,47 +0,0 @@
-import typia from 'typia';
-import currentManifest from "./typia.manifest.json";
-import { {{pascalCase}}Attributes, {{pascalCase}}ValidationResult } from "./types";
-import { generateScopedClientId } from "@wp-typia/block-runtime/identifiers";
-import { createTemplateValidatorToolkit } from "./validator-toolkit";
-
-const scaffoldValidators = createTemplateValidatorToolkit<{{pascalCase}}Attributes>({
-  assert: typia.createAssert<{{pascalCase}}Attributes>(),
-  clone: typia.misc.createClone<{{pascalCase}}Attributes>() as (
-    value: {{pascalCase}}Attributes,
-  ) => {{pascalCase}}Attributes,
-  is: typia.createIs<{{pascalCase}}Attributes>(),
-  manifest: currentManifest,
-  prune: typia.misc.createPrune<{{pascalCase}}Attributes>(),
-  random: typia.createRandom<{{pascalCase}}Attributes>() as (
-    ...args: unknown[]
-  ) => {{pascalCase}}Attributes,
-  finalize: (normalized) => ({
-    ...normalized,
-    uniqueId:
-      normalized.uniqueId && normalized.uniqueId.length > 0
-        ? normalized.uniqueId
-        : generateScopedClientId("{{slugKebabCase}}"),
-  }),
-  validate: typia.createValidate<{{pascalCase}}Attributes>(),
-});
-
-export const validate{{pascalCase}}Attributes =
-  scaffoldValidators.validateAttributes as (
-    attributes: unknown,
-  ) => {{pascalCase}}ValidationResult;
-
-export const validators = scaffoldValidators.validators;
-
-export const sanitize{{pascalCase}}Attributes =
-  scaffoldValidators.sanitizeAttributes as (
-    attributes: Partial<{{pascalCase}}Attributes>,
-  ) => {{pascalCase}}Attributes;
-
-/**
- * Runtime type guard for checking if an object is {{pascalCase}}Attributes.
- */
-export const is{{pascalCase}}Attributes = (obj: unknown): obj is {{pascalCase}}Attributes => {
-  return validators.is(obj);
-};
-
-export const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;

package/templates/persistence/src/block.json.mustache

@@ -1,52 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"name": "{{namespace}}/{{slugKebabCase}}",
-	"version": "{{blockMetadataVersion}}",
-	"title": "{{title}}",
-	"category": "{{category}}",
-	"icon": "{{icon}}",
-	"description": "{{description}}",
-	"example": {},
-	"supports": {
-		"html": false,
-		"align": true,
-		"anchor": true,
-		"className": true,
-		"interactivity": true
-	},
-	"attributes": {
-		"content": {
-			"type": "string",
-			"source": "html",
-			"selector": ".{{cssClassName}}__content",
-			"default": "{{title}} persistence block"
-		},
-		"alignment": {
-			"type": "string",
-			"enum": ["left", "center", "right"],
-			"default": "left"
-		},
-		"isVisible": {
-			"type": "boolean",
-			"default": true
-		},
-		"showCount": {
-			"type": "boolean",
-			"default": true
-		},
-		"buttonLabel": {
-			"type": "string",
-			"default": "Persist Count"
-		},
-		"resourceKey": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"textdomain": "{{textDomain}}",
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css",
-	"viewScriptModule": "file:./interactivity.js",
-	"render": "file:./render.php"
-}