Skip to content

Commit 7960b83

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1260 from rvsia/addEditorToDemo
Add editor to demo
2 parents c9b703a + ea7a59f commit 7960b83

13 files changed

Lines changed: 504 additions & 13 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@actions/github": "^5.0.0",
3131
"@data-driven-forms/form-builder": "0.0.13-rc1",
3232
"@data-driven-forms/mui-component-mapper": "*",
33+
"@data-driven-forms/editor-pro": "0.0.10",
3334
"@data-driven-forms/react-form-renderer": "*",
3435
"@emotion/react": "^11.7.1",
3536
"@emotion/styled": "^11.6.0",
@@ -45,6 +46,7 @@
4546
"clsx": "^1.1.1",
4647
"codesandbox": "2.2.3",
4748
"docsearch.js": "^2.6.3",
49+
"evergreen-ui": "^6.9.10",
4850
"firebase-admin": "^10.0.1",
4951
"firebase-functions": "^3.16.0",
5052
"markdown-to-jsx": "^7.1.6",

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@ const ComponentMapperBar = ({ prefix, href, github, npm, npmSvg }) => {
4444
>
4545
<img src={npmSvg || `https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper.svg`} alt="current version" />
4646
</a>
47-
<IconButton aria-label="web" title="Library web" href={href} rel="noopener noreferrer" target="_blank" size="large">
48-
<LanguageIcon />
49-
</IconButton>
47+
{href && (
48+
<IconButton aria-label="web" title="Library web" href={href} rel="noopener noreferrer" target="_blank" size="large">
49+
<LanguageIcon />
50+
</IconButton>
51+
)}
5052
<IconButton
5153
aria-label="github"
5254
title="Git Hub package"

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ListItem from '@mui/material/ListItem';
66
import ListItemText from '@mui/material/ListItemText';
77
import ListSubheader from '@mui/material/ListSubheader';
88
import Typography from '@mui/material/Typography';
9+
import Chip from '@mui/material/Chip';
910
import ExpandLess from '@mui/icons-material/ExpandLess';
1011
import ExpandMore from '@mui/icons-material/ExpandMore';
1112
import Collapse from '@mui/material/Collapse';
@@ -78,7 +79,7 @@ const StyledList = styled(List)(() => ({
7879
},
7980
}));
8081

