Skip to content

Commit 12a88ca

Browse files
rvsiarvsia
committed
Update styles
1 parent a059efe commit 12a88ca

File tree

21 files changed

+513
-355
lines changed

21 files changed

+513
-355
lines changed

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import makeStyles from '@mui/styles/makeStyles';
3+
import { styled } from '@mui/material/styles';
44
import Highlight, { defaultProps } from 'prism-react-renderer/';
55
import ghTheme from 'prism-react-renderer/themes/github';
66
import vsTheme from 'prism-react-renderer/themes/vsDark';
77
import tranformImports from './transform-imports';
88
import clsx from 'clsx';
99

10-
const useStyles = makeStyles({
11-
pre: {
10+
const StyledPre = styled('pre')({
11+
'&.pre': {
1212
maxWidth: '100vw',
1313
textAlign: 'left',
1414
margin: '1em 0',
@@ -21,21 +21,18 @@ const useStyles = makeStyles({
2121
},
2222
});
2323

24-
const Pre = ({ children, ...props }) => {
25-
const classes = useStyles();
26-
return (
27-
<pre {...props} className={classes.pre}>
28-
{children}
29-
</pre>
30-
);
31-
};
24+
const Pre = ({ children, ...props }) => (
25+
<StyledPre {...props} className={'pre'}>
26+
{children}
27+
</StyledPre>
28+
);
3229

3330
Pre.propTypes = {
3431
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
3532
};
3633

37-
const useStylesCode = makeStyles((theme) => ({
38-
wrapper: {
34+
const Root = styled('div')(({ theme }) => ({
35+
'&.wrapper': {
3936
position: 'relative',
4037
maxWidth: '100%',
4138
[theme.breakpoints.down('md')]: {
@@ -45,8 +42,6 @@ const useStylesCode = makeStyles((theme) => ({
4542
}));
4643

4744
const CodeEditor = ({ value, children, className, inExample, editorClassname, keepLastLine }) => {
48-
const classes = useStylesCode({ inExample });
49-
5045
const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
5146
let content = value || children || '';
5247

@@ -64,7 +59,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
6459
content = keepLastLine ? content : content.substring(0, content.length - 1);
6560

6661
return (
67-
<div className={clsx(classes.wrapper, editorClassname)}>
62+
<Root className={clsx('wrapper', editorClassname)}>
6863
<Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
6964
{({ className, style, tokens, getLineProps, getTokenProps }) => (
7065
<Pre className={className} style={style}>
@@ -80,7 +75,7 @@ const CodeEditor = ({ value, children, className, inExample, editorClassname, ke
8075
</Pre>
8176
)}
8277
</Highlight>
83-
</div>
78+
</Root>
8479
);
8580
};
8681

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

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/prop-types */
22
import React, { Fragment, useEffect, useState, useRef } from 'react';
33
import Grid from '@mui/material/Grid';
4-
import makeStyles from '@mui/styles/makeStyles';
4+
import { styled } from '@mui/material/styles';
55
import Typography from '@mui/material/Typography';
66
import Link from '@mui/material/Link';
77
import Box from '@mui/material/Box';
@@ -25,17 +25,17 @@ import { headerToId } from '../helpers/list-of-contents';
2525
import ShareButton from './mdx/share-button';
2626
import { grey } from '@mui/material/colors';
2727

28-
const useHeadingStyles = makeStyles((theme) => ({
29-
anchor: {
28+
const HeadingRoot = styled('div')(({ theme }) => ({
29+
'& .anchor': {
3030
textDecoration: 'none',
3131
color: 'inherit',
3232
fontWeight: 'inherit',
3333
},
34-
wrapper: {
34+
'&.wrapper': {
3535
flexGrow: 1,
3636
display: 'flex',
3737
},
38-
heading: {
38+
'& .heading': {
3939
paddingTop: 4,
4040
fontSize: theme.typography.pxToRem(20),
4141
fontWeight: theme.typography.fontWeightRegular,
@@ -52,44 +52,44 @@ const useHeadingStyles = makeStyles((theme) => ({
5252

5353
export const Heading = ({ level, children, component }) => {
5454
const router = useRouter();
55-
const classes = useHeadingStyles();
5655
const id = headerToId(children);
5756
const path = `${router.asPath}#${id}`;
5857
return (
59-
<div id={id} className={classes.wrapper} data-scroll="true">
60-
<Typography id={`heading-${id}`} className={classes.heading} variant={`h${level}`} component={component}>
61-
<a href={path} className={classes.anchor} data-mdlink="md-heading">
58+
<HeadingRoot id={id} className={'wrapper'} data-scroll="true">
59+
<Typography id={`heading-${id}`} className={'heading'} variant={`h${level}`} component={component}>
60+
<a href={path} className={'anchor'} data-mdlink="md-heading">
6261
{children}
6362
<ShareButton path={path} />
6463
</a>
6564
</Typography>
66-
</div>
65+
</HeadingRoot>
6766
);
6867
};
6968

70-
const useStyles = makeStyles((theme) => ({
71-
container: {
69+
const ExampleRoot = styled(Grid)(({ theme }) => ({
70+
'&.container': {
7271
[theme.breakpoints.down('md')]: {
7372
maxWidth: 'calc(100vw - 64px)',
7473
},
7574
},
76-
codeWrapper: {
75+
'& .codeWrapper': {
7776
background: '#1D1F21',
7877
paddingTop: 16,
7978
paddingBottom: 16,
8079
borderRadius: 4,
8180
},
82-
componentPanel: {
81+
'& .componentPanel': {
8382
padding: 16,
8483
},
85-
accordion: {
84+
'& .accordion': {
8685
border: 'none',
8786
boxShadow: 'none',
8887
background: 'none',
8988
padding: 0,
9089
},
91-
accordionSummary: {
90+
'& .accordionSummary': {
9291
padding: 0,
92+
width: '100%',
9393
},
9494
}));
9595

@@ -179,14 +179,13 @@ const CodeExample = ({ source, mode }) => {
179179
setCodeSource(file.default);
180180
});
181181
}, [source]);
182-
const classes = useStyles();
183182
if (mode === 'preview') {
184183
return (
185-
<Grid container spacing={0} className={clsx('DocRawComponent', classes.container)}>
184+
<ExampleRoot container spacing={0} className={clsx('DocRawComponent', 'container')}>
186185
<Grid item xs={12}>
187-
<Accordion className={classes.accordion}>
186+
<Accordion className={'accordion'}>
188187
<AccordionSummary
189-
className={classes.accordionSummary}
188+
className={'accordionSummary'}
190189
expandIcon={
191190
<Tooltip title="Expand code example">
192191
<IconButton size="large">
@@ -223,24 +222,24 @@ const CodeExample = ({ source, mode }) => {
223222
</Link>
224223
</Box>
225224
</AccordionSummary>
226-
<AccordionDetails className={clsx(classes.accordionDetail, classes.codeWrapper)}>
225+
<AccordionDetails className={clsx('accordionDetail', 'codeWrapper')}>
227226
<CodeEditor value={codeSource} inExample />
228227
</AccordionDetails>
229228
</Accordion>
230229
</Grid>
231230
{Component && (
232-
<Grid className={classes.formContainer} item xs={12}>
233-
<Paper className={classes.componentPanel}>
231+
<Grid className={'formContainer'} item xs={12}>
232+
<Paper className={'componentPanel'}>
234233
<Component />
235234
</Paper>
236235
</Grid>
237236
)}
238-
</Grid>
237+
</ExampleRoot>
239238
);
240239
}
241240

242241
return (
243-
<Grid container spacing={0} className="DocRawComponent">
242+
<ExampleRoot container spacing={0} className="DocRawComponent">
244243
<Grid item xs={12}>
245244
<Box display="flex" justifyContent="flex-end">
246245
<Link
@@ -253,10 +252,10 @@ const CodeExample = ({ source, mode }) => {
253252
</Link>
254253
</Box>
255254
</Grid>
256-
<Grid item xs={12} className={classes.codeWrapper}>
255+
<Grid item xs={12} className={'codeWrapper'}>
257256
<CodeEditor value={codeSource} />
258257
</Grid>
259-
</Grid>
258+
</ExampleRoot>
260259
);
261260
};
262261

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

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import React, { useContext } from 'react';
2+
import { styled } from '@mui/material/styles';
23
import Grid from '@mui/material/Grid';
34
import Button from '@mui/material/Button';
4-
import makeStyles from '@mui/styles/makeStyles';
55
import ChevronRight from '@mui/icons-material/ChevronRight';
66
import ChevronLeft from '@mui/icons-material/ChevronLeft';
77
import Link from 'next/link';
88

99
import MenuContext from '../navigation/menu-context';
1010
import useMapperLink from '../../hooks/use-mapper-link';
11+
import { grey } from '@mui/material/colors';
1112

12-
const useStyles = makeStyles((theme) => ({
13-
linksContainer: {
13+
const PREFIX = 'ConnectedLinks';
14+
15+
const classes = {
16+
linksContainer: `${PREFIX}-linksContainer`,
17+
link: `${PREFIX}-link`,
18+
};
19+
20+
const StyledGrid = styled(Grid)(({ theme }) => ({
21+
[`&.${classes.linksContainer}`]: {
1422
paddingLeft: 32,
1523
paddingRight: 32,
1624
marginTop: 64,
@@ -20,22 +28,26 @@ const useStyles = makeStyles((theme) => ({
2028
paddingRight: 'calc((100% - (768px + 17%)) / 2)',
2129
},
2230
},
23-
link: {
31+
32+
[`& .${classes.link}`]: {
2433
textDecoration: 'none',
34+
'& button': {
35+
color: `${grey[900]} !important`,
36+
},
2537
},
2638
}));
2739

2840
const ConnectedLinks = () => {
2941
const { prev, next } = useContext(MenuContext);
30-
const classNames = useStyles();
42+
3143
const prevLink = `/${useMapperLink(prev && prev.link)}`;
3244
const nextLink = `/${useMapperLink(next && next.link)}`;
3345
return (
34-
<Grid container justifyContent="space-between" className={classNames.linksContainer}>
46+
<StyledGrid container justifyContent="space-between" className={classes.linksContainer}>
3547
<Grid item>
3648
{prev && prev.link && (
3749
<Link href={prevLink}>
38-
<a className={classNames.link} href={prevLink}>
50+
<a className={classes.link} href={prevLink}>
3951
<Button>
4052
<ChevronLeft />
4153
{prev.label}
@@ -47,7 +59,7 @@ const ConnectedLinks = () => {
4759
<Grid item>
4860
{next && next.link && (
4961
<Link href={nextLink}>
50-
<a className={classNames.link} href={nextLink}>
62+
<a className={classes.link} href={nextLink}>
5163
<Button>
5264
{next.label}
5365
<ChevronRight />
@@ -56,7 +68,7 @@ const ConnectedLinks = () => {
5668
</Link>
5769
)}
5870
</Grid>
59-
</Grid>
71+
</StyledGrid>
6072
);
6173
};
6274

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import React from 'react';
2+
import { styled } from '@mui/material/styles';
23
import PropTypes from 'prop-types';
34
import RouterLink from 'next/link';
45
import Button from '@mui/material/Button';
5-
import makeStyles from '@mui/styles/makeStyles';
66

7-
const useStyles = makeStyles({
8-
toExampleLink: {
7+
const PREFIX = 'ExampleLink';
8+
9+
const classes = {
10+
toExampleLink: `${PREFIX}-toExampleLink`,
11+
};
12+
13+
// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
14+
const Root = styled('div')({
15+
[`& .${classes.toExampleLink}`]: {
916
textDecoration: 'none',
1017
},
1118
});
1219

13-
const ExampleLink = ({ to, text = 'To example' }) => {
14-
const classes = useStyles();
15-
return (
16-
<React.Fragment>
17-
<div style={{ float: 'right' }}>
18-
<RouterLink href={`/provided-mappers/${to}?mapper=mui`}>
19-
<a className={classes.toExampleLink} href={`/provided-mappers/${to}?mapper=mui`}>
20-
<Button color="primary">{text}</Button>
21-
</a>
22-
</RouterLink>
23-
</div>
24-
<br />
25-
</React.Fragment>
26-
);
27-
};
20+
const ExampleLink = ({ to, text = 'To example' }) => (
21+
<React.Fragment>
22+
<Root style={{ float: 'right' }}>
23+
<RouterLink href={`/provided-mappers/${to}?mapper=mui`}>
24+
<a className={classes.toExampleLink} href={`/provided-mappers/${to}?mapper=mui`}>
25+
<Button color="primary">{text}</Button>
26+
</a>
27+
</RouterLink>
28+
</Root>
29+
<br />
30+
</React.Fragment>
31+
);
2832

2933
ExampleLink.propTypes = {
3034
to: PropTypes.string.isRequired,

0 commit comments

Comments
 (0)