Skip to content

Commit f702340

Browse files
rvsiarvsia
authored
Merge pull request #1350 from data-driven-forms/update-firebase-functions
Upgrade to nextjs 13
2 parents 76e6e9e + 3f737fd commit f702340

30 files changed

+422
-283
lines changed

‎packages/react-renderer-demo/firebaseFunctions.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ const { join } = require('path');
55
const { parse } = require('url');
66

77
const isDev = process.env.NODE_ENV !== 'production';
8-
const nextjsDistDir = join('src', require('./src/next.config.js').distDir);
8+
// cant use next.config.mjs because its a ES module
9+
const distDir = '../dist';
10+
const nextjsDistDir = join('src', distDir);
911
const nextjsServer = next({
1012
dev: isDev,
1113
conf: {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
"@next/mdx": "12.3.0",
2828
"@rvsia/next-offline": "^5.0.5",
2929
"clsx": "^1.1.1",
30-
"firebase-admin": "^10.0.1",
31-
"firebase-functions": "^3.16.0",
30+
"firebase-admin": "^11.4.1",
31+
"firebase-functions": "^4.1.1",
3232
"next": "12.3.0"
3333
},
3434
"devDependencies": {

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,23 @@
3838
"@emotion/server": "^11.10.0",
3939
"@emotion/styled": "^11.10.4",
4040
"@emotion/utils": "^1.2.0",
41-
"@mdx-js/loader": "^1.6.22",
42-
"@mdx-js/react": "^1.6.22",
41+
"@mdx-js/loader": "^2.2.1",
42+
"@mdx-js/react": "^2.2.1",
4343
"@mui/icons-material": "^5.10.3",
4444
"@mui/material": "^5.10.4",
4545
"@mui/system": "^5.10.4",
4646
"@mui/x-date-pickers": "^5.0.1",
47-
"@next/bundle-analyzer": "12.3.0",
48-
"@next/mdx": "12.3.0",
47+
"@next/bundle-analyzer": "13.1.1",
48+
"@next/font": "^13.1.1",
4949
"@rvsia/next-offline": "^5.0.5",
5050
"@stackblitz/sdk": "^1.5.3",
5151
"clsx": "^1.1.1",
5252
"codesandbox": "2.2.3",
5353
"evergreen-ui": "^6.9.10",
54-
"firebase-admin": "^10.0.1",
55-
"firebase-functions": "^3.16.0",
54+
"firebase-admin": "^11.4.1",
55+
"firebase-functions": "^4.1.1",
5656
"markdown-to-jsx": "^7.1.6",
57-
"next": "12.3.0",
57+
"next": "13.1.1",
5858
"prism-react-renderer": "^1.2.1",
5959
"prop-types": "^15.8.1",
6060
"raw-loader": "^4.0.2",
@@ -71,6 +71,7 @@
7171
"firebase-functions-test": "^0.3.3",
7272
"firebase-tools": "^10.1.0",
7373
"glob": "^7.2.0",
74+
"remark-gfm": "^3.0.1",
7475
"rimraf": "^3.0.2"
7576
}
7677
}

‎packages/react-renderer-demo/src/components/code-editor/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const Root = styled('div')(({ theme }) => ({
4444
}));
4545

4646
const CodeEditor = ({ value, children, className, inExample, editorClassname, keepLastLine }) => {
47-
const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
48-
let content = value || children || '';
47+
const lang = (className || children?.props?.className || '').toLowerCase().replace('language-', '');
48+
let content = value || children?.props?.value || children?.props?.children || '';
4949

5050
// read props from code in --- { "key": value } ---\n format
5151
let propsFromMD = content.match(/--- .* ---/);
@@ -83,7 +83,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
8383

8484
CodeEditor.propTypes = {
8585
value: PropTypes.string,
86-
children: PropTypes.string,
86+
children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
8787
className: PropTypes.string,
8888
inExample: PropTypes.bool,
8989
editorClassname: PropTypes.string,

‎packages/react-renderer-demo/src/components/code-example.js

Lines changed: 72 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import CodeEditor from './code-editor';
2525
import { headerToId } from '../helpers/list-of-contents';
2626
import ShareButton from './mdx/share-button';
2727
import { grey } from '@mui/material/colors';
28+
import ErrorBoundary from './error-boundary';
2829

2930
const HeadingRoot = styled('div')(({ theme }) => ({
3031
'& .anchor': {
@@ -207,78 +208,82 @@ const CodeExample = ({ source, mode }) => {
207208
}, [source]);
208209
if (mode === 'preview') {
209210
return (
210-
<ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
211-
{Component && (
212-
<Heading component="h3" level="5">
213-
{name}
214-
</Heading>
215-
)}
216-
{Component && (
217-
<Grid className={'formContainer'} item xs={12}>
218-
<Paper className={'componentPanel'}>
219-
<Component />
220-
</Paper>
211+
<ErrorBoundary>
212+
<ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
213+
{Component && (
214+
<Heading component="h3" level="5">
215+
{name}
216+
</Heading>
217+
)}
218+
{Component && (
219+
<Grid className={'formContainer'} item xs={12}>
220+
<Paper className={'componentPanel'}>
221+
<Component />
222+
</Paper>
223+
</Grid>
224+
)}
225+
<Grid item xs={12}>
226+
<Accordion className={'accordion'}>
227+
<AccordionSummary className={'accordionSummary'}>
228+
<Box display="flex">
229+
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
230+
<input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
231+
<Tooltip title="Edit in codesandbox">
232+
<IconButton
233+
disableFocusRipple
234+
type="submit"
235+
sx={{ pointerEvents: 'auto' }}
236+
onClick={(event) => event.stopPropagation()}
237+
size="small"
238+
>
239+
<CodesandboxIcon />
240+
</IconButton>
241+
</Tooltip>
242+
</form>
243+
<Link
244+
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/examples/${source}.js`}
245+
target="_blank"
246+
rel="noopener noreferrer"
247+
onClick={(event) => event.stopPropagation()}
248+
>
249+
<Tooltip title="View source on github">
250+
<IconButton sx={{ pointerEvents: 'auto' }} size="small">
251+
<GhIcon style={{ color: grey[700] }} />
252+
</IconButton>
253+
</Tooltip>
254+
</Link>
255+
</Box>
256+
</AccordionSummary>
257+
<AccordionDetails className={clsx('accordionDetail', 'codeWrapper')}>
258+
<CodeEditor value={codeSource} inExample />
259+
</AccordionDetails>
260+
</Accordion>
221261
</Grid>
222-
)}
223-
<Grid item xs={12}>
224-
<Accordion className={'accordion'}>
225-
<AccordionSummary className={'accordionSummary'}>
226-
<Box display="flex">
227-
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
228-
<input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
229-
<Tooltip title="Edit in codesandbox">
230-
<IconButton
231-
disableFocusRipple
232-
type="submit"
233-
sx={{ pointerEvents: 'auto' }}
234-
onClick={(event) => event.stopPropagation()}
235-
size="small"
236-
>
237-
<CodesandboxIcon />
238-
</IconButton>
239-
</Tooltip>
240-
</form>
241-
<Link
242-
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/examples/${source}.js`}
243-
target="_blank"
244-
rel="noopener noreferrer"
245-
onClick={(event) => event.stopPropagation()}
246-
>
247-
<Tooltip title="View source on github">
248-
<IconButton sx={{ pointerEvents: 'auto' }} size="small">
249-
<GhIcon style={{ color: grey[700] }} />
250-
</IconButton>
251-
</Tooltip>
252-
</Link>
253-
</Box>
254-
</AccordionSummary>
255-
<AccordionDetails className={clsx('accordionDetail', 'codeWrapper')}>
256-
<CodeEditor value={codeSource} inExample />
257-
</AccordionDetails>
258-
</Accordion>
259-
</Grid>
260-
</ExampleRoot>
262+
</ExampleRoot>
263+
</ErrorBoundary>
261264
);
262265
}
263266

264267
return (
265-
<ExampleRoot container spacing={0} className="DocRawComponent">
266-
<Grid item xs={12}>
267-
<Box display="flex" justifyContent="flex-end">
268-
<Link
269-
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
270-
target="_blank"
271-
rel="noopener noreferrer"
272-
variant="subtitle1"
273-
>
274-
View source on github
275-
</Link>
276-
</Box>
277-
</Grid>
278-
<Grid item xs={12} className={'codeWrapper'}>
279-
<CodeEditor value={codeSource} />
280-
</Grid>
281-
</ExampleRoot>
268+
<ErrorBoundary>
269+
<ExampleRoot container spacing={0} className="DocRawComponent">
270+
<Grid item xs={12}>
271+
<Box display="flex" justifyContent="flex-end">
272+
<Link
273+
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
274+
target="_blank"
275+
rel="noopener noreferrer"
276+
variant="subtitle1"
277+
>
278+
View source on github
279+
</Link>
280+
</Box>
281+
</Grid>
282+
<Grid item xs={12} className={'codeWrapper'}>
283+
<CodeEditor value={codeSource} />
284+
</Grid>
285+
</ExampleRoot>
286+
</ErrorBoundary>
282287
);
283288
};
284289

‎packages/react-renderer-demo/src/components/common/connected-links.js

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Grid from '@mui/material/Grid';
44
import Button from '@mui/material/Button';
55
import ChevronRight from '@mui/icons-material/ChevronRight';
66
import ChevronLeft from '@mui/icons-material/ChevronLeft';
7-
import Link from 'next/link';
7+
import DocLink from './doc-link';
88

99
import MenuContext from '../navigation/menu-context';
1010
import useMapperLink from '../../hooks/use-mapper-link';
@@ -46,26 +46,22 @@ const ConnectedLinks = () => {
4646
<StyledGrid container justifyContent="space-between" className={classes.linksContainer}>
4747
<Grid item>
4848
{prev && prev.link && (
49-
<Link href={prevLink}>
50-
<a className={classes.link} href={prevLink}>
51-
<Button>
52-
<ChevronLeft />
53-
{prev.label}
54-
</Button>
55-
</a>
56-
</Link>
49+
<DocLink className={classes.link} href={prevLink}>
50+
<Button>
51+
<ChevronLeft />
52+
{prev.label}
53+
</Button>
54+
</DocLink>
5755
)}
5856
</Grid>
5957
<Grid item>
6058
{next && next.link && (
61-
<Link href={nextLink}>
62-
<a className={classes.link} href={nextLink}>
63-
<Button>
64-
{next.label}
65-
<ChevronRight />
66-
</Button>
67-
</a>
68-
</Link>
59+
<DocLink className={classes.link} href={nextLink}>
60+
<Button>
61+
{next.label}
62+
<ChevronRight />
63+
</Button>
64+
</DocLink>
6965
)}
7066
</Grid>
7167
</StyledGrid>

0 commit comments

Comments
 (0)