feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/arch/responsive-kit/__tests__/components/layout/ResponsiveBox.test.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { ScreenRange } from '../../../src/constant';
+import { ResponsiveBox } from '../../../src/components/layout/ResponsiveBox';
+
+describe('ResponsiveBox', () => {
+  it('should render with default props', () => {
+    const { container } = render(
+      <ResponsiveBox contents={[<div key="1">Test Content</div>]} />,
+    );
+
+    // 检查是否渲染了div元素
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.tagName).toBe('DIV');
+
+    // 检查内容是否正确
+    expect(boxElement.textContent).toBe('Test Content');
+
+    // 默认情况下应该有基本的类名
+    expect(boxElement.className).toContain('w-full');
+    expect(boxElement.className).toContain('flex');
+    expect(boxElement.className).toContain('overflow-hidden');
+    expect(boxElement.className).toContain('flex-col');
+    expect(boxElement.className).toContain('sm:flex-col');
+    expect(boxElement.className).toContain('md:flex-row');
+    expect(boxElement.className).toContain('lg:flex-row');
+  });
+
+  it('should render with column reverse', () => {
+    const { container } = render(
+      <ResponsiveBox
+        contents={[<div key="1">Test Content</div>]}
+        colReverse={true}
+      />,
+    );
+
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.className).toContain('flex-col-reverse');
+    expect(boxElement.className).toContain('sm:flex-col-reverse');
+  });
+
+  it('should render with row reverse', () => {
+    const { container } = render(
+      <ResponsiveBox
+        contents={[<div key="1">Test Content</div>]}
+        rowReverse={true}
+      />,
+    );
+
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.className).toContain('md:flex-row-reverse');
+    expect(boxElement.className).toContain('lg:flex-row-reverse');
+  });
+
+  it('should render with gaps', () => {
+    const { container } = render(
+      <ResponsiveBox
+        contents={[<div key="1">Test Content</div>]}
+        gaps={{
+          [ScreenRange.SM]: 1,
+          [ScreenRange.MD]: 2,
+          [ScreenRange.LG]: 3,
+        }}
+      />,
+    );
+
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.className).toContain('sm:gap-1');
+    expect(boxElement.className).toContain('md:gap-2');
+    expect(boxElement.className).toContain('lg:gap-3');
+  });
+
+  it('should render multiple content items', () => {
+    const { container } = render(
+      <ResponsiveBox
+        contents={[
+          <div key="1">Content 1</div>,
+          <div key="2">Content 2</div>,
+          <div key="3">Content 3</div>,
+        ]}
+      />,
+    );
+
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.children.length).toBe(3);
+    expect(boxElement.textContent).toBe('Content 1Content 2Content 3');
+  });
+
+  it('should render with both column and row reverse', () => {
+    const { container } = render(
+      <ResponsiveBox
+        contents={[<div key="1">Test Content</div>]}
+        colReverse={true}
+        rowReverse={true}
+      />,
+    );
+
+    const boxElement = container.firstChild as HTMLElement;
+    expect(boxElement.className).toContain('flex-col-reverse');
+    expect(boxElement.className).toContain('sm:flex-col-reverse');
+    expect(boxElement.className).toContain('md:flex-row-reverse');
+    expect(boxElement.className).toContain('lg:flex-row-reverse');
+  });
+});

frontend/packages/arch/responsive-kit/__tests__/components/layout/ResponsiveList.test.tsx

