abc-provider

A comprehensive provider package that combines Redux state management and theme management for modern React applications, providing a unified solution for app configuration and theming.

📦 Installation

# If using within the monorepo
pnpm add abc-provider

# For external usage
pnpm install abc-provider

🚀 Features

The abc-provider package provides essential providers:

• StoreProvider - Redux store provider with app configuration
• AppThemeProvider - Theme management with next-themes integration
• App configuration - Centralized app info and config management
• State management - Redux integration with pre-configured stores
• Theme switching - Light, dark, and system theme support
• Type safety - Full TypeScript support with comprehensive types

📖 Usage

Basic Import

// Import from main entry point
import { StoreProvider, AppThemeProvider } from "abc-provider";

// Import specific providers
import { StoreProvider } from "abc-provider/store";
import { AppThemeProvider } from "abc-provider/theme";

Usage Examples

1. StoreProvider - Redux State Management

import { StoreProvider } from "abc-provider/store";
import type { IAppInfo, IAppConfigData, IState } from "abc-model";

const App = () => {
  const appInfo: IAppInfo = {
    appShortName: "dmv",
    appName: "DMV Practice Tests",
    description: "Free DMV practice tests for all states",
    linkAndroid: "https://play.google.com/store/apps/details?id=com.dmv.app",
    linkIos: "https://apps.apple.com/app/dmv-practice/id123456789",
  };

  const appConfig: IAppConfigData = {
    apiUrl: "https://api.dmv-practice.com",
    version: "1.0.0",
    features: ["practice-tests", "study-modes"],
  };

  const states: IState[] = [
    { id: "california", name: "California", code: "CA" },
    { id: "texas", name: "Texas", code: "TX" },
    { id: "florida", name: "Florida", code: "FL" },
  ];

  return (
    <StoreProvider
      appInfo={appInfo}
      appConfig={appConfig}
      states={states}
    >
      <div className="app">
        <h1>My DMV Practice App</h1>
        {/* Your app content */}
      </div>
    </StoreProvider>
  );
};

Features:

• Automatic Redux store initialization
• App configuration injection
• State data pre-loading
• Type-safe props with TypeScript

2. AppThemeProvider - Theme Management

import { AppThemeProvider } from "abc-provider/theme";
import { useTheme } from "next-themes";

const App = () => {
  return (
    <AppThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem={true}
      disableTransitionOnChange={false}
    >
      <div className="app">
        <ThemeToggle />
        {/* Your app content */}
      </div>
    </AppThemeProvider>
  );
};

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

  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      Toggle Theme
    </button>
  );
};

Features:

• Light, dark, and system theme support
• Smooth theme transitions
• CSS class-based theming
• System preference detection

3. Combined Usage - Full App Setup

import { StoreProvider } from "abc-provider/store";
import { AppThemeProvider } from "abc-provider/theme";
import { useSelector } from "react-redux";
import { selectAppInfo } from "abc-redux";

const App = () => {
  const appInfo = {
    appShortName: "asvab",
    appName: "ASVAB Practice Tests",
    description: "Military entrance exam preparation",
    linkAndroid: "https://play.google.com/store/apps/details?id=com.asvab.app",
    linkIos: "https://apps.apple.com/app/asvab-prep/id987654321",
  };

  const appConfig = {
    apiUrl: "https://api.asvab-prep.com",
    version: "2.0.0",
    features: ["practice-tests", "study-guides", "score-tracking"],
  };

  return (
    <AppThemeProvider
      attribute="class"
      defaultTheme="light"
      enableSystem={true}
    >
      <StoreProvider
        appInfo={appInfo}
        appConfig={appConfig}
      >
        <AppContent />
      </StoreProvider>
    </AppThemeProvider>
  );
};

const AppContent = () => {
  const appInfo = useSelector(selectAppInfo);
  const { theme } = useTheme();

  return (
    <div className={`app ${theme}`}>
      <header>
        <h1>{appInfo.appName}</h1>
        <p>{appInfo.description}</p>
      </header>
      <main>
        {/* Your app content with theme and state access */}
      </main>
    </div>
  );
};

4. Advanced Configuration

