@lowdefy/blocks-diff 0.0.0-experimental-20260420110710

package/dist/blocks/DiffTimeline/meta.js

@@ -0,0 +1,211 @@
+/*
+  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 DiffTimeline wrapper element.',
+        title: 'The DiffTimeline title.',
+        group: 'The antd Timeline element.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            before: {
+                description: 'Previous state. An object or array; null / undefined is treated as empty so "newly created" records diff cleanly.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                oneOf: [
+                    {
+                        type: 'object'
+                    },
+                    {
+                        type: 'array'
+                    },
+                    {
+                        type: 'null'
+                    }
+                ]
+            },
+            after: {
+                description: 'New state. An object or array; null / undefined is treated as empty so "deleted" records diff cleanly.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                oneOf: [
+                    {
+                        type: 'object'
+                    },
+                    {
+                        type: 'array'
+                    },
+                    {
+                        type: 'null'
+                    }
+                ]
+            },
+            maxDepth: {
+                type: 'integer',
+                default: 4,
+                minimum: 1,
+                description: 'Paths deeper than this collapse into a single "Changed" entry rendered as JSON. Defaults to 4.'
+            },
+            title: {
+                type: 'string',
+                description: 'Optional title rendered above the timeline. Supports html.'
+            },
+            emptyText: {
+                type: 'string',
+                default: 'No changes',
+                description: 'Shown when there are no differences between before and after.'
+            },
+            showUnchanged: {
+                type: 'boolean',
+                default: false,
+                description: 'Also emit muted timeline entries for unchanged leaf fields.'
+            },
+            collapseNested: {
+                type: 'boolean',
+                default: true,
+                description: 'Render entirely-new or entirely-removed nested objects and arrays inside a collapsible panel.'
+            },
+            labels: {
+                type: 'object',
+                description: 'Map of dotted path to display label.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                additionalProperties: {
+                    type: 'string'
+                }
+            },
+            hide: {
+                type: 'array',
+                description: 'Patterns to hide. Each entry is an exact dotted path, a `prefix.*` prefix match, or a `*.leaf` tail match.',
+                items: {
+                    type: 'string'
+                }
+            },
+            show: {
+                type: 'array',
+                description: 'Allowlist; same pattern syntax as `hide`. Applied before `hide`.',
+                items: {
+                    type: 'string'
+                }
+            },
+            format: {
+                type: 'object',
+                description: 'Per-path value formatter. Keys are dotted paths (with optional "prefix.*" or "*.leaf" globs); values describe how to render matched values.',
+                docs: {
+                    displayType: 'yaml'
+                },
+                additionalProperties: {
+                    type: 'object',
+                    required: [
+                        'type'
+                    ],
+                    additionalProperties: false,
+                    properties: {
+                        type: {
+                            type: 'string',
+                            enum: [
+                                'date',
+                                'datetime',
+                                'boolean',
+                                'currency',
+                                'json',
+                                'code',
+                                'enum'
+                            ]
+                        },
+                        pattern: {
+                            type: 'string'
+                        },
+                        locale: {
+                            type: 'string'
+                        },
+                        currency: {
+                            type: 'string'
+                        },
+                        yes: {
+                            type: 'string',
+                            default: 'Yes'
+                        },
+                        no: {
+                            type: 'string',
+                            default: 'No'
+                        },
+                        map: {
+                            type: 'object',
+                            additionalProperties: {
+                                oneOf: [
+                                    {
+                                        type: 'string'
+                                    },
+                                    {
+                                        type: 'object',
+                                        additionalProperties: false,
+                                        properties: {
+                                            label: {
+                                                type: 'string'
+                                            },
+                                            color: {
+                                                type: 'string'
+                                            }
+                                        }
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                }
+            },
+            changeTypeLabels: {
+                type: 'object',
+                description: 'Override the tag labels for each change type.',
+                additionalProperties: false,
+                properties: {
+                    added: {
+                        type: 'string',
+                        default: 'Added'
+                    },
+                    removed: {
+                        type: 'string',
+                        default: 'Removed'
+                    },
+                    changed: {
+                        type: 'string',
+                        default: 'Changed'
+                    },
+                    unchanged: {
+                        type: 'string',
+                        default: 'Unchanged'
+                    }
+                }
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd Timeline design token overrides. See <a href="https://ant.design/components/timeline#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/timeline#design-token'
+                }
+            }
+        }
+    }
+};

package/dist/blocks.js

@@ -0,0 +1,18 @@
+/*
+  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 as DiffGit } from './blocks/DiffGit/DiffGit.js';
+export { default as DiffList } from './blocks/DiffList/DiffList.js';
+export { default as DiffSideBySide } from './blocks/DiffSideBySide/DiffSideBySide.js';
+export { default as DiffTimeline } from './blocks/DiffTimeline/DiffTimeline.js';

package/dist/e2e.js

@@ -0,0 +1,18 @@
+/*
+  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 as DiffGit } from './blocks/DiffGit/e2e.js';
+export { default as DiffList } from './blocks/DiffList/e2e.js';
+export { default as DiffSideBySide } from './blocks/DiffSideBySide/e2e.js';
+export { default as DiffTimeline } from './blocks/DiffTimeline/e2e.js';

package/dist/metas.js

@@ -0,0 +1,18 @@
+/*
+  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 as DiffGit } from './blocks/DiffGit/meta.js';
+export { default as DiffList } from './blocks/DiffList/meta.js';
+export { default as DiffSideBySide } from './blocks/DiffSideBySide/meta.js';
+export { default as DiffTimeline } from './blocks/DiffTimeline/meta.js';

package/dist/shared/ChangeTypeTag.js

@@ -0,0 +1,44 @@
+/*
+  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 { Tag } from 'antd';
+import { EditOutlined, MinusCircleOutlined, PauseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { CHANGE_TYPE_TAG_COLORS, CHANGE_TYPES, DEFAULT_CHANGE_TYPE_LABELS } from './constants.js';
+const ICONS = {
+    [CHANGE_TYPES.CREATE]: /*#__PURE__*/ React.createElement(PlusCircleOutlined, null),
+    [CHANGE_TYPES.REMOVE]: /*#__PURE__*/ React.createElement(MinusCircleOutlined, null),
+    [CHANGE_TYPES.CHANGE]: /*#__PURE__*/ React.createElement(EditOutlined, null),
+    [CHANGE_TYPES.UNCHANGED]: /*#__PURE__*/ React.createElement(PauseCircleOutlined, null)
+};
+const LABEL_KEYS = {
+    [CHANGE_TYPES.CREATE]: 'added',
+    [CHANGE_TYPES.REMOVE]: 'removed',
+    [CHANGE_TYPES.CHANGE]: 'changed',
+    [CHANGE_TYPES.UNCHANGED]: 'unchanged'
+};
+function ChangeTypeTag({ type, labels, className }) {
+    const color = CHANGE_TYPE_TAG_COLORS[type] ?? 'default';
+    const labelKey = LABEL_KEYS[type] ?? 'changed';
+    const labelText = (labels && labels[labelKey]) ?? DEFAULT_CHANGE_TYPE_LABELS[labelKey];
+    return /*#__PURE__*/ React.createElement(Tag, {
+        color: color,
+        icon: ICONS[type],
+        className: className,
+        style: {
+            marginInlineEnd: 0
+        }
+    }, labelText);
+}
+export default ChangeTypeTag;

