Merge pull request #1325 from data-driven-forms/remove-deprecated-styles-package

Remove deprecated styles package

Author: rvsia

packages/common/package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "clsx": "^1.0.4",
     "lodash": "^4.17.15",
-    "react-select": "^3.0.8",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

packages/mui-component-mapper/package.json

@@ -25,24 +25,23 @@
     "directory": "packages/mui-component-mapper"
   },
   "devDependencies": {
-    "@mui/icons-material": "5.2.5",
-    "@mui/material": "5.2.8",
-    "@mui/styles": "5.2.3"
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.4"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": "*",
-    "@mui/icons-material": "5.2.5",
-    "@mui/material": "5.2.8",
-    "@mui/styles": "5.2.3",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.4",
     "prop-types": ">=15.7.2",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/system": "^5.10.4",
+    "@mui/x-date-pickers": "^5.0.1",
     "clsx": "^1.0.4",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21"

packages/mui-component-mapper/src/tests/dependencies.test.js

@@ -5,6 +5,5 @@ describe('package.json', () => {
   it('mui-mapper has the same version as react-renderer-demo', () => {
     expect(MUIJson.devDependencies['@mui/material']).toEqual(DEMOJson.dependencies['@mui/material']);
     expect(MUIJson.devDependencies['@mui/icons-material']).toEqual(DEMOJson.dependencies['@mui/icons-material']);
-    expect(MUIJson.devDependencies['@mui/styles']).toEqual(DEMOJson.dependencies['@mui/styles']);
   });
 });

packages/react-renderer-demo/package.json

@@ -28,24 +28,28 @@
     },
     "dependencies": {
         "@actions/github": "^5.0.0",
-        "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/editor-pro": "0.0.13",
+        "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
-        "@emotion/react": "^11.7.1",
-        "@emotion/styled": "^11.6.0",
+        "@docsearch/css": "^3.2.1",
+        "@docsearch/react":"^3.2.1",
+        "@emotion/cache": "^11.10.3",
+        "@emotion/react": "^11.10.4",
+        "@emotion/server": "^11.10.0",
+        "@emotion/styled": "^11.10.4",
+        "@emotion/utils": "^1.2.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
-        "@mui/icons-material": "5.2.5",
-        "@mui/material": "5.2.8",
-        "@mui/styles": "5.2.3",
-        "@mui/x-date-pickers": "5.0.0-beta.0",
+        "@mui/icons-material": "^5.10.3",
+        "@mui/material": "^5.10.4",
+        "@mui/system": "^5.10.4",
+        "@mui/x-date-pickers": "^5.0.1",
         "@next/bundle-analyzer": "12.3.0",
         "@next/mdx": "12.3.0",
         "@rvsia/next-offline": "^5.0.5",
         "@stackblitz/sdk": "^1.5.3",
         "clsx": "^1.1.1",
         "codesandbox": "2.2.3",
-        "docsearch.js": "^2.6.3",
         "evergreen-ui": "^6.9.10",
         "firebase-admin": "^10.0.1",
         "firebase-functions": "^3.16.0",
@@ -64,9 +68,9 @@
     "devDependencies": {
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
-        "glob": "^7.2.0",
         "firebase-functions-test": "^0.3.3",
         "firebase-tools": "^10.1.0",
+        "glob": "^7.2.0",
         "rimraf": "^3.0.2"
     }
 }

packages/react-renderer-demo/src/components/docsearch.js

@@ -1,87 +1,21 @@
-import React, { useEffect } from 'react';
-import TextField from '@mui/material/TextField';
-import InputAdornment from '@mui/material/InputAdornment';
-import Search from '@mui/icons-material/Search';
-import docsearch from 'docsearch.js';
-import { useRouter } from 'next/router';
-import { styled } from '@mui/material/styles';
+import React from 'react';
+import { DocSearch as AlgDocSearch } from '@docsearch/react';
 
-const Root = styled('form')(({ theme }) => ({
-  '&.wrapper': {
-    marginRight: 16,
-    '& .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main.algolia-docsearch-suggestion__secondary': {
-      textDecoration: 'none',
-    },
-    '& .algolia-autocomplete .algolia-docsearch-suggestion--title': {
-      marginBottom: 0,
-    },
-    '& .ds-dropdown-menu': {
-      [theme.breakpoints.down('md')]: {
-        position: 'fixed !important',
-        top: '50px !important',
-        maxWidth: '100% !important',
-        minWidth: '100%',
-      },
-      '& [class^=ds-dataset-]': {
-        borderRadius: 0,
-      },
-      '&:before': {
-        display: 'none',
-      },
-    },
-  },
-  '& .search-input': {
-    '& input': {
-      color: 'white',
-    },
-    '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
-      borderBottomColor: 'white',
-    },
-    '& .MuiInput-underline:after': {
-      borderBottomColor: 'white',
-    },
-    '& .MuiInput-underline:before': {
-      borderBottomColor: 'transparent',
-    },
-  },
-  '& .search-icon': {
-    fill: 'white',
-  },
-}));
+import '@docsearch/css';
+import Link from 'next/link';
 
