@scenid/react-formulator 0.3.0 → 0.4.0

package/stories/Forms.stories.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import StoryBase from './StoryBase'
-import { FormulatorForm } from '../src/index'
+
+import {
+  FormulatorForm,
+  FormAutocomplete
+} from '../src/index'
 
 import getTypesSchemas from './forms/types.schemas'
 
@@ -69,17 +73,76 @@ Template.propTypes = {
   baseProps: PropTypes.object
 }
 
+const wait = (ms, signal) => new Promise((resolve, reject) => {
+  const timer = setTimeout(resolve, ms)
+  signal.addEventListener(
+    'abort',
+    () => {
+      clearTimeout(timer)
+      reject(new Error('aborted'))
+    }
+  )
+})
+
+const catBreeds = [
+  { entry: 'Abyssinian' },
+  { entry: 'Bengal' },
+  { entry: 'Birman' },
+  { entry: 'Burmese' },
+  { entry: 'Chartreux' },
+  { entry: 'Egyptian Mau' },
+  { entry: 'German Rex' },
+  { entry: 'Khao Manee' },
+  { entry: 'Korean Bobtail' },
+  { entry: 'Maine Coon' },
+  { entry: 'Nebelung' },
+  { entry: 'Ocicat' },
+  { entry: 'Oriental Shorthair' },
+  { entry: 'Siamese' }
+]
+
 export const Types = Template.bind({})
 Types.args = {
   id: 'unique-form-id',
   schema: schemas.types.validation,
   renderSchema: schemas.types.render,
   inputVariant: 'filled',
+  obscuredFields: ['hiddenDataInput'],
+  obscuredGroups: ['hiddenInputGroup'],
   renderComponentMap: {
-    customRenderField: <CustomRenderField />
+    customRenderField: <CustomRenderField />,
+    autocompleteField2: (
+      <FormAutocomplete
+        options={async signal => {
+          try {
+            await wait(200 + (Math.random() * 1000), signal)
+          // eslint-disable-next-line no-empty
+          } catch (e) {}
+
+          return catBreeds
+        }}
+      />
+    ),
+    autocompleteField3: (
+      <FormAutocomplete
+        options={
+          process.env.STORYBOOK_NODE_ENV === 'development'
+            ? 'http://localhost:5001/scenid-cloud-dev/us-central1/catalog/cats'
+            : 'https://us-central1-scenid-cloud-dev.cloudfunctions.net/catalog/cats'
+        }
+        baererToken="THIS IS A FAKE TOKEN"
+        allowCreate
+      />
+    )
   },
   translations: typesTranslations,
-  data: {}
+  data: {
+    hiddenDataInput: 'Data we do not want to show in Video Calls',
+    hiddenGroupInput1: 'sensitive data',
+    hiddenGroupInput2: 'non-public information',
+    hiddenGroupInput3: 'top secret value',
+    autocompleteField1: catBreeds[5].entry
+  }
 }
 
 export const Markdown = Template.bind({})

package/stories/forms/types.schemas.js

@@ -25,6 +25,26 @@ const inputs = [
     render: ['requiredInput'],
     validation: { type: 'string', required: true }
   },
