MUI Dialog

A reusable dialog component for React applications built with Material-UI (MUI).

Documentation

For detailed documentation and examples, visit our Storybook.

Installation

# Using npm
npm install mui-dialog

# Using yarn
yarn add mui-dialog

Features

• Built with Material-UI (MUI) components
• TypeScript support
• Multiple dialog types:
  • Information
  • Confirmation
  • Input
• Customizable sizes and layouts
• Support for primary, secondary, and tertiary actions
• Responsive design
• Theme customization

Usage

import { MuiDialog } from "mui-dialog";
import { MODAL_TYPES, INFORMATION_SUBTYPES } from "mui-dialog";

// Basic Information Dialog
const MyComponent = () => {
  const [open, setOpen] = useState(false);

  return (
    <MuiDialog
      type={MODAL_TYPES.INFORMATION}
      subtype={INFORMATION_SUBTYPES.ACKNOWLEDGEMENT}
      open={open}
      onClose={() => setOpen(false)}
      title="Dialog Title"
      description="This is a dialog description"
      actions={{
        primaryCtaTitle: "Confirm",
        onPrimaryCtaClick: () => {
          // Handle primary action
          setOpen(false);
        },
      }}
    >
      {/* Optional content */}
    </MuiDialog>
  );
};

Props

Modal Types

Type	Description	Subtypes	Allowed Sizes
information	For displaying information to users	acknowledgement, progress, passive	Varies by subtype
confirmation	For user confirmations and decisions	default, destructive, nested	small only
input	For collecting user input	default, destructive	All sizes

Subtype Details

Information Modal Subtypes

Subtype	Description	Allowed Sizes	Dismissible
acknowledgement	For simple acknowledgements	small	full
progress	For showing progress or status updates	small, medium, large	partial
passive	For passive information display	medium, large, extraLarge	full

Confirmation Modal Subtypes

Subtype	Description	Allowed Sizes	Dismissible
default	Standard confirmation	small	partial
destructive	For destructive actions	small	partial
nested	For nested confirmations	small	partial

Input Modal Subtypes

Subtype	Description	Allowed Sizes	Dismissible
default	Standard input	All sizes	partial
destructive	For destructive input actions	All sizes	partial

Props Reference

Base Props

Prop	Type	Required	Default	Description
type	"information" | "confirmation" | "input"	Yes	-	Type of the modal
subtype	string	Yes	-	Subtype of the modal
open	boolean	Yes	-	Controls modal visibility
onClose	() => void	Yes	-	Callback when modal is closed
title	string | React.ReactNode	No	-	Modal title
subTitle	string | React.ReactNode	No	-	Modal subtitle
description	string | React.ReactNode	No	-	Modal description
children	React.ReactNode	No	-	Additional content
size	"small" | "medium" | "large" | "extraLarge"	No	"small"	Modal size
wrapperClassName	string	No	-	Custom class for modal wrapper
showCloseIcon	boolean	No	true	Show/hide close icon
showDivider	boolean	No	true	Show/hide divider
showActions	boolean	No	true	Show/hide action buttons

Action Props

Prop	Type	Required	Default	Description
primaryCtaTitle	string	No	-	Primary button text
secondaryCtaTitle	string	No	-	Secondary button text
tertiaryCtaTitle	string	No	-	Tertiary button text
isPrimaryCtaLoading	boolean	No	false	Show loading state for primary button
isSecondaryCtaLoading	boolean	No	false	Show loading state for secondary button
isTertiaryCtaLoading	boolean	No	false	Show loading state for tertiary button
isPrimaryCtaDisabled	boolean	No	isSecondaryCtaLoading or isTertiaryCtaLoading	Disable primary button
isSecondaryCtaDisabled	boolean	No	isPrimaryCtaLoading or isTertiaryCtaLoading	Disable secondary button
isTertiaryCtaDisabled	boolean	No	isPrimaryCtaLoading or isSecondaryCtaLoading	Disable tertiary button
onPrimaryCtaClick	() => void	No	-	Primary button click handler
onSecondaryCtaClick	() => void	No	-	Secondary button click handler
onTertiaryCtaClick	() => void	No	-	Tertiary button click handler
tertiaryCtaStartIcon	React.ReactNode	No	-	Icon for tertiary button

Size Breakpoints

Size	Breakpoint	Max Width
small	xs	444px
medium	sm	600px
large	md	900px
extraLarge	lg	1200px

Usage Example

import { MuiDialog } from "mui-dialog";

// Input Modal
<MuiDialog
  type="input"
  subtype="default"
  open={true}
  onClose={() => {}}
  title="Input Required"
  description="Please provide your input"
  size="medium"
  actions={{
    primaryCtaTitle: "Submit",
    secondaryCtaTitle: "Cancel",
    onPrimaryCtaClick: () => {},
    onSecondaryCtaClick: () => {},
  }}
>
  <input type="text" />
</MuiDialog>;

Modal Configuration

Each modal type and subtype has specific configurations for:

• Dismissibility: 'full' or 'partial'
• Allowed sizes: Array of allowed size options

These configurations are automatically enforced by the component to ensure consistent behavior across different use cases.

Development

Local Setup

# Install dependencies
yarn install

# Build package
yarn build

Local Development with yarn link

To test the package in another project locally:

1. In the mui-dialog directory:

# Build the package
yarn build

# Create a global symlink
yarn link

2. In your project directory:

# Link to the package
yarn link "mui-dialog"

3. To unlink when done:

# In your project directory
yarn unlink "mui-dialog"

# In the fe-vi-dialog directory
yarn unlink

Note: After making changes to the package, you'll need to:

1. Rebuild the package (yarn build)

License

© [Virtual Internships]