create-wp-typia 0.1.0 → 1.0.1

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

@@ -1,140 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-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

@@ -1,224 +0,0 @@
-/**
- * {{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

@@ -1,34 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

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

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

@@ -1,85 +0,0 @@
-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

@@ -1,41 +0,0 @@
-{
-	"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"
-	}
-}