@lowdefy/blocks-antd 4.7.3 → 5.1.0

package/dist/blocks/PhoneNumberInput/upstream-formatting-spec.md

@@ -0,0 +1,173 @@
+# Upstream PhoneNumberInput Formatting to Lowdefy
+
+## Background
+
+The PRP project has two behavioral improvements to `PhoneNumberInput` that should be upstreamed into Lowdefy. Currently, Lowdefy does raw string concatenation to build the `phone_number` value (`` `${region?.dial_code ?? ''}${input}` ``), which produces malformed phone numbers when users type leading zeros or non-digit characters. It also stores the dial code as `phone_number` when the input is empty.
+
+### Current behavior (Lowdefy) vs desired behavior (PRP)
+
+With ZA (+27) dial code selected:
+
+| User types | Current `phone_number` | Desired `phone_number` |
+|---|---|---|
+| `0821234567` | `+270821234567` | `+27821234567` |
+| `(082) 123-4567` | `+27(082) 123-4567` | `+27821234567` |
+| (empty) | `+27` | `""` |
+
+## Changes
+
+All paths relative to `packages/plugins/blocks/blocks-antd/src/blocks/PhoneNumberInput/`.
+
+### A. Create `formatPhoneNumber.js`
+
+New file. Strips non-digit characters and leading zeros from input before concatenating with the dial code. Returns empty string when the cleaned input is empty.
+
+```js
+const formatPhoneNumber = (dialCode = '', input) => {
+  // Strip all non-digit characters from input, then strip leading zeros
+  const cleanInput = (input || '').replace(/\D/g, '').replace(/^0+/, '');
+
+  // If the cleaned input is empty, return an empty string
+  if (cleanInput.length === 0) {
+    return '';
+  }
+  // Concatenate the cleaned dial code and input
+  return `${dialCode}${cleanInput}`;
+};
+
+export default formatPhoneNumber;
+```
+
+### B. Update `PhoneNumberInput.js`
+
+1. Add import at the top with the other imports:
+
+```js
+import formatPhoneNumber from './formatPhoneNumber.js';
+```
+
+2. Replace the two raw concatenation lines with `formatPhoneNumber` calls:
+
+**In `AddOnSelect` onChange handler (line 78):**
+
+```diff
+- const phone_number = `${region?.dial_code ?? ''}${input}`;
++ const phone_number = formatPhoneNumber(region?.dial_code, input);
+```
+
+**In main `Input` onChange handler (line 224):**
+
+```diff
+- const phone_number = `${region?.dial_code ?? ''}${input}`;
++ const phone_number = formatPhoneNumber(region?.dial_code, input);
+```
+
+3. Fix null initialization (line 163–169) — remove `phone_number` so the initial value doesn't store just a dial code as a phone number:
+
+```diff
+  if (value === null) {
+    methods.setValue({
+      input: '',
+      region: allowedRegions[defaultValue],
+-     phone_number: allowedRegions[defaultValue].dial_code,
+    });
+  }
+```
+
+### C. Update e2e tests
+
+**In `tests/PhoneNumberInput.e2e.yaml`**, add test blocks:
+
+```yaml
+- id: phone_format_test
+  type: PhoneNumberInput
+  properties:
+    title: Format Test
+    defaultRegion: ZA
+    allowedRegions:
+      - ZA
+
+- id: format_display
+  type: Span
+  properties:
+    content:
+      _if:
+        test:
+          _ne:
+            - _state: phone_format_test.phone_number
+            - null
+        then:
+          _string.concat:
+            - 'Formatted: '
+            - _state: phone_format_test.phone_number
+        else: ''
+
+- id: phone_empty_test
+  type: PhoneNumberInput
+  properties:
+    title: Empty Init Test
+    defaultRegion: ZA
+    allowedRegions:
+      - ZA
+
+- id: empty_display
+  type: Span
+  properties:
+    content:
+      _if:
+        test:
+          _ne:
+            - _state: phone_empty_test
+            - null
+        then:
+          _string.concat:
+            - 'PhoneNumber: ['
+            - _state: phone_empty_test.phone_number
+            - ']'
+        else: 'null'
+```
+
+**In `tests/PhoneNumberInput.e2e.spec.js`**, add tests:
+
+```js
+test('strips leading zeros from phone number value', async ({ page }) => {
+  const input = getInput(page, 'phone_format_test');
+  await input.fill('0821234567');
+  await expect(input).toHaveValue('0821234567');
+
+  const display = getBlock(page, 'format_display');
+  await expect(display).toHaveText('Formatted: +27821234567');
+});
+
+test('strips non-digit characters from phone number value', async ({ page }) => {
+  const input = getInput(page, 'phone_format_test');
+  await input.fill('(082) 123-4567');
+  await expect(input).toHaveValue('(082) 123-4567');
+
+  const display = getBlock(page, 'format_display');
+  await expect(display).toHaveText('Formatted: +27821234567');
+});
+
+test('empty input produces empty phone_number, not just dial code', async ({ page }) => {
+  const display = getBlock(page, 'empty_display');
+  // On init with no input, phone_number should not be set to "+27"
+  await expect(display).not.toContainText('+27');
+});
+```
+
+## Files to modify
+
+1. **New:** `formatPhoneNumber.js`
+2. **Edit:** `PhoneNumberInput.js` — import + 2 line replacements + null init fix
+3. **Edit:** `tests/PhoneNumberInput.e2e.yaml` — add formatting test blocks
+4. **Edit:** `tests/PhoneNumberInput.e2e.spec.js` — add formatting tests
+
+## Acceptance criteria
+
+- Typing `0821234567` with +27 dial code produces `phone_number: "+27821234567"` (not `"+270821234567"`)
+- Typing `(082) 123-4567` produces `phone_number: "+27821234567"`
+- Empty input produces `phone_number: ""` (not `"+27"`)
+- Initial null value does not set `phone_number` to the dial code
+- The `input` field in the value object still stores exactly what the user typed (formatting only affects `phone_number`)
+- All existing e2e tests pass
+- New formatting tests pass

