abc-modal

A comprehensive modal and UI component library providing specialized modal dialogs, infinite scrolling, countdown timers, and interactive components for modern web applications.

📦 Installation

# If using within the monorepo
pnpm add abc-modal

# For external usage
pnpm install abc-modal

🚀 Features

The abc-modal package provides specialized modal and UI components:

• ModalConfirm - Test confirmation modal with continue/restart options
• ModalGetPro - Pro upgrade modal with test submission handling
• ModalUnlock - Unlock modal for premium features
• MtUIInfinity - Infinite scrolling component with throttled loading
• CountTime - Countdown timer component with formatting utilities
• TitleQuestion - Question title display component
• Redux integration - Built-in state management support
• Responsive design - Mobile-first responsive layouts

📖 Usage

Basic Import

// Import from main entry point
import {
  ModalConfirm,
  ModalGetPro,
  ModalUnlock,
  MtUIInfinity,
  CountTime,
  formatTime,
  TitleQuestion,
} from "abc-modal";

// Import specific components
import { ModalConfirm } from "abc-modal/modalConfirmStartTest";
import { ModalGetPro } from "abc-modal/modalGetPro";
import { ModalUnlock } from "abc-modal/modalUnlock";
import { MtUIInfinity } from "abc-modal/infiniteScroller";
import { CountTime, formatTime } from "abc-modal/countTime";
import { TitleQuestion } from "abc-modal/titleQuestion";

Usage Examples

1. ModalConfirm - Test Confirmation Modal

import { ModalConfirm } from "abc-modal/modalConfirmStartTest";

const TestPage = () => {
  return (
    <div className="test-container">
      <h1>Practice Test</h1>
      {/* Your test content */}

      {/* Modal will automatically show based on Redux state */}
      <ModalConfirm />
    </div>
  );
};

Features:

• Automatic display based on Redux state
• Continue or restart test options
• Database integration for test state
• URL parameter handling for test ID and type

2. ModalGetPro - Pro Upgrade Modal

import { ModalGetPro } from "abc-modal/modalGetPro";

const TestPage = () => {
  return (
    <div className="test-container">
      <h1>Premium Test</h1>
      {/* Your test content */}

      {/* Modal will show when pro features are needed */}
      <ModalGetPro />
    </div>
  );
};

Features:

• Pro upgrade prompts
• Test submission handling
• Router integration for navigation
• Redux state management

3. MtUIInfinity - Infinite Scrolling

import { MtUIInfinity } from "abc-modal/infiniteScroller";
import { useState } from "react";

