CtrlK
BlogDocsLog inGet started
Tessl Logo

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

admin-interface.mddocs/

Admin Interface

Core admin interface components providing the foundational structure and context for react-admin applications.

Capabilities

AdminUI Component

Main admin interface wrapper component that provides the complete UI shell including routing, theme, and layout management.

/**
 * Main admin interface wrapper component providing the complete UI shell
 * @param props - AdminUI configuration props
 * @returns Complete admin interface with routing and theme
 */
function AdminUI(props: AdminUIProps): ReactElement;

interface AdminUIProps {
  /** Layout component to use for the admin interface */
  layout?: ComponentType<LayoutProps>;
  /** Material UI theme configuration */
  theme?: Theme;
  /** Child components and routes */
  children?: ReactNode;
  /** Custom app bar component */
  appBar?: ComponentType<AppBarProps>;
  /** Custom sidebar component */
  sidebar?: ComponentType<SidebarProps>;
  /** Custom menu component */
  menu?: ComponentType<MenuProps>;
  /** Catch all component for unknown routes */
  catchAll?: ComponentType;
  /** Loading component */
  loading?: ComponentType;
  /** Custom login page component */
  loginPage?: ComponentType<LoginProps>;
  /** Disable authentication */
  disableAuthentication?: boolean;
}

Usage Examples:

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

// Basic admin UI
const App = () => (
  <AdminUI layout={Layout} theme={defaultTheme}>
    {/* Resource definitions and routes */}
  </AdminUI>
);

// Custom admin UI with theme
const App = () => (
  <AdminUI 
    layout={Layout}
    theme={radiantDarkTheme}
    loginPage={CustomLogin}
  >
    {/* Admin content */}
  </AdminUI>
);

AdminContext Component

Context provider for admin application state and configuration, managing data providers, authentication, and internationalization.

/**
 * Context provider for admin application state and configuration
 * @param props - AdminContext configuration props
 * @returns Provider component with admin context
 */
function AdminContext(props: AdminContextProps): ReactElement;

interface AdminContextProps {
  /** Data provider for API operations */
  dataProvider?: DataProvider;
  /** Authentication provider */
  authProvider?: AuthProvider;
  /** Internationalization provider */
  i18nProvider?: I18nProvider;
  /** Navigation history instance */
  history?: History;
  /** Child components */
  children?: ReactNode;
  /** Base name for routing */
  basename?: string;
}

Usage Examples:

import { AdminContext } from "ra-ui-materialui";
import { dataProvider, authProvider, i18nProvider } from "./providers";

const App = () => (
  <AdminContext
    dataProvider={dataProvider}
    authProvider={authProvider}
    i18nProvider={i18nProvider}
  >
    {/* Admin interface components */}
  </AdminContext>
);

Types

interface DataProvider {
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
  deleteMany: (resource: string, params: DeleteManyParams) => Promise<DeleteManyResult>;
  updateMany: (resource: string, params: UpdateManyParams) => Promise<UpdateManyResult>;
}

interface AuthProvider {
  login: (params: any) => Promise<any>;
  logout: (params: any) => Promise<void | false | string>;
  checkAuth: (params: any) => Promise<void>;
  checkError: (error: any) => Promise<void>;
  getIdentity: () => Promise<UserIdentity>;
  getPermissions: (params: any) => Promise<any>;
}

interface I18nProvider {
  translate: (key: string, options?: any) => string;
  changeLocale: (locale: string) => Promise<void>;
  getLocale: () => string;
  getMessages: () => any;
}

interface UserIdentity {
  id: string | number;
  fullName?: string;
  avatar?: string;
  [key: string]: any;
}

Install with Tessl CLI

npx tessl i tessl/npm-ra-ui-materialui

docs

admin-interface.md

authentication.md

buttons.md

detail-views.md

fields.md

forms.md

index.md

inputs.md

layout.md

lists.md

preferences.md

theme.md

tile.json