tessl/npm-ra-ui-materialui

UI Components for react-admin with Material UI styling and functionality

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Buttons

Name: tessl/npm-ra-ui-materialui
Author: tessl

Comprehensive set of action buttons with Material UI styling for various admin operations in react-admin applications.

Capabilities

Basic Button Components

Foundational button components with Material UI styling.

/**
 * Base button component with Material UI styling and theming
 * @param props - Button configuration props
 * @returns Styled button component
 */
function Button(props: ButtonProps): ReactElement;

interface ButtonProps {
  /** Button label text */
  label?: string;
  /** Button variant */
  variant?: 'text' | 'outlined' | 'contained';
  /** Button color */
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
  /** Click handler */
  onClick?: () => void;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button size */
  size?: 'small' | 'medium' | 'large';
  /** Button icon */
  startIcon?: ReactElement;
  /** End icon */
  endIcon?: ReactElement;
  /** Full width styling */
  fullWidth?: boolean;
  /** Button type */
  type?: 'button' | 'submit' | 'reset';
}

Form Action Buttons

Buttons specifically designed for form operations.

/**
 * Save button for forms with loading state and validation
 * @param props - SaveButton configuration props
 * @returns Save button with form integration
 */
function SaveButton(props: SaveButtonProps): ReactElement;

/**
 * Delete button for forms with confirmation dialog
 * @param props - DeleteButton configuration props
 * @returns Delete button with confirmation
 */
function DeleteButton(props: DeleteButtonProps): ReactElement;

interface SaveButtonProps {
  /** Button label text */
  label?: string;
  /** Redirect location after save */
  redirect?: string | false;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button variant */
  variant?: 'text' | 'outlined' | 'contained';
  /** Button color */
  color?: 'primary' | 'secondary';
  /** Transform function for save data */
  transform?: (data: any) => any;
  /** Click handler */
  onClick?: () => void;
  /** Button icon */
  icon?: ReactElement;
  /** Whether to submit on enter key */
  submitOnEnter?: boolean;
}

interface DeleteButtonProps {
  /** Button label text */
  label?: string;
  /** Redirect location after delete */
  redirect?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Confirmation dialog title */
  confirmTitle?: string;
  /** Confirmation dialog content */
  confirmContent?: string;
  /** Button color */
  color?: 'primary' | 'error';
  /** Mutation mode */
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
}

Navigation Buttons

Buttons for navigation between different views and records.

/**
 * Edit button for navigating to edit view
 * @param props - EditButton configuration props
 * @returns Edit navigation button
 */
function EditButton(props: EditButtonProps): ReactElement;

/**
 * Show button for navigating to show view
 * @param props - ShowButton configuration props
 * @returns Show navigation button
 */
function ShowButton(props: ShowButtonProps): ReactElement;

/**
 * Create button for navigating to create view
 * @param props - CreateButton configuration props
 * @returns Create navigation button
 */
function CreateButton(props: CreateButtonProps): ReactElement;

/**
 * Clone button for duplicating existing records
 * @param props - CloneButton configuration props
 * @returns Clone navigation button
 */
function CloneButton(props: CloneButtonProps): ReactElement;

interface EditButtonProps {
  /** Button label text */
  label?: string;
  /** Record to edit */
  record?: any;
  /** Resource name */
  resource?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
}

interface ShowButtonProps {
  /** Button label text */
  label?: string;
  /** Record to show */
  record?: any;
  /** Resource name */
  resource?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
}

interface CreateButtonProps {
  /** Button label text */
  label?: string;
  /** Resource name */
  resource?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button variant */
  variant?: 'text' | 'outlined' | 'contained';
  /** Button icon */
  icon?: ReactElement;
}

interface CloneButtonProps {
  /** Button label text */
  label?: string;
  /** Record to clone */
  record?: any;
  /** Resource name */
  resource?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
}

Utility Buttons

Buttons for common administrative operations.

/**
 * Export button for data export functionality
 * @param props - ExportButton configuration props
 * @returns Export button with download functionality
 */
function ExportButton(props: ExportButtonProps): ReactElement;

/**
 * Refresh button for reloading data
 * @param props - RefreshButton configuration props
 * @returns Refresh button with data reload
 */