import { StoreProvider } from "abc-provider/store";
import { AppThemeProvider } from "abc-provider/theme";

const AdvancedApp = () => {
  // Dynamic app configuration
  const getAppConfig = () => {
    const env = process.env.NODE_ENV;
    return {
      apiUrl: env === "production"
        ? "https://api.production.com"
        : "https://api.staging.com",
      version: process.env.APP_VERSION || "1.0.0",
      features: env === "production"
        ? ["practice-tests", "analytics"]
        : ["practice-tests", "debug-mode"],
    };
  };

  return (
    <AppThemeProvider
      attribute="data-theme"
      defaultTheme="system"
      enableSystem={true}
      disableTransitionOnChange={true}
      storageKey="app-theme"
      themes={["light", "dark", "blue", "green"]}
    >
      <StoreProvider
        appInfo={{
          appShortName: "cdl",
          appName: "CDL Practice Tests",
          description: "Commercial Driver's License preparation",
        }}
        appConfig={getAppConfig()}
        states={[
          { id: "california", name: "California", code: "CA" },
          { id: "texas", name: "Texas", code: "TX" },
        ]}
      >
        <div className="app">
          {/* Your advanced app content */}
        </div>
      </StoreProvider>
    </AppThemeProvider>
  );
};

🏗️ Project Structure

packages/provider/
├── src/
│   ├── store/              # Redux store provider
│   │   └── index.tsx
│   ├── theme/              # Theme management provider
│   │   └── index.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
└── README.md

🔧 Configuration

Dependencies

The package requires these dependencies:

• abc-redux - Redux state management
• next-themes - Theme management library
• abc-model - Type definitions and models

Environment Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build package
pnpm build

# Type checking
pnpm check-types

# Linting
pnpm lint

🎨 Theming

CSS Variables

The theme provider supports CSS custom properties:

/* Light theme */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #3b82f6;
  --secondary: #6b7280;
}

/* Dark theme */
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
  --primary: #60a5fa;
  --secondary: #9ca3af;
}

Theme Configuration

<AppThemeProvider
  attribute="data-theme"
  defaultTheme="system"
  enableSystem={true}
  disableTransitionOnChange={false}
  storageKey="my-app-theme"
  themes={["light", "dark", "blue", "green"]}
>
  {children}
</AppThemeProvider>

📦 Dependencies

Runtime Dependencies

• abc-redux - Redux state management integration
• next-themes - Theme switching and management
• abc-model - Type definitions and data models

Development Dependencies

• @repo/eslint-config - Shared ESLint configuration
• TypeScript type definitions

🚀 Development

Prerequisites

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

Setup

# Install dependencies
pnpm install

# Build package
pnpm build

# Development mode with watch
pnpm dev

# Clean build artifacts
pnpm clean

# Lint code
pnpm lint

# Type checking
pnpm check-types

📝 API Reference

StoreProvider

Redux store provider with app configuration.

Props:

• children (ReactNode) - Child components
• appInfo (IAppInfo, optional) - App information
• appConfig (IAppConfigData, optional) - App configuration
• states (IState[], optional) - State data

Features:

• Automatic store initialization
• Configuration injection
• State pre-loading
• Type-safe props

AppThemeProvider

Theme management provider with next-themes integration.

Props:

• children (ReactNode) - Child components
• attribute (string, optional) - HTML attribute for theme
• defaultTheme (string, optional) - Default theme
• enableSystem (boolean, optional) - Enable system theme detection
• disableTransitionOnChange (boolean, optional) - Disable transitions
• storageKey (string, optional) - localStorage key
• themes (string[], optional) - Available themes

Features:

• Light/dark/system theme support
• Smooth transitions
• System preference detection
• Custom theme support

🤝 Contributing

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

📄 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

Note: This is an internal provider package designed for use within the monorepo ecosystem. Provides essential app configuration and theming capabilities.

📊 Changelog

v0.0.1 (2025-01-11)

• ✅ Initial release with StoreProvider component
• ✅ AppThemeProvider with next-themes integration
• ✅ Redux store configuration and management
• ✅ App info and config injection
• ✅ Theme switching support (light/dark/system)
• ✅ TypeScript support with comprehensive types