-const DocSearch = () => {
-  const { push } = useRouter();
-  useEffect(() => {
-    docsearch({
-      apiKey: '5e9dbd314423e38339595e183d1ae7b6',
-      indexName: 'data-driven-forms',
-      inputSelector: '#data-driven-forms-search',
-      handleSelected: (input, event, suggestion) => {
-        event.button = 0;
-        push(suggestion.url.replace('https://data-driven-forms.org', ''));
-        input.close();
-      },
-      // debug: true, // Set debug to true if you want to inspect the dropdown.
-    });
-  }, [push]);
-  return (
-    <Root className="wrapper">
-      <TextField
-        variant="standard"
-        id="data-driven-forms-search"
-        type="search"
-        placeholder="Search..."
-        className="search-input"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <Search className="search-icon" />
-            </InputAdornment>
-          ),
-        }}
-      />
-    </Root>
-  );
-};
+const DocSearch = () => (
+  <AlgDocSearch
+    hitComponent={({ hit, children }) => (
+      <Link href={hit.url.replace('https://data-driven-forms.org', '')}>
+        <a href={hit.url.replace('https://data-driven-forms.org', '')}>{children}</a>
+      </Link>
+    )}
+    debug
+    apiKey="89894d702d5ead6999eaf04e3b34012a"
+    appId="4KH6MQCYWM"
+    indexName="data-driven-forms"
+  />
+);
 
 export default DocSearch;

packages/react-renderer-demo/src/next.config.js

@@ -56,11 +56,19 @@ module.exports = withBundleAnalyzer(
         config.resolve.alias = {
           ...config.resolve.alias,
           ...(process.env.DEPLOY === 'true'
-            ? {}
+            ? {
+                "@emotion/react": path.resolve(__dirname, '../node_modules/@emotion/react'),
+                "@emotion/server": path.resolve(__dirname, '../node_modules/@emotion/server'),
+                "@emotion/styled": path.resolve(__dirname, '../node_modules/@emotion/styled'),
+              }
             : {
                 react: path.resolve(__dirname, '../../../node_modules/react'),
                 'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
+                "@emotion/react": path.resolve(__dirname, '../../../node_modules/@emotion/react'),
+                "@emotion/server": path.resolve(__dirname, '../../../node_modules/@emotion/server'),
+                "@emotion/styled": path.resolve(__dirname, '../../../node_modules/@emotion/styled'),
               }),
+
           '@docs/doc-components': path.resolve(__dirname, './doc-components'),
           '@docs/components': path.resolve(__dirname, './components'),
           '@docs/pages': path.resolve(__dirname, './pages'),

packages/react-renderer-demo/src/pages/_app.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import App from 'next/app';
+import * as React from 'react';
+import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { ThemeProvider } from '@mui/material/styles';
-import { StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import theme from '../theme';
+import { CacheProvider } from '@emotion/react';
 import Layout from '@docs/components/layout';
 import { MDXProvider } from '@mdx-js/react';
 import MdxComponents from '@docs/components/mdx/mdx-components';
+
 import CookieModal from '../components/cookie-modal';
+import theme from '../theme';
+import createEmotionCache from '../utils/create-emotion-cache';
 
-export default class MyApp extends App {
-  componentDidMount() {
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles) {
-      jssStyles.parentNode.removeChild(jssStyles);
-    }
-  }
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
 
-  render() {
-    const { Component, pageProps } = this.props;
+export default function App(props) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
 
-    return (
-      <React.Fragment>
-        <Head>
-          <title>Data driven forms</title>
-        </Head>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <MDXProvider components={MdxComponents}>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </MDXProvider>
-            <CookieModal />
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </React.Fragment>
-    );
-  }
+  return (
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <title>Data driven forms</title>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <MDXProvider components={MdxComponents}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </MDXProvider>
+        <CookieModal />
+      </ThemeProvider>
+    </CacheProvider>
+  );
 }
+
+App.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  emotionCache: PropTypes.object,
+  pageProps: PropTypes.object.isRequired,
+};