Skip to content

Commit

Permalink
Merge branch 'master' of github.com:mui/mui-toolpad into feat/magic-link
Browse files Browse the repository at this point in the history
  • Loading branch information
bharatkashyap committed Oct 10, 2024
2 parents 2dd6554 + 06ca8df commit 31ba678
Show file tree
Hide file tree
Showing 49 changed files with 3,223 additions and 2,802 deletions.
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
version: 2.1
orbs:
codecov: codecov/codecov@4.1.0
codecov: codecov/codecov@4.2.0

default-job: &default-job
working_directory: /tmp/toolpad
Expand Down Expand Up @@ -151,7 +151,7 @@ jobs:
test_unit_browser:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.46.1-focal
- image: mcr.microsoft.com/playwright:v1.47.2-focal
environment:
NODE_ENV: test

Expand All @@ -173,7 +173,7 @@ jobs:
resource_class: 'large'
parallelism: 2
docker:
- image: mcr.microsoft.com/playwright:v1.46.1-focal
- image: mcr.microsoft.com/playwright:v1.47.2-focal
environment:
NODE_ENV: test
TOOLPAD_TEST_RETRIES: 1
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@461ef6c76dfe95d5c364de2f431ddbd31a417628 # v3.26.9
uses: github/codeql-action/init@6db8d6351fd0be61f9ed8ebd12ccd35dcec51fea # v3.26.11
with:
languages: typescript
# If you wish to specify custom queries, you can do so here or in a config file.
Expand All @@ -29,4 +29,4 @@ jobs:
# Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@461ef6c76dfe95d5c364de2f431ddbd31a417628 # v3.26.9
uses: github/codeql-action/analyze@6db8d6351fd0be61f9ed8ebd12ccd35dcec51fea # v3.26.11
2 changes: 1 addition & 1 deletion .github/workflows/scorecards.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ jobs:

# Upload the results to GitHub's code scanning dashboard.
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@461ef6c76dfe95d5c364de2f431ddbd31a417628 # v3.26.9
uses: github/codeql-action/upload-sarif@6db8d6351fd0be61f9ed8ebd12ccd35dcec51fea # v3.26.11
with:
sarif_file: results.sarif
Binary file modified contributing/codesandbox-ci-package-link.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions docs/data/toolpad/core/all-components/all-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<p class="description">This page contains an index to the components included in Toolpad Core.</p>

- [App Provider](/toolpad/core/react-app-provider/)
- [Account](/toolpad/core/react-account/)
- [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
- [Sign In Page](/toolpad/core/react-sign-in-page/)
- [Page Container](/toolpad/core/react-page-container/)
- [Sign-in Page](/toolpad/core/react-sign-in-page/)
- [Account](/toolpad/core/react-account/)
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { createTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';

const demoTheme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-toolpad-color-scheme',
},
colorSchemes: { light: true, dark: true },
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 600,
lg: 1200,
xl: 1536,
},
},
});

function DemoPageContent({ pathname }) {
return (
<Box
sx={{
py: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
}}
>
<Typography>Dashboard content for {pathname}</Typography>
</Box>
);
}

DemoPageContent.propTypes = {
pathname: PropTypes.string.isRequired,
};

function DashboardLayoutSidebarHidden(props) {
const { window } = props;

const [pathname, setPathname] = React.useState('/dashboard');

const router = React.useMemo(() => {
return {
pathname,
searchParams: new URLSearchParams(),
navigate: (path) => setPathname(String(path)),
};
}, [pathname]);

// Remove this const when copying and pasting into your project.
const demoWindow = window !== undefined ? window() : undefined;

return (
<AppProvider router={router} theme={demoTheme} window={demoWindow}>
<DashboardLayout hideNavigation>
<DemoPageContent pathname={pathname} />
</DashboardLayout>
</AppProvider>
);
}

DashboardLayoutSidebarHidden.propTypes = {
/**
* Injected by the documentation to work in an iframe.
* Remove this when copying and pasting into your project.
*/
window: PropTypes.func,
};

export default DashboardLayoutSidebarHidden;
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import * as React from 'react';
import { createTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import type { Router } from '@toolpad/core';

const demoTheme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-toolpad-color-scheme',
},
colorSchemes: { light: true, dark: true },
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 600,
lg: 1200,
xl: 1536,
},
},
});

function DemoPageContent({ pathname }: { pathname: string }) {
return (
<Box
sx={{
py: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
}}
>
<Typography>Dashboard content for {pathname}</Typography>
</Box>
);
}

interface DemoProps {
/**
* Injected by the documentation to work in an iframe.
* Remove this when copying and pasting into your project.
*/
window?: () => Window;
}

