Add env switcher to code examples

Author: rvsia

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

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } 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';
+import tranformImports from './transform-imports';
 
 const useStyles = makeStyles({
   pre: {
@@ -32,31 +34,109 @@ Pre.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
 };
 
-const CodeEditor = ({ value, children, className, ...props }) => {
+const useStylesCode = makeStyles((theme) => ({
+  wrapper: {
+    position: 'relative',
+    maxWidth: '100%',
+    [theme.breakpoints.down('sm')]: {
+      maxWidth: '100vw'
+    }
+  },
+  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, ...props }) => {
+  const [env, setEnv] = useState('cjs');
+  const classes = useStylesCode();
+
   const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
   let content = value || children || '';
   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 (
-    <Highlight {...defaultProps} theme={lang === 'bash' ? ghTheme : vsTheme} code={content} language={lang || 'jsx'}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <Pre className={className} style={style}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </Pre>
+    <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>
+      <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) => (
+                    <span key={key} {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </React.Fragment>
+          </Pre>
+        )}
+      </Highlight>
+    </div>
   );
 };
 
 CodeEditor.propTypes = {
   value: PropTypes.string,
   children: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  switchable: PropTypes.bool
 };
 
 export default CodeEditor;

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

@@ -0,0 +1,38 @@
+const tranformImports = (content, env) => {
+  if (env === 'umd') {
+    return content;
+  }
+
+  let newContent = content;
+
+  const regexp = RegExp('import.*data-driven-forms.*', 'g');
+  let match;
+  const matches = [];
+
+  // matchAll is not supported in node <12
+  while ((match = regexp.exec(content)) !== null) {
+    matches.push(match[0]);
+  }
+
+  matches.forEach((m) => {
+    const pck = m.match(/'.*'/)[0].replace(/'/g, '');
+
+    const imports = m
+      .replace(/(import|from.*|{|}| *)/g, '')
+      .split(',')
+      .map(
+        (imp) =>
+          `import ${imp} from '${pck}/dist/${env}/${imp
+            .split(/(?=[A-Z])/)
+            .join('-')
+            .toLowerCase()}';`
+      )
+      .join('\n');
+
+    newContent = newContent.replace(m, imports);
+  });
+
+  return newContent;
+};
+
+export default tranformImports;

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

@@ -23,12 +23,8 @@ import FormExample from './formExample';
 import CodeEditor from '@docs/components/code-editor';
 
 const value = `import React from 'react';
-import
-  FormRenderer, { componentTypes }
-from '@data-driven-forms/react-form-renderer';
-import
-  { componentMapper, FormTemplate }
-from '@data-driven-forms/pf4-component-mapper';
+import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
 
 const validatorMapper = {
     'same-email': () => (
@@ -215,7 +211,7 @@ const LandingPageCards = () => {
                 Write a schema
               </Typography>
               <div className={classes.editorWrapper}>
-                <CodeEditor showGutter={false} value={value} fontSize={11} />
+                <CodeEditor showGutter={false} value={value} fontSize={11} switchable />
               </div>
             </Grid>
             <Grid item xs={12} md={5}>

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

@@ -78,7 +78,7 @@ const MdxComponents = {
       {children}
     </Typography>
   ),
-  code: CodeEditor,
+  code: (props) => <CodeEditor {...props} switchable />,
   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/field-provider.md

@@ -26,10 +26,6 @@ Next example shows simple input field with label and error message.
 import React from 'react';
 
 import { FieldProvider } from '@data-driven-forms/react-form-renderer';
-// or
-import FieldProvider from '@data-driven-forms/react-form-renderer/dist/cjs/field-provider';
-// or
-import FieldProvider from '@data-driven-forms/react-form-renderer/dist/esm/field-provider';
 
 const CustomComponent = ({input, meta, label}) => (
     <div>

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

@@ -47,7 +47,7 @@ To display all form errors, you will need to add a component to your FormTemplat
 FormTemplates of the provided DDF mappers offers additional customization via using props.
 
 ```jsx
-import { FormTemplate } from ‘@data-driven-forms/pf4-component-mapper’
+import { FormTemplate } from '@data-driven-forms/pf4-component-mapper'
 
 <FormRenderer
   ...

packages/react-renderer-demo/src/pages/hooks/use-field-api.md

@@ -23,11 +23,7 @@ Next example shows simple input field with label and error message.
 import React from 'react';
 
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
-// or
-import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
-// or
-import useFieldApi from '@data-driven-forms/react-form-renderer/dist/esm/use-field-api';
-d
+
 const NewComponent = (props) => {
   const { input, meta } = useFieldApi(props);
 

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

@@ -27,6 +27,7 @@ In both of CJS and ESM, exported files follow the kebab case. All components are
 **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';
 ```