abc-sheet

A responsive UI component library providing mobile-optimized sheet and dialog components for modern web applications.

📦 Installation

# If using within the monorepo
pnpm add abc-sheet

# For external usage
pnpm install abc-sheet

🚀 Features

The abc-sheet package provides responsive UI components:

• SheetApp - Mobile app download promotion sheet with smart timing
• DialogResponsive - Responsive dialog/sheet component that adapts to device type
• Mobile-first design - Optimized for mobile user experience
• Smart detection - Automatic mobile/desktop detection and rendering
• App integration - Built-in support for app download promotion
• Customizable - Flexible props and styling options

📖 Usage

Basic Import

// Import from main entry point
import { SheetApp, DialogResponsive } from "abc-sheet";

// Import specific components
import { SheetApp } from "abc-sheet/sheetApp";
import { DialogResponsive } from "abc-sheet/dialogResponsive";

Usage Examples

1. SheetApp - Mobile App Promotion

import { SheetApp } from "abc-sheet/sheetApp";
import type { IAppInfo } from "abc-model/app";

const App = () => {
  const appInfo: IAppInfo = {
    appShortName: "dmv",
    linkAndroid: "https://play.google.com/store/apps/details?id=com.dmv.app",
    linkIos: "https://apps.apple.com/app/dmv-practice/id123456789",
    // ... other app info
  };

  return (
    <div>
      <h1>My App</h1>
      <SheetApp appInfo={appInfo} />
    </div>
  );
};

Features:

• Automatically shows after 30 seconds on mobile
• Only displays if app links are available
• Remembers user preference (localStorage)
• Smart device detection for appropriate app store

2. DialogResponsive - Adaptive Modal

import { DialogResponsive } from "abc-sheet/dialogResponsive";
import { useState } from "react";

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Open Modal
      </button>

      <DialogResponsive
        open={isOpen}
        close={() => setIsOpen(false)}
        dialogContentRest="max-w-md"
        sheetRest={{
          // Custom sheet props
        }}
        dialogRest={{
          // Custom dialog props
        }}
      >
        <div className="p-6">
          <h2 className="text-xl font-bold mb-4">Modal Content</h2>
          <p>This content adapts to mobile (sheet) or desktop (dialog)</p>
          <button
            onClick={() => setIsOpen(false)}
            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
          >
            Close
          </button>
        </div>
      </DialogResponsive>
    </div>
  );
};

Features:

• Automatically renders as Sheet on mobile, Dialog on desktop
• Customizable props for both sheet and dialog variants
• Responsive design with mobile-optimized interactions
• Flexible content rendering

3. Advanced Usage with Custom Styling

import { DialogResponsive } from "abc-sheet/dialogResponsive";
import { SheetApp } from "abc-sheet/sheetApp";

const AdvancedExample = () => {
  const [showModal, setShowModal] = useState(false);

  const appInfo = {
    appShortName: "asvab" as const,
    linkAndroid: "https://play.google.com/store/apps/details?id=com.asvab.app",
    linkIos: "https://apps.apple.com/app/asvab-prep/id987654321",
  };

  return (
    <div>
      {/* Custom responsive modal */}
      <DialogResponsive
        open={showModal}
        close={() => setShowModal(false)}
        dialogContentRest="max-w-2xl bg-gradient-to-br from-blue-50 to-indigo-100"
        sheetRest={{
          className: "bg-gradient-to-t from-blue-50 to-indigo-100"
        }}
      >
        <div className="p-8">
          <h1 className="text-3xl font-bold text-center mb-6">
            Welcome to Our Platform
          </h1>
          <div className="space-y-4">
            <p className="text-gray-700">
              Experience our app with enhanced features and offline access.
            </p>
            <div className="flex gap-4 justify-center">
              <button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
                Learn More
              </button>
              <button
                onClick={() => setShowModal(false)}
                className="px-6 py-3 border border-gray-300 rounded-lg"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </DialogResponsive>

      {/* App promotion sheet */}
      <SheetApp appInfo={appInfo} />
    </div>
  );
};

🏗️ Project Structure

packages/sheet/
├── src/
│   ├── sheetApp/           # Mobile app promotion sheet
│   │   └── index.tsx
│   ├── dialogResponsive/   # Responsive dialog/sheet component
│   │   └── index.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
├── tsup.config.ts
└── README.md

🔧 Configuration

Dependencies

The package requires these peer dependencies:

• abc-hx - React hooks (useIsMobile)
• abc-logo - Logo components
• abc-model - Type definitions
• abc-motion - UI components
• abc-shadcn - Base UI components

Environment Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build package
pnpm build

# Type checking
pnpm check-types

# Linting
pnpm lint

📱 Mobile Behavior

SheetApp Component

• Trigger: Automatically shows after 30 seconds on mobile devices
• Conditions: Only displays if app store links are available
• Persistence: Uses localStorage to remember user preference
• Device Detection: Smart detection for iOS/Android app stores

DialogResponsive Component

• Mobile: Renders as bottom sheet with scrollable content
• Desktop: Renders as centered dialog modal
• Responsive: Automatically adapts based on screen size
• Customizable: Separate props for mobile and desktop variants

🎨 Styling

CSS Classes

The components use Tailwind CSS classes and can be customized:

// Custom sheet styling
<DialogResponsive
  sheetRest={{
    className: "bg-white border-t-4 border-blue-500"
  }}
/>

// Custom dialog styling
<DialogResponsive
  dialogContentRest="max-w-lg bg-gradient-to-br from-purple-50 to-pink-50"
/>

Theme Integration

Components integrate with your app's theme system:

// Using theme-aware logo
<ThemeAwareLogo app={appInfo.appShortName} />

📦 Dependencies

Runtime Dependencies

• abc-logo - Logo and branding components
• abc-hx - React hooks for mobile detection
• abc-shadcn - Base UI components (Sheet, Dialog)
• abc-motion - Motion and animation components
• abc-model - Type definitions and models

Development Dependencies

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

🚀 Development

Prerequisites

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

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

SheetApp

Mobile app promotion sheet component.

Props:

• appInfo (IAppInfo) - App information including store links

Features:

• Automatic mobile detection
• 30-second delay before showing
• localStorage persistence
• Smart app store redirection

DialogResponsive

Responsive dialog/sheet component.

Props:

• open (boolean) - Whether the modal is open
• close (() => void, optional) - Close handler
• children (React.ReactNode) - Modal content
• sheetRest (object, optional) - Additional sheet props
• dialogRest (object, optional) - Additional dialog props
• dialogContentRest (string, optional) - Additional dialog content classes

Behavior:

• Mobile: Renders as bottom sheet
• Desktop: Renders as centered dialog
• Automatic responsive switching

🤝 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 UI package designed for use within the monorepo ecosystem. Components are optimized for mobile-first responsive design.

📊 Changelog

v0.0.1 (2025-01-11)

• ✅ Initial release with SheetApp component
• ✅ DialogResponsive component for adaptive modals
• ✅ Mobile-first responsive design
• ✅ App store integration and promotion
• ✅ Smart device detection and timing
• ✅ localStorage persistence for user preferences