Build System

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• tsconfig.json
• cubic.yaml
• src/index.ts
• src/theme/index.ts

The @pcstyle/ui build system is designed to transform a React-based component library into a distributable package compatible with modern ESM (ES Modules) environments. It leverages TypeScript for compilation, ensuring strict type safety and generating declaration files to support downstream consumers with full IntelliSense support.

The system is configured as a dual-theme design system package, focusing on a "cyberpunk" aesthetic and a "minimal" aesthetic. It manages the compilation of React components, theme tokens, and visual effects into a structured dist directory.

Sources: package.json:1-5, package.json:44-48

Compiler Configuration

The build process is primarily driven by the TypeScript compiler (tsc). The configuration is optimized for a modern web environment using the following parameters:

• Target: ES2020 ensures compatibility with relatively modern browsers while providing access to standard modern JavaScript features.
• Module System: ESNext with a bundler resolution strategy to align with modern frontend development tools.
• Output: All compiled files are directed to the ./dist directory.
• Type Generation: The system is configured to produce .d.ts (declaration) and .d.ts.map (declaration maps) files to provide type safety for library consumers.

Sources: tsconfig.json:2-15

Build Scripts

The project defines standard scripts for lifecycle management:

Script	Command	Description
build	tsc	Performs a one-time compilation of the src directory to dist.
dev	tsc --watch	Enables incremental compilation during development.
lint	eslint src --ext .ts,.tsx	Executes static analysis on the source files.

Sources: package.json:30-34

Project Export Structure

The build system facilitates a modular export strategy. The package.json defines multiple entry points to allow consumers to import specific sub-modules, which reduces bundle sizes and improves organization.

Defined Exports

The system supports the following export paths:

1. Main Entry (.): Points to ./dist/index.js and contains all core components like Button, Card, and Input.
2. Theme (./theme): Points to ./dist/theme/index.js and contains color palettes and design tokens.
3. Effects (./effects): Points to ./dist/effects/index.js containing visual enhancements like CRTOverlay.

Sources: package.json:8-25, src/index.ts:1-16, src/theme/index.ts:1-2

Dependency Management

The build system distinguishes between different classes of dependencies to ensure the library remains lightweight for consumers.

Peer Dependencies

The library requires the following packages to be provided by the host environment. This prevents multiple versions of React or Framer Motion from being bundled:

• react: >=18
• react-dom: >=18
• framer-motion: >=10
• lucide-react: >=0.200

Sources: package.json:36-41

Quality Control and CI

The build system is supplemented by cubic.yaml, which enforces architectural standards and code quality during the PR and review process:

• STRICT_TYPES: Prohibits the use of any types and non-null assertions.
• ESM_STANDARDS: Verifies that module definitions satisfy both ESM and CJS consumer requirements.

Sources: cubic.yaml:18-29

Conclusion

The @pcstyle/ui build system provides a streamlined, TypeScript-centric pipeline for distributing a high-performance design system. By utilizing ESM exports and strict type enforcement, it ensures that components are both modular and type-safe for external integration.