tessl/npm-mantine--modals

Modals manager based on Mantine components providing context-based modal state management with confirmation, context, and content modals.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Provider Setup

Name: tessl/npm-mantine--modals
Author: tessl

Modal system initialization and configuration including shared modal properties and custom modal registration.

Capabilities

ModalsProvider Component

Root provider component that manages modal state and provides context to child components.

/**
 * Root provider component for modal state management
 * @param props - Provider configuration options
 * @returns JSX element providing modal context to children
 */
function ModalsProvider(props: ModalsProviderProps): JSX.Element;

interface ModalsProviderProps {
  /** Your app components */
  children?: React.ReactNode;
  /** Predefined modals registered by key */
  modals?: Record<string, React.FC<ContextModalProps<any>>>;
  /** Shared Modal component props, applied to every modal */
  modalProps?: ModalSettings;
  /** Default confirm modal labels */
  labels?: ConfirmLabels;
}

Usage Examples:

import { MantineProvider } from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";

// Basic setup
function App() {
  return (
    <MantineProvider>
      <ModalsProvider>
        <MyAppContent />
      </ModalsProvider>
    </MantineProvider>
  );
}

// Advanced setup with configuration
function AppWithConfig() {
  return (
    <MantineProvider>
      <ModalsProvider
        modalProps={{
          centered: true,
          overlayProps: { backgroundOpacity: 0.55 },
          radius: "md",
        }}
        labels={{
          confirm: "Confirm",
          cancel: "Cancel",
        }}
        modals={{
          deleteConfirmation: DeleteConfirmationModal,
          userProfile: UserProfileModal,
        }}
      >
        <MyAppContent />
      </ModalsProvider>
    </MantineProvider>
  );
}

Provider Configuration

Configure shared modal properties and default labels that apply to all modals.

/**
 * Shared modal configuration applied to all modals
 */
interface ModalSettings extends Partial<Omit<ModalProps, 'opened'>> {
  /** Unique identifier for the modal */
  modalId?: string;
  /** Modal content */
  children?: React.ReactNode;
  /** Modal title */
  title?: React.ReactNode;
  /** Callback when modal is closed */
  onClose?: () => void;
  /** Modal size */
  size?: string | number;
  /** Whether modal is centered */
  centered?: boolean;
  /** Modal padding */
  padding?: string | number;
  /** Modal radius */
  radius?: string | number;
  /** Overlay properties */
  overlayProps?: any;
  /** Transition properties */
  transitionProps?: any;
}

/**
 * Default labels for confirmation modals
 */
interface ConfirmLabels {
  /** Text or element for confirm button */
  confirm: React.ReactNode;
  /** Text or element for cancel button */
  cancel: React.ReactNode;
}

Context Modal Registration

/**
 * Props interface for context modal components
 */
interface ContextModalProps<T extends Record<string, any> = {}> {
  /** Modal context providing access to modal methods */
  context: ModalsContextProps;
  /** Custom props passed when opening the modal */
  innerProps: T;
  /** Unique modal instance ID */
  id: string;
}

Context Modal Example:

import { ContextModalProps } from "@mantine/modals";
import { Button, Text } from "@mantine/core";

interface DeleteModalProps {
  itemName: string;
  onConfirm: () => void;
}

const DeleteConfirmationModal: React.FC<ContextModalProps<DeleteModalProps>> = ({
  context,
  id,
  innerProps,
}) => {
  const handleConfirm = () => {
    innerProps.onConfirm();
    context.closeModal(id);
  };

  return (
    <div>
      <Text mb="md">
        Are you sure you want to delete "{innerProps.itemName}"?
      </Text>
      <Button.Group>
        <Button variant="default" onClick={() => context.closeModal(id)}>
          Cancel
        </Button>
        <Button color="red" onClick={handleConfirm}>
          Delete
        </Button>
      </Button.Group>
    </div>
  );
};

// Register with provider
<ModalsProvider modals={{ deleteConfirmation: DeleteConfirmationModal }}>
  {/* Your app */}
</ModalsProvider>

Module Augmentation

Extend the type system to include your custom modals for type safety.

/**
 * Module augmentation interface for custom modal registration
 */
interface MantineModalsOverride {}

/**
 * Augment the module to include your custom modals
 */
declare module "@mantine/modals" {
  interface MantineModalsOverride {
    modals: {
      deleteConfirmation: ContextModalProps<{
        itemName: string;
        onConfirm: () => void;
      }>;
      userProfile: ContextModalProps<{
        userId: string;
      }>;
    };
  }
}