0
# ra-ui-materialui
1

2
ra-ui-materialui provides comprehensive Material UI-based user interface components specifically designed for react-admin applications. It serves as the core UI layer offering form components, input fields, buttons, layout components, authentication interfaces, data display fields, list views, and theming capabilities with consistent Material Design styling.
3

4
## Package Information
5

6
- **Package Name**: ra-ui-materialui
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install ra-ui-materialui`
10

11
## Core Imports
12

13
```typescript
14
import { AdminUI, Layout, SimpleForm, DataGrid, Button } from "ra-ui-materialui";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { AdminUI, Layout, SimpleForm, DataGrid, Button } = require("ra-ui-materialui");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { AdminUI, Layout, SimpleForm, TextInput, Datagrid, TextField } from "ra-ui-materialui";
27

28
// Basic admin UI setup
29
const App = () => (
30
  <AdminUI layout={Layout}>
31
    {/* Admin content */}
32
  </AdminUI>
33
);
34

35
// Form with Material UI inputs
36
const UserForm = () => (
37
  <SimpleForm>
38
    <TextInput source="name" />
39
    <TextInput source="email" />
40
  </SimpleForm>
41
);
42

43
// Data list with Material UI styling
44
const UserList = () => (
45
  <Datagrid>
46
    <TextField source="name" />
47
    <TextField source="email" />
48
  </Datagrid>
49
);
50
```
51

52
## Architecture
53

54
ra-ui-materialui is built around several key components:
55

56
- **Core UI Shell**: `AdminUI` and `AdminContext` providing the foundational admin interface structure
57
- **Layout System**: Responsive layout components with `AppBar`, `Sidebar`, and `Menu` for navigation
58
- **Form System**: Comprehensive form components including `SimpleForm`, `TabbedForm`, and input components
59
- **Data Display**: Field components for displaying various data types with proper formatting
60
- **List Management**: Advanced list components with filtering, sorting, pagination, and bulk operations
61
- **Theme Integration**: Full Material UI theme support with customizable themes
62

63
## Capabilities
64

65
### Admin Interface Foundation
66

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

69
```typescript { .api }
70
function AdminUI(props: AdminUIProps): ReactElement;
71
function AdminContext(props: AdminContextProps): ReactElement;
72

73
interface AdminUIProps {
74
  layout?: ComponentType<LayoutProps>;
75
  theme?: Theme;
76
  children?: ReactNode;
77
}
78

79
interface AdminContextProps {
80
  dataProvider?: DataProvider;
81
  authProvider?: AuthProvider;
82
  i18nProvider?: I18nProvider;
83
  children?: ReactNode;
84
}
85
```
86

87
[Admin Interface](./admin-interface.md)
88

89
### Layout Components
90

91
Responsive layout system with navigation, theming, and user interface management for admin applications.
92

93
```typescript { .api }
94
function Layout(props: LayoutProps): ReactElement;
95
function AppBar(props: AppBarProps): ReactElement;
96
function Sidebar(props: SidebarProps): ReactElement;
97
function Menu(props: MenuProps): ReactElement;
98

99
interface LayoutProps {
100
  children?: ReactNode;
101
  sidebar?: ComponentType<SidebarProps>;
102
  appBar?: ComponentType<AppBarProps>;
103
  menu?: ComponentType<MenuProps>;
104
}
105
```
106

107
[Layout System](./layout.md)
108

109
### Authentication Components
110

111
Material UI-styled authentication components for login, logout, and user management.
112

113
```typescript { .api }
114
function Login(props: LoginProps): ReactElement;
115
function LoginForm(props: LoginFormProps): ReactElement;
116
function Logout(props: LogoutProps): ReactElement;
117
function UserMenu(props: UserMenuProps): ReactElement;
118

119
interface LoginProps {
120
  theme?: Theme;
121
  backgroundImage?: string;
122
}
123
```
124

125
[Authentication](./authentication.md)
126

127
### Detail View Components
128

129
Page-level components for creating, editing, and displaying individual records with Material UI styling.
130

131
```typescript { .api }
132
function Create<RecordType>(props: CreateProps<RecordType>): ReactElement;
133
function Edit<RecordType>(props: EditProps<RecordType>): ReactElement;
134
function Show<RecordType>(props: ShowProps<RecordType>): ReactElement;
135

