Skip to content

Commit 2b3b110

Browse files
rvsiarvsia
authored
Merge pull request #1325 from data-driven-forms/remove-deprecated-styles-package
Remove deprecated styles package
2 parents aa4b9fa + c52b8a5 commit 2b3b110

File tree

11 files changed

+630
-745
lines changed

11 files changed

+630
-745
lines changed

‎packages/common/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"dependencies": {
2525
"clsx": "^1.0.4",
2626
"lodash": "^4.17.15",
27-
"react-select": "^3.0.8",
2827
"prop-types": "^15.7.2"
2928
},
3029
"peerDependencies": {

‎packages/mui-component-mapper/package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,23 @@
2525
"directory": "packages/mui-component-mapper"
2626
},
2727
"devDependencies": {
28-
"@mui/icons-material": "5.2.5",
29-
"@mui/material": "5.2.8",
30-
"@mui/styles": "5.2.3"
28+
"@mui/icons-material": "^5.10.3",
29+
"@mui/material": "^5.10.4"
3130
},
3231
"peerDependencies": {
3332
"@data-driven-forms/react-form-renderer": "*",
34-
"@mui/icons-material": "5.2.5",
35-
"@mui/material": "5.2.8",
36-
"@mui/styles": "5.2.3",
33+
"@mui/icons-material": "^5.10.3",
34+
"@mui/material": "^5.10.4",
3735
"prop-types": ">=15.7.2",
3836
"react": "^17.0.2 || ^18.0.0",
3937
"react-dom": "^17.0.2 || ^18.0.0"
4038
},
4139
"dependencies": {
4240
"@data-driven-forms/common": "*",
43-
"@emotion/react": "^11.5.0",
44-
"@emotion/styled": "^11.3.0",
45-
"@mui/x-date-pickers": "^5.0.0-beta.0",
41+
"@emotion/react": "^11.10.4",
42+
"@emotion/styled": "^11.10.4",
43+
"@mui/system": "^5.10.4",
44+
"@mui/x-date-pickers": "^5.0.1",
4645
"clsx": "^1.0.4",
4746
"date-fns": "^2.16.1",
4847
"lodash": "^4.17.21"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@ describe('package.json', () => {
55
it('mui-mapper has the same version as react-renderer-demo', () => {
66
expect(MUIJson.devDependencies['@mui/material']).toEqual(DEMOJson.dependencies['@mui/material']);
77
expect(MUIJson.devDependencies['@mui/icons-material']).toEqual(DEMOJson.dependencies['@mui/icons-material']);
8-
expect(MUIJson.devDependencies['@mui/styles']).toEqual(DEMOJson.dependencies['@mui/styles']);
98
});
109
});

‎packages/react-renderer-demo/package.json‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,28 @@
2828
},
2929
"dependencies": {
3030
"@actions/github": "^5.0.0",
31-
"@data-driven-forms/mui-component-mapper": "*",
3231
"@data-driven-forms/editor-pro": "0.0.13",
32+
"@data-driven-forms/mui-component-mapper": "*",
3333
"@data-driven-forms/react-form-renderer": "*",
34-
"@emotion/react": "^11.7.1",
35-
"@emotion/styled": "^11.6.0",
34+
"@docsearch/css": "^3.2.1",
35+
"@docsearch/react":"^3.2.1",
36+
"@emotion/cache": "^11.10.3",
37+
"@emotion/react": "^11.10.4",
38+
"@emotion/server": "^11.10.0",
39+
"@emotion/styled": "^11.10.4",
40+
"@emotion/utils": "^1.2.0",
3641
"@mdx-js/loader": "^1.6.22",
3742
"@mdx-js/react": "^1.6.22",
38-
"@mui/icons-material": "5.2.5",
39-
"@mui/material": "5.2.8",
40-
"@mui/styles": "5.2.3",
41-
"@mui/x-date-pickers": "5.0.0-beta.0",
43+
"@mui/icons-material": "^5.10.3",
44+
"@mui/material": "^5.10.4",
45+
"@mui/system": "^5.10.4",
46+
"@mui/x-date-pickers": "^5.0.1",
4247
"@next/bundle-analyzer": "12.3.0",
4348
"@next/mdx": "12.3.0",
4449
"@rvsia/next-offline": "^5.0.5",
4550
"@stackblitz/sdk": "^1.5.3",
4651
"clsx": "^1.1.1",
4752
"codesandbox": "2.2.3",
48-
"docsearch.js": "^2.6.3",
4953
"evergreen-ui": "^6.9.10",
5054
"firebase-admin": "^10.0.1",
5155
"firebase-functions": "^3.16.0",
@@ -64,9 +68,9 @@
6468
"devDependencies": {
6569
"cpx": "^1.5.0",
6670
"cross-env": "^7.0.3",
67-
"glob": "^7.2.0",
6871
"firebase-functions-test": "^0.3.3",
6972
"firebase-tools": "^10.1.0",
73+
"glob": "^7.2.0",
7074
"rimraf": "^3.0.2"
7175
}
7276
}

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

