@rsdoctor/components 0.0.2-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# Rsdoctor
+
+Rsdoctor is a tool for diagnosing and analyzing the build process and build artifacts to help developers quickly identify and solve problems.
+
+It also supports Webpack and Rspack builders, as well as various build frameworks, such as Rsbuild.
+
+## Documentation
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rsdoctor/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rsdoctor is [MIT licensed](https://github.com/web-infra-dev/rsdoctor/blob/main/LICENSE).

package/dist/assets/connection-point.3b3c78ca.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 24L43 24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24 24V16" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/dist/assets/icon.7509d763.svg

@@ -0,0 +1,21 @@
+<svg width="106.000000" height="113.000000" viewBox="0 0 106 113" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<rect id="画板 934" width="106.000000" height="113.000000" fill="#FFFFFF" fill-opacity="0.035"/>
+	<g clip-path="url(#clip111_45)">
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#0F0D0D"/>
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#736C6C"/>
+		<rect id="矩形 2176" x="22.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" stroke="#000000" stroke-linejoin="bevel"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#0F0D0D"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" fill="#736C6C"/>
+		<rect id="矩形 2176" x="49.500000" y="10.500000" rx="3.000000" width="6.000000" height="11.000000" stroke="#000000" stroke-linejoin="bevel"/>
+		<path id="矢量 943" d="M24.0938 15.8218C24.0938 15.8218 14 11.3477 14 23.2773C14 35.207 26.1123 70 26.1123 70L41 70" stroke="#000000" stroke-width="5.000000"/>
+		<path id="矢量 943" d="M53.9062 15.8218C53.9062 15.8218 64 11.3477 64 23.2773C64 35.207 51.8877 70 51.8877 70L37 70" stroke="#000000" stroke-width="5.000000"/>
+		<path id="矢量 945" d="M40 83.0723C40 94.0781 48.9219 103 59.9277 103L70 103C81.0459 103 90 94.0459 90 83L90 48" stroke="#000000" stroke-width="5.000000"/>
+		<ellipse id="椭圆 54" cx="90.000000" cy="41.500000" rx="11.000000" ry="8.500000" fill="#5092FF"/>
+		<path id="矢量 946" d="M27 72C31.9609 80.7266 34.5361 81.2817 39.4443 80.9219C44.7744 81.2124 47.4326 79.7798 51 72" stroke="#000000" stroke-width="5.000000"/>
+	</g>
+	<defs>
+		<clipPath id="clip111_45">
+			<rect id="画板 934" width="106.000000" height="113.000000" fill="white"/>
+		</clipPath>
+	</defs>
+</svg>

package/dist/assets/webpack.98604d64.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"/><path d="m1035.6 879.3-418.1 236.5v-184.2l260.5-143.3zm28.6-25.9v-494.6l-153 88.3v317.9zm-901.5 25.9 418.1 236.5v-184.2l-260.5-143.3zm-28.6-25.9v-494.6l153 88.3v317.9zm17.9-526.6 428.8-242.6v178.1l-274.7 151.1-2.1 1.2zm894.3 0-428.8-242.6v178.1l274.7 151.1 2.1 1.2z" fill="#8ed6fb"/><path d="m580.8 889.7-257-141.3v-280l257 148.4zm36.7 0 257-141.3v-280l-257 148.4zm-276.3-453.7 258-141.9 258 141.9-258 149z" fill="#1c78c0"/></svg>

package/dist/components/Alert/change.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CodeChangeAlertProps } from './types';
+interface FixedProps {
+  setIsFixed(val: boolean): void;
+}
+export declare const CodeChangeDrawerContent: React.FC<CodeChangeAlertProps & FixedProps>;
+export declare const CodeChangeAlert: React.FC<CodeChangeAlertProps>;
+export {};