136
interface CreateProps<RecordType> {
137
  actions?: ComponentType;
138
  aside?: ComponentType;
139
  component?: ComponentType;
140
  redirect?: string | false;
141
  resource?: string;
142
  title?: string | ComponentType;
143
  transform?: (data: any) => RecordType;
144
}
145

146
interface EditProps<RecordType> {
147
  actions?: ComponentType;
148
  aside?: ComponentType;
149
  component?: ComponentType;
150
  id?: Identifier;
151
  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
152
  redirect?: string | false;
153
  resource?: string;
154
  title?: string | ComponentType;
155
  transform?: (data: any) => RecordType;
156
}
157

158
interface ShowProps<RecordType> {
159
  actions?: ComponentType;
160
  aside?: ComponentType;
161
  children?: ReactNode;
162
  component?: ComponentType;
163
  emptyWhileLoading?: boolean;
164
  id?: Identifier;
165
  resource?: string;
166
  title?: string | ComponentType;
167
}
168
```
169

170
[Detail Views](./detail-views.md)
171

172
### Form Components
173

174
Comprehensive form system with Material UI styling for creating and editing data records.
175

176
```typescript { .api }
177
function SimpleForm(props: SimpleFormProps): ReactElement;
178
function TabbedForm(props: TabbedFormProps): ReactElement;
179
function Toolbar(props: ToolbarProps): ReactElement;
180

181
interface SimpleFormProps {
182
  toolbar?: ComponentType<ToolbarProps>;
183
  children?: ReactNode;
184
  defaultValues?: Record<string, any>;
185
}
186
```
187

188
[Forms](./forms.md)
189

190
### Input Components
191

192
Wide range of Material UI input components for data entry with validation and accessibility support.
193

194
```typescript { .api }
195
function TextInput(props: TextInputProps): ReactElement;
196
function NumberInput(props: NumberInputProps): ReactElement;
197
function BooleanInput(props: BooleanInputProps): ReactElement;
198
function SelectInput(props: SelectInputProps): ReactElement;
199
function AutocompleteInput(props: AutocompleteInputProps): ReactElement;
200

201
interface TextInputProps {
202
  source: string;
203
  label?: string;
204
  helperText?: string;
205
  validate?: Function | Function[];
206
}
207
```
208

209
[Input Components](./inputs.md)
210

211
### Field Components
212

213
Data display components for showing various data types with proper formatting and styling.
214

215
```typescript { .api }
216
function TextField(props: TextFieldProps): ReactElement;
217
function NumberField(props: NumberFieldProps): ReactElement;
218
function DateField(props: DateFieldProps): ReactElement;
219
function BooleanField(props: BooleanFieldProps): ReactElement;
220
function EmailField(props: EmailFieldProps): ReactElement;
221

222
interface TextFieldProps {
223
  source: string;
224
  label?: string;
225
  sortable?: boolean;
226
}
227
```
228

229
[Field Components](./fields.md)
230

231
### Button Components
232

233
Comprehensive set of action buttons with Material UI styling for various admin operations.
234

235
```typescript { .api }
236
function Button(props: ButtonProps): ReactElement;
237
function SaveButton(props: SaveButtonProps): ReactElement;
238
function DeleteButton(props: DeleteButtonProps): ReactElement;
239
function EditButton(props: EditButtonProps): ReactElement;
240
function CreateButton(props: CreateButtonProps): ReactElement;
241

242
interface ButtonProps {
243
  label?: string;
244
  variant?: 'text' | 'outlined' | 'contained';
245
  color?: 'primary' | 'secondary' | 'error';
246
  onClick?: () => void;
247
}
248
```
249

250
[Buttons](./buttons.md)
251

252
### List Components
253

254
Advanced list management with Material UI data grids, filtering, sorting, and pagination capabilities.
255

256
```typescript { .api }
257
function List(props: ListProps): ReactElement;
258
function Datagrid(props: DatagridProps): ReactElement;
259
function SimpleList(props: SimpleListProps): ReactElement;
260
function Pagination(props: PaginationProps): ReactElement;
261

