@gem-sdk/system 1.56.2

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