@gem-sdk/system 1.58.0-dev.134 → 1.58.0-dev.135

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

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

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

@@ -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/validator/README.md

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