package/dist/components/Alert/change.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import axios from "axios";
+import { Space, Alert, Button, Typography, Divider, Popconfirm, Row, Col } from "antd";
+import { InfoCircleOutlined, CheckOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { useRuleIndexNavigate } from "../../utils";
+import { TextDrawer } from "../TextDrawer";
+import { Title } from "../Title";
+import { CodeOpener } from "../Opener";
+import { DiffViewer } from "../CodeViewer";
+const CodeChangeDrawerContent = ({ data, setIsFixed, cwd }) => {
+  const { file, id } = data;
+  const { path, line, isFixed, actual, expected } = file;
+  const applyFix = () => {
+    axios.post(SDK.ServerAPI.API.ApplyErrorFix, { id }).then(() => {
+      setIsFixed(true);
+    });
+  };
+  const FixButton = () => {
+    return /* @__PURE__ */ jsx(
+      Popconfirm,
+      {
+        title: `Did you confirm to apply the change i the area below ?`,
+        onConfirm: applyFix,
+        okText: "Yes",
+        cancelText: "Cancel",
+        zIndex: 99999,
+        disabled: isFixed,
+        placement: "bottom",
+        children: /* @__PURE__ */ jsx(Button, { type: "primary", size: "small", icon: isFixed ? /* @__PURE__ */ jsx(CheckOutlined, {}) : void 0, disabled: isFixed, children: isFixed ? "Fix Applied" : "Apply Fix" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Title, { text: isFixed ? "Fix History" : "Suggest Fix" }),
+      /* @__PURE__ */ jsx("span", { className: "code-change-tag-list", children: /* @__PURE__ */ jsx(FixButton, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(CodeOpener, { cwd, url: path, loc: String(line), code: true, disabled: true }),
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Before" }) }),
+      /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "After" }) })
+    ] }),
+    /* @__PURE__ */ jsx(DiffViewer, { className: "full-space", filepath: path, before: actual, after: expected })
+  ] });
+};
+const CodeChangeAlert = ({ data, cwd }) => {
+  var _a;
+  const { title, description = "", level, code, file } = data;
+  const [isFixed, setIsFixed] = useState((_a = file.isFixed) != null ? _a : false);
+  const navigate = useRuleIndexNavigate(code, data.link);
+  const fixFile = (val) => {
+    setIsFixed(val);
+    file.isFixed = val;
+  };
+  const Description = /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+    /* @__PURE__ */ jsx(Typography.Text, { children: description }),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { children: "File:" }),
+      /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: file.path }),
+      /* @__PURE__ */ jsx(Typography.Text, { children: "in line" }),
+      /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: file.line })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      showIcon: true,
+      message: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
+      ] }),
+      description: Description,
+      type: isFixed ? "success" : level === "warn" ? "warning" : level,
+      action: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(
+          TextDrawer,
+          {
+            text: isFixed ? "Fixed | Show Fix History" : "Show Fix Suggestion",
+            buttonProps: { size: "small" },
+            children: /* @__PURE__ */ jsx(CodeChangeDrawerContent, { data, setIsFixed: fixFile, cwd })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { type: "link", onClick: navigate, size: "small", children: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) })
+      ] })
+    }
+  );
+};
+export {
+  CodeChangeAlert,
+  CodeChangeDrawerContent
+};

package/dist/components/Alert/file-relation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FileRelationAlertProps } from './types';
+export declare const FileRelationAlert: React.FC<FileRelationAlertProps>;

package/dist/components/Alert/file-relation.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Alert } from "antd";
+const FileRelationAlert = ({ data }) => {
+  const { description = "", level } = data;
+  return /* @__PURE__ */ jsx(Alert, { type: level === "warn" ? "warning" : level, description });
+};
+export {
+  FileRelationAlert
+};

package/dist/components/Alert/index.css

@@ -0,0 +1,29 @@
+.file-inline-decoration {
+  cursor: pointer;
+  text-decoration: underline;
+  background: rgb(77, 112, 151);
+}
+.alert-space,
+.full-space {
+  width: 100%;
+  height: 100%;
+}
+.alert-space > *:last-child,
+.full-space > *:last-child {
+  flex-grow: 1;
+}
+.full-space {
+  flex-grow: 1;
+}
+.code-change-tag-list {
+  margin-left: 10px;
+}
+.tabs-space {
+  width: 100%;
+  height: 100%;
+}
+.tabs-space .ant-tabs-content,
+.tabs-space .ant-tabs-tabpane {
+  width: 100%;
+  height: 100%;
+}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AlertProps } from './types';
+import './index.sass';
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert/index.js