262
interface DatagridProps {
263
  children?: ReactNode;
264
  rowClick?: string | Function;
265
  bulkActionButtons?: ReactElement;
266
}
267
```
268

269
[List Components](./lists.md)
270

271
### Theme System
272

273
Material UI theme integration with customizable themes and responsive design utilities.
274

275
```typescript { .api }
276
const defaultTheme: Theme;
277
const nanoDarkTheme: Theme;
278
const nanoLightTheme: Theme;
279
const radiantDarkTheme: Theme;
280
const radiantLightTheme: Theme;
281

282
function createTheme(options?: ThemeOptions): Theme;
283
function ThemeProvider(props: ThemeProviderProps): ReactElement;
284
```
285

286
[Theme System](./theme.md)
287

288
### Preferences Components
289

290
User configuration and customization components for making UI components configurable.
291

292
```typescript { .api }
293
function Configurable(props: ConfigurableProps): ReactElement;
294
function Inspector(props: InspectorProps): ReactElement;
295
function InspectorButton(props: InspectorButtonProps): ReactElement;
296

297
interface ConfigurableProps {
298
  children: ReactNode;
299
  configurable?: boolean;
300
}
301
```
302

303
[Preferences](./preferences.md)
304

305
### Utility Components
306

307
Helper components and utilities for labeling, navigation, and common UI patterns.
308

309
```typescript { .api }
310
function Labeled(props: LabeledProps): ReactElement;
311
function Link(props: LinkProps): ReactElement;
312

313
interface LabeledProps extends StackProps {
314
  children?: ReactNode;
315
  className?: string;
316
  fullWidth?: boolean;
317
  htmlFor?: string;
318
  isRequired?: boolean;
319
  label?: string | ReactElement | false;
320
  resource?: string;
321
  source?: string;
322
}
323

324
interface LinkProps extends MuiLinkProps {
325
  to?: string;
326
  onClick?: (event: MouseEvent) => void;
327
}
328
```
329

330
## Types
331

332
```typescript { .api }
333
type Identifier = string | number;
334

335
interface Record {
336
  id: Identifier;
337
  [key: string]: any;
338
}
339

340
interface Theme {
341
  palette: PaletteOptions;
342
  typography: TypographyOptions;
343
  spacing: SpacingOptions;
344
  breakpoints: BreakpointsOptions;
345
}
346

347
interface DataProvider {
348
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
349
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
350
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
351
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
352
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
353
}
354

355
interface AuthProvider {
356
  login: (params: any) => Promise<any>;
357
  logout: (params: any) => Promise<void | false | string>;
358
  checkAuth: (params: any) => Promise<void>;
359
  checkError: (error: any) => Promise<void>;
360
  getIdentity: () => Promise<UserIdentity>;
361
  getPermissions: (params: any) => Promise<any>;
362
}
363

364
interface I18nProvider {
365
  translate: (key: string, options?: any) => string;
366
  changeLocale: (locale: string) => Promise<void>;
367
  getLocale: () => string;
368
  getMessages: () => any;
369
}
370

371
interface UserIdentity {
372
  id: string | number;
373
  fullName?: string;
374
  avatar?: string;
375
  email?: string;
376
  [key: string]: any;
377
}
378

379
interface SxProps {
380
  [key: string]: any;
381
}
382

383
type ComponentType<P = {}> = React.ComponentType<P>;
384
type ReactElement = React.ReactElement;
385
type ReactNode = React.ReactNode;
386
type MouseEvent = React.MouseEvent;
387
type FormEvent = React.FormEvent;
388

389
interface StackProps {
390
  children?: ReactNode;
391
  direction?: 'row' | 'column';
392
  spacing?: number;
393
  alignItems?: string;
394
  justifyContent?: string;
395
  sx?: SxProps;
396
}
397

398
interface MuiLinkProps {
399
  children?: ReactNode;
400
  href?: string;
401
  target?: string;
402
  rel?: string;
403
  className?: string;
404
  sx?: SxProps;
405
}
406

407
interface HtmlHTMLAttributes<T> {
408
  className?: string;
409
  id?: string;
410
  style?: React.CSSProperties;
411
  [key: string]: any;
412
}
413
```