Remove css import from component mapper examples.

Author: Hyperkid123

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

@@ -5,7 +5,35 @@ 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';
+const formGroupStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: 16,
+}
+
+const inputStyles = {
+  width: '100%',
+  padding: '12px 20px',
+  margin: '8px 0',
+  display: 'inline-block',
+  border: '1px solid #ccc',
+  borderRadius: 4,
+  boxSizing: 'border-box',
+}
+
+const paragraphStyle = {
+  marginTop: 0,
+  marginBottom: 4,
+}
+
+const requiredStyle = {
+  color: 'red',
+  marginLeft: 2,
+}
+
+const errorStyle = {
+  color: 'orangered'
+}
 
 const getButtonStyle = (variant) => ({
   color: 'White',
@@ -51,11 +79,15 @@ const TextField = (props) => {
     ...rest
   } = useFieldApi(props);
   return (
-    <div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
-      <label htmlFor={input.name}>{label}</label>
-      <input id={input.name} {...input} {...rest} />
-      {touched && error && <p className="error-text">{error}</p>}
-      {customProp && <p>This is a custom prop and has nothing to do with form schema</p>}
+    <div style={{
+      ...formGroupStyle,
+      ...(isRequired && requiredStyle),
+      ...(error && touched && errorStyle)
+    }}>
+      <label style={{color: 'initial'}} htmlFor={input.name}>{isRequired && <span style={errorStyle}>*&nbsp;</span>}{label}</label>
+      <input style={inputStyles} id={input.name} {...input} {...rest} />
+      {touched && error && <p style={paragraphStyle}>{error}</p>}
+      {customProp && <p style={{color: 'initial'}}>This is a custom prop and has nothing to do with form schema</p>}
     </div>
   );
 };

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

@@ -8,8 +8,6 @@ import Layout from '@docs/components/layout';
 import { MDXProvider } from '@mdx-js/react';
 import MdxComponents from '@docs/components/mdx/mdx-components';
 
-import '@docs/examples/components/component-mapper/form-fields-mapper-docs.css';
-
 export default class MyApp extends App {
   componentDidMount() {
     // Remove the server-side injected CSS.

packages/react-renderer-demo/src/app/pages/_app.js

@@ -77,7 +77,6 @@ Below, you can see an basic implementation of custom component mapper:
 <CodeExample 
   source="components/component-mapper/form-fields-mapper"
   mode="preview"
-  additionalSources="components/component-mapper/form-fields-mapper-docs.css"
 />
 
 </Grid>