package/dist/shared/DiffShell.js

@@ -0,0 +1,50 @@
+/*
+  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 { Empty, Space, Typography } from 'antd';
+import { renderHtml } from '@lowdefy/block-utils';
+const { Title } = Typography;
+function DiffShell({ blockId, classNames = {}, styles = {}, title, emptyText, empty, methods, children }) {
+    const body = empty ? /*#__PURE__*/ React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        description: emptyText,
+        style: {
+            padding: '16px 0'
+        }
+    }) : children;
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        className: classNames.element,
+        style: styles.element
+    }, /*#__PURE__*/ React.createElement(Space, {
+        direction: "vertical",
+        size: "middle",
+        style: {
+            display: 'flex',
+            width: '100%'
+        }
+    }, title && /*#__PURE__*/ React.createElement(Title, {
+        level: 5,
+        className: classNames.title,
+        style: {
+            margin: 0,
+            ...styles.title
+        }
+    }, renderHtml({
+        html: title,
+        methods
+    })), body));
+}
+export default DiffShell;

package/dist/shared/ValueCell.js

@@ -0,0 +1,126 @@
+/*
+  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 { Collapse, Space, Typography } from 'antd';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { type } from '@lowdefy/helpers';
+import { CHANGE_TYPES } from './constants.js';
+import formatValue from './formatValue.js';
+const { Text } = Typography;
+function isComplex(value) {
+    return type.isObject(value) || type.isArray(value);
+}
+// Formatters that produce their own coloured/bordered element already
+// communicate the value visually; wrapping them in another highlight strip
+// just nests two rectangles, so the emphasis styles are skipped for them.
+const SELF_STYLED_FORMATTERS = new Set([
+    'enum',
+    'boolean',
+    'json',
+    'code'
+]);
+function isSelfStyled(formatter) {
+    return type.isObject(formatter) && SELF_STYLED_FORMATTERS.has(formatter.type);
+}
+function renderOld(value, formatter) {
+    if (isSelfStyled(formatter)) {
+        return /*#__PURE__*/ React.createElement("span", {
+            style: {
+                opacity: 0.55,
+                filter: 'grayscale(0.3)'
+            },
+            className: "lf-datadiff-old"
+        }, formatValue(value, formatter));
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        style: {
+            textDecoration: 'line-through',
+            color: 'var(--ant-color-text-tertiary, rgba(0,0,0,0.45))'
+        },
+        className: "lf-datadiff-old"
+    }, formatValue(value, formatter));
+}
+function renderNew(value, formatter) {
+    if (isSelfStyled(formatter)) {
+        return /*#__PURE__*/ React.createElement("span", {
+            className: "lf-datadiff-new"
+        }, formatValue(value, formatter));
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        style: {
+            background: 'var(--ant-color-success-bg, rgba(82,196,26,0.1))',
+            padding: '1px 6px',
+            borderRadius: 'var(--ant-border-radius-sm, 4px)',
+            color: 'var(--ant-color-success-text, var(--ant-color-text))'
+        },
+        className: "lf-datadiff-new"
+    }, formatValue(value, formatter));
+}
+function describeComplex(value) {
+    if (type.isArray(value)) {
+        const n = value.length;
+        return `${n} ${n === 1 ? 'item' : 'items'}`;
+    }
+    const n = Object.keys(value).length;
+    return `${n} ${n === 1 ? 'field' : 'fields'}`;
+}
+function renderCollapsibleObject(value, formatter) {
+    const items = [
+        {
+            key: 'details',
+            label: /*#__PURE__*/ React.createElement(Text, {
+                type: "secondary"
+            }, describeComplex(value)),
+            children: formatValue(value, formatter ?? {
+                type: 'json'
+            })
+        }
+    ];
+    return /*#__PURE__*/ React.createElement(Collapse, {
+        size: "small",
+        ghost: true,
+        items: items
+    });
+}
+function ValueCell({ change, collapseNested = true }) {
+    const { type: changeType, oldValue, newValue, formatter } = change;
+    if (changeType === CHANGE_TYPES.CREATE) {
+        if (collapseNested && isComplex(newValue) && type.isNone(formatter)) {
+            return renderCollapsibleObject(newValue, formatter);
+        }
+        return renderNew(newValue, formatter);
+    }
+    if (changeType === CHANGE_TYPES.REMOVE) {
+        if (collapseNested && isComplex(oldValue) && type.isNone(formatter)) {
+            return renderCollapsibleObject(oldValue, formatter);
+        }
+        return renderOld(oldValue, formatter);
+    }
+    if (changeType === CHANGE_TYPES.UNCHANGED) {
+        return /*#__PURE__*/ React.createElement(Text, {
+            type: "secondary"
+        }, formatValue(newValue, formatter));
+    }
+    return /*#__PURE__*/ React.createElement(Space, {
+        size: 8,
+        wrap: true
+    }, renderOld(oldValue, formatter), /*#__PURE__*/ React.createElement(ArrowRightOutlined, {
+        style: {
+            color: 'var(--ant-color-text-quaternary, rgba(0,0,0,0.25))',
+            fontSize: 12
+        }
+    }), renderNew(newValue, formatter));
+}
+export default ValueCell;

package/dist/shared/breadcrumbLabel.js

@@ -0,0 +1,44 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+import { humaniseSegment, isIndex, pathToString, singularise } from './pathUtils.js';
+const SEPARATOR = ' \u203A ';
+function labelForNonIndex(segment, subPath, labelsMap) {
+    const subPathStr = pathToString(subPath);
+    if (type.isObject(labelsMap) && type.isString(labelsMap[subPathStr])) {
+        return labelsMap[subPathStr];
+    }
+    return humaniseSegment(segment);
+}
+function breadcrumbLabel(path, labelsMap) {
+    if (!type.isArray(path) || path.length === 0) return '';
+    const parts = [];
+    path.forEach((segment, index)=>{
+        if (isIndex(segment)) {
+            const ordinal = Number(segment) + 1;
+            if (parts.length === 0) {
+                parts.push(String(ordinal));
+                return;
+            }
+            const parent = parts[parts.length - 1];
+            parts[parts.length - 1] = `${singularise(parent)} ${ordinal}`;
+            return;
+        }
+        const cumulativePath = path.slice(0, index + 1);
+        parts.push(labelForNonIndex(segment, cumulativePath, labelsMap));
+    });
+    return parts.join(SEPARATOR);
+}
+export default breadcrumbLabel;