export default function DashboardLayoutSidebarHidden(props: DemoProps) {
const { window } = props;

const [pathname, setPathname] = React.useState('/dashboard');

const router = React.useMemo<Router>(() => {
return {
pathname,
searchParams: new URLSearchParams(),
navigate: (path) => setPathname(String(path)),
};
}, [pathname]);

// Remove this const when copying and pasting into your project.
const demoWindow = window !== undefined ? window() : undefined;

return (
<AppProvider router={router} theme={demoTheme} window={demoWindow}>
<DashboardLayout hideNavigation>
<DemoPageContent pathname={pathname} />
</DashboardLayout>
</AppProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<DashboardLayout hideNavigation>
<DemoPageContent pathname={pathname} />
</DashboardLayout>
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,12 @@ The layout sidebar is collapsible to a mini-drawer (with icons only) in desktop

{{"demo": "DashboardLayoutNoMiniSidebar.js", "height": 400, "iframe": true}}

### Hiding the sidebar

The layout sidebar can be hidden if needed with the `hideNavigation` prop.

{{"demo": "DashboardLayoutSidebarHidden.js", "height": 400, "iframe": true}}

## Account

The `DashboardLayout` comes integrated with the [`<Account />`](/toolpad/core/react-account/) component. It renders as an account management menu when a user is signed in – a `session` object is present – and a button when not.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const NAVIGATION = [
{
segment: 'inbox',
title: 'Orders',
pattern: '/inbox/:id',
pattern: 'inbox/:id',
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const NAVIGATION = [
{
segment: 'inbox',
title: 'Orders',
pattern: '/inbox/:id',
pattern: 'inbox/:id',
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function CustomEmailField() {
return (
<TextField
id="input-with-icon-textfield"
label="Username"
label="Email"
name="email"
type="email"
size="small"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function CustomEmailField() {
return (
<TextField
id="input-with-icon-textfield"
label="Username"
label="Email"
name="email"
type="email"
size="small"
Expand Down
14 changes: 11 additions & 3 deletions docs/data/toolpad/core/introduction/TutorialDefault.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,23 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { createTheme } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
import { useDemoRouter } from '@toolpad/core/internals';

const NAVIGATION = [
{
segment: 'page',
title: 'Page',
segment: '',
title: 'Dashboard',
icon: <DashboardIcon />,
},
{
segment: 'orders',
title: 'Orders',
icon: <ShoppingCartIcon />,
},
];

const demoTheme = createTheme({
Expand All @@ -33,8 +39,10 @@ const demoTheme = createTheme({

function DemoPageContent({ pathname }) {
switch (pathname) {
case '/page':
case '/':
return <PageContainer>Hello world!</PageContainer>;
case '/orders':
return <PageContainer>Orders page</PageContainer>;
default:
return null;
}
Expand Down
14 changes: 11 additions & 3 deletions docs/data/toolpad/core/introduction/TutorialDefault.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { createTheme } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
Expand All @@ -9,10 +10,15 @@ import type { Navigation } from '@toolpad/core';

const NAVIGATION: Navigation = [
{
segment: 'page',
title: 'Page',
segment: '',
title: 'Dashboard',
icon: <DashboardIcon />,
},
{
segment: 'orders',
title: 'Orders',
icon: <ShoppingCartIcon />,
},
];

const demoTheme = createTheme({
Expand All @@ -33,8 +39,10 @@ const demoTheme = createTheme({

function DemoPageContent({ pathname }: { pathname: string }) {
switch (pathname) {
case '/page':
case '/':
return <PageContainer>Hello world!</PageContainer>;
case '/orders':
return <PageContainer>Orders page</PageContainer>;
default:
return null;
}
Expand Down
14 changes: 11 additions & 3 deletions docs/data/toolpad/core/introduction/TutorialPages.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Typography } from '@mui/material';
import { createTheme } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import TimelineIcon from '@mui/icons-material/Timeline';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
Expand All @@ -15,10 +16,15 @@ const NAVIGATION = [
title: 'Main items',
},
{
segment: 'page',
title: 'Page',
segment: '',
title: 'Dashboard',
icon: <DashboardIcon />,
},
{
segment: 'orders',
title: 'Orders',
icon: <ShoppingCartIcon />,
},
// Add the following new item:
{
segment: 'page-2',
Expand All @@ -45,8 +51,10 @@ const demoTheme = createTheme({

function DemoPageContent({ pathname }) {
switch (pathname) {
case '/page':
case '/':
return <PageContainer>Hello world!</PageContainer>;
case '/orders':
return <PageContainer>Orders page</PageContainer>;
case '/page-2':
return (
<PageContainer>
Expand Down
Loading

0 comments on commit 31ba678

Please sign in to comment.