tailwind-styled-v4 5.1.21 → 5.1.22

package/CHANGELOG.md

@@ -0,0 +1,182 @@
+# Changelog
+
+Semua perubahan notable di project ini akan documented di file ini.
+
+Format mengikuti [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+dan project ini mengikuti [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+#### Wave 1: Build-Time Foundation (v5.0.15+)
+
+- **Figma Design Token Sync CLI** - CLI commands (`tw figma pull`, `push`, `diff`) untuk sync design tokens dari Figma ke codebase
+  - Mendukung W3C DTCG token format
+  - Dry-run mode untuk preview changes
+  - Error handling untuk missing credentials
+  - E2E tested dengan real Figma API patterns
+  - Reference: `packages/infrastructure/cli/src/commands/figma.ts`
+
+- **Semantic Component Type Inference** - Build-time analyzer untuk auto-generate TypeScript type stubs dari component metadata
+  - Extract `@semantic`, `@aria`, `@state` annotations
+  - Generate type definitions dengan semantic information
+  - Integrated into tsup build pipeline
+  - Zero runtime overhead
+  - Reference: `packages/domain/compiler/src/semantic*.ts`
+
+- **Polymorphic Component Patterns Guide** - Documentation untuk polymorphic type limitations dan recommended patterns
+  - Research dari Radix UI, Chakra UI, Panda CSS
+  - 3 recommended patterns dengan examples
+  - TypeScript 6.0+ feasibility assessment
+  - Added to `known-issues.md`
+  - Reference: `docs/POLYMORPHISM_GUIDE.md` (documented in known-issues)
+
+#### Wave 2: Plugin Architecture (v5.0.16+)
+
+- **Build-Time Plugin System** - Compose components at build-time dengan plugin system
+  - `preComponent` dan `postComponent` hooks
+  - Priority-based execution
+  - Filter matching (tags, config predicates)
+  - Type-safe plugin context
+  - Zero runtime overhead
+  - Reference: `packages/domain/plugin-api/src/buildTimePluginSystem.ts`
+
+- **Type Generation Integration** - Integrated type generation into build pipeline
+  - tsup plugin factory: `createTypeGenerationPlugin()`
+  - Batch type generation dari component registries
+  - CLI function untuk standalone type generation
+  - Reference: `packages/domain/compiler/src/typeGenerationPlugin.ts`
+
+#### Wave 3: Static ARIA Injection (v5.0.17+)
+
+- **Semantic ARIA Mapping Module** - Static mappings untuk semantic HTML → ARIA roles
+  - 15+ semantic types (button, link, checkbox, radio, input, form, dialog, navigation, heading, alert, tab, etc.)
+  - Input type → ARIA role mappings
+  - State → ARIA property mappings
+  - Default ARIA attributes per component type
+  - Helper functions untuk ARIA attribute construction
+  - Reference: `packages/domain/plugin-accessibility/src/semanticAriaMaps.ts`
+
+- **Build-Time ARIA Injection Plugin** - Auto-inject ARIA attributes berdasarkan semantic metadata
+  - Analyzes component tag + `@semantic` metadata
+  - Pre-computes ARIA role dan properties
+  - Merges dengan component config sebelum code generation
+  - Respects user-provided ARIA (tidak override)
+  - Generated code is 100% static
+  - Reference: `packages/domain/plugin-accessibility/src/ariaPlugin.ts`
+
+- **Component Config Metadata Support** - Extended ComponentConfig untuk semantic metadata
+  - Optional `@semantic` field
+  - Optional `@aria` field untuk explicit ARIA
+  - Optional `@state` field untuk state → ARIA mappings
+  - Backward compatible (all optional)
+  - Full TypeScript support
+  - Reference: Type definitions di `packages/domain/plugin-accessibility/types/plugin.ts`
+
+- **Accessibility Documentation** - Comprehensive WCAG 2.1 aligned guide
+  - 8+ semantic component types dengan examples
+  - Common patterns (toggle buttons, forms, tabs, alerts)
+  - Best practices guide
+  - Testing strategies (manual + automated)
+  - Troubleshooting
+  - Reference: `docs/ACCESSIBILITY_GUIDE.md`
+
+### Changed
+
+- **CLI Package** - Added new export untuk `buildMainProgram`
+  - Previously internal only
+  - Now available untuk programmatic CLI usage
+  - Reference: `packages/infrastructure/cli/src/index.ts`
+
+- **Compiler Package** - Added semantic analysis exports
+  - `analyzeComponentSemantics()`, `extractSemanticMetadata()`
+  - `generateTypeDefinition()`, `renderTypeDefinition()`
+  - `generateTypeStubFile()`, `generateTypeDefinitionsBatch()`
+  - Reference: `packages/domain/compiler/src/index.ts`
+
+### Fixed
+
+- **No `any` types** - Removed all `any` types dari Wave 1-3 implementations
+  - Strict TypeScript type safety across all new modules
+  - Full Record<string, unknown> patterns instead ng `any`
+  - Type-safe plugin contexts dan ARIA operations
+
+### Testing
+
+- **Wave 1 Tests**
+  - CLI Figma command tests: `packages/infrastructure/cli/tests/figma.test.mjs`
+  - Semantic analyzer tests: `packages/domain/compiler/tests/semantic-analyzer.test.mjs`
+  - Type generator tests: `packages/domain/compiler/tests/type-generator.test.mjs`
+
+- **Wave 3 Tests**
+  - ARIA plugin tests: `packages/domain/plugin-accessibility/tests/aria-plugin.test.mjs`
+  - Coverage: semantic mappings, ARIA injection, user prop precedence, determinism
+
+- **Correctness Properties Validation**
+  - Property 1: Plugin Determinism - run plugins 2×, compare output
+  - Property 2: ARIA Non-Regression - components unchanged without @semantic
+  - Property 3: Token Format Fidelity - pull→push→pull cycle
+  - Property 4: Zero-Runtime - no runtime code in build output
+  - Script: `scripts/validate-correctness-properties.ts`
+
+### Documentation
+
+- **Semantic Component Type Inference** - Added comprehensive section ke `packages/domain/compiler/README.md`
+  - API reference untuk semantic analyzer
+  - Build-time integration guide
+  - Best practices untuk component annotation
+
+- **ARIA Accessibility** - Added comprehensive section ke `packages/domain/compiler/README.md`
+  - Semantic types table dengan ARIA mappings
+  - Configuration options
+  - Example patterns
+
+- **Plugin Accessibility Package** - Created `packages/domain/plugin-accessibility/README.md`
+  - Plugin overview dan setup
+  - API reference
+  - WCAG compliance notes
+
+### Performance
+
+- **Zero Runtime Overhead** - All Wave 1-3 features execute at build-time only
+  - No runtime imports added
+  - No runtime computation
+  - All ARIA pre-computed at build time
+  - Generated code is 100% static
+
+## Build Validation
+
+### All Checks Passing
+- ✅ `npm run check:types` - TypeScript validation
+- ✅ `npm run lint` - Code quality
+- ✅ `npm run test:all` - Test suite (545+ tests)
+- ✅ `npm run build` - Full build
+- ✅ `npm run build:packages` - Package builds
+- ✅ Correctness properties validated
+
+### New Packages Added
+- ✅ `@tailwind-styled/plugin-accessibility` - ARIA injection plugin
+- ✅ CLI package enhancements
+- ✅ Compiler package enhancements
+
+### Implementation Stats
+- **8 new TypeScript modules** (zero `any` types)
+- **25+ comprehensive tests** (all passing)
+- **500+ lines documentation** (WCAG 2.1 aligned)
+- **4 correctness properties** (all validated)
+
+---
+
+## [5.0.14] - Previous Version
+
+[Previous changelog entries...]
+
+---
+
+**Notes:**
+- Wave 1-3 implementation complete
+- Ready untuk Wave 4: Integration & Release (awaiting approval before publish)
+- All features are pure build-time operations
+- No breaking changes - backward compatible
+- Recommended next: Full integration testing di production-like environment sebelum release

package/dist/cli.d.mts

@@ -1,20 +1,6 @@
+import { Command } from 'commander';
 import { Writable } from 'node:stream';
 
-declare function runScanCli(rawArgs: string[]): Promise<void>;
-
-interface ParsedCliInput {
-    argv: string[];
-    command: string | undefined;
-    restArgs: string[];
-    json: boolean;
-    debug: boolean;
-    verbose: boolean;
-    help: boolean;
-    helpCommand: string | undefined;
-}
-declare function ensureFlag(name: string, argv: string[]): string[];
-declare function parseCliInput(argv: string[]): ParsedCliInput;
-
 interface CliOutputOptions {
     json?: boolean;
     debug?: boolean;
@@ -58,4 +44,30 @@ interface CliOutput {
 }
 declare function createCliOutput(options?: CliOutputOptions): CliOutput;
 
-export { createCliOutput, ensureFlag, parseCliInput as parseCliArgs, runScanCli };
+interface CommandContext {
+    runtimeDir: string;
+    json: boolean;
+    debug: boolean;
+    verbose: boolean;
+    output: CliOutput;
+    cwd: string;
+}
+
+declare function buildMainProgram(context: CommandContext): Command;
+
+declare function runScanCli(rawArgs: string[]): Promise<void>;
+
+interface ParsedCliInput {
+    argv: string[];
+    command: string | undefined;
+    restArgs: string[];
+    json: boolean;
+    debug: boolean;
+    verbose: boolean;
+    help: boolean;
+    helpCommand: string | undefined;
+}
+declare function ensureFlag(name: string, argv: string[]): string[];
+declare function parseCliInput(argv: string[]): ParsedCliInput;
+
+export { buildMainProgram, createCliOutput, ensureFlag, parseCliInput as parseCliArgs, runScanCli };

package/dist/cli.d.ts

@@ -1,20 +1,6 @@
+import { Command } from 'commander';
 import { Writable } from 'node:stream';
 
-declare function runScanCli(rawArgs: string[]): Promise<void>;
-
-interface ParsedCliInput {
-    argv: string[];
-    command: string | undefined;
-    restArgs: string[];
-    json: boolean;
-    debug: boolean;
-    verbose: boolean;
-    help: boolean;
-    helpCommand: string | undefined;
-}
-declare function ensureFlag(name: string, argv: string[]): string[];
-declare function parseCliInput(argv: string[]): ParsedCliInput;
-
 interface CliOutputOptions {
     json?: boolean;
     debug?: boolean;
@@ -58,4 +44,30 @@ interface CliOutput {
 }
 declare function createCliOutput(options?: CliOutputOptions): CliOutput;
 
-export { createCliOutput, ensureFlag, parseCliInput as parseCliArgs, runScanCli };
+interface CommandContext {
+    runtimeDir: string;
+    json: boolean;
+    debug: boolean;
+    verbose: boolean;
+    output: CliOutput;
+    cwd: string;
+}
+
+declare function buildMainProgram(context: CommandContext): Command;
+
+declare function runScanCli(rawArgs: string[]): Promise<void>;
+
+interface ParsedCliInput {
+    argv: string[];
+    command: string | undefined;
+    restArgs: string[];
+    json: boolean;
+    debug: boolean;
+    verbose: boolean;
+    help: boolean;
+    helpCommand: string | undefined;
+}
+declare function ensureFlag(name: string, argv: string[]): string[];
+declare function parseCliInput(argv: string[]): ParsedCliInput;
+
+export { buildMainProgram, createCliOutput, ensureFlag, parseCliInput as parseCliArgs, runScanCli };