Remove pf4 from docs.

Author: Hyperkid123

packages/react-renderer-demo/package.json

@@ -22,8 +22,6 @@
     "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.2.3",
         "@data-driven-forms/mui-component-mapper": "*",
-        "@data-driven-forms/pf3-component-mapper": "*",
-        "@data-driven-forms/pf4-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
         "@material-ui/core": "^4.5.2",
         "@material-ui/icons": "^4.5.1",

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

@@ -1,55 +1,3 @@
-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
-    }
-  }
-];
-
-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',
   {
@@ -66,12 +14,7 @@ module.exports = {
   presets: [
     [
       'next/babel',
-      {
-        'transform-runtime': {
-          useESModules: false
-        }
-      }
     ]
   ],
-  plugins: [createIconsTransformPlugin, createReactCoreTransformPlugin, muiTransformPlugin]
+  plugins: [muiTransformPlugin]
 };

packages/react-renderer-demo/src/app/examples/components/action-mapper.js

@@ -46,7 +46,7 @@ const actionMapper = {
 };
 
 const ActionMapper = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplate} actionMapper={actionMapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );

packages/react-renderer-demo/src/app/examples/components/clear-on-unmount.js

@@ -3,7 +3,7 @@ import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-r
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
 import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
+import Typography from '@material-ui/core/Typography';
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField
@@ -44,7 +44,7 @@ const schema = {
 const ClearOnUnmount = () => {
   const [values, setValues] = useState({});
   return (
-    <div className="pf4">
+    <div>
       <FormRenderer
         FormTemplate={FormTemplate}
         componentMapper={componentMapper}
@@ -53,7 +53,7 @@ const ClearOnUnmount = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Title size="md">Form values</Title>
+        <Typography component="h3" variant="h5">Form values</Typography>
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </div>
     </div>

packages/react-renderer-demo/src/app/examples/components/cleared-value.js

@@ -3,7 +3,7 @@ import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-r
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
 import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
+import Typography from '@material-ui/core/Typography';
 
 const schema = {
   fields: [
@@ -27,7 +27,7 @@ const componentMapper = {
 const ClearedValueExample = () => {
   const [values, setValues] = useState({});
   return (
-    <div className="pf4">
+    <div>
       <FormRenderer
         initialValues={{
           'field-with-initial-value': 'Delete me!'
@@ -40,7 +40,7 @@ const ClearedValueExample = () => {
         debug={({ values }) => setValues(values)}
       />
       <div style={{ marginTop: 16 }}>
-        <Title size="md">Form values</Title>
+        <Typography component="h3" variant="h5">Form values</Typography>
         <pre>{JSON.stringify(values, null, 2)}</pre>
       </div>
     </div>

packages/react-renderer-demo/src/app/examples/components/component-mapper/form-fields-mapper.js

@@ -5,7 +5,7 @@ import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/comp
 import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
 import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';
 
-import './form-fields-mapper-docs.css';
+//import './form-fields-mapper-docs.css';
 
 const getButtonStyle = (variant) => ({
   color: 'White',

packages/react-renderer-demo/src/app/examples/components/condition.js

@@ -88,7 +88,7 @@ const componentMapper = {
 const FormTemplateWrapper = (props) => <FormTemplate {...props} showFormControls={false} />;
 
 const Condition = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplateWrapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );

packages/react-renderer-demo/src/app/examples/components/conditions/and.js

@@ -41,7 +41,7 @@ const componentMapper = {
 };
 
 const AndCondition = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );

packages/react-renderer-demo/src/app/examples/components/conditions/is-empty.js

@@ -31,7 +31,7 @@ const componentMapper = {
 };
 
 const IsEmpty = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );

packages/react-renderer-demo/src/app/examples/components/conditions/is-not-empty.js

@@ -30,7 +30,7 @@ const componentMapper = {
 };
 
 const IsNotEmpty = () => (
-  <div className="pf4">
+  <div>
     <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
   </div>
 );