@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

package/README.md

@@ -1,12 +1,15 @@
 # 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.
+> ⚠️ **IMPORTANT:** Starting from version **3.x.y**, this library is built on **shadcn/ui** with all Material-UI (MUI) dependencies completely removed. Please ensure you are using the 2.x.y version or higher. Previous versions (2.x.y) still depend on Material-UI.
+
+A comprehensive React component library built with TypeScript and shadcn/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
@@ -45,7 +48,7 @@ function App() {
 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  
+- **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
@@ -55,9 +58,11 @@ The library includes 67+ components organized into 7 categories:
 ## 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.
@@ -65,18 +70,21 @@ The `agents.md` file provides detailed information about all components, their p
 ## 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
 ```
@@ -84,6 +92,7 @@ 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
@@ -94,46 +103,50 @@ import { MuiThemeProvider, lightTheme, darkTheme } from '@campxdev/react-bluepri
   <YourApp />
 </MuiThemeProvider>
 
-// Use dark theme  
+// Use dark theme
 <MuiThemeProvider theme={darkTheme}>
   <YourApp />
 </MuiThemeProvider>
 ```
 
 ### Form Integration
+
 Components work seamlessly together for form building:
 
 ```tsx
-import { 
-  FormWrapper, 
-  TextField, 
-  Button, 
-  FormActions 
+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 type="submit" variant="contained">
+      Submit
+    </Button>
     <Button variant="outlined">Cancel</Button>
   </FormActions>
-</FormWrapper>
+</FormWrapper>;
 ```
 
 ### Layout Structure
+
 Build consistent application layouts:
 
 ```tsx
-import { 
-  AppHeader, 
-  Sidebar, 
-  PageContent, 
-  PageHeader 
+import {
+  AppHeader,
+  Sidebar,
+  PageContent,
+  PageHeader,
 } from '@campxdev/react-blueprint';
 
 <div className="app">
-  <AppHeader 
+  <AppHeader
     userFullName="John Doe"
     clientName="CampX"
     collapsed={sidebarCollapsed}
@@ -142,12 +155,10 @@ import {
     <Sidebar />
     <main>
       <PageHeader title="Dashboard" />
-      <PageContent>
-        {/* Your page content */}
-      </PageContent>
+      <PageContent>{/* Your page content */}</PageContent>
     </main>
   </div>
-</div>
+</div>;
 ```
 
 ## Contributing
@@ -156,4 +167,4 @@ This is a private CampX component library. For internal development guidelines a
 
 ## License
 
-Private - CampX Internal Use Only
+Private - CampX Internal Use Only

package/dist/README.md

@@ -1,12 +1,15 @@
 # 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.
+> ⚠️ **IMPORTANT:** Starting from version **3.x.y**, this library is built on **shadcn/ui** with all Material-UI (MUI) dependencies completely removed. Please ensure you are using the 2.x.y version or higher. Previous versions (2.x.y) still depend on Material-UI.
+
+A comprehensive React component library built with TypeScript and shadcn/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
@@ -45,7 +48,7 @@ function App() {
 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  
+- **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
@@ -55,9 +58,11 @@ The library includes 67+ components organized into 7 categories:
 ## 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.
@@ -65,18 +70,21 @@ The `agents.md` file provides detailed information about all components, their p
 ## 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
 ```
@@ -84,6 +92,7 @@ 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
@@ -94,46 +103,50 @@ import { MuiThemeProvider, lightTheme, darkTheme } from '@campxdev/react-bluepri
   <YourApp />
 </MuiThemeProvider>
 
-// Use dark theme  
+// Use dark theme
 <MuiThemeProvider theme={darkTheme}>
   <YourApp />
 </MuiThemeProvider>
 ```
 
 ### Form Integration
+
 Components work seamlessly together for form building:
 
 ```tsx
-import { 
-  FormWrapper, 
-  TextField, 
-  Button, 
-  FormActions 
+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 type="submit" variant="contained">
+      Submit
+    </Button>
     <Button variant="outlined">Cancel</Button>
   </FormActions>
-</FormWrapper>
+</FormWrapper>;
 ```
 
 ### Layout Structure
+
 Build consistent application layouts:
 
 ```tsx
-import { 
-  AppHeader, 
-  Sidebar, 
-  PageContent, 
-  PageHeader 
+import {
+  AppHeader,
+  Sidebar,
+  PageContent,
+  PageHeader,
 } from '@campxdev/react-blueprint';
 
 <div className="app">
-  <AppHeader 
+  <AppHeader
     userFullName="John Doe"
     clientName="CampX"
     collapsed={sidebarCollapsed}
@@ -142,12 +155,10 @@ import {
     <Sidebar />
     <main>
       <PageHeader title="Dashboard" />
-      <PageContent>
-        {/* Your page content */}
-      </PageContent>
+      <PageContent>{/* Your page content */}</PageContent>
     </main>
   </div>
-</div>
+</div>;
 ```
 
 ## Contributing
@@ -156,4 +167,4 @@ This is a private CampX component library. For internal development guidelines a
 
 ## License
 
-Private - CampX Internal Use Only
+Private - CampX Internal Use Only