@@ -0,0 +1,37 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { LinkRuleAlert } from "./link";
+import { FileRelationAlert } from "./file-relation";
+import { PackageRelationAlert } from "./package-relation";
+import { CodeChangeAlert } from "./change";
+import { CodeViewAlert } from "./view";
+import "./index.css";
+const Alert = (props) => {
+  const { data, cwd = "" } = props;
+  if (data.type === "file-relation") {
+    return /* @__PURE__ */ jsx(FileRelationAlert, { data });
+  }
+  if (data.type === "code-view") {
+    return /* @__PURE__ */ jsx(CodeViewAlert, { data, cwd });
+  }
+  if (data.type === "code-change") {
+    return /* @__PURE__ */ jsx(CodeChangeAlert, { data, cwd });
+  }
+  if (data.type === "emo") {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  if (data.type === "package-relation") {
+    const { getPackageRelationContentComponent } = props;
+    return /* @__PURE__ */ jsx(
+      PackageRelationAlert,
+      {
+        data,
+        cwd,
+        getPackageRelationContentComponent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LinkRuleAlert, { data });
+};
+export {
+  Alert
+};

package/dist/components/Alert/link.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LinkAlertProps } from './types';
+export declare const LinkRuleAlert: React.FC<LinkAlertProps>;

package/dist/components/Alert/link.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Button, Space, Typography } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useRuleIndexNavigate } from "../../utils";
+const LinkRuleAlert = ({ data }) => {
+  const { title, description = "", level, code } = data;
+  const navigate = useRuleIndexNavigate(code, data.link);
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      showIcon: true,
+      message: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
+      ] }),
+      description: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: description } }),
+      type: level === "warn" ? "warning" : level,
+      action: /* @__PURE__ */ jsxs(Button, { type: "link", onClick: navigate, size: "small", children: [
+        "More",
+        /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+      ] })
+    }
+  );
+};
+export {
+  LinkRuleAlert
+};

package/dist/components/Alert/package-relation.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+import { PackageRelationAlertProps } from './types';
+export declare const PackageRelationReasons: React.FC<{
+  data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
+  cwd: string;
+}>;
+export declare const PackageRelationReasonsWithServer: React.FC<Omit<{
+  data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
+  cwd: string;
+}, "data"> & Partial<{
+  body: {
+    id: string | number;
+    target: SDK.PackageBasicData;
+  };
+}>>;
+export declare const PackageRelationAlert: React.FC<PackageRelationAlertProps>;

package/dist/components/Alert/package-relation.js

