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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/examples/components/text/e2e-tests/DemoText.spec.tsx

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import type { TextProps } from "../DemoText";
+import DemoText from "../DemoText"
+import DemoTextLiquid from "../DemoText.liquid"
+
+test('should work', async ({ mount }, testInfo) => {
+  const props: TextProps = {
+    product: {
+      id: "1"
+    },
+    text: "Demo test"
+  }
+
+  const component = await mount((
+    <div>
+      <div className='react-el'><DemoText {...props}/></div>
+      <div className='liquid-el'><div dangerouslySetInnerHTML={{__html: DemoTextLiquid(props)}}></div></div>
+    </div>
+    ));
+  
+  await expect(component.locator('.react-el')).toHaveScreenshot(`${testInfo.title}.png`);
+  await expect(component.locator('.liquid-el')).toHaveScreenshot(`${testInfo.title}.png`);
+});

package/src/examples/components/text/e2e-tests/DemoText.tsx

@@ -0,0 +1,23 @@
+import type { E2ETests } from '../../../../component/types';
+import type { TextProps } from '../DemoText';
+import DemoTextReact from '../DemoText';
+import DemoTextLiquid from '../DemoText.liquid';
+
+export const e2eDemoText = (): E2ETests => {
+  return {
+    'DemoText basic': async () => {
+      const props: TextProps = {
+        product: {
+          id: '1',
+        },
+        text: 'Demo test',
+      };
+
+      return {
+        props,
+        reactComponent: DemoTextReact,
+        liquidComponent: DemoTextLiquid,
+      };
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,34 @@
+import { createAttr } from './component/createAttr';
+const createAttrReact = createAttr;
+
+import { createStyle, createStyleReact } from './component/createStyle';
+
+import { createContent } from './component/createContent';
+const createContentReact = createContent;
+
+import { createClass } from './component/createClass';
+const createClassReact = createClass;
+
+import { createStateOrContext } from './component/createStateOrContext';
+
+import { Liquid, If, LiquidIf, For, LiquidFor } from './component/template';
+
+export {
+  // Attr
+  createAttr,
+  createAttrReact,
+  createStyle,
+  createStyleReact,
+  createContent,
+  createContentReact,
+  createClass,
+  createClassReact,
+  createStateOrContext,
+
+  // Template
+  Liquid,
+  If,
+  LiquidIf,
+  For,
+  LiquidFor,
+};

package/src/validator/README.md

@@ -0,0 +1 @@
+Đây là folder chưa các func validate component setting

package/dist/cjs/component/template.js

@@ -1,89 +0,0 @@
-'use strict';
-
-/*
-
-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>
-  `)
-}
-
-*/ const Liquid = (code)=>{
-    return code;
-};
-const For = (items, renderFn)=>{
-    return items.map((item, index)=>renderFn(item, index));
-};
-const LiquidFor = (c, t)=>{
-    return `{% for ${c} %}${typeof t === 'string' ? t : t()}{% endfor %}`;
-};
-const If = (condition, trueResult, falseResult)=>{
-    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
-    }
-};
-const LiquidIf = (c, t, f)=>`{% if ${c} %}${typeof t === 'string' ? t : t()}${f ? `{% else %}${typeof f === 'string' ? f : f?.()}` : ''}{% endif %}`;
-
-exports.For = For;
-exports.If = If;
-exports.Liquid = Liquid;
-exports.LiquidFor = LiquidFor;
-exports.LiquidIf = LiquidIf;