feat: add react antd example (#106)

examples/with-antd/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.eslintcache
+
+dist/
+coverage/
+release/
+output/
+log/
+
+.env

examples/with-antd/e2e/basic.spec.ts

@@ -0,0 +1,18 @@
+import { setupStaticServer } from '@webx-kit/test-utils/playwright';
+import { expect, test } from './context';
+
+const getWebpageURL = setupStaticServer(test);
+
+test('Popup Page', async ({ getURL, page }) => {
+  await page.goto(await getURL('popup.html'));
+  for (let id = 1; id <= 2; id++) {
+    await page.getByTestId(`tab-${id}`).click();
+    await expect(page.getByTestId(`content-${id}`)).toBeVisible();
+  }
+});
+
+test('Content Scripts', async ({ page }) => {
+  await page.goto(getWebpageURL());
+  await page.getByRole('button').click();
+  await expect(page.getByTestId('settings')).toContainText('Content');
+});

examples/with-antd/e2e/context.ts

@@ -0,0 +1,8 @@
+import path from 'node:path';
+import { createWebxTest } from '@webx-kit/test-utils/playwright';
+
+export const test = createWebxTest({
+  extensionPath: path.resolve(__dirname, '../dist'),
+});
+
+export const { expect } = test;

examples/with-antd/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@webx-kit/example-with-antd",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "test": "playwright test",
+    "lint:type": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.22.1",
+    "@ant-design/icons": "^5.5.2",
+    "@webx-kit/runtime": "workspace:^",
+    "antd": "^5.22.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@rsbuild/core": "catalog:",
+    "@rsbuild/plugin-less": "catalog:",
+    "@rsbuild/plugin-react": "catalog:",
+    "@types/chrome": "^0.0.287",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@webx-kit/rsbuild-plugin": "workspace:^",
+    "@webx-kit/test-utils": "workspace:^",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2"
+  }
+}

examples/with-antd/playwright.config.ts

@@ -0,0 +1,18 @@
+/**
+ * @see {@link https://playwright.dev/docs/chrome-extensions Chrome extensions | Playwright}
+ */
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chromium',
+      },
+    },
+  ],
+  testDir: './e2e',
+  retries: 2,
+});

examples/with-antd/rsbuild.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginLess } from '@rsbuild/plugin-less';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { webxPlugin } from '@webx-kit/rsbuild-plugin';
+
+export default defineConfig({
+  plugins: [
+    pluginLess(),
+    pluginReact(),
+    webxPlugin({
+      background: './src/background/index.ts',
+      contentScripts: {
+        import: './src/content-scripts/index.tsx',
+        matches: ['<all_urls>'],
+      },
+    }),
+  ],
+  source: {
+    entry: {
+      popup: './src/pages/popup/index.tsx',
+    },
+  },
+  output: {
+    copy: [
+      {
+        from: './public',
+        to: './public',
+      },
+    ],
+  },
+  tools: {
+    postcss: {
+      postcssOptions: {
+        plugins: [require('tailwindcss')],
+      },
+    },
+  },
+});

examples/with-antd/src/background/index.ts

@@ -0,0 +1 @@
+console.log('hello');

examples/with-antd/src/content-scripts/app.tsx

@@ -0,0 +1,25 @@
+import { ThunderboltFilled } from '@ant-design/icons';
+import { FloatButton, Modal } from 'antd';
+import { useState } from 'react';
+
+export function App() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <FloatButton
+        shape="circle"
+        type="primary"
+        icon={<ThunderboltFilled />}
+        tooltip="WebX Kit"
+        onClick={() => setVisible(true)}
+      />
+      <Modal title="Settings" open={visible} footer={null} onCancel={() => setVisible(false)}>
+        <Settings />
+      </Modal>
+    </>
+  );
+}
+
+function Settings() {
+  return <div data-testid="settings">Content</div>;
+}

examples/with-antd/src/content-scripts/index.tsx

@@ -0,0 +1,19 @@
+import { createShadowRootUI } from '@webx-kit/runtime/content-scripts';
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+import '../global.less';
+import { StyleProvider } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+
+createShadowRootUI({
+  styles: chrome.runtime.getURL('static/css/content-script.css'),
+  render({ root }) {
+    createRoot(root).render(
+      <StyleProvider container={root}>
+        <ConfigProvider getPopupContainer={() => root}>
+          <App />
+        </ConfigProvider>
+      </StyleProvider>
+    );
+  },
+});

examples/with-antd/src/global.less

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/with-antd/src/manifest.ts

@@ -0,0 +1,20 @@
+import { defineManifest } from '@webx-kit/rsbuild-plugin/manifest';
+
+export default defineManifest(() => ({
+  manifest_version: 3,
+  name: 'WebX Kit with antd',
+  version: '0.0.0',
+  icons: {
+    512: 'public/logo.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+  },
+  host_permissions: ['<all_urls>'],
+  web_accessible_resources: [
+    {
+      matches: ['<all_urls>'],
+      resources: ['static/css/*', 'static/svg/*'],
+    },
+  ],
+}));

examples/with-antd/src/pages/popup/app.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
+import { Tabs } from 'antd';
+
+export function App() {
+  return (
+    <Tabs
+      defaultActiveKey="2"
+      items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
+        const id = String(i + 1);
+        return {
+          key: id,
+          label: <div data-testid={`tab-${id}`}>{`Tab ${id}`}</div>,
+          children: <div data-testid={`content-${id}`}>{`Tab ${id}`}</div>,
+          icon: <Icon />,
+        };
+      })}
+    />
+  );
+}

examples/with-antd/src/pages/popup/index.tsx

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+import '../../global.less';
+
+createRoot(document.getElementById('root')!).render(
+  <div className="min-w-96 px-4 pb-4">
+    <App />
+  </div>
+);

examples/with-antd/src/webx-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

examples/with-antd/tailwind.config.ts

@@ -0,0 +1,17 @@
+import { getPixelUnitDefaultTheme } from '@webx-kit/rsbuild-plugin/tailwind';
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+
+const config: Config = {
+  theme: getPixelUnitDefaultTheme(),
+  content: ['./src/**/*.{ts,tsx}'],
+  plugins: [
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.flex-center': { display: 'flex', 'align-items': 'center', 'justify-content': 'center' },
+      });
+    }),
+  ],
+};
+
+export default config;

examples/with-antd/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "allowJs": true,
+    "module": "ESNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": false,
+    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleResolution": "Bundler",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["dist"]
+}