Merge pull request #971 from rvsia/updateDemoEditor

Update demo code editor

Author: Hyperkid123

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

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Highlight, { defaultProps } from 'prism-react-renderer/';
 import ghTheme from 'prism-react-renderer/themes/github';
 import vsTheme from 'prism-react-renderer/themes/vsDark';
-import Select from '@material-ui/core/Select';
 import tranformImports from './transform-imports';
 
 const useStyles = makeStyles({
@@ -41,82 +40,23 @@ const useStylesCode = makeStyles((theme) => ({
     [theme.breakpoints.down('sm')]: {
       maxWidth: (props) => (props.inExample ? '100%' : 'calc(100vw - 64px)')
     }
-  },
-  switchwrapper: {
-    right: 0,
-    position: 'absolute'
-  },
-  select: {
-    fontSize: 'inherit',
-    color: 'white',
-    '& option': {
-      color: 'black'
-    },
-    '& svg': {
-      color: 'white'
-    },
-    '&:before': {
-      display: 'none'
-    }
-  },
-  emptyLine: {
-    // additional line added to snippets on mobile, so the select dont block the code
-    display: 'none',
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 24,
-      display: 'block'
-    }
   }
 }));
 
-const CodeEditor = ({ value, children, className, switchable, inExample, ...props }) => {
-  const [env, setEnv] = useState('cjs');
+const CodeEditor = ({ value, children, className, inExample }) => {
   const classes = useStylesCode({ inExample });
 
   const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
   let content = value || children || '';
+  content = tranformImports(content);
   content = content.substring(0, content.length - 1);
 
-  // read props from code in --- { "key": value } ---\n format
-  let propsFromMD = content.match(/--- .* ---/);
-  if (propsFromMD) {
-    propsFromMD = JSON.parse(propsFromMD[0].replace(/-/g, ''));
-    content = content.replace(/--- .* ---\n/, '');
-  }
-
-  propsFromMD = propsFromMD || {};
-  const isSwitchable = switchable && propsFromMD.switchable !== false;
-  const hasSwitcher = isSwitchable && content.match(/import.*data-driven-forms\/(\w*|\d*|-)*('|"|`|’)/);
-
-  if (isSwitchable && env !== 'umd') {
-    content = tranformImports(content, env);
-  }
-
   return (
     <div className={classes.wrapper}>
-      {hasSwitcher && (
-        <div className={classes.switchwrapper}>
-          <Select
-            native
-            value={env}
-            onChange={(e) => setEnv(e.target.value)}
-            label="Environment"
-            inputProps={{
-              name: 'env'
-            }}
-            className={classes.select}
-          >
-            <option value="cjs">CJS</option>
-            <option value="esm">ESM</option>
-            <option value="umd">UMD</option>
-          </Select>
-        </div>
-      )}
       <Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <Pre className={className} style={style}>
             <React.Fragment>
-              {hasSwitcher && <pre className={classes.emptyLine} />}
               {tokens.map((line, i) => (
                 <div key={i} {...getLineProps({ line, key: i })}>
                   {line.map((token, key) => (
@@ -136,7 +76,6 @@ CodeEditor.propTypes = {
   value: PropTypes.string,
   children: PropTypes.string,
   className: PropTypes.string,
-  switchable: PropTypes.bool,
   inExample: PropTypes.bool
 };
 

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

@@ -1,11 +1,7 @@
-const tranformImports = (content, env) => {
-  if (env === 'umd') {
-    return content;
-  }
-
+const tranformImports = (content) => {
   let newContent = content;
 
-  const regexp = RegExp('import.*data-driven-forms.*', 'g');
+  const regexp = RegExp('import.*{.*data-driven-forms.*', 'g');
   let match;
   const matches = [];
 
@@ -22,7 +18,7 @@ const tranformImports = (content, env) => {
       .split(',')
       .map(
         (imp) =>
-          `import ${imp} from '${pck}/dist/${env}/${imp
+          `import ${imp} from '${pck}/${imp
             .split(/(?=[A-Z])/)
             .join('-')
             .toLowerCase()}';`

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

@@ -211,7 +211,7 @@ const LandingPageCards = () => {
                 Write a schema
               </Typography>
               <div className={classes.editorWrapper}>
-                <CodeEditor showGutter={false} value={value} fontSize={11} switchable />
+                <CodeEditor showGutter={false} value={value} fontSize={11} />
               </div>
             </Grid>
             <Grid item xs={12} md={5}>

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

@@ -103,7 +103,7 @@ const MdxComponents = {
       {children}
     </Typography>
   ),
-  code: (props) => <CodeEditor {...props} switchable />,
+  code: (props) => <CodeEditor {...props} />,
   a: MdLink,
   h1: (props) => <Heading {...props} level={4} component="h1" />,
   h2: (props) => <Heading {...props} level={5} component="h2" />,

packages/react-renderer-demo/src/pages/components/renderer.md

@@ -7,7 +7,7 @@ import DocPage from '@docs/doc-page';
 Form renderer is the core component of Data Driven Forms. It is used to generate and render forms.
 
 ```jsx
-import FormRenderer from '@data-driven-forms/react-form-renderer';
+import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 
 const App = () => (<FormRenderer
   onSubmit={onSubmit}

packages/react-renderer-demo/src/pages/mappers/custom-mapper.md

@@ -99,7 +99,7 @@ const componentMapper = {
 And then use the component mapper in the form renderer component:
 
 ```jsx
-import FormRenderer from '@data-driven-forms/react-form-renderer';
+import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 
 const Form = (props) => <FormRenderer
   componentMapper={componentMapper}

packages/react-renderer-demo/src/pages/optimization.md

@@ -4,55 +4,48 @@ import DocPage from '@docs/doc-page';
 
 # Optimization
 
-Data Driven Forms is built in three module formats: CJS, ESM and UMD.
+Data Driven Forms is built in two module formats: CJS and ESM.
 
-## CJS
+By using a standard import path, **the module based on your environment will be used**. Browser environments are using ESM modules, environments based on NodeJS (testing) are using CJS.
+
+## Import only specific file
+
+Exported files follow the kebab case. All components are exported in default exports.
 
 ```jsx
---- { "switchable": false } ---
-import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import useField from '@data-driven-forms/react-form-renderer/use-field';
 ```
-
 ## ESM
 
+In case you need to import ESM module manually, you can do this by using `esm` in a path. However, we do not recommend it.
+
 ```jsx
---- { "switchable": false } ---
-import FormRenderer from '@data-driven-forms/react-form-renderer/dist/esm/form-renderer';
-import useField from '@data-driven-forms/react-form-renderer/dist/esm/use-field';
+import FormRenderer from '@data-driven-forms/react-form-renderer/esm/form-renderer';
+import useField from '@data-driven-forms/react-form-renderer/esm/use-field';
 ```
 
-In both of CJS and ESM, exported files follow the kebab case. All components are exported in default exports.
-
 ## UMD
 
-**Recommendation: UMD is just a fallback option. We strongly recommend to use CJS or ESM. These two modules allow to better optimization via treeshaking and more modern language syntax.**
-
-```jsx
---- { "switchable": false } ---
-import { FormRenderer, useField } from '@data-driven-forms/react-form-renderer';
-```
-
-Only the `FormRenderer` component is exported as a default. In all other packages, use only named exports.
+UMD module format is no longer supported.
 
 ---
 
 ## Mixing imports
 
-**Do not mix** different module formats (for example `Renderer` imported from UMD and `componentMapper` from CJS), otherwise you will encounter this error:
+**Do not mix** different module formats (for example `Renderer` imported from ESM and `componentMapper` from CJS), otherwise you will encounter this error:
 
 `useField must be used inside of a <Form> component`
 
 ## Transforming imports in Babel
 
-You can automate tranforming imports to specific module formats by using [transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) plugin in your Babel configuration. With that, you don't need to write explicit imports manually and you can still import everything from projects' roots.
+You can automate tranforming imports by using [transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) plugin in your Babel configuration. With that, you don't need to write explicit imports manually and you can still import everything from projects' roots.
 
 Example:
 
 ```jsx
 // babel.config.js
 
-const transformDDFImportsToCJS = [
+const transformDDFImports = [
   'transform-imports',
   {
     '@data-driven-forms/react-form-renderer': {
@@ -63,7 +56,7 @@ const transformDDFImportsToCJS = [
               .toLowerCase()}.js`,
     }
   },
-  'react-form-renderer-cjs'
+  'react-form-renderer'
 ]
 
 ...
@@ -72,18 +65,19 @@ module.exports = {
     ...,
     plugins: [
         ...,
-        transformDDFImportsToCJS
+        transformDDFImports
     ]
 }
 ```
 
 Result:
 
-```jsx
---- { "switchable": false } ---
-import { useField } from '@data-driven-forms/react-form-renderer';
-// ^^ this will be converted to >>
-import useField from '@data-driven-forms/react-form-renderer/use-field';
-```
+
+`import { useField } from '@data-driven-forms/react-form-renderer';`
+
+will be converted to
+
+`import useField from '@data-driven-forms/react-form-renderer/use-field';`
+
 
 </DocPage>

packages/react-renderer-demo/src/pages/testing.md

@@ -21,7 +21,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 
-import FormRenderer from '@data-driven-forms/react-form-renderer';
+import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 import { componentMapper, FormTemplate } from '@data-driven-forms/mui-component-mapper';
 
 describe('<FormRendererTest />', () => {