@@ -0,0 +1,154 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { ScreenRange } from '../../../src/constant';
+import { ResponsiveList } from '../../../src/components/layout/ResponsiveList';
+
+describe('ResponsiveList', () => {
+  const testItems = [
+    { id: '1', content: <div>Item 1</div> },
+    { id: '2', content: <div>Item 2</div> },
+    { id: '3', content: <div>Item 3</div> },
+  ];
+
+  it('should render with default props', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+      />,
+    );
+
+    // 检查是否渲染了div元素
+    const listElement = container.firstChild as HTMLElement;
+    expect(listElement.tagName).toBe('DIV');
+
+    // 检查是否渲染了所有项目
+    const gridElement = listElement.firstChild as HTMLElement;
+    expect(gridElement.children.length).toBe(3);
+    expect(gridElement.textContent).toBe('Item 1Item 2Item 3');
+
+    // 检查默认类名
+    expect(listElement.className).toContain('flex');
+    expect(listElement.className).toContain('flex-col');
+  });
+
+  it('should render with custom className', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+        className="custom-class"
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    expect(listElement.className).toContain('custom-class');
+  });
+
+  it('should render with responsive grid columns', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+        gridCols={{
+          [ScreenRange.SM]: 1,
+          [ScreenRange.MD]: 2,
+          [ScreenRange.LG]: 3,
+        }}
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    const gridElement = listElement.firstChild as HTMLElement;
+    expect(gridElement.className).toContain('sm:grid-cols-1');
+    expect(gridElement.className).toContain('md:grid-cols-2');
+    expect(gridElement.className).toContain('lg:grid-cols-3');
+  });
+
+  it('should render with responsive grid gap X', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+        gridGapXs={{
+          [ScreenRange.SM]: 1,
+          [ScreenRange.MD]: 2,
+          [ScreenRange.LG]: 3,
+        }}
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    const gridElement = listElement.firstChild as HTMLElement;
+    expect(gridElement.className).toContain('sm:gap-x-1');
+    expect(gridElement.className).toContain('md:gap-x-2');
+    expect(gridElement.className).toContain('lg:gap-x-3');
+  });
+
+  it('should render with responsive grid gap Y', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+        gridGapYs={{
+          [ScreenRange.SM]: 1,
+          [ScreenRange.MD]: 2,
+          [ScreenRange.LG]: 3,
+        }}
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    const gridElement = listElement.firstChild as HTMLElement;
+    expect(gridElement.className).toContain('sm:gap-y-1');
+    expect(gridElement.className).toContain('md:gap-y-2');
+    expect(gridElement.className).toContain('lg:gap-y-3');
+  });
+
+  it('should render with footer', () => {
+    const { container } = render(
+      <ResponsiveList
+        dataSource={testItems}
+        renderItem={item => item.content}
+        footer={<div>Footer Content</div>}
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    expect(listElement.children.length).toBe(2); // grid + footer
+    expect(listElement.textContent).toContain('Footer Content');
+  });
+
+  it('should render with empty content', () => {
+    const { container } = render(
+      <ResponsiveList<{ id: string; content: React.ReactNode }>
+        dataSource={[]}
+        renderItem={item => item.content}
+        emptyContent={<div>No Data</div>}
+      />,
+    );
+
+    const listElement = container.firstChild as HTMLElement;
+    const gridElement = listElement.firstChild as HTMLElement;
+    expect(gridElement.textContent).toBe('No Data');
+  });
+});

frontend/packages/arch/responsive-kit/__tests__/hooks/media-query.test.ts

@@ -0,0 +1,216 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+
+import {
+  useMediaQuery,
+  useCustomMediaQuery,
+} from '../../src/hooks/media-query';
+import {
+  ScreenRange,
+  SCREENS_TOKENS,
+  SCREENS_TOKENS_2,
+} from '../../src/constant';
+
+describe('useCustomMediaQuery', () => {
+  // 保存原始的 window.matchMedia
+  const originalMatchMedia = window.matchMedia;
+
+  beforeEach(() => {
+    // 模拟 window.matchMedia
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // 兼容旧版API
+      removeListener: vi.fn(), // 兼容旧版API
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    // 恢复原始的 window.matchMedia
+    window.matchMedia = originalMatchMedia;
+    vi.resetAllMocks();
+  });
+
+  it('should return false when media query does not match', () => {
+    // 设置 matchMedia 返回 false
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() =>
+      useCustomMediaQuery({ rangeMinPx: '768px', rangeMaxPx: '1200px' }),
+    );
+
+    expect(result.current).toBe(false);
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      '(min-width: 768px) and (max-width: 1200px)',
+    );
+  });
+
+  it('should return true when media query matches', () => {
+    // 设置 matchMedia 返回 true
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() =>
+      useCustomMediaQuery({ rangeMinPx: '768px', rangeMaxPx: '1200px' }),
+    );
+
+    expect(result.current).toBe(true);
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      '(min-width: 768px) and (max-width: 1200px)',
+    );
+  });
+
+  it('should handle only min width', () => {
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() =>
+      useCustomMediaQuery({ rangeMinPx: '768px' }),
+    );
+
+    expect(result.current).toBe(true);
+    expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 768px)');
+  });
+
+  it('should handle only max width', () => {
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() =>
+      useCustomMediaQuery({ rangeMaxPx: '1200px' }),
+    );
+
+    expect(result.current).toBe(true);
+    expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 1200px)');
+  });
+
+  it('should update when media query changes', () => {
+    // 创建一个模拟的 MediaQueryList
+    const mediaQueryList = {
+      matches: false,
+      media: '(min-width: 768px)',
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+
+    // 模拟 window.matchMedia 返回我们的 mediaQueryList
+    window.matchMedia = vi.fn().mockReturnValue(mediaQueryList);
+
+    const { result, rerender } = renderHook(() =>
+      useCustomMediaQuery({ rangeMinPx: '768px' }),
+    );
+
+    // 初始状态是 false
+    expect(result.current).toBe(false);
+
+    // 找到注册的事件处理函数
+    const eventListenerCall = mediaQueryList.addEventListener.mock.calls[0];
+    const eventType = eventListenerCall[0];
+    const handler = eventListenerCall[1];
+
+    // 确认事件类型是 'change'
+    expect(eventType).toBe('change');
+
+    // 模拟媒体查询变化
+    mediaQueryList.matches = true;
+    handler();
+
+    // 重新渲染钩子以获取更新后的值
+    rerender();
+
+    // 现在应该是 true
+    expect(result.current).toBe(true);
+  });
+});
+
+describe('useMediaQuery', () => {
+  // 保存原始的 window.matchMedia
+  const originalMatchMedia = window.matchMedia;
+
+  beforeEach(() => {
+    // 模拟 window.matchMedia
+    window.matchMedia = vi.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    // 恢复原始的 window.matchMedia
+    window.matchMedia = originalMatchMedia;
+    vi.resetAllMocks();
+  });
+
+  it('should use correct screen tokens for min and max ranges', () => {
+    renderHook(() =>
+      useMediaQuery({ rangeMin: ScreenRange.MD, rangeMax: ScreenRange.LG }),
+    );
+
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      `(min-width: ${SCREENS_TOKENS[ScreenRange.MD]}) and (max-width: ${SCREENS_TOKENS[ScreenRange.LG]})`,
+    );
+  });
+
+  it('should handle only min range', () => {
+    renderHook(() => useMediaQuery({ rangeMin: ScreenRange.MD }));
+
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      `(min-width: ${SCREENS_TOKENS[ScreenRange.MD]})`,
+    );
+  });
+
+  it('should handle only max range', () => {
+    renderHook(() => useMediaQuery({ rangeMax: ScreenRange.LG }));
+
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      `(max-width: ${SCREENS_TOKENS[ScreenRange.LG]})`,
+    );
+  });
+
+  it('should use tokens from SCREENS_TOKENS_2 when available', () => {
+    renderHook(() => useMediaQuery({ rangeMin: ScreenRange.XL1_5 }));
+
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      `(min-width: ${SCREENS_TOKENS_2[ScreenRange.XL1_5]})`,
+    );
+  });
+});

