@gem-sdk/system 1.58.0-dev.142 → 1.58.0-dev.143

package/dist/cjs/index.js

@@ -5,7 +5,6 @@ var createStyle = require('./component/createStyle.js');
 var createContent = require('./component/createContent.js');
 var createClass = require('./component/createClass.js');
 var createStateOrContext = require('./component/createStateOrContext.js');
-var template = require('./component/template.js');
 
 const createAttrReact = createAttr.createAttr;
 const createContentReact = createContent.createContent;
@@ -17,11 +16,6 @@ exports.createStyleReact = createStyle.createStyleReact;
 exports.createContent = createContent.createContent;
 exports.createClass = createClass.createClass;
 exports.createStateOrContext = createStateOrContext.createStateOrContext;
-exports.For = template.For;
-exports.If = template.If;
-exports.Liquid = template.Liquid;
-exports.LiquidFor = template.LiquidFor;
-exports.LiquidIf = template.LiquidIf;
 exports.createAttrReact = createAttrReact;
 exports.createClassReact = createClassReact;
 exports.createContentReact = createContentReact;

package/dist/esm/index.js

@@ -3,7 +3,6 @@ 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';
-export { For, If, Liquid, LiquidFor, LiquidIf } from './component/template.js';
 
 const createAttrReact = createAttr;
 const createContentReact = createContent;

package/dist/types/index.d.ts

@@ -27,13 +27,6 @@ declare const createStateOrContext: (obj: {
     [key: string]: any;
 };
 
-type CallbackCondition = () => JSX.Element | string;
-declare const Liquid: (code: string) => string;
-declare const For: <T>(items: T[], renderFn: (item: T, index: number) => JSX.Element) => JSX.Element[];
-declare const LiquidFor: (c: string, t: string | CallbackCondition) => string;
-declare const If: (condition: boolean | null | undefined, trueResult: string | JSX.Element | CallbackCondition, falseResult?: string | JSX.Element | CallbackCondition) => JSX.Element | string | null;
-declare const LiquidIf: (c: string, t: string | CallbackCondition, f?: string | CallbackCondition) => string;
-
 declare const createAttrReact: (obj: {
     [key: string]: string | number;
 }) => {
@@ -46,4 +39,4 @@ declare const createClassReact: (obj: {
     [key: string]: boolean | undefined;
 }) => string;
 
-export { For, If, Liquid, LiquidFor, LiquidIf, createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact, createStateOrContext, createStyle, createStyleReact };
+export { createAttr, createAttrReact, createClass, createClassReact, createContent, createContentReact, createStateOrContext, createStyle, createStyleReact };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gem-sdk/system",
-  "version": "1.58.0-dev.142",
+  "version": "1.58.0-dev.143",
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
+  "main": "src/index.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "cleanup": "rimraf es dist lib",
@@ -20,17 +21,7 @@
     "type-check": "yarn tsc --noEmit"
   },
   "dependencies": {
-    "@gem-sdk/core": "1.58.0-dev.142"
+    "@gem-sdk/core": "1.58.0-dev.135"
   },
-  "devDependencies": {},
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
-    }
-  }
+  "devDependencies": {}
 }

package/src/component/__tests__/ template.test.tsx

