Skip to content

Commit 3f482a2

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #601 from rvsia/pr600
Merge docs improvement to master - with resolved conficts
2 parents 112db36 + 66dc026 commit 3f482a2

File tree

118 files changed

+2214
-1140
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+2214
-1140
lines changed

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

Lines changed: 95 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
33
import makeStyles from '@material-ui/core/styles/makeStyles';
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';
7+
import { Select } from '@material-ui/core';
8+
import tranformImports from './transform-imports';
79

810
const useStyles = makeStyles({
911
pre: {
@@ -32,31 +34,109 @@ Pre.propTypes = {
3234
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
3335
};
3436

35-
const CodeEditor = ({ value, children, className, ...props }) => {
37+
const useStylesCode = makeStyles((theme) => ({
38+
wrapper: {
39+
position: 'relative',
40+
maxWidth: '100%',
41+
[theme.breakpoints.down('sm')]: {
42+
maxWidth: '100vw'
43+
}
44+
},
45+
switchwrapper: {
46+
right: 0,
47+
position: 'absolute'
48+
},
49+
select: {
50+
fontSize: 'inherit',
51+
color: 'white',
52+
'& option': {
53+
color: 'black'
54+
},
55+
'& svg': {
56+
color: 'white'
57+
},
58+
'&:before': {
59+
display: 'none'
60+
}
61+
},
62+
emptyLine: {
63+
// additional line added to snippets on mobile, so the select dont block the code
64+
display: 'none',
65+
[theme.breakpoints.down('sm')]: {
66+
marginBottom: 24,
67+
display: 'block'
68+
}
69+
}
70+
}));
71+
72+
const CodeEditor = ({ value, children, className, switchable, ...props }) => {
73+
const [env, setEnv] = useState('cjs');
74+
const classes = useStylesCode();
75+
3676
const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
3777
let content = value || children || '';
3878
content = content.substring(0, content.length - 1);
79+
80+
// read props from code in --- { "key": value } ---\n format
81+
let propsFromMD = content.match(/--- .* ---/);
82+
if (propsFromMD) {
83+
propsFromMD = JSON.parse(propsFromMD[0].replace(/-/g, ''));
84+
content = content.replace(/--- .* ---\n/, '');
85+
}
86+
87+
propsFromMD = propsFromMD || {};
88+
const isSwitchable = switchable && propsFromMD.switchable !== false;
89+
const hasSwitcher = isSwitchable && content.match(/import.*data-driven-forms\/(\w*|\d*|-)*('|"|`|’)/);
90+
91+
if (isSwitchable && env !== 'umd') {
92+
content = tranformImports(content, env);
93+
}
94+
3995
return (
40-
<Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
41-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
42-
<Pre className={className} style={style}>
43-
{tokens.map((line, i) => (
44-
<div key={i} {...getLineProps({ line, key: i })}>
45-
{line.map((token, key) => (
46-
<span key={key} {...getTokenProps({ token, key })} />
47-
))}
48-
</div>
49-
))}
50-
</Pre>
96+
<div className={classes.wrapper}>
97+
{hasSwitcher && (
98+
<div className={classes.switchwrapper}>
99+
<Select
100+
native
101+
value={env}
102+
onChange={(e) => setEnv(e.target.value)}
103+
label="Environment"
104+
inputProps={{
105+
name: 'env'
106+
}}
107+
className={classes.select}
108+
>
109+
<option value="cjs">CJS</option>
110+
<option value="esm">ESM</option>
111+
<option value="umd">UMD</option>
112+
</Select>
113+
</div>
51114
)}
52-
</Highlight>
115+
<Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
116+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
117+
<Pre className={className} style={style}>
118+
<React.Fragment>
119+
{hasSwitcher && <pre className={classes.emptyLine} />}
120+
{tokens.map((line, i) => (
121+
<div key={i} {...getLineProps({ line, key: i })}>
122+
{line.map((token, key) => (
123+
<span key={key} {...getTokenProps({ token, key })} />
124+
))}
125+
</div>
126+
))}
127+
</React.Fragment>
128+
</Pre>
129+
)}
130+
</Highlight>
131+
</div>
53132
);
54133
};
55134

56135
CodeEditor.propTypes = {
57136
value: PropTypes.string,
58137
children: PropTypes.string,
59-
className: PropTypes.string
138+
className: PropTypes.string,
139+
switchable: PropTypes.bool
60140
};
61141

62142
export default CodeEditor;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const tranformImports = (content, env) => {
2+
if (env === 'umd') {
3+
return content;
4+
}
5+
6+
let newContent = content;
7+
8+
const regexp = RegExp('import.*data-driven-forms.*', 'g');
9+
let match;
10+
const matches = [];
11+
12+
// matchAll is not supported in node <12
13+
while ((match = regexp.exec(content)) !== null) {
14+
matches.push(match[0]);
15+
}
16+
17+
matches.forEach((m) => {
18+
const pck = m.match(/'.*'/)[0].replace(/'/g, '');
19+
20+
const imports = m
21+
.replace(/(import|from.*|{|}| *)/g, '')
22+
.split(',')
23+
.map(
24+
(imp) =>
25+
`import ${imp} from '${pck}/dist/${env}/${imp
26+
.split(/(?=[A-Z])/)
27+
.join('-')
28+
.toLowerCase()}';`
29+
)
30+
.join('\n');
31+
32+
newContent = newContent.replace(m, imports);
33+
});
34+
35+
return newContent;
36+
};
37+
38+
export default tranformImports;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const ExampleLink = ({ to, text = 'To example' }) => {
1515
return (
1616
<React.Fragment>
1717
<div style={{ float: 'right' }}>
18-
<RouterLink href={`/component-example/${to}`}>
19-
<a className={classes.toExampleLink} href={`/component-example/${to}`}>
18+
<RouterLink href={`/mappers/${to}`}>
19+
<a className={classes.toExampleLink} href={`/mappers/${to}`}>
2020
<Button color="primary">{text}</Button>
2121
</a>
2222
</RouterLink>

‎packages/react-renderer-demo/src/components/component-mapper-bar.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { makeStyles } from '@material-ui/core/styles';
5+
6+
import IconButton from '@material-ui/core/IconButton';
7+
8+
import LanguageIcon from '@material-ui/icons/Language';
9+
import GitHubIcon from '@material-ui/icons/GitHub';
10+
11+
const useStyles = makeStyles((theme) => ({
12+
root: {
13+
display: 'flex',
14+
flexDirection: 'row-reverse',
15+
marginTop: -48,
16+
[theme.breakpoints.down('xs')]: {
17+
marginTop: 'initial',
18+
flexDirection: 'row'
19+
}
20+
},
21+
npm: {
22+
display: 'grid',
23+
'& img': {
24+
margin: 'auto'
25+
}
26+
}
27+
}));
28+
29+
const ComponentMapperBar = ({ prefix, href }) => {
30+
const classes = useStyles();
31+
32+
return (
33+
<div className={classes.root}>
34+
<a
35+
href={`https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper`}
36+
rel="noopener noreferrer"
37+
target="_blank"
38+
className={classes.npm}
39+
>
40+
<img src={`https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper.svg`} alt="current version" />
41+
</a>
42+
<IconButton aria-label="web" title="Library web" href={href} rel="noopener noreferrer" target="_blank">
43+
<LanguageIcon />
44+
</IconButton>
45+
<IconButton
46+
aria-label="github"
47+
title="Git Hub package"
48+
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/${prefix}-component-mapper`}
49+
rel="noopener noreferrer"
50+
target="_blank"
51+
>
52+
<GitHubIcon />
53+
</IconButton>
54+
</div>
55+
);
56+
};
57+
58+
ComponentMapperBar.propTypes = {
59+
prefix: PropTypes.string.isRequired,
60+
href: PropTypes.string.isRequired
61+
};
62+
63+
export default ComponentMapperBar;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const DocSearch = () => {
5656
const resultUrl = new URL(suggestion.url);
5757

5858
let query = '';
59-
if (resultUrl.pathname.startsWith('/component-example/')) {
59+
if (resultUrl.pathname.startsWith('/mappper/')) {
6060
['mui', 'pf4', 'pf3'].find((mapper) => {
6161
if (resultUrl.hash.includes(mapper)) {
6262
query = `?mapper=${mapper}`;

‎packages/react-renderer-demo/src/components/landing-page/landing-page-cards.js

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,8 @@ import FormExample from './formExample';
2323
import CodeEditor from '@docs/components/code-editor';
2424

2525
const value = `import React from 'react';
26-
import
27-
FormRenderer, { componentTypes }
28-
from '@data-driven-forms/react-form-renderer';
29-
import
30-
{ componentMapper, FormTemplate }
31-
from '@data-driven-forms/pf4-component-mapper';
26+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
27+
import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
3228
3329
const validatorMapper = {
3430
'same-email': () => (
@@ -93,22 +89,22 @@ const buildFeatures = [
9389
{
9490
text: 'Multiple provided libraries - MaterialUI included!',
9591
Icon: LocalLibraryIcon,
96-
link: '/renderer/component-api'
92+
link: '/mappers/component-api'
9793
},
9894
{
9995
text: 'Validation - basic types are provided, supports async validators!',
10096
Icon: VerifiedUserIcon,
101-
link: '/renderer/validators'
97+
link: '/schema/introduction#validate'
10298
},
10399
{
104100
text: 'Conditions - hide and modify fields according to values of other fields!',
105101
Icon: PlaylistAddCheckIcon,
106-
link: '/renderer/condition'
102+
link: '/schema/introduction#condition'
107103
},
108104
{
109105
text: 'Fully customizable - you can use any components you are using right now!',
110106
Icon: EditAttributesIcon,
111-
link: '/renderer/component-mapping'
107+
link: '/mappers/custom-mapper'
112108
},
113109
{
114110
text: 'Online editor - you can build your form using comfy DnD!',
@@ -215,7 +211,7 @@ const LandingPageCards = () => {
215211
Write a schema
216212
</Typography>
217213
<div className={classes.editorWrapper}>
218-
<CodeEditor showGutter={false} value={value} fontSize={11} />
214+
<CodeEditor showGutter={false} value={value} fontSize={11} switchable />
219215
</div>
220216
</Grid>
221217
<Grid item xs={12} md={5}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import MenuIcon from '@material-ui/icons/Menu';
1313
import SvgIcon from '@material-ui/core/SvgIcon';
1414
import { useRouter } from 'next/router';
1515

16-
import { flatSchema } from './navigation/schema';
16+
import { flatSchema } from './navigation/schemas/schema';
1717
import GhIcon from './common/gh-svg-icon';
1818
import Navigation from './navigation/app-navigation';
1919
import MenuContext from './navigation/menu-context';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const MdxComponents = {
7878
{children}
7979
</Typography>
8080
),
81-
code: CodeEditor,
81+
code: (props) => <CodeEditor {...props} switchable />,
8282
a: MdLink,
8383
h1: (props) => <Heading {...props} level={4} component="h1" />,
8484
h2: (props) => <Heading {...props} level={5} component="h2" />,

‎packages/react-renderer-demo/src/components/navigation/app-navigation.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
1010

1111
import { navStyles } from './nav-styles';
1212
import MenuRenderer from './menu-renderer';
13-
import schema from './schema';
13+
import schema from './schemas/schema';
1414

1515
const useStyles = makeStyles(navStyles);
1616

0 commit comments

Comments
 (0)