@gem-sdk/system 1.58.0-dev.134 → 1.58.0-dev.137

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @gem-sdk/system
+
+## 1.58.0-dev.135
+
+### Patch Changes
+
+- [`278d253`](https://github.com/gempages/web-builder-elements/commit/278d253fd16b9dc72140c075e7ce8a4e6bce0445) Thanks [@haicaodac](https://github.com/haicaodac)! - init pkg
+
+- Updated dependencies [[`808d1db`](https://github.com/gempages/web-builder-elements/commit/808d1dbe7181e004111e7e31e996a78b9f98c011)]:
+  - @gem-sdk/core@1.58.0-dev.135
+
+## 1.58.0-dev.134
+
+### Patch Changes
+
+- [#9513](https://github.com/gempages/web-builder-elements/pull/9513) [`0d6a932`](https://github.com/gempages/web-builder-elements/commit/0d6a9324fba356bc1217190c09dc57c2ee243120) Thanks [@github-actions](https://github.com/apps/github-actions)! - trigger build

package/dist/cjs/component/createAttr.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const createAttr = (obj)=>{
+    if (typeof obj !== 'object' || obj === null) {
+        console.error('Expected an object as input.');
+        return;
+    }
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        for(const key in obj){
+            const value = obj[key];
+            // 1. Check if the key starts with "data-gp-"
+            if (!key.startsWith('data-gp-')) {
+                console.error(`Invalid attribute key: "${key}". Must start with "data-gp-".`);
+            }
+            // 2. Check if the key contains uppercase letters
+            if (key !== key.toLowerCase()) {
+                console.error(`Invalid attribute key: "${key}". Must not contain uppercase letters.`);
+            }
+            // 3. Check if the value is an object (nested object check)
+            if (typeof value === 'object' && value !== null) {
+                console.error(`Invalid nested attribute for key "${key}". Nested objects are not supported.`);
+            }
+            // 4. Check if the value is a valid type (string or number)
+            const isValidType = typeof value === 'string' || typeof value === 'number';
+            if (!isValidType) {
+                console.error(`Invalid attribute value for key "${key}": ${value}. Must be a string or number.`);
+            }
+        }
+    }
+    return obj;
+};
+
+exports.createAttr = createAttr;

package/dist/cjs/component/createClass.js

@@ -0,0 +1,38 @@
+'use strict';
+
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    } else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix).filter((key)=>mix[key]).join(' ');
+    } else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+const createClass = (obj)=>{
+    if (typeof obj !== 'object' || obj === null) {
+        console.error('Expected an object as input.');
+        return '';
+    }
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        // Validate each class name length
+        for(const className in obj){
+            if (className.length > 30) {
+                console.error(`Class name "${className}" exceeds the maximum length of 30 characters.`);
+            }
+            if (className.includes(' ')) {
+                console.error(`Class name "${className}" should not contain spaces.`);
+            }
+            if (className !== className.toLowerCase()) {
+                console.error(`Class name "${className}" should be in lowercase.`);
+            }
+        }
+    }
+    return cls(obj);
+};
+
+exports.createClass = createClass;

package/dist/cjs/component/createContent.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const createContent = (content)=>{
+    // Check if content is a string
+    if (typeof content !== 'string') {
+        console.error('Invalid content type: Content must be a string.');
+        return '';
+    }
+    // Regex to match {{}} pattern with only letters inside, e.g., {{Hello}}
+    const invalidPattern = /\{\{[A-Za-z]+\}\}/g;
+    // Check if content contains any invalid patterns
+    if (invalidPattern.test(content)) {
+        console.error('Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".');
+        return '';
+    }
+    return content;
+};
+
+exports.createContent = createContent;

