Dependencies & Scripts
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/toast project is a React-based notification system designed with a focus on dual-theme support (Cyberpunk and Minimal) and strict type safety. It functions as an ESM-first library, utilizing modern web standards and animation libraries to provide a responsive user interface.
The system's infrastructure is built upon a foundation of TypeScript for development, Framer Motion for animations, and a centralized state management store. This ensures that the notification system is both performant and easily integrable into modern React applications.
Package Configuration & Dependencies
The project is structured as a scoped NPM package under @pcstyle/toast. It targets modern environments using the ESM (ECMAScript Module) format and provides comprehensive type definitions for TypeScript consumers.
Runtime and Peer Dependencies
The project relies on React and Framer Motion as its primary functional dependencies. To ensure compatibility and avoid version conflicts in consumer projects, these are defined as peer dependencies.
| Dependency | Type | Version | Description |
|---|---|---|---|
react | Peer/Dev | >=18 / ^19.0.0 | Core UI library for component structure. |
react-dom | Peer/Dev | >=18 / ^19.0.0 | DOM rendering for React components. |
framer-motion | Peer/Dev | >=10 / ^12.0.0 | Animation engine for toast transitions. |
typescript | Dev | ^5.0.0 | Static typing and compilation. |
Sources: package.json:1-41
Build and Distribution
The project uses the TypeScript compiler (tsc) for its build process, outputting to a dist directory. The configuration ensures that both logic and type declarations are available for downstream usage.
The diagram shows the build flow from source code to the distributed package artifacts.
Sources: package.json:7-17, tsconfig.json:10-12
Scripts and Lifecycle
The project maintains a minimal set of scripts focused on compilation and maintaining package integrity.
| Script | Command | Description |
|---|---|---|
build | tsc | Compiles the TypeScript source code into the dist folder. |
Sources: package.json:18-20
Project Standards and Tooling
TypeScript Configuration
The project utilizes ESNext modules with a bundler resolution strategy. It enforces strict type checking and generates declaration maps to aid debugging in consuming applications.
- Target: ES2020
- Module Resolution: Bundler
- Strict Mode: Enabled
- JSX: react-jsx (automatic runtime)
Sources: tsconfig.json:3-16
Quality Control (Cubic)
The project integrates with Cubic for automated reviews and architectural enforcement. Key rules include:
- STRICT_TYPES: Prohibits
anytypes or non-null assertions to ensure deep type safety. - ESM_STANDARDS: Ensures the library satisfies module definition standards.
- Sensitivity: High sensitivity for code reviews with incremental commit checking.
Sources: cubic.yaml:5-30
Architectural Data Flow
The relationship between the dependencies (React, Framer Motion) and the internal logic (Store, Provider) facilitates a reactive notification system.
This sequence diagram illustrates how a call to the toast API flows through the store to update the UI via the React Provider and Framer Motion.
Sources: src/index.ts:11-13, src/store.ts:28-40, src/provider.tsx:16-19
Summary
The @pcstyle/toast project is architected as a lightweight, type-safe React library. By leveraging framer-motion for visuals and a custom ToastStore for state management, it provides a decoupled notification system. The build process is streamlined through tsc, ensuring the package adheres to modern ESM standards and provides robust TypeScript support for developers.