abc-header-single

A comprehensive header component library providing navigation, app download banners, drawer menus, and state selection components for single-page applications.

📦 Installation

# If using within the monorepo
pnpm add abc-header-single

# For external usage
pnpm install abc-header-single

🚀 Features

The abc-header-single package provides specialized header components:

• HeaderApp - Main header component with navigation and branding
• DownLoadApp - Mobile app download banner with auto-hide functionality
• DrawerHeader - Navigation drawer with menu items and study guides
• DrawerHeaderState - State-specific drawer navigation
• SelectStateHeader - State selection dropdown component
• Icon components - Various header icons (Get Pro, Login, Menu, Review, Topics)
• Responsive design - Mobile-first responsive layouts
• App integration - Built-in support for app-specific configurations

📖 Usage

Basic Import

// Import from main entry point
import {
  HeaderApp,
  DownLoadApp,
  DrawerHeader,
  DrawerHeaderState,
  SelectStateHeader,
  IconGetPro,
  IconLogin,
  IconMenuHeader,
  IconReview,
  IconTopics,
} from "abc-header-single";

// Import specific components
import { HeaderApp } from "abc-header-single/ui";
import { DownLoadApp } from "abc-header-single/download";
import { DrawerHeader } from "abc-header-single/drawerSingle";
import { SelectStateHeader } from "abc-header-single/menuState";

Usage Examples

1. HeaderApp - Main Header Component

import { HeaderApp } from "abc-header-single/ui";
import type { IAppInfoCore } from "abc-model/app";

const App = () => {
  const appInfo: IAppInfoCore = {
    appShortName: "dmv",
    appName: "DMV Practice Tests",
    appNameId: "dmv-practice",
    description: "Free DMV practice tests for all states",
  };

  return (
    <div className="app">
      <HeaderApp
        appInfo={appInfo}
        type="single"
        showBanner={true}
        isParent={false}
      />
      <main>
        {/* Your app content */}
      </main>
    </div>
  );
};

Features:

• Sticky header with backdrop blur
• App logo with theme awareness
• Navigation menu with icons
• State selection for state-specific apps
• Download banner integration

2. DownLoadApp - Mobile App Download Banner

import { DownLoadApp } from "abc-header-single/download";

const App = () => {
  const appInfo = {
    appShortName: "asvab",
    appName: "ASVAB Practice Tests",
    appNameId: "asvab-practice",
  };

  return (
    <div className="app">
      <DownLoadApp appInfo={appInfo} />
      {/* Rest of your app */}
    </div>
  );
};

Features:

• Auto-hide after 5 seconds
• Fade out animation
• Mobile-only display
• App store integration
• Customizable styling

3. DrawerHeader - Navigation Drawer

import { DrawerHeader } from "abc-header-single/drawerSingle";
import { useState } from "react";

const App = () => {
  const [openMenuDrawer, setOpenMenuDrawer] = useState(false);
  const appInfo = {
    appShortName: "cdl",
    appName: "CDL Practice Tests",
    appNameId: "cdl-practice",
  };

  return (
    <div className="app">
      <DrawerHeader
        setOpenMenuDrawer={setOpenMenuDrawer}
        appInfo={appInfo}
      />
      {/* Your app content */}
    </div>
  );
};

Features:

• Full practice test link
• Study guides navigation
• Blog and contact links
• Mobile-specific menu items
• Analytics tracking integration

4. SelectStateHeader - State Selection

import { SelectStateHeader } from "abc-header-single/menuState";

const StateApp = () => {
  const appInfo = {
    appShortName: "dmv",
    appName: "DMV Practice Tests",
    appNameId: "dmv-practice",
  };

  return (
    <div className="app">
      <header>
        <SelectStateHeader appInfo={appInfo} />
      </header>
      {/* Your state-specific content */}
    </div>
  );
};

Features:

• State dropdown selection
• App-specific state filtering
• Router integration
• Customizable styling

5. Icon Components - Header Icons

import {
  IconGetPro,
  IconLogin,
  IconMenuHeader,
  IconReview,
  IconTopics
} from "abc-header-single";

const CustomHeader = () => {
  const appInfo = {
    appShortName: "dmv",
    appName: "DMV Practice Tests",
  };

  return (
    <div className="custom-header">
      <IconGetPro isParent={false} appInfo={appInfo} />
      <IconTopics />
      <IconReview />
      <IconLogin />
      <IconMenuHeader type="single" appInfo={appInfo} />
    </div>
  );
};

Features:

• Individual icon components
• App-specific styling
• Interactive functionality
• Consistent design system

6. Advanced Usage with Custom Configuration

import {
  HeaderApp,
  DrawerHeader,
  DownLoadApp
} from "abc-header-single";
import { useState } from "react";