package/dist/blocks/Popover/Popover.js

@@ -13,28 +13,23 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useState } from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { Popover } from 'antd';
-const PopoverBlock = ({ blockId, content, methods, properties })=>{
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const PopoverBlock = ({ blockId, classNames = {}, content, methods, properties, styles = {} })=>{
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     return /*#__PURE__*/ React.createElement(Popover, {
         id: blockId,
         ...properties,
+        className: classNames.element,
         content: content.popover && content.popover(),
         onOpenChange: ()=>methods.triggerEvent({
                 name: 'onOpenChange'
             }),
-        getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`)
+        getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
+        style: styles.element
     }, content.content && content.content(), /*#__PURE__*/ React.createElement("div", {
         id: `${blockId}_${elementId}_popup`
     }));
 };
-PopoverBlock.defaultProps = blockDefaultProps;
-PopoverBlock.meta = {
-    category: 'container',
-    icons: [],
-    styles: [
-        'blocks/Popover/style.less'
-    ]
-};
-export default PopoverBlock;
+export default withTheme('Popover', withBlockDefaults(PopoverBlock));

package/dist/blocks/Popover/{schema.js → meta.js}

@@ -13,7 +13,22 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'container',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Blocks that trigger the Popover.',
+        popover: 'Blocks inside the popup.'
+    },
+    cssKeys: {
+        element: 'The Popover element.',
+        inner: 'The Popover inner.',
+        title: 'The Popover title.',
+        content: 'The Popover content.'
+    },
+    events: {
+        onOpenChange: 'Trigger actions when visibility of the tooltip card is changed.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -88,16 +103,71 @@
                 type: 'number',
                 description: 'Delay in milliseconds, before tooltip is hidden on mouse leave.',
                 default: 0.1
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onOpenChange: {
-                type: 'array',
-                description: 'Trigger actions when visibility of the tooltip card is changed.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/popover#design-token'
+                },
+                properties: {
+                    titleMinWidth: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        default: 177,
+                        description: 'Minimum width of the popover when it has a title.'
+                    },
+                    zIndexPopup: {
+                        type: 'number',
+                        default: 1030,
+                        description: 'Z-index of the popover.'
+                    },
+                    innerPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        default: 12,
+                        description: 'Padding inside the popover content area.'
+                    },
+                    titlePadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        description: 'Padding of the title area.'
+                    },
+                    titleMarginBottom: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Margin bottom of the title.'
+                    },
+                    titleBorderBottom: {
+                        type: 'string',
+                        default: 'none',
+                        description: 'Border bottom of the title area.'
+                    },
+                    innerContentPadding: {
+                        type: [
+                            'number',
+                            'string'
+                        ],
+                        default: 0,
+                        description: 'Padding of the inner content area.'
+                    },
+                    colorBgElevated: {
+                        type: 'string',
+                        description: 'Background color of the popover.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the popover container.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/Progress/Progress.js

@@ -14,12 +14,15 @@
   limitations under the License.
 */ import React from 'react';
 import { Progress } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const ProgressBlock = ({ blockId, properties })=>/*#__PURE__*/ React.createElement(Progress, {
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const ProgressBlock = ({ blockId, classNames = {}, properties, styles = {} })=>/*#__PURE__*/ React.createElement(Progress, {
+        className: classNames.element,
         gapDegree: properties.gapDegree,
-        gapPosition: properties.gapPosition,
+        gapPlacement: properties.gapPlacement,
         id: blockId,
         percent: properties.percent,
+        style: styles.element,
         showInfo: properties.showInfo,
         status: properties.status,
         steps: properties.steps,
@@ -31,12 +34,4 @@ const ProgressBlock = ({ blockId, properties })=>/*#__PURE__*/ React.createEleme
         type: properties.type,
         width: properties.width
     });
-ProgressBlock.defaultProps = blockDefaultProps;
-ProgressBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Progress/style.less'
-    ]
-};
-export default ProgressBlock;
+export default withTheme('Progress', withBlockDefaults(ProgressBlock));

package/dist/blocks/Progress/{schema.js → meta.js}

@@ -13,7 +13,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Progress element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -69,9 +74,22 @@
                 }
             },
             success: {
-                type: 'number',
-                default: 0,
-                description: 'Segmented success percent.'
+                type: 'object',
+                description: 'Segmented success percent configuration.',
+                properties: {
+                    percent: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Segmented success percent.'
+                    },
+                    strokeColor: {
+                        type: 'string',
+                        description: 'Color of the success segment.',
+                        docs: {
+                            displayType: 'color'
+                        }
+                    }
+                }
             },
             trailColor: {
                 type: 'string',
@@ -104,6 +122,58 @@
                 ],
                 default: 'top',
                 description: 'The gap position.'
+            },
+            steps: {
+                type: 'number',
+                description: 'Number of steps for a segmented progress bar (line type only).'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/progress#design-token'
+                },
+                properties: {
+                    defaultColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Default color of the progress bar.'
+                    },
+                    remainingColor: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.06)',
+                        description: 'Color of the unfilled portion of the progress bar.'
+                    },
+                    circleTextColor: {
+                        type: 'string',
+                        default: 'rgba(0,0,0,0.88)',
+                        description: 'Text color inside the circular progress.'
+                    },
+                    circleTextFontSize: {
+                        type: 'string',
+                        default: '1em',
+                        description: 'Font size of text inside the circular progress.'
+                    },
+                    circleIconFontSize: {
+                        type: 'string',
+                        default: '1.167em',
+                        description: 'Font size of icons inside the circular progress.'
+                    },
+                    lineBorderRadius: {
+                        type: 'number',
+                        default: 100,
+                        description: 'Border radius of the linear progress bar.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        description: 'Color used for success status.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Color used for exception status.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/QRCode/QRCode.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2026 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.
+*/ import React from 'react';
+import { QRCode } from 'antd';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
+const QRCodeBlock = ({ blockId, classNames = {}, methods, properties, styles = {} })=>/*#__PURE__*/ React.createElement(QRCode, {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element,
+        value: properties.value ?? '',
+        size: properties.size,
+        color: properties.color,
+        bgColor: properties.bgColor,
+        errorLevel: properties.errorLevel,
+        icon: properties.icon,
+        iconSize: properties.iconSize,
+        marginSize: properties.marginSize,
+        minVersion: properties.minVersion,
+        type: properties.type,
+        bordered: properties.bordered,
+        status: properties.status,
+        onRefresh: ()=>methods.triggerEvent({
+                name: 'onRefresh'
+            })
+    });
+export default withTheme('QRCode', withBlockDefaults(QRCodeBlock));

package/dist/blocks/{Footer/schema.js → QRCode/e2e.js}

@@ -12,19 +12,13 @@
   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.
-*/ export default {
-    type: 'object',
-    properties: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to applied to footer.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            }
-        }
+*/ import { createBlockHelper } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${blockId}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        status: (page, blockId, status)=>expect(locator(page, blockId)).toHaveAttribute('data-status', status),
+        hasCanvas: (page, blockId)=>expect(locator(page, blockId).locator('canvas')).toBeVisible()
     }
-};
+});

package/dist/blocks/QRCode/meta.js

@@ -0,0 +1,152 @@
+/*
+  Copyright 2020-2026 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.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The QRCode element.'
+    },
+    events: {
+        onRefresh: 'Trigger action when expired QR code refresh button is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            value: {
+                type: 'string',
+                description: 'Scanned text.'
+            },
+            size: {
+                type: 'integer',
+                default: 160,
+                description: 'QRCode size in pixels.'
+            },
+            color: {
+                type: 'string',
+                default: '#000000',
+                description: 'QRCode color.'
+            },
+            bgColor: {
+                type: 'string',
+                default: 'transparent',
+                description: 'QRCode background color.'
+            },
+            errorLevel: {
+                type: 'string',
+                enum: [
+                    'L',
+                    'M',
+                    'Q',
+                    'H'
+                ],
+                default: 'M',
+                description: 'Error correction level.'
+            },
+            icon: {
+                type: 'string',
+                description: 'Icon URL in the center of the QR code.'
+            },
+            iconSize: {
+                type: 'integer',
+                default: 40,
+                description: 'Icon size in pixels.'
+            },
+            marginSize: {
+                type: 'number',
+                default: 0,
+                description: 'Margin size of the QR code in modules.'
+            },
+            minVersion: {
+                type: 'integer',
+                minimum: 1,
+                maximum: 40,
+                default: 1,
+                description: 'Minimum QR code version (1-40). Higher versions support more data.'
+            },
+            type: {
+                type: 'string',
+                enum: [
+                    'canvas',
+                    'svg'
+                ],
+                default: 'canvas',
+                description: 'Render type.'
+            },
+            bordered: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether has border style.'
+            },
+            status: {
+                type: 'string',
+                enum: [
+                    'active',
+                    'expired',
+                    'loading',
+                    'scanned'
+                ],
+                default: 'active',
+                description: 'QRCode status.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/qr-code#design-token'
+                },
+                properties: {
+                    QRCodeTextColor: {
+                        type: 'string',
+                        description: 'Text color displayed on the QR code overlay.'
+                    },
+                    QRCodeCoverBackgroundColor: {
+                        type: 'string',
+                        description: 'Background color of the cover overlay shown when expired, loading, or scanned.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius of the QR code container.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the QR code container.'
+                    },
+                    colorSplit: {
+                        type: 'string',
+                        description: 'Border color when bordered is true.'
+                    },
+                    lineWidth: {
+                        type: 'number',
+                        default: 1,
+                        description: 'Border width.'
+                    },
+                    padding: {
+                        type: 'number',
+                        default: 12,
+                        description: 'Padding inside the QR code container.'
+                    }
+                }
+            }
+        }
+    }
+};