Skip to content

Commit 77a4d43

Browse files
rvsiarvsia
committed
Add links to original components and DDF implementation
1 parent 012af2e commit 77a4d43

File tree

3 files changed

+188
-137
lines changed

3 files changed

+188
-137
lines changed

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

Lines changed: 86 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import CheckIcon from '@material-ui/icons/Check';
1616
import Tabs from '@material-ui/core/Tabs';
1717
import Tab from '@material-ui/core/Tab';
1818
import Box from '@material-ui/core/Box';
19+
import LinkIcon from '@material-ui/icons/Link';
20+
import Button from '@material-ui/core/Button';
21+
import ButtonGroup from '@material-ui/core/ButtonGroup';
22+
1923
import Link from 'next/link';
2024
import clsx from 'clsx';
2125

@@ -27,6 +31,8 @@ import * as ant from '../stackblitz-templates/ant-templates';
2731
import * as carbon from '../stackblitz-templates/carbon-templates';
2832

2933
import avalableMappers from '../helpers/available-mappers';
34+
import GhIcon from './common/gh-svg-icon';
35+
import originalComponentLink from '../helpers/original-component-link';
3036

3137
const metadata = {
3238
mui,
@@ -108,6 +114,10 @@ const useStyles = makeStyles((theme) => ({
108114
height: 500
109115
}
110116
}
117+
},
118+
buttonGroup: {
119+
marginTop: 16,
120+
marginBottom: 16
111121
}
112122
}));
113123

@@ -149,63 +159,85 @@ const ComponentExample = ({ variants, schema, activeMapper, component }) => {
149159
));
150160

151161
return (
152-
<Box display="flex" className={classes.box}>
153-
<Card style={{ minHeight: 500 }} square>
154-
<CardContent>
155-
<Typography component="h3">Options</Typography>
156-
<Table>
157-
<TableHead>
158-
<TableRow>
159-
<TableCell>Name</TableCell>
160-
<TableCell>Type</TableCell>
161-
<TableCell>Required</TableCell>
162-
</TableRow>
163-
</TableHead>
164-
<TableBody>
165-
{variants.map(({ name, type, required }) => (
166-
<TableRow key={name}>
167-
<TableCell>{name}</TableCell>
168-
<TableCell>{`${type}`}</TableCell>
169-
<TableCell>{required && <CheckIcon fontSize="small" />}</TableCell>
162+
<React.Fragment>
163+
<Box display="flex" className={classes.box}>
164+
<Card style={{ minHeight: 500 }} square>
165+
<CardContent>
166+
<Typography component="h3">Options</Typography>
167+
<Table>
168+
<TableHead>
169+
<TableRow>
170+
<TableCell>Name</TableCell>
171+
<TableCell>Type</TableCell>
172+
<TableCell>Required</TableCell>
170173
</TableRow>
171-
))}
172-
</TableBody>
173-
</Table>
174-
</CardContent>
175-
</Card>
176-
<Box display="flex" className={classes.editorContainer}>
177-
<div className={classes.smTabDown}>
178-
<Tabs
179-
value={activeMapper}
180-
orientation="horizontal"
181-
variant="fullWidth"
182-
classes={{
183-
indicator: classes.indicator
184-
}}
185-
>
186-
{renderMapperTabs()}
187-
</Tabs>
188-
</div>
189-
<div className={classes.smTabUp}>
190-
<Tabs
191-
value={activeMapper}
192-
orientation="vertical"
193-
variant="scrollable"
194-
classes={{
195-
indicator: classes.indicator
196-
}}
197-
>
198-
{renderMapperTabs()}
199-
</Tabs>
200-
</div>
201-
<div className={classes.spinnerCheat}>
202-
<div id="code-target"></div>
203-
<div className={classes.spinner}>
204-
<CircularProgress color="secondary" size={80} />
174+
</TableHead>
175+
<TableBody>
176+
{variants.map(({ name, type, required }) => (
177+
<TableRow key={name}>
178+
<TableCell>{name}</TableCell>
179+
<TableCell>{`${type}`}</TableCell>
180+
<TableCell>{required && <CheckIcon fontSize="small" />}</TableCell>
181+
</TableRow>
182+
))}
183+
</TableBody>
184+
</Table>
185+
</CardContent>
186+
</Card>
187+
<Box display="flex" className={classes.editorContainer}>
188+
<div className={classes.smTabDown}>
189+
<Tabs
190+
value={activeMapper}
191+
orientation="horizontal"
192+
variant="fullWidth"
193+
classes={{
194+
indicator: classes.indicator
195+
}}
196+
>
197+
{renderMapperTabs()}
198+
</Tabs>
199+
</div>
200+
<div className={classes.smTabUp}>
201+
<Tabs
202+
value={activeMapper}
203+
orientation="vertical"
204+
variant="scrollable"
205+
classes={{
206+
indicator: classes.indicator
207+
}}
208+
>
209+
{renderMapperTabs()}
210+
</Tabs>
211+
</div>
212+
<div className={classes.spinnerCheat}>
213+
<div id="code-target"></div>
214+
<div className={classes.spinner}>
215+
<CircularProgress color="secondary" size={80} />
216+
</div>
205217
</div>
206-
</div>
218+
</Box>
207219
</Box>
208-
</Box>
220+
<ButtonGroup fullWidth className={classes.buttonGroup}>
221+
<Button
222+
component="a"
223+
rel="noopener noreferrer"
224+
target="_blank"
225+
href={originalComponentLink(activeMapper, component)}
226+
startIcon={<LinkIcon />}
227+
>
228+
Original documentation
229+
</Button>
230+
<Button
231+
component="a"
232+
rel="noopener noreferrer"
233+
target="_blank"
234+
href={`https://github.com/data-driven-forms/react-forms/blob/master/packages/${activeMapper}-component-mapper/src/${component}/${component}.js`}
235+
startIcon={<GhIcon />}
236+
>
237+
DDF implementation
238+
</Button>
239+
</ButtonGroup>
240+
</React.Fragment>
209241
);
210242
};
211243

