create-wp-typia 0.1.0

package/templates/full/src/hooks.ts.mustache

@@ -0,0 +1,140 @@
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback, useEffect } from '@wordpress/element';
+import { {{pascalCase}}Attributes, validate{{pascalCase}}Attributes, sanitize{{pascalCase}}Attributes } from './types';
+
+/**
+ * Hook for managing block attributes with validation
+ */
+export const use{{pascalCase}}Attributes = (initialAttributes: Partial<{{pascalCase}}Attributes>) => {
+  const [attributes, setAttributes] = useState<{{pascalCase}}Attributes>(() =>
+    sanitize{{pascalCase}}Attributes(initialAttributes)
+  );
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  const updateAttribute = useCallback((key: keyof {{pascalCase}}Attributes, value: any) => {
+    setAttributes(prev => {
+      const newAttrs = { ...prev, [key]: value };
+      const validation = validate{{pascalCase}}Attributes(newAttrs);
+
+      if (!validation.isValid) {
+        setValidationErrors(validation.errors);
+      } else {
+        setValidationErrors([]);
+      }
+
+      return validation.data || newAttrs;
+    });
+  }, []);
+
+  const updateAttributes = useCallback((updates: Partial<{{pascalCase}}Attributes>) => {
+    setAttributes(prev => {
+      const newAttrs = { ...prev, ...updates };
+      const validation = validate{{pascalCase}}Attributes(newAttrs);
+
+      if (!validation.isValid) {
+        setValidationErrors(validation.errors);
+      } else {
+        setValidationErrors([]);
+      }
+
+      return validation.data || newAttrs;
+    });
+  }, []);
+
+  return {
+    attributes,
+    setAttributes,
+    updateAttribute,
+    updateAttributes,
+    validationErrors,
+    isValid: validationErrors.length === 0
+  };
+};
+
+/**
+ * Hook for managing color schemes
+ */
+export const useColorScheme = () => {
+  const colors = useSelect(select => select('core/block-editor').getColors()?.colors || []);
+  const gradients = useSelect(select => select('core/block-editor').getColors()?.gradients || []);
+
+  const getColorVariable = useCallback((color: string) => {
+    if (!color) return '';
+
+    // Check if it's a system color
+    const systemColor = colors.find((c: any) => c.slug === color);
+    if (systemColor) {
+      return `var(--wp--preset--color--${systemColor.slug})`;
+    }
+
+    // Return custom color as-is
+    return color;
+  }, [colors]);
+
+  const getGradientVariable = useCallback((gradient: string) => {
+    if (!gradient) return '';
+
+    // Check if it's a system gradient
+    const systemGradient = gradients.find((g: any) => g.slug === gradient);
+    if (systemGradient) {
+      return `var(--wp--preset--gradient--${systemGradient.slug})`;
+    }
+
+    // Return custom gradient as-is
+    return gradient;
+  }, [gradients]);
+
+  return { getColorVariable, getGradientVariable, colors, gradients };
+};
+
+/**
+ * Hook for responsive design
+ */
+export const useResponsiveValue = <T>(values: { mobile?: T; tablet?: T; desktop?: T }, fallback: T) => {
+  const [deviceType, setDeviceType] = useState<'mobile' | 'tablet' | 'desktop'>('desktop');
+
+  useEffect(() => {
+    const updateDeviceType = () => {
+      const width = window.innerWidth;
+      if (width < 768) {
+        setDeviceType('mobile');
+      } else if (width < 1024) {
+        setDeviceType('tablet');
+      } else {
+        setDeviceType('desktop');
+      }
+    };
+
+    updateDeviceType();
+    window.addEventListener('resize', updateDeviceType);
+    return () => window.removeEventListener('resize', updateDeviceType);
+  }, []);
+
+  return values[deviceType] ?? fallback;
+};
+
+/**
+ * Hook for managing animation states
+ */
+export const useAnimation = (animationType: string) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [animationClass, setAnimationClass] = useState('');
+
+  useEffect(() => {
+    if (animationType && animationType !== 'none') {
+      setAnimationClass(`wp-block-{{slugKebabCase}}--animate-${animationType}`);
+      setIsAnimating(true);
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    } else {
+      setAnimationClass('');
+      setIsAnimating(false);
+    }
+  }, [animationType]);
+
+  return { animationClass, isAnimating };
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { {{pascalCase}}Attributes } from './types';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+export default {
+  attributes: metadata.attributes as {{pascalCase}}Attributes,
+  apiVersion: metadata.apiVersion,
+  name: metadata.name,
+  category: metadata.category as any,
+  title: metadata.title,
+  description: metadata.description,
+  example: metadata.example,
+  supports: metadata.supports,
+  icon: metadata.icon as any,
+  keywords: metadata.keywords,
+  textdomain: metadata.textdomain,
+  editorScript: metadata.editorScript,
+  editorStyle: metadata.editorStyle,
+  style: metadata.style,
+  viewScript: metadata.viewScript,
+  edit: Edit,
+  save,
+};

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