@@ -0,0 +1,76 @@
+import { describe, test, expect, jest } from '@jest/globals';
+import { For, If, Liquid, LiquidFor, LiquidIf, Unless, LiquidUnless } from '../template';
+
+// Mock callback
+const mockCallback = jest.fn(() => '<div>Mock Element</div>');
+
+describe('Testing utility functions', () => {
+  test('Liquid should return the input string', () => {
+    const input = "Hello, World!";
+    const result = Liquid(input);
+    expect(result).toBe(input);
+  });
+ 
+  test('For should render a list of JSX elements', () => {
+    const items = [1, 2, 3];
+    const renderFn = (item: number) => <div key={item}>Item {item}</div>;
+    const result = For(items, renderFn);
+    expect(result).toHaveLength(3);
+    expect(result[0]).toEqual(<div key={items[0]}>Item {items[0]}</div>);
+  });
+
+  test('LiquidFor should render a Liquid template', () => {
+    const code = "item in items";
+    const template = "Content";
+    const result = LiquidFor(code, template);
+    expect(result).toBe(`{% for ${code} %}${template}{% endfor %}`);
+  });
+
+  test('If should return trueResult when condition is true', () => {
+    const result = If(true, "Yes", "No");
+    expect(result).toBe("Yes");
+  });
+
+  test('If should return falseResult when condition is false', () => {
+    const result = If(false, "Yes", "No");
+    expect(result).toBe("No");
+  });
+
+  test('If should handle JSX.Element', () => {
+    const result = If(true, <div>True</div>, <div>False</div>);
+    expect(result).toEqual(<div>True</div>);
+  });
+
+  test('LiquidIf should render a correct Liquid if-else template', () => {
+    const condition = "x > 10";
+    const trueResult = "Greater";
+    const falseResult = "Smaller";
+    const result = LiquidIf(condition, trueResult, falseResult);
+    expect(result).toBe(`{% if ${condition} %}${trueResult}{% else %}${falseResult}{% endif %}`);
+  });
+
+  test('Unless should reverse the condition', () => {
+    const result = Unless(false, "True", "False");
+    expect(result).toBe("True");
+  });
+
+  test('LiquidUnless should render a correct Liquid unless-else template', () => {
+    const condition = "x > 10";
+    const trueResult = "Greater";
+    const falseResult = "Smaller";
+    const result = LiquidUnless(condition, trueResult, falseResult);
+    expect(result).toBe(`{% unless ${condition} %}${trueResult}{% else %}${falseResult}{% endunless %}`);
+  });
+
+  test('If should handle callback conditions', () => {
+    const trueResult = mockCallback;
+    If(true, trueResult);
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  test('LiquidIf should handle callback conditions', () => {
+    const condition = "x > 10";
+    LiquidIf(condition, mockCallback);
+    expect(mockCallback).toHaveBeenCalledTimes(2); // Call count should include other tests
+  });
+});

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.',
+    );
+  });
+});

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

@@ -0,0 +1,68 @@
+import { describe, test, expect, beforeAll, afterEach, jest } from '@jest/globals';
+
+// Import the function
+import { createClass } from '../createClass';
+
+// Declare console.error as a Jest mock
+beforeAll(() => {
+  global.console.error = jest.fn();
+});
+
+afterEach(() => {
+  // Clear the console.error mock after each test
+  (console.error as jest.Mock).mockClear();
+});
+
+describe('createClass', () => {
+  test('should return empty string and log error for invalid input', () => {
+    expect(createClass(null as any)).toBe('');
+    expect(console.error).toHaveBeenCalledWith('Expected an object as input.');
+
+    expect(createClass(123 as any)).toBe('');
+    expect(console.error).toHaveBeenCalledWith('Expected an object as input.');
+  });
+
+  test('should log an error for class names exceeding 30 characters', () => {
+    createClass({ averyverylongclassnameexceeding30characters: true });
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "averyverylongclassnameexceeding30characters" exceeds the maximum length of 30 characters.',
+    );
+  });
+
+  test('should log an error for class names with spaces', () => {
+    createClass({ 'class with space': true });
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "class with space" should not contain spaces.',
+    );
+  });
+
+  test('should log an error for class names with uppercase letters', () => {
+    createClass({ ClassWithUpperCase: true });
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "ClassWithUpperCase" should be in lowercase.',
+    );
+  });
+
+  test('should not log any errors for valid class names', () => {
+    createClass({ validclassname: true, anotherclass: true });
+    expect(console.error).not.toHaveBeenCalled();
+  });
+
+  test('should handle multiple errors in one call', () => {
+    createClass({
+      ValidClassWithUpper: true,
+      'class with space': true,
+      averyverylongclassnameexceeding30characters: true,
+    });
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "ValidClassWithUpper" should be in lowercase.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "class with space" should not contain spaces.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Class name "averyverylongclassnameexceeding30characters" exceeds the maximum length of 30 characters.',
+    );
+  });
+});

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

