pixelize-design-library 2.2.33 → 2.2.34

package/README.md

@@ -1,64 +1,240 @@
-# How to Consume This NPM Library
+# Pixelize Design Library
 
-This guide will help you integrate and use the NPM library in your project.
+A comprehensive React component library built with TypeScript, providing a rich set of UI components for modern web applications.
+
+## Features
+
+- 🎨 **Modern Design System** - Consistent and beautiful components
+- 📱 **Responsive** - Mobile-first design approach
+- ♿ **Accessible** - Built with accessibility in mind
+- 🔧 **TypeScript** - Full TypeScript support
+- 🎯 **Customizable** - Easy theming and customization
+- 📦 **Tree-shakable** - Import only what you need
 
 ## Prerequisites
 
 Before you begin, ensure you have the following installed:
 
-- Node.js (preferably the latest LTS version)
-- npm (comes with Node.js)
+- Node.js (v16 or higher)
+- npm (v7 or higher) or yarn
+- React (v16.8 or higher)
 
 ## Installation
 
-To use this library in your project, you need to install it via npm. Run the following command in your project directory:
+Install the library and its peer dependencies:
 
 ```bash
-npm install pixelize-design-library
+npm install pixelize-design-library pixelize-authenticator
+```
+
+or with yarn:
 
+```bash
+yarn add pixelize-design-library pixelize-authenticator
 ```
 
-install before make a setup pixelize-authenticator library
+## Quick Start
+
+```tsx
+import React from 'react';
+import { Button, Card, TextInput } from 'pixelize-design-library';
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <TextInput placeholder="Enter your name" />
+        <Button variant="primary">Submit</Button>
+      </Card>
+    </div>
+  );
+}
+
+export default App;
+```
 
 ## Components
 
-PixelizeDesign Library Components Are Below
-
-- Accordion,
-- AlertDialog, \* New
-- ApexBarChart,
-- ApexPieChart,
-- Breadcrumbs,
-- Button,
-- ButtonGroupIcon,
-- Card,
-- Checkbox,
-- DatePicker,
-- Dropdown,
-- Editor,
-- InputTextArea,
-- Loading,
-- Modal,
-- MultiSelect,
-- NavigationBar,
-- NoteTextArea,
-- NumberInput,
-- PinInput,
-- ProfileCard,
-- ProfilePhotoViewer,
-- ProgressBar,
-- RadioButton,
-- RadioButtonGroup,
-- Search,
-- Select,
-- SearchSelect,
-- SideBar,
-- Skeletons,
-- Switch,
-- Table,
-- TextInput,
-- Timeline,
-- Toaster,
-  - useToaster,
-- ToolTip,
-- VerifyEmailOtp
+### Layout & Navigation
+- **Accordion** - Collapsible content sections
+- **Breadcrumbs** - Navigation breadcrumb trail
+- **Card** - Container component for content
+- **Modal** - Overlay dialog component
+- **NavigationBar** - Main navigation component
+- **SideBar** - Side navigation panel
+
+### Form Controls
+- **Button** - Interactive button component
+- **ButtonGroupIcon** - Icon-based button group
+- **Checkbox** - Checkbox input control
+- **DatePicker** - Date selection component
+- **Dropdown** - Dropdown selection component
+- **MultiSelect** - Multi-selection dropdown
+- **NumberInput** - Numeric input field
+- **PinInput** - PIN/OTP input component
+- **RadioButton** - Radio button input
+- **RadioButtonGroup** - Group of radio buttons
+- **Search** - Search input component
+- **SearchSelect** - Searchable select dropdown
+- **Select** - Single selection dropdown
+- **Switch** - Toggle switch component
+- **TextInput** - Text input field
+- **InputTextArea** - Multi-line text input
+- **NoteTextArea** - Rich text editor
+
+### Data Display
+- **Table** - Data table component
+- **Timeline** - Timeline visualization
+- **Skeletons** - Loading skeleton components
+- **ProgressBar** - Progress indicator
+
+### Charts & Visualization
+- **ApexBarChart** - Bar chart component
+- **ApexPieChart** - Pie chart component
+
+### Feedback & Status
+- **AlertDialog** - Alert dialog component *(New)*
+- **Loading** - Loading spinner component
+- **Toaster** - Toast notification system
+  - **useToaster** - Hook for toast management
+- **ToolTip** - Tooltip component
+
+### User & Profile
+- **ProfileCard** - User profile card
+- **ProfilePhotoViewer** - Profile photo viewer
+- **VerifyEmailOtp** - Email verification component
+
+### Editor
+- **Editor** - Rich text editor component
+
+## Usage Examples
+
+### Basic Button Usage
+
+```tsx
+import { Button } from 'pixelize-design-library';
+
+function MyComponent() {
+  return (
+    <div>
+      <Button variant="primary" size="medium">
+        Primary Button
+      </Button>
+      <Button variant="secondary" size="large">
+        Secondary Button
+      </Button>
+    </div>
+  );
+}
+```
+
+### Form with Validation
+
+```tsx
+import { TextInput, Button, Card } from 'pixelize-design-library';
+
+function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <Card>
+      <TextInput
+        label="Email"
+        type="email"
+        value={email}
+        onChange={setEmail}
+        required
+      />
+      <TextInput
+        label="Password"
+        type="password"
+        value={password}
+        onChange={setPassword}
+        required
+      />
+      <Button variant="primary" type="submit">
+        Login
+      </Button>
+    </Card>
+  );
+}
+```
+
+### Data Table
+
+```tsx
+import { Table } from 'pixelize-design-library';
+
+const columns = [
+  { key: 'name', title: 'Name' },
+  { key: 'email', title: 'Email' },
+  { key: 'role', title: 'Role' }
+];
+
+const data = [
+  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
+];
+
+function DataTable() {
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      pagination
+      searchable
+    />
+  );
+}
+```
+
+## Theming
+
+The library supports custom theming through CSS variables:
+
+```css
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+  --info-color: #17a2b8;
+}
+```
+
+## TypeScript Support
+
+All components are built with TypeScript and include full type definitions:
+
+```tsx
+import { ButtonProps } from 'pixelize-design-library';
+
+interface CustomButtonProps extends ButtonProps {
+  customProp?: string;
+}
+
+function CustomButton({ customProp, ...props }: CustomButtonProps) {
+  return <Button {...props} />;
+}
+```
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Support
+
+For support and questions:
+- 📧 Email: support@pixelize.com
+- 📖 Documentation: [docs.pixelize.com](https://docs.pixelize.com)
+- 🐛 Issues: [GitHub Issues](https://github.com/pixelize/design-library/issues)
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a list of changes and updates.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.33",
+  "version": "2.2.34",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",