create-wp-typia 0.1.0 → 1.0.1

package/templates/interactivity/scripts/sync-types-to-block-json.ts.mustache

@@ -1,25 +0,0 @@
-import { syncBlockMetadata } from "./lib/typia-metadata-core";
-
-async function main() {
-	const result = await syncBlockMetadata({
-		blockJsonFile: "src/block.json",
-		manifestFile: "src/typia.manifest.json",
-		sourceTypeName: "{{pascalCase}}Attributes",
-		typesFile: "src/types.ts",
-	});
-
-	console.log("✅ block.json and typia.manifest.json were generated from TypeScript types!");
-	console.log("📝 Generated attributes:", result.attributeNames);
-
-	if (result.lossyProjectionWarnings.length > 0) {
-		console.warn("⚠️ Some Typia constraints were preserved only in typia.manifest.json:");
-		for (const warning of result.lossyProjectionWarnings) {
-			console.warn(`   - ${warning}`);
-		}
-	}
-}
-
-main().catch((error) => {
-	console.error("❌ Type sync failed:", error);
-	process.exit(1);
-});

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

@@ -1,75 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
-	"name": "create-block/{{slugKebabCase}}",
-	"version": "0.1.0",
-	"title": "{{title}}",
-	"category": "widgets",
-	"icon": "smiley",
-	"description": "{{description}}",
-	"example": {},
-	"supports": {
-		"html": false,
-		"align": true,
-		"anchor": true,
-		"className": true,
-		"interactivity": true
-	},
-	"attributes": {
-		"content": {
-			"type": "string",
-			"source": "html",
-			"selector": ".{{cssClassName}}__content",
-			"default": ""
-		},
-		"alignment": {
-			"type": "string",
-			"enum": ["left", "center", "right"],
-			"default": "left"
-		},
-		"isVisible": {
-			"type": "boolean",
-			"default": true
-		},
-		"interactiveMode": {
-			"type": "string",
-			"enum": ["click", "hover", "auto"],
-			"default": "click"
-		},
-		"animation": {
-			"type": "string",
-			"enum": ["none", "bounce", "pulse", "shake", "flip"],
-			"default": "none"
-		},
-		"clickCount": {
-			"type": "number",
-			"default": 0
-		},
-		"isAnimating": {
-			"type": "boolean",
-			"default": false
-		},
-		"showCounter": {
-			"type": "boolean",
-			"default": true
-		},
-		"maxClicks": {
-			"type": "number",
-			"default": 10
-		},
-		"autoPlayInterval": {
-			"type": "number",
-			"default": 0
-		},
-		"uniqueId": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"textdomain": "{{slugSnakeCase}}",
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js",
-	"viewScriptModule": "file:./interactivity.js"
-}

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

