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

Field Components

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

Data display components for showing various data types with proper formatting and styling in react-admin applications.

Capabilities

Text Display Fields

Components for displaying text-based data with formatting options.

/**
 * Standard text field component for displaying string data
 * @param props - TextField configuration props
 * @returns Formatted text display component
 */
function TextField(props: TextFieldProps): ReactElement;

/**
 * Rich text field component for displaying HTML content
 * @param props - RichTextField configuration props
 * @returns HTML content display with sanitization
 */
function RichTextField(props: RichTextFieldProps): ReactElement;

interface TextFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Custom text color */
  color?: string;
  /** Text transform */
  transform?: 'uppercase' | 'lowercase' | 'capitalize';
  /** Maximum length before truncation */
  maxLength?: number;
  /** Whether to strip HTML tags */
  stripTags?: boolean;
}

interface RichTextFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Whether to strip dangerous HTML */
  stripTags?: boolean;
}

Numeric Display Fields

Components for displaying numeric data with formatting.

/**
 * Number field component with formatting options
 * @param props - NumberField configuration props
 * @returns Formatted number display component
 */
function NumberField(props: NumberFieldProps): ReactElement;

interface NumberFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Number of decimal places */
  precision?: number;
  /** Currency code for formatting */
  currency?: string;
  /** Number format options */
  options?: Intl.NumberFormatOptions;
  /** Custom format function */
  format?: (value: number) => string;
}

Date and Time Display Fields

Components for displaying date and time data with localization.

/**
 * Date field component with localization support
 * @param props - DateField configuration props
 * @returns Formatted date display component
 */
function DateField(props: DateFieldProps): ReactElement;

/**
 * DateTime field component with date and time display
 * @param props - DateTimeField configuration props
 * @returns Formatted datetime display component
 */
function DateTimeField(props: DateTimeFieldProps): ReactElement;

interface DateFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Date format string */
  format?: string;
  /** Locale for date formatting */
  locale?: string;
  /** Show relative time (e.g., '2 hours ago') */
  showTime?: boolean;
}

interface DateTimeFieldProps extends DateFieldProps {
  /** Time format string */
  timeFormat?: string;
  /** Whether to show seconds */
  showSeconds?: boolean;
}

Boolean Display Fields

Components for displaying boolean data with customizable representations.

/**
 * Boolean field component with customizable true/false display
 * @param props - BooleanField configuration props
 * @returns Boolean value display component
 */
function BooleanField(props: BooleanFieldProps): ReactElement;

interface BooleanFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Text to display for true values */
  trueText?: string;
  /** Text to display for false values */
  falseText?: string;
  /** Color for true values */
  trueColor?: string;
  /** Color for false values */
  falseColor?: string;
  /** Use icon instead of text */
  useIcon?: boolean;
}

Link and Contact Fields

Components for displaying clickable links and contact information.

/**
 * Email field component with mailto link
 * @param props - EmailField configuration props
 * @returns Email display with clickable mailto link
 */
function EmailField(props: EmailFieldProps): ReactElement;

/**
 * URL field component with clickable link
 * @param props - UrlField configuration props
 * @returns URL display with clickable link
 */
function UrlField(props: UrlFieldProps): ReactElement;

interface EmailFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Link target */
  target?: '_blank' | '_self' | '_parent' | '_top';
}

interface UrlFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Link target */
  target?: '_blank' | '_self' | '_parent' | '_top';
  /** Custom link text */
  text?: string;
}

Media Display Fields

Components for displaying images and files.

/**
 * Image field component with preview functionality
 * @param props - ImageField configuration props
 * @returns Image display with preview options
 */
function ImageField(props: ImageFieldProps): ReactElement;

/**
 * File field component with download link
 * @param props - FileField configuration props
 * @returns File display with download functionality
 */
function FileField(props: FileFieldProps): ReactElement;

interface ImageFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Image title source */
  title?: string;
  /** Image width */
  width?: number;
  /** Image height */
  height?: number;
  /** Alt text for accessibility */
  alt?: string;
}

interface FileFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** File title source */
  title?: string;
  /** Link target */
  target?: '_blank' | '_self' | '_parent' | '_top';
  /** Download filename */
  download?: string;
}

Reference Fields

Components for displaying related record data.

/**
 * Reference field component for displaying related record data
 * @param props - ReferenceField configuration props
 * @returns Related record display component
 */
function ReferenceField(props: ReferenceFieldProps): ReactElement;

/**
 * Reference array field for displaying multiple related records
 * @param props - ReferenceArrayField configuration props
 * @returns Multiple related records display component
 */
function ReferenceArrayField(props: ReferenceArrayFieldProps): ReactElement;

interface ReferenceFieldProps {
  /** Field source property name */
  source: string;
  /** Reference resource name */
  reference: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Child component to render referenced data */
  children: ReactElement;
  /** Link to referenced record */
  link?: string | Function;
}

interface ReferenceArrayFieldProps {
  /** Field source property name */
  source: string;
  /** Reference resource name */
  reference: string;
  /** Field label text */
  label?: string;
  /** Child component to render referenced data */
  children: ReactElement;
}

Specialized Fields

Specialized field components for specific use cases.

/**
 * Chip field component for displaying data as Material UI chips
 * @param props - ChipField configuration props
 * @returns Data display as chip component
 */
function ChipField(props: ChipFieldProps): ReactElement;

/**
 * Array field component for displaying array data
 * @param props - ArrayField configuration props
 * @returns Array data display component
 */
function ArrayField(props: ArrayFieldProps): ReactElement;

/**
 * Function field component for computed values
 * @param props - FunctionField configuration props
 * @returns Computed value display component
 */
function FunctionField(props: FunctionFieldProps): ReactElement;

interface ChipFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Whether field is sortable */
  sortable?: boolean;
  /** Chip color */
  color?: 'default' | 'primary' | 'secondary';
  /** Chip variant */
  variant?: 'filled' | 'outlined';
  /** Chip size */
  size?: 'small' | 'medium';
}

interface ArrayFieldProps {
  /** Field source property name */
  source: string;
  /** Field label text */
  label?: string;
  /** Child component to render array items */
  children: ReactElement;
}

interface FunctionFieldProps {
  /** Field label text */
  label?: string;
  /** Function to compute display value */
  render: (record: any, source?: string) => any;
  /** Whether field is sortable */
  sortable?: boolean;
}

Types

interface FieldProps {
  source: string;
  label?: string;
  sortable?: boolean;
  record?: any;
  resource?: string;
}

interface Record {
  id: Identifier;
  [key: string]: any;
}

type Identifier = string | number;

Install with Tessl CLI