@@ -0,0 +1,206 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import React, { useState } from "react";
+import { Space, Alert, Button, Typography, Divider, Tabs, Row, Col, Timeline, Card, Tag, Empty, Popover } from "antd";
+import { sumBy } from "lodash-es";
+import { Rule, SDK } from "@rsdoctor/types";
+import { ExpandAltOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { useRuleIndexNavigate, formatSize, useI18n } from "../../utils";
+import { TextDrawer } from "../TextDrawer";
+import { Title } from "../Title";
+import { Size, Color } from "../../constants";
+import { Badge as Bdg } from "../Badge";
+import { FileHightLightViewer } from "../CodeViewer";
+import { withServerAPI } from "../Manifest";
+const PackageRelationReasons = ({ data, cwd }) => {
+  const [index, setIndex] = useState(0);
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsxs(Row, { gutter: Size.BasePadding, wrap: false, align: "top", children: [
+    /* @__PURE__ */ jsx(Col, { span: 12, style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: `The reasons for importing this version`,
+        style: { height: "100%" },
+        extra: /* @__PURE__ */ jsx(Popover, { content: /* @__PURE__ */ jsx(Typography.Text, { children: t("DuplicatePakCodeExplain") }), children: /* @__PURE__ */ jsx("a", { href: "#", children: "Explain" }) }),
+        bodyStyle: { overflow: "scroll" },
+        children: data.length ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: Size.BasePadding }, children: /* @__PURE__ */ jsx(Typography.Text, { type: "secondary", strong: true, children: "Click the file path below to show the reason in code viewer." }) }),
+          /* @__PURE__ */ jsx(Timeline, { children: data.map((e, i) => {
+            const { dependency, module, relativePath } = e;
+            const { statements } = dependency;
+            const { start } = module.isPreferSource ? statements[0].position.source : statements[0].position.transformed;
+            const text = `${relativePath}:${start.line}:${start.column || 1}`;
+            return /* @__PURE__ */ jsx(
+              Timeline.Item,
+              {
+                style: { cursor: "pointer" },
+                dot: i === data.length - 1 ? void 0 : "⬇️",
+                children: /* @__PURE__ */ jsx(
+                  Typography.Text,
+                  {
+                    copyable: { text: relativePath },
+                    onClick: (e2) => {
+                      e2.preventDefault();
+                      e2.stopPropagation();
+                      setIndex(i);
+                    },
+                    strong: i === index,
+                    style: { color: i === index ? Color.Blue : "inherit", display: "block" },
+                    children: text
+                  }
+                )
+              },
+              text
+            );
+          }) })
+        ] }) : /* @__PURE__ */ jsx(Empty, { description: "This package no dependencies" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Col, { span: 12, style: { height: "100%" }, children: /* @__PURE__ */ createElement(FileHightLightViewer, __spreadProps(__spreadValues({}, data[index]), { key: index, cwd })) })
+  ] });
+};
+const PackageRelationReasonsWithServer = withServerAPI({
+  Component: PackageRelationReasons,
+  api: SDK.ServerAPI.API.GetPackageRelationAlertDetails,
+  responsePropName: "data"
+});
+const PackageRelationAlert = ({
+  data,
+  getPackageRelationContentComponent
+}) => {
+  var _a;
+  const { level, code, packages } = data;
+  const navigate = useRuleIndexNavigate(code, data.link);
+  const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
+  const totalSizeStr = formatSize(totalSize);
+  const { name } = packages.find((e) => !!e.target.name).target;
+  const versions = packages.map((item) => item.target.version);
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      showIcon: true,
+      message: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: ((_a = Rule.RuleErrorMap[code]) == null ? void 0 : _a.title) || data.title }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsxs(Typography.Text, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: name }),
+          /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+            " ",
+            data.packages.length
+          ] }),
+          /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found" })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Bdg,
+          {
+            label: "total size",
+            value: totalSizeStr,
+            type: "error",
+            tooltip: `total size of ${data.packages.length} versions is ${totalSizeStr}`
+          }
+        )
+      ] }),
+      description: /* @__PURE__ */ jsx(Space, { direction: "vertical", wrap: false, children: data.packages.map(({ target: el, targetSize: size }) => {
+        const sizeStr = formatSize(size.sourceSize);
+        const parsedSizeStr = size.parsedSize ? formatSize(size.parsedSize) : null;
+        const name2 = `${el.name}@${el.version}`;
+        return /* @__PURE__ */ jsxs(Space, { style: { wordBreak: "break-all" }, align: "center", children: [
+          /* @__PURE__ */ jsx(Typography.Text, { style: { marginLeft: 4 }, children: "└" }),
+          /* @__PURE__ */ jsx(Bdg, { label: el.name, value: `v${el.version}`, tooltip: name2 }),
+          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          /* @__PURE__ */ jsx(
+            Bdg,
+            {
+              label: /* @__PURE__ */ jsxs("div", { color: "rgb(255, 255, 255)", children: [
+                "Source Size ",
+                /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+              ] }),
+              value: sizeStr,
+              tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is source size.`,
+              type: "error"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Bdg,
+            {
+              label: "Bundled size",
+              value: parsedSizeStr || "CONCATENATED",
+              tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `,
+              type: "error"
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          /* @__PURE__ */ jsx(
+            Typography.Paragraph,
+            {
+              style: { marginBottom: 0 },
+              copyable: { text: el.root },
+              ellipsis: { rows: 2, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
+              code: true,
+              children: el.root
+            }
+          )
+        ] }, el.version);
+      }) }),
+      type: level === "warn" ? "warning" : level,
+      action: /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        packages && packages.length > 0 ? /* @__PURE__ */ jsx(TextDrawer, { text: "Show Relations", buttonProps: { size: "small" }, drawerProps: { title: data.title }, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
+          /* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [
+            /* @__PURE__ */ jsx(Title, { text: name, upperFisrt: false }),
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
+            /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found: " }),
+            versions.map((e) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: e }, e))
+          ] }),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              type: "card",
+              size: "middle",
+              className: "tabs-space",
+              defaultActiveKey: versions[0],
+              items: packages.map((pkg) => {
+                const { target, targetSize } = pkg;
+                return {
+                  label: /* @__PURE__ */ jsxs(Space, { children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { children: `${name}@${target.version}` }),
+                    /* @__PURE__ */ jsx(Tag, { color: Color.Red, children: formatSize(targetSize.sourceSize) })
+                  ] }),
+                  key: `${target.root}${target.name}${target.version}`,
+                  children: getPackageRelationContentComponent({ data, package: pkg })
+                };
+              })
+            }
+          )
+        ] }) }) : null,
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Button, { type: "link", onClick: navigate, size: "small", icon: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) })
+      ] })
+    }
+  );
+};
+export {
+  PackageRelationAlert,
+  PackageRelationReasons,
+  PackageRelationReasonsWithServer
+};

