@lowdefy/block-utils 4.7.2 → 5.0.0

package/dist/HtmlComponent.js

@@ -38,7 +38,7 @@ let HtmlComponent = class HtmlComponent extends React.Component {
         }
     }
     render() {
-        const { div, id, methods, style } = this.props;
+        const { className, div, id, style } = this.props;
         if (div === true) {
             return /*#__PURE__*/ React.createElement("div", {
                 id: id,
@@ -48,7 +48,8 @@ let HtmlComponent = class HtmlComponent extends React.Component {
                         this.div = el;
                     }
                 },
-                className: methods.makeCssClass(style),
+                className: className,
+                style: style,
                 onMouseUp: this.onTextSelection
             });
         }
@@ -60,7 +61,8 @@ let HtmlComponent = class HtmlComponent extends React.Component {
                     this.div = el;
                 }
             },
-            className: methods.makeCssClass(style),
+            className: className,
+            style: style,
             onMouseUp: this.onTextSelection
         });
     }

package/dist/blockDefaultProps.js

@@ -12,17 +12,17 @@
   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 makeCssClass from './makeCssClass.js';
-const blockDefaultProps = {
+*/ const blockDefaultProps = {
     basePath: '',
     blockId: 'undefined_id',
-    components: {},
+    components: {
+        ShortcutBadge: ()=>null
+    },
     content: {},
     events: {},
     list: [],
     menus: [],
     methods: {
-        makeCssClass,
         registerEvent: ()=>undefined,
         registerMethod: ()=>undefined,
         triggerEvent: ()=>undefined

package/dist/blockSchema.js

@@ -38,6 +38,41 @@
         style: {
             type: 'object'
         },
+        class: {
+            oneOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'array',
+                    items: {
+                        type: 'string'
+                    }
+                },
+                {
+                    type: 'object',
+                    additionalProperties: {
+                        oneOf: [
+                            {
+                                type: 'string'
+                            },
+                            {
+                                type: 'array',
+                                items: {
+                                    type: 'string'
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        },
+        styles: {
+            type: 'object',
+            additionalProperties: {
+                type: 'object'
+            }
+        },
         layout: {
             type: 'object'
         },

package/dist/buildBlockSchema.js

@@ -0,0 +1,178 @@
+/*
+  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.
+*/ const operatorSchema = {
+    type: 'object',
+    patternProperties: {
+        '^_': {}
+    },
+    additionalProperties: false,
+    minProperties: 1,
+    maxProperties: 1
+};
+const classValueSchema = {
+    oneOf: [
+        {
+            type: 'string'
+        },
+        {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        },
+        operatorSchema
+    ]
+};
+const styleValueSchema = {
+    type: 'object'
+};
+const eventValueSchema = {
+    oneOf: [
+        {
+            type: 'array'
+        },
+        operatorSchema
+    ]
+};
+function buildBlockSchema(meta) {
+    const cssEntries = Object.entries({
+        block: 'The block layout wrapper.',
+        ...meta.cssKeys ?? {}
+    });
+    const classProperties = Object.fromEntries(cssEntries.map(([key, desc])=>[
+            `.${key}`,
+            {
+                ...classValueSchema,
+                description: desc
+            }
+        ]));
+    const styleProperties = Object.fromEntries(cssEntries.map(([key, desc])=>[
+            `.${key}`,
+            {
+                ...styleValueSchema,
+                description: desc
+            }
+        ]));
+    const eventProperties = Object.fromEntries(Object.entries(meta.events ?? {}).map(([name, desc])=>[
+            name,
+            {
+                ...eventValueSchema,
+                description: desc
+            }
+        ]));
+    const schema = {
+        type: 'object',
+        additionalProperties: false,
+        required: [
+            'id',
+            'type'
+        ],
+        properties: {
+            id: {
+                type: 'string'
+            },
+            type: {
+                type: 'string'
+            },
+            layout: {
+                oneOf: [
+                    {
+                        type: 'object'
+                    },
+                    operatorSchema
+                ]
+            },
+            visible: {
+                oneOf: [
+                    {
+                        type: 'boolean'
+                    },
+                    operatorSchema
+                ]
+            },
+            required: {
+                oneOf: [
+                    {
+                        type: 'boolean'
+                    },
+                    operatorSchema
+                ]
+            },
+            properties: meta.properties ?? {
+                type: 'object'
+            },
+            class: {
+                oneOf: [
+                    {
+                        type: 'string'
+                    },
+                    {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        }
+                    },
+                    operatorSchema,
+                    {
+                        type: 'object',
+                        additionalProperties: false,
+                        properties: classProperties
+                    }
+                ]
+            },
+            style: {
+                oneOf: [
+                    operatorSchema,
+                    {
+                        type: 'object',
+                        additionalProperties: false,
+                        properties: styleProperties
+                    },
+                    {
+                        type: 'object',
+                        patternProperties: {
+                            '^(?!_)(?!\\.)': {}
+                        },
+                        additionalProperties: false,
+                        minProperties: 1
+                    }
+                ]
+            },
+            events: {
+                oneOf: [
+                    operatorSchema,
+                    {
+                        type: 'object',
+                        additionalProperties: false,
+                        properties: eventProperties
+                    }
+                ]
+            }
+        }
+    };
+    if (meta.category === 'container') {
+        schema.properties.blocks = {
+            type: 'array',
+            items: {
+                type: 'object'
+            }
+        };
+        schema.properties.areas = {
+            type: 'object'
+        };
+    }
+    return schema;
+}
+export default buildBlockSchema;

package/dist/{makeCssClass.js → cn.js}

@@ -12,8 +12,9 @@
   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 { css } from '@emotion/css';
-import { mergeObjects } from '@lowdefy/helpers';
-import mediaToCssObject from './mediaToCssObject.js';
-const makeCssClass = (styles, styleObjectOnly)=>styleObjectOnly ? mediaToCssObject(mergeObjects(styles), true)[0] : css(mediaToCssObject(styles));
-export default makeCssClass;
+*/ import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export default cn;

package/dist/extractBlockTypes.js

@@ -0,0 +1,37 @@
+/*
+  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.
+*/ function extractBlockTypes(metas) {
+    const entries = Object.entries(metas);
+    const blocks = entries.map(([name])=>name);
+    const icons = {};
+    const blockMetas = {};
+    for (const [name, meta] of entries){
+        icons[name] = meta.icons ?? [];
+        const entry = {
+            category: meta.category
+        };
+        if (meta.valueType != null) entry.valueType = meta.valueType;
+        if (meta.initValue !== undefined) entry.initValue = meta.initValue;
+        if (meta.slots !== undefined) entry.slots = meta.slots;
+        if (meta.cssKeys) entry.cssKeys = Object.keys(meta.cssKeys);
+        blockMetas[name] = entry;
+    }
+    return {
+        blocks,
+        icons,
+        blockMetas
+    };
+}
+export default extractBlockTypes;

package/dist/index.js

@@ -14,10 +14,12 @@
   limitations under the License.
 */ import blockDefaultProps from './blockDefaultProps.js';
 import blockSchema from './blockSchema.js';
+import buildBlockSchema from './buildBlockSchema.js';
+import cn from './cn.js';
 import ErrorBoundary from './ErrorBoundary.js';
 import ErrorPage from './ErrorPage.js';
+import extractBlockTypes from './extractBlockTypes.js';
 import HtmlComponent from './HtmlComponent.js';
-import makeCssClass from './makeCssClass.js';
-import mediaToCssObject from './mediaToCssObject.js';
 import renderHtml from './renderHtml.js';
-export { blockDefaultProps, blockSchema, ErrorBoundary, ErrorPage, HtmlComponent, makeCssClass, mediaToCssObject, renderHtml };
+import withBlockDefaults from './withBlockDefaults.js';
+export { blockDefaultProps, blockSchema, buildBlockSchema, cn, ErrorBoundary, ErrorPage, extractBlockTypes, HtmlComponent, renderHtml, withBlockDefaults };

package/dist/renderHtml.js

@@ -15,7 +15,8 @@
 */ import React from 'react';
 import { type } from '@lowdefy/helpers';
 import HtmlComponent from './HtmlComponent.js';
-const renderHtml = ({ div, events, html, id, methods, style })=>type.isNone(html) ? undefined : /*#__PURE__*/ React.createElement(HtmlComponent, {
+const renderHtml = ({ className, div, events, html, id, methods, style })=>type.isNone(html) ? undefined : /*#__PURE__*/ React.createElement(HtmlComponent, {
+        className: className,
         div: div,
         events: events,
         html: html,

package/dist/withBlockDefaults.js

@@ -0,0 +1,31 @@
+/*
+  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 blockDefaultProps from './blockDefaultProps.js';
+// Note: Unlike React's defaultProps, this does not replace explicitly-passed
+// undefined values. { ...defaults, ...props } keeps undefined if props has the key.
+// This matches production behavior where the framework always passes defined values.
+function withBlockDefaults(Component) {
+    const Wrapped = (props)=>{
+        return /*#__PURE__*/ React.createElement(Component, {
+            ...blockDefaultProps,
+            ...props
+        });
+    };
+    Wrapped.meta = Component.meta;
+    Wrapped.displayName = Component.displayName || Component.name;
+    return Wrapped;
+}
+export default withBlockDefaults;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/block-utils",
-  "version": "4.7.2",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "description": "Lowdefy Block Utils",
   "homepage": "https://lowdefy.com",
@@ -34,19 +34,21 @@
     "dist/*"
   ],
   "dependencies": {
-    "@emotion/css": "11.11.2",
-    "@lowdefy/errors": "4.7.2",
-    "@lowdefy/helpers": "4.7.2",
+    "@lowdefy/errors": "5.0.0",
+    "@lowdefy/helpers": "5.0.0",
+    "clsx": "2.1.1",
     "dompurify": "3.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "tailwind-merge": "2.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@babel/core": "7.23.3",
-    "@emotion/jest": "11.10.5",
-    "@swc/cli": "0.1.63",
-    "@swc/core": "1.3.99",
-    "@swc/jest": "0.2.29",
+    "@swc/cli": "0.8.0",
+    "@swc/core": "1.15.18",
+    "@swc/jest": "0.2.39",
     "@testing-library/dom": "8.19.1",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -59,7 +61,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "swc src --out-dir dist --config-file ../../../.swcrc --delete-dir-on-start && pnpm copyfiles",
+    "build": "swc src --out-dir dist --config-file ../../../.swcrc --cli-config-file ../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
     "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"

package/dist/mediaToCssObject.js

@@ -1,87 +0,0 @@
-/* eslint-disable no-undef */ /*
-  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';
-const breakpoints = {
-    xs: 576,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1600
-};
-const mediaReact = {
-    xs: `@media screen and (maxWidth: ${breakpoints.xs}px)`,
-    sm: `@media screen and (minWidth: ${breakpoints.xs}px)`,
-    md: `@media screen and (minWidth: ${breakpoints.sm}px)`,
-    lg: `@media screen and (minWidth: ${breakpoints.md}px)`,
-    xl: `@media screen and (minWidth: ${breakpoints.lg}px)`,
-    xxl: `@media screen and (minWidth: ${breakpoints.xl}px)`
-};
-const media = {
-    xs: `@media screen and (max-width: ${breakpoints.xs}px)`,
-    sm: `@media screen and (min-width: ${breakpoints.xs}px)`,
-    md: `@media screen and (min-width: ${breakpoints.sm}px)`,
-    lg: `@media screen and (min-width: ${breakpoints.md}px)`,
-    xl: `@media screen and (min-width: ${breakpoints.lg}px)`,
-    xxl: `@media screen and (min-width: ${breakpoints.xl}px)`
-};
-const mediaRegex = /@media\s+(xs|sm|md|lg|xl|xxl)\s*{/gm;
-const setReplacer = (_, group)=>media[group] + ' {';
-const mediaToCssObject = (styles, styleObjectOnly)=>{
-    if (type.isString(styles)) {
-        return styles.replace(mediaRegex, setReplacer);
-    }
-    let styleObjects = styles;
-    if (type.isObject(styles)) {
-        styleObjects = [
-            styles
-        ];
-    }
-    if (!type.isArray(styleObjects)) {
-        return [];
-    }
-    return styleObjects.map((style)=>{
-        if (type.isString(style)) {
-            return style.replace(mediaRegex, setReplacer);
-        }
-        if (!type.isObject(style)) {
-            return {};
-        }
-        let mq = media;
-        if (styleObjectOnly) {
-            mq = mediaReact;
-        }
-        const { xs, sm, md, lg, xl, xxl, ...others } = style;
-        if (xs) {
-            others[mq.xs] = xs;
-        }
-        if (sm) {
-            others[mq.sm] = sm;
-        }
-        if (md) {
-            others[mq.md] = md;
-        }
-        if (lg) {
-            others[mq.lg] = lg;
-        }
-        if (xl) {
-            others[mq.xl] = xl;
-        }
-        if (xxl) {
-            others[mq.xxl] = xxl;
-        }
-        return others;
-    });
-};
-export default mediaToCssObject;