frontend/packages/arch/responsive-kit/__tests__/utils/token-map-to-str.test.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { describe, it, expect } from 'vitest';
+
+import { tokenMapToStr } from '../../src/utils/token-map-to-str';
+import type { ResponsiveTokenMap } from '../../src/types';
+import { ScreenRange } from '../../src/constant';
+
+describe('tokenMapToStr', () => {
+  it('should return empty string for empty token map', () => {
+    const result = tokenMapToStr({}, 'prefix');
+    expect(result).toBe('');
+  });
+
+  it('should convert token map to string with prefix', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      [ScreenRange.SM]: 1,
+      [ScreenRange.MD]: 2,
+      [ScreenRange.LG]: 3,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'test-prefix');
+
+    expect(result).toBe('sm:test-prefix-1 md:test-prefix-2 lg:test-prefix-3');
+  });
+
+  it('should handle token map with single entry', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      [ScreenRange.SM]: 1,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'prefix');
+
+    expect(result).toBe('sm:prefix-1');
+  });
+
+  it('should handle token map with undefined values', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      [ScreenRange.SM]: 1,
+      [ScreenRange.MD]: undefined,
+      [ScreenRange.LG]: 3,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'prefix');
+
+    // 根据实际实现，undefined值会被转换为字符串"undefined"
+    expect(result).toBe('sm:prefix-1 md:prefix-undefined lg:prefix-3');
+  });
+
+  it('should handle token map with basic value', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      basic: 0,
+      [ScreenRange.SM]: 1,
+      [ScreenRange.LG]: 3,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'prefix');
+
+    // basic should not have a screen prefix
+    expect(result).toBe('prefix-0 sm:prefix-1 lg:prefix-3');
+  });
+
+  it('should handle token map with zero values', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      [ScreenRange.SM]: 0,
+      [ScreenRange.MD]: 0,
+      [ScreenRange.LG]: 0,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'prefix');
+
+    expect(result).toBe('sm:prefix-0 md:prefix-0 lg:prefix-0');
+  });
+
+  it('should handle token map with decimal values', () => {
+    const tokenMap: ResponsiveTokenMap<ScreenRange> = {
+      [ScreenRange.SM]: 1.5,
+      [ScreenRange.MD]: 2.75,
+      [ScreenRange.LG]: 3.25,
+    };
+
+    const result = tokenMapToStr(tokenMap, 'prefix');
+
+    expect(result).toBe('sm:prefix-1.5 md:prefix-2.75 lg:prefix-3.25');
+  });
+});