feat(content-ui): Implement accessible UI using Ant Design components

This commit adds a new functional component, `ContentTab`, which utilizes Ant Design components to create an accessible UI. The component includes tabs for different functionalities and a form for adding test cases. It utilizes Ant Design components such as `Tabs`, `Form`, `Input`, and `Button` to create a user-friendly interface. Additionally, the `App` component has been updated to render the `ContentTab` component instead of the previous placeholder content. This commit enhances the accessibility and functionality of the content UI.

pages/content-ui/package.json

@@ -23,14 +23,17 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@extension/shared": "workspace:*",
     "@extension/storage": "workspace:*",
-    "@extension/ui": "workspace:*"
+    "@extension/ui": "workspace:*",
+    "antd": "^5.21.3",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "devDependencies": {
+    "@extension/hmr": "workspace:*",
     "@extension/tailwindcss-config": "workspace:*",
     "@extension/tsconfig": "workspace:*",
-    "@extension/hmr": "workspace:*",
     "@extension/vite-config": "workspace:*",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3"

pages/content-ui/src/App.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button } from '@extension/ui';
-import { useStorage } from '@extension/shared';
-import { themeStorage } from '@extension/storage';
+import ContentTab from './ContentTab';
 
 export enum CommandType {
   ChatPopupDisplay,
@@ -17,7 +15,6 @@ export interface TabMessage {
 }
 
 export default function App() {
-  const theme = useStorage(themeStorage);
   const [contentPanelVisible, setContentPanelVisible] = useState<boolean>(false);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -54,12 +51,7 @@ export default function App() {
       {contentPanelVisible && (
         <div className={'fixed right-0 top-0'}>
           <div className="flex items-center justify-between gap-2 rounded bg-blue-100 px-2 py-1">
-            <div className="flex gap-1 text-blue-500">
-              Edit <strong className="text-blue-700">pages/content-ui/src/app.tsx</strong> and save to reload.
-            </div>
-            <Button theme={theme} onClick={themeStorage.toggle}>
-              Capture
-            </Button>
+            <ContentTab />
           </div>
         </div>
       )}

pages/content-ui/src/ContentTab.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button, Form, Input, message, Tabs } from 'antd';
+import { PlusOutlined, RobotOutlined, ToolOutlined, SettingOutlined } from '@ant-design/icons';
+const { TabPane } = Tabs;
+
+export default function AccessibleFunctionalUI() {
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    console.log('Form values:', values);
+    message.success('Test case added successfully!');
+    form.resetFields();
+  };
+
+  return (
+    <div className="p-2 bg-gray-100 max-w-md mx-auto">
+      <Tabs defaultActiveKey="1" type="card" className="mb-2">
+        <TabPane
+          tab={
+            <span className="flex items-center">
+              <RobotOutlined className="mr-1" />
+              Auto Capture
+            </span>
+          }
+          key="1">
+          <Form form={form} name="autoTestForm" onFinish={onFinish} layout="vertical" className="space-y-2">
+            <Form.Item
+              name="testGoals"
+              label={<span className="font-medium">Test Goals</span>}
+              rules={[{ required: true, message: 'Test goals are required' }]}>
+              <Input.TextArea
+                placeholder="Enter test goals"
+                className="text-sm"
+                rows={2}
+                autoSize={{ minRows: 2, maxRows: 4 }}
+              />
+            </Form.Item>
+            <Form.Item
+              name="testSteps"
+              label={<span className="font-medium">Test Steps</span>}
+              rules={[{ required: true, message: 'Test steps are required' }]}>
+              <Input.TextArea
+                placeholder="Enter test steps"
+                className="text-sm"
+                rows={3}
+                autoSize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                icon={<PlusOutlined />}
+                className="w-full bg-blue-500 hover:bg-blue-600 focus:bg-blue-600">
+                Add Test Case
+              </Button>
+            </Form.Item>
+          </Form>
+        </TabPane>
+        <TabPane
+          tab={
+            <span className="flex items-center">
+              <ToolOutlined className="mr-1" />
+              Function 2
+            </span>
+          }
+          key="2">
+          <div className="p-2 bg-white rounded-lg shadow-sm">
+            <h3 className="font-medium mb-2">Function 2</h3>
+            <p className="text-sm">
+              This is a placeholder for Function 2 content. Add your specific functionality here.
+            </p>
+          </div>
+        </TabPane>
+        <TabPane
+          tab={
+            <span className="flex items-center">
+              <SettingOutlined className="mr-1" />
+              Function 3
+            </span>
+          }
+          key="3">
+          <div className="p-2 bg-white rounded-lg shadow-sm">
+            <h3 className="font-medium mb-2">Function 3</h3>
+            <p className="text-sm">
+              This is a placeholder for Function 3 content. Add your specific functionality here.
+            </p>
+          </div>
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+}

pages/content-ui/vite.config.mts

@@ -1,6 +1,7 @@
 import { resolve } from 'node:path';
 import { makeEntryPointPlugin } from '@extension/hmr';
 import { isDev, withPageConfig } from '@extension/vite-config';
+import postcss from 'rollup-plugin-postcss';
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, 'src');
@@ -11,7 +12,12 @@ export default withPageConfig({
       '@src': srcDir,
     },
   },
-  plugins: [isDev && makeEntryPointPlugin()],
+  plugins: [
+    isDev && makeEntryPointPlugin(),
+    postcss({
+      extensions: ['.css'],
+    }),
+  ],
   publicDir: resolve(rootDir, 'public'),
   build: {
     lib: {