@scenid/react-formulator 0.0.2

package/stories/forms/register.validation.schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://scenid.com/crm/register.schema.json",
+  "title": "Register",
+  "description": "Register for Scenid Customers",
+  "type": "object",
+  "properties": {
+    "tenantName": {
+      "type": "string",
+      "validator": "RegExp",
+      "options": {
+        "pattern": "^[a-z]{3, 10}+$",
+        "rule": "match",
+        "human": "only 3 to 10 letters from a-z in lower case are allowed"
+      },
+      "required": true
+    },
+    "email": {
+      "type": "string",
+      "validator": "Email",
+      "required": true
+    },
+    "password": {
+      "type": "string",
+      "required": true
+    },
+    "passwordConfirm": {
+      "type": "string",
+      "validator": "same",
+      "options": { "as": "password" },
+      "required": true
+    }
+  }
+}

package/stories/forms/types.schemas.js

@@ -0,0 +1,171 @@
+const inputs = [
+  {
+    label: 'Simple Text',
+    key: 'simpleText',
+    render: ['simpleText'],
+    validation: { type: 'string' }
+  },
+  {
+    label: 'Multiline Text',
+    key: 'multilineText',
+    render: [
+      [
+        'multilineText',
+        {
+          multiline: true,
+          minRows: 5
+        }
+      ],
+    ],
+    validation: { type: 'string' }
+  },
+  {
+    label: 'Required Input',
+    key: 'requiredInput',
+    render: ['requiredInput'],
+    validation: { type: 'string', required: true }
+  },
+  {
+    label: 'Simple Boolean Switch',
+    desc: 'Checkbox vs. Switch\nhttps://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8',
+    key: 'simpleSwitch',
+    validation: { type: 'boolean' },
+    render: [
+      'simpleSwitch'
+    ]
+  },
+  {
+    label: 'Simple Boolean Checkbox',
+    desc: 'Checkbox vs. Switch\nhttps://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8',
+    key: 'simpleCheckbox',
+    validation: { type: 'boolean' },
+    render: [
+      [
+        'simpleCheckbox',
+        { variant: 'checkbox' }
+      ]
+    ]
+  },
+  {
+    label: 'Boolean Label Placement',
+    key: 'booleanLabelPlace',
+    validation: { type: 'boolean' },
+    render: [
+      [
+        'booleanLabelPlace',
+        { labelPlacement: 'start' }
+      ]
+    ]
+  },
+  {
+    label: 'Simple Number',
+    key: 'simpleNumber',
+    render: ['simpleNumber'],
+    validation: { type: 'number' }
+  },
+  {
+    label: 'Advanced Number',
+    key: 'advancedNumber',
+    render: [
+      [
+        'advancedNumber',
+        {
+          min: 0,
+          max: 2,
+          step: 0.25
+        }
+      ]
+    ],
+    validation: { type: 'number' }
+  },
+  {
+    label: 'Simple Select',
+    desc: 'Values are automatically sorted with [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).',
+    key: 'simpleSelect',
+    render: ['simpleSelect'],
+    validation: {
+      type: ['Citrus', 'Banana', 'Apple', 'Date']
+    }
+  },
+  {
+    label: 'Date',
+    key: 'dateInput',
+    render: [
+      [
+        'dateInput',
+        { type: 'date' }
+      ]
+    ],
+    validation: { type: 'string' }
+  },
+  {
+    label: 'Local DateTime',
+    key: 'localDateTime',
+    render: [
+      [
+        'localDateTime',
+        { type: 'datetime-local' }
+      ]
+    ],
+    validation: { type: 'string' }
+  },
+  {
+    label: 'Array as Repeater',
+    key: 'arrayRepeater',
+    render: ['arrayRepeater'],
+    validation: { type: 'array' }
+  }
+]
+
+export default () => {
+  const renderSchema = {
+    properties: {},
+    groups: []
+  }
+
+  const validationSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://scenid.com/crm/register.schema.json',
+    title: 'Types',
+    type: 'object',
+    properties: {}
+  }
+
+  const translations = { labels: {} }
+
+  inputs.forEach(({ key, label, desc, validation, render }) => {
+    const validationJSON = JSON.stringify({ [key]: validation }, null, '  ')
+    const renderJSON = JSON.stringify(render, null, '  ')
+
+    const renderEntry = {
+      id: key,
+      label,
+      fields: [
+        [
+          "@@markdown",
+          "mmd-id",
+          `\`\`\`json\n/* validation schema */\n${validationJSON}\n\n/* render schema */\n${renderJSON}\n\`\`\``
+        ],
+        render[0]
+      ]
+    }
+
+    if (desc) {
+      renderEntry.fields.unshift([
+        "@@markdown",
+        "mmd-desc-id",
+        desc
+      ])
+    }
+
+    renderSchema.groups.push(renderEntry)
+    validationSchema.properties[key] = validation
+    translations.labels[key] = label
+  })
+
+  return {
+    render: renderSchema,
+    validation: validationSchema,
+    translations
+  }
+}