Merge branch 'next' into docs/redesign-second-iteration

mui · Aug 23, 2021 · 68212a1 · 68212a1
2 parents 99b47ec + 531f455
commit 68212a1
Show file tree

Hide file tree

Showing 54 changed files with 708 additions and 517 deletions.
diff --git a/README.md b/README.md
@@ -165,7 +165,7 @@ These great services sponsor Material-UI's core infrastructure:
 
 [<img loading="lazy" alt="GitHub" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" height="25">](https://github.com/)
 
-GitHub allows us to host the Git repository.
+GitHub allows us to host the Git repository and coordinate contributions.
 
 [<img loading="lazy" alt="Netlify" src="https://cdn.netlify.com/15ecf59b59c9d04b88097c6b5d2c7e8a7d1302d0/1b6d6/img/press/logos/full-logo-light.svg" height="30">](https://www.netlify.com/)
 

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -12,18 +12,20 @@
   },
   "dependencies": {
     "@chakra-ui/system": "^1.7.2",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@material-ui/core": "5.0.0-beta.4",
     "@material-ui/styles": "5.0.0-beta.4",
     "@material-ui/system": "5.0.0-beta.4",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.14.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "react-jss": "^10.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-jss": "^10.7.1",
+    "react-redux": "^7.1.1",
+    "redux": "^4.0.4",
     "serve-handler": "^6.1.3",
     "styled-components": "^5.0.0",
     "theme-ui": "^0.10.0",

diff --git a/docs/package.json b/docs/package.json
@@ -24,9 +24,9 @@
     "@date-io/core": "^2.0.0",
     "@date-io/date-fns-jalali": "^2.10.8",
     "@emotion/cache": "^11.4.0",
-    "@emotion/react": "^11.4.0",
+    "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
@@ -42,23 +42,23 @@
     "@material-ui/types": "6.0.2",
     "@material-ui/unstyled": "5.0.0-alpha.43",
     "@trendmicro/react-interpolate": "^0.5.5",
-    "@types/autosuggest-highlight": "^3.1.0",
-    "@types/css-mediaquery": "^0.1.0",
+    "@types/autosuggest-highlight": "^3.1.1",
+    "@types/css-mediaquery": "^0.1.1",
     "@types/json2mq": "^0.2.0",
     "@types/markdown-to-jsx": "^7.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.0",
     "@types/react-swipeable-views": "^0.13.0",
-    "@types/react-swipeable-views-utils": "^0.13.0",
+    "@types/react-swipeable-views-utils": "^0.13.3",
     "@types/react-virtualized": "^9.21.4",
     "@types/react-window": "^1.7.0",
     "@types/styled-components": "5.1.12",
     "accept-language": "^3.0.18",
-    "address": "^1.0.3",
-    "ast-types": "^0.14.1",
+    "address": "^1.1.2",
+    "ast-types": "^0.14.2",
     "autoprefixer": "^10.0.1",
     "autosuggest-highlight": "^3.1.1",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -78,7 +78,7 @@
     "flexsearch": "^0.7.0",
     "fs-extra": "^10.0.0",
     "json2mq": "^0.2.0",
-    "jss": "^10.0.3",
+    "jss": "^10.7.1",
     "jss-plugin-template": "^10.0.3",
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.15",
@@ -91,15 +91,14 @@
     "postcss": "^8.0.6",
     "prop-types": "^15.7.2",
     "raw-loader": "^1.0.0",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-docgen": "^5.0.0-beta.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-draggable": "^4.0.3",
     "react-final-form": "^6.3.0",
     "react-imask": "^6.1.0",
-    "react-is": "^17.0.1",
+    "react-is": "^17.0.2",
     "react-number-format": "^4.7.3",
-    "react-redux": "^7.1.1",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.1",
     "react-spring": "^8.0.27",
@@ -109,8 +108,6 @@
     "react-window": "^1.8.5",
     "recast": "^0.20.2",
     "recharts": "^2.1.0",
-    "redux": "^4.0.4",
-    "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
     "styled-components": "^5.0.0",
     "stylis": "^4.0.3",

diff --git a/docs/packages/feedback/package.json b/docs/packages/feedback/package.json
@@ -22,7 +22,7 @@
     "uuid": "^8.3.1"
   },
   "devDependencies": {
-    "claudia": "^5.12.0"
+    "claudia": "^5.13.1"
   },
   "optionalDependencies": {
     "aws-sdk": "^2.766.0"

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -2,7 +2,6 @@ import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import * as React from 'react';
 import find from 'lodash/find';
-import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import NextHead from 'next/head';
 import PropTypes from 'prop-types';
@@ -13,14 +12,22 @@ import { CacheProvider } from '@emotion/react';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
-import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import loadScript from 'docs/src/modules/utils/loadScript';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
-import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants';
-import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants';
+import {
+  CodeVariantProvider,
+  useCodeVariant,
+  useSetCodeVariant,
+} from 'docs/src/modules/utils/codeVariant';
+import {
+  UserLanguageProvider,
+  useSetUserLanguage,
+  useUserLanguage,
+} from 'docs/src/modules/utils/i18n';
 import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
 import createEmotionCache from 'docs/src/createEmotionCache';
 
@@ -45,7 +52,7 @@ function useFirstRender() {
 acceptLanguage.languages(['en', 'zh', 'pt', 'ru']);
 
 function LanguageNegotiation() {
-  const dispatch = useDispatch();
+  const setUserLanguage = useSetUserLanguage();
   const router = useRouter();
   const userLanguage = useUserLanguage();
 
@@ -59,7 +66,7 @@ function LanguageNegotiation() {
     if (userLanguageUrl === 'en' && userLanguage !== preferedLanguage) {
       window.location = preferedLanguage === 'en' ? canonical : `/${preferedLanguage}${canonical}`;
     } else if (userLanguage !== userLanguageUrl) {
-      dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { userLanguage: userLanguageUrl } });
+      setUserLanguage(userLanguageUrl);
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -71,10 +78,8 @@ function LanguageNegotiation() {
  * @returns {string} - The persisted variant if the initial value is undefined
  */
 function usePersistCodeVariant() {
-  const dispatch = useDispatch();
-  const { codeVariant: initialCodeVariant = CODE_VARIANTS.JS } = useSelector(
-    (state) => state.options,
-  );
+  const initialCodeVariant = useCodeVariant();
+  const setCodeVariant = useSetCodeVariant();
 
   const isFirstRender = useFirstRender();
 
@@ -107,7 +112,7 @@ function usePersistCodeVariant() {
 
   React.useEffect(() => {
     if (codeVariant !== initialCodeVariant) {
-      dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { codeVariant } });
+      setCodeVariant(codeVariant);
     }
   });
 
@@ -128,16 +133,16 @@ function Analytics() {
     loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head'));
   }, []);
 
-  const options = useSelector((state) => state.options);
+  const userLanguage = useUserLanguage();
 
   const codeVariant = usePersistCodeVariant();
   React.useEffect(() => {
     window.ga('set', 'dimension1', codeVariant);
   }, [codeVariant]);
 
   React.useEffect(() => {
-    window.ga('set', 'dimension2', options.userLanguage);
-  }, [options.userLanguage]);
+    window.ga('set', 'dimension2', userLanguage);
+  }, [userLanguage]);
 
   React.useEffect(() => {
     /**
@@ -298,9 +303,6 @@ function AppWrapper(props) {
   const { children, pageProps } = props;
 
   const router = useRouter();
-  const [redux] = React.useState(() =>
-    initRedux({ options: { userLanguage: pageProps.userLanguage } }),
-  );
 
   React.useEffect(() => {
     loadDependencies();
@@ -332,17 +334,19 @@ function AppWrapper(props) {
           <link rel="stylesheet" href={font} key={font} />
         ))}
       </NextHead>
-      <ReduxProvider store={redux}>
-        <PageContext.Provider value={{ activePage, pages }}>
-          <StylesProvider jss={jss}>
-            <ThemeProvider>
-              <DocsStyledEngineProvider>{children}</DocsStyledEngineProvider>
-            </ThemeProvider>
-          </StylesProvider>
-        </PageContext.Provider>
-        <LanguageNegotiation />
-        <Analytics />
-      </ReduxProvider>
+      <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
+        <CodeVariantProvider>
+          <PageContext.Provider value={{ activePage, pages }}>
+            <StylesProvider jss={jss}>
+              <ThemeProvider>
+                <DocsStyledEngineProvider>{children}</DocsStyledEngineProvider>
+              </ThemeProvider>
+            </StylesProvider>
+          </PageContext.Provider>
+          <LanguageNegotiation />
+          <Analytics />
+        </CodeVariantProvider>
+      </UserLanguageProvider>
       <GoogleAnalytics key={router.route} />
     </React.Fragment>
   );

diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx
@@ -31,9 +31,9 @@ const content = [
   },
   {
     icon: <SvgEye />,
-    title: 'Accessible by design',
+    title: 'Accessibility in mind',
     description:
-      'We care about making your UX great for everyone. All of our components have built-in support for accessibility, making sure you reach the largest audience possible!',
+      'We care about making it great for everyone. We improve accessibility for all of our components constantly, helping you to reach the largest audience possible!',
   },
 ];
 

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { alpha, styled } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';
@@ -9,6 +8,7 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import { AdCarbonInline } from 'docs/src/modules/components/AdCarbon';
 import getJsxPreview from 'docs/src/modules/utils/getJsxPreview';
+import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
@@ -152,7 +152,7 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
 export default function Demo(props) {
   const { demo, demoOptions, disableAd, githubLocation } = props;
   const t = useTranslate();
-  const codeVariant = useSelector((state) => state.options.codeVariant);
+  const codeVariant = useCodeVariant();
   const demoData = useDemoData(codeVariant, demo, githubLocation);
 
   const [demoHovered, setDemoHovered] = React.useState(false);