‎packages/react-renderer-demo/src/helpers/generic-mui-component.js‎

Lines changed: 2 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,93 +2,12 @@ import React from 'react';
22
import Typography from '@material-ui/core/Typography';
33

44
import PropTypes from 'prop-types';
5-
6-
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
7-
8-
export const docsLinks = {
9-
mui: 'https://material-ui.com/api/',
10-
pf4: 'https://patternfly-react.surge.sh/components/',
11-
blueprint: 'https://blueprintjs.com/docs/',
12-
suir: 'https://react.semantic-ui.com/',
13-
ant: 'https://ant.design/components/',
14-
carbon: 'https://react.carbondesignsystem.com/?path=/story/'
15-
};
16-
17-
const mapperLinks = {
18-
pf4: {
19-
'date-picker': 'textintput',
20-
'text-field': 'textinput',
21-
'time-picker': 'textinput',
22-
'checkbox-multiple': 'checkbox'
23-
},
24-
mui: {
25-
'date-picker': 'text-field',
26-
'text-field': 'text-field',
27-
'time-picker': 'text-field',
28-
'checkbox-multiple': 'checkbox',
29-
'text-area': 'textarea',
30-
'plain-text': 'typography'
31-
},
32-
blueprint: {
33-
[componentTypes.TEXT_FIELD]: '#core/components/text-inputs',
34-
[componentTypes.FIELD_ARRAY]: '',
35-
[componentTypes.CHECKBOX]: '#core/components/checkbox',
36-
[componentTypes.SUB_FORM]: '',
37-
[componentTypes.RADIO]: '#core/components/radio',
38-
[componentTypes.TABS]: '#core/components/tabs',
39-
[componentTypes.DATE_PICKER]: '#datetime/datepicker',
40-
[componentTypes.TIME_PICKER]: '#datetime/timepicker',
41-
[componentTypes.WIZARD]: '',
42-
[componentTypes.SWITCH]: '#core/components/switch',
43-
[componentTypes.TEXTAREA]: '#core/components/text-inputs.text-area',
44-
[componentTypes.SELECT]: '#select',
45-
[componentTypes.PLAIN_TEXT]: '#core/components/text',
46-
[componentTypes.BUTTON]: '#core/components/button',
47-
[componentTypes.DUAL_LIST_SELECT]: '',
48-
[componentTypes.SLIDER]: '#core/components/sliders'
49-
},
50-
ant: {
51-
[componentTypes.TEXT_FIELD]: 'input',
52-
[componentTypes.CHECKBOX]: 'checkbox',
53-
[componentTypes.SUB_FORM]: '',
54-
[componentTypes.RADIO]: 'radio/#RadioGroup',
55-
[componentTypes.TABS]: 'tabs',
56-
[componentTypes.DATE_PICKER]: 'date-picker',
57-
[componentTypes.TIME_PICKER]: 'time-picker',
58-
[componentTypes.WIZARD]: '',
59-
[componentTypes.SWITCH]: 'switch',
60-
[componentTypes.TEXTAREA]: 'input/#Input.TextArea',
61-
[componentTypes.SELECT]: 'select',
62-
[componentTypes.PLAIN_TEXT]: 'typography/#Typography.Paragraph',
63-
[componentTypes.BUTTON]: 'button',
64-
[componentTypes.DUAL_LIST_SELECT]: 'transfer',
65-
[componentTypes.SLIDER]: 'slider'
66-
},
67-
carbon: {
68-
[componentTypes.TEXT_FIELD]: 'textinput',
69-
[componentTypes.CHECKBOX]: 'checkbox',
70-
[componentTypes.SUB_FORM]: '',
71-
[componentTypes.RADIO]: 'radiobutton',
72-
[componentTypes.TABS]: 'tabs',
73-
[componentTypes.DATE_PICKER]: 'datepicker',
74-
[componentTypes.TIME_PICKER]: 'timepicker',
75-
[componentTypes.WIZARD]: 'progressindicator',
76-
[componentTypes.SWITCH]: 'toggle',
77-
[componentTypes.TEXTAREA]: 'textarea',
78-
[componentTypes.SELECT]: 'select',
79-
[componentTypes.PLAIN_TEXT]: '',
80-
[componentTypes.BUTTON]: 'button',
81-
[componentTypes.DUAL_LIST_SELECT]: 'transfer',
82-
[componentTypes.SLIDER]: 'slider'
83-
}
84-
};
85-
86-
const mapper = (activeMapper, component) => (mapperLinks[activeMapper] && mapperLinks[activeMapper][component]) || component;
5+
import originalComponentLink from './original-component-link';
876