function RefreshButton(props: RefreshButtonProps): ReactElement;

/**
 * Update button for record updates
 * @param props - UpdateButton configuration props
 * @returns Update button with mutation
 */
function UpdateButton(props: UpdateButtonProps): ReactElement;

interface ExportButtonProps {
  /** Button label text */
  label?: string;
  /** Export format */
  format?: 'csv' | 'json' | 'xlsx';
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
  /** Export filename */
  filename?: string;
  /** Data transform function for export */
  transform?: (data: any[]) => any[];
}

interface RefreshButtonProps {
  /** Button label text */
  label?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
}

interface UpdateButtonProps {
  /** Button label text */
  label?: string;
  /** Data to update */
  data?: any;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
  /** Mutation mode */
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
}

Bulk Operation Buttons

Buttons for operations on multiple selected records.

/**
 * Bulk delete button for deleting multiple records
 * @param props - BulkDeleteButton configuration props
 * @returns Bulk delete button with confirmation
 */
function BulkDeleteButton(props: BulkDeleteButtonProps): ReactElement;

/**
 * Bulk export button for exporting multiple records
 * @param props - BulkExportButton configuration props
 * @returns Bulk export button with download
 */
function BulkExportButton(props: BulkExportButtonProps): ReactElement;

interface BulkDeleteButtonProps {
  /** Button label text */
  label?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Confirmation dialog title */
  confirmTitle?: string;
  /** Confirmation dialog content */
  confirmContent?: string;
  /** Button icon */
  icon?: ReactElement;
  /** Mutation mode */
  mutationMode?: 'optimistic' | 'pessimistic' | 'undoable';
}

interface BulkExportButtonProps {
  /** Button label text */
  label?: string;
  /** Export format */
  format?: 'csv' | 'json' | 'xlsx';
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button icon */
  icon?: ReactElement;
  /** Export filename */
  filename?: string;
}

Menu and Navigation

Buttons for menu systems and navigation.

/**
 * Menu item link component for navigation menus
 * @param props - MenuItemLink configuration props
 * @returns Menu item with navigation link
 */
function MenuItemLink(props: MenuItemLinkProps): ReactElement;

/**
 * Button group component for organizing related buttons
 * @param props - ButtonGroup configuration props
 * @returns Grouped buttons container
 */
function ButtonGroup(props: ButtonGroupProps): ReactElement;

interface MenuItemLinkProps {
  /** Navigation target path */
  to: string;
  /** Menu item label */
  primaryText: string;
  /** Left icon component */
  leftIcon?: ReactElement;
  /** Click handler */
  onClick?: () => void;
  /** Dense styling */
  dense?: boolean;
  /** Whether item is selected */
  selected?: boolean;
}

interface ButtonGroupProps {
  /** Child button components */
  children: ReactNode;
  /** Group variant */
  variant?: 'text' | 'outlined' | 'contained';
  /** Group color */
  color?: 'primary' | 'secondary';
  /** Group size */
  size?: 'small' | 'medium' | 'large';
  /** Group orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Whether buttons are disabled */
  disabled?: boolean;
}

Usage Examples:

import { 
  Button, 
  SaveButton, 
  DeleteButton, 
  EditButton,
  ExportButton,
  BulkDeleteButton 
} from "ra-ui-materialui";
import { Save, Delete, Edit, Download } from "@mui/icons-material";

// Basic button
<Button 
  label="Custom Action" 
  variant="contained" 
  color="primary"
  onClick={handleClick}
  startIcon={<Save />}
/>

// Form save button
<SaveButton 
  label="Save Changes" 
  redirect="list"
  transform={data => ({ ...data, updatedAt: new Date() })}
/>

// Delete with confirmation
<DeleteButton 
  confirmTitle="Delete Confirmation"
  confirmContent="Are you sure you want to delete this item?"
  mutationMode="undoable"
/>

// Export button
<ExportButton 
  format="csv"
  filename="users-export"
  icon={<Download />}
/>

Types

type MutationMode = 'optimistic' | 'pessimistic' | 'undoable';

type RedirectTo = string | false | Function;

interface ConfirmDialogProps {
  title?: string;
  content?: string;
  confirm?: string;
  cancel?: string;
}

Install with Tessl CLI