Skip to content

Commit 569c995

Browse files
rvsiarvsia
committed
Redesign documentation landing page
1 parent d8a33a0 commit 569c995

File tree

5 files changed

+397
-30
lines changed

5 files changed

+397
-30
lines changed

‎packages/react-renderer-demo/src/app/src/components/common/material-logo.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint-disable max-len */
2+
import React from 'react';
3+
import SvgIcon from '@material-ui/core/SvgIcon';
4+
5+
const MaterialUILogo = (props) => (
6+
<SvgIcon fontSize="150" viewBox="0 0 256 204" role="presentation" {...props}>
7+
<g>
8+
<polygon fill="#00B0FF" points="0 110.848 0 0 96 55.424 96 92.3733333 32 55.424 32 129.322667"></polygon>
9+
<polygon fill="#0081CB" points="96 55.424 192 0 192 110.848 128 147.797333 96 129.322667 160 92.3733333 160 55.424 96 92.3733333"></polygon>
10+
<polygon fill="#00B0FF" points="96 129.322667 96 166.272 160 203.221333 160 166.272"></polygon>
11+
<path
12+
d="M160,203.221333 L256,147.797333 L256,73.8986667 L224,92.3733333 L224,129.322667 L160,166.272 L160,203.221333 Z M224,55.424 L224,18.4746667 L256,5.68434189e-14 L256,36.9493333 L224,55.424 Z"
13+
fill="#0081CB"
14+
></path>
15+
</g>
16+
</SvgIcon>
17+
);
18+
19+
export default MaterialUILogo;

‎packages/react-renderer-demo/src/app/src/components/common/pf3-logo.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
import SvgIcon from '@material-ui/core/SvgIcon';
4+
5+
const PF3Logo = (props) => (
6+
<SvgIcon width="320px" height="320px" viewBox="0 0 320 320" enable-background="new 0 0 320 320" role="presentation" {...props}>
7+
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="160" y1="320" x2="160" y2="0">
8+
<stop offset="0" style={{stopColor:"#E6E6E6"}} />
9+
<stop offset="0.75" style={{stopColor:"#FFFFFF" }}/>
10+
</linearGradient>
11+
<circle fill="url(#SVGID_1_)" cx="160" cy="160" r="160" />
12+
<g>
13+
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="160" y1="54.8711" x2="160" y2="272.935">
14+
<stop offset="0" style={{stopColor:"#54EEFF" }}/>
15+
<stop offset="1" style={{stopColor:"#1C75BC" }}/>
16+
</linearGradient>
17+
<path
18+
fill="url(#SVGID_2_)"
19+
d="M160.27,48.269l0.022-0.206l-0.102,0.126l-0.04-0.039l0.034-0.328l-0.184,0.181l-0.188-0.181
20+
l0.035,0.328l-0.04,0.039l-0.102-0.126l0.022,0.206L41.296,164.039L88.2,230.485l36.231-8.319l35.569,50.012l35.568-50.012
21+
l36.231,8.319l29.053-41.16l17.851-25.287L160.27,48.269z M156.403,61.86l-16.178,151.596l-31.613-43.118L156.403,61.86z
22+
M107.062,168.225l-19.895-27.136l69.065-84.474L107.062,168.225z M139.543,216.366l-14.142,3.245l-23.771-33.421l5.924-13.449
23+
L139.543,216.366z M159.627,54.544l0.374-0.848l0.372,0.844l16.728,162.987l-0.051-0.034l-16.39,24.219l-17.733-24.254
24+
l-0.021,0.016L159.627,54.544z M179.774,213.458L163.597,61.856l47.79,108.482L179.774,213.458z M212.445,172.741l5.926,13.449
25+
L194.6,219.611l-14.143-3.245L212.445,172.741z M163.77,56.619l69.063,84.47l-19.894,27.136L163.77,56.619z M89.178,227.93
26+
l-44.909-63.619l104.499-102.15l-64.473,78.853l21.711,29.61l-6.974,15.831l23.974,33.708L89.178,227.93z M160.001,268.26
27+
l-33.176-46.645l14.181-3.256l0.238,0.327l-0.152,0.112l19.64,26.859l18.199-26.891l-0.155-0.105l0.221-0.302l14.179,3.256
28+
L160.001,268.26z M258.999,188.017l-28.177,39.913l-33.826-7.767l23.972-33.708l-6.972-15.831l21.711-29.61l-64.473-78.852
29+
L275.73,164.311L258.999,188.017z"
30+
/>
31+
</g>
32+
</SvgIcon>
33+
);
34+
35+
export default PF3Logo;