package/dist/cjs/component/createStateOrContext.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const createStateOrContext = (obj)=>{
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    const isValid = (value)=>{
+        // Ensure value is neither undefined, null, empty string, nor false (except 0)
+        return value !== undefined && value !== null && value !== '' && value !== false;
+    };
+    const validateKey = (key)=>{
+        // Check key length
+        if (key.length > 20) {
+            console.error(`Invalid key "${key}": Key length must not exceed 20 characters.`);
+            return false;
+        }
+        // Ensure no special characters or numbers
+        const validKeyRegex = /^[a-zA-Z]+$/;
+        if (!validKeyRegex.test(key)) {
+            console.error(`Invalid key "${key}": Key must contain only alphabetic characters (no numbers or special characters).`);
+            return false;
+        }
+        // Check camelCase format (should start with lowercase)
+        const camelCaseRegex = /^[a-z][a-zA-Z]*$/;
+        if (!camelCaseRegex.test(key)) {
+            console.error(`Invalid key "${key}": Key must be in camelCase format.`);
+            return false;
+        }
+        return true;
+    };
+    const validateObject = (data, depth)=>{
+        if (depth > 3) {
+            console.error('Invalid structure: Data must not be nested deeper than 3 levels.');
+            return false;
+        }
+        for(const key in data){
+            const value = data[key];
+            // Key validation
+            if (!validateKey(key)) continue;
+            // Value validation
+            if (!isValid(value)) {
+                console.error(`Invalid value for key "${key}": Value must not be undefined, null, blank, or false.`);
+                continue;
+            }
+            // Recursive check if the value is an object
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                validateObject(value, depth + 1);
+            }
+        }
+    };
+    if (isDevOrStaging) {
+        validateObject(obj, 1);
+    }
+    return obj;
+};
+
+exports.createStateOrContext = createStateOrContext;

package/dist/cjs/component/createStyle.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var toCamelCaseKeys = require('./utils/toCamelCaseKeys.js');
+
+/**
+ * Properties to ignore with explanations for each
+ */ const ignoredProperties = {
+    ignore: 'This property is not supported in the current styling setup.'
+};
+const createStyle = (obj)=>{
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        for(const key in obj){
+            const value = obj[key];
+            // Check if the property is in the ignored list and log the explanation
+            if (Object.prototype.hasOwnProperty.call(ignoredProperties, key)) {
+                console.error(`Ignored property detected: "${key}". ${ignoredProperties[key]}`);
+            }
+            // Check for uppercase letters, numbers, and special characters (only allow lowercase letters and "-"
+            const isValidKey = /^[a-z-]+$/.test(key);
+            if (!isValidKey) {
+                console.error(`Invalid key "${key}": Keys must be lowercase letters and may only contain "-".`);
+            }
+            // Check for nested objects (only support single-level properties)
+            if (typeof value === 'object' && value !== null) {
+                console.error(`Invalid nested object for property "${key}". Nested objects are not supported.`);
+            }
+            // Check if the value is a valid type
+            const isValidType = typeof value === 'string' || typeof value === 'number';
+            if (!isValidType) {
+                console.error(`Invalid style value for "${key}": ${value}. Must be a string or number.`);
+            }
+        }
+    }
+    return obj;
+};
+const createStyleReact = (obj)=>{
+    return toCamelCaseKeys.toCamelCaseKeys(createStyle(obj));
+};
+
+exports.createStyle = createStyle;
+exports.createStyleReact = createStyleReact;

package/dist/cjs/component/utils/toCamelCaseKeys.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const toCamelCaseKeys = (obj)=>{
+    const newObj = {};
+    for(const key in obj){
+        const value = obj[key];
+        // If the key starts with "--", keep it as is
+        const newKey = key.startsWith('--') ? key : key.replace(/-([a-z])/g, (_, char)=>char.toUpperCase());
+        // Recursively apply to nested objects
+        newObj[newKey] = typeof value === 'object' && value !== null && !Array.isArray(value) ? toCamelCaseKeys(value) : value;
+    }
+    return newObj;
+};
+
+exports.toCamelCaseKeys = toCamelCaseKeys;

package/dist/cjs/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var createAttr = require('./component/createAttr.js');
+var createStyle = require('./component/createStyle.js');
+var createContent = require('./component/createContent.js');
+var createClass = require('./component/createClass.js');
+var createStateOrContext = require('./component/createStateOrContext.js');
+
+const createAttrReact = createAttr.createAttr;
+const createContentReact = createContent.createContent;
+const createClassReact = createClass.createClass;
+
+exports.createAttr = createAttr.createAttr;
+exports.createStyle = createStyle.createStyle;
+exports.createStyleReact = createStyle.createStyleReact;
+exports.createContent = createContent.createContent;
+exports.createClass = createClass.createClass;
+exports.createStateOrContext = createStateOrContext.createStateOrContext;
+exports.createAttrReact = createAttrReact;
+exports.createClassReact = createClassReact;
+exports.createContentReact = createContentReact;

package/dist/esm/component/createAttr.js

