simplify logic

mui · Jun 12, 2022 · 8d53d3e · 8d53d3e
1 parent 60eaa3b
commit 8d53d3e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 70 deletions.
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -268,11 +268,7 @@ export default function HeaderNavBar() {
  role="menuitem"
  href={ROUTES.productAdvanced}
  icon={<IconImage name="product-advanced" />}
- name={
- <Box component="span" display="inline-flex" alignItems="center">
- MUI&nbsp;X
- </Box>
- }
+ name="MUI X"
  description="Advanced and powerful components for complex use cases."
  onKeyDown={handleKeyDown}
  />

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -11,11 +11,6 @@ import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
-const shouldShowJoy =
- process.env.NODE_ENV === 'development' ||
- process.env.PULL_REQUEST ||
- FEATURE_TOGGLE.enable_joy_scope;
-
 const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
  ({ theme }) => ({
  ...theme.typography.body2,
@@ -77,15 +72,11 @@ const DOCS = [
  description: "React components that implement Google's Material Design.",
  href: ROUTES.materialDocs,
  },
- ...(shouldShowJoy
- ? [
- {
- name: 'Joy UI',
- description: 'React components for building your design system.',
- href: ROUTES.joyDocs,
- },
- ]
- : []),
+ {
+ name: 'Joy UI',
+ description: 'React components for building your design system.',
+ href: ROUTES.joyDocs,
+ },
  {
  name: 'MUI Base',
  description: 'Unstyled React components and low-level hooks.',

diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
@@ -1,13 +1,13 @@
 // need to use commonjs export so that docs/packages/markdown can use
 module.exports = {
- nav_products: true,
  enable_website_banner: false,
  enable_toc_banner: true,
  enable_docsnav_banner: false,
- // TODO: cleanup once migration is done
- enable_product_scope: true, // related to new structure change
- enable_redirects: true, // related to new structure change
- enable_mui_base_scope: true, // will be enabled after the migration
- enable_system_scope: true, // will be enabled after the migration
- enable_joy_scope: true,
+
+ // TODO: to remove
+ nav_products: true,
+ enable_product_scope: true,
+ enable_redirects: true,
+ enable_mui_base_scope: true,
+ enable_system_scope: true,
 };
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -25,10 +25,10 @@ import DoneRounded from '@mui/icons-material/DoneRounded';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import { isNewLocation } from 'docs/src/modules/utils/replaceUrl';
 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';
+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 = {};
 

diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
@@ -5,16 +5,10 @@ import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import IconImage from 'docs/src/components/icon/IconImage';
-import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
 
-const shouldShowJoy =
- process.env.NODE_ENV === 'development' ||
- process.env.PULL_REQUEST ||
- FEATURE_TOGGLE.enable_joy_scope;
-
 function ProductSubMenu({
  icon,
  name,
@@ -62,8 +56,31 @@ function ProductSubMenu({
  );
 }
 
+const products = [
+ {
+ name: 'Material UI',
+ href: ROUTES.materialDocs,
+ slug: 'material-ui',
+ },
+ {
+ name: 'Joy UI',
+ href: ROUTES.joyDocs,
+ slug: 'joy-ui',
+ },
+ {
+ name: 'MUI Base',
+ href: ROUTES.baseDocs,
+ slug: 'base',
+ },
+ {
+ name: 'MUI System',
+ href: ROUTES.systemDocs,
+ slug: 'system',
+ },
+];
+
 export default function MuiProductSelector() {
- const { product } = useRouterExtra();
+ const routerExtra = useRouterExtra();
 
  return (
  <React.Fragment>
@@ -108,44 +125,18 @@ export default function MuiProductSelector() {
  },
  }}
  >
- <Chip
- color={product === 'material-ui' ? 'default' : undefined}
- variant={product === 'material-ui' ? 'filled' : 'outlined'}
- component={Link}
- href={ROUTES.materialDocs}
- label={<React.Fragment>Material UI </React.Fragment>}
- clickable
- size="small"
- />
- {shouldShowJoy && (
+ {products.map((product) => (
  <Chip
- color={product === 'joy-ui' ? 'default' : undefined}
- variant={product === 'joy-ui' ? 'filled' : 'outlined'}
+ key={product.name}
+ color={routerExtra.product === product.slug ? 'default' : undefined}
+ variant={routerExtra.product === product.slug ? 'filled' : 'outlined'}
  component={Link}
- href={ROUTES.joyDocs}
- label={<React.Fragment>Joy UI </React.Fragment>}
+ href={product.href}
+ label={product.name}
  clickable
  size="small"
  />
- )}
- <Chip
- color={product === 'base' ? 'default' : undefined}
- variant={product === 'base' ? 'filled' : 'outlined'}
- component={Link}
- href={ROUTES.baseDocs}
- label={<React.Fragment>MUI Base </React.Fragment>}
- clickable
- size="small"
- />
- <Chip
- color={product === 'system' ? 'default' : undefined}
- variant={product === 'system' ? 'filled' : 'outlined'}
- component={Link}
- href={ROUTES.systemDocs}
- label={<React.Fragment>MUI System </React.Fragment>}
- clickable
- size="small"
- />
+ ))}
  </Stack>
  </Box>
  </Box>