@@ -0,0 +1,52 @@
+import { describe, test, expect, beforeEach, jest } from '@jest/globals';
+
+import { createContent } from '../createContent';
+
+// Mock console.error to capture error messages
+global.console.error = jest.fn();
+
+describe('createContent', () => {
+  beforeEach(() => {
+    // Clear the console.error mock before each test
+    (console.error as jest.Mock).mockClear();
+  });
+
+  test('should return empty string and log error if content is not a string', () => {
+    expect(createContent(12345 as any)).toBe('');
+    expect(console.error).toHaveBeenCalledWith('Invalid content type: Content must be a string.');
+
+    expect(createContent({} as any)).toBe('');
+    expect(console.error).toHaveBeenCalledWith('Invalid content type: Content must be a string.');
+  });
+
+  test('should return empty string and log error for content with invalid {{}} pattern', () => {
+    expect(createContent('{{Hello}} there')).toBe('');
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".',
+    );
+
+    expect(createContent('Welcome {{World}}')).toBe('');
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid content format: "{{}}" placeholders must not contain only letters, e.g., "{{Hello}}".',
+    );
+  });
+
+  test('should return valid content without errors', () => {
+    expect(createContent('This is valid content')).toBe('This is valid content');
+    expect(console.error).not.toHaveBeenCalled();
+
+    expect(createContent('Content with {{123}} is valid')).toBe('Content with {{123}} is valid');
+    expect(console.error).not.toHaveBeenCalled();
+
+    expect(createContent('Mix of {{valid1}} and {{valid2}}')).toBe(
+      'Mix of {{valid1}} and {{valid2}}',
+    );
+    expect(console.error).not.toHaveBeenCalled();
+  });
+
+  test('should pass with valid {{}} pattern containing more than just letters', () => {
+    const content = '{{ product.title | t }}';
+    expect(createContent(content)).toBe(content);
+    expect(console.error).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,129 @@
+import { describe, test, expect, beforeEach, jest } from '@jest/globals';
+
+import { createStateOrContext } from '../createStateOrContext';
+
+// Mock console.error to capture error messages
+global.console.error = jest.fn();
+
+describe('createStateOrContext', () => {
+  beforeEach(() => {
+    // Clear the console.error mock before each test
+    (console.error as jest.Mock).mockClear();
+  });
+
+  test('should log error for key length exceeding 20 characters', () => {
+    createStateOrContext({ thisKeyIsWayTooLongForOurRequirements: 'value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "thisKeyIsWayTooLongForOurRequirements": Key length must not exceed 20 characters.',
+    );
+  });
+
+  test('should log error for key containing special characters', () => {
+    createStateOrContext({ invalid_key: 'value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "invalid_key": Key must contain only alphabetic characters (no numbers or special characters).',
+    );
+  });
+
+  test('should log error for key containing numbers', () => {
+    createStateOrContext({ invalidKey1: 'value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "invalidKey1": Key must contain only alphabetic characters (no numbers or special characters).',
+    );
+  });
+
+  test('should log error for key not in camelCase format', () => {
+    createStateOrContext({ Invalidkey: 'value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "Invalidkey": Key must be in camelCase format.',
+    );
+  });
+
+  test('should log error for nested object deeper than 3 levels', () => {
+    createStateOrContext({
+      levelOne: {
+        levelTwo: {
+          levelThree: {
+            tooDeepKey: 'too deep',
+          },
+        },
+      },
+    });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid structure: Data must not be nested deeper than 3 levels.',
+    );
+  });
+
+  test('should log error for invalid values (undefined, null, blank, false)', () => {
+    createStateOrContext({
+      validKey: 'value', // Valid
+      undefinedKey: undefined, // Invalid
+      nullKey: null, // Invalid
+      emptyStringKey: '', // Invalid
+      falseKey: false, // Invalid
+    });
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid value for key "undefinedKey": Value must not be undefined, null, blank, or false.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid value for key "nullKey": Value must not be undefined, null, blank, or false.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid value for key "emptyStringKey": Value must not be undefined, null, blank, or false.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid value for key "falseKey": Value must not be undefined, null, blank, or false.',
+    );
+  });
+
+  test('should not log any errors for valid keys and values', () => {
+    createStateOrContext({
+      validKey: 'value',
+      anotherValidKey: 123,
+      nestedObject: {
+        validNestedKey: 'nestedValue',
+        anotherLevel: {
+          validKey: 'value',
+        },
+      },
+    });
+    expect(console.error).not.toHaveBeenCalled();
+  });
+
+  test('should handle multiple errors in one call', () => {
+    createStateOrContext({
+      thisKeyIsWayTooLongForOurRequirements: 'value', // Key length
+      invalid_key: 'value', // Special character
+      invalidKey1: 'value', // Contains number
+      InvalidCamelCase: 'value', // Not camelCase
+      validKey: {
+        nestedTooDeep: {
+          anotherLevel: {
+            tooDeepKey: 'too deep', // Exceeds depth
+          },
+        },
+      },
+      undefinedValue: undefined, // Invalid value
+    });
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "thisKeyIsWayTooLongForOurRequirements": Key length must not exceed 20 characters.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "invalid_key": Key must contain only alphabetic characters (no numbers or special characters).',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "invalidKey1": Key must contain only alphabetic characters (no numbers or special characters).',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "InvalidCamelCase": Key must be in camelCase format.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid structure: Data must not be nested deeper than 3 levels.',
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid value for key "undefinedValue": Value must not be undefined, null, blank, or false.',
+    );
+  });
+});

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

@@ -0,0 +1,63 @@
+import { describe, test, expect, beforeEach, jest } from '@jest/globals';
+
+// Import the function
+import { createStyle } from '../createStyle';
+
+global.console.error = jest.fn();
+
+describe('createStyle', () => {
+  beforeEach(() => {
+    // Clear the mock for console.error
+    (console.error as jest.Mock).mockClear();
+  });
+
+  test('should log error for ignored property', () => {
+    createStyle({ ignore: 'some value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Ignored property detected: "ignore". This property is not supported in the current styling setup.',
+    );
+  });
+
+  test('should log error for invalid property type', () => {
+    createStyle({ 'valid-property': true as any });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid style value for "valid-property": true. Must be a string or number.',
+    );
+  });
+
+  test('should not log any errors for valid keys and values', () => {
+    createStyle({
+      'background-color': 'blue',
+      padding: 10,
+    });
+    expect(console.error).not.toHaveBeenCalled();
+  });
+
+  test('should log error for key containing uppercase letters', () => {
+    createStyle({ fontSize: '14px' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "fontSize": Keys must be lowercase letters and may only contain "-".',
+    );
+  });
+
+  test('should log error for key containing numbers', () => {
+    createStyle({ border1: 'solid' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "border1": Keys must be lowercase letters and may only contain "-".',
+    );
+  });
+
+  test('should log error for key containing special characters other than "-"', () => {
+    createStyle({ invalid_key: 'value' });
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid key "invalid_key": Keys must be lowercase letters and may only contain "-".',
+    );
+  });
+
+  test('should log error for nested objects', () => {
+    createStyle({ nestedProp: { width: '100px' } } as any);
+    expect(console.error).toHaveBeenCalledWith(
+      'Invalid nested object for property "nestedProp". Nested objects are not supported.',
+    );
+  });
+});

package/src/component/createAttr.ts

@@ -0,0 +1,44 @@
+export const createAttr = (obj: { [key: string]: string | number }) => {
+  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;
+};

package/src/component/createClass.ts

@@ -0,0 +1,48 @@
+type ClassValue = Record<string, boolean | undefined | null> | string | null | undefined;
+
+function toVal(mix: ClassValue) {
+  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: ClassValue[]) {
+  return classes.map(toVal).filter(Boolean).join(' ');
+}
+
+export const createClass = (obj: { [key: string]: boolean | undefined }): string => {
+  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);
+};

package/src/component/createContent.ts

@@ -0,0 +1,20 @@
+export const createContent = (content: string): string => {
+  // 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;
+};