@@ -0,0 +1,32 @@
+const createAttr = (obj)=>{
+    if (typeof obj !== 'object' || obj === null) {
+        console.error('Expected an object as input.');
+        return;
+    }
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        for(const key in obj){
+            const value = obj[key];
+            // 1. Check if the key starts with "data-gp-"
+            if (!key.startsWith('data-gp-')) {
+                console.error(`Invalid attribute key: "${key}". Must start with "data-gp-".`);
+            }
+            // 2. Check if the key contains uppercase letters
+            if (key !== key.toLowerCase()) {
+                console.error(`Invalid attribute key: "${key}". Must not contain uppercase letters.`);
+            }
+            // 3. Check if the value is an object (nested object check)
+            if (typeof value === 'object' && value !== null) {
+                console.error(`Invalid nested attribute for key "${key}". Nested objects are not supported.`);
+            }
+            // 4. Check if the value is a valid type (string or number)
+            const isValidType = typeof value === 'string' || typeof value === 'number';
+            if (!isValidType) {
+                console.error(`Invalid attribute value for key "${key}": ${value}. Must be a string or number.`);
+            }
+        }
+    }
+    return obj;
+};
+
+export { createAttr };

package/dist/esm/component/createClass.js

@@ -0,0 +1,36 @@
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    } else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix).filter((key)=>mix[key]).join(' ');
+    } else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+const createClass = (obj)=>{
+    if (typeof obj !== 'object' || obj === null) {
+        console.error('Expected an object as input.');
+        return '';
+    }
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        // Validate each class name length
+        for(const className in obj){
+            if (className.length > 30) {
+                console.error(`Class name "${className}" exceeds the maximum length of 30 characters.`);
+            }
+            if (className.includes(' ')) {
+                console.error(`Class name "${className}" should not contain spaces.`);
+            }
+            if (className !== className.toLowerCase()) {
+                console.error(`Class name "${className}" should be in lowercase.`);
+            }
+        }
+    }
+    return cls(obj);
+};
+
+export { createClass };

package/dist/esm/component/createContent.js

@@ -0,0 +1,17 @@
+const createContent = (content)=>{
+    // Check if content is a string
+    if (typeof content !== 'string') {
+        console.error('Invalid content type: Content must be a string.');
+        return '';
+    }
+    // Regex to match {{}} pattern with only letters inside, e.g., {{Hello}}
+    const invalidPattern = /\{\{[A-Za-z]+\}\}/g;
+    // Check if content contains any invalid patterns
+    if (invalidPattern.test(content)) {
+        console.error('Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".');
+        return '';
+    }
+    return content;
+};
+
+export { createContent };

package/dist/esm/component/createStateOrContext.js

@@ -0,0 +1,53 @@
+const createStateOrContext = (obj)=>{
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    const isValid = (value)=>{
+        // Ensure value is neither undefined, null, empty string, nor false (except 0)
+        return value !== undefined && value !== null && value !== '' && value !== false;
+    };
+    const validateKey = (key)=>{
+        // Check key length
+        if (key.length > 20) {
+            console.error(`Invalid key "${key}": Key length must not exceed 20 characters.`);
+            return false;
+        }
+        // Ensure no special characters or numbers
+        const validKeyRegex = /^[a-zA-Z]+$/;
+        if (!validKeyRegex.test(key)) {
+            console.error(`Invalid key "${key}": Key must contain only alphabetic characters (no numbers or special characters).`);
+            return false;
+        }
+        // Check camelCase format (should start with lowercase)
+        const camelCaseRegex = /^[a-z][a-zA-Z]*$/;
+        if (!camelCaseRegex.test(key)) {
+            console.error(`Invalid key "${key}": Key must be in camelCase format.`);
+            return false;
+        }
+        return true;
+    };
+    const validateObject = (data, depth)=>{
+        if (depth > 3) {
+            console.error('Invalid structure: Data must not be nested deeper than 3 levels.');
+            return false;
+        }
+        for(const key in data){
+            const value = data[key];
+            // Key validation
+            if (!validateKey(key)) continue;
+            // Value validation
+            if (!isValid(value)) {
+                console.error(`Invalid value for key "${key}": Value must not be undefined, null, blank, or false.`);
+                continue;
+            }
+            // Recursive check if the value is an object
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                validateObject(value, depth + 1);
+            }
+        }
+    };
+    if (isDevOrStaging) {
+        validateObject(obj, 1);
+    }
+    return obj;
+};
+
+export { createStateOrContext };

