Added component example generator to docs.

Hyperkid123 · Hyperkid123 · commit 793c5af8541d · 2020-05-07T08:29:02.000+02:00
diff --git a/packages/react-renderer-demo/src/app/next.config.js b/packages/react-renderer-demo/src/app/next.config.js
@@ -57,7 +57,8 @@ module.exports = withBundleAnalyzer(
           '@docs/pages': path.resolve(__dirname, './pages'),
           '@docs/examples': path.resolve(__dirname, './examples'),
           '@docs/list-of-contents': path.resolve(__dirname, './src/helpers/list-of-contents'),
-          '@docs/code-example': path.resolve(__dirname, './src/components/code-example')
+          '@docs/code-example': path.resolve(__dirname, './src/components/code-example'),
+          '@docs/hooks': path.resolve(__dirname, './src/hooks')
         };
 
         config.module.rules.push({
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
 import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
 import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiDatepicker from '@data-driven-forms/mui-component-mapper/dist/cjs/date-picker';
 import DatePickerText from '@docs/components/mui-definitions/date-picker-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js b/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
 import MuiDualListSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/dual-list-select';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import useComponentExample from '@docs/hooks/use-component-example';
 
 const mappers = {
   mui: {
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/field-array.js b/packages/react-renderer-demo/src/app/pages/component-example/field-array.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import MuiFieldArray from '@data-driven-forms/mui-component-mapper/dist/cjs/field-array';
 import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js b/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiPlainText from '@data-driven-forms/mui-component-mapper/dist/cjs/plain-text';
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.js b/packages/react-renderer-demo/src/app/pages/component-example/radio.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiRadio from '@data-driven-forms/mui-component-mapper/dist/cjs/radio';
 import RadioText from '@docs/components/mui-definitions/radio-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/select.js b/packages/react-renderer-demo/src/app/pages/component-example/select.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/select';
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js b/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiSubForm from '@data-driven-forms/mui-component-mapper/dist/cjs/sub-form';
 import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch.js b/packages/react-renderer-demo/src/app/pages/component-example/switch.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiSwitch from '@data-driven-forms/mui-component-mapper/dist/cjs/switch';
 import SwitchText from '@docs/components/mui-definitions/switch-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.js b/packages/react-renderer-demo/src/app/pages/component-example/tabs.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiTabs from '@data-driven-forms/mui-component-mapper/dist/cjs/tabs';
 import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/text-field.js b/packages/react-renderer-demo/src/app/pages/component-example/text-field.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/textarea.js b/packages/react-renderer-demo/src/app/pages/component-example/textarea.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiTextarea from '@data-driven-forms/mui-component-mapper/dist/cjs/textarea';
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiTimePicker from '@data-driven-forms/mui-component-mapper/dist/cjs/time-picker';
 import TimePickerText from '@docs/components/mui-definitions/time-picker-text.md';
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/wizard.js b/packages/react-renderer-demo/src/app/pages/component-example/wizard.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ComponentText from '@docs/components/component-example-text';
-import useComponentExample from '../../src/hooks/use-component-example';
+import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiWizard from '@data-driven-forms/mui-component-mapper/dist/cjs/wizard';
 import MuiSelect from '@data-driven-forms/mui-component-mapper/dist/cjs/select';
diff --git a/packages/react-renderer-demo/src/app/scripts/generate-mappers.js b/packages/react-renderer-demo/src/app/scripts/generate-mappers.js
@@ -7,6 +7,7 @@ const mapper = process.env.MAPPER;
 
 const pagesFileNames = glob.sync(resolve(__dirname, `../pages/renderer/*.md`));
 const examplesFileNames = [...glob.sync(resolve(__dirname, `../examples/**/*.js`)), ...glob.sync(resolve(__dirname, `../examples/**/*.css`))];
+const componentExamples = glob.sync(resolve(__dirname, '../pages/component-example/*.js'));
 
 const pagesTargetDir = resolve(__dirname, `../pages/${mapper}`);
 
@@ -62,3 +63,33 @@ examplesFileNames.forEach((fileName) => {
     });
   });
 });
+
+/**
+ * Make the se function common
+ */
+componentExamples.forEach((fileName) => {
+  const source = fileName;
+  const target = fileName.replace('/pages/component-example/', `/pages/${mapper}/component-example/`);
+  const targetDirectory = target
+    .split('/')
+    .slice(0, target.split('/').length - 1)
+    .join('/');
+  if (!fs.existsSync(targetDirectory)) {
+    shell.mkdir('-p', targetDirectory);
+  }
+
+  fs.readFile(source, 'utf8', function(err, data) {
+    if (err) {
+      return console.log(err);
+    }
+
+    let result = data.replace(/from '@data-driven-forms\/mui-component-mapper/g, `from '@data-driven-forms/${mapper}-component-mapper`);
+    result = result.replace(/activeMapper="mui"/, `activeMapper="${mapper}"`);
+
+    fs.writeFile(target, result, 'utf8', function(err) {
+      if (err) {
+        return console.log('error when writing file: ', err);
+      }
+    });
+  });
+});
