@rsdoctor/components 0.0.0-next-20240620044732

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,22 @@
+# Rsdoctor Components
+
+This package is the Rsdoctor reporting platform’s components.
+
+## features
+
+- Rsdoctor is a one-stop tool for diagnosing and analyzing the build process and build artifacts.
+- Rsdoctor is a tool that supports Webpack and Rspack build analysis.
+- Rsdoctor is an analysis tool that can display the time-consuming and behavioral details of the compilation.
+- Rsdoctor is a tool that provides bundle Diff and other anti-degradation capabilities simultaneously.
+
+## Documentation
+
+https://rsdoctor.dev/
+
+## 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/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,93 @@
+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 }) => {
+  const { title, description = "", level, code, file } = data;
+  const [isFixed, setIsFixed] = useState(file.isFixed ?? 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" ? "info" : 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" ? "info" : level, description });
+};
+export {
+  FileRelationAlert
+};

package/dist/components/Alert/index.css

@@ -0,0 +1,32 @@
+.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%;
+}
+.ant-alert-warning {
+  border: none;
+}

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" ? "info" : 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,281 @@
+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,
+  Grid
+} 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 } = statements?.[0]?.position ? module.isPreferSource ? statements[0].position.source : statements[0].position.transformed : { start: { line: 0, column: 0 } };
+            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, { ...data[index], key: index, cwd }) })
+  ] });
+};
+const PackageRelationReasonsWithServer = withServerAPI({
+  Component: PackageRelationReasons,
+  api: SDK.ServerAPI.API.GetPackageRelationAlertDetails,
+  responsePropName: "data"
+});
+const PackageRelationAlert = ({
+  data,
+  getPackageRelationContentComponent
+}) => {
+  const { level, code, packages } = data;
+  const navigate = useRuleIndexNavigate(code, data.link);
+  const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
+  const totalSizeStr = formatSize(totalSize);
+  const { xs, lg, xxl } = Grid.useBreakpoint();
+  const { name } = packages.find((e) => !!e.target.name).target;
+  const versions = packages.map((item) => item.target.version);
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      showIcon: !xs,
+      message: /* @__PURE__ */ jsxs(
+        Space,
+        {
+          wrap: true,
+          split: xs ? null : /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          align: "center",
+          children: [
+            /* @__PURE__ */ jsxs(Space, { wrap: false, 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: Rule.RuleErrorMap[code]?.title || data.title })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Typography.Paragraph,
+              {
+                ellipsis: { rows: 1 },
+                style: { marginBottom: 0 },
+                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(
+              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",
+            split: xs ? null : /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+            wrap: true,
+            children: [
+              /* @__PURE__ */ jsxs(Space, { wrap: false, children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { marginLeft: 4 }, children: "└" }),
+                /* @__PURE__ */ jsx(
+                  Bdg,
+                  {
+                    label: el.name,
+                    value: `v${el.version}`,
+                    tooltip: name2
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__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(
+                Typography.Paragraph,
+                {
+                  style: {
+                    marginBottom: 0,
+                    width: xxl ? "40rem" : lg ? "30rem" : "20rem"
+                  },
+                  copyable: { text: el.root },
+                  ellipsis: {
+                    rows: 1,
+                    expandable: true,
+                    symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}),
+                    tooltip: el.root
+                  },
+                  code: true,
+                  children: el.root
+                }
+              )
+            ]
+          },
+          el.version
+        );
+      }) }),
+      type: level === "warn" ? "info" : 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>;