package/dist/esm/component/createStyle.js

@@ -0,0 +1,39 @@
+import { toCamelCaseKeys } from './utils/toCamelCaseKeys.js';
+
+/**
+ * Properties to ignore with explanations for each
+ */ const ignoredProperties = {
+    ignore: 'This property is not supported in the current styling setup.'
+};
+const createStyle = (obj)=>{
+    const isDevOrStaging = !process.env.APP_ENV || process.env.APP_ENV === 'development' || process.env.APP_ENV === 'staging';
+    if (isDevOrStaging) {
+        for(const key in obj){
+            const value = obj[key];
+            // Check if the property is in the ignored list and log the explanation
+            if (Object.prototype.hasOwnProperty.call(ignoredProperties, key)) {
+                console.error(`Ignored property detected: "${key}". ${ignoredProperties[key]}`);
+            }
+            // Check for uppercase letters, numbers, and special characters (only allow lowercase letters and "-"
+            const isValidKey = /^[a-z-]+$/.test(key);
+            if (!isValidKey) {
+                console.error(`Invalid key "${key}": Keys must be lowercase letters and may only contain "-".`);
+            }
+            // Check for nested objects (only support single-level properties)
+            if (typeof value === 'object' && value !== null) {
+                console.error(`Invalid nested object for property "${key}". Nested objects are not supported.`);
+            }
+            // Check if the value is a valid type
+            const isValidType = typeof value === 'string' || typeof value === 'number';
+            if (!isValidType) {
+                console.error(`Invalid style value for "${key}": ${value}. Must be a string or number.`);
+            }
+        }
+    }
+    return obj;
+};
+const createStyleReact = (obj)=>{
+    return toCamelCaseKeys(createStyle(obj));
+};
+
+export { createStyle, createStyleReact };

package/dist/esm/component/utils/toCamelCaseKeys.js

@@ -0,0 +1,13 @@
+const toCamelCaseKeys = (obj)=>{
+    const newObj = {};
+    for(const key in obj){
+        const value = obj[key];
+        // If the key starts with "--", keep it as is
+        const newKey = key.startsWith('--') ? key : key.replace(/-([a-z])/g, (_, char)=>char.toUpperCase());
+        // Recursively apply to nested objects
+        newObj[newKey] = typeof value === 'object' && value !== null && !Array.isArray(value) ? toCamelCaseKeys(value) : value;
+    }
+    return newObj;
+};
+
+export { toCamelCaseKeys };

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import { createAttr } from './component/createAttr.js';
+export { createStyle, createStyleReact } from './component/createStyle.js';
+import { createContent } from './component/createContent.js';
+import { createClass } from './component/createClass.js';
+export { createStateOrContext } from './component/createStateOrContext.js';
+
+const createAttrReact = createAttr;
+const createContentReact = createContent;
+const createClassReact = createClass;
+
+export { createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact };

package/dist/types/index.d.ts

@@ -0,0 +1,42 @@
+declare const createAttr: (obj: {
+    [key: string]: string | number;
+}) => {
+    [key: string]: string | number;
+} | undefined;
+
+declare const createStyle: (obj: {
+    [key: string]: string | number;
+}) => {
+    [key: string]: string | number;
+};
+declare const createStyleReact: (obj: {
+    [key: string]: string | number;
+}) => {
+    [key: string]: any;
+};
+
+declare const createContent: (content: string) => string;
+
+declare const createClass: (obj: {
+    [key: string]: boolean | undefined;
+}) => string;
+
+declare const createStateOrContext: (obj: {
+    [key: string]: any;
+}) => {
+    [key: string]: any;
+};
+
+declare const createAttrReact: (obj: {
+    [key: string]: string | number;
+}) => {
+    [key: string]: string | number;
+} | undefined;
+
+declare const createContentReact: (content: string) => string;
+
+declare const createClassReact: (obj: {
+    [key: string]: boolean | undefined;
+}) => string;
+
+export { createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact, createStateOrContext, createStyle, createStyleReact };

package/package.json

