📦 Plyaz Package Template

This is the official state management package for the Plyaz platform. It defines our unified state architecture using Zustand for global client state and React Query for server state, ensuring clean separation of concerns, high performance, and an excellent developer experience.

Use this package to manage global, shared, and API-driven states across all Plyaz applications.

🚀 Getting Started

🌀 Option 1: Use GitHub Template

1. Go to @plyaz/store.

2. Clone the repo:

   git clone https://github.com/Plyaz-Official/store.git @plyaz/store
   cd @plyaz/store
   pnpm install

📦 Project Structure

@plyaz/store/
├── src/
│   ├── index.ts              # Main exports
│   ├── middleware/           # Custom middleware
│   ├── utils/                # Utility functions
│   └── slices/               # Domain-specific stores (These are only example)
│       ├── auth.ts           # Authentication state
│       ├── user.ts           # User profile & preferences
│       ├── wallet.ts         # Wallet connections & balances
│       ├── transactions.ts   # Transaction history & status
│       └── notifications.ts  # User notifications

📜 Scripts & Commands

{
    "build": "tsup",
    "dev": "tsup --watch",
    "test": "vitest"
}

🔁 Dev Workflow

Local Linking (for active development) In the package repo: pnpm build pnpm link --global

In a consumer repo (e.g. frontend app):

pnpm link --global @plyaz/store

Publishing to GitHub Packages

Ensure .npmrc in your user root exists:

@plyaz:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

Then publish:

pnpm publish --access=restricted

Best Practices

Use Zustand for UI/global state management (client-side) Use React Query for server-side API state (fetch, cache, revalidation) Keep slices modular (e.g., useAuthStore, useUIStore) Always export from src/index.ts Never mix API logic inside Zustand stores Include unit tests for every slice and query Use @plyaz/devtools for linting, testing, and build consistency Maintain separation between client and server state domains

How to add slice in @plyaz/store

Create a slice in /slices/. Add its type in @plyaz/types in RootStore type . Update Store to include the new slice.

Shared Tooling

This package is pre-integrated with: TypeScript (strict mode) Zustand (for global client state) React Query (for server state) ESLint & Prettier via @plyaz/devtools Vitest (for testing) CI-ready for GitHub Actions

When to Use @plyaz/store

Use @plyaz/store when your project needs: Shared global state (e.g., UI toggles, auth session, modals) Cached API state (e.g., user profile, settings, dashboard data) Seamless syncing between local state and remote data A consistent state layer across all Plyaz apps