Lines changed: 17 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,21 @@
1-
import React, { useEffect } from 'react';
2-
import TextField from '@mui/material/TextField';
3-
import InputAdornment from '@mui/material/InputAdornment';
4-
import Search from '@mui/icons-material/Search';
5-
import docsearch from 'docsearch.js';
6-
import { useRouter } from 'next/router';
7-
import { styled } from '@mui/material/styles';
1+
import React from 'react';
2+
import { DocSearch as AlgDocSearch } from '@docsearch/react';
83

9-
const Root = styled('form')(({ theme }) => ({
10-
'&.wrapper': {
11-
marginRight: 16,
12-
'& .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main.algolia-docsearch-suggestion__secondary': {
13-
textDecoration: 'none',
14-
},
15-
'& .algolia-autocomplete .algolia-docsearch-suggestion--title': {
16-
marginBottom: 0,
17-
},
18-
'& .ds-dropdown-menu': {
19-
[theme.breakpoints.down('md')]: {
20-
position: 'fixed !important',
21-
top: '50px !important',
22-
maxWidth: '100% !important',
23-
minWidth: '100%',
24-
},
25-
'& [class^=ds-dataset-]': {
26-
borderRadius: 0,
27-
},
28-
'&:before': {
29-
display: 'none',
30-
},
31-
},
32-
},
33-
'& .search-input': {
34-
'& input': {
35-
color: 'white',
36-
},
37-
'& .MuiInput-underline:hover:not(.Mui-disabled):before': {
38-
borderBottomColor: 'white',
39-
},
40-
'& .MuiInput-underline:after': {
41-
borderBottomColor: 'white',
42-
},
43-
'& .MuiInput-underline:before': {
44-
borderBottomColor: 'transparent',
45-
},
46-
},
47-
'& .search-icon': {
48-
fill: 'white',
49-
},
50-
}));
4+
import '@docsearch/css';
5+
import Link from 'next/link';
516

52-
const DocSearch = () => {
53-
const { push } = useRouter();
54-
useEffect(() => {
55-
docsearch({
56-
apiKey: '5e9dbd314423e38339595e183d1ae7b6',
57-
indexName: 'data-driven-forms',
58-
inputSelector: '#data-driven-forms-search',
59-
handleSelected: (input, event, suggestion) => {
60-
event.button = 0;
61-
push(suggestion.url.replace('https://data-driven-forms.org', ''));
62-
input.close();
63-
},
64-
// debug: true, // Set debug to true if you want to inspect the dropdown.
65-
});
66-
}, [push]);
67-
return (
68-
<Root className="wrapper">
69-
<TextField
70-
variant="standard"
71-
id="data-driven-forms-search"
72-
type="search"
73-
placeholder="Search..."
74-
className="search-input"
75-
InputProps={{
76-
startAdornment: (
77-
<InputAdornment position="start">
78-
<Search className="search-icon" />
79-
</InputAdornment>
80-
),
81-
}}
82-
/>
83-
</Root>
84-
);
85-
};
7+
const DocSearch = () => (
8+
<AlgDocSearch
9+
hitComponent={({ hit, children }) => (
10+
<Link href={hit.url.replace('https://data-driven-forms.org', '')}>
11+
<a href={hit.url.replace('https://data-driven-forms.org', '')}>{children}</a>
12+
</Link>
13+
)}
14+
debug
15+
apiKey="89894d702d5ead6999eaf04e3b34012a"
16+
appId="4KH6MQCYWM"
17+
indexName="data-driven-forms"
18+
/>
19+
);
8620

