Add documentation texts for editor

Author: rvsia

.npmignore

@@ -6,6 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
 import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Collapse from '@mui/material/Collapse';
@@ -78,7 +79,7 @@ const StyledList = styled(List)(() => ({
   },
 }));
 
-const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems, openable = true, open = false }) => {
+const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems, openable = true, open = false, chip }) => {
   const [isOpen, setIsOpen] = useState(openable ? open : true);
 
   const closeNav = () => setIsOpen((state) => !state);
@@ -88,6 +89,7 @@ const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems
       {title && (
         <ListItem button onClick={openable ? closeNav : null} className={'listItem'}>
           <ListItemText primary={title} className={'listItemText'} />
+          {chip && <Chip label={chip} size="small" color="warning" variant="outlined" />}
           {openable ? isOpen ? <ExpandLess /> : <ExpandMore /> : null}
         </ListItem>
       )}

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

@@ -1,12 +1,16 @@
 const editorSchema = [
-  {
-    component: 'pro-editor',
-    linkText: 'Pro Editor',
-  },
   {
     component: 'dnd',
     linkText: 'Drag and Drop',
   },
+  {
+    component: 'core-editor',
+    linkText: 'Core editor',
+  },
+  {
+    component: 'pro-editor',
+    linkText: 'Pro Editor',
+  },
   {
     component: 'live-editor',
     linkText: 'Live Editor',

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

@@ -43,6 +43,10 @@ const providedMappersSchema = [
     link: 'aws-northstar',
     linkText: 'AWS Northstar',
   },
+  {
+    link: 'evergreen',
+    linkText: 'Evergreen',
+  },
   {
     subHeader: true,
     noRoute: true,

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

@@ -60,10 +60,11 @@ const schema = [
     fields: customExamplesSchema,
   },
   {
-    title: 'Pro Editor',
+    title: 'Editor utilities',
     link: 'editor',
     noRoute: true,
     fields: editorSchema,
+    chip: 'Preview',
   },
   {
     linkText: 'Form builder',

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

@@ -50,7 +50,7 @@ module.exports = withBundleAnalyzer(
       },
       crossOrigin: 'anonymous',
       pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-      distDir: './dist',
+      distDir: '../dist',
       swcMinify: true,
       webpack: (config, options) => {
         config.resolve.alias = {

packages/react-renderer-demo/src/next.config.js

@@ -0,0 +1,79 @@
+import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
+import Alert from '@mui/material/Alert';
+
+<DocPage>
+
+# Core Editor
+
+<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" />
+
+<br />
+
+<Alert severity="warning">This component is work-in-progress and in preview. API is unstable.</Alert>
+
+<br />
+
+`@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.
+
+## Installation
+
+```bash
+npm install --save @data-driven-forms/editor-core @data-driven-forms/dnd
+```
+or
+```bash
+yarn add @data-driven-forms/editor-core @data-driven-forms/dnd
+```
+
+## API
+
+### Component
+
+*({ id: string, container: string, HandleProps?: AnyObject, Handle?: Component }) => React.Node*
+
+A wrapper around [useComponent](/editor/dnd#usecomponent) and [useHandle](/editor/dnd#usehandle). Returns a wrapper around a rendered form field.
+
+### Container
+
+*({ id: string, container?: string, isRoot?: boolean, Handle?: Component, HandleProps?: AnyProps, ListProps?: AnyProps, Component: Component }) => React.Node*
+
+A wrapper around [useContainer](/editor/dnd#usecontainer).
+
+### convertToSchema
+
+*(state: ) => schema*
+
+A function converting DnD state to DDF schema.
+
+### Editor
+
+A wrapper providing DnD and Editor functionality.
+
+### MenuItem
+
+*({ component: string, Component?: Component, componentInitialProps?: AnyObject }) => React.Node*
+
+A component for selecting new components and dragging them into the form container.
+
+### prepareCondition
+
+A function preparing DnD `condition` to DDF `condition`. Checks and removes all unfinished configuration.
+
+### prepareValidate
+
+A function preparing DnD `validate` to DDF `validate`. Checks and removes all unfinished configuration, esnures that only valid validators are passed to components..
+
+### Properties
+
+A properties editor for selected components.
+
+### reducer
+
+Extended DnD Reducer with additional functionality.
+
+### useEditor
+
+Setups Editor reducer.
+
+</DocPage>

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

@@ -16,4 +16,70 @@ import Alert from '@mui/material/Alert';
 
 `@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.
 
+## Installation
+
+```bash
+npm install --save @data-driven-forms/dnd
+```
+or
+```bash
+yarn add @data-driven-forms/dnd
+```
+
+### API
+
+### dispatchContext
+
+An utility to create an context for `dispatch` function.
+
+### DropCursor
+
+A component handling moving cursor and selecting the correct place to move dragged element.
+
+### findTargetElement
+
+An utility function to go over all elements' positions stored in state and selecting the correct place.
+
+### pauseEvent
+
+An utility to stop an event from propagation and default action.
+
+### Provider
+
+A wrapper providing all neccessary components.
+
+### reducer
+
+A reducer providing the basic drag and drop functionality.
+
+### stateContext
+
+An utility to create an context for a drag and drop `state`.
+
+### useComponent
+
+*({ id: any }) => { ref, component }*
+
+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.
+
+### useContainer
+
+*({ id?: any, isRoot?: boolean }) => { ref, container, id }*
+
+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.
+
+### useDispatch
+
+An utility to obtain a dispatch function for the DnD reducer.
+
+### useHandle
+
+*({component: string, sourceContainer?: string }) => { onClick, onMouseDown, onTouchStart }*
+
+A hook returning handle events for a component handle. Requires an `id` of the component.
+
+### useState
+
+An utility to obtain a state object for the DnD reducer.
+
 </DocPage>

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

@@ -14,5 +14,32 @@ import Alert from '@mui/material/Alert';
 
 <br />
 
-`@data-driven-forms/editor-pro` is a component
+`@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).
+
+## Installation
+
+```bash
+npm install --save @data-driven-forms/editor-pro
+```
+or
+```bash
+yarn add @data-driven-forms/editor-pro
+```
+
+
+**Features**
+
+- component editing
+- condition editing
+- validator editing
+
+## Usage
+
+```jsx
+import Editor from '@data-driven-forms/editor-pro/editor'
+
+<Editor />
+```
+
+
 </DocPage>

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

@@ -17,6 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import PanToolIcon from '@mui/icons-material/PanTool';
 import PropTypes from 'prop-types';
 import componentMapper from '@data-driven-forms/mui-component-mapper/component-mapper';
+import Alert from '@mui/material/Alert';
 
 import CodeEditor from '../components/code-editor';
 import {
@@ -35,6 +36,7 @@ import {
   RIGHT_TITLE,
   STEP,
 } from '../helpers/field-properties';
+import Link from 'next/link';
 
 const Root = styled('div')(({ theme }) => ({
   '& .builderWrapper': {
@@ -183,6 +185,9 @@ const LiveEditor = () => {
       <Typography variant="h4" component="h1" gutterBottom>
         Form builder
       </Typography>
+      <Alert severity="warning">
+        This editor is no longer supported. Please check <Link href="/editor/pro-editor">Pro Editor</Link> instead.
+      </Alert>
       <FormBuilder
         builderMapper={reducedMapper}
         pickerMapper={pickerMapper}