@@ -1,206 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, SelectControl, RangeControl, TextControl, Button, Notice } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
-import type { {{pascalCase}}Attributes } from './types';
-
-export default function Edit({ attributes, setAttributes, isSelected }: {
-  attributes: {{pascalCase}}Attributes;
-  setAttributes: (attrs: Partial<{{pascalCase}}Attributes>) => void;
-  isSelected: boolean;
-}) {
-  const [isPreviewing, setIsPreviewing] = useState(false);
-
-  const blockProps = useBlockProps({
-    className: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${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
-    })
-  });
-
-  const resetCounter = () => {
-    setAttributes({ clickCount: 0, isAnimating: false });
-  };
-
-  const testAnimation = () => {
-    setAttributes({ isAnimating: true });
-    setTimeout(() => {
-      setAttributes({ isAnimating: false });
-    }, 1000);
-  };
-
-  return (
-    <>
-      <BlockControls>
-        <AlignmentToolbar
-          value={attributes.alignment}
-          onChange={(value) => setAttributes({ alignment: value || 'left' })}
-        />
-      </BlockControls>
-
-      <InspectorControls>
-        <PanelBody title={__('Interactive Settings', '{{slugSnakeCase}}')}>
-          <SelectControl
-            label={__('Interactive Mode', '{{slugSnakeCase}}')}
-            value={attributes.interactiveMode}
-            options={[
-              { label: __('Click', '{{slugSnakeCase}}'), value: 'click' },
-              { label: __('Hover', '{{slugSnakeCase}}'), value: 'hover' },
-              { label: __('Auto Play', '{{slugSnakeCase}}'), value: 'auto' }
-            ]}
-            onChange={(value) => setAttributes({ interactiveMode: value })}
-          />
-
-          <SelectControl
-            label={__('Animation', '{{slugSnakeCase}}')}
-            value={attributes.animation}
-            options={[
-              { label: __('None', '{{slugSnakeCase}}'), value: 'none' },
-              { label: __('Bounce', '{{slugSnakeCase}}'), value: 'bounce' },
-              { label: __('Pulse', '{{slugSnakeCase}}'), value: 'pulse' },
-              { label: __('Shake', '{{slugSnakeCase}}'), value: 'shake' },
-              { label: __('Flip', '{{slugSnakeCase}}'), value: 'flip' }
-            ]}
-            onChange={(value) => setAttributes({ animation: value })}
-          />
-
-          <ToggleControl
-            label={__('Show Counter', '{{slugSnakeCase}}')}
-            checked={attributes.showCounter}
-            onChange={(value) => setAttributes({ showCounter: value })}
-          />
-
-          <ToggleControl
-            label={__('Visible', '{{slugSnakeCase}}')}
-            checked={attributes.isVisible}
-            onChange={(value) => setAttributes({ isVisible: value })}
-          />
-        </PanelBody>
-
-        <PanelBody title={__('Counter Settings', '{{slugSnakeCase}}')}>
-          <RangeControl
-            label={__('Max Clicks', '{{slugSnakeCase}}')}
-            value={attributes.maxClicks}
-            onChange={(value) => setAttributes({ maxClicks: value })}
-            min={0}
-            max={100}
-            help={__('Set to 0 for unlimited clicks', '{{slugSnakeCase}}')}
-          />
-
-          {attributes.interactiveMode === 'auto' && (
-            <RangeControl
-              label={__('Auto Play Interval (ms)', '{{slugSnakeCase}}')}
-              value={attributes.autoPlayInterval}
-              onChange={(value) => setAttributes({ autoPlayInterval: value })}
-              min={100}
-              max={5000}
-              step={100}
-              help={__('Interval between automatic animations', '{{slugSnakeCase}}')}
-            />
-          )}
-
-          <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
-            <Button
-              variant="secondary"
-              onClick={resetCounter}
-              isSmall
-            >
-              {__('Reset Counter', '{{slugSnakeCase}}')}
-            </Button>
-            <Button
-              variant="secondary"
-              onClick={testAnimation}
-              isSmall
-            >
-              {__('Test Animation', '{{slugSnakeCase}}')}
-            </Button>
-          </div>
-
-          <TextControl
-            label={__('Unique ID', '{{slugSnakeCase}}')}
-            value={attributes.uniqueId}
-            onChange={(value) => setAttributes({ uniqueId: value })}
-            help={__('Optional unique identifier for this block instance', '{{slugSnakeCase}}')}
-          />
-        </PanelBody>
-
-        {isSelected && (
-          <PanelBody title={__('Preview', '{{slugSnakeCase}}')}>
-            <ToggleControl
-              label={__('Enable Preview Mode', '{{slugSnakeCase}}')}
-              checked={isPreviewing}
-              onChange={setIsPreviewing}
-              help={__('Test interactions in the editor', '{{slugSnakeCase}}')}
-            />
-
-            {attributes.clickCount > 0 && (
-              <Notice status="info" isDismissible={false}>
-                {__('Current clicks:', '{{slugSnakeCase}}')} {attributes.clickCount}
-                {attributes.maxClicks > 0 && ` / ${attributes.maxClicks}`}
-              </Notice>
-            )}
-          </PanelBody>
-        )}
-      </InspectorControls>
-
-      <div {...blockProps}>
-        <div
-          className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
-          style={{ textAlign: attributes.alignment }}
-          data-wp-on--click={isPreviewing ? 'actions.handleClick' : undefined}
-          data-wp-on--mouseenter={isPreviewing && attributes.interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
-          data-wp-on--mouseleave={isPreviewing && attributes.interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
-        >
-          <RichText
-            tagName="p"
-            value={attributes.content}
-            onChange={(value) => setAttributes({ content: value })}
-            placeholder={__('{{title}} – click me to interact!', '{{slugSnakeCase}}')}
-            withoutInteractiveFormatting
-          />
-
-          {attributes.showCounter && (
-            <div className="{{cssClassName}}__counter">
-              <span className="{{cssClassName}}__counter-label">
-                {__('Clicks:', '{{slugSnakeCase}}')}
-              </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>
-          )}
-
-          {attributes.animation !== 'none' && (
-            <div
-              className={`{{cssClassName}}__animation ${attributes.isAnimating ? 'is-active' : ''}`}
-              data-wp-class="is-active"
-            >
-              {attributes.animation}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}

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

@@ -1,183 +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 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);
-        }
-      }
-    }
-  },
-
-  // Callbacks - lifecycle hooks
-  callbacks: {
-    // Initialize on mount
-    onInit: () => {
-      const context = getContext();
-      const { element } = getElement();
-
-      // Set initial state from attributes
-      context.clicks = parseInt(element.dataset.clicks || '0');
-      context.isAnimating = element.dataset.isAnimating === 'true';
-      context.isVisible = element.dataset.isVisible !== 'false';
-
-      // Set up event listeners
-      element.addEventListener('{{slugKebabCase}}:external-trigger', (event: any) => {
-        context.clicks = event.detail.clicks || context.clicks + 1;
-      });
-    },
-
-    // Log interactions
-    onInteraction: () => {
-      const context = getContext();
-      console.log(`{{slugKebabCase}} interaction:`, {
-        clicks: context.clicks,
-        type: context.lastInteraction,
-        timestamp: new Date().toISOString()
-      });
-    },
-
-    // Cleanup on unmount
-    onDestroy: () => {
-      const context = getContext();
-      if (context.autoPlayTimer) {
-        clearInterval(context.autoPlayTimer);
-      }
-    }
-  }
-});
-
-// 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,87 +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: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${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
-    }),
-    'data-clicks': attributes.clickCount,
-    'data-is-animating': attributes.isAnimating,
-    'data-is-visible': attributes.isVisible,
-    'data-unique-id': attributes.uniqueId
-  });
-
-  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">
-            <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"
-              data-wp-style--width="state.progress + '%'"
-            />
-          </div>
-        )}
-
-        <div
-          className={`{{cssClassName}}__animation ${attributes.animation}`}
-          data-wp-class="is-active"
-        />
-
-        {attributes.maxClicks > 0 && (
-          <div
-            className="{{cssClassName}}__completion"
-            data-wp-bind--hidden="!state.isComplete"
-          >
-            🎉 Complete!
-          </div>
-        )}
-
-        <button
-          className="{{cssClassName}}__reset"
-          data-wp-on--click="actions.reset"
-          aria-label="Reset counter"
-        >
-          ↻
-        </button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,29 +0,0 @@
-import { tags } from "typia";
-
-export interface {{pascalCase}}Attributes {
-  content: string & tags.MinLength<1> & tags.MaxLength<1000> & tags.Default<"">;
-  alignment?: ('left' | 'center' | 'right') & 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.Default<0>;
-  isAnimating?: boolean & tags.Default<false>;
-  showCounter?: boolean & tags.Default<true>;
-  maxClicks?: number & tags.Default<10>;
-  autoPlayInterval?: number & 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 = {
-  isValid: boolean;
-  errors: string[];
-  data?: {{pascalCase}}Attributes;
-};

package/templates/interactivity/tsconfig.json.mustache

@@ -1,9 +0,0 @@
-{
-	"extends": "@wordpress/scripts/config/tsconfig.json",
-	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build/types"
-	},
-	"include": ["src/**/*"],
-	"exclude": ["build/**/*"]
-}