887
const GenericMuiComponent = ({ activeMapper = 'mui', component }) => (
898
<Typography variant="body1" gutterBottom>
909
This component also accepts all other original props, please see{' '}
91-
<a target="__blank" rel="noreferrer noopener" href={`${docsLinks[activeMapper]}${mapper(activeMapper, component)}`}>
10+
<a target="__blank" rel="noreferrer noopener" href={originalComponentLink(activeMapper, component)}>
9211
here
9312
</a>
9413
!

‎packages/react-renderer-demo/src/helpers/original-component-link.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
2+
3+
export const docsLinks = {
4+
mui: 'https://material-ui.com/api/',
5+
pf4: 'https://patternfly-react.surge.sh/components/',
6+
blueprint: 'https://blueprintjs.com/docs/',
7+
suir: 'https://react.semantic-ui.com/',
8+
ant: 'https://ant.design/components/',
9+
carbon: 'https://react.carbondesignsystem.com/?path=/story/'
10+
};
11+
12+
const mapperLinks = {
13+
pf4: {
14+
'date-picker': 'date-picker',
15+
'text-field': 'textinput',
16+
'time-picker': 'time-picker',
17+
'checkbox-multiple': 'checkbox',
18+
[componentTypes.CHECKBOX]: 'checkbox',
19+
[componentTypes.RADIO]: 'radio',
20+
[componentTypes.TABS]: 'tabs',
21+
[componentTypes.WIZARD]: 'wizard',
22+
[componentTypes.SWITCH]: 'switch',
23+
[componentTypes.TEXTAREA]: 'text-area',
24+
[componentTypes.PLAIN_TEXT]: 'text',
25+
[componentTypes.DUAL_LIST_SELECT]: 'dual-list-selector',
26+
[componentTypes.SLIDER]: 'slider'
27+
},
28+
mui: {
29+
'date-picker': 'text-field',
30+
'text-field': 'text-field',
31+
'time-picker': 'text-field',
32+
'checkbox-multiple': 'checkbox',
33+
'text-area': 'textarea',
34+
'plain-text': 'typography',
35+
[componentTypes.WIZARD]: 'stepper',
36+
[componentTypes.CHECKBOX]: 'checkbox',
37+
[componentTypes.RADIO]: 'radio',
38+
[componentTypes.TABS]: 'tabs',
39+
[componentTypes.SWITCH]: 'switch',
40+
[componentTypes.SLIDER]: 'slider'
41+
},
42+
blueprint: {
43+
[componentTypes.TEXT_FIELD]: '#core/components/text-inputs',
44+
[componentTypes.FIELD_ARRAY]: '',
45+
[componentTypes.CHECKBOX]: '#core/components/checkbox',
46+
[componentTypes.SUB_FORM]: '',
47+
[componentTypes.RADIO]: '#core/components/radio',
48+
[componentTypes.TABS]: '#core/components/tabs',
49+
[componentTypes.DATE_PICKER]: '#datetime/datepicker',
50+
[componentTypes.TIME_PICKER]: '#datetime/timepicker',
51+
[componentTypes.WIZARD]: '',
52+
[componentTypes.SWITCH]: '#core/components/switch',
53+
[componentTypes.TEXTAREA]: '#core/components/text-inputs.text-area',
54+
[componentTypes.SELECT]: '#select',
55+
[componentTypes.PLAIN_TEXT]: '#core/components/text',
56+
[componentTypes.BUTTON]: '#core/components/button',
57+
[componentTypes.DUAL_LIST_SELECT]: '',
58+
[componentTypes.SLIDER]: '#core/components/sliders'
59+
},
60+
ant: {
61+
[componentTypes.TEXT_FIELD]: 'input',
62+
[componentTypes.CHECKBOX]: 'checkbox',
63+
[componentTypes.SUB_FORM]: '',
64+
[componentTypes.RADIO]: 'radio/#RadioGroup',
65+
[componentTypes.TABS]: 'tabs',
66+
[componentTypes.DATE_PICKER]: 'date-picker',
67+
[componentTypes.TIME_PICKER]: 'time-picker',
68+
[componentTypes.WIZARD]: '',
69+
[componentTypes.SWITCH]: 'switch',
70+
[componentTypes.TEXTAREA]: 'input/#Input.TextArea',
71+
[componentTypes.SELECT]: 'select',
72+
[componentTypes.PLAIN_TEXT]: 'typography/#Typography.Paragraph',
73+
[componentTypes.BUTTON]: 'button',
74+
[componentTypes.DUAL_LIST_SELECT]: 'transfer',
75+
[componentTypes.SLIDER]: 'slider'
76+
},
77+
carbon: {
78+
[componentTypes.TEXT_FIELD]: 'textinput',
79+
[componentTypes.CHECKBOX]: 'checkbox',
80+
[componentTypes.SUB_FORM]: '',
81+
[componentTypes.RADIO]: 'radiobutton',
82+
[componentTypes.TABS]: 'tabs',
83+
[componentTypes.DATE_PICKER]: 'datepicker',
84+
[componentTypes.TIME_PICKER]: 'timepicker',
85+
[componentTypes.WIZARD]: 'progressindicator',
86+
[componentTypes.SWITCH]: 'toggle',
87+
[componentTypes.TEXTAREA]: 'textarea',
88+
[componentTypes.SELECT]: 'select',
89+
[componentTypes.PLAIN_TEXT]: '',
90+
[componentTypes.BUTTON]: 'button',
91+
[componentTypes.DUAL_LIST_SELECT]: 'transfer',
92+
[componentTypes.SLIDER]: 'slider'
93+
}
94+
};
95+
96+
const mapper = (activeMapper, component) => (mapperLinks[activeMapper] && mapperLinks[activeMapper][component]) || ``;
97+
98+
const originalComponentLink = (activeMapper, component) => `${docsLinks[activeMapper]}${mapper(activeMapper, component)}`;
99+
100+
export default originalComponentLink;

0 commit comments

Comments
 (0)