‎packages/react-renderer-demo/src/app/src/components/common/pf4-logo.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
import SvgIcon from '@material-ui/core/SvgIcon';
4+
5+
const PF4Logo = (props) => (
6+
<SvgIcon height="402" width="582" viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" role="presentation" {...props}>
7+
<g>
8+
<title>background</title>
9+
<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
10+
</g>
11+
<g>
12+
<title>Layer 1</title>
13+
<g id="svg_1">
14+
<path id="svg_2" d="m197.2,83.9l0,-35.3l15.2,0c2.2,0 4.1,0.3 5.6,1c1.5,0.7 2.8,1.5 3.7,2.6c1,1.1 1.6,2.3 2.1,3.6c0.4,1.3 0.6,2.7 0.6,4c0,0.9 -0.1,1.7 -0.3,2.6c-0.2,0.9 -0.5,1.7 -0.9,2.6c-0.4,0.8 -0.9,1.6 -1.6,2.3c-0.6,0.7 -1.4,1.4 -2.3,1.9c-0.9,0.5 -1.9,1 -3.1,1.3c-1.2,0.3 -2.5,0.5 -3.9,0.5l-8.3,0l0,13l-6.8,0l0,-0.1zm15.5,-19.5c0.9,0 1.6,-0.1 2.2,-0.4c0.6,-0.3 1.1,-0.6 1.4,-1.1c0.4,-0.4 0.6,-0.9 0.8,-1.5c0.2,-0.6 0.3,-1.1 0.3,-1.7c0,-0.5 -0.1,-1 -0.2,-1.6c-0.1,-0.5 -0.4,-1 -0.7,-1.5c-0.4,-0.5 -0.8,-0.8 -1.4,-1.1c-0.6,-0.3 -1.4,-0.4 -2.3,-0.4l-8.6,0l0,9.4l8.5,0l0,-0.1z" fill="#030303"/>
15+
<path id="svg_3" d="m271.6,83.9l-2.7,-7.3l-13.6,0l-2.7,7.3l-7.3,0l13.5,-35.4l6.7,0l13.5,35.4l-7.4,0zm-8.4,-22.7c-0.2,-0.4 -0.4,-0.9 -0.6,-1.5c-0.2,-0.6 -0.4,-1.1 -0.5,-1.7c-0.1,0.5 -0.3,1.1 -0.5,1.7c-0.2,0.6 -0.4,1.1 -0.6,1.5l-3.5,9.2l9.2,0l-3.5,-9.2z" fill="#030303"/>
16+
<path id="svg_4" d="m317.3,55.2l0,28.8l-6.8,0l0,-28.8l-10.1,0l0,-6.6l27,0l0,6.6l-10.1,0z" fill="#030303"/>
17+
<path id="svg_5" d="m370.2,55.2l0,28.8l-6.8,0l0,-28.8l-10.1,0l0,-6.6l27,0l0,6.6l-10.1,0z" fill="#030303"/>
18+
<path id="svg_6" d="m408.5,83.9l0,-35.3l24.1,0l0,6.5l-17.3,0l0,7.4l10.2,0l0,6.5l-10.2,0l0,8.5l18.4,0l0,6.5l-25.2,0l0,-0.1z" fill="#030303"/>
19+
<path id="svg_7" d="m462.4,83.9l0,-35.3l16.4,0c2.2,0 4.1,0.3 5.6,0.9c1.5,0.6 2.7,1.4 3.6,2.5c0.9,1 1.6,2.2 2,3.5c0.4,1.3 0.6,2.7 0.6,4.2c0,1 -0.1,2 -0.4,3c-0.3,1 -0.7,2 -1.3,2.9c-0.6,0.9 -1.3,1.8 -2.1,2.5c-0.9,0.7 -1.8,1.3 -3,1.7l6.9,14.1l-7.7,0l-6.6,-13.2l-7.1,0l0,13.2l-6.9,0zm16.5,-19.6c0.9,0 1.6,-0.1 2.2,-0.4c0.6,-0.3 1.1,-0.6 1.4,-1c0.4,-0.4 0.6,-0.9 0.8,-1.5c0.2,-0.6 0.2,-1.1 0.2,-1.7c0,-0.6 -0.1,-1.1 -0.2,-1.7c-0.1,-0.6 -0.4,-1 -0.7,-1.5c-0.3,-0.4 -0.8,-0.8 -1.4,-1c-0.6,-0.3 -1.4,-0.4 -2.3,-0.4l-9.7,0l0,9.2l9.7,0z" fill="#030303"/>
20+
<path id="svg_8" d="m541.9,83.9l-14,-20.6c-0.2,-0.3 -0.5,-0.8 -0.8,-1.3c-0.3,-0.5 -0.5,-1 -0.7,-1.4c0.1,0.4 0.1,0.8 0.1,1.3c0,0.5 0,1 0,1.3l0,20.6l-6.8,0l0,-35.2l6.4,0l13.7,20.4c0.2,0.3 0.5,0.7 0.7,1.2c0.3,0.5 0.5,1 0.7,1.4c0,-0.5 -0.1,-1 -0.1,-1.4c0,-0.5 0,-0.9 0,-1.2l0,-20.4l6.8,0l0,35.4l-6,0l0,-0.1z" fill="#030303"/>
21+
<path id="svg_9" d="m578.4,83.9l0,-35.3l23.7,0l0,6.5l-16.9,0l0,7.4l10.8,0l0,6.5l-10.7,0l0,15l-6.9,0l0,-0.1z" fill="#030303"/>
22+
<path id="svg_10" d="m629.8,83.9l0,-35.3l6.8,0l0,28.8l17.1,0l0,6.6l-23.9,0l0,-0.1z" fill="#030303"/>
23+
<path id="svg_11" d="m686.4,83.9l0,-13.7l-13.1,-21.6l7.7,0l8.7,14.5l8.7,-14.5l7.7,0l-13.1,21.6l0,13.8l-6.6,0l0,-0.1z" fill="#030303"/>
24+
</g>
25+
<g id="svg_12">
26+
<path id="svg_13" d="m49,103l-21.2,4.9l-27.8,-39.5l70,-68.4l70,68.4l-27.8,39.4l-21.2,-4.8l-21,29.5l-21,-29.5zm21,25.7l18.6,-26.2l-7.2,-1.7l-11,16.2l-11.9,-16.2l-7.2,1.7l18.7,26.2zm0.4,-15.6l9.2,-13.5l-9.6,-92.9l-9.5,92.9l9.9,13.5zm-41.6,-7.7l18.8,-4.3l-13.8,-19.4l4.1,-9.3l-12.7,-17.4l32.8,-40.1l-55.1,53.8l25.9,36.7zm82.4,0l16.3,-23.1l9.6,-13.6l-55.1,-53.8l32.9,40.1l-12.8,17.4l4.1,9.3l-13.8,19.3l18.8,4.4zm-21.1,-4.9l13.6,-19.1l-3,-6.9l-18,24.3l7.4,1.7zm-40.1,0l7.3,-1.7l-17.9,-24.3l-3,6.9l13.6,19.1zm31.9,-4.3l17.6,-24.1l-26.6,-60.5l9,84.6zm-23.8,0l9,-84.6l-26.6,60.5l17.6,24.1zm-19.1,-26.2l27.1,-61.5l-38.1,46.6l11,14.9zm62.1,0l11,-15l-38.1,-46.5l27.1,61.5z" fill="#030303"/>
27+
</g>
28+
</g>
29+
</SvgIcon>
30+
);
31+
32+
export default PF4Logo;

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import Grid from '@material-ui/core/Grid';
4+
import Button from '@material-ui/core/Button';
5+
import { makeStyles } from '@material-ui/core/styles';
6+
7+
import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
8+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
9+
import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
10+
import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
11+
import Checkbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
12+
import FormSpy from '@data-driven-forms/react-form-renderer/dist/cjs/form-spy';
13+
import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';
14+
15+
const useStyles = makeStyles((theme) => ({
16+
formButtons: {
17+
display: 'flex',
18+
width: '100%',
19+
flexFlow: 'row-reverse',
20+
padding: 8
21+
}
22+
}));
23+
24+
const FormTemplate = ({ formFields }) => {
25+
const formOptions = useFormApi();
26+
const classes = useStyles();
27+
28+
return (
29+
<form onSubmit={formOptions.handleSubmit}>
30+
<Grid container spacing={2}>
31+
{formFields}
32+
<FormSpy subscription={{ valid: true }}>
33+
{({ valid }) => (
34+
<div className={classes.formButtons}>
35+
<Button disabled={!valid} type="submit" color="primary" variant="contained">
36+
Submit
37+
</Button>
38+
</div>
39+
)}
40+
</FormSpy>
41+
</Grid>
42+
</form>
43+
);
44+
};
45+
46+
FormTemplate.propTypes = {
47+
formFields: PropTypes.any
48+
};
49+
50+
const FormExample = ({ setFormState }) => (
51+
<FormRenderer
52+
FormTemplate={FormTemplate}
53+
onSubmit={(values) => setFormState(values)}
54+
componentMapper={{
55+
[componentTypes.TEXT_FIELD]: TextField,
56+
[componentTypes.CHECKBOX]: Checkbox
57+
}}
58+
schema={{
59+
fields: [
60+
{
61+
component: componentTypes.TEXT_FIELD,
62+
name: 'name',
63+
label: 'Your name',
64+
isRequired: true,
65+
validate: [
66+
{
67+
type: validatorTypes.REQUIRED
68+
}
69+
]
70+
},
71+
{
72+
component: componentTypes.TEXT_FIELD,
73+
name: 'email',
74+
label: 'Email',
75+
isRequired: true,
76+
validate: [
77+
{
78+
type: validatorTypes.REQUIRED
79+
},
80+
{
81+
type: validatorTypes.PATTERN,
82+
pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
83+
message: 'Not valid email'
84+
}
85+
]
86+
},
87+
{
88+
component: componentTypes.TEXT_FIELD,
89+
name: 'confirm-email',
90+
label: 'Confirm email',
91+
isRequired: true,
92+
validate: [
93+
{
94+
type: 'same-email'
95+
}
96+
]
97+
},
98+
{
99+
component: componentTypes.CHECKBOX,
100+
name: 'newsletters',
101+
label: 'I want to receive newsletter'
102+
}
103+
]
104+
}}
105+
validatorMapper={{
106+
'same-email': () => (value, allValues) => (value !== allValues.email ? 'Email does not match' : undefined)
107+
}}
108+
/>
109+
);
110+
111+
FormExample.propTypes = {
112+
setFormState: PropTypes.func
113+
};
114+
115+
export default FormExample;

0 commit comments

Comments
 (0)