@metadiv-studio/delete-dialog

A React component library that provides a reusable delete confirmation dialog with context-based state management. Built with TypeScript, React, and Tailwind CSS.

🚀 Installation

npm i @metadiv-studio/delete-dialog

📋 Description

This package provides a comprehensive delete confirmation dialog solution for React applications. It includes:

• DeleteDialogProvider: A context provider that manages the global state of delete dialogs
• useDeleteDialog: A React hook to trigger delete dialogs from anywhere in your component tree
• Customizable confirmation messages: Support for both default and custom confirmation messages
• Loading states: Built-in loading state management during delete operations
• Internationalization: Integrated with @metadiv-studio/translation for multi-language support
• Accessible: Built with proper dialog semantics and keyboard navigation

The component leverages other Metadiv Studio packages including @metadiv-studio/button, @metadiv-studio/dialog, and @metadiv-studio/translation for a consistent design system.

🛠️ Usage

1. Setup the Provider

First, wrap your application with the DeleteDialogProvider:

import React from 'react';
import { DeleteDialogProvider } from '@metadiv-studio/delete-dialog';

function App() {
  return (
    <DeleteDialogProvider>
      {/* Your app content */}
      <YourComponent />
    </DeleteDialogProvider>
  );
}

export default App;

2. Use the Hook in Components

Use the useDeleteDialog hook to trigger delete confirmations:

import React from 'react';
import { useDeleteDialog } from '@metadiv-studio/delete-dialog';
import { Button } from '@metadiv-studio/button';

function UserList() {
  const { openDeleteDialog } = useDeleteDialog();

  const handleDeleteUser = async (userId: string) => {
    // Your delete logic here
    await fetch(`/api/users/${userId}`, { method: 'DELETE' });
    console.log(`User ${userId} deleted`);
  };

  return (
    <div>
      <Button 
        variant="destructive" 
        onClick={() => openDeleteDialog(() => handleDeleteUser('123'))}
      >
        Delete User
      </Button>
    </div>
  );
}

3. Custom Confirmation Messages

You can provide custom messages for specific delete operations:

import React from 'react';
import { useDeleteDialog } from '@metadiv-studio/delete-dialog';

function ProjectManager() {
  const { openDeleteDialog } = useDeleteDialog();

  const deleteProject = async () => {
    await fetch('/api/project/delete', { method: 'DELETE' });
  };

  const handleDeleteProject = () => {
    openDeleteDialog(
      deleteProject,
      <div className="flex items-center gap-2">
        <span>⚠️</span>
        <span>This will permanently delete the project and all associated data. This action cannot be undone.</span>
      </div>
    );
  };

  return (
    <Button variant="destructive" onClick={handleDeleteProject}>
      Delete Project
    </Button>
  );
}

4. Multiple Delete Operations

Handle different types of delete operations with specific messages:

import React from 'react';
import { useDeleteDialog } from '@metadiv-studio/delete-dialog';

function DataManager() {
  const { openDeleteDialog } = useDeleteDialog();

  const deleteFile = async (fileId: string) => {
    await fetch(`/api/files/${fileId}`, { method: 'DELETE' });
  };

  const deleteFolder = async (folderId: string) => {
    await fetch(`/api/folders/${folderId}`, { method: 'DELETE' });
  };

  return (
    <div className="space-y-4">
      {/* Simple delete with default message */}
      <Button 
        variant="destructive" 
        onClick={() => openDeleteDialog(() => deleteFile('file-123'))}
      >
        Delete File
      </Button>

      {/* Delete with custom warning */}
      <Button 
        variant="destructive" 
        onClick={() => openDeleteDialog(
          () => deleteFolder('folder-456'),
          "This folder contains 15 files. All files will be permanently deleted."
        )}
      >
        Delete Folder
      </Button>
    </div>
  );
}

🎯 API Reference

DeleteDialogProvider

A React context provider that should wrap your application.

Props:

• children: React.ReactNode - Your application content

useDeleteDialog

A React hook that provides access to the delete dialog functionality.

Returns:

• openDeleteDialog: (onDelete: () => Promise<void>, message?: React.ReactNode) => void

Parameters:

• onDelete: () => Promise<void> - An async function that performs the delete operation
• message?: React.ReactNode - Optional custom message to display in the dialog (defaults to translated "Are you sure you want to delete this?")

🔧 Configuration

Tailwind CSS

Ensure your tailwind.config.js includes the package path:

module.exports = {
  content: [
    // ... your other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

Dependencies

This package requires the following peer dependencies:

{
  "react": "^18",
  "react-dom": "^18"
}

And includes these dependencies:

• @metadiv-studio/button - For consistent button styling
• @metadiv-studio/dialog - For the modal dialog functionality
• @metadiv-studio/translation - For internationalization support

🌍 Internationalization

The component uses @metadiv-studio/translation for internationalization. It expects the following translation keys:

• delete - Dialog title
• cancel - Cancel button text
• are you sure you want to delete this? - Default confirmation message

🎨 Styling

The component uses Tailwind CSS classes and integrates with the Metadiv Studio design system. The dialog includes:

• Responsive design
• Dark mode support
• Consistent spacing and typography
• Loading states with disabled buttons
• Destructive styling for the delete button

📝 TypeScript Support

Full TypeScript support is included with proper type definitions for all components and hooks.

interface IContext {
  openDeleteDialog: (onDelete: () => Promise<void>, message?: React.ReactNode) => void;
}

🚀 Best Practices

1. Always handle errors: Wrap your delete functions in try-catch blocks
2. Use descriptive messages: Provide clear, actionable confirmation messages
3. Test delete operations: Ensure your delete functions work correctly before integration
4. Consider user experience: Use appropriate loading states and feedback
5. Implement proper permissions: Check user permissions before showing delete options

📦 Package Information

• Version: 0.0.0
• License: UNLICENSED
• Repository: Part of the Metadiv Studio component library ecosystem