confirm-delete-dialog.stories.tsx

Overview

This file defines Storybook stories for the ConfirmDeleteDialog React component. It serves as a configuration and demonstration for how the dialog can be used, showcasing its various states and interactive behaviors. The stories provide a visual and interactive reference for developers and designers, facilitating UI development, testing, and documentation.

The ConfirmDeleteDialog component represents a modal dialog prompting users to confirm or cancel a delete action. This story file sets up the component with example props, including customizable title text, callback handlers for confirmation and cancellation, and child elements (such as buttons) that trigger the dialog.

Detailed Explanation

Meta Configuration (meta)

• Type: Meta<typeof ConfirmDeleteDialog>

• Purpose: Describes Storybook metadata for the ConfirmDeleteDialog component.

• Key Properties:

  • title: Sets the story group title in Storybook UI (Example/ConfirmDeleteDialog).

  • component: The component being documented (ConfirmDeleteDialog).

  • parameters: Controls Storybook layout and documentation.

    • layout: 'centered': Centers the component in the preview pane.

    • docs.description.component: Markdown-formatted description of the component for docs.

  • argTypes: Controls and actions for interactive props.

    • title: Text control for dialog title.

    • hidden: Boolean control to show/hide dialog.

    • onOk, onCancel: Actions to log interaction events.

  • args: Default arguments for all stories.

    • onOk and onCancel use fn() from storybook/test to spy on callbacks.

  • tags: Metadata tags (autodocs) for automatic documentation generation.

Stories

These are individual examples showing how ConfirmDeleteDialog can be used.

Default

• Description: Basic usage with a generic "Confirm Delete" title and a destructive button to open the dialog.

• Args:

  • title: "Confirm Delete"

  • children: A <Button variant="destructive">Delete Item</Button> element, which acts as the dialog trigger.

• Parameters:

  • Includes an inline usage example in the Storybook docs, showing the component with onOk and onCancel handlers logging to the console.

Usage Example (from story docs):

import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
import { Button } from '@/components/ui/button';

<ConfirmDeleteDialog
  title="Confirm Delete"
  onOk={() => console.log('Confirmed')}
  onCancel={() => console.log('Cancelled')}
>
  <Button variant="destructive">Delete Item</Button>
</ConfirmDeleteDialog>

WithCustomTitle

• Description: Demonstrates usage with a custom confirmation message.

• Args:

  • title: "Are you sure you want to delete this file?"

  • children: A destructive button labeled "Delete File".

Important Implementation Details

• Integration with Storybook:

  • Uses @storybook/react-webpack5 to define stories.

  • The fn() utility from storybook/test spies on the callback functions, enabling interactive action logging in Storybook's actions panel.

• Component Interaction:

  • The ConfirmDeleteDialog component is wrapped around a child button element that triggers the dialog.

  • Props such as title, onOk, onCancel, and hidden control the dialog's behavior and appearance.

• Documentation:

  • The file uses Storybook's autodocs feature and markdown descriptions to generate useful documentation inside the Storybook UI.

• Controls and Actions:

  • ArgTypes provide UI controls in Storybook, allowing users to tweak props dynamically.

  • Actions capture events for onOk and onCancel callbacks, useful for testing and debugging.

Interaction with Other Parts of the System

• ConfirmDeleteDialog Component
  Imported from @/components/confirm-delete-dialog, this is the primary UI component showcased. This story file does not implement the dialog itself but configures its stories.

• UI Button Component
  The Button component from @/components/ui/button is used as the trigger element for opening the dialog in the stories.

• Storybook Framework
  The file relies on Storybook's configuration, controls, and testing utilities (Meta, StoryObj, fn) for defining and enhancing the stories.

Visual Diagram

The diagram below illustrates the component and story structure, showing the relationship between the story file, the main ConfirmDeleteDialog component, the child Button, and the Storybook framework elements.

componentDiagram
    StorybookStories <.. ConfirmDeleteDialogStories : "Defines stories for"
    ConfirmDeleteDialogStories --> ConfirmDeleteDialog : "Imports and uses"
    ConfirmDeleteDialogStories --> Button : "Uses as child trigger"
    ConfirmDeleteDialogStories --> StorybookAPI : "Uses Meta, StoryObj, fn"
    ConfirmDeleteDialog --> UIFramework : "Renders dialog UI"
    Button --> UIFramework : "Renders button UI"

Summary

The confirm-delete-dialog.stories.tsx file is an essential part of the UI development workflow, enabling interactive documentation and testing of the ConfirmDeleteDialog React component within Storybook. It provides default and customized story examples, sets up interactive controls and actions, and integrates with Storybook's documentation system to enhance developer experience. This file does not contain the dialog implementation but focuses on showcasing usage patterns and behaviors through Storybook stories.