feat(docs): Add NumberInput docs.

packages/blocks/blocksAntd/src/blocks/DateTimeSelector/DateTimeSelector.json

@@ -59,7 +59,7 @@
           "description": "Format in which to parse the date value, eg. \"DD MMMM YYYY\" will parse a date value of 1999-12-31 as \"31 December 1999\". The format has to conform to moment.js formats."
         },
         "hourStep": {
-          "type": "number",
+          "type": "integer",
           "default": 1,
           "minimum": 1,
           "description": "Hour intervals to show in the time selector."
@@ -127,7 +127,7 @@
           }
         },
         "minuteStep": {
-          "type": "number",
+          "type": "integer",
           "default": 5,
           "minimum": 1,
           "description": "Minute intervals to show in the time selector."
@@ -138,7 +138,7 @@
           "description": "Placeholder text inside the block before user types input."
         },
         "secondStep": {
-          "type": "number",
+          "type": "integer",
           "default": 5,
           "minimum": 1,
           "description": "Minute intervals to show in the time selector."

packages/blocks/blocksAntd/src/blocks/NumberInput/NumberInput.json

@@ -87,12 +87,10 @@
         },
         "min": {
           "type": "number",
-          "default": "-Infinity",
           "description": "Minimum value allowed by the block."
         },
         "max": {
           "type": "number",
-          "default": "Infinity",
           "description": "Maximum value allowed by the block."
         },
         "placeholder": {

packages/docs/blocks/input/NumberInput.yaml

@@ -0,0 +1,44 @@
+# Copyright 2020-2021 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+_ref:
+  path: templates/blocks/template.yaml.njk
+  vars:
+    block_type: NumberInput
+    value_type: number
+    category: input
+    description_content: |
+      The `NumberInput` allows a user to input a number.
+    default_properties:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/NumberInput/NumberInput.json
+        transformer: templates/blocks/defaultValueTransformer.js
+    properties_getter:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/NumberInput/NumberInput.json
+        transformer: templates/blocks/propertiesGetterTransformer.js
+    properties_form:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/NumberInput/NumberInput.json
+        transformer: templates/blocks/propertiesFormTransformer.js
+
+    available_actions_description: |
+      ###### onChange
+      Triggered when value is changed.
+      ###### onPressEnter
+      Triggered when enter is pressed while block is focused.
+
+    examples:
+      - title: Number input
+        properties: '{"title": "Number input"}'

packages/docs/lowdefy.yaml

@@ -160,6 +160,9 @@ menus:
           - id: MultipleSelector
             type: MenuLink
             pageId: MultipleSelector
+          - id: NumberInput
+            type: MenuLink
+            pageId: NumberInput
           - id: RadioSelector
             type: MenuLink
             pageId: RadioSelector
@@ -353,6 +356,7 @@ pages:
   - _ref: blocks/input/DateTimeSelector.yaml
   - _ref: blocks/input/MonthSelector.yaml
   - _ref: blocks/input/MultipleSelector.yaml
+  - _ref: blocks/input/NumberInput.yaml
   - _ref: blocks/input/RadioSelector.yaml
   - _ref: blocks/input/Selector.yaml
   - _ref: blocks/input/TextInput.yaml

packages/docs/templates/blocks/defaultValueTransformer.js

@@ -18,7 +18,7 @@ function transformer(obj) {
   const blockProperties = obj.schema.properties.properties;
   const defaultValues = {};
   Object.keys(blockProperties).forEach((key) => {
-    if (blockProperties[key].default || blockProperties[key].default === false) {
+    if (blockProperties[key].default != null) {
       defaultValues[key] = blockProperties[key].default;
     }
     if (key === 'label') {

packages/docs/templates/blocks/propertiesFormTransformer.js

@@ -365,6 +365,23 @@ function makeBlockDefinition(propertyName, propertyDescription) {
       return block;
     case 'number':
       block.type = 'NumberInput';
+      block.properties.step = propertyDescription.step ? propertyDescription.step : 0.1;
+      if (propertyDescription.maximum != null) {
+        block.properties.max = propertyDescription.maximum;
+      }
+      if (propertyDescription.minimum != null) {
+        block.properties.min = propertyDescription.minimum;
+      }
+      return block;
+    case 'integer':
+      block.type = 'NumberInput';
+      block.properties.step = propertyDescription.step ? propertyDescription.step : 1;
+      if (propertyDescription.maximum != null) {
+        block.properties.max = propertyDescription.maximum;
+      }
+      if (propertyDescription.minimum != null) {
+        block.properties.min = propertyDescription.minimum;
+      }
       return block;
     default:
       return block;

packages/docs/templates/blocks/propertiesTransformer.js

@@ -1,78 +0,0 @@
-// const schema = require('./Button.json');
-
-function makeBlockDefinition(propertyName, propertyDescription) {
-  const block = {
-    id: `block.properties.${propertyName}`,
-    layout: { _global: 'settings_input_layout' },
-    properties: {
-      title: propertyName,
-      size: 'small',
-      label: {
-        _ref: {
-          path: 'templates/blocks/label_extra.yaml',
-          vars: {
-            extra: propertyDescription.description,
-          },
-        },
-      },
-    },
-  };
-
-  if (propertyDescription.docs && propertyDescription.docs.displayType) {
-    switch (propertyDescription.docs.displayType) {
-      case 'manual':
-        return propertyDescription.docs.manual;
-      case 'icon':
-        return {
-          _ref: {
-            path: 'templates/blocks/icon_template.yaml.njk',
-            vars: {
-              icon_field_name: propertyName,
-              icon_description: propertyDescription.description,
-            },
-          },
-        };
-      case 'color':
-        block.type = 'TwitterColorSelector';
-        return block;
-      case 'style':
-        // TODO:
-        block.type = 'TextInput';
-        return block;
-    }
-  }
-
-  // enums
-  if (propertyDescription.enum) {
-    block.type = 'ButtonSelector';
-    block.options = propertyDescription.enum;
-    return block;
-  }
-
-  // defaults for type
-  switch (propertyDescription.type) {
-    case 'boolean':
-      block.type = 'Switch';
-      return block;
-    case 'string':
-      block.type = 'TextInput';
-      return block;
-    case 'number':
-      block.type = 'NumberInput';
-      return block;
-    default:
-      return block;
-  }
-}
-
-function transformer(obj) {
-  const blockProperties = obj.schema.properties.properties;
-  const blocks = Object.keys(blockProperties).map((key) => {
-    return makeBlockDefinition(key, blockProperties[key]);
-  });
-  return blocks;
-}
-
-// transformer(schema);
-
-module.exports = transformer;