Use absolute import paths in across the whole documentation.

Author: Hyperkid123

packages/react-renderer-demo/src/app/babel.config.js

@@ -1,24 +1,77 @@
+require.extensions['.css'] = () => undefined;
+const path = require('path');
+const glob = require('glob');
+
+const mapper = {
+  TextVariants: 'Text',
+  ButtonVariant: 'Button',
+  DropdownPosition: 'dropdownConstants',
+  TextListVariants: 'TextList',
+  TextListItemVariants: 'TextListItem'
+};
+
 const createIconsTransformPlugin = [
   'transform-imports',
   {
     '@patternfly/react-icons': {
       transform: (importName) =>
-        `@patternfly/react-icons/dist/js/icons/${importName.split(/(?=[A-Z])/).join('-').toLowerCase()}`,
-      preventFullImport: true,
-    },
+        `@patternfly/react-icons/dist/js/icons/${importName
+          .split(/(?=[A-Z])/)
+          .join('-')
+          .toLowerCase()}`,
+      preventFullImport: true
+    }
+  }
+];
+
+const createReactCoreTransformPlugin = [
+  'transform-imports',
+  {
+    '@patternfly/react-core': {
+      transform: (importName) => {
+        let res;
+        const files = glob.sync(
+          path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/js/**/${mapper[importName] || importName}.js`)
+        );
+        if (files.length > 0) {
+          res = files[0];
+        } else {
+          throw new Error(`File with importName ${importName} does not exist`);
+        }
+
+        res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
+        res = res.replace(/^\//, '');
+        return res;
+      },
+      preventFullImport: false,
+      skipDefaultConversion: true
+    }
   },
+  'react-core-CJS'
 ];
 
+const muiTransformPlugin = [
+  'transform-imports',
+  {
+    '@material-ui/core': {
+      transform: (importName) => `@material-ui/core/${importName}`,
+      preventFullImport: false,
+      skipDefaultConversion: false
+    }
+  },
+  'MUI-CJS'
+]
+
 module.exports = {
   presets: [
     [
       'next/babel',
       {
         'transform-runtime': {
-          useESModules: false,
-        },
-      },
-    ],
+          useESModules: false
+        }
+      }
+    ]
   ],
-  plugins: [ createIconsTransformPlugin ],
+  plugins: [createIconsTransformPlugin, createReactCoreTransformPlugin, muiTransformPlugin]
 };

packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import Pf4Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
+import Pf3Checkbox from '@data-driven-forms/pf3-component-mapper/dist/cjs/checkbox';
+import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+
+const mappers = {
+  pf4: {
+    [componentTypes.CHECKBOX]: Pf4Checkbox
+  },
+  pf3: {
+    [componentTypes.CHECKBOX]: Pf3Checkbox
+  },
+  mui: {
+    [componentTypes.CHECKBOX]: MuiCheckbox
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};

packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.md

@@ -0,0 +1,24 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import Pf4Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
+import Pf3Checkbox from '@data-driven-forms/pf3-component-mapper/dist/cjs/checkbox';
+import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+
+const mappers = {
+  pf4: {
+    [componentTypes.CHECKBOX]: Pf4Checkbox
+  },
+  pf3: {
+    [componentTypes.CHECKBOX]: Pf3Checkbox
+  },
+  mui: {
+    [componentTypes.CHECKBOX]: MuiCheckbox
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};

packages/react-renderer-demo/src/app/pages/component-example/checkbox.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import Pf4Datepicker from '@data-driven-forms/pf4-component-mapper/dist/cjs/date-picker';
+import MuiDatepicker from '@data-driven-forms/mui-component-mapper/dist/cjs/date-picker';
+
+import dynamic from 'next/dynamic';
+
+const Pf3Datepicker = dynamic(import('@data-driven-forms/pf3-component-mapper/dist/cjs/date-picker'), {
+  ssr: false
+});
+
+const mappers = {
+  pf4: {
+    [componentTypes.DATE_PICKER]: Pf4Datepicker
+  },
+  pf3: {
+    [componentTypes.DATE_PICKER]: Pf3Datepicker
+  },
+  mui: {
+    [componentTypes.DATE_PICKER]: MuiDatepicker
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};

packages/react-renderer-demo/src/app/pages/component-example/checkbox.md

@@ -0,0 +1,21 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import Pf4DualListSelect from '@data-driven-forms/pf4-component-mapper/dist/cjs/dual-list-select';
+
+const mappers = {
+  pf4: {
+    'dual-list-select': Pf4DualListSelect
+  },
+  pf3: {
+    'dual-list-select': () => <h2>Not implemented</h2>
+  },
+  mui: {
+    'dual-list-select': () => <h2>Not implemented</h2>
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};

packages/react-renderer-demo/src/app/pages/component-example/date-picker.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ComponentText from '@docs/components/component-example-text';
+import useComponentExample from '../../src/hooks/use-component-example';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import Pf4PlainText from '@data-driven-forms/pf4-component-mapper/dist/cjs/plain-text';
+import Pf3PlainText from '@data-driven-forms/pf3-component-mapper/dist/cjs/plain-text';
+import MuiPlainText from '@data-driven-forms/mui-component-mapper/dist/cjs/plain-text';
+
+const mappers = {
+  pf4: {
+    [componentTypes.PLAIN_TEXT]: Pf4PlainText
+  },
+  pf3: {
+    [componentTypes.PLAIN_TEXT]: Pf3PlainText
+  },
+  mui: {
+    [componentTypes.PLAIN_TEXT]: MuiPlainText
+  }
+};
+
+export default () => {
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+};