@@ -0,0 +1,39 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+import { useColorScheme, useAnimation } from './hooks';
+import type { {{pascalCase}}Attributes } from './types';
+
+export default function Save({ attributes }: { attributes: {{pascalCase}}Attributes }) {
+  const { getColorVariable } = useColorScheme();
+  const { animationClass } = useAnimation(attributes.animation);
+
+  const blockProps = useBlockProps.save({
+    className: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${attributes.fontSize} wp-block-{{slugKebabCase}}--align-${attributes.alignment} ${animationClass}`,
+    style: {
+      color: getColorVariable(attributes.textColor),
+      backgroundColor: getColorVariable(attributes.backgroundColor),
+      padding: `${attributes.padding.top}px ${attributes.padding.right}px ${attributes.padding.bottom}px ${attributes.padding.left}px`,
+      borderRadius: `${attributes.borderRadius}px`,
+      boxShadow: attributes.shadow.enabled
+        ? `${attributes.shadow.x}px ${attributes.shadow.y}px ${attributes.shadow.blur}px ${attributes.shadow.spread}px ${attributes.shadow.color}`
+        : 'none',
+      display: attributes.isVisible ? 'block' : 'none',
+      ...(attributes.customCSS ? { cssText: attributes.customCSS } : {})
+    },
+    'data-unique-id': attributes.uniqueId,
+    'data-animation': attributes.animation !== 'none' ? attributes.animation : undefined
+  });
+
+  return (
+    <div {...blockProps}>
+      <div
+        className={`{{cssClassName}}__content {{cssClassName}}__content--${attributes.fontSize}`}
+        style={{ textAlign: attributes.alignment }}
+      >
+        <RichText.Content
+          tagName="p"
+          value={attributes.content}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/full/src/style.scss.mustache

@@ -0,0 +1,224 @@
+/**
+ * {{title}} Block Styles
+ */
+
+.wp-block-{{slugKebabCase}} {
+  // Base styles
+  position: relative;
+  transition: all 0.3s ease;
+
+  // Font size variations
+  &--small {
+    font-size: var(--wp--preset--font-size--small, 14px);
+  }
+
+  &--medium {
+    font-size: var(--wp--preset--font-size--medium, 16px);
+  }
+
+  &--large {
+    font-size: var(--wp--preset--font-size--large, 24px);
+  }
+
+  &--xlarge {
+    font-size: var(--wp--preset--font-size--x-large, 36px);
+  }
+
+  // Alignment variations
+  &--align-left {
+    text-align: left;
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  &--align-center {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--align-right {
+    text-align: right;
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  &--align-justify {
+    text-align: justify;
+  }
+
+  // Content wrapper
+  .{{cssClassName}}__content {
+    position: relative;
+    z-index: 1;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    // Content font size variations
+    &--small {
+      font-size: 1em;
+      line-height: 1.4;
+    }
+
+    &--medium {
+      font-size: 1.1em;
+      line-height: 1.5;
+    }
+
+    &--large {
+      font-size: 1.2em;
+      line-height: 1.6;
+    }
+
+    &--xlarge {
+      font-size: 1.3em;
+      line-height: 1.7;
+    }
+  }
+
+  // Animation classes
+  &--animate-fadeIn {
+    animation: fadeIn 0.6s ease-in-out;
+  }
+
+  &--animate-slideUp {
+    animation: slideUp 0.6s ease-out;
+  }
+
+  &--animate-slideDown {
+    animation: slideDown 0.6s ease-out;
+  }
+
+  &--animate-zoomIn {
+    animation: zoomIn 0.6s ease-out;
+  }
+
+  // Animation keyframes
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  // Hover effects
+  &:hover {
+    transform: translateY(-2px);
+
+    &.wp-block-{{slugKebab-case}}--shadow {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+
+  // Focus styles
+  &:focus-within {
+    outline: 2px solid var(--wp--preset--color--primary, #0073aa);
+    outline-offset: 2px;
+  }
+
+  // Responsive design
+  @media (max-width: 768px) {
+    &--align-left,
+    &--align-center,
+    &--align-right {
+      text-align: left;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .{{cssClassName}}__content {
+      font-size: 0.9em;
+    }
+  }
+
+  @media (min-width: 769px) and (max-width: 1024px) {
+    .{{cssClassName}}__content {
+      font-size: 1em;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    .{{cssClassName}}__content {
+      font-size: 1.1em;
+    }
+  }
+
+  // High contrast mode support
+  @media (prefers-contrast: high) {
+    border: 1px solid currentColor;
+
+    .{{cssClassName}}__content {
+      font-weight: 600;
+    }
+  }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &--animate-fadeIn,
+    &--animate-slideUp,
+    &--animate-slideDown,
+    &--animate-zoomIn {
+      animation: none;
+    }
+
+    &:hover {
+      transform: none;
+    }
+  }
+
+  // Dark mode support
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+
+  // Print styles
+  @media print {
+    box-shadow: none !important;
+    animation: none !important;
+
+    .{{cssClassName}}__content {
+      color: black !important;
+      background: white !important;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import { tags } from "typia";
+
+export interface {{pascalCase}}Attributes {
+  content: string & tags.MinLength<1> & tags.MaxLength<1000> & tags.Default<"">;
+  alignment?: ('left' | 'center' | 'right' | 'justify') & tags.Default<"left">;
+  isVisible?: boolean & tags.Default<true>;
+  fontSize?: ('small' | 'medium' | 'large' | 'xlarge') & tags.Default<"medium">;
+  textColor?: string & tags.Default<"">;
+  backgroundColor?: string & tags.Default<"">;
+  padding?: {
+    top: number & tags.Default<0>;
+    right: number & tags.Default<0>;
+    bottom: number & tags.Default<0>;
+    left: number & tags.Default<0>;
+  };
+  borderRadius?: number & tags.Default<0>;
+  shadow?: {
+    enabled: boolean & tags.Default<false>;
+    x: number & tags.Default<0>;
+    y: number & tags.Default<4>;
+    blur: number & tags.Default<8>;
+    spread: number & tags.Default<0>;
+    color: string & tags.Default<"rgba(0, 0, 0, 0.1)">;
+  };
+  animation?: ('none' | 'fadeIn' | 'slideUp' | 'slideDown' | 'zoomIn') & tags.Default<"none">;
+  customCSS?: string & tags.Default<"">;
+  uniqueId?: string & tags.Default<"">;
+}
+
+export type {{pascalCase}}ValidationResult = {
+  isValid: boolean;
+  errors: string[];
+  data?: {{pascalCase}}Attributes;
+};

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

@@ -0,0 +1,84 @@
+import typia from "typia";
+import { {{pascalCase}}Attributes, {{pascalCase}}ValidationResult } from "./types";
+
+/**
+ * Validates and transforms block attributes
+ */
+export const validate{{pascalCase}}Attributes = (attributes: any): {{pascalCase}}ValidationResult => {
+  try {
+    const validated = typia.validate<{{pascalCase}}Attributes>(attributes);
+
+    if (validated.success) {
+      return {
+        isValid: true,
+        errors: [],
+        data: validated.data
+      };
+    } else {
+      return {
+        isValid: false,
+        errors: validated.errors.map(e => `${e.path}: ${e.message}`),
+        data: attributes
+      };
+    }
+  } catch (error) {
+    return {
+      isValid: false,
+      errors: [`Validation error: ${error instanceof Error ? error.message : 'Unknown error'}`],
+      data: attributes
+    };
+  }
+};
+
+/**
+ * Creates a safe copy of attributes with defaults
+ */
+export const sanitize{{pascalCase}}Attributes = (attributes: Partial<{{pascalCase}}Attributes>): {{pascalCase}}Attributes => {
+  return {
+    content: attributes.content ?? "",
+    alignment: attributes.alignment ?? "left",
+    isVisible: attributes.isVisible ?? true,
+    fontSize: attributes.fontSize ?? "medium",
+    textColor: attributes.textColor ?? "",
+    backgroundColor: attributes.backgroundColor ?? "",
+    padding: {
+      top: attributes.padding?.top ?? 0,
+      right: attributes.padding?.right ?? 0,
+      bottom: attributes.padding?.bottom ?? 0,
+      left: attributes.padding?.left ?? 0
+    },
+    borderRadius: attributes.borderRadius ?? 0,
+    shadow: attributes.shadow ? {
+      enabled: attributes.shadow.enabled ?? false,
+      x: attributes.shadow.x ?? 0,
+      y: attributes.shadow.y ?? 4,
+      blur: attributes.shadow.blur ?? 8,
+      spread: attributes.shadow.spread ?? 0,
+      color: attributes.shadow.color ?? "rgba(0, 0, 0, 0.1)"
+    } : {
+      enabled: false,
+      x: 0,
+      y: 4,
+      blur: 8,
+      spread: 0,
+      color: "rgba(0, 0, 0, 0.1)"
+    },
+    animation: attributes.animation ?? "none",
+    customCSS: attributes.customCSS ?? "",
+    uniqueId: attributes.uniqueId ?? generateUniqueId()
+  };
+};
+
+/**
+ * Generate unique ID for block instances
+ */
+const generateUniqueId = (): string => {
+  return `{{slugKebabCase}}-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Runtime type guard for checking if an object is {{pascalCase}}Attributes
+ */
+export const is{{pascalCase}}Attributes = (obj: any): obj is {{pascalCase}}Attributes => {
+  return typia.is<{{pascalCase}}Attributes>(obj);
+};

package/templates/full/tsconfig.json.mustache

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

package/templates/full/webpack.config.js.mustache

@@ -0,0 +1,85 @@
+const fs = require("fs");
+const path = require("path");
+const defaultConfig = require("@wordpress/scripts/config/webpack.config");
+
+class TypiaManifestAssetPlugin {
+	apply(compiler) {
+		compiler.hooks.thisCompilation.tap("TypiaManifestAssetPlugin", (compilation) => {
+			compilation.hooks.processAssets.tap(
+				{
+					name: "TypiaManifestAssetPlugin",
+					stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+				},
+				() => {
+					for (const entry of getManifestEntries()) {
+						if (compilation.getAsset(entry.outputPath)) {
+							continue;
+						}
+
+						compilation.emitAsset(
+							entry.outputPath,
+							new compiler.webpack.sources.RawSource(fs.readFileSync(entry.inputPath)),
+						);
+					}
+				},
+			);
+		});
+	}
+}
+
+function getManifestEntries() {
+	const entries = [];
+	const rootManifestPath = path.resolve(process.cwd(), "typia.manifest.json");
+
+	if (fs.existsSync(rootManifestPath)) {
+		entries.push({
+			inputPath: rootManifestPath,
+			outputPath: "typia.manifest.json",
+		});
+	}
+
+	const srcDir = path.resolve(process.cwd(), "src");
+	if (!fs.existsSync(srcDir)) {
+		return entries;
+	}
+
+	for (const inputPath of findManifestFiles(srcDir)) {
+		entries.push({
+			inputPath,
+			outputPath: path.relative(srcDir, inputPath),
+		});
+	}
+
+	return entries;
+}
+
+function findManifestFiles(directory) {
+	const manifestFiles = [];
+
+	for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+		const entryPath = path.join(directory, entry.name);
+
+		if (entry.isDirectory()) {
+			manifestFiles.push(...findManifestFiles(entryPath));
+			continue;
+		}
+		if (entry.isFile() && entry.name === "typia.manifest.json") {
+			manifestFiles.push(entryPath);
+		}
+	}
+
+	return manifestFiles;
+}
+
+module.exports = async () => {
+	const { default: UnpluginTypia } = await import("@typia/unplugin/webpack");
+
+	return {
+		...defaultConfig,
+		plugins: [
+			UnpluginTypia(),
+			...(defaultConfig.plugins || []),
+			new TypiaManifestAssetPlugin(),
+		],
+	};
+};

package/templates/interactivity/package.json.mustache

@@ -0,0 +1,41 @@
+{
+	"name": "{{slugSnakeCase}}",
+	"version": "0.1.0",
+  "packageManager": "bun@1.3.10",
+	"description": "{{description}}",
+	"author": "{{author}}",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"scripts": {
+		"sync-types": "tsx scripts/sync-types-to-block-json.ts",
+		"prebuild": "bun run sync-types",
+		"build": "wp-scripts build",
+		"start": "bun run sync-types && wp-scripts start",
+		"dev": "bun run start",
+		"lint:js": "wp-scripts lint-js",
+		"lint:css": "wp-scripts lint-style",
+		"lint": "bun run lint:js && bun run lint:css",
+		"format": "wp-scripts format",
+		"typecheck": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"ajv": "^8.18.0",
+		"@types/wordpress__block-editor": "^11.5.17",
+		"@types/wordpress__blocks": "^12.5.18",
+		"@types/wordpress__components": "^23.8.0",
+		"@wordpress/browserslist-config": "^6.42.0",
+    "@wordpress/scripts": "^30.22.0",
+		"@typia/unplugin": "^12.0.1",
+		"tsx": "^4.20.5",
+		"typescript": "^5.9.2",
+		"typia": "^12.0.1"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^15.2.0",
+		"@wordpress/blocks": "^15.2.0",
+		"@wordpress/components": "^30.2.0",
+		"@wordpress/element": "^6.29.0",
+		"@wordpress/i18n": "^6.2.0",
+		"@wordpress/interactivity": "^6.29.0"
+	}
+}