@campxdev/react-blueprint NPM

CampX React Blueprint

A comprehensive React component library built with TypeScript and Material-UI for building modern web applications with consistent design patterns and functionality.

Overview

CampX React Blueprint provides a complete set of reusable components organized into logical categories. The library is built on top of Material-UI v7 and provides additional functionality, styling, and patterns specific to CampX applications.

Key Features:

🎨 67+ Production-Ready Components - Comprehensive component library covering all common UI patterns
🎯 TypeScript First - Full type safety and excellent developer experience
🎨 Material-UI Foundation - Built on top of MUI v7 with consistent theming
📖 Storybook Documentation - Interactive component documentation and testing
🌓 Dark/Light Theme - Complete theming system with dark and light mode support
♿ Accessibility - WCAG compliant components with proper ARIA support
📱 Responsive Design - Mobile-first responsive components

Installation

npm install @campxdev/react-blueprint
# or
yarn add @campxdev/react-blueprint

Quick Start

import { MuiThemeProvider, Button, DataTable } from '@campxdev/react-blueprint';
import { lightTheme } from '@campxdev/react-blueprint';

function App() {
  return (
    <MuiThemeProvider theme={lightTheme}>
      <Button variant="contained" color="primary">
        Hello CampX!
      </Button>
    </MuiThemeProvider>
  );
}

Component Categories

The library includes 67+ components organized into 7 categories:

Layout (5 components) - Application structure and page layout
Input (21 components) - Form controls and user input elements
Navigation (15 components) - Navigation and user interaction flows
Feedback (6 components) - User feedback and status information
Data Display (13 components) - Data presentation and organization
Assets (7 components) - Static assets including error pages and icons
Charts (5 components) - Data visualization with Recharts integration

Documentation

For Developers

Component API Reference - Detailed component documentation

For AI Agents

AI Agent Documentation - Comprehensive component reference designed specifically for AI agents to understand and work with the component system

The agents.md file provides detailed information about all components, their purposes, props, usage patterns, and relationships - specifically formatted for AI systems to parse and understand the component library structure.

Development Scripts

Development

yarn start          # Start development server
yarn storybook      # Launch Storybook documentation

Building

yarn build          # Build library for production
yarn build-storybook # Build Storybook for deployment

Testing

yarn test           # Run test suite

Component Architecture

Theme System

All components are built with a consistent theming system supporting both light and dark modes:

import { MuiThemeProvider, lightTheme, darkTheme } from '@campxdev/react-blueprint';

// Use light theme
<MuiThemeProvider theme={lightTheme}>
  <YourApp />
</MuiThemeProvider>

// Use dark theme  
<MuiThemeProvider theme={darkTheme}>
  <YourApp />
</MuiThemeProvider>

Form Integration

Components work seamlessly together for form building:

import { 
  FormWrapper, 
  TextField, 
  Button, 
  FormActions 
} from '@campxdev/react-blueprint';

<FormWrapper onSubmit={handleSubmit}>
  <TextField label="Name" name="name" required />
  <TextField label="Email" name="email" type="email" required />
  <FormActions>
    <Button type="submit" variant="contained">Submit</Button>
    <Button variant="outlined">Cancel</Button>
  </FormActions>
</FormWrapper>

Layout Structure

Build consistent application layouts:

import { 
  AppHeader, 
  Sidebar, 
  PageContent, 
  PageHeader 
} from '@campxdev/react-blueprint';

<div className="app">
  <AppHeader 
    userFullName="John Doe"
    clientName="CampX"
    collapsed={sidebarCollapsed}
  />
  <div className="app-body">
    <Sidebar />
    <main>
      <PageHeader title="Dashboard" />
      <PageContent>
        {/* Your page content */}
      </PageContent>
    </main>
  </div>
</div>

Contributing

This is a private CampX component library. For internal development guidelines and contribution processes, please refer to the internal CampX documentation.