Merge pull request #905 from data-driven-forms/add-docs-custom-examples-section

Add custom components docs section.

Author: rvsia

packages/react-renderer-demo/src/components/navigation/schemas/custom-examples.schema.js

@@ -0,0 +1,8 @@
+const customExamplesSchema = [
+  {
+    component: 'sample-example',
+    linkText: 'Sample example'
+  }
+];
+
+export default customExamplesSchema;

packages/react-renderer-demo/src/components/navigation/schemas/schema.js

@@ -3,6 +3,7 @@ import schemaRenderer from './renderer.schema';
 import schemaNav from './schema.schema';
 import schemaHooks from './hooks.schema';
 import mappersSchema from './mappers.schema';
+import customExamplesSchema from './custom-examples.schema';
 
 const schema = [
   {
@@ -57,6 +58,12 @@ const schema = [
     linkText: 'Optimization',
     link: 'optimization'
   },
+  {
+    title: 'Examples',
+    link: 'examples',
+    noRoute: true,
+    fields: customExamplesSchema
+  },
   {
     linkText: 'Releases',
     link: 'releases'

packages/react-renderer-demo/src/examples/components/examples/sample-example.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
+import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
+
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+
+const CustomComponent = (props) => {
+  const { input, meta, label, ...rest } = useFieldApi(props);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', padding: 8 }}>
+      <label style={{ marginBottom: 6 }} htmlFor={input.name}>
+        {label}
+      </label>
+      <input {...input} {...rest} />
+      {meta.error && <p>{meta.error}</p>}
+    </div>
+  );
+};
+
+const schema = {
+  fields: [
+    {
+      component: 'custom-component',
+      name: 'some-name',
+      label: 'Custom component prop',
+      validate: [{ type: validatorTypes.REQUIRED, message: 'I am a required field' }]
+    }
+  ]
+};
+
+const SampleExample = () => {
+  return (
+    <FormRenderer schema={schema} componentMapper={{ 'custom-component': CustomComponent }} FormTemplate={FormTemplate} onSubmit={console.log} />
+  );
+};
+
+SampleExample.displayName = 'SampleExample';
+
+export default SampleExample;

packages/react-renderer-demo/src/pages/examples/sample-example.md

@@ -0,0 +1,20 @@
+import DocPage from '@docs/doc-page';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+
+# Sample example
+
+## Use markdown syntax to write text
+
+## What to include?
+- description of the component
+- what issue it can help solve
+- include component preview in a form
+
+## Preview
+
+<CodeExample source="components/examples/sample-example" mode="preview" />
+
+</DocPage>