+  {
+    label: 'Input with hidden data in readonly',
+    key: 'hiddenDataInput',
+    render: ['hiddenDataInput'],
+    validation: { type: 'string' }
+  },
+  {
+    label: 'InputGroup that is hidden in readonly',
+    key: 'hiddenInputGroup',
+    render: [
+      'hiddenGroupInput1',
+      'hiddenGroupInput2',
+      'hiddenGroupInput3'
+    ],
+    validation: [
+      { key: 'hiddenGroupInput1', value: { type: 'string' } },
+      { key: 'hiddenGroupInput2', value: { type: 'string' } },
+      { key: 'hiddenGroupInput3', value: { type: 'string' } }
+    ]
+  },
   {
     label: 'Simple Boolean Switch',
     desc: 'Checkbox vs. Switch\nhttps://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8',
@@ -88,24 +108,62 @@ const inputs = [
   {
     label: 'Date',
     key: 'dateInput',
+    desc: 'Output can be formatted using all options of [luxon\'s .toLocaleString](https://moment.github.io/luxon/#/formatting?id=tolocalestring-strings-for-humans)',
     render: [
       [
-        'dateInput',
+        'dateInput1',
         { type: 'date' }
+      ],
+      [
+        'dateInput2',
+        {
+          type: 'date',
+          renderFormat: 'DATE_MED_WITH_WEEKDAY'
+        }
+      ],
+      [
+        'dateInput3',
+        {
+          type: 'date',
+          renderFormat: { month: 'long', day: 'numeric' }
+        }
       ]
     ],
-    validation: { type: 'string' }
+    validation: [
+      { key: 'dateInput1', value: { type: 'string' } },
+      { key: 'dateInput2', value: { type: 'string' } },
+      { key: 'dateInput3', value: { type: 'string' } }
+    ]
   },
   {
     label: 'Local DateTime',
     key: 'localDateTime',
+    desc: 'Output can be formatted using all options of [luxon\'s .toLocaleString](https://moment.github.io/luxon/#/formatting?id=tolocalestring-strings-for-humans)',
     render: [
       [
-        'localDateTime',
+        'localDateTime1',
         { type: 'datetime-local' }
+      ],
+      [
+        'localDateTime2',
+        {
+          type: 'datetime-local',
+          renderFormat: 'DATETIME_MED_WITH_SECONDS'
+        }
+      ],
+      [
+        'localDateTime3',
+        {
+          type: 'datetime-local',
+          renderFormat: { hour: 'numeric', minute: '2-digit' }
+        }
       ]
     ],
-    validation: { type: 'string' }
+    validation: [
+      { key: 'localDateTime1', value: { type: 'string' } },
+      { key: 'localDateTime2', value: { type: 'string' } },
+      { key: 'localDateTime3', value: { type: 'string' } }
+    ]
   },
   {
     label: 'Array as Repeater',
@@ -113,6 +171,58 @@ const inputs = [
     render: ['arrayRepeater'],
     validation: { type: 'array' }
   },
+  {
+    label: 'Autocomplete Field',
+    desc: 'You can supply an array of options or an async function to fetch options on the fly.',
+    key: 'autoCompleteFields',
+    render: [
+      [
+        'autocompleteField1',
+        { autocomplete: true }
+      ],
+      [
+        '@@render',
+        'autocompleteField2'
+      ],
+      [
+        '@@render',
+        'autocompleteField3',
+        { allowCreate: true }
+      ]
+    ],
+    validation: [
+      {
+        key: 'autocompleteField1',
+        value: {
+          type: [
+            'Abyssinian',
+            'Bengal',
+            'Birman',
+            'Burmese',
+            'Chartreux',
+            'Egyptian Mau',
+            'German Rex',
+            'Khao Manee',
+            'Korean Bobtail',
+            'Maine Coon',
+            'Nebelung',
+            'Ocicat',
+            'Oriental Shorthair',
+            'Siamese'
+          ],
+          required: true
+        }
+      },
+      {
+        key: 'autocompleteField2',
+        value: {
+          type: 'string',
+          required: true
+        }
+      },
+      { key: 'autocompleteField3', value: { type: 'string' } }
+    ]
+  },
   {
     label: 'Custom Render Field',
     desc: 'Try typing something, it might surprise you ;)',
@@ -144,7 +254,11 @@ export default () => {
   const translations = { labels: {} }
 
   inputs.forEach(({ key, label, desc, validation, render }) => {
-    const validationJSON = JSON.stringify({ [key]: validation }, null, '  ')
+    const validationJSON = (
+      Array.isArray(validation)
+        ? JSON.stringify(validation.reduce((l, r) => ({ ...l, [r.key]: r.value }), {}), null, '  ')
+        : JSON.stringify({ [key]: validation }, null, '  ')
+    )
     const renderJSON = JSON.stringify(render, null, '  ')
 
     const renderEntry = {
@@ -155,8 +269,7 @@ export default () => {
           '@@markdown',
           'mmd-id',
           `\`\`\`json\n/* validation schema */\n${validationJSON}\n\n/* render schema */\n${renderJSON}\n\`\`\``
-        ],
-        render[0]
+        ]
       ]
     }
 
@@ -168,9 +281,19 @@ export default () => {
       ])
     }
 
+    if (Array.isArray(validation)) {
+      validation.forEach((e, index) => {
+        validationSchema.properties[e.key] = e.value
+        translations.labels[e.key] = e.key
+        renderEntry.fields.push(render[index])
+      })
+    } else {
+      validationSchema.properties[key] = validation
+      translations.labels[key] = label
+      renderEntry.fields.push(render[0])
+    }
+
     renderSchema.groups.push(renderEntry)
-    validationSchema.properties[key] = validation
-    translations.labels[key] = label
   })
 
   return {