Merge pull request #404 from rvsia/fixDemo

Fix demo technical debts

Author: Hyperkid123

.circleci/config.yml

@@ -37,9 +37,6 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/react-forms
-      - run:
-          name: 'Setup environment variables'
-          command: 'export TRAVIS_REPO_SLUG=data-driven-forms/react-forms'
       - run:
           name: Release new version
           command: |

package.json

@@ -37,9 +37,9 @@
     }
   },
   "devDependencies": {
-    "@khala/commit-analyzer-wildcard": "^2.3.1",
-    "@khala/npm-release-monorepo": "^2.3.0",
-    "@khala/wildcard-release-notes": "^2.3.0",
+    "@khala/commit-analyzer-wildcard": "^2.4.0",
+    "@khala/npm-release-monorepo": "^2.4.0",
+    "@khala/wildcard-release-notes": "^2.4.0",
     "@semantic-release/github": "^5.5.5",
     "@semantic-release/npm": "^5.1.4",
     "atob-lite": "^2.0.0",
@@ -74,7 +74,8 @@
             "major": "^(major|breaking)\\(",
             "minor": "^feat\\(",
             "patch": "^(fix|patch)\\("
-          }
+          },
+          "repositoryName": "data-driven-forms/react-forms"
         }
       ],
       [
@@ -84,7 +85,8 @@
             "major": "^(major|breaking)\\(",
             "minor": "^feat\\(",
             "patch": "^(fix|patch)\\("
-          }
+          },
+          "defaultRelease": "no-release"
         }
       ],
       {

packages/react-renderer-demo/src/app/pages/renderer/action-mapper.md

@@ -1,5 +1,7 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '../../src/helpers/list-of-contents';
+import RawComponent from '@docs/raw-component';
+
 
 <Grid container item>
 <Grid item xs={12} md={10}>
@@ -68,6 +70,8 @@ Then, in your schema you can map `translateLabel` action to a prop:
 }
 ```
 
+<RawComponent source="action-mapper" />
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="renderer/action-mapper" />

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

@@ -23,26 +23,19 @@ Each mapper provided in `react-forms` provides a default API for standard compon
 Standard components are:
 <br />
 
-Wrapped in formGroup: <br/>
-&nbsp;&nbsp;text field <br/>
-&nbsp;&nbsp;text area <br/>
-&nbsp;&nbsp;select <br/>
-&nbsp;&nbsp;checkbox <br/>
-&nbsp;&nbsp;radio <br/>
-&nbsp;&nbsp;switch <br/>
-&nbsp;&nbsp;timepicker/datepicker <br/>
-<br />
-
-Others: <br/>
-&nbsp;&nbsp;subform <br/>
-&nbsp;&nbsp;tab/tab item <br/>
-&nbsp;&nbsp;wizard <br/>
+|Change form state (input fields)|Others|
+|---------------------------------------|------|
+|text field|subform|
+|textarea|tabs/tab item|
+|select|wizard|
+|checkbox|plain text|
+|radio|
+|switch|
+|timepicker/datepicker|
 
-# FormGroup wrapped components
+# Form fields components
 
-Basic components are wrapped in formGroup. FormGroup provides a standard API to show labels, helper texts, errors, etc.
-
-All those components provides a shared group of props:
+Basic components that can change the form state (inputs) share common props. These components are using [useFieldApi](/renderer/component-mapping#usefieldapi) or [FieldProvider](/renderer/component-mapping#fieldprovider) to access the form state.
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -190,6 +183,15 @@ Wizard step <br/>
 
 <ExampleLink to='wizard' />
 
+## Plain text
+
+|Prop|Type|Description|
+|----|:--:|----------:|
+|label|node/string|A text|
+|variant|string|A variant (depends on mappers: html tags)|
+
+<ExampleLink to='plain-text' />
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="renderer/component-api" />

packages/react-renderer-demo/src/app/pages/renderer/condition.md

@@ -34,7 +34,9 @@ You can show a field only if it meets a condition:
 
 `when` - is name of field where the value is stored, **always required!**. It can be either string `'field-name'` or array of strings `['field-1', 'field-2']`.
 
-### OR condition. At least one condition must be met
+### OR
+
+At least one condition must be met.
 
 You can use `or` object to connect two conditions. If either of of fields with name `a` and `b` will have value `x` condition is met.
 
@@ -81,7 +83,11 @@ Also, you can use a shorthand:
 }
 ```
 
-### AND condition. All conditions must be met
+<RawComponent source="conditions/or" />
+
+### AND
+
+All conditions must be met.
 
 Field `controlled-field-1` must have value `Bar` and field `controlled-field-2` must include `FooBar` somewhere in its value to display field `BarFoo`.
 
