Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Move product versions to page context #35078

Merged
merged 5 commits into from
May 17, 2023
Merged

[docs] Move product versions to page context #35078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5e2235
[docs] Move product versions to page context
m4theushw Nov 9, 2022
737069a
Fix pages without product
m4theushw Nov 11, 2022
431b9fc
Merge branch 'master' into move-product-versions-to-page-context
m4theushw May 11, 2023
5687cdc
Simplify imports
m4theushw May 11, 2023
f049dc3
Fix React.useMemo deps
m4theushw May 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 61 additions & 2 deletions docs/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ import createEmotionCache from 'docs/src/createEmotionCache';
import findActivePage from 'docs/src/modules/utils/findActivePage';
import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
import { LicenseInfo } from '@mui/x-data-grid-pro';
import materialPkgJson from 'packages/mui-material/package.json';
import joyPkgJson from 'packages/mui-joy/package.json';
import systemPkgJson from 'packages/mui-system/package.json';
import basePkgJson from 'packages/mui-base/package.json';

// Remove the license warning from demonstration purposes
LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
Expand Down Expand Up @@ -142,6 +146,61 @@ function AppWrapper(props) {
}
}, []);

const productIdentifier = React.useMemo(() => {
const languagePrefix = pageProps.userLanguage === 'en' ? '' : `/${pageProps.userLanguage}`;

if (product === 'material-ui') {
return {
name: 'Material UI',
metadata: 'MUI Core',
versions: [
{ text: `v${materialPkgJson.version}`, current: true },
{
text: 'v4',
href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`,
},
{
text: 'View all versions',
href: `https://mui.com${languagePrefix}/versions/`,
},
],
};
}

if (product === 'joy-ui') {
return {
name: 'Joy UI',
metadata: 'MUI Core',
versions: [{ text: `v${joyPkgJson.version}`, current: true }],
};
}

if (product === 'system') {
return {
name: 'MUI System',
metadata: 'MUI Core',
versions: [
{ text: `v${systemPkgJson.version}`, current: true },
{ text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` },
{
text: 'View all versions',
href: `https://mui.com${languagePrefix}/versions/`,
},
],
};
}

if (product === 'base') {
return {
name: 'MUI Base',
Copy link
Member

@oliviertassinari oliviertassinari May 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-05-23 at 01 09 21

https://master--material-ui.netlify.app/base/getting-started/overview/

Suggested change
name: 'MUI Base',
name: 'Base UI',

We changed the name since. This information was lost in the rebase of this PR. See the diff lower in the page.

@siriwatknp Do you want to push a quick fix?

Copy link
Member

@oliviertassinari oliviertassinari Jun 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in ec3d7dd. I saw it again doing a demo with a person at React Summit. @michaldudak enjoy 😁

metadata: 'MUI Core',
versions: [{ text: `v${basePkgJson.version}`, current: true }],
};
}

return null; // The identifier for X and Toolpad is handled by their own site
}, [pageProps.userLanguage, product]);

const pageContextValue = React.useMemo(() => {
let pages = generalPages;
if (product === 'base') {
Expand All @@ -156,8 +215,8 @@ function AppWrapper(props) {

const { activePage, activePageParents } = findActivePage(pages, router.pathname);

return { activePage, activePageParents, pages };
}, [product, router.pathname]);
return { activePage, activePageParents, pages, productIdentifier };
}, [product, productIdentifier, router.pathname]);