package/dist/components/Alert/types.d.ts

@@ -0,0 +1,31 @@
+import { Rule } from '@rsdoctor/types';
+import React from 'react';
+export interface AlertProps extends Omit<PackageRelationAlertProps, 'data'> {
+  data: Rule.RuleStoreDataItem;
+  cwd: string;
+}
+export interface PackageRelationAlertProps {
+  data: Rule.PackageRelationDiffRuleStoreData;
+  getPackageRelationContentComponent: React.FC<{
+    data: Rule.PackageRelationDiffRuleStoreData;
+    package: Rule.PackageRelationData;
+  }>;
+  cwd: string;
+}
+export interface FileRelationAlertProps {
+  data: Rule.FileRelationRuleStoreData;
+}
+export interface CodeChangeAlertProps {
+  data: Rule.CodeChangeRuleStoreData;
+  cwd: string;
+}
+export interface CodeViewAlertProps {
+  data: Rule.CodeViewRuleStoreData;
+  cwd: string;
+}
+export interface LinkAlertProps {
+  data: Rule.LinkRuleStoreData;
+}
+export interface EMOAlertProps {
+  data: Rule.EMORuleStoreData;
+}

package/dist/components/Alert/view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CodeViewAlertProps } from './types';
+export declare const CodeViewDrawerContent: React.FC<CodeViewAlertProps>;
+export declare const CodeViewAlert: React.FC<CodeViewAlertProps>;

package/dist/components/Alert/view.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isNumber } from "lodash-es";
+import { Space, Alert, Button, Typography, Divider } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useRuleIndexNavigate } from "../../utils";
+import { TextDrawer } from "../TextDrawer";
+import { Title } from "../Title";
+import { CodeOpener } from "../Opener";
+import { CodeViewer } from "../CodeViewer";
+const CodeViewDrawerContent = ({ data, cwd }) => {
+  const { file } = data;
+  const { path, ranges } = file;
+  const line = ranges == null ? void 0 : ranges[0].start.line;
+  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
+    /* @__PURE__ */ jsx(Title, { text: "Code Viewer" }),
+    /* @__PURE__ */ jsx(CodeOpener, { cwd, url: path, loc: isNumber(line) ? String(line) : void 0, code: true, disabled: true }),
+    /* @__PURE__ */ jsx(CodeViewer, { path: file.path, content: file.content, ranges, defaultLine: line })
+  ] });
+};
+const CodeViewAlert = ({ data, cwd }) => {
+  var _a;
+  const { title, description = "", level, code, file } = data;
+  const navigate = useRuleIndexNavigate(code, data.link);
+  const startLine = (_a = file.ranges) == null ? void 0 : _a[0].start.line;
+  const Description = /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+    /* @__PURE__ */ jsx(Typography.Text, { children: description }),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { children: "File:" }),
+      /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: file.path }),
+      isNumber(startLine) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: "in line" }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: startLine })
+      ] }) : ""
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      showIcon: true,
+      message: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
+      ] }),
+      description: Description,
+      type: level === "warn" ? "warning" : level,
+      action: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(TextDrawer, { text: "Show Source Code", buttonProps: { size: "small" }, children: /* @__PURE__ */ jsx(CodeViewDrawerContent, { data, cwd }) }),
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          /* @__PURE__ */ jsx(Button, { type: "link", onClick: navigate, size: "small", icon: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  CodeViewAlert,
+  CodeViewDrawerContent
+};

package/dist/components/Alerts/bundle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Rule, SDK } from '@rsdoctor/types';
+interface BundleAlertsProps {
+  filter?(alert: Rule.RuleStoreDataItem): boolean;
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}
+export declare const BundleAlertsBase: React.FC<BundleAlertsProps>;
+export declare const BundleAlerts: React.FC<Omit<BundleAlertsProps, "project"> & Partial<{
+  body?: any;
+}>>;
+export {};