const AdvancedApp = () => {
  const [openMenuDrawer, setOpenMenuDrawer] = useState(false);

  const appInfo = {
    appShortName: "asvab",
    appName: "ASVAB Practice Tests",
    appNameId: "asvab-practice",
    description: "Military entrance exam preparation",
  };

  return (
    <div className="app">
      {/* Main header with custom configuration */}
      <HeaderApp
        appInfo={appInfo}
        type="state"
        showBanner={true}
        isParent={true}
      />

      {/* Download banner with custom styling */}
      <DownLoadApp appInfo={appInfo} />

      {/* Navigation drawer */}
      <DrawerHeader
        setOpenMenuDrawer={setOpenMenuDrawer}
        appInfo={appInfo}
      />

      <main className="content">
        {/* Your app content */}
      </main>
    </div>
  );
};

🏗️ Project Structure

packages/header-single/
├── src/
│   ├── download/           # App download banner
│   │   ├── index.tsx
│   │   ├── downloadApp.tsx
│   │   └── getTheApp.tsx
│   ├── drawerSingle/       # Navigation drawer
│   │   ├── index.tsx
│   │   ├── itemDrawer.tsx
│   │   └── listStudy.tsx
│   ├── drawerState/        # State-specific drawer
│   │   └── index.tsx
│   ├── icon/               # Header icons
│   │   ├── iconGetPro.tsx
│   │   ├── iconLogin.tsx
│   │   ├── iconMenuHeader.tsx
│   │   ├── iconReview.tsx
│   │   └── iconTopics.tsx
│   ├── menuState/          # State selection
│   │   ├── index.tsx
│   │   └── bottomDrawer.tsx
│   ├── ui/                 # Main header component
│   │   └── index.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
└── README.md

🔧 Configuration

Dependencies

The package requires these dependencies:

• abc-db - Database utilities
• abc-events - Event tracking
• abc-hx - React hooks
• abc-images - Image utilities
• abc-logo - Logo components
• abc-model - Type definitions
• abc-primitive-ui - Primitive UI components
• abc-redux - Redux state management
• abc-router - Routing utilities
• abc-shadcn - UI components
• abc-web-icon - Web icons

Environment Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build package
pnpm build

# Type checking
pnpm check-types

# Linting
pnpm lint

🎨 Styling

CSS Classes

The components use Tailwind CSS classes and can be customized:

// Custom header styling
<HeaderApp
  appInfo={appInfo}
  type="single"
  className="custom-header bg-gradient-to-r from-blue-500 to-purple-600"
/>

// Custom download banner styling
<DownLoadApp
  appInfo={appInfo}
  className="custom-banner shadow-lg"
/>

Responsive Design

Components are built with mobile-first responsive design:

/* Mobile styles */
.header {
  @apply sticky top-0 z-50 w-full;
}

/* Desktop styles */
@media (min-width: 768px) {
  .header {
    @apply gap-9;
  }
}

📦 Dependencies

Runtime Dependencies

• abc-db - Database utilities and models
• abc-events - Event tracking and analytics
• abc-hx - React hooks for mobile detection
• abc-images - Image utilities and optimization
• abc-logo - Logo and branding components
• abc-model - Type definitions and models
• abc-primitive-ui - Primitive UI components
• abc-redux - Redux state management
• abc-router - Routing utilities and constants
• abc-shadcn - Base UI components
• abc-web-icon - Web icon components

Development Dependencies

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

🚀 Development

Prerequisites

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

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

HeaderApp

Main header component with navigation and branding.

Props:

• appInfo (IAppInfoCore) - App information for configuration
• type ("single" | "state") - Header type
• showBanner (boolean, optional) - Show download banner
• isParent (boolean, optional) - Parent app mode

Features:

• Sticky header with backdrop blur
• App logo with theme awareness
• Navigation menu with icons
• State selection integration

DownLoadApp

Mobile app download banner component.

Props:

• appInfo (IAppInfoCore) - App information

Features:

• Auto-hide after 5 seconds
• Fade out animation
• Mobile-only display
• App store integration

DrawerHeader

Navigation drawer component.

Props:

• setOpenMenuDrawer (function) - Drawer state setter
• appInfo (IAppInfoCore) - App information

Features:

• Full practice test link
• Study guides navigation
• Blog and contact links
• Analytics tracking

SelectStateHeader

State selection dropdown component.

Props:

• appInfo (IAppInfoCore) - App information

Features:

• State dropdown selection
• App-specific filtering
• Router integration

Icon Components

Individual header icon components.

Props:

• Various props depending on component
• appInfo (IAppInfo, optional) - App information
• isParent (boolean, optional) - Parent app mode
• type (string, optional) - Icon type

🤝 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 header package designed for use within the monorepo ecosystem. Components are optimized for single-page applications and app integration.

📊 Changelog

v0.0.1 (2025-01-11)

• ✅ Initial release with HeaderApp component
• ✅ DownLoadApp mobile banner with auto-hide
• ✅ DrawerHeader navigation drawer
• ✅ SelectStateHeader state selection
• ✅ Icon components (Get Pro, Login, Menu, Review, Topics)
• ✅ Responsive design for mobile and desktop
• ✅ App integration with IAppInfoCore configuration