Add ModalDialog component and useModalDialog hook

[gciotola]

Closes commercelayer/issues-app#588

• adapt toast to api error message shape

Summary

Introduces a reusable hook (useModalDialog), designed for delete and confirm flows that must prevent any other interaction until the user explicitly chooses.

---

Changes

Modal (extended, backward-compatible)

Two optional props added to ModalProps:

• closeOnBackdrop?: boolean — defaults to true; set to false to prevent backdrop-click dismissal
• closeOnEscape?: boolean — defaults to true; set to false to prevent Escape-key dismissal

ModalDialog (new composite component not exported - only to be used internally)

A blocking dialog built on Modal with a fixed layout: icon → title → optional description → confirm button → Cancel button.

Props:

Prop	Type	Required	Description
show	boolean	✓	Controls visibility
onClose	() => void	✓	Called on close
icon	IconProps["name"]	✓	Icon displayed at top
title	string	✓	Main dialog message
description	ReactNode	—	Optional secondary content
confirm	ModalDialogConfirmProps	✓	{ label, variant?, onClick: () => Promise }
errorMessage	string | (err) => string	—	Toast message on rejection (defaults to generic)
successMessage	string	—	Toast message on success

Behaviour:

• Backdrop click and Escape are disabled — only Confirm/Cancel can dismiss
• Both buttons are disabled while the async confirm is in-flight
• Always closes on settle (success or error)
• On error: fires an error toast then closes

useModalDialog (new hook)

Follows the existing useOverlay family convention.

const { show, ModalDialog } = useModalDialog()

return (
  <>
    <Button onClick={show}>Delete</Button>
    <ModalDialog
      icon="trash"
      title="Delete item"
      description="Are you sure? This cannot be undone."
      confirm={{ label: "Delete", variant: "danger", onClick: handleDelete }}
    />
  </>
)

Stories

• Modal.stories.tsx — removed AsDialog story (superseded)
• useModalDialog.stories.tsx (new) — three stories: ConfirmAction, DeleteAction, AsyncError

[netlify]

✅ Deploy Preview for commercelayer-app-elements ready!

Name	Link
🔨 Latest commit	5b3bd60
🔍 Latest deploy log	https://app.netlify.com/projects/commercelayer-app-elements/deploys/69f37a62d233ee00080f14a0
😎 Deploy Preview	https://deploy-preview-1104--commercelayer-app-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.