feat(client): add Rule index page (#89)

packages/client/src/router.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { Overall, BundleSize, LoaderFiles, PluginsAnalyze, ModuleResolve, LoaderTimeline } from '@rsdoctor/components/pages';
+import { Overall, BundleSize, LoaderFiles, PluginsAnalyze, ModuleResolve, LoaderTimeline, RuleIndex } from '@rsdoctor/components/pages';
 
 
 export default function Router(): React.ReactElement {
@@ -29,6 +29,10 @@ export default function Router(): React.ReactElement {
       path: LoaderTimeline.route,
       element: <LoaderTimeline.Page />,
     },
+    {
+      path: RuleIndex.route,
+      element: <RuleIndex.Page />,
+    },
   ].filter((e) => Boolean(e)) as { path: string; element: JSX.Element }[];
 
   return (

packages/components/package.json

@@ -74,6 +74,7 @@
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
     "react-json-view": "1.21.3",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "6.4.3",
     "socket.io-client": "4.6.1",
     "terser": "^5.26.0",

packages/components/src/pages/Resources/RuleIndex/constants.ts

@@ -0,0 +1,5 @@
+import { Client } from '@rsdoctor/types';
+
+export const name = 'Rule Index';
+
+export const route = Client.DoctorClientRoutes.RuleIndex;

packages/components/src/pages/Resources/RuleIndex/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { Rule } from '@rsdoctor/types';
+import { Badge, Card, Space, Typography, Col, Row, Tag } from 'antd';
+import ReactMarkdown from 'react-markdown';
+import { values } from 'lodash-es';
+import { Title } from '../../../components/Title';
+import { Size } from '../../../constants';
+import { useUrlQuery } from '../../../utils';
+
+export const Page: React.FC = () => {
+  const query = useUrlQuery();
+
+  const defaultErrorCode = query[Rule.DoctorRuleClientConstant.UrlQueryForErrorCode] || '';
+
+  // @ts-ignore
+  const [ruleMessage, setRuleMessage] = useState<Rule.RuleMessage>(Rule.RuleErrorMap[defaultErrorCode]);
+
+  const dataSource = values(Rule.RuleErrorMap)!;
+
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  return (
+    <Row gutter={Size.BasePadding / 2}>
+      <Col span={8}>
+        <Card title={<Title text="list of the error codes." />} bordered>
+          <Space direction="vertical">
+            {dataSource.map((e, i) => (
+              <Space
+                style={{ marginTop: i === 0 ? 0 : Size.BasePadding / 2, cursor: 'pointer' }}
+                onClick={() => setRuleMessage(e)}
+                key={e.code}
+                align="center"
+              >
+                <Badge status="default" />
+                <Typography.Text code>
+                  <a>{e.code}</a>
+                </Typography.Text>
+                <Typography.Text style={{ color: ruleMessage && ruleMessage.code === e.code ? '#1890ff' : undefined }}>
+                  {e.title}
+                </Typography.Text>
+              </Space>
+            ))}
+          </Space>
+        </Card>
+      </Col>
+      <Col span={16}>
+        {ruleMessage ? (
+          <Card
+            title={
+              <Row justify="space-between">
+                <Space>
+                  <Typography.Text code>{ruleMessage.code}</Typography.Text>
+                  <Typography.Text>{ruleMessage.title}</Typography.Text>
+                </Space>
+                <div>
+                  <Tag>{ruleMessage.category}</Tag>
+                </div>
+              </Row>
+            }
+            bodyStyle={{ paddingTop: 0 }}
+            bordered
+          >
+            <Typography.Paragraph>
+              {ruleMessage.type === 'markdown' ? (
+                <ReactMarkdown>{ruleMessage.description}</ReactMarkdown>
+              ) : (
+                <Typography.Text>{ruleMessage.description}</Typography.Text>
+              )}
+            </Typography.Paragraph>
+          </Card>
+        ) : (
+          <Card title={'This page lists all the error codes emitted by the Web Doctor.'} bordered>
+            <Typography.Text>click the error code in left bar to show more details.</Typography.Text>
+          </Card>
+        )}
+      </Col>
+    </Row>
+  );
+};
+
+export * from './constants'

packages/components/src/pages/index.ts

@@ -4,4 +4,5 @@ export * as ModuleAnalyze from './ModuleAnalyze';
 export * as LoaderTimeline from './WebpackLoaders/Overall';
 export * as LoaderFiles from './WebpackLoaders/Analysis';
 export * as PluginsAnalyze from './WebpackPlugins';
-export * as ModuleResolve from './ModuleResolve';
+export * as ModuleResolve from './ModuleResolve';
+export * as RuleIndex from './Resources/RuleIndex';