abc-page-component

A comprehensive page component library providing ready-to-use page layouts and components for modern web applications, including contact forms, about pages, and error pages.

📦 Installation

# If using within the monorepo
pnpm add abc-page-component

# For external usage
pnpm install abc-page-component

🚀 Features

The abc-page-component package provides specialized page components:

• FormContact - Complete contact page with form and information
• AboutPage - About us page layout and content
• AboutUsMeetTheTeam - Team section component
• DefaultPage - Default 404 error page
• Page404Container - Single page 404 error container
• Form validation - Built-in form validation with Yup and React Hook Form
• Responsive design - Mobile-first responsive layouts
• App integration - Built-in support for app-specific configurations

📖 Usage

Basic Import

// Import from main entry point
import {
  FormContact,
  AboutPage,
  AboutUsMeetTheTeam,
  DefaultPage,
  Page404Container,
} from "abc-page-component";

// Import specific components
import { FormContact } from "abc-page-component/contact";
import { AboutPage } from "abc-page-component/aboutParent";
import { AboutUsMeetTheTeam } from "abc-page-component/about";
import { DefaultPage } from "abc-page-component/404_default";
import { Page404Container } from "abc-page-component/404_single";

Usage Examples

1. FormContact - Contact Page Component

import { FormContact } from "abc-page-component/contact";
import type { IAppInfo } from "abc-model/app";

const ContactPage = () => {
  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",
  };

  return (
    <div className="min-h-screen">
      <FormContact appInfo={appInfo} />
    </div>
  );
};

Features:

• Complete contact page layout
• Form validation with Yup schema
• Email support integration
• Responsive design (mobile/desktop)
• Background images and styling
• Social media links

2. AboutPage - About Us Page

import { AboutPage } from "abc-page-component/aboutParent";

const AboutUsPage = () => {
  return (
    <div className="min-h-screen">
      <AboutPage />
    </div>
  );
};

Features:

• Professional about page layout
• Company information display
• Team member sections
• Responsive design
• Customizable content

3. AboutUsMeetTheTeam - Team Section

import { AboutUsMeetTheTeam } from "abc-page-component/about";

const TeamPage = () => {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-8">Our Team</h1>
      <AboutUsMeetTheTeam />
    </div>
  );
};

Features:

• Team member display
• Professional layout
• Responsive grid system
• Customizable styling

4. Error Pages - 404 Components

import { DefaultPage, Page404Container } from "abc-page-component";

const ErrorPage = () => {
  return (
    <div className="min-h-screen">
      {/* Default 404 page */}
      <DefaultPage />

      {/* Or single page 404 container */}
      <Page404Container />
    </div>
  );
};

Features:

• Professional error page design
• User-friendly messaging
• Navigation options
• Responsive layout

5. Advanced Usage with Custom Styling

import { FormContact } from "abc-page-component/contact";
import { AboutPage } from "abc-page-component/aboutParent";

const CustomApp = () => {
  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",
  };

  return (
    <div className="app">
      {/* Custom contact page with app-specific styling */}
      <div className="contact-section">
        <FormContact appInfo={appInfo} />
      </div>

      {/* About page with custom wrapper */}
      <div className="about-section bg-gray-50">
        <AboutPage />
      </div>
    </div>
  );
};

🏗️ Project Structure

packages/page-component/
├── src/
│   ├── contact/            # Contact page components
│   │   ├── index.tsx
│   │   ├── contactForm.tsx
│   │   ├── modalThank.tsx
│   │   └── api.ts
│   ├── about/              # About page components
│   │   └── index.tsx
│   ├── aboutParent/        # Parent about page
│   │   └── index.tsx
│   ├── 404_default/        # Default 404 page
│   │   └── index.tsx
│   ├── 404_single/         # Single 404 container
│   │   └── index.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
└── README.md

🔧 Configuration

Dependencies

The package requires these dependencies:

• @hookform/resolvers - Form validation resolvers
• react-hook-form - Form management library
• yup - Schema validation library
• abc-images - Image utilities
• abc-model - Type definitions
• abc-shadcn - UI components
• abc-icon - Icon components
• abc-hx - React hooks
• abc-primitive-ui - Primitive UI components
• abc-ut - Utility functions

Environment Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build package
pnpm build

# Type checking
pnpm check-types

# Linting
pnpm lint

📝 Form Validation

Contact Form Schema

The contact form uses Yup validation schema:

const schema = yup.object().shape({
  message: yup.string().required("Please type your message!"),
  email: yup
    .string()
    .email("Invalid email format")
    .required("Please provide a valid email address!"),
});

Custom Validation

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const customSchema = yup.object().shape({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email").required("Email is required"),
  message: yup.string().min(10, "Message must be at least 10 characters"),
});

// Use with react-hook-form
const { control, handleSubmit } = useForm({
  resolver: yupResolver(customSchema),
});

🎨 Styling

CSS Classes

The components use Tailwind CSS classes and can be customized:

// Custom contact page styling
<div className="contact-page bg-gradient-to-br from-blue-50 to-indigo-100">
  <FormContact appInfo={appInfo} />
</div>

// Custom about page styling
<div className="about-page bg-white shadow-lg rounded-lg">
  <AboutPage />
</div>

Responsive Design

Components are built with mobile-first responsive design:

/* Mobile styles */
.contact-form {
  @apply flex flex-col gap-4 p-4;
}

/* Desktop styles */
@media (min-width: 640px) {
  .contact-form {
    @apply flex-row gap-8 p-8;
  }
}

📦 Dependencies

Runtime Dependencies

• @hookform/resolvers - Form validation resolvers
• react-hook-form - Form management
• yup - Schema validation
• abc-images - Image utilities
• abc-model - Type definitions
• abc-shadcn - UI components
• abc-icon - Icon components
• abc-hx - React hooks
• abc-primitive-ui - Primitive UI components
• abc-ut - Utility functions

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

FormContact

Complete contact page component with form and information.

Props:

• appInfo (IAppInfo) - App information for configuration

Features:

• Form validation with Yup
• Email support integration
• Responsive design
• Background images
• Social media links

AboutPage

About us page layout and content.

Props:

• None (uses default content)

Features:

• Professional layout
• Company information
• Team sections
• Responsive design

AboutUsMeetTheTeam

Team section component.

Props:

• None (uses default team data)

Features:

• Team member display
• Grid layout
• Professional styling

DefaultPage

Default 404 error page.

Props:

• None

Features:

• User-friendly error message
• Navigation options
• Responsive design

Page404Container

Single page 404 container.

Props:

• None

Features:

• Container layout
• Error messaging
• Customizable content

🤝 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 page component package designed for use within the monorepo ecosystem. Components are optimized for responsive design and form handling.

📊 Changelog

v0.0.2 (2025-01-11)

• ✅ Enhanced FormContact component with improved validation
• ✅ Added AboutPage and AboutUsMeetTheTeam components
• ✅ Implemented 404 error page components
• ✅ Form validation with Yup and React Hook Form
• ✅ Responsive design for mobile and desktop
• ✅ App integration with IAppInfo configuration