let fonts = [];
if (asPathWithoutLang.match(/onepirate/)) {
Expand Down
141 changes: 10 additions & 131 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import { styled, alpha } from '@mui/material/styles';
Expand All @@ -17,16 +16,12 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
import { pathnameToLanguage, pageToTitleI18n } from 'docs/src/modules/utils/helpers';
import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
import PageContext from 'docs/src/modules/components/PageContext';
import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
import DoneRounded from '@mui/icons-material/DoneRounded';
import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
import materialPkgJson from '../../../../packages/mui-material/package.json';
import joyPkgJson from '../../../../packages/mui-joy/package.json';
import basePkgJson from '../../../../packages/mui-base/package.json';
import systemPkgJson from '../../../../packages/mui-system/package.json';

const savedScrollTop = {};

Expand Down Expand Up @@ -299,17 +294,12 @@ const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigato

export default function AppNavDrawer(props) {
const { className, disablePermanent, mobileOpen, onClose, onOpen } = props;
const { activePageParents, pages } = React.useContext(PageContext);
const router = useRouter();
const { activePageParents, pages, productIdentifier } = React.useContext(PageContext);
const [anchorEl, setAnchorEl] = React.useState(null);
const userLanguage = useUserLanguage();
const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
const t = useTranslate();
const mobile = useMediaQuery((theme) => theme.breakpoints.down('lg'));

const drawer = React.useMemo(() => {
const { canonicalAs } = pathnameToLanguage(router.asPath);

const navItems = renderNavItems({ onClose, pages, activePageParents, depth: 0, t });

const renderVersionSelector = (versions, sx) => {
Expand Down Expand Up @@ -411,126 +401,15 @@ export default function AppNavDrawer(props) {
<SvgMuiLogo width={30} />
</Box>
</NextLink>
{canonicalAs.startsWith('/material-ui/') && (
<ProductIdentifier
name="Material UI"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${materialPkgJson.version}`, current: true },
{
text: 'v4',
href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`,
},
{
text: 'View all versions',
href: `https://mui.com${languagePrefix}/versions/`,
},
])}
/>
)}
{canonicalAs.startsWith('/joy-ui/') && (
<ProductIdentifier
name="Joy UI"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${joyPkgJson.version}`, current: true },
])}
/>
)}
{canonicalAs.startsWith('/system/') && (
<ProductIdentifier
name="MUI System"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${systemPkgJson.version}`, current: true },
{ text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` },
{
text: 'View all versions',
href: `https://mui.com${languagePrefix}/versions/`,
},
])}
/>
)}
{canonicalAs.startsWith('/base/') && (
<ProductIdentifier
name="Base UI"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${basePkgJson.version}`, current: true },
])}
/>
)}
{canonicalAs.startsWith('/x/introduction/') && (
<ProductIdentifier name="Advanced components" metadata="MUI X" />
)}
{(canonicalAs.startsWith('/x/react-data-grid/') ||
canonicalAs.startsWith('/x/api/data-grid/')) && (
<ProductIdentifier
name="Data Grid"
metadata="MUI X"
versionSelector={renderVersionSelector([
// DATA_GRID_VERSION is set from the X repo
{
text: 'v6',
...(process.env.DATA_GRID_VERSION.startsWith('6')
? {
text: `v${process.env.DATA_GRID_VERSION}`,
current: true,
}
: {
href: `https://mui.com${languagePrefix}/components/data-grid/`,
}),
},
{
text: 'v5',
...(process.env.DATA_GRID_VERSION.startsWith('5')
? {
text: `v${process.env.DATA_GRID_VERSION}`,
current: true,
}
: {
href: `https://v5.mui.com${languagePrefix}/components/data-grid/`,
}),
},
{ text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` },
])}
/>
)}
{(canonicalAs.startsWith('/x/react-date-pickers/') ||
canonicalAs.startsWith('/x/api/date-pickers/')) && (
{productIdentifier && (
<ProductIdentifier
name="Date pickers"
metadata="MUI X"
versionSelector={renderVersionSelector([
// DATE_PICKERS_VERSION is set from the X repo
{
...(process.env.DATE_PICKERS_VERSION.startsWith('6')
? {
text: `v${process.env.DATE_PICKERS_VERSION}`,
current: true,
}
: {
text: `v6`,
href: `https://next.mui.com${languagePrefix}/components/data-grid/`,
}),
},
{
...(process.env.DATE_PICKERS_VERSION.startsWith('5')
? {
text: `v${process.env.DATE_PICKERS_VERSION}`,
current: true,
}
: {
text: `v5`,
href: `https://v5.mui.com${languagePrefix}/components/data-grid/`,
}),
},
])}
name={productIdentifier.name}
metadata={productIdentifier.metadata}
versionSelector={
productIdentifier.versions ? renderVersionSelector(productIdentifier.versions) : []
}
/>
)}
{canonicalAs.startsWith('/toolpad/') && (
<ProductIdentifier name="Toolpad" metadata="MUI Toolpad" />
)}
</ToolbarDiv>
<Divider
sx={(theme) => ({
Expand All @@ -544,7 +423,7 @@ export default function AppNavDrawer(props) {
{navItems}
</React.Fragment>
);
}, [activePageParents, pages, onClose, languagePrefix, t, anchorEl, setAnchorEl, router.asPath]);
}, [onClose, pages, activePageParents, t, productIdentifier, anchorEl]);

return (
<nav className={className} aria-label={t('mainNavigation')}>
Expand Down