@repo/provider

A collection of React context providers for state management, theming, and session handling in TypeScript applications.

📦 Installation

# If using within the monorepo
pnpm add @repo/provider

# For external usage
pnpm install @repo/provider

🚀 Features

This package provides essential React providers organized into different modules:

• Session - Session management and user authentication state
• Store - Redux store provider and state management
• Theme - Theme provider for UI styling and dark/light mode

📖 Usage

Basic Import

// Import from main entry point
import { Provider } from "@repo/provider";

// Import specific providers
import { SessionProvider } from "@repo/provider/session";
import { StoreProvider } from "@repo/provider/store";
import { ThemeProvider } from "@repo/provider/theme";

Module Examples

Session Provider

import { SessionProvider } from "@repo/provider/session";

function App() {
  return (
    <SessionProvider>
      <YourApp />
    </SessionProvider>
  );
}

// Usage in components
import { useSession } from "@repo/provider/session";

function UserProfile() {
  const { user, isAuthenticated, login, logout } = useSession();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <p>Welcome, {user?.name}</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <button onClick={login}>Login</button>
      )}
    </div>
  );
}

Store Provider

import { StoreProvider } from "@repo/provider/store";

function App() {
  return (
    <StoreProvider>
      <YourApp />
    </StoreProvider>
  );
}

// Usage in components
import { useAppDispatch, useAppSelector } from "@repo/provider/store";

function Counter() {
  const count = useAppSelector((state) => state.counter.value);
  const dispatch = useAppDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Theme Provider

import { ThemeProvider } from "@repo/provider/theme";

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourApp />
    </ThemeProvider>
  );
}

// Usage in components
import { useTheme } from "@repo/provider/theme";

function ThemeToggle() {
  const { theme, setTheme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === "light" ? "dark" : "light"} mode
    </button>
  );
}

Combined Providers

import { SessionProvider } from "@repo/provider/session";
import { StoreProvider } from "@repo/provider/store";
import { ThemeProvider } from "@repo/provider/theme";

function App() {
  return (
    <StoreProvider>
      <SessionProvider>
        <ThemeProvider>
          <YourApp />
        </ThemeProvider>
      </SessionProvider>
    </StoreProvider>
  );
}

🏗️ Development

Prerequisites

• Node.js 18+
• pnpm (recommended package manager)
• React 18+

Setup

# Install dependencies
pnpm install

# Build the package
pnpm build

# Development mode with watch
pnpm dev

# Clean build artifacts
pnpm clean

# Lint code
pnpm lint

# Type checking
pnpm check-types

Project Structure

packages/provider/
├── src/
│   ├── session/
│   │   ├── index.tsx
│   │   ├── context.tsx
│   │   └── hooks.ts
│   ├── store/
│   │   ├── index.tsx
│   │   ├── provider.tsx
│   │   └── hooks.ts
│   ├── theme/
│   │   ├── index.tsx
│   │   ├── context.tsx
│   │   └── hooks.ts
│   └── index.ts
├── package.json
└── README.md

🔧 Build System

This package uses:

• tsup for building and bundling
• TypeScript 5.8.2 for type safety
• ESM module format
• ESLint for code quality

📦 Dependencies

Runtime Dependencies

• abc-model - Data models and types
• abc-constants - Shared constants
• @repo/redux - Redux store configuration

Development Dependencies

• @repo/eslint-config - Shared ESLint configuration
• TypeScript and build tools

🎯 Provider Features

SessionProvider

• User authentication state management
• Login/logout functionality
• Session persistence
• User profile management

StoreProvider

• Redux store integration
• Type-safe hooks for state access
• Middleware configuration
• DevTools integration

ThemeProvider

• Light/dark theme switching
• Theme persistence
• CSS custom properties support
• System theme detection

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m "Add some amazing feature")
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write comprehensive tests for providers
• Ensure proper context separation
• Document new provider features

📝 License

This project is part of the monorepo and follows the same license terms.

🆘 Support

For support and questions:

• Create an issue in the repository
• Check existing documentation
• Contact the development team

🔗 Related Packages

• @repo/redux - Redux store configuration
• abc-model - Type definitions
• abc-constants - Shared constants
• abc-hx - Custom React hooks

Note: This is an internal provider package designed for use within the monorepo ecosystem. All providers are built with React context API and follow best practices for state management.