const InfiniteList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const fetchNextPage = async (pageNumber: number) => {
    setIsLoading(true);
    try {
      const newData = await fetchData(pageNumber);
      setData(prev => [...prev, ...newData]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <MtUIInfinity
      fetchNextPage={fetchNextPage}
      isFetchingNextPage={isLoading}
      dataLength={data.length}
      classNames="max-h-96 overflow-y-auto"
    >
      {data.map((item, index) => (
        <div key={index} className="p-4 border-b">
          {item.title}
        </div>
      ))}
    </MtUIInfinity>
  );
};

Features:

• Throttled scroll detection
• Configurable scroll thresholds
• Page-based scrolling support
• Customizable styling and behavior

4. CountTime - Countdown Timer

import { CountTime, formatTime } from "abc-modal/countTime";

const TimerComponent = () => {
  const [timeLeft, setTimeLeft] = useState(3600); // 1 hour in seconds

  return (
    <div className="timer-container">
      <CountTime
        time={timeLeft}
        onTimeUp={() => console.log("Time's up!")}
        className="text-2xl font-bold text-red-500"
      />

      {/* Format time for display */}
      <p>Formatted time: {formatTime(timeLeft)}</p>
    </div>
  );
};

Features:

• Countdown timer with callback
• Time formatting utilities
• Customizable styling
• Automatic time up handling

5. TitleQuestion - Question Title Display

import { TitleQuestion } from "abc-modal/titleQuestion";

const QuestionPage = () => {
  const question = {
    id: 1,
    title: "What is the capital of California?",
    options: ["Los Angeles", "San Francisco", "Sacramento", "San Diego"]
  };

  return (
    <div className="question-container">
      <TitleQuestion
        question={question}
        questionNumber={1}
        totalQuestions={20}
      />
      {/* Question options */}
    </div>
  );
};

Features:

• Question title display
• Question numbering
• Progress indication
• Customizable styling

6. Advanced Usage with Redux Integration

import {
  ModalConfirm,
  ModalGetPro,
  MtUIInfinity,
  CountTime
} from "abc-modal";
import { useSelector } from "react-redux";

const AdvancedTestPage = () => {
  const testState = useSelector(state => state.test);
  const [questions, setQuestions] = useState([]);

  const fetchQuestions = async (page: number) => {
    const newQuestions = await api.getQuestions(page);
    setQuestions(prev => [...prev, ...newQuestions]);
  };

  return (
    <div className="test-page">
      {/* Countdown timer */}
      <CountTime
        time={testState.timeLeft}
        onTimeUp={() => handleTimeUp()}
      />

      {/* Infinite scroll for questions */}
      <MtUIInfinity
        fetchNextPage={fetchQuestions}
        isFetchingNextPage={testState.isLoading}
        dataLength={questions.length}
        isScrollPage={true}
        pageScrollId="test-container"
      >
        {questions.map(question => (
          <QuestionCard key={question.id} question={question} />
        ))}
      </MtUIInfinity>

      {/* Modals */}
      <ModalConfirm />
      <ModalGetPro />
    </div>
  );
};

🏗️ Project Structure

packages/modal/
├── src/
│   ├── countTime/          # Countdown timer component
│   │   └── index.tsx
│   ├── infiniteScroller/   # Infinite scrolling component
│   │   ├── index.tsx
│   │   └── utils/
│   ├── modalConfirmStartTest/ # Test confirmation modal
│   │   └── index.tsx
│   ├── modalGetPro/        # Pro upgrade modal
│   │   └── index.tsx
│   ├── modalUnlock/        # Unlock modal
│   │   └── index.tsx
│   ├── titleQuestion/      # Question title component
│   │   ├── index.tsx
│   │   └── titleIndex.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
└── README.md

🔧 Configuration

Dependencies

The package requires these dependencies:

• abc-redux - Redux state management
• abc-constants - Shared constants
• abc-motion - Animation components
• abc-db - Database utilities
• abc-model - Type definitions
• abc-images - Image utilities
• abc-sheet - Sheet components
• abc-router - Routing utilities
• abc-service - Service layer
• abc-shadcn - UI components
• throttle-debounce - Throttling utilities
• abc-primitive-ui - Primitive UI components

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 modal styling
<ModalConfirm className="custom-modal" />

// Custom infinite scroll styling
<MtUIInfinity
  classNames="max-h-96 overflow-y-auto scrollbar-thin"
  styles={{ padding: '16px' }}
/>

// Custom timer styling
<CountTime
  className="text-3xl font-bold text-blue-500"
  time={timeLeft}
/>

Responsive Design

Components are built with mobile-first responsive design:

/* Mobile styles */
.modal-content {
  @apply w-full max-w-sm mx-auto;
}

/* Desktop styles */
@media (min-width: 640px) {
  .modal-content {
    @apply max-w-md;
  }
}

📦 Dependencies

Runtime Dependencies

• abc-redux - Redux state management integration
• abc-constants - Shared constants and types
• abc-motion - Animation and motion components
• abc-db - Database utilities and models
• abc-model - Type definitions and models
• abc-images - Image utilities
• abc-sheet - Sheet and dialog components
• abc-router - Routing utilities
• abc-service - Service layer utilities
• abc-shadcn - Base UI components
• throttle-debounce - Throttling and debouncing utilities
• abc-primitive-ui - Primitive UI components

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

ModalConfirm

Test confirmation modal component.

Props:

• None (uses Redux state)

Features:

• Automatic display based on Redux state
• Continue or restart test options
• Database integration
• URL parameter handling

ModalGetPro

Pro upgrade modal component.

Props:

• None (uses Redux state)

Features:

• Pro upgrade prompts
• Test submission handling
• Router navigation
• Redux state management

MtUIInfinity

Infinite scrolling component.

Props:

• children (ReactNode) - Content to scroll
• fetchNextPage (function) - Function to fetch next page
• isFetchingNextPage (boolean, optional) - Loading state
• total (number, optional) - Total items count
• dataLength (number, optional) - Current data length
• isSuccess (boolean, optional) - Success state
• isLoading (boolean, optional) - Loading state
• classNames (string, optional) - CSS classes
• styles (CSSProperties, optional) - Inline styles
• isScrollPage (boolean, optional) - Page scroll mode
• pageScrollId (string, optional) - Page scroll element ID

CountTime

Countdown timer component.

Props:

• time (number) - Time in seconds
• onTimeUp (function, optional) - Time up callback
• className (string, optional) - CSS classes

formatTime

Time formatting utility function.

Parameters:

• seconds (number) - Time in seconds

Returns:

• string - Formatted time string

TitleQuestion

Question title display component.

Props:

• question (object) - Question data
• questionNumber (number) - Current question number
• totalQuestions (number) - Total questions count

🤝 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 modal package designed for use within the monorepo ecosystem. Components are optimized for test applications and Redux integration.

📊 Changelog

v0.0.1 (2025-01-11)

• ✅ Initial release with ModalConfirm component
• ✅ ModalGetPro component for pro upgrades
• ✅ ModalUnlock component for premium features
• ✅ MtUIInfinity infinite scrolling component
• ✅ CountTime countdown timer with formatting
• ✅ TitleQuestion component for question display
• ✅ Redux integration for state management
• ✅ Throttled scroll detection and performance optimization