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

Theme System

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

Material UI theme integration with customizable themes and responsive design utilities for react-admin applications.

Capabilities

Predefined Themes

Ready-to-use theme configurations with different styling approaches.

/**
 * Default Material UI theme with react-admin customizations
 */
const defaultTheme: Theme;

/**
 * Nano dark theme variant with dark color scheme
 */
const nanoDarkTheme: Theme;

/**
 * Nano light theme variant with light color scheme
 */
const nanoLightTheme: Theme;

/**
 * Radiant dark theme variant with enhanced dark styling
 */
const radiantDarkTheme: Theme;

/**
 * Radiant light theme variant with enhanced light styling
 */
const radiantLightTheme: Theme;

Usage Examples:

import { AdminUI, defaultTheme, nanoDarkTheme } from "ra-ui-materialui";

// Using default theme
const App = () => (
  <AdminUI theme={defaultTheme}>
    {/* Admin content */}
  </AdminUI>
);

// Using dark theme
const DarkApp = () => (
  <AdminUI theme={nanoDarkTheme}>
    {/* Admin content */}
  </AdminUI>
);

Theme Creation and Customization

Functions and components for creating and customizing themes.

/**
 * Create custom theme configuration with Material UI options
 * @param options - Theme customization options
 * @returns Customized Material UI theme
 */
function createTheme(options?: ThemeOptions): Theme;

/**
 * Theme provider component for applying theme to component tree
 * @param props - ThemeProvider configuration props
 * @returns Theme context provider component
 */
function ThemeProvider(props: ThemeProviderProps): ReactElement;

interface ThemeOptions {
  /** Palette color configuration */
  palette?: PaletteOptions;
  /** Typography configuration */
  typography?: TypographyOptions;
  /** Spacing configuration */
  spacing?: SpacingOptions;
  /** Breakpoint configuration */
  breakpoints?: BreakpointsOptions;
  /** Component style overrides */
  components?: ComponentsOverrides;
  /** Custom CSS variables */
  vars?: Record<string, any>;
}

interface ThemeProviderProps {
  /** Material UI theme object */
  theme: Theme;
  /** Child components */
  children: ReactNode;
}

Usage Examples:

import { createTheme, ThemeProvider } from "ra-ui-materialui";

// Custom theme creation
const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
    mode: 'light',
  },
  typography: {
    h1: {
      fontSize: '2rem',
    },
  },
  spacing: 8,
});

// Using custom theme
const CustomApp = () => (
  <ThemeProvider theme={customTheme}>
    <AdminUI>
      {/* Admin content */}
    </AdminUI>
  </ThemeProvider>
);

Theme Hooks and Utilities

Hooks for accessing and manipulating theme within components.

/**
 * Hook for accessing current theme configuration
 * @returns Current Material UI theme object
 */
function useTheme(): Theme;

/**
 * Hook for responsive media queries based on theme breakpoints
 * @param query - Media query string or breakpoint
 * @param options - Query options
 * @returns Boolean indicating if query matches
 */
function useMediaQuery(
  query: string | ((theme: Theme) => string), 
  options?: UseMediaQueryOptions
): boolean;

interface UseMediaQueryOptions {
  /** Default matches value during SSR */
  defaultMatches?: boolean;
  /** Match media implementation */
  matchMedia?: (query: string) => MediaQueryList;
  /** Disable hydration mismatch warning */
  noSsr?: boolean;
  /** Server-side rendering matches value */
  ssrMatchMedia?: (query: string) => { matches: boolean };
}

Usage Examples:

import { useTheme, useMediaQuery } from "ra-ui-materialui";

const ResponsiveComponent = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isDarkMode = theme.palette.mode === 'dark';
  
  return (
    <div>
      <p>Theme mode: {isDarkMode ? 'Dark' : 'Light'}</p>
      <p>Device: {isMobile ? 'Mobile' : 'Desktop'}</p>
      <p>Primary color: {theme.palette.primary.main}</p>
    </div>
  );
};

Theme Customization Areas

Detailed configuration options for different theme aspects.

