drag-drop-custom

Drag-Drop-Custom

A powerful, feature-rich drag-and-drop dashboard builder for React applications. This library provides a complete solution for creating interactive dashboards with customizable widgets, real-time data visualization, and intuitive drag-and-drop functionality.

🚀 Features

• Complete Dashboard Builder: Full-featured dashboard creation with drag-and-drop interface
• Rich Widget Library: 10+ pre-built widgets including charts, metrics, and status displays
• State Management: Built-in Zustand stores for dashboard and graph state management
• UI Components: Complete shadcn/ui component library included
• TypeScript Support: Full TypeScript definitions included
• Responsive Design: Mobile-first responsive design
• Real-time Updates: Support for real-time data updates
• Template System: Save and load dashboard templates
• Undo/Redo: Built-in undo/redo functionality
• Export/Import: Export and import dashboard configurations
• Theme Support: Built-in dark/light mode support

📦 Installation

npm install drag-drop-custom
# or
yarn add drag-drop-custom
# or
pnpm add drag-drop-custom

🎯 Quick Start

import React from 'react';
import { DashboardBuilder } from 'drag-drop-custom';

function App() {
  return (
    <div className="h-screen">
      <DashboardBuilder />
    </div>
  );
}

export default App;

🎨 Styling Setup

The library includes all necessary CSS. You just need to import the styles:

import 'drag-drop-custom/styles.css';

Or if you're using Tailwind CSS, add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/drag-drop-custom/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of your config
}

📚 Core Components

DashboardBuilder

The main dashboard builder component that provides the complete interface with all providers included.

import { DashboardBuilder } from 'drag-drop-custom';

<DashboardBuilder />

CoreDashboardBuilder

The core component without providers (if you want to add your own providers).

import { CoreDashboardBuilder } from 'drag-drop-custom';

<CoreDashboardBuilder />

🧩 Available Widgets

Chart Widgets

• BarChartWidget: Bar chart visualization
• LineChartWidget: Line chart with multiple series
• AreaChartWidget: Area chart for trend visualization

Metric Widgets

• MetricsWidget: Key performance indicators
• OEEWidget: Overall Equipment Effectiveness
• EnergyWidget: Energy consumption metrics
• TemperatureWidget: Temperature monitoring

Status Widgets

• MachineStatusWidget: Machine status indicators
• AlertsWidget: Alert and notification display
• ProductionCounterWidget: Production count tracking

🎨 UI Components

The library includes a complete set of UI components based on shadcn/ui:

import { 
  Button, 
  Card, 
  Dialog, 
  Input, 
  Table,
  Tabs,
  Toast,
  Tooltip 
} from 'drag-drop-custom';

// Use any UI component
<Button variant="default" size="lg">
  Click me
</Button>

<Card>
  <CardHeader>
    <CardTitle>Dashboard</CardTitle>
  </CardHeader>
  <CardContent>
    Your content here
  </CardContent>
</Card>

🔧 State Management

Dashboard Store

import { useDashboardStore } from 'drag-drop-custom';

function MyComponent() {
  const { widgets, addWidget, removeWidget, updateWidget } = useDashboardStore();
  
  return (
    <div>
      {widgets.map(widget => (
        <div key={widget.id}>{widget.type}</div>
      ))}
    </div>
  );
}

Graph Store

import { useGraphStore } from 'drag-drop-custom';

function GraphComponent() {
  const { nodes, edges, addNode, addEdge } = useGraphStore();
  
  return (
    <div>
      {/* Your graph visualization */}
    </div>
  );
}

🚀 Examples

Basic Dashboard

import React from 'react';
import { DashboardBuilder } from 'drag-drop-custom';
import 'drag-drop-custom/styles.css';

export default function BasicDashboard() {
  return (
    <div className="h-screen w-full">
      <DashboardBuilder />
    </div>
  );
}

Custom Dashboard with Initial Data

import React, { useState } from 'react';
import { DashboardCanvas, WidgetSidebar } from 'drag-drop-custom';
import 'drag-drop-custom/styles.css';

export default function CustomDashboard() {
  const [widgets, setWidgets] = useState([
    {
      id: '1',
      type: 'metrics',
      position: { x: 0, y: 0, w: 3, h: 2 },
      data: { title: 'Total Users', value: 1234 }
    }
  ]);

  return (
    <div className="flex h-screen">
      <WidgetSidebar onWidgetAdd={(widget) => setWidgets([...widgets, widget])} />
      <DashboardCanvas 
        widgets={widgets}
        onWidgetChange={setWidgets}
      />
    </div>
  );
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions, please:

• Check the documentation
• Search existing issues
• Create a new issue

🔄 Changelog

v2.0.0

• Complete rewrite with improved architecture
• Added comprehensive widget library
• Enhanced state management
• Improved TypeScript support
• Better responsive design
• Added template system
• Fixed CSS and styling issues
• Added complete theme support
• Self-contained with all dependencies