ADM-Panel

A modular admin panel component library built with React, TypeScript, and Tailwind CSS.

Installation

npm install @dev/adm-panel

Quick Start

import { AdminPanelProvider, Button, Table, useNotifications } from '@dev/adm-panel';
import '@dev/adm-panel/styles';

function App() {
  return (
    <AdminPanelProvider config={{ theme: { defaultTheme: 'system' } }}>
      <Dashboard />
    </AdminPanelProvider>
  );
}

function Dashboard() {
  const { toast } = useNotifications();

  const handleSave = () => {
    toast.success('Saved successfully!');
  };

  return <Button onClick={handleSave}>Save</Button>;
}

Features

• Base Components: Button, Input, Select, Checkbox, Dropdown, Badge, Spinner, Avatar
• Feedback Components: Toast, Modal, ConfirmModal, NotificationCenter
• Data Components: Table with sorting, filtering, and pagination
• Form Components: Form, FormField, validators, useForm hook
• Media Components: MediaGallery, FileUpload, BulkActionsBar
• Theming: Light/Dark mode with CSS variables
• TypeScript: Full type support

Components

Base

| Component | Description | |-----------|-------------| | Button | Primary, secondary, outline, ghost, danger variants. Sizes: sm, md, lg. Loading state. | | Input | Text, password, search inputs with error and disabled states. | | Select | Styled dropdown select with options support. | | Checkbox | With label and indeterminate state for bulk selection. | | Dropdown | Menu with keyboard navigation. | | Badge | Status indicators with color variants. | | Spinner | Loading indicator. | | Avatar | Image or initials with multiple sizes. |

Feedback

| Component | Description | |-----------|-------------| | Toast | Ephemeral notifications (success, error, warning, info). | | ToastContainer | Container for rendering toasts. | | Modal | Overlay modal with ESC and click-outside close. | | ConfirmModal | Pre-configured confirmation modal. | | NotificationCenter | Notification history panel. | | NotificationBell | Bell icon with unread count badge. |

Data

| Component | Description | |-----------|-------------| | Table | Full-featured table with headers, body, pagination. | | useTable | Hook for sorting, filtering, and pagination. |

Forms

| Component | Description | |-----------|-------------| | Form | Form wrapper with submit handling. | | FormField | Field with label, input, and error message. | | useForm | Hook for form state and validation. | | validators | Required, email, minLength, maxLength, pattern, custom. |

Media

| Component | Description | |-----------|-------------| | MediaGallery | Grid/list view gallery with selection. | | FileUpload | Drag & drop file upload. | | BulkActionsBar | Contextual actions bar for bulk operations. |

Hooks

• useTheme() - Access and change theme
• useToast() - Show toast notifications
• useNotifications() - Manage notifications
• useTable() - Table sorting, filtering, pagination
• useForm() - Form state and validation
• useBulkSelection() - Bulk selection management
• useFileUpload() - File upload with drag & drop

Theming

The library uses CSS variables for theming. Override them to customize:

:root {
  --adm-color-primary: #3b82f6;
  --adm-bg-primary: #ffffff;
  --adm-text-primary: #111827;
  /* ... */
}

[data-theme='dark'] {
  --adm-bg-primary: #111827;
  --adm-text-primary: #f9fafb;
  /* ... */
}

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Run Storybook
npm run storybook

# Run tests
npm test

# Build
npm run build

License

MIT