@gem-sdk/system 1.56.2

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;
+};

package/src/component/createStateOrContext.ts

@@ -0,0 +1,70 @@
+export const createStateOrContext = (obj: { [key: string]: any }) => {
+  const isDevOrStaging =
+    !process.env.APP_ENV ||
+    process.env.APP_ENV === 'development' ||
+    process.env.APP_ENV === 'staging';
+
+  const isValid = (value: any) => {
+    // Ensure value is neither undefined, null, empty string, nor false (except 0)
+    return value !== undefined && value !== null && value !== '' && value !== false;
+  };
+
+  const validateKey = (key: string) => {
+    // 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: any, depth: number) => {
+    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;
+};

package/src/component/createStyle.ts

@@ -0,0 +1,53 @@
+import { toCamelCaseKeys } from './utils/toCamelCaseKeys';
+
+/**
+ * Properties to ignore with explanations for each
+ */
+const ignoredProperties: { [key: string]: string } = {
+  ignore: 'This property is not supported in the current styling setup.',
+};
+
+export const createStyle = (obj: { [key: string]: string | number }) => {
+  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;
+};
+
+export const createStyleReact = (obj: { [key: string]: string | number }) => {
+  return toCamelCaseKeys(createStyle(obj));
+};

package/src/component/template.ts

@@ -0,0 +1,119 @@
+/*
+
+Liquid in liquid.ts
+<div>
+Liquid(`
+  {%-if productSelectedVariant == empty or productSelectedVariant == null -%}
+    {%- assign productSelectedVariant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+  {%-if variant == empty or variant == null -%}
+    {%- assign variant = product.selected_or_first_available_variant -%}
+  {%- endif -%}
+`)
+</div>
+
+IF in tsx & liquid.ts
+<div {...attrs}>
+  {
+    If(product.id != "", (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ), (
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    ))
+  }
+</div>
+
+LiquidIF in liquid.ts
+<div {...attrs}>
+  {
+    LiquidIf("product.quanity > 0", `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `, `
+      <label className={classes} style={styles}>
+        {content}
+      </label>
+    `)
+  }
+</div>
+
+For in tsx & liquid.ts
+{
+  For(numbers, (item, index) => (
+    <div key={index}>
+      {index + 1}: Số {item}
+    </div>
+  ))
+}
+
+LiquidFor in tsx & liquid.ts
+{
+  LiquidFor('(item, index) in items', `
+    <div key="{{ forloop.index }}">
+      {{ forloop.index + 1}}: Số {{item}}
+    </div>
+  `)
+}
+
+*/
+type CallbackCondition = () => JSX.Element | string;
+
+export const Liquid = (code: string)=> {
+  return code
+}
+export const For = <T,>(
+  items: T[], 
+  renderFn: (item: T, index: number) => JSX.Element
+): JSX.Element[] => {
+  return items.map((item, index) => renderFn(item, index));
+};
+
+export const LiquidFor = (
+  c: string,
+  t: string | CallbackCondition
+): string => {
+  return `{% for ${c} %}${(typeof t === 'string' ? t : t())}{% endfor %}`
+};
+
+export const If = (
+  condition: boolean | null | undefined,
+  trueResult: string | JSX.Element | CallbackCondition,
+  falseResult?: string | JSX.Element | CallbackCondition
+): JSX.Element | string | null => {
+  if (condition) {
+    // Trả về kết quả đúng nếu điều kiện là true
+    return typeof trueResult === 'function' ? trueResult() : trueResult;
+  } else {
+    // Trả về kết quả sai nếu điều kiện là false
+    return falseResult
+      ? typeof falseResult === 'function'
+        ? falseResult()
+        : falseResult
+      : null; // Nếu không có falseResult, trả về null
+  }
+};
+
+
+export const LiquidIf = (
+  c: string,
+  t: string | CallbackCondition,
+  f?: string | CallbackCondition,
+) => `{% if ${c} %}${(typeof t === 'string' ? t : t())}${f ? `{% else %}${(typeof f === 'string' ? f : f?.())}` : ''}{% endif %}`;
+
+
+export const Unless = (
+  condition: boolean | null | undefined,
+  trueResult: string | JSX.Element | CallbackCondition,
+  falseResult?: string | JSX.Element | CallbackCondition
+) => If(!condition, trueResult, falseResult);
+
+export const LiquidUnless = (
+  c: string,
+  t: string | CallbackCondition,
+  f?: string | CallbackCondition,
+) => `{% unless ${c} %}${(typeof t === 'string' ? t : t())}${f ? `{% else %}${(typeof f === 'string' ? f : f?.())}` : ''}{% endunless %}`;

package/src/component/types.ts

@@ -0,0 +1,9 @@
+export type E2ETestCase = {
+  props: object;
+  reactComponent: any;
+  liquidComponent: any;
+};
+
+export type E2ETests = {
+  [key: string]: () => Promise<E2ETestCase>;
+};