interface PaletteOptions {
  /** Color mode */
  mode?: 'light' | 'dark';
  /** Primary color configuration */
  primary?: PaletteColorOptions;
  /** Secondary color configuration */
  secondary?: PaletteColorOptions;
  /** Error color configuration */
  error?: PaletteColorOptions;
  /** Warning color configuration */
  warning?: PaletteColorOptions;
  /** Info color configuration */
  info?: PaletteColorOptions;
  /** Success color configuration */
  success?: PaletteColorOptions;
  /** Background colors */
  background?: {
    default?: string;
    paper?: string;
  };
  /** Text colors */
  text?: {
    primary?: string;
    secondary?: string;
    disabled?: string;
  };
}

interface PaletteColorOptions {
  /** Main color */
  main: string;
  /** Light variant */
  light?: string;
  /** Dark variant */
  dark?: string;
  /** Contrast text color */
  contrastText?: string;
}

interface TypographyOptions {
  /** Font family */
  fontFamily?: string;
  /** Font size */
  fontSize?: number;
  /** Font weight */
  fontWeightLight?: number;
  fontWeightRegular?: number;
  fontWeightMedium?: number;
  fontWeightBold?: number;
  /** Typography variants */
  h1?: TypographyStyle;
  h2?: TypographyStyle;
  h3?: TypographyStyle;
  h4?: TypographyStyle;
  h5?: TypographyStyle;
  h6?: TypographyStyle;
  subtitle1?: TypographyStyle;
  subtitle2?: TypographyStyle;
  body1?: TypographyStyle;
  body2?: TypographyStyle;
  button?: TypographyStyle;
  caption?: TypographyStyle;
  overline?: TypographyStyle;
}

interface BreakpointsOptions {
  /** Breakpoint values */
  values?: {
    xs?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  /** Breakpoint unit */
  unit?: string;
  /** Step value */
  step?: number;
}

Component Style Overrides

Theme-level component customization options.

interface ComponentsOverrides {
  /** AppBar component styles */
  MuiAppBar?: {
    styleOverrides?: {
      root?: CSSProperties;
      colorPrimary?: CSSProperties;
    };
  };
  /** Button component styles */
  MuiButton?: {
    styleOverrides?: {
      root?: CSSProperties;
      contained?: CSSProperties;
      outlined?: CSSProperties;
    };
  };
  /** TextField component styles */
  MuiTextField?: {
    styleOverrides?: {
      root?: CSSProperties;
    };
  };
  /** DataGrid component styles */
  MuiDataGrid?: {
    styleOverrides?: {
      root?: CSSProperties;
      columnHeaders?: CSSProperties;
      row?: CSSProperties;
    };
  };
  /** Paper component styles */
  MuiPaper?: {
    styleOverrides?: {
      root?: CSSProperties;
      elevation1?: CSSProperties;
    };
  };
}

Advanced Theme Example:

import { createTheme } from "ra-ui-materialui";

const advancedTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#3f51b5',
      light: '#757de8',
      dark: '#002984',
    },
    secondary: {
      main: '#f50057',
      light: '#ff5983',
      dark: '#bb002f',
    },
    background: {
      default: '#121212',
      paper: '#1e1e1e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 300,
    },
    button: {
      textTransform: 'none',
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#1e1e1e',
        },
      },
    },
  },
  spacing: 8,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

Types

interface Theme {
  palette: Palette;
  typography: Typography;
  spacing: Spacing;
  breakpoints: Breakpoints;
  zIndex: ZIndex;
  transitions: Transitions;
  components?: ComponentsOverrides;
  shadows: Shadows;
  shape: Shape;
}

interface Spacing {
  (): number;
  (value: number): number;
  (topBottom: number, leftRight: number): number;
  (top: number, leftRight: number, bottom: number): number;
  (top: number, right: number, bottom: number, left: number): number;
}

interface TypographyStyle {
  fontFamily?: string;
  fontSize?: string | number;
  fontWeight?: string | number;
  lineHeight?: string | number;
  letterSpacing?: string | number;
  color?: string;
}

type CSSProperties = React.CSSProperties;

Install with Tessl CLI