8721
export default DocSearch;

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,19 @@ module.exports = withBundleAnalyzer(
5656
config.resolve.alias = {
5757
...config.resolve.alias,
5858
...(process.env.DEPLOY === 'true'
59-
? {}
59+
? {
60+
"@emotion/react": path.resolve(__dirname, '../node_modules/@emotion/react'),
61+
"@emotion/server": path.resolve(__dirname, '../node_modules/@emotion/server'),
62+
"@emotion/styled": path.resolve(__dirname, '../node_modules/@emotion/styled'),
63+
}
6064
: {
6165
react: path.resolve(__dirname, '../../../node_modules/react'),
6266
'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
67+
"@emotion/react": path.resolve(__dirname, '../../../node_modules/@emotion/react'),
68+
"@emotion/server": path.resolve(__dirname, '../../../node_modules/@emotion/server'),
69+
"@emotion/styled": path.resolve(__dirname, '../../../node_modules/@emotion/styled'),
6370
}),
71+
6472
'@docs/doc-components': path.resolve(__dirname, './doc-components'),
6573
'@docs/components': path.resolve(__dirname, './components'),
6674
'@docs/pages': path.resolve(__dirname, './pages'),

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

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
import React from 'react';
2-
import App from 'next/app';
1+
import * as React from 'react';
2+
import PropTypes from 'prop-types';
33
import Head from 'next/head';
44
import { ThemeProvider } from '@mui/material/styles';
5-
import { StyledEngineProvider } from '@mui/material/styles';
65
import CssBaseline from '@mui/material/CssBaseline';
7-
import theme from '../theme';
6+
import { CacheProvider } from '@emotion/react';
87
import Layout from '@docs/components/layout';
98
import { MDXProvider } from '@mdx-js/react';
109
import MdxComponents from '@docs/components/mdx/mdx-components';
10+
1111
import CookieModal from '../components/cookie-modal';
12+
import theme from '../theme';
13+
import createEmotionCache from '../utils/create-emotion-cache';
1214

13-
export default class MyApp extends App {
14-
componentDidMount() {
15-
// Remove the server-side injected CSS.
16-
const jssStyles = document.querySelector('#jss-server-side');
17-
if (jssStyles) {
18-
jssStyles.parentNode.removeChild(jssStyles);
19-
}
20-
}
15+
// Client-side cache, shared for the whole session of the user in the browser.
16+
const clientSideEmotionCache = createEmotionCache();
2117

22-
render() {
23-
const { Component, pageProps } = this.props;
18+
export default function App(props) {
19+
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
2420

25-
return (
26-
<React.Fragment>
27-
<Head>
28-
<title>Data driven forms</title>
29-
</Head>
30-
<StyledEngineProvider injectFirst>
31-
<ThemeProvider theme={theme}>
32-
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
33-
<CssBaseline />
34-
<MDXProvider components={MdxComponents}>
35-
<Layout>
36-
<Component {...pageProps} />
37-
</Layout>
38-
</MDXProvider>
39-
<CookieModal />
40-
</ThemeProvider>
41-
</StyledEngineProvider>
42-
</React.Fragment>
43-
);
44-
}
21+
return (
22+
<CacheProvider value={emotionCache}>
23+
<Head>
24+
<title>Data driven forms</title>
25+
<meta name="viewport" content="initial-scale=1, width=device-width" />
26+
</Head>
27+
<ThemeProvider theme={theme}>
28+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
29+
<CssBaseline />
30+
<MDXProvider components={MdxComponents}>
31+
<Layout>
32+
<Component {...pageProps} />
33+
</Layout>
34+
</MDXProvider>
35+
<CookieModal />
36+
</ThemeProvider>
37+
</CacheProvider>
38+
);
4539
}
40+
41+
App.propTypes = {
42+
Component: PropTypes.elementType.isRequired,
43+
emotionCache: PropTypes.object,
44+
pageProps: PropTypes.object.isRequired,
45+
};

0 commit comments

Comments
 (0)