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

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

@@ -1,63 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,119 +0,0 @@
-/*
-
-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

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

package/src/component/utils/__tests__/toCamelCaseKeys.test.ts

@@ -1,79 +0,0 @@
-import { describe, test, expect } from '@jest/globals';
-
-import { toCamelCaseKeys } from '../toCamelCaseKeys';
-
-describe('toCamelCaseKeys', () => {
-  test('should convert hyphenated keys to camelCase', () => {
-    const input = {
-      'background-color': 'blue',
-      'font-size': '12px',
-      padding: 10,
-    };
-    const expectedOutput = {
-      backgroundColor: 'blue',
-      fontSize: '12px',
-      padding: 10,
-    };
-    expect(toCamelCaseKeys(input)).toEqual(expectedOutput);
-  });
-
-  test('should keep keys with "--" prefix as-is', () => {
-    const input = {
-      '--custom-var': '20px',
-      '--another-var': '15px',
-    };
-    const expectedOutput = {
-      '--custom-var': '20px',
-      '--another-var': '15px',
-    };
-    expect(toCamelCaseKeys(input)).toEqual(expectedOutput);
-  });
-
-  test('should convert hyphenated keys in nested objects to camelCase', () => {
-    const input = {
-      nested: {
-        'border-radius': '5px',
-        'text-align': 'center',
-      },
-    };
-    const expectedOutput = {
-      nested: {
-        borderRadius: '5px',
-        textAlign: 'center',
-      },
-    };
-    expect(toCamelCaseKeys(input)).toEqual(expectedOutput);
-  });
-
-  test('should handle mixed keys with hyphens and "--" prefix correctly', () => {
-    const input = {
-      'background-color': 'blue',
-      '--custom-var': '20px',
-      nested: {
-        'font-size': '12px',
-        '--nested-var': '5px',
-      },
-    };
-    const expectedOutput = {
-      backgroundColor: 'blue',
-      '--custom-var': '20px',
-      nested: {
-        fontSize: '12px',
-        '--nested-var': '5px',
-      },
-    };
-    expect(toCamelCaseKeys(input)).toEqual(expectedOutput);
-  });
-
-  test('should leave keys without hyphens or "--" prefix unchanged', () => {
-    const input = {
-      padding: 10,
-      margin: '5px',
-    };
-    const expectedOutput = {
-      padding: 10,
-      margin: '5px',
-    };
-    expect(toCamelCaseKeys(input)).toEqual(expectedOutput);
-  });
-});

package/src/component/utils/toCamelCaseKeys.ts

@@ -1,20 +0,0 @@
-export const toCamelCaseKeys = (obj: { [key: string]: any }): { [key: string]: any } => {
-  const newObj: { [key: string]: any } = {};
-
-  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;
-};

package/src/e2e-tests/README.md

@@ -1 +0,0 @@
-Đây là folder chưa các e2e-tests compare react vs liquid

package/src/examples/components/text/DemoText.liquid.ts

@@ -1,49 +0,0 @@
-import {
-  createAttr,
-  createClass,
-  createContent,
-  createStateOrContext,
-  createStyle,
-  If,
-} from '../../../index';
-import { getAttr } from './common/getAttr';
-import { getStyle } from './common/getStyle';
-import { globalTypoClasses } from './common/globalTypoClasses';
-import type { TextProps } from './DemoText';
-import { template } from '@gem-sdk/core';
-
-const Text = ({ product, text }: TextProps) => {
-  const state = createStateOrContext({
-    productId: product.id,
-  });
-
-  const attrs = createAttr({
-    ...getAttr({ product }),
-  });
-  const styles = createStyle({
-    ...getStyle(),
-  });
-  const classes = createClass({
-    ...globalTypoClasses(),
-  });
-
-  const content = createContent(text);
-
-  return template`
-    <div ${attrs} gp-data="${state}">
-      ${
-        If(product.id != "", `
-          <label class="${{ classes }}" style="${styles}">
-            ${content}
-          </label>
-        `, `
-          <label class="${{ classes }}" style="${styles}">
-            ${content}
-          </label>
-        `)
-      }
-    </div>
-  `;
-};
-
-export default Text;

package/src/examples/components/text/DemoText.tsx

@@ -1,50 +0,0 @@
-import {
-  createAttrReact,
-  createClassReact,
-  createContentReact,
-  createStyleReact,
-  If,
-} from '../../../index';
-import { globalTypoClasses } from './common/globalTypoClasses';
-
-export type TextProps = {
-  product: {
-    id: string;
-  };
-  text: string;
-};
-
-const Text: React.FC<TextProps> = ({ product, text }) => {
-  const attrs = createAttrReact({
-    'data-gp-product-id': product.id,
-  });
-  const styles = createStyleReact({
-    'font-size': '16px',
-  });
-
-  const typoClasses = globalTypoClasses();
-  const classes = createClassReact({
-    'gp-text': true,
-    ...typoClasses,
-  });
-
-  const content = createContentReact(text);
- 
-  return (
-    <div {...attrs}>
-      {
-        If(product.id != "", (
-          <label className={classes} style={styles}>
-            {content}
-          </label>
-        ), (
-          <label className={classes} style={styles}>
-            {content}
-          </label>
-        ))
-      }
-    </div>
-  );
-};
-
-export default Text;

package/src/examples/components/text/common/__tests__/globalTypoClasses.test.ts

@@ -1,11 +0,0 @@
-import { describe, test, expect } from '@jest/globals';
-import { globalTypoClasses } from '../globalTypoClasses';
-
-describe('globalTypoClasses', () => {
-  test('Test case 1', () => {
-    const classes = globalTypoClasses();
-    expect(classes).toEqual({
-      'gp-global-h1': true,
-    });
-  });
-});

package/src/examples/components/text/common/getAttr.ts

@@ -1,7 +0,0 @@
-import type { TextProps } from '../DemoText';
-
-export const getAttr = ({ product }: { product: TextProps['product'] }) => {
-  return {
-    'data-gp-product-id': product.id,
-  };
-};

package/src/examples/components/text/common/getStyle.ts

@@ -1,5 +0,0 @@
-export const getStyle = () => {
-  return {
-    'font-size': '16px',
-  };
-};

package/src/examples/components/text/common/globalTypoClasses.ts

@@ -1,5 +0,0 @@
-export const globalTypoClasses = (): Record<string, boolean> => {
-  return {
-    'gp-global-h1': true,
-  };
-};