@campxdev/react-blueprint 2.1.1 → 2.1.3

package/README.md

@@ -1,100 +1,159 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-## Component Library
-
-Below is a table of components available in our library, categorized by their function:
-
-| Name                | Category      |
-|---------------------|---------------|
-| App Layout          | Layout        |
-| Main Layout         | Layout        |
-| Page Sidebar        | Layout        |
-| Page Container      | Layout        |
-| Page Header         | Layout        |
-| Text Field          | Input         |
-| Single Select       | Input         |
-| Multi Select        | Input         |
-| CheckBox            | Input         |
-| Radio               | Input         |
-| Date Picker         | Input         |
-| Time Picker         | Input         |
-| Date Time Picker    | Input         |
-| Date Range Picker   | Input         |
-| File Upload         | Input         |
-| Import Dialog       | Input         |
-| Text Editor         | Input         |
-| Rating              | Input         |
-| Switch              | Input         |
-| Slider              | Input         |
-| Tag Editor          | Input         |
-| SearchBar           | Input         |
-| OTP Input           | Input         |
-| ActionButton        | Navigation    |
-| DialogButton        | Navigation    |
-| DropdownMenu        | Navigation    |
-| BreadCrumbs         | Navigation    |
-| AppBar              | Navigation    |
-| Tabs                | Navigation    |
-| Toast               | Feedback      |
-| Alert               | Feedback      |
-| Confirmation Dialog | Feedback      |
-| ErrorDialog         | Feedback      |
-| Spinner             | Feedback      |
-| Chips               | Data Display  |
-| Cards               | Data Display  |
-| Data Table          | Data Display  |
-| Accordians          | Data Display  |
-| Data Tree           | Data Display  |
-| Avatar              | Data Display  |
-| Divider             | Data Display  |
-| Timeline            | Data Display  |
-| Calendar            | Data Display  |
-| Tooltip             | Data Display  |
-| Progress Bar        | Data Display  |
-| Stepper             | Data Display  |
+# 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
+
+```bash
+npm install @campxdev/react-blueprint
+# or
+yarn add @campxdev/react-blueprint
+```
+
+## Quick Start
+
+```tsx
+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](./agents.md)** - Detailed component documentation
+
+### For AI Agents
+- **[AI Agent Documentation](./agents.md)** - 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
+```bash
+yarn start          # Start development server
+yarn storybook      # Launch Storybook documentation
+```
+
+### Building
+```bash
+yarn build          # Build library for production
+yarn build-storybook # Build Storybook for deployment
+```
+
+### Testing
+```bash
+yarn test           # Run test suite
+```
+
+## Component Architecture
+
+### Theme System
+All components are built with a consistent theming system supporting both light and dark modes:
+
+```tsx
+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:
+
+```tsx
+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:
+
+```tsx
+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.
+
+## License
+
+Private - CampX Internal Use Only

package/dist/README.md

@@ -1,100 +1,159 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-## Component Library
-
-Below is a table of components available in our library, categorized by their function:
-
-| Name                | Category      |
-|---------------------|---------------|
-| App Layout          | Layout        |
-| Main Layout         | Layout        |
-| Page Sidebar        | Layout        |
-| Page Container      | Layout        |
-| Page Header         | Layout        |
-| Text Field          | Input         |
-| Single Select       | Input         |
-| Multi Select        | Input         |
-| CheckBox            | Input         |
-| Radio               | Input         |
-| Date Picker         | Input         |
-| Time Picker         | Input         |
-| Date Time Picker    | Input         |
-| Date Range Picker   | Input         |
-| File Upload         | Input         |
-| Import Dialog       | Input         |
-| Text Editor         | Input         |
-| Rating              | Input         |
-| Switch              | Input         |
-| Slider              | Input         |
-| Tag Editor          | Input         |
-| SearchBar           | Input         |
-| OTP Input           | Input         |
-| ActionButton        | Navigation    |
-| DialogButton        | Navigation    |
-| DropdownMenu        | Navigation    |
-| BreadCrumbs         | Navigation    |
-| AppBar              | Navigation    |
-| Tabs                | Navigation    |
-| Toast               | Feedback      |
-| Alert               | Feedback      |
-| Confirmation Dialog | Feedback      |
-| ErrorDialog         | Feedback      |
-| Spinner             | Feedback      |
-| Chips               | Data Display  |
-| Cards               | Data Display  |
-| Data Table          | Data Display  |
-| Accordians          | Data Display  |
-| Data Tree           | Data Display  |
-| Avatar              | Data Display  |
-| Divider             | Data Display  |
-| Timeline            | Data Display  |
-| Calendar            | Data Display  |
-| Tooltip             | Data Display  |
-| Progress Bar        | Data Display  |
-| Stepper             | Data Display  |
+# 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
+
+```bash
+npm install @campxdev/react-blueprint
+# or
+yarn add @campxdev/react-blueprint
+```
+
+## Quick Start
+
+```tsx
+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](./agents.md)** - Detailed component documentation
+
+### For AI Agents
+- **[AI Agent Documentation](./agents.md)** - 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
+```bash
+yarn start          # Start development server
+yarn storybook      # Launch Storybook documentation
+```
+
+### Building
+```bash
+yarn build          # Build library for production
+yarn build-storybook # Build Storybook for deployment
+```
+
+### Testing
+```bash
+yarn test           # Run test suite
+```
+
+## Component Architecture
+
+### Theme System
+All components are built with a consistent theming system supporting both light and dark modes:
+
+```tsx
+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:
+
+```tsx
+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:
+
+```tsx
+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.
+
+## License
+
+Private - CampX Internal Use Only