(({ theme }) => ({
- textAnchor: 'middle',
- dominantBaseline: 'central',
- fill: (theme.vars || theme).palette.text.secondary,
- variants: [
- {
- props: {
- variant: 'primary',
- },
- style: {
- fontSize: theme.typography.h5.fontSize,
- },
- },
- {
- props: ({ variant }) => variant !== 'primary',
- style: {
- fontSize: theme.typography.body2.fontSize,
- },
- },
- {
- props: {
- variant: 'primary',
- },
- style: {
- fontWeight: theme.typography.h5.fontWeight,
- },
- },
- {
- props: ({ variant }) => variant !== 'primary',
- style: {
- fontWeight: theme.typography.body2.fontWeight,
- },
- },
- ],
-}));
-
-interface PieCenterLabelProps {
- primaryText: string;
- secondaryText: string;
-}
-
-function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
- const { width, height, left, top } = useDrawingArea();
- const primaryY = top + height / 2 - 10;
- const secondaryY = primaryY + 24;
-
- return (
-
-
- {primaryText}
-
-
- {secondaryText}
-
-
- );
-}
-
-const colors = [
- 'hsl(220, 20%, 65%)',
- 'hsl(220, 20%, 42%)',
- 'hsl(220, 20%, 35%)',
- 'hsl(220, 20%, 25%)',
-];
-
-export default function ChartUserByCountry() {
- return (
-
-
-
- Users by country
-
-
-
-
-
-
- {countries.map((country, index) => (
-
- {country.flag}
-
-
-
- {country.name}
-
-
- {country.value}%
-
-
-
-
-
- ))}
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/Copyright.tsx b/examples/core/auth-nextjs-themed/app/components/Copyright.tsx
deleted file mode 100644
index 18e72887597..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/Copyright.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-
-export default function Copyright(props: any) {
- return (
-
- {'Copyright © '}
-
- Your Co
- {' '}
- {new Date().getFullYear()}
- {'.'}
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx b/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx
deleted file mode 100644
index 000f7c9a170..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { DataGrid, DataGridProps } from '@mui/x-data-grid';
-
-export default function CustomizedDataGrid(props: DataGridProps) {
- return (
-
- (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
- initialState={{
- pagination: { paginationModel: { pageSize: 20 } },
- }}
- sx={{
- ...props.sx,
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200],
- '& .MuiDataGrid-cell': {
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200],
- },
- }}
- pageSizeOptions={[10, 20, 50]}
- disableColumnResize
- slotProps={{
- filterPanel: {
- sx: {
- '& .MuiDataGrid-filterForm': {
- columnGap: 1.5,
- marginTop: 2,
- },
- },
- filterFormProps: {
- logicOperatorInputProps: {
- variant: 'outlined',
- size: 'small',
- },
- columnInputProps: {
- variant: 'outlined',
- size: 'small',
- sx: { mt: 'auto' },
- },
- operatorInputProps: {
- variant: 'outlined',
- size: 'small',
- sx: { mt: 'auto' },
- },
- valueInputProps: {
- InputComponentProps: {
- variant: 'outlined',
- size: 'small',
- },
- },
- },
- },
- }}
- />
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx b/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
deleted file mode 100644
index 59307f43a46..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import Button from '@mui/material/Button';
-import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import {
- BaseSingleInputFieldProps,
- DateValidationError,
- FieldSection,
-} from '@mui/x-date-pickers/models';
-
-interface ButtonFieldProps
- extends UseDateFieldProps,
- BaseSingleInputFieldProps {
- setOpen?: React.Dispatch>;
-}
-
-function ButtonField(props: ButtonFieldProps) {
- const {
- setOpen,
- label,
- id,
- disabled,
- InputProps: { ref } = {},
- inputProps: { 'aria-label': ariaLabel } = {},
- } = props;
-
- return (
-
- );
-}
-
-export default function CustomDatePicker() {
- const [value, setValue] = React.useState(dayjs('2023-04-17'));
- const [open, setOpen] = React.useState(false);
-
- return (
-
- setValue(newValue)}
- slots={{ field: ButtonField }}
- slotProps={{
- field: { setOpen } as any,
- nextIconButton: { size: 'small' },
- previousIconButton: { size: 'small' },
- }}
- open={open}
- onClose={() => setOpen(false)}
- onOpen={() => setOpen(true)}
- views={['day', 'month', 'year']}
- />
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx b/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx
deleted file mode 100644
index 9b71fc336ae..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client';
-import * as React from 'react';
-import clsx from 'clsx';
-import { animated, useSpring } from '@react-spring/web';
-import { TransitionProps } from '@mui/material/transitions';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Collapse from '@mui/material/Collapse';
-import Typography from '@mui/material/Typography';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
-import {
- TreeItemContent,
- TreeItemIconContainer,
- TreeItemLabel,
- TreeItemRoot,
-} from '@mui/x-tree-view/TreeItem';
-import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
-import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
-import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTheme } from '@mui/material/styles';
-
-type Color = 'blue' | 'green';
-
-type ExtendedTreeItemProps = {
- color?: Color;
- id: string;
- label: string;
-};
-
-const ITEMS: TreeViewBaseItem[] = [
- {
- id: '1',
- label: 'Website',
- children: [
- { id: '1.1', label: 'Home', color: 'green' },
- { id: '1.2', label: 'Pricing', color: 'green' },
- { id: '1.3', label: 'About us', color: 'green' },
- {
- id: '1.4',
- label: 'Blog',
- children: [
- { id: '1.1.1', label: 'Announcements', color: 'blue' },
- { id: '1.1.2', label: 'April lookahead', color: 'blue' },
- { id: '1.1.3', label: "What's new", color: 'blue' },
- { id: '1.1.4', label: 'Meet the team', color: 'blue' },
- ],
- },
- ],
- },
- {
- id: '2',
- label: 'Store',
- children: [
- { id: '2.1', label: 'All products', color: 'green' },
- {
- id: '2.2',
- label: 'Categories',
- children: [
- { id: '2.2.1', label: 'Gadgets', color: 'blue' },
- { id: '2.2.2', label: 'Phones', color: 'blue' },
- { id: '2.2.3', label: 'Wearables', color: 'blue' },
- ],
- },
- { id: '2.3', label: 'Bestsellers', color: 'green' },
- { id: '2.4', label: 'Sales', color: 'green' },
- ],
- },
- { id: '4', label: 'Contact', color: 'blue' },
- { id: '5', label: 'Help', color: 'blue' },
-];
-
-function DotIcon({ color }: { color: string }) {
- return (
-
-
-
- );
-}
-
-const AnimatedCollapse = animated(Collapse);
-
-function TransitionComponent(props: TransitionProps) {
- const style = useSpring({
- to: {
- opacity: props.in ? 1 : 0,
- transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
- },
- });
-
- return ;
-}
-
-interface CustomLabelProps {
- children: React.ReactNode;
- color?: Color;
- expandable?: boolean;
-}
-
-function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps) {
- const theme = useTheme();
- const colors = {
- blue: (theme.vars || theme).palette.primary.main,
- green: (theme.vars || theme).palette.success.main,
- };
-
- const iconColor = color ? colors[color] : null;
- return (
-
- {iconColor && }
-
- {children}
-
-
- );
-}
-
-interface CustomTreeItemProps
- extends Omit,
- Omit, 'onFocus'> {}
-
-const CustomTreeItem = React.forwardRef(function CustomTreeItem(
- props: CustomTreeItemProps,
- ref: React.Ref,
-) {
- const { id, itemId, label, disabled, children, ...other } = props;
-
- const {
- getRootProps,
- getContentProps,
- getIconContainerProps,
- getLabelProps,
- getGroupTransitionProps,
- status,
- publicAPI,
- } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
-
- const item = publicAPI.getItem(itemId);
- const color = item?.color;
- return (
-
-
-
- {status.expandable && (
-
-
-
- )}
-
-
-
- {children && (
-
- )}
-
-
- );
-});
-
-export default function CustomizedTreeView() {
- return (
-
-
-
- Product tree
-
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx b/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx
deleted file mode 100644
index f6f8d68b280..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
-import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
-
-export default function HighlightedCard() {
- const theme = useTheme();
- const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
- return (
-
-
-
-
- Explore your data
-
-
- Uncover performance and visitor insights with our data wizardry.
-
- }
- fullWidth={isSmallScreen}
- >
- Get insights
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx b/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
deleted file mode 100644
index e7a90bde2a4..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import { BarChart } from '@mui/x-charts/BarChart';
-import { useTheme } from '@mui/material/styles';
-
-export default function PageViewsBarChart() {
- const theme = useTheme();
- const colorPalette = [
- (theme.vars || theme).palette.primary.dark,
- (theme.vars || theme).palette.primary.main,
- (theme.vars || theme).palette.primary.light,
- ];
- return (
-
-
-
- Page views and downloads
-
-
-
-
- 1.3M
-
-
-
-
- Page views and downloads for the last 6 months
-
-
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx b/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
deleted file mode 100644
index f43d0af4b4a..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import { LineChart } from '@mui/x-charts/LineChart';
-
-function AreaGradient({ color, id }: { color: string; id: string }) {
- return (
-
-
-
-
-
-
- );
-}
-
-function getDaysInMonth(month: number, year: number) {
- const date = new Date(year, month, 0);
- const monthName = date.toLocaleDateString('en-US', {
- month: 'short',
- });
- const daysInMonth = date.getDate();
- const days = [];
- let i = 1;
- while (days.length < daysInMonth) {
- days.push(`${monthName} ${i}`);
- i += 1;
- }
- return days;
-}
-
-export default function SessionsChart() {
- const theme = useTheme();
- const data = getDaysInMonth(4, 2024);
-
- const colorPalette = [
- theme.palette.primary.light,
- theme.palette.primary.main,
- theme.palette.primary.dark,
- ];
-
- return (
-
-
-
- Sessions
-
-
-
-
- 13,277
-
-
-
-
- Sessions per day for the last 30 days
-
-
- (i + 1) % 5 === 0,
- },
- ]}
- series={[
- {
- id: 'direct',
- label: 'Direct',
- showMark: false,
- curve: 'linear',
- stack: 'total',
- area: true,
- stackOrder: 'ascending',
- data: [
- 300, 900, 600, 1200, 1500, 1800, 2400, 2100, 2700, 3000, 1800, 3300, 3600, 3900,
- 4200, 4500, 3900, 4800, 5100, 5400, 4800, 5700, 6000, 6300, 6600, 6900, 7200, 7500,
- 7800, 8100,
- ],
- },
- {
- id: 'referral',
- label: 'Referral',
- showMark: false,
- curve: 'linear',
- stack: 'total',
- area: true,
- stackOrder: 'ascending',
- data: [
- 500, 900, 700, 1400, 1100, 1700, 2300, 2000, 2600, 2900, 2300, 3200, 3500, 3800,
- 4100, 4400, 2900, 4700, 5000, 5300, 5600, 5900, 6200, 6500, 5600, 6800, 7100, 7400,
- 7700, 8000,
- ],
- },
- {
- id: 'organic',
- label: 'Organic',
- showMark: false,
- curve: 'linear',
- stack: 'total',
- stackOrder: 'ascending',
- data: [
- 1000, 1500, 1200, 1700, 1300, 2000, 2400, 2200, 2600, 2800, 2500, 3000, 3400, 3700,
- 3200, 3900, 4100, 3500, 4300, 4500, 4000, 4700, 5000, 5200, 4800, 5400, 5600, 5900,
- 6100, 6300,
- ],
- area: true,
- },
- ]}
- height={250}
- margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
- grid={{ horizontal: true }}
- sx={{
- '& .MuiAreaElement-series-organic': {
- fill: "url('#organic')",
- },
- '& .MuiAreaElement-series-referral': {
- fill: "url('#referral')",
- },
- '& .MuiAreaElement-series-direct': {
- fill: "url('#direct')",
- },
- }}
- slotProps={{
- legend: {
- hidden: true,
- },
- }}
- >
-
-
-
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/components/StatCard.tsx b/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
deleted file mode 100644
index 0438bc8f1fd..00000000000
--- a/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
-import { areaElementClasses } from '@mui/x-charts/LineChart';
-
-export type StatCardProps = {
- title: string;
- value: string;
- interval: string;
- trend: 'up' | 'down' | 'neutral';
- data: number[];
-};
-
-function getDaysInMonth(month: number, year: number) {
- const date = new Date(year, month, 0);
- const monthName = date.toLocaleDateString('en-US', {
- month: 'short',
- });
- const daysInMonth = date.getDate();
- const days = [];
- let i = 1;
- while (days.length < daysInMonth) {
- days.push(`${monthName} ${i}`);
- i += 1;
- }
- return days;
-}
-
-function AreaGradient({ color, id }: { color: string; id: string }) {
- return (
-
-
-
-
-
-
- );
-}
-
-export default function StatCard({ title, value, interval, trend, data }: StatCardProps) {
- const theme = useTheme();
- const daysInWeek = getDaysInMonth(4, 2024);
-
- const trendColors = {
- up: theme.palette.mode === 'light' ? theme.palette.success.main : theme.palette.success.dark,
- down: theme.palette.mode === 'light' ? theme.palette.error.main : theme.palette.error.dark,
- neutral: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700],
- };
-
- const labelColors = {
- up: 'success' as const,
- down: 'error' as const,
- neutral: 'default' as const,
- };
-
- const color = labelColors[trend];
- const chartColor = trendColors[trend];
- const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
-
- return (
-
-
-
- {title}
-
-
-
-
-
- {value}
-
-
-
-
- {interval}
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/employeesStore.ts b/examples/core/auth-nextjs-themed/app/employeesStore.ts
deleted file mode 100644
index a154a3d873c..00000000000
--- a/examples/core/auth-nextjs-themed/app/employeesStore.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Employee } from './mocks/employees';
-
-let employees: Employee[] = [
- { id: 1, name: 'Edward Perry', age: 25, joinDate: new Date().toISOString(), role: 'Finance' },
- { id: 2, name: 'Josephine Drake', age: 36, joinDate: new Date().toISOString(), role: 'Market' },
- {
- id: 3,
- name: 'Cody Phillips',
- age: 19,
- joinDate: new Date().toISOString(),
- role: 'Development',
- },
-];
-
-export const getEmployeesStore = () => employees;
-
-export const setEmployeesStore = (newEmployees: Employee[]) => {
- employees = newEmployees;
-};
diff --git a/examples/core/auth-nextjs-themed/app/layout.tsx b/examples/core/auth-nextjs-themed/app/layout.tsx
deleted file mode 100644
index 530ee6800b3..00000000000
--- a/examples/core/auth-nextjs-themed/app/layout.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { NextAppProvider } from '@toolpad/core/nextjs';
-import PersonIcon from '@mui/icons-material/Person';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
-import type { Navigation } from '@toolpad/core/AppProvider';
-import { SessionProvider, signIn, signOut } from 'next-auth/react';
-import theme from '../theme';
-import { auth } from '../auth';
-
-const NAVIGATION: Navigation = [
- {
- kind: 'header',
- title: 'Main items',
- },
- {
- title: 'Dashboard',
- icon: ,
- },
- {
- segment: 'orders',
- title: 'Orders',
- icon: ,
- },
- {
- segment: 'employees',
- title: 'Employees',
- icon: ,
- pattern: 'employees{/:employeeId}*',
- },
-];
-
-const AUTHENTICATION = {
- signIn,
- signOut,
-};
-
-export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
- const session = await auth();
- return (
-
-
-
-
-
- {children}
-
-
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx b/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx
deleted file mode 100644
index af53b6aeba4..00000000000
--- a/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import * as React from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
-
-export function UsaFlag() {
- return (
-
-
-
- );
-}
-export function BrazilFlag() {
- return (
-
-
-
- );
-}
-
-export function GlobeFlag() {
- return (
-
-
-
- );
-}
diff --git a/examples/core/auth-nextjs-themed/app/mocks/employees.ts b/examples/core/auth-nextjs-themed/app/mocks/employees.ts
deleted file mode 100644
index b014bc5b6f6..00000000000
--- a/examples/core/auth-nextjs-themed/app/mocks/employees.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-'use client';
-import { DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud';
-import { z } from 'zod';
-
-type EmployeeRole = 'Market' | 'Finance' | 'Development';
-
-export interface Employee extends DataModel {
- id: number;
- name: string;
- age: number;
- joinDate: string;
- role: EmployeeRole;
-}
-
-const API_URL = '/api/employees';
-
-export const employeesDataSource: DataSource = {
- fields: [
- { field: 'id', headerName: 'ID' },
- { field: 'name', headerName: 'Name', width: 140 },
- { field: 'age', headerName: 'Age', type: 'number' },
- {
- field: 'joinDate',
- headerName: 'Join date',
- type: 'date',
- valueGetter: (value: string) => value && new Date(value),
- width: 140,
- },
- {
- field: 'role',
- headerName: 'Department',
- type: 'singleSelect',
- valueOptions: ['Market', 'Finance', 'Development'],
- width: 160,
- },
- ],
- getMany: async ({ paginationModel, filterModel, sortModel }) => {
- const queryParams = new URLSearchParams();
-
- queryParams.append('page', paginationModel.page.toString());
- queryParams.append('pageSize', paginationModel.pageSize.toString());
- if (sortModel?.length) {
- queryParams.append('sort', JSON.stringify(sortModel));
- }
- if (filterModel?.items?.length) {
- queryParams.append('filter', JSON.stringify(filterModel.items));
- }
-
- const res = await fetch(`${API_URL}?${queryParams.toString()}`, {
- method: 'GET',
- });
- const resJson = await res.json();
-
- if (!res.ok) {
- throw new Error(resJson.error);
- }
- return resJson;
- },
- getOne: async (employeeId) => {
- const res = await fetch(`${API_URL}/${employeeId}`);
- const resJson = await res.json();
-
- if (!res.ok) {
- throw new Error(resJson.error);
- }
- return resJson;
- },
- createOne: async (data) => {
- const res = await fetch(API_URL, {
- method: 'POST',
- body: JSON.stringify(data),
- headers: { 'Content-Type': 'application/json' },
- });
- const resJson = await res.json();
-
- if (!res.ok) {
- throw new Error(resJson.error);
- }
- return resJson;
- },
- updateOne: async (employeeId, data) => {
- const res = await fetch(`${API_URL}/${employeeId}`, {
- method: 'PUT',
- body: JSON.stringify(data),
- headers: { 'Content-Type': 'application/json' },
- });
- const resJson = await res.json();
-
- if (!res.ok) {
- throw new Error(resJson.error);
- }
- return resJson;
- },
- deleteOne: async (employeeId) => {
- const res = await fetch(`${API_URL}/${employeeId}`, { method: 'DELETE' });
- const resJson = await res.json();
-
- if (!res.ok) {
- throw new Error(resJson.error);
- }
- return resJson;
- },
- validate: z.object({
- name: z.string({ required_error: 'Name is required' }).nonempty('Name is required'),
- age: z.number({ required_error: 'Age is required' }).min(18, 'Age must be at least 18'),
- joinDate: z
- .string({ required_error: 'Join date is required' })
- .nonempty('Join date is required'),
- role: z.enum(['Market', 'Finance', 'Development'], {
- errorMap: () => ({ message: 'Role must be "Market", "Finance" or "Development"' }),
- }),
- })['~standard'].validate,
-};
-
-export const employeesCache = new DataSourceCache();
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
deleted file mode 100644
index d04b3fdcd74..00000000000
--- a/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
+++ /dev/null
@@ -1,619 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Chip from '@mui/material/Chip';
-import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid';
-import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
-
-type SparkLineData = number[];
-
-function getDaysInMonth(month: number, year: number) {
- const date = new Date(year, month, 0);
- const monthName = date.toLocaleDateString('en-US', {
- month: 'short',
- });
- const daysInMonth = date.getDate();
- const days = [];
- let i = 1;
- while (days.length < daysInMonth) {
- days.push(`${monthName} ${i}`);
- i += 1;
- }
- return days;
-}
-
-function renderSparklineCell(params: GridCellParams) {
- const data = getDaysInMonth(4, 2024);
- const { value, colDef } = params;
-
- if (!value || value.length === 0) {
- return null;
- }
-
- return (
-
-
-
- );
-}
-
-function renderStatus(status: 'Online' | 'Offline') {
- const colors: { [index: string]: 'success' | 'default' } = {
- Online: 'success',
- Offline: 'default',
- };
-
- return ;
-}
-
-export function renderAvatar(params: GridCellParams<{ name: string; color: string }, any, any>) {
- if (params.value == null) {
- return '';
- }
-
- return (
-
- {params.value.name.toUpperCase().substring(0, 1)}
-
- );
-}
-
-export const columns: GridColDef[] = [
- { field: 'pageTitle', headerName: 'Page Title', flex: 1.5, minWidth: 200 },
- {
- field: 'status',
- headerName: 'Status',
- flex: 0.5,
- minWidth: 80,
- renderCell: (params) => renderStatus(params.value as any),
- },
- {
- field: 'users',
- headerName: 'Users',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 80,
- },
- {
- field: 'eventCount',
- headerName: 'Event Count',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 100,
- },
- {
- field: 'viewsPerUser',
- headerName: 'Views per User',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 120,
- },
- {
- field: 'averageTime',
- headerName: 'Average Time',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 100,
- },
- {
- field: 'conversions',
- headerName: 'Daily Conversions',
- flex: 1,
- minWidth: 150,
- renderCell: renderSparklineCell,
- },
-];
-
-export const rows: GridRowsProp = [
- {
- id: 1,
- pageTitle: 'Homepage Overview',
- status: 'Online',
- eventCount: 8345,
- users: 212423,
- viewsPerUser: 18.5,
- averageTime: '2m 15s',
- conversions: [
- 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, 911787,
- 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, 1670690, 1695142,
- 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, 3296541, 3041524, 2599497,
- ],
- },
- {
- id: 2,
- pageTitle: 'Product Details - Gadgets',
- status: 'Online',
- eventCount: 5653,
- users: 172240,
- viewsPerUser: 9.7,
- averageTime: '2m 30s',
- conversions: [
- 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 557488, 1341471,
- 2044561, 2206438,
- ],
- },
- {
- id: 3,
- pageTitle: 'Checkout Process - Step 1',
- status: 'Offline',
- eventCount: 3455,
- users: 58240,
- viewsPerUser: 15.2,
- averageTime: '2m 10s',
- conversions: [
- 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, 520278,
- 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, 903675, 1049642,
- 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, 1381571,
- ],
- },
- {
- id: 4,
- pageTitle: 'User Profile Dashboard',
- status: 'Online',
- eventCount: 112543,
- users: 96240,
- viewsPerUser: 4.5,
- averageTime: '2m 40s',
- conversions: [
- 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, 649082,
- 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, 1145309, 1195630, 1358925,
- 1373160, 1172679, 1340106, 1396974, 1623641, 1687545, 1581634, 1550291,
- ],
- },
- {
- id: 5,
- pageTitle: 'Article Listing - Tech News',
- status: 'Offline',
- eventCount: 3653,
- users: 142240,
- viewsPerUser: 3.1,
- averageTime: '2m 55s',
- conversions: [
- 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, 640744,
- 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, 1014831, 1027570, 1189068,
- 1119099, 987244, 1197954, 1310721, 1480816, 1577547, 1854053, 1791831,
- ],
- },
- {
- id: 6,
- pageTitle: 'FAQs - Customer Support',
- status: 'Online',
- eventCount: 106543,
- users: 15240,
- viewsPerUser: 7.2,
- averageTime: '2m 20s',
- conversions: [
- 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, 94734, 132289,
- 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, 285557, 268555, 259482,
- 274019, 321648, 359801, 399502, 447249, 497403,
- ],
- },
- {
- id: 7,
- pageTitle: 'Product Comparison - Laptops',
- status: 'Offline',
- eventCount: 7853,
- users: 32240,
- viewsPerUser: 6.5,
- averageTime: '2m 50s',
- conversions: [
- 93682, 107901, 144919, 151769, 170804, 183736, 201752, 219792, 227887, 295382, 309600, 278050,
- 331964, 356826, 404896, 428090, 470245, 485582, 539056, 582112, 594289, 671915, 649510,
- 574911, 713843, 754965, 853020, 916793, 960158, 984265,
- ],
- },
- {
- id: 8,
- pageTitle: 'Shopping Cart - Electronics',
- status: 'Online',
- eventCount: 8563,
- users: 48240,
- viewsPerUser: 4.3,
- averageTime: '3m 10s',
- conversions: [
- 52394, 63357, 82800, 105466, 128729, 144472, 172148, 197919, 212302, 278153, 290499, 249824,
- 317499, 333024, 388925, 410576, 462099, 488477, 533956, 572307, 591019, 681506, 653332,
- 581234, 719038, 783496, 911609, 973328, 1056071, 1112940,
- ],
- },
- {
- id: 9,
- pageTitle: 'Payment Confirmation - Bank Transfer',
- status: 'Offline',
- eventCount: 4563,
- users: 18240,
- viewsPerUser: 2.7,
- averageTime: '3m 25s',
- conversions: [
- 15372, 16901, 25489, 30148, 40857, 51136, 64627, 75804, 89633, 100407, 114908, 129957, 143568,
- 158509, 174822, 192488, 211512, 234702, 258812, 284328, 310431, 338186, 366582, 396749,
- 428788, 462880, 499125, 537723, 578884, 622825,
- ],
- },
- {
- id: 10,
- pageTitle: 'Product Reviews - Smartphones',
- status: 'Online',
- eventCount: 9863,
- users: 28240,
- viewsPerUser: 5.1,
- averageTime: '3m 05s',
- conversions: [
- 70211, 89234, 115676, 136021, 158744, 174682, 192890, 218073, 240926, 308190, 317552, 279834,
- 334072, 354955, 422153, 443911, 501486, 538091, 593724, 642882, 686539, 788615, 754813,
- 687955, 883645, 978347, 1142551, 1233074, 1278155, 1356724,
- ],
- },
- {
- id: 11,
- pageTitle: 'Subscription Management - Services',
- status: 'Offline',
- eventCount: 6563,
- users: 24240,
- viewsPerUser: 4.8,
- averageTime: '3m 15s',
- conversions: [
- 49662, 58971, 78547, 93486, 108722, 124901, 146422, 167883, 189295, 230090, 249837, 217828,
- 266494, 287537, 339586, 363299, 412855, 440900, 490111, 536729, 580591, 671635, 655812,
- 576431, 741632, 819296, 971762, 1052605, 1099234, 1173591,
- ],
- },
- {
- id: 12,
- pageTitle: 'Order Tracking - Shipments',
- status: 'Online',
- eventCount: 12353,
- users: 38240,
- viewsPerUser: 3.5,
- averageTime: '3m 20s',
- conversions: [
- 29589, 37965, 55800, 64672, 77995, 91126, 108203, 128900, 148232, 177159, 193489, 164471,
- 210765, 229977, 273802, 299381, 341092, 371567, 413812, 457693, 495920, 564785, 541022,
- 491680, 618096, 704926, 833365, 904313, 974622, 1036567,
- ],
- },
- {
- id: 13,
- pageTitle: 'Customer Feedback - Surveys',
- status: 'Offline',
- eventCount: 5863,
- users: 13240,
- viewsPerUser: 2.3,
- averageTime: '3m 30s',
- conversions: [
- 8472, 9637, 14892, 19276, 23489, 28510, 33845, 39602, 45867, 52605, 59189, 65731, 76021,
- 85579, 96876, 108515, 119572, 131826, 145328, 160192, 176528, 196662, 217929, 239731, 262920,
- 289258, 315691, 342199, 370752, 402319,
- ],
- },
- {
- id: 14,
- pageTitle: 'Account Settings - Preferences',
- status: 'Online',
- eventCount: 7853,
- users: 18240,
- viewsPerUser: 3.2,
- averageTime: '3m 15s',
- conversions: [
- 15792, 16948, 22728, 25491, 28412, 31268, 34241, 37857, 42068, 46893, 51098, 55734, 60780,
- 66421, 72680, 79584, 87233, 95711, 105285, 115814, 127509, 140260, 154086, 169495, 186445,
- 205109, 225580, 247983, 272484, 299280,
- ],
- },
- {
- id: 15,
- pageTitle: 'Login Page - Authentication',
- status: 'Offline',
- eventCount: 9563,
- users: 24240,
- viewsPerUser: 2.5,
- averageTime: '3m 35s',
- conversions: [
- 25638, 28355, 42089, 53021, 66074, 80620, 97989, 118202, 142103, 166890, 193869, 225467,
- 264089, 307721, 358059, 417835, 488732, 573924, 674878, 794657, 938542, 1111291, 1313329,
- 1543835, 1812156, 2123349, 2484926, 2907023, 3399566, 3973545,
- ],
- },
- {
- id: 16,
- pageTitle: 'Promotions - Seasonal Sales',
- status: 'Online',
- eventCount: 13423,
- users: 54230,
- viewsPerUser: 7.8,
- averageTime: '2m 45s',
- conversions: [
- 241732, 256384, 289465, 321423, 345672, 378294, 398472, 420364, 436278, 460192, 495374,
- 510283, 532489, 559672, 587312, 610982, 629385, 654732, 678925, 704362, 725182, 749384,
- 772361, 798234, 819472, 846291, 872183, 894673, 919283, 945672,
- ],
- },
- {
- id: 17,
- pageTitle: 'Tutorials - How to Guides',
- status: 'Offline',
- eventCount: 4234,
- users: 19342,
- viewsPerUser: 5.2,
- averageTime: '3m 05s',
- conversions: [
- 12345, 14567, 16789, 18901, 21023, 23145, 25267, 27389, 29501, 31623, 33745, 35867, 37989,
- 40101, 42223, 44345, 46467, 48589, 50701, 52823, 54945, 57067, 59189, 61301, 63423, 65545,
- 67667, 69789, 71901, 74023,
- ],
- },
- {
- id: 18,
- pageTitle: 'Blog Posts - Tech Insights',
- status: 'Online',
- eventCount: 8567,
- users: 34234,
- viewsPerUser: 6.3,
- averageTime: '2m 50s',
- conversions: [
- 23456, 25678, 27890, 30102, 32324, 34546, 36768, 38980, 41202, 43424, 45646, 47868, 50080,
- 52302, 54524, 56746, 58968, 61180, 63402, 65624, 67846, 70068, 72290, 74502, 76724, 78946,
- 81168, 83380, 85602, 87824,
- ],
- },
- {
- id: 19,
- pageTitle: 'Events - Webinars',
- status: 'Offline',
- eventCount: 3456,
- users: 19234,
- viewsPerUser: 4.5,
- averageTime: '3m 20s',
- conversions: [
- 123456, 145678, 167890, 190012, 212324, 234546, 256768, 278980, 301202, 323424, 345646,
- 367868, 390080, 412302, 434524, 456746, 478968, 501180, 523402, 545624, 567846, 590068,
- 612290, 634502, 656724, 678946, 701168, 723380, 745602, 767824,
- ],
- },
- {
- id: 20,
- pageTitle: 'Support - Contact Us',
- status: 'Online',
- eventCount: 6734,
- users: 27645,
- viewsPerUser: 3.9,
- averageTime: '2m 55s',
- conversions: [
- 234567, 256789, 278901, 301023, 323245, 345467, 367689, 389801, 412023, 434245, 456467,
- 478689, 500801, 523023, 545245, 567467, 589689, 611801, 634023, 656245, 678467, 700689,
- 722801, 745023, 767245, 789467, 811689, 833801, 856023, 878245,
- ],
- },
- {
- id: 21,
- pageTitle: 'Case Studies - Success Stories',
- status: 'Offline',
- eventCount: 4567,
- users: 19345,
- viewsPerUser: 6.1,
- averageTime: '3m 10s',
- conversions: [
- 34567, 36789, 38901, 41023, 43145, 45267, 47389, 49501, 51623, 53745, 55867, 57989, 60101,
- 62223, 64345, 66467, 68589, 70701, 72823, 74945, 77067, 79189, 81301, 83423, 85545, 87667,
- 89789, 91901, 94023, 96145,
- ],
- },
- {
- id: 22,
- pageTitle: 'News - Industry Updates',
- status: 'Online',
- eventCount: 7856,
- users: 34567,
- viewsPerUser: 5.7,
- averageTime: '3m 05s',
- conversions: [
- 45678, 47890, 50102, 52324, 54546, 56768, 58980, 61202, 63424, 65646, 67868, 70080, 72302,
- 74524, 76746, 78968, 81180, 83402, 85624, 87846, 90068, 92290, 94502, 96724, 98946, 101168,
- 103380, 105602, 107824, 110046,
- ],
- },
- {
- id: 23,
- pageTitle: 'Forum - User Discussions',
- status: 'Offline',
- eventCount: 5678,
- users: 23456,
- viewsPerUser: 4.2,
- averageTime: '2m 40s',
- conversions: [
- 56789, 58901, 61023, 63145, 65267, 67389, 69501, 71623, 73745, 75867, 77989, 80101, 82223,
- 84345, 86467, 88589, 90701, 92823, 94945, 97067, 99189, 101301, 103423, 105545, 107667,
- 109789, 111901, 114023, 116145, 118267,
- ],
- },
- {
- id: 24,
- pageTitle: 'Documentation - API Reference',
- status: 'Online',
- eventCount: 6789,
- users: 27689,
- viewsPerUser: 5.0,
- averageTime: '3m 00s',
- conversions: [
- 67890, 70102, 72324, 74546, 76768, 78980, 81202, 83424, 85646, 87868, 90080, 92302, 94524,
- 96746, 98968, 101180, 103402, 105624, 107846, 110068, 112290, 114502, 116724, 118946, 121168,
- 123380, 125602, 127824, 130046, 132268,
- ],
- },
- {
- id: 25,
- pageTitle: 'Services - Consulting',
- status: 'Offline',
- eventCount: 4563,
- users: 19240,
- viewsPerUser: 6.4,
- averageTime: '3m 25s',
- conversions: [
- 345678, 367890, 390012, 412324, 434546, 456768, 478980, 501202, 523424, 545646, 567868,
- 590080, 612302, 634524, 656746, 678968, 701180, 723402, 745624, 767846, 790068, 812290,
- 834502, 856724, 878946, 901168, 923380, 945602, 967824, 990046,
- ],
- },
- {
- id: 26,
- pageTitle: 'Feedback - User Reviews',
- status: 'Online',
- eventCount: 8564,
- users: 34240,
- viewsPerUser: 6.2,
- averageTime: '3m 15s',
- conversions: [
- 123478, 145690, 167912, 190134, 212356, 234578, 256790, 279012, 301234, 323456, 345678,
- 367890, 390012, 412234, 434456, 456678, 478890, 501012, 523234, 545456, 567678, 589890,
- 612012, 634234, 656456, 678678, 700890, 723012, 745234, 767456,
- ],
- },
- {
- id: 27,
- pageTitle: 'Profiles - Team Members',
- status: 'Offline',
- eventCount: 5634,
- users: 23423,
- viewsPerUser: 5.5,
- averageTime: '2m 45s',
- conversions: [
- 345123, 367345, 389567, 411789, 434012, 456234, 478456, 500678, 522901, 545123, 567345,
- 589567, 611789, 634012, 656234, 678456, 700678, 722901, 745123, 767345, 789567, 811789,
- 834012, 856234, 878456, 900678, 922901, 945123, 967345, 989567,
- ],
- },
- {
- id: 28,
- pageTitle: 'Notifications - Alerts',
- status: 'Online',
- eventCount: 6745,
- users: 27654,
- viewsPerUser: 4.9,
- averageTime: '3m 10s',
- conversions: [
- 456123, 478345, 500567, 522789, 545012, 567234, 589456, 611678, 633901, 656123, 678345,
- 700567, 722789, 745012, 767234, 789456, 811678, 833901, 856123, 878345, 900567, 922789,
- 945012, 967234, 989456, 1011678, 1033901, 1056123, 1078345, 1100567,
- ],
- },
- {
- id: 29,
- pageTitle: 'Dashboard - Metrics',
- status: 'Offline',
- eventCount: 5678,
- users: 23456,
- viewsPerUser: 6.3,
- averageTime: '2m 50s',
- conversions: [
- 567890, 590112, 612334, 634556, 656778, 678990, 701212, 723434, 745656, 767878, 790100,
- 812322, 834544, 856766, 878988, 901210, 923432, 945654, 967876, 990098, 1012320, 1034542,
- 1056764, 1078986, 1101208, 1123430, 1145652, 1167874, 1190096, 1212318,
- ],
- },
- {
- id: 30,
- pageTitle: 'Reports - Monthly Analysis',
- status: 'Online',
- eventCount: 7890,
- users: 34567,
- viewsPerUser: 5.9,
- averageTime: '3m 20s',
- conversions: [
- 678901, 701123, 723345, 745567, 767789, 790011, 812233, 834455, 856677, 878899, 901121,
- 923343, 945565, 967787, 990009, 1012231, 1034453, 1056675, 1078897, 1101119, 1123341, 1145563,
- 1167785, 1190007, 1212229, 1234451, 1256673, 1278895, 1301117, 1323339,
- ],
- },
- {
- id: 31,
- pageTitle: 'Training - Employee Onboarding',
- status: 'Offline',
- eventCount: 3456,
- users: 19234,
- viewsPerUser: 6.1,
- averageTime: '3m 10s',
- conversions: [
- 789012, 811234, 833456, 855678, 877890, 900112, 922334, 944556, 966778, 989000, 1011222,
- 1033444, 1055666, 1077888, 1100110, 1122332, 1144554, 1166776, 1188998, 1211220, 1233442,
- 1255664, 1277886, 1300108, 1322330, 1344552, 1366774, 1388996, 1411218, 1433440,
- ],
- },
- {
- id: 32,
- pageTitle: 'Resources - Knowledge Base',
- status: 'Online',
- eventCount: 5678,
- users: 23456,
- viewsPerUser: 4.7,
- averageTime: '3m 25s',
- conversions: [
- 890123, 912345, 934567, 956789, 979012, 1001234, 1023456, 1045678, 1067890, 1090123, 1112345,
- 1134567, 1156789, 1179012, 1201234, 1223456, 1245678, 1267890, 1290123, 1312345, 1334567,
- 1356789, 1379012, 1401234, 1423456, 1445678, 1467890, 1490123, 1512345, 1534567,
- ],
- },
- {
- id: 33,
- pageTitle: 'Settings - Privacy Controls',
- status: 'Offline',
- eventCount: 6789,
- users: 27689,
- viewsPerUser: 5.8,
- averageTime: '3m 05s',
- conversions: [
- 901234, 923456, 945678, 967890, 990112, 1012334, 1034556, 1056778, 1079000, 1101222, 1123444,
- 1145666, 1167888, 1190110, 1212332, 1234554, 1256776, 1278998, 1301220, 1323442, 1345664,
- 1367886, 1390108, 1412330, 1434552, 1456774, 1478996, 1501218, 1523440, 1545662,
- ],
- },
- {
- id: 34,
- pageTitle: 'Integrations - Third-Party Services',
- status: 'Online',
- eventCount: 4567,
- users: 19345,
- viewsPerUser: 4.4,
- averageTime: '2m 50s',
- conversions: [
- 123457, 145679, 167891, 190113, 212335, 234557, 256779, 279001, 301223, 323445, 345667,
- 367889, 390011, 412233, 434455, 456677, 478899, 501121, 523343, 545565, 567787, 590009,
- 612231, 634453, 656675, 678897, 701119, 723341, 745563, 767785,
- ],
- },
- {
- id: 35,
- pageTitle: 'Account - Billing Information',
- status: 'Offline',
- eventCount: 7890,
- users: 34567,
- viewsPerUser: 5.4,
- averageTime: '3m 00s',
- conversions: [
- 234568, 256790, 278912, 301134, 323356, 345578, 367790, 390012, 412234, 434456, 456678,
- 478890, 501112, 523334, 545556, 567778, 590000, 612222, 634444, 656666, 678888, 701110,
- 723332, 745554, 767776, 789998, 812220, 834442, 856664, 878886,
- ],
- },
-];
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
deleted file mode 100644
index ab093005bf3..00000000000
--- a/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Chip from '@mui/material/Chip';
-import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid';
-import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
-
-type SparkLineData = number[];
-
-function getDaysInMonth(month: number, year: number) {
- const date = new Date(year, month, 0);
- const monthName = date.toLocaleDateString('en-US', {
- month: 'short',
- });
- const daysInMonth = date.getDate();
- const days = [];
- let i = 1;
- while (days.length < daysInMonth) {
- days.push(`${monthName} ${i}`);
- i += 1;
- }
- return days;
-}
-
-function renderSparklineCell(params: GridCellParams) {
- const data = getDaysInMonth(4, 2024);
- const { value, colDef } = params;
-
- if (!value || value.length === 0) {
- return null;
- }
-
- return (
-
-
-
- );
-}
-
-function renderStatus(status: 'In Stock' | 'Out of Stock' | 'Low Stock') {
- const colors: { [index: string]: 'success' | 'error' | 'default' } = {
- 'In Stock': 'success',
- 'Out of Stock': 'error',
- 'Low Stock': 'default',
- };
-
- return ;
-}
-
-export function renderAvatar(params: GridCellParams<{ name: string; color: string }, any, any>) {
- if (params.value == null) {
- return '';
- }
-
- return (
-
- {params.value.name.toUpperCase().substring(0, 1)}
-
- );
-}
-
-export const columns: GridColDef[] = [
- { field: 'productName', headerName: 'Product Name', flex: 1.5, minWidth: 200 },
- {
- field: 'status',
- headerName: 'Status',
- flex: 1,
- minWidth: 80,
- renderCell: (params) => renderStatus(params.value as any),
- },
- {
- field: 'totalOrders',
- headerName: 'Total Orders',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 80,
- },
- {
- field: 'revenue',
- headerName: 'Revenue',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 100,
- },
- {
- field: 'avgOrderValue',
- headerName: 'Avg Order Value',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 120,
- },
- {
- field: 'processingTime',
- headerName: 'Processing Time',
- headerAlign: 'right',
- align: 'right',
- flex: 1,
- minWidth: 100,
- },
- {
- field: 'dailyOrders',
- headerName: 'Daily Orders',
- flex: 1,
- minWidth: 150,
- renderCell: renderSparklineCell,
- },
-];
-
-export const rows: GridRowsProp = [
- {
- id: 1,
- productName: 'Premium Wireless Headphones',
- status: 'In Stock',
- totalOrders: 8345,
- revenue: '$212,423',
- avgOrderValue: '$185.50',
- processingTime: '2d 15h',
- dailyOrders: [
- 65, 72, 68, 82, 75, 78, 88, 95, 89, 85, 92, 85, 88, 91, 87, 85, 89, 92, 95, 88, 85, 90, 92,
- 89, 86, 88, 91, 94, 90, 87,
- ],
- },
- {
- id: 2,
- productName: 'Smart Fitness Watch',
- status: 'Low Stock',
- totalOrders: 12567,
- revenue: '$458,945',
- avgOrderValue: '$149.99',
- processingTime: '1d 8h',
- dailyOrders: [
- 120, 115, 125, 118, 130, 128, 135, 142, 138, 145, 150, 148, 155, 160, 158, 165, 170, 168, 175,
- 172, 178, 180, 176, 182, 185, 188, 192, 190, 195, 198,
- ],
- },
- {
- id: 3,
- productName: 'Organic Coffee Beans',
- status: 'In Stock',
- totalOrders: 25890,
- revenue: '$129,450',
- avgOrderValue: '$24.99',
- processingTime: '1d 2h',
- dailyOrders: [
- 250, 245, 260, 255, 265, 270, 268, 275, 280, 278, 285, 290, 288, 295, 300, 298, 305, 310, 308,
- 315, 320, 318, 325, 330, 328, 335, 340, 338, 345, 350,
- ],
- },
- {
- id: 4,
- productName: 'Gaming Laptop Pro',
- status: 'Out of Stock',
- totalOrders: 3456,
- revenue: '$4,147,200',
- avgOrderValue: '$1,199.99',
- processingTime: '3d 12h',
- dailyOrders: [
- 35, 32, 38, 36, 40, 42, 39, 45, 43, 48, 46, 50, 48, 52, 50, 55, 53, 58, 56, 60, 58, 62, 60,
- 65, 63, 68, 66, 70, 68, 72,
- ],
- },
- {
- id: 5,
- productName: 'Yoga Mat Premium',
- status: 'In Stock',
- totalOrders: 15678,
- revenue: '$548,730',
- avgOrderValue: '$34.99',
- processingTime: '1d 4h',
- dailyOrders: [
- 155, 150, 160, 158, 165, 170, 168, 175, 172, 178, 180, 176, 182, 185, 188, 192, 190, 195, 198,
- 200, 198, 205, 208, 210, 212, 215, 218, 220, 222, 225,
- ],
- },
- {
- id: 6,
- productName: 'Smartphone Case',
- status: 'In Stock',
- totalOrders: 42567,
- revenue: '$425,670',
- avgOrderValue: '$19.99',
- processingTime: '1d 0h',
- dailyOrders: [
- 420, 415, 425, 430, 428, 435, 440, 438, 445, 450, 448, 455, 460, 458, 465, 470, 468, 475, 480,
- 478, 485, 490, 488, 495, 500, 498, 505, 510, 508, 515,
- ],
- },
- {
- id: 7,
- productName: 'Professional Camera Kit',
- status: 'Low Stock',
- totalOrders: 2345,
- revenue: '$2,345,000',
- avgOrderValue: '$999.99',
- processingTime: '2d 8h',
- dailyOrders: [
- 22, 20, 25, 23, 28, 26, 30, 28, 32, 30, 35, 33, 38, 36, 40, 38, 42, 40, 45, 43, 48, 46, 50,
- 48, 52, 50, 55, 53, 58, 56,
- ],
- },
- {
- id: 8,
- productName: 'Wireless Charging Pad',
- status: 'In Stock',
- totalOrders: 18934,
- revenue: '$567,890',
- avgOrderValue: '$29.99',
- processingTime: '1d 6h',
- dailyOrders: [
- 180, 175, 185, 182, 188, 192, 190, 195, 198, 200, 198, 205, 208, 210, 212, 215, 218, 220, 222,
- 225, 228, 230, 232, 235, 238, 240, 242, 245, 248, 250,
- ],
- },
- {
- id: 9,
- productName: 'Smart Home Hub',
- status: 'In Stock',
- totalOrders: 7890,
- revenue: '$789,000',
- avgOrderValue: '$99.99',
- processingTime: '2d 0h',
- dailyOrders: [
- 75, 72, 78, 76, 80, 82, 79, 85, 83, 88, 86, 90, 88, 92, 90, 95, 93, 98, 96, 100, 98, 102, 100,
- 105, 103, 108, 106, 110, 108, 112,
- ],
- },
- {
- id: 10,
- productName: 'Ergonomic Office Chair',
- status: 'Low Stock',
- totalOrders: 4567,
- revenue: '$1,370,100',
- avgOrderValue: '$299.99',
- processingTime: '3d 0h',
- dailyOrders: [
- 42, 40, 45, 43, 48, 46, 50, 48, 52, 50, 55, 53, 58, 56, 60, 58, 62, 60, 65, 63, 68, 66, 70,
- 68, 72, 70, 75, 73, 78, 76,
- ],
- },
- {
- id: 11,
- productName: 'Portable Power Bank',
- status: 'In Stock',
- totalOrders: 23456,
- revenue: '$703,680',
- avgOrderValue: '$29.99',
- processingTime: '1d 4h',
- dailyOrders: [
- 230, 225, 235, 232, 238, 242, 240, 245, 248, 250, 248, 255, 258, 260, 262, 265, 268, 270, 272,
- 275, 278, 280, 282, 285, 288, 290, 292, 295, 298, 300,
- ],
- },
- {
- id: 12,
- productName: 'Mechanical Keyboard',
- status: 'In Stock',
- totalOrders: 9876,
- revenue: '$987,600',
- avgOrderValue: '$99.99',
- processingTime: '1d 12h',
- dailyOrders: [
- 95, 92, 98, 96, 100, 102, 99, 105, 103, 108, 106, 110, 108, 112, 110, 115, 113, 118, 116, 120,
- 118, 122, 120, 125, 123, 128, 126, 130, 128, 132,
- ],
- },
-];
diff --git a/examples/core/auth-nextjs-themed/auth.ts b/examples/core/auth-nextjs-themed/auth.ts
deleted file mode 100644
index def197e2280..00000000000
--- a/examples/core/auth-nextjs-themed/auth.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import NextAuth from 'next-auth';
-import GitHub from 'next-auth/providers/github';
-import Google from 'next-auth/providers/google';
-import Credentials from 'next-auth/providers/credentials';
-import type { Provider } from 'next-auth/providers';
-
-const providers: Provider[] = [
- GitHub({
- clientId: process.env.GITHUB_CLIENT_ID,
- clientSecret: process.env.GITHUB_CLIENT_SECRET,
- }),
- Google({
- clientId: process.env.GOOGLE_CLIENT_ID,
- clientSecret: process.env.GOOGLE_CLIENT_SECRET,
- }),
- Credentials({
- credentials: {
- email: { label: 'Email Address', type: 'email' },
- password: { label: 'Password', type: 'password' },
- },
- authorize(c) {
- if (c.password === '@demo1' && c.email === 'toolpad-demo@mui.com') {
- return {
- id: 'test',
- name: 'Toolpad Demo',
- email: String(c.email),
- };
- }
- return null;
- },
- }),
-];
-
-export const providerMap = providers.map((provider) => {
- if (typeof provider === 'function') {
- const providerData = provider();
- return { id: providerData.id, name: providerData.name };
- }
- return { id: provider.id, name: provider.name };
-});
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers,
- secret: process.env.AUTH_SECRET,
- pages: {
- signIn: '/auth/signin',
- },
- callbacks: {
- authorized({ auth: session, request: { nextUrl } }) {
- const isLoggedIn = !!session?.user;
- const isPublicPage = nextUrl.pathname.startsWith('/public');
-
- if (isPublicPage || isLoggedIn) {
- return true;
- }
-
- return false; // Redirect unauthenticated users to login page
- },
- },
-});
diff --git a/examples/core/auth-nextjs-themed/middleware.ts b/examples/core/auth-nextjs-themed/middleware.ts
deleted file mode 100644
index 02c48f4db60..00000000000
--- a/examples/core/auth-nextjs-themed/middleware.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { auth as middleware } from './auth';
-
-export const config = {
- // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
- matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
-};
diff --git a/examples/core/auth-nextjs-themed/next-env.d.ts b/examples/core/auth-nextjs-themed/next-env.d.ts
deleted file mode 100644
index 1b3be0840f3..00000000000
--- a/examples/core/auth-nextjs-themed/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-///
-///
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/core/auth-nextjs-themed/next.config.mjs b/examples/core/auth-nextjs-themed/next.config.mjs
deleted file mode 100644
index f26ac370c56..00000000000
--- a/examples/core/auth-nextjs-themed/next.config.mjs
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-export default nextConfig;
diff --git a/examples/core/auth-nextjs-themed/package.json b/examples/core/auth-nextjs-themed/package.json
deleted file mode 100644
index 4b6fbbb8f85..00000000000
--- a/examples/core/auth-nextjs-themed/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "name": "auth-nextjs-themed",
- "version": "0.1.0",
- "scripts": {
- "dev": "next dev",
- "start": "next start",
- "lint": "next lint"
- },
- "dependencies": {
- "@emotion/cache": "^11",
- "@emotion/react": "^11",
- "@emotion/styled": "^11",
- "@mui/icons-material": "^7",
- "@mui/material": "^7",
- "@mui/material-nextjs": "^7",
- "@mui/x-charts": "^8",
- "@mui/x-tree-view": "^8",
- "@mui/x-data-grid": "^8",
- "dayjs": "^1",
- "clsx": "^2",
- "@react-spring/web": "^9",
- "@toolpad/core": "^0.14.0",
- "next": "^15",
- "next-auth": "^5.0.0-beta.25",
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
- "zod": "^3.24.2"
- },
- "devDependencies": {
- "@types/node": "^20.17.30",
- "@types/react": "^19.0.0",
- "@types/react-dom": "^19.0.0",
- "eslint": "^8",
- "eslint-config-next": "^15",
- "typescript": "^5"
- }
-}
diff --git a/examples/core/auth-nextjs-themed/theme.ts b/examples/core/auth-nextjs-themed/theme.ts
deleted file mode 100644
index 4536bd4389a..00000000000
--- a/examples/core/auth-nextjs-themed/theme.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import { createTheme } from '@mui/material/styles';
-import getMPTheme from './theme/getMPTheme';
-
-const lightTheme = createTheme(getMPTheme('light'));
-const darkTheme = createTheme(getMPTheme('dark'));
-
-const theme = {
- light: lightTheme,
- dark: darkTheme,
-};
-
-export default theme;
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx b/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index 6199433d4ea..00000000000
--- a/examples/core/auth-nextjs-themed/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-export const dataDisplayCustomizations: Components = {
- MuiList: {
- styleOverrides: {
- root: {
- padding: '8px',
- display: 'flex',
- flexDirection: 'column',
- gap: 0,
- },
- },
- },
- MuiListSubheader: {
- styleOverrides: {
- root: {
- backgroundColor: 'transparent',
- },
- },
- },
- MuiListItem: {
- styleOverrides: {
- root: ({ theme }) => ({
- [`& .${svgIconClasses.root}`]: {
- width: '1rem',
- height: '1rem',
- color: theme.palette.text.secondary,
- },
- [`& .${typographyClasses.root}`]: {
- fontWeight: 500,
- },
- [`& .${buttonBaseClasses.root}`]: {
- display: 'flex',
- gap: 8,
- padding: '2px 8px',
- borderRadius: theme.shape.borderRadius,
- opacity: 0.7,
- '&.Mui-selected': {
- opacity: 1,
- backgroundColor: alpha(theme.palette.action.selected, 0.3),
- [`& .${svgIconClasses.root}`]: {
- color: theme.palette.text.primary,
- },
- '&:focus-visible': {
- backgroundColor: alpha(theme.palette.action.selected, 0.3),
- },
- '&:hover': {
- backgroundColor: alpha(theme.palette.action.selected, 0.5),
- },
- },
- '&:focus-visible': {
- backgroundColor: 'transparent',
- },
- },
- }),
- },
- },
- MuiListItemText: {
- styleOverrides: {
- primary: ({ theme }) => ({
- fontSize: theme.typography.body2.fontSize,
- fontWeight: 500,
- lineHeight: theme.typography.body2.lineHeight,
- }),
- secondary: ({ theme }) => ({
- fontSize: theme.typography.caption.fontSize,
- lineHeight: theme.typography.caption.lineHeight,
- }),
- },
- },
- MuiListItemIcon: {
- styleOverrides: {
- root: {
- minWidth: 0,
- justifyContent: 'center',
- },
- },
- },
- MuiPaper: {
- styleOverrides: {
- root: ({ theme }) => ({
- backgroundImage: 'none',
- backgroundColor: theme.palette.background.paper,
- border: '1px solid',
- borderColor: theme.palette.divider,
- ...theme.applyStyles('dark', {
- backgroundImage: 'none',
- backgroundColor: theme.palette.background.paper,
- borderColor: theme.palette.divider,
- }),
- boxShadow: 'none',
- }),
- },
- },
- MuiChip: {
- defaultProps: {
- size: 'small',
- },
- styleOverrides: {
- root: ({ theme }) => ({
- border: '1px solid',
- borderRadius: '999px',
- [`& .${chipClasses.label}`]: {
- fontWeight: 600,
- },
- variants: [
- {
- props: {
- color: 'default',
- },
- style: {
- borderColor: gray[200],
- backgroundColor: gray[100],
- [`& .${chipClasses.label}`]: {
- color: gray[500],
- },
- [`& .${chipClasses.icon}`]: {
- color: gray[500],
- },
- ...theme.applyStyles('dark', {
- borderColor: gray[700],
- backgroundColor: gray[800],
- [`& .${chipClasses.label}`]: {
- color: gray[300],
- },
- [`& .${chipClasses.icon}`]: {
- color: gray[300],
- },
- }),
- },
- },
- {
- props: {
- color: 'success',
- },
- style: {
- borderColor: green[200],
- backgroundColor: green[50],
- [`& .${chipClasses.label}`]: {
- color: green[500],
- },
- [`& .${chipClasses.icon}`]: {
- color: green[500],
- },
- ...theme.applyStyles('dark', {
- borderColor: green[800],
- backgroundColor: green[900],
- [`& .${chipClasses.label}`]: {
- color: green[300],
- },
- [`& .${chipClasses.icon}`]: {
- color: green[300],
- },
- }),
- },
- },
- {
- props: {
- color: 'error',
- },
- style: {
- borderColor: red[100],
- backgroundColor: red[50],
- [`& .${chipClasses.label}`]: {
- color: red[500],
- },
- [`& .${chipClasses.icon}`]: {
- color: red[500],
- },
- ...theme.applyStyles('dark', {
- borderColor: red[800],
- backgroundColor: red[900],
- [`& .${chipClasses.label}`]: {
- color: red[200],
- },
- [`& .${chipClasses.icon}`]: {
- color: red[300],
- },
- }),
- },
- },
- {
- props: { size: 'small' },
- style: {
- maxHeight: 20,
- [`& .${chipClasses.label}`]: {
- fontSize: theme.typography.caption.fontSize,
- },
- [`& .${svgIconClasses.root}`]: {
- fontSize: theme.typography.caption.fontSize,
- },
- },
- },
- {
- props: { size: 'medium' },
- style: {
- [`& .${chipClasses.label}`]: {
- fontSize: theme.typography.caption.fontSize,
- },
- },
- },
- ],
- }),
- },
- },
- MuiTablePagination: {
- styleOverrides: {
- actions: {
- display: 'flex',
- gap: 8,
- marginRight: 6,
- [`& .${iconButtonClasses.root}`]: {
- minWidth: 0,
- width: 36,
- height: 36,
- },
- },
- },
- },
- MuiIcon: {
- defaultProps: {
- fontSize: 'small',
- },
- styleOverrides: {
- root: {
- variants: [
- {
- props: {
- fontSize: 'small',
- },
- style: {
- fontSize: '1rem',
- },
- },
- ],
- },
- },
- },
- MuiDataGrid: {
- styleOverrides: {
- root: () => ({
- '&.MuiDataGrid-root--densityCompact .MuiDataGrid-actionsCell button': {
- width: '28px',
- height: '28px',
- padding: '2px',
- },
- }),
- },
- },
-};
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx b/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx
deleted file mode 100644
index 19b5942825b..00000000000
--- a/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-export const feedbackCustomizations: Components = {
- MuiAlert: {
- styleOverrides: {
- root: ({ theme }) => ({
- borderRadius: 10,
- color: theme.palette.text.primary,
- border: `1px solid ${alpha(gray[300], 0.9)}`,
- ...theme.applyStyles('dark', {
- border: `1px solid ${alpha(gray[700], 0.9)}`,
- }),
- }),
- },
- },
- MuiDialog: {
- styleOverrides: {
- root: ({ theme }) => ({
- '& .MuiDialog-paper': {
- borderRadius: '10px',
- border: '1px solid',
- borderColor: theme.palette.divider,
- },
- }),
- },
- },
- MuiLinearProgress: {
- styleOverrides: {
- root: ({ theme }) => ({
- height: 8,
- borderRadius: 8,
- backgroundColor: gray[200],
- ...theme.applyStyles('dark', {
- backgroundColor: gray[800],
- }),
- }),
- },
- },
-};
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/index.ts b/examples/core/auth-nextjs-themed/theme/customizations/index.ts
deleted file mode 100644
index 6c7c04eeb5b..00000000000
--- a/examples/core/auth-nextjs-themed/theme/customizations/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
deleted file mode 100644
index f163a6e8bda..00000000000
--- a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,476 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-export const inputsCustomizations: Components = {
- MuiButtonBase: {
- defaultProps: {
- disableTouchRipple: true,
- disableRipple: true,
- },
- styleOverrides: {
- root: ({ theme }) => ({
- boxSizing: 'border-box',
- transition: 'all 100ms ease-in',
- '&:focus-visible': {
- outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
- outlineOffset: '2px',
- },
- }),
- },
- },
- MuiButton: {
- styleOverrides: {
- root: ({ theme }) => ({
- boxShadow: 'none',
- borderRadius: theme.shape.borderRadius,
- textTransform: 'none',
- variants: [
- {
- props: {
- size: 'small',
- },
- style: {
- height: '2.25rem',
- padding: '8px 12px',
- },
- },
- {
- props: {
- size: 'medium',
- },
- style: {
- height: '2.5rem', // 40px
- },
- },
- {
- props: {
- color: 'primary',
- variant: 'contained',
- },
- style: {
- color: 'white',
- backgroundColor: gray[900],
- backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
- boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
- border: `1px solid ${gray[700]}`,
- '&:hover': {
- backgroundImage: 'none',
- backgroundColor: gray[700],
- boxShadow: 'none',
- },
- '&:active': {
- backgroundColor: gray[800],
- },
- ...theme.applyStyles('dark', {
- color: 'black',
- backgroundColor: gray[50],
- backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
- boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)',
- border: `1px solid ${gray[50]}`,
- '&:hover': {
- backgroundImage: 'none',
- backgroundColor: gray[300],
- boxShadow: 'none',
- },
- '&:active': {
- backgroundColor: gray[400],
- },
- }),
- },
- },
- {
- props: {
- color: 'secondary',
- variant: 'contained',
- },
- style: {
- color: 'white',
- backgroundColor: brand[300],
- backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
- boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
- border: `1px solid ${brand[500]}`,
- '&:hover': {
- backgroundColor: brand[700],
- boxShadow: 'none',
- },
- '&:active': {
- backgroundColor: brand[700],
- backgroundImage: 'none',
- },
- },
- },
- {
- props: {
- variant: 'outlined',
- },
- style: {
- color: theme.palette.text.primary,
- border: '1px solid',
- borderColor: gray[200],
- backgroundColor: alpha(gray[50], 0.3),
- '&:hover': {
- backgroundColor: gray[100],
- borderColor: gray[300],
- },
- '&:active': {
- backgroundColor: gray[200],
- },
- ...theme.applyStyles('dark', {
- backgroundColor: gray[800],
- borderColor: gray[700],
-
- '&:hover': {
- backgroundColor: gray[900],
- borderColor: gray[600],
- },
- '&:active': {
- backgroundColor: gray[900],
- },
- }),
- },
- },
- {
- props: {
- color: 'secondary',
- variant: 'outlined',
- },
- style: {
- color: brand[700],
- border: '1px solid',
- borderColor: brand[200],
- backgroundColor: brand[50],
- '&:hover': {
- backgroundColor: brand[100],
- borderColor: brand[400],
- },
- '&:active': {
- backgroundColor: alpha(brand[200], 0.7),
- },
- ...theme.applyStyles('dark', {
- color: brand[50],
- border: '1px solid',
- borderColor: brand[900],
- backgroundColor: alpha(brand[900], 0.3),
- '&:hover': {
- borderColor: brand[700],
- backgroundColor: alpha(brand[900], 0.6),
- },
- '&:active': {
- backgroundColor: alpha(brand[900], 0.5),
- },
- }),
- },
- },
- {
- props: {
- variant: 'text',
- },
- style: {
- color: gray[600],
- '&:hover': {
- backgroundColor: gray[100],
- },
- '&:active': {
- backgroundColor: gray[200],
- },
- ...theme.applyStyles('dark', {
- color: gray[50],
- '&:hover': {
- backgroundColor: gray[700],
- },
- '&:active': {
- backgroundColor: alpha(gray[700], 0.7),
- },
- }),
- },
- },
- {
- props: {
- color: 'secondary',
- variant: 'text',
- },
- style: {
- color: brand[700],
- '&:hover': {
- backgroundColor: alpha(brand[100], 0.5),
- },
- '&:active': {
- backgroundColor: alpha(brand[200], 0.7),
- },
- ...theme.applyStyles('dark', {
- color: brand[100],
- '&:hover': {
- backgroundColor: alpha(brand[900], 0.5),
- },
- '&:active': {
- backgroundColor: alpha(brand[900], 0.3),
- },
- }),
- },
- },
- ],
- '& .MuiButton-loadingIndicator': {
- color: gray[400],
- ...theme.applyStyles('dark', {
- color: gray[600],
- }),
- },
- }),
- },
- },
- MuiIconButton: {
- styleOverrides: {
- root: ({ theme }) => ({
- boxShadow: 'none',
- borderRadius: theme.shape.borderRadius,
- textTransform: 'none',
- fontWeight: theme.typography.fontWeightMedium,
- letterSpacing: 0,
- color: theme.palette.text.primary,
- border: '1px solid ',
- borderColor: gray[200],
- backgroundColor: alpha(gray[50], 0.3),
- '&:hover': {
- backgroundColor: gray[100],
- borderColor: gray[300],
- },
- '&:active': {
- backgroundColor: gray[200],
- },
- ...theme.applyStyles('dark', {
- backgroundColor: gray[800],
- borderColor: gray[700],
- '&:hover': {
- backgroundColor: gray[900],
- borderColor: gray[600],
- },
- '&:active': {
- backgroundColor: gray[900],
- },
- }),
- variants: [
- {
- props: {
- size: 'small',
- },
- style: {
- width: '2.25rem',
- height: '2.25rem',
- padding: '0.25rem',
- [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
- },
- },
- {
- props: {
- size: 'medium',
- },
- style: {
- width: '2.5rem',
- height: '2.5rem',
- },
- },
- ],
- }),
- },
- },
- MuiToggleButtonGroup: {
- styleOverrides: {
- root: ({ theme }) => ({
- borderRadius: '10px',
- boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
- [`& .${toggleButtonGroupClasses.selected}`]: {
- color: brand[500],
- },
- ...theme.applyStyles('dark', {
- [`& .${toggleButtonGroupClasses.selected}`]: {
- color: '#fff',
- },
- boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
- }),
- }),
- },
- },
- MuiToggleButton: {
- styleOverrides: {
- root: ({ theme }) => ({
- padding: '12px 16px',
- textTransform: 'none',
- borderRadius: '10px',
- fontWeight: 500,
- ...theme.applyStyles('dark', {
- color: gray[400],
- boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
- [`&.${toggleButtonClasses.selected}`]: {
- color: brand[300],
- },
- }),
- }),
- },
- },
- MuiCheckbox: {
- defaultProps: {
- disableRipple: true,
- icon: ,
- checkedIcon: ,
- indeterminateIcon: ,
- },
- styleOverrides: {
- root: ({ theme }) => ({
- margin: 10,
- height: 16,
- width: 16,
- borderRadius: 5,
- border: '1px solid ',
- borderColor: alpha(gray[300], 0.8),
- boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
- backgroundColor: alpha(gray[100], 0.4),
- transition: 'border-color, background-color, 120ms ease-in',
- '&:hover': {
- borderColor: brand[300],
- },
- '&.Mui-focusVisible': {
- outline: `3px solid ${alpha(brand[500], 0.5)}`,
- outlineOffset: '2px',
- borderColor: brand[400],
- },
- '&.Mui-checked': {
- color: 'white',
- backgroundColor: brand[500],
- borderColor: brand[500],
- boxShadow: `none`,
- '&:hover': {
- backgroundColor: brand[600],
- },
- },
- ...theme.applyStyles('dark', {
- borderColor: alpha(gray[700], 0.8),
- boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
- backgroundColor: alpha(gray[900], 0.8),
- '&:hover': {
- borderColor: brand[300],
- },
- '&.Mui-focusVisible': {
- borderColor: brand[400],
- outline: `3px solid ${alpha(brand[500], 0.5)}`,
- outlineOffset: '2px',
- },
- }),
- }),
- },
- },
- MuiInputBase: {
- styleOverrides: {
- root: {
- border: 'none',
- marginTop: 6,
- },
- input: {
- '&::placeholder': {
- opacity: 0.7,
- color: gray[500],
- },
- },
- },
- },
- MuiInputLabel: {
- styleOverrides: {
- root: {
- transform: 'translate(4px, -11px) scale(0.75)',
- [`&.${outlinedInputClasses.focused}`]: {
- transform: 'translate(4px, -12px) scale(0.75)',
- },
- },
- },
- },
- MuiOutlinedInput: {
- styleOverrides: {
- input: {
- padding: 0,
- },
- root: ({ theme }) => ({
- padding: '8px 12px',
- color: theme.palette.text.primary,
- borderRadius: theme.shape.borderRadius,
- border: `1px solid ${theme.palette.divider}`,
- backgroundColor: theme.palette.background.default,
- transition: 'border 120ms ease-in',
- '&:hover': {
- borderColor: gray[400],
- },
- [`&.${outlinedInputClasses.focused}`]: {
- outline: `2px solid ${alpha(brand[500], 0.5)}`,
- borderColor: brand[400],
- },
- ...theme.applyStyles('dark', {
- '&:hover': {
- borderColor: gray[500],
- },
- }),
- variants: [
- {
- props: {
- size: 'small',
- },
- style: {
- height: '2.25rem',
- },
- },
- {
- props: {
- size: 'medium',
- },
- style: {
- height: '2.5rem',
- },
- },
- ],
- }),
- notchedOutline: {
- border: 'none',
- },
- },
- },
- MuiInputAdornment: {
- styleOverrides: {
- root: ({ theme }) => ({
- color: theme.palette.grey[500],
- ...theme.applyStyles('dark', {
- color: theme.palette.grey[400],
- }),
- }),
- },
- },
- MuiFormLabel: {
- styleOverrides: {
- root: ({ theme }) => ({
- typography: theme.typography.caption,
- }),
- },
- },
- MuiPickersInputBase: {
- styleOverrides: {
- // @ts-expect-error
- root: ({ theme }) => ({
- marginTop: '6px',
- border: `1px solid ${theme.palette.divider}`,
- ' .MuiPickersInputBase-sectionsContainer': {
- padding: '10px 0',
- },
- ' .MuiPickersOutlinedInput-notchedOutline': {
- border: 0,
- },
- ' .MuiIconButton-root': {
- border: 0,
- },
- }),
- },
- },
-};
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/navigation.tsx b/examples/core/auth-nextjs-themed/theme/customizations/navigation.tsx
deleted file mode 100644
index ab3f20e80ee..00000000000
--- a/examples/core/auth-nextjs-themed/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-export const navigationCustomizations: Components = {
- MuiMenuItem: {
- styleOverrides: {
- root: ({ theme }) => ({
- borderRadius: theme.shape.borderRadius,
- padding: '6px 8px',
- [`&.${menuItemClasses.focusVisible}`]: {
- backgroundColor: 'transparent',
- },
- [`&.${menuItemClasses.selected}`]: {
- [`&.${menuItemClasses.focusVisible}`]: {
- backgroundColor: alpha(theme.palette.action.selected, 0.3),
- },
- },
- }),
- },
- },
- MuiMenu: {
- styleOverrides: {
- list: {
- gap: '0px',
- [`&.${dividerClasses.root}`]: {
- margin: '0 -8px',
- },
- },
- paper: ({ theme }) => ({
- marginTop: '4px',
- borderRadius: theme.shape.borderRadius,
- border: `1px solid ${theme.palette.divider}`,
- backgroundImage: 'none',
- background: 'hsl(0, 0%, 100%)',
- boxShadow:
- 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
- [`& .${buttonBaseClasses.root}`]: {
- '&.Mui-selected': {
- backgroundColor: alpha(theme.palette.action.selected, 0.3),
- },
- },
- ...theme.applyStyles('dark', {
- background: gray[900],
- boxShadow:
- 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
- }),
- }),
- },
- },
- MuiSelect: {
- defaultProps: {
- IconComponent: React.forwardRef((props, ref) => (
-
- )),
- },
- styleOverrides: {
- root: ({ theme }) => ({
- borderRadius: theme.shape.borderRadius,
- border: '1px solid',
- borderColor: gray[200],
- backgroundColor: theme.palette.background.paper,
- boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
- '&:hover': {
- borderColor: gray[300],
- backgroundColor: theme.palette.background.paper,
- boxShadow: 'none',
- },
- [`&.${selectClasses.focused}`]: {
- outlineOffset: 0,
- borderColor: gray[400],
- },
- '&:before, &:after': {
- display: 'none',
- },
-
- ...theme.applyStyles('dark', {
- borderRadius: theme.shape.borderRadius,
- borderColor: gray[700],
- backgroundColor: theme.palette.background.paper,
- boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
- '&:hover': {
- borderColor: alpha(gray[700], 0.7),
- backgroundColor: theme.palette.background.paper,
- boxShadow: 'none',
- },
- [`&.${selectClasses.focused}`]: {
- outlineOffset: 0,
- borderColor: gray[900],
- },
- '&:before, &:after': {
- display: 'none',
- },
- }),
- }),
- select: ({ theme }) => ({
- display: 'flex',
- alignItems: 'center',
- ...theme.applyStyles('dark', {
- display: 'flex',
- alignItems: 'center',
- '&:focus-visible': {
- backgroundColor: gray[900],
- },
- }),
- }),
- },
- },
- MuiLink: {
- defaultProps: {
- underline: 'none',
- },
- styleOverrides: {
- root: ({ theme }) => ({
- color: theme.palette.text.primary,
- fontWeight: 500,
- position: 'relative',
- textDecoration: 'none',
- width: 'fit-content',
- '&::before': {
- content: '""',
- position: 'absolute',
- width: '100%',
- height: '1px',
- bottom: 0,
- left: 0,
- backgroundColor: theme.palette.text.secondary,
- opacity: 0.3,
- transition: 'width 0.3s ease, opacity 0.3s ease',
- },
- '&:hover::before': {
- width: 0,
- },
- '&:focus-visible': {
- outline: `3px solid ${alpha(brand[500], 0.5)}`,
- outlineOffset: '4px',
- borderRadius: '2px',
- },
- }),
- },
- },
- MuiDrawer: {
- styleOverrides: {
- paper: ({ theme }) => ({
- backgroundColor: theme.palette.background.default,
- }),
- },
- },
- MuiPaginationItem: {
- styleOverrides: {
- root: ({ theme }) => ({
- '&.Mui-selected': {
- color: 'white',
- backgroundColor: theme.palette.grey[900],
- },
- ...theme.applyStyles('dark', {
- '&.Mui-selected': {
- color: 'black',
- backgroundColor: theme.palette.grey[50],
- },
- }),
- }),
- },
- },
- MuiTabs: {
- styleOverrides: {
- root: { minHeight: 'fit-content' },
- indicator: ({ theme }) => ({
- backgroundColor: theme.palette.grey[800],
- ...theme.applyStyles('dark', {
- backgroundColor: theme.palette.grey[200],
- }),
- }),
- },
- },
- MuiTab: {
- styleOverrides: {
- root: ({ theme }) => ({
- padding: '6px 8px',
- marginBottom: '8px',
- textTransform: 'none',
- minWidth: 'fit-content',
- minHeight: 'fit-content',
- color: theme.palette.text.secondary,
- borderRadius: theme.shape.borderRadius,
- border: '1px solid',
- borderColor: 'transparent',
- ':hover': {
- color: theme.palette.text.primary,
- backgroundColor: gray[100],
- borderColor: gray[200],
- },
- [`&.${tabClasses.selected}`]: {
- color: gray[900],
- },
- ...theme.applyStyles('dark', {
- ':hover': {
- color: theme.palette.text.primary,
- backgroundColor: gray[800],
- borderColor: gray[700],
- },
- [`&.${tabClasses.selected}`]: {
- color: '#fff',
- },
- }),
- }),
- },
- },
- MuiStepConnector: {
- styleOverrides: {
- line: ({ theme }) => ({
- borderTop: '1px solid',
- borderColor: theme.palette.divider,
- flex: 1,
- borderRadius: '99px',
- }),
- },
- },
- MuiStepIcon: {
- styleOverrides: {
- root: ({ theme }) => ({
- color: 'transparent',
- border: `1px solid ${gray[400]}`,
- width: 12,
- height: 12,
- borderRadius: '50%',
- '& text': {
- display: 'none',
- },
- '&.Mui-active': {
- border: 'none',
- color: theme.palette.primary.main,
- },
- '&.Mui-completed': {
- border: 'none',
- color: theme.palette.success.main,
- },
- ...theme.applyStyles('dark', {
- border: `1px solid ${gray[700]}`,
- '&.Mui-active': {
- border: 'none',
- color: theme.palette.primary.light,
- },
- '&.Mui-completed': {
- border: 'none',
- color: theme.palette.success.light,
- },
- }),
- variants: [
- {
- props: { completed: true },
- style: {
- width: 12,
- height: 12,
- },
- },
- ],
- }),
- },
- },
- MuiStepLabel: {
- styleOverrides: {
- label: ({ theme }) => ({
- '&.Mui-completed': {
- opacity: 0.6,
- ...theme.applyStyles('dark', { opacity: 0.5 }),
- },
- }),
- },
- },
-};
diff --git a/examples/core/auth-nextjs-themed/theme/getMPTheme.tsx b/examples/core/auth-nextjs-themed/theme/getMPTheme.tsx
deleted file mode 100644
index 1c3970aa501..00000000000
--- a/examples/core/auth-nextjs-themed/theme/getMPTheme.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
- inputsCustomizations,
- dataDisplayCustomizations,
- feedbackCustomizations,
- navigationCustomizations,
-} from './customizations';
-
-export default function getMPTheme(mode: PaletteMode): ThemeOptions {
- return {
- ...getDesignTokens(mode),
- components: {
- ...inputsCustomizations,
- ...dataDisplayCustomizations,
- ...feedbackCustomizations,
- ...navigationCustomizations,
- },
- };
-}
diff --git a/examples/core/auth-nextjs-themed/theme/themePrimitives.ts b/examples/core/auth-nextjs-themed/theme/themePrimitives.ts
deleted file mode 100644
index bccf187d5f5..00000000000
--- a/examples/core/auth-nextjs-themed/theme/themePrimitives.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-import { createTheme, alpha, Shadows } from '@mui/material/styles';
-import { PaletteMode } from '@mui/material';
-import { Inter } from 'next/font/google';
-
-const inter = Inter({ subsets: ['latin'], display: 'swap' });
-
-declare module '@mui/material/Paper' {
- interface PaperPropsVariantOverrides {
- highlighted: true;
- }
-}
-declare module '@mui/material/styles/createPalette' {
- interface ColorRange {
- 50: string;
- 100: string;
- 200: string;
- 300: string;
- 400: string;
- 500: string;
- 600: string;
- 700: string;
- 800: string;
- 900: string;
- }
-
- interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
- 50: 'hsl(210, 100%, 95%)',
- 100: 'hsl(210, 100%, 92%)',
- 200: 'hsl(210, 100%, 80%)',
- 300: 'hsl(210, 100%, 65%)',
- 400: 'hsl(210, 98%, 48%)',
- 500: 'hsl(210, 98%, 42%)',
- 600: 'hsl(210, 98%, 55%)',
- 700: 'hsl(210, 100%, 35%)',
- 800: 'hsl(210, 100%, 16%)',
- 900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
- 50: 'hsl(220, 35%, 97%)',
- 100: 'hsl(220, 30%, 94%)',
- 200: 'hsl(220, 20%, 88%)',
- 300: 'hsl(220, 20%, 80%)',
- 400: 'hsl(220, 20%, 65%)',
- 500: 'hsl(220, 20%, 42%)',
- 600: 'hsl(220, 20%, 35%)',
- 700: 'hsl(220, 20%, 25%)',
- 800: 'hsl(220, 30%, 6%)',
- 900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
- 50: 'hsl(120, 80%, 98%)',
- 100: 'hsl(120, 75%, 94%)',
- 200: 'hsl(120, 75%, 87%)',
- 300: 'hsl(120, 61%, 77%)',
- 400: 'hsl(120, 44%, 53%)',
- 500: 'hsl(120, 59%, 30%)',
- 600: 'hsl(120, 70%, 25%)',
- 700: 'hsl(120, 75%, 16%)',
- 800: 'hsl(120, 84%, 10%)',
- 900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
- 50: 'hsl(45, 100%, 97%)',
- 100: 'hsl(45, 92%, 90%)',
- 200: 'hsl(45, 94%, 80%)',
- 300: 'hsl(45, 90%, 65%)',
- 400: 'hsl(45, 90%, 40%)',
- 500: 'hsl(45, 90%, 35%)',
- 600: 'hsl(45, 91%, 25%)',
- 700: 'hsl(45, 94%, 20%)',
- 800: 'hsl(45, 95%, 16%)',
- 900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
- 50: 'hsl(0, 100%, 97%)',
- 100: 'hsl(0, 92%, 90%)',
- 200: 'hsl(0, 94%, 80%)',
- 300: 'hsl(0, 90%, 65%)',
- 400: 'hsl(0, 90%, 40%)',
- 500: 'hsl(0, 90%, 30%)',
- 600: 'hsl(0, 91%, 25%)',
- 700: 'hsl(0, 94%, 18%)',
- 800: 'hsl(0, 95%, 12%)',
- 900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
- customShadows[1] =
- mode === 'dark'
- ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
- : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
- customShadows[4] =
- '0px 5px 15px rgba(9, 11, 17, 0.05), 0px 15px 35px -5px rgba(19, 23, 32, 0.05)';
-
- return {
- palette: {
- mode,
- primary: {
- light: brand[200],
- main: brand[400],
- dark: brand[700],
- contrastText: brand[50],
- ...(mode === 'dark' && {
- contrastText: brand[50],
- light: brand[300],
- main: brand[400],
- dark: brand[700],
- }),
- },
- info: {
- light: brand[100],
- main: brand[300],
- dark: brand[600],
- contrastText: gray[50],
- ...(mode === 'dark' && {
- contrastText: brand[300],
- light: brand[500],
- main: brand[700],
- dark: brand[900],
- }),
- },
- warning: {
- light: orange[300],
- main: orange[400],
- dark: orange[800],
- ...(mode === 'dark' && {
- light: orange[400],
- main: orange[500],
- dark: orange[700],
- }),
- },
- error: {
- light: red[300],
- main: red[400],
- dark: red[800],
- ...(mode === 'dark' && {
- light: red[400],
- main: red[500],
- dark: red[700],
- }),
- },
- success: {
- light: green[300],
- main: green[400],
- dark: green[800],
- ...(mode === 'dark' && {
- light: green[400],
- main: green[500],
- dark: green[700],
- }),
- },
- grey: {
- ...gray,
- },
- divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
- background: {
- default: 'hsl(0, 0%, 99%)',
- paper: 'hsl(220, 35%, 97%)',
- ...(mode === 'dark' && {
- default: gray[900],
- paper: 'hsl(220, 30%, 7%)',
- }),
- },
- text: {
- primary: gray[800],
- secondary: gray[600],
- warning: orange[400],
- ...(mode === 'dark' && {
- primary: 'hsl(0, 0%, 100%)',
- secondary: gray[400],
- }),
- },
- action: {
- hover: alpha(gray[200], 0.2),
- selected: `${alpha(gray[200], 0.3)}`,
- ...(mode === 'dark' && {
- hover: alpha(gray[600], 0.2),
- selected: alpha(gray[600], 0.3),
- }),
- },
- },
- typography: {
- fontFamily: inter.style.fontFamily,
- h1: {
- fontSize: defaultTheme.typography.pxToRem(48),
- fontWeight: 600,
- lineHeight: 1.2,
- letterSpacing: -0.5,
- },
- h2: {
- fontSize: defaultTheme.typography.pxToRem(36),
- fontWeight: 600,
- lineHeight: 1.2,
- },
- h3: {
- fontSize: defaultTheme.typography.pxToRem(30),
- lineHeight: 1.2,
- },
- h4: {
- fontSize: defaultTheme.typography.pxToRem(24),
- fontWeight: 600,
- lineHeight: 1.5,
- },
- h5: {
- fontSize: defaultTheme.typography.pxToRem(20),
- fontWeight: 600,
- },
- h6: {
- fontSize: defaultTheme.typography.pxToRem(18),
- fontWeight: 600,
- },
- subtitle1: {
- fontSize: defaultTheme.typography.pxToRem(18),
- },
- subtitle2: {
- fontSize: defaultTheme.typography.pxToRem(14),
- fontWeight: 500,
- },
- body1: {
- fontSize: defaultTheme.typography.pxToRem(14),
- },
- body2: {
- fontSize: defaultTheme.typography.pxToRem(14),
- fontWeight: 400,
- },
- caption: {
- fontSize: defaultTheme.typography.pxToRem(12),
- fontWeight: 400,
- },
- },
- shape: {
- borderRadius: 8,
- },
- shadows: customShadows,
- };
-};
diff --git a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts b/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts
deleted file mode 100644
index a34760bd56b..00000000000
--- a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { GridComponentsPropsOverrides } from '@mui/x-data-grid/models/props/GridProps';
-
-declare module '@mui/material/styles' {
- interface Components {
- MuiDataGrid?: {
- defaultProps?: Partial;
- styleOverrides?: Record;
- };
- MuiPickersInputBase?: {
- styleOverrides?: Record;
- };
- }
-}
diff --git a/examples/core/auth-nextjs-themed/tsconfig.json b/examples/core/auth-nextjs-themed/tsconfig.json
deleted file mode 100644
index 11eed08859e..00000000000
--- a/examples/core/auth-nextjs-themed/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
- "paths": {
- "@/*": ["./*"]
- },
- "target": "ES2017"
- },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
-}