@gem-sdk/system 1.58.0-dev.137 → 1.58.0-dev.139

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@gem-sdk/system",
-  "version": "1.58.0-dev.137",
+  "version": "1.58.0-dev.139",
   "license": "MIT",
   "sideEffects": false,
-  "main": "src/index.ts",
+  "main": "dist/cjs/index.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "cleanup": "rimraf es dist lib",
@@ -21,7 +20,17 @@
     "type-check": "yarn tsc --noEmit"
   },
   "dependencies": {
-    "@gem-sdk/core": "1.58.0-dev.137"
+    "@gem-sdk/core": "1.58.0-dev.135"
   },
-  "devDependencies": {}
+  "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"
+    }
+  }
 }

package/CHANGELOG.md

@@ -1,16 +0,0 @@
-# @gem-sdk/system
-
-## 1.58.0-dev.135
-
-### Patch Changes
-
-- [`278d253`](https://github.com/gempages/web-builder-elements/commit/278d253fd16b9dc72140c075e7ce8a4e6bce0445) Thanks [@haicaodac](https://github.com/haicaodac)! - init pkg
-
-- Updated dependencies [[`808d1db`](https://github.com/gempages/web-builder-elements/commit/808d1dbe7181e004111e7e31e996a78b9f98c011)]:
-  - @gem-sdk/core@1.58.0-dev.135
-
-## 1.58.0-dev.134
-
-### Patch Changes
-
-- [#9513](https://github.com/gempages/web-builder-elements/pull/9513) [`0d6a932`](https://github.com/gempages/web-builder-elements/commit/0d6a9324fba356bc1217190c09dc57c2ee243120) Thanks [@github-actions](https://github.com/apps/github-actions)! - trigger build

package/src/component/Research.txt

@@ -1,53 +0,0 @@
-<div id={`shopify-text-element-${builderProps?.uid}`} data-product-id={currentProductId}>
-  {!product ? null : setting?.linkProduct ? (
-    <Link href={destination} title={product?.title}>
-      <Text
-        builderProps={builderProps}
-        styles={styles}
-        setting={{ ...setting, text: product.title, excludeFlex: true }}
-      />
-    </Link>
-  ) : (
-    <Text
-      builderProps={builderProps}
-      styles={styles}
-      setting={{ ...setting, text: product.title, excludeFlex: true }}
-    />
-  )}
-</div>
-
-<div>
-  <If>
-
-  </If>
-  <For>
-    
-  </For>
-</div>
-
-{%- unless product -%}
-  <p>${getStaticLocale('ProductTitle', 'product_not_found')}</p>
-{%- else -%}
-  ${
-    setting?.linkProduct
-      ? `
-    <a href="{{ product.url }}" title="{{ product.title }}" class="gp-product-title-link-wrapper">
-    ${Text({
-      styles: styles,
-      setting: { ...setting, text: '{{ product.title }}', excludeFlex: true },
-      advanced: advanced,
-      builderProps
-    })}
-    </a>
-  `
-      : `
-    ${Text({
-      styles: styles,
-      setting: { ...setting, text: '{{ product.title }}', excludeFlex: true },
-      advanced: advanced,
-      className: 'gp-product-title',
-      builderProps
-    })}
-  `
-  }
-{%- endunless -%}

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

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

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

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

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

@@ -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/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,40 +0,0 @@
-import {
-  createAttr,
-  createClass,
-  createContent,
-  createStateOrContext,
-  createStyle,
-} 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}">
-      <label class="${{ classes }}" style="${styles}">
-        ${content}
-      </label>
-    </div>
-  `;
-};
-
-export default Text;

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

@@ -1,41 +0,0 @@
-import {
-  createAttrReact,
-  createClassReact,
-  createContentReact,
-  createStyleReact,
-} 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}>
-      <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,
-  };
-};

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

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

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

@@ -1,24 +0,0 @@
-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';
-
-export {
-  createAttr,
-  createAttrReact,
-  createStyle,
-  createStyleReact,
-  createContent,
-  createContentReact,
-  createClass,
-  createClassReact,
-  createStateOrContext,
-};

package/src/validator/README.md

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