TypeScript Interfaces
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/toast library utilizes a strict TypeScript architecture to provide a type-safe notification system. The project is configured with strict: true in its compiler options to ensure deep type safety and explicit return types for public APIs. This approach prevents common runtime errors and provides clear contracts for developers integrating the notification system into React applications.
Sources: tsconfig.json:11, cubic.yaml:21-22
Core Data Structures
The system's foundation is built upon several key interfaces and types that define the shape of a notification and the methods available for interaction. The primary Toast interface defines the properties required to render and manage an individual notification.
The Toast Interface
The Toast interface represents the internal state of a notification within the store.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier generated for each toast. |
message | string | React.ReactNode | The content to be displayed in the notification. |
type | ToastType | Category of the toast (success, error, etc.). |
duration | number (Optional) | Time in milliseconds before auto-dismissal. |
action | object (Optional) | Optional button configuration with label and onClick. |
Sources: src/store.ts:7-16
Notification Categories
The ToastType union type restricts the possible states of a notification, ensuring consistent styling and behavior across the UI.
export type ToastType = "success" | "error" | "info" | "warning" | "loading" | "default";
Sources: src/store.ts:5
Component and API Interfaces
The library separates internal data structures from the public-facing API to provide a cleaner developer experience while maintaining strict internal validation.
Provider Configuration
The ToastProviderProps interface defines the global configuration for the notification container, controlling the visual theme and physical placement on the screen.
The theme defaults to "cyber", providing a cyberpunk-inspired aesthetic with neon borders and mono fonts, while "minimal" provides a standard clean UI.
Sources: src/provider.tsx:8-11, src/provider.tsx:14
Public API Options
When invoking a notification via the toast() function, users interact with the ToastOptions interface. This is a subset of the internal Toast interface, as properties like id and type are managed automatically by the internal logic.
Sources: src/index.ts:3-9, src/store.ts:30-33
Relationship and Flow
The following diagram illustrates how the various TypeScript interfaces interact within the system's state management and rendering lifecycle.
Summary
TypeScript interfaces in @pcstyle/toast serve as the backbone for its dual-theme notification system. By enforcing strict type safety and clear separations between public options (ToastOptions) and internal state (Toast), the library ensures that notifications are handled predictably from creation to dismissal. This architectural discipline is reinforced by project-level configurations that forbid any types and non-null assertions.
Sources: cubic.yaml:21-22, src/store.ts:1-54