@@ -154,6 +160,8 @@ Or you can use a shorthand:
 }
 ```
 
+<RawComponent source="conditions/and" />
+
 ### Not
 
 You can simple negate a condition by using a `not`. Following condition is a true, when both of values are not a `x`.
@@ -189,9 +197,11 @@ You can simple negate a condition by using a `not`. Following condition is a tru
 
 As the value you can use an array (AND) or another condition.
 
+<RawComponent source="conditions/not" />
+
 ### Nesting
 
-Of course it is possible to neste conditions:
+Of course it is possible to nest conditions:
 
 ```jsx
 condition = {
@@ -202,6 +212,8 @@ condition = {
 };
 ```
 
+<RawComponent source="condition" />
+
 ## Conditions
 
 ### Is
@@ -217,6 +229,9 @@ condition: {
 // Foo == 'Bar' => true
 // Foo == 'Not a Bar' => false
 ```
+
+<RawComponent source="conditions/is" />
+
 ### Is empty
 
 `isEmpty` - tests if the value is empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
@@ -237,6 +252,9 @@ condition: {
 // Foo = false => true
 // Foo = true => false
 ```
+
+<RawComponent source="conditions/is-empty" />
+
 ### Is not empty
 
 `isNotEmpty` - tests if the value is not empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
@@ -257,6 +275,9 @@ condition: {
 // Foo = true => false
 // Foo = true => true
 ```
+
+<RawComponent source="conditions/is-not-empty" />
+
 ### Pattern
 
 `pattern` - tests if the value matches the pattern
@@ -284,6 +305,8 @@ condition: {
 // Foo = 'bAr!' => true
 ```
 
+<RawComponent source="conditions/pattern" />
+
 ### Not match
 
 `notMatch` - reverse `is`/`pattern` condition
@@ -309,9 +332,7 @@ condition: {
 // Foo = 'bar' => false
 ```
 
-## Example
-
-<RawComponent source="condition" />
+<RawComponent source="conditions/not-match" />
 
 ## Clearing values
 

packages/react-renderer-demo/src/app/src/components/code-editor/index.js

@@ -27,6 +27,7 @@ const CodeEditor = (props) => (
     onLoad={(editor) => {
       editor.getSession().setUseWorker(false);
     }}
+    mode="jsx"
     {...props}
   />
 );

packages/react-renderer-demo/src/app/src/components/common/connected-links.js

@@ -34,7 +34,7 @@ const ConnectedLinks = () => {
       container
       justify="space-between"
       className={clsx(classNames.linksContainer, {
-        [classNames.withSideNav]: pathname.includes('/renderer/') && !(pathname === '/renderer/installation' || pathname === '/renderer/get-started')
+        [classNames.withSideNav]: pathname.includes('/renderer/')
       })}
     >
       <Grid item>

packages/react-renderer-demo/src/app/src/components/common/raw-component.js

@@ -20,13 +20,18 @@ const req = require.context('@docs/doc-components', true, /\.js/);
 const useStyles = makeStyles((theme) => ({
   heading: {
     fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular
+    fontWeight: theme.typography.fontWeightRegular,
+    flexGrow: 1
   },
   formWrapper: {
     padding: 16
   },
   formContainer: {
     marginTop: 16
+  },
+  secondaryHeading: {
+    fontSize: theme.typography.pxToRem(15),
+    color: theme.palette.text.secondary
   }
 }));
 
@@ -47,6 +52,7 @@ const RawComponent = (props) => {
           <ExpansionPanel>
             <ExpansionPanelSummary expandIcon={<CodeIcon />}>
               {content.Component && <Typography className={classes.heading}>{content.Component.name}</Typography>}
+              <Typography className={classes.secondaryHeading}>Click to expand example code</Typography>
             </ExpansionPanelSummary>
             <ExpansionPanelDetails style={{ padding: 0 }}>
               <CodeEditor value={content.text} />

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
+
+const translateLabel = (id, locale = 'en') =>
+  ({
+    en: {
+      name: 'User name',
+      password: 'Password'
+    },
+    jp: {
+      name: '名前',
+      password: 'パスワード'
+    }
+  }[locale][id]);
+
+const schema = {
+  title: 'Action Mapper example (translated strings)',
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'name',
+      actions: {
+        label: ['translateLabel', 'name', 'jp']
+      }
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'password',
+      actions: {
+        label: ['translateLabel', 'password', 'jp']
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const actionMapper = {
+  translateLabel
+};
+
+const ActionMapper = () => (
+  <div className="pf4">
+    <FormRenderer FormTemplate={FormTemplate} actionMapper={actionMapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
+  </div>
+);
+
+export default ActionMapper;