@@ -1,18 +1,27 @@
 {
   "name": "@gem-sdk/system",
-  "version": "1.58.0-dev.134",
+  "version": "1.58.0-dev.137",
   "license": "MIT",
   "sideEffects": false,
   "main": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
+    "cleanup": "rimraf es dist lib",
+    "prebuild": "yarn cleanup",
+    "pre:publish": "node ./../../helpers/convert-publish.js -p",
+    "post:publish": "node ./../../helpers/convert-publish.js",
+    "watch": "rollup -c ./../../helpers/rollup.config.mjs -w",
+    "build": "rollup -c ./../../helpers/rollup.config.mjs --environment NODE_ENV:production",
+    "lint": "eslint ./src --ext .tsx,.ts,.gql",
     "test": "jest -c ./../../helpers/jest.config.ts",
+    "format": "prettier --write \"./src/**/*.{ts,tsx}\"",
     "type-check": "yarn tsc --noEmit"
   },
-  "dependencies": {},
-  "devDependencies": {
-    "@gem-sdk/core": "1.58.0-dev.134"
-  }
+  "dependencies": {
+    "@gem-sdk/core": "1.58.0-dev.137"
+  },
+  "devDependencies": {}
 }

package/src/component/Research.txt

@@ -0,0 +1,53 @@
+<div id={`shopify-text-element-${builderProps?.uid}`} data-product-id={currentProductId}>
+  {!product ? null : setting?.linkProduct ? (
+    <Link href={destination} title={product?.title}>
+      <Text
+        builderProps={builderProps}
+        styles={styles}
+        setting={{ ...setting, text: product.title, excludeFlex: true }}
+      />
+    </Link>
+  ) : (
+    <Text
+      builderProps={builderProps}
+      styles={styles}
+      setting={{ ...setting, text: product.title, excludeFlex: true }}
+    />
+  )}
+</div>
+
+<div>
+  <If>
+
+  </If>
+  <For>
+    
+  </For>
+</div>
+
+{%- unless product -%}
+  <p>${getStaticLocale('ProductTitle', 'product_not_found')}</p>
+{%- else -%}
+  ${
+    setting?.linkProduct
+      ? `
+    <a href="{{ product.url }}" title="{{ product.title }}" class="gp-product-title-link-wrapper">
+    ${Text({
+      styles: styles,
+      setting: { ...setting, text: '{{ product.title }}', excludeFlex: true },
+      advanced: advanced,
+      builderProps
+    })}
+    </a>
+  `
+      : `
+    ${Text({
+      styles: styles,
+      setting: { ...setting, text: '{{ product.title }}', excludeFlex: true },
+      advanced: advanced,
+      className: 'gp-product-title',
+      builderProps
+    })}
+  `
+  }
+{%- endunless -%}

package/src/component/__tests__/createAttr.test.ts

@@ -0,0 +1,62 @@
+import { describe, test, expect, beforeEach, jest } from '@jest/globals';
+import { createAttr } from '../createAttr';
+
+// Mock console.error to capture error messages
+global.console.error = jest.fn();
+
+describe('createAttr', () => {
+  beforeEach(() => {
+    // Clear the console.error mock before each test
+    (console.error as jest.Mock).mockClear();
+  });
+
+  test('should log error for key without "data-gp-" prefix', () => {
+    createAttr({ invalidKey: 'some value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute key: "invalidKey". Must start with "data-gp-".',
+    );
+  });
+
+  test('should log error for key with uppercase letters', () => {
+    createAttr({ 'data-gp-UppercaseKey': 'some value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute key: "data-gp-UppercaseKey". Must not contain uppercase letters.',
+    );
+  });
+
+  test('should log error for nested object', () => {
+    createAttr({ 'data-gp-nested': { fontSize: '12px' } } as any);
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid nested attribute for key "data-gp-nested". Nested objects are not supported.',
+    );
+  });
+
+  test('should log error for invalid value type', () => {
+    createAttr({ 'data-gp-invalidType': true as any });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute value for key "data-gp-invalidType": true. Must be a string or number.',
+    );
+  });
+
+  test('should handle multiple errors in one call', () => {
+    createAttr({
+      invalidKey: 'some value', // Invalid prefix
+      'data-gp-UppercaseKey': 'some value', // Uppercase in key
+      'data-gp-nested': { fontSize: '12px' }, // Nested object
+      'data-gp-invalidType': true as any, // Invalid value type
+    } as any);
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute key: "invalidKey". Must start with "data-gp-".',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute key: "data-gp-UppercaseKey". Must not contain uppercase letters.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid nested attribute for key "data-gp-nested". Nested objects are not supported.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid attribute value for key "data-gp-invalidType": true. Must be a string or number.',
+    );
+  });
+});