81-
const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems, openable = true, open = false }) => {
82+
const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems, openable = true, open = false, chip }) => {
8283
const [isOpen, setIsOpen] = useState(openable ? open : true);
8384

8485
const closeNav = () => setIsOpen((state) => !state);
@@ -88,6 +89,7 @@ const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems
8889
{title && (
8990
<ListItem button onClick={openable ? closeNav : null} className={'listItem'}>
9091
<ListItemText primary={title} className={'listItemText'} />
92+
{chip && <Chip label={chip} size="small" color="warning" variant="outlined" />}
9193
{openable ? isOpen ? <ExpandLess /> : <ExpandMore /> : null}
9294
</ListItem>
9395
)}

‎packages/react-renderer-demo/src/components/navigation/schemas/editor.schema.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const editorSchema = [
2+
{
3+
component: 'dnd',
4+
linkText: 'Drag and Drop',
5+
},
6+
{
7+
component: 'core-editor',
8+
linkText: 'Core editor',
9+
},
10+
{
11+
component: 'pro-editor',
12+
linkText: 'Pro Editor',
13+
},
14+
{
15+
component: 'live-editor',
16+
linkText: 'Live Editor',
17+
},
18+
];
19+
20+
export default editorSchema;

‎packages/react-renderer-demo/src/components/navigation/schemas/provider-mappers.schema.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ const providedMappersSchema = [
4343
link: 'aws-northstar',
4444
linkText: 'AWS Northstar',
4545
},
46+
{
47+
link: 'evergreen',
48+
linkText: 'Evergreen',
49+
},
4650
{
4751
subHeader: true,
4852
noRoute: true,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import mappersSchema from './mappers.schema';
66
import customExamplesSchema from './custom-examples.schema';
77
import providedMappersSchema from './provider-mappers.schema';
88
import utilitiesSchema from './utilities.schema';
9+
import editorSchema from './editor.schema';
910

1011
const schema = [
1112
{
@@ -58,6 +59,13 @@ const schema = [
5859
noRoute: true,
5960
fields: customExamplesSchema,
6061
},
62+
{
63+
title: 'Editor utilities',
64+
link: 'editor',
65+
noRoute: true,
66+
fields: editorSchema,
67+
chip: 'Preview',
68+
},
6169
{
6270
linkText: 'Form builder',
6371
link: 'live-editor',

‎packages/react-renderer-demo/src/pages/editor/core-editor.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import DocPage from '@docs/doc-page';
2+
import ComponentMapperBar from '@docs/component-mapper-bar';
3+
import Alert from '@mui/material/Alert';
4+
5+
<DocPage>
6+
7+
# Core Editor
8+
9+
<ComponentMapperBar prefix="mui" github="https://github.com/data-driven-forms/editor/tree/main/packages/editor-core" npm="https://www.npmjs.com/package/@data-driven-forms%2Feditor-core" npmSvg="https://badge.fury.io/js/@data-driven-forms%2Feditor-core.svg" />
10+
11+
<br />
12+
13+
<Alert severity="warning">This component is work-in-progress and in preview. API is unstable.</Alert>
14+
15+
<br />
16+
17+
`@data-driven-forms/editor-core` is a set of components and utilities allowing to build a custom Data Driven Forms Drag And Drop editor based on [Data Driven Forms Drag And Drop](/editor/dnd) library.
18+
19+
## Installation
20+
21+
```bash
22+
npm install --save @data-driven-forms/editor-core @data-driven-forms/dnd
23+
```
24+
or
25+
```bash
26+
yarn add @data-driven-forms/editor-core @data-driven-forms/dnd
27+
```
28+
29+
## API
30+
31+
### Component
32+
33+
*({ id: string, container: string, HandleProps?: AnyObject, Handle?: Component }) => React.Node*
34+
35+
A wrapper around [useComponent](/editor/dnd#usecomponent) and [useHandle](/editor/dnd#usehandle). Returns a wrapper around a rendered form field.
36+
37+
### Container
38+
39+
*({ id: string, container?: string, isRoot?: boolean, Handle?: Component, HandleProps?: AnyProps, ListProps?: AnyProps, Component: Component }) => React.Node*
40+
41+
A wrapper around [useContainer](/editor/dnd#usecontainer).
42+
43+
### convertToSchema
44+
45+
*(state: ) => schema*
46+
47+
A function converting DnD state to DDF schema.
48+
49+
### Editor
50+
51+
A wrapper providing DnD and Editor functionality.
52+
53+
### MenuItem
54+
55+
*({ component: string, Component?: Component, componentInitialProps?: AnyObject }) => React.Node*
56+
57+
A component for selecting new components and dragging them into the form container.
58+
59+
### prepareCondition
60+
61+
A function preparing DnD `condition` to DDF `condition`. Checks and removes all unfinished configuration.
62+
63+
### prepareValidate
64+
65+
A function preparing DnD `validate` to DDF `validate`. Checks and removes all unfinished configuration, esnures that only valid validators are passed to components..
66+
67+
### Properties
68+
69+
A properties editor for selected components.
70+
71+
### reducer
72+
73+
Extended DnD Reducer with additional functionality.
74+
75+
### useEditor
76+
77+
Setups Editor reducer.
78+
79+
</DocPage>

‎packages/react-renderer-demo/src/pages/editor/dnd.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import DocPage from '@docs/doc-page';
2+
import ComponentMapperBar from '@docs/component-mapper-bar';
3+
import Alert from '@mui/material/Alert';
4+
5+
<DocPage>
6+
7+
# Drag and Drop
8+
9+
<ComponentMapperBar prefix="mui" github="https://github.com/data-driven-forms/editor/tree/main/packages/dnd" npm="https://www.npmjs.com/package/@data-driven-forms%2Fdnd" npmSvg="https://badge.fury.io/js/@data-driven-forms%2Fdnd.svg" />
10+
11+
<br />
12+
13+
<Alert severity="warning">This library is work-in-progress and in preview. API is unstable.</Alert>
14+
15+
<br />
16+
17+
`@data-driven-forms/dnd` is a library providing drag and drop functionality for React components. This custom light-weight library currently supports mouse and touch input, is highly customisable and supports deep nesting of container elements.
18+
19+
## Installation
20+
21+
```bash
22+
npm install --save @data-driven-forms/dnd
23+
```
24+
or
25+
```bash
26+
yarn add @data-driven-forms/dnd
27+
```
28+
29+
### API
30+
31+
### dispatchContext
32+
33+
An utility to create an context for `dispatch` function.
34+
35+
### DropCursor
36+
37+
A component handling moving cursor and selecting the correct place to move dragged element.
38+
39+
### findTargetElement
40+
41+
An utility function to go over all elements' positions stored in state and selecting the correct place.
42+
43+
### pauseEvent
44+
45+
An utility to stop an event from propagation and default action.
46+
47+
### Provider
48+
49+
A wrapper providing all neccessary components.
50+
51+
### reducer
52+
53+
A reducer providing the basic drag and drop functionality.
54+
55+
### stateContext
56+
57+
An utility to create an context for a drag and drop `state`.
58+
59+
### useComponent
60+
61+
*({ id: any }) => { ref, component }*
62+
63+
A hook to connect a component to DnD state. Requires an id of the component. Returns a `ref` and the `component` object from the state.
64+
65+
### useContainer
66+
67+
*({ id?: any, isRoot?: boolean }) => { ref, container, id }*
68+
69+
A hook to connect a container to DnD state. Requires an id of the container or a root in case the container is the root container. Returns a `ref`, `id` and the `container` object from the state.
70+
71+
### useDispatch
72+
73+
An utility to obtain a dispatch function for the DnD reducer.
74+
75+
### useHandle
76+
77+
*({component: string, sourceContainer?: string }) => { onClick, onMouseDown, onTouchStart }*
78+
79+
A hook returning handle events for a component handle. Requires an `id` of the component.
80+
81+
### useState
82+
83+
An utility to obtain a state object for the DnD reducer.
84+
85+
</DocPage>

‎packages/react-renderer-demo/src/pages/editor/live-editor.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import CodeExample from '@docs/code-example';
2+
import DocPage from '@docs/doc-page';
3+
import Editor from '@data-driven-forms/editor-pro/editor'
4+
5+
# Live editor
6+
7+
<Editor />
8+

‎packages/react-renderer-demo/src/pages/editor/pro-editor.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import DocPage from '@docs/doc-page';
2+
import ComponentMapperBar from '@docs/component-mapper-bar';
3+
import Alert from '@mui/material/Alert';
4+
5+
<DocPage>
6+
7+
# Pro Editor
8+
9+
<ComponentMapperBar prefix="mui" github="https://github.com/data-driven-forms/editor/tree/main/packages/editor-pro" npm="https://www.npmjs.com/package/@data-driven-forms%2Feditor-pro" npmSvg="https://badge.fury.io/js/@data-driven-forms%2Feditor-pro.svg" />
10+
11+
<br />
12+
13+
<Alert severity="warning">This component is work-in-progress and in preview. API is unstable.</Alert>
14+
15+
<br />
16+
17+
`@data-driven-forms/editor-pro` is a prebuilt Drag And Drop editor supporting custom provided mappers. The UI is built on Evergreen UI Framework. Check the [live example](/editor/live-editor).
18+
19+
## Installation
20+
21+
```bash
22+
npm install --save @data-driven-forms/editor-pro
23+
```
24+
or
25+
```bash
26+
yarn add @data-driven-forms/editor-pro
27+
```
28+
29+
30+
**Features**
31+
32+
- component editing
33+
- condition editing
34+
- validator editing
35+
36+
## Usage
37+
38+
```jsx
39+
import Editor from '@data-driven-forms/editor-pro/editor'
40+
41+
<Editor />
42+
```
43+
44+
45+
</DocPage>

0 commit comments

Comments
 (0)