@rsdoctor/components 0.4.13 → 1.0.0-alpha.1

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   Space,
   Alert,
@@ -10,74 +9,45 @@ import {
   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 {
+  ExpandAltOutlined,
+  InfoCircleOutlined,
+  DoubleRightOutlined
+} from "@ant-design/icons";
+import { useRuleIndexNavigate, formatSize } from "../../utils";
 import { TextDrawer } from "../TextDrawer";
 import { Title } from "../Title";
 import { Size, Color } from "../../constants";
 import { Badge as Bdg } from "../Badge";
 import { withServerAPI } from "../Manifest";
+import { Rule, SDK } from "@rsdoctor/types";
+import styles from "./package-relation.module";
 const TextDrawerWidth = "60%";
 const PackageRelationReasons = ({ data }) => {
-  const [index, setIndex] = useState(0);
-  const { t } = useI18n();
-  return /* @__PURE__ */ jsx(Row, { gutter: Size.BasePadding, wrap: false, align: "top", children: /* @__PURE__ */ jsx(Col, { span: 20, 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" })
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx(Row, { gutter: Size.BasePadding, wrap: false, align: "top", children: /* @__PURE__ */ jsx(Col, { style: { height: "100%", width: "100%" }, children: data.length ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Timeline, { style: { marginTop: "20px" }, 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: "default" }, children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.filePath, children: [
+        text,
+        /* @__PURE__ */ jsx(
+          Typography.Paragraph,
+          {
+            copyable: { text: relativePath },
+            style: { position: "relative", top: "7px" }
+          }
+        )
+      ] }),
+      i !== data.length - 1 ? /* @__PURE__ */ jsx(DoubleRightOutlined, { className: styles.arrow }) : null
+    ] }) }, text);
+  }) }) }) : /* @__PURE__ */ jsx(Empty, { description: "This package no dependencies" }) }) });
 };
 const PackageRelationReasonsWithServer = withServerAPI({
   Component: PackageRelationReasons,
@@ -216,7 +186,7 @@ const PackageRelationAlert = ({
         );
       }) }),
       type: level === "warn" ? "info" : level,
-      action: /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      action: /* @__PURE__ */ jsxs(Fragment, { children: [
         packages && packages.length > 0 ? /* @__PURE__ */ jsx(
           TextDrawer,
           {

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

@@ -0,0 +1,5 @@
+import "./package-relation_module.css";
+var package_relation_module_default = { "dot": "dot_2bb66", "filePath": "filePath_2bb66", "arrow": "arrow_2bb66" };
+export {
+  package_relation_module_default as default
+};

package/dist/components/Alert/package-relation_module.css

@@ -0,0 +1,23 @@
+.dot_2bb66 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.filePath_2bb66 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #eaedf1;
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+
+.arrow_2bb66 {
+  position: relative;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+  color: #2994ff;
+}

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

@@ -1,5 +1,6 @@
 import { Rule } from '@rsdoctor/types';
 import React from 'react';
+import type { CheckSyntax } from '@rsbuild/plugin-check-syntax';
 export interface AlertProps extends Omit<PackageRelationAlertProps, 'data'> {
     data: Rule.RuleStoreDataItem;
     cwd: string;
@@ -23,6 +24,10 @@ export interface CodeViewAlertProps {
     data: Rule.CodeViewRuleStoreData;
     cwd: string;
 }
+type CheckSyntaxError = CheckSyntax['errors'] extends Array<infer T> ? T : false;
 export interface LinkAlertProps {
-    data: Rule.LinkRuleStoreData;
+    data: (Rule.RuleStoreDataItem & {
+        error?: CheckSyntaxError;
+    })[];
 }
+export {};

package/dist/components/Alerts/{common.d.ts → bundle-alert.d.ts}

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Rule } from '@rsdoctor/types';
 import { ViewMode } from '../../constants';
 import { AlertProps } from '../Alert/types';
-interface CommonAlertsContainerProps {
+import type { Rule } from '@rsdoctor/types';
+interface BundleAlertProps {
     title: string;
     cwd: string;
     dataSource: Rule.RuleStoreDataItem[];
@@ -11,5 +10,5 @@ interface CommonAlertsContainerProps {
     setViewMode(mode: ViewMode): void;
     extraCom?: JSX.Element | undefined;
 }
-export declare const CommonAlertsContainer: React.FC<CommonAlertsContainerProps>;
+export declare const BundleAlert: React.FC<BundleAlertProps>;
 export {};

package/dist/components/Alerts/bundle-alert.js

@@ -0,0 +1,156 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tabs, Empty, Tag } from "antd";
+import { Card } from "../Card";
+import { ECMAVersionCheck } from "../Alert/ecma-version-check";
+import { Overview } from "../Overall/overview";
+import { AlertCollapse } from "./collapse";
+import { CommonList } from "./list";
+import styles from "./bundle-alert.module";
+import { useState } from "react";
+const BundleAlert = ({
+  title,
+  dataSource,
+  extraData
+}) => {
+  const [activekey, setActiveKey] = useState("E1001");
+  const tabData = [
+    {
+      key: "E1001",
+      label: "Duplicate Packages",
+      data: []
+    },
+    {
+      key: "E1002",
+      label: "Default Import Check",
+      data: []
+    },
+    {
+      key: "E1003",
+      label: "Loader Performance Optimization",
+      data: []
+    },
+    {
+      key: "E1004",
+      label: "ECMA Version Check",
+      data: []
+    }
+  ];
+  dataSource.forEach((data) => {
+    const target = tabData.find((td) => td.key === data.code)?.data;
+    target?.push(data);
+  });
+  const tabItems = tabData.map((td) => {
+    const tagStyle = activekey === td.key ? {
+      border: "1px solid #91D5FF",
+      backgroundColor: "#E6F7FF"
+    } : {};
+    const tagTextStyle = activekey === td.key ? {
+      color: "#1890FF"
+    } : {};
+    const LabelComponent = () => /* @__PURE__ */ jsx(
+      Overview,
+      {
+        style: {
+          backgroundColor: "transparent",
+          paddingLeft: 0,
+          paddingRight: 0,
+          width: "100%"
+        },
+        title: /* @__PURE__ */ jsx("span", { className: styles.labelTitle, children: td.label }),
+        description: /* @__PURE__ */ jsxs("div", { className: styles.labelDescription, children: [
+          /* @__PURE__ */ jsx("span", { children: td.data.length }),
+          /* @__PURE__ */ jsx(
+            Tag,
+            {
+              style: { fontFamily: "Menlo", borderRadius: "2px", ...tagStyle },
+              children: /* @__PURE__ */ jsx("span", { style: { ...tagTextStyle }, children: td.key })
+            }
+          )
+        ] })
+      }
+    );
+    let children, description;
+    switch (td.key) {
+      case "E1001":
+        children = /* @__PURE__ */ jsx(AlertCollapse, { data: td.data, extraData });
+        break;
+      case "E1002":
+        children = /* @__PURE__ */ jsx(CommonList, { data: td.data });
+        break;
+      case "E1003":
+        children = /* @__PURE__ */ jsx(CommonList, { data: td.data });
+        break;
+      case "E1004":
+        description = /* @__PURE__ */ jsx("span", { children: "No ECMA Version Check Rules were found. Please refer to 「https://rsdoctor.dev/guide/usage/rule-config」." });
+        children = /* @__PURE__ */ jsx(ECMAVersionCheck, { data: td.data });
+        break;
+      default:
+        children = null;
+        break;
+    }
+    if (!td.data.length) {
+      children = /* @__PURE__ */ jsx(Empty, { description, image: Empty.PRESENTED_IMAGE_SIMPLE });
+    }
+    return {
+      key: td.key,
+      label: /* @__PURE__ */ jsx(LabelComponent, {}),
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          className: styles.card,
+          type: "inner",
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Tag,
+              {
+                style: {
+                  fontFamily: "Menlo",
+                  fontWeight: "700",
+                  fontSize: "13px",
+                  backgroundColor: "#EAEDF1",
+                  borderRadius: "2px"
+                },
+                children: td.key
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: td.label })
+          ] }),
+          children
+        }
+      )
+    };
+  });
+  return /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderRadius: "12px" }, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
+    !dataSource.length ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          minHeight: "480px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Empty,
+          {
+            description: "No Bundle Alerts Data",
+            image: Empty.PRESENTED_IMAGE_SIMPLE
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        onChange: setActiveKey,
+        tabBarGutter: 10,
+        type: "card",
+        defaultActiveKey: "E1001",
+        items: tabItems
+      }
+    )
+  ] }) });
+};
+export {
+  BundleAlert
+};

package/dist/components/Alerts/bundle-alert.module.js

@@ -0,0 +1,5 @@
+import "./bundle-alert_module.css";
+var bundle_alert_module_default = { "card": "card_f9725", "container": "container_f9725", "title": "title_f9725", "labelTitle": "labelTitle_f9725", "labelDescription": "labelDescription_f9725" };
+export {
+  bundle_alert_module_default as default
+};

package/dist/components/Alerts/bundle-alert_module.css

@@ -0,0 +1,46 @@
+.card_f9725 .ant-card-body {
+  padding: 0;
+}
+.card_f9725 .ant-collapse {
+  border-radius: 0;
+  border: none;
+}
+.card_f9725 .ant-collapse > .ant-collapse-item {
+  border-bottom: none;
+}
+
+.container_f9725 {
+  margin-top: -4px;
+  height: 100%;
+}
+.container_f9725 .ant-tabs-nav-list {
+  width: 100%;
+}
+.container_f9725 .ant-tabs-tab {
+  flex: 1 1;
+}
+.container_f9725 .ant-tabs-tab-btn {
+  width: 100%;
+}
+
+.title_f9725 {
+  height: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+}
+
+.labelTitle_f9725 {
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+}
+
+.labelDescription_f9725 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/dist/components/Alerts/bundle.js

@@ -1,16 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { SDK } from "@rsdoctor/types";
-import { hasViewModeFromStorage, useBundleAlertsByErrors, useViewMode } from "../../utils";
-import { CommonAlertsContainer } from "./common";
+import {
+  hasViewModeFromStorage,
+  useBundleAlertsByErrors,
+  useViewMode,
+  useI18n
+} from "../../utils";
+import { BundleAlert } from "./bundle-alert";
 import { withServerAPI } from "../Manifest";
 import { ViewMode } from "../../constants";
 import { PackageRelationReasonsWithServer } from "../Alert/package-relation";
 import { ConfigProvider } from "antd";
-const BundleAlertsBase = ({ filter, project }) => {
+const BundleAlertsBase = ({
+  filter,
+  project
+}) => {
   const { errors, root: cwd } = project;
   const bundleAlerts = useBundleAlertsByErrors(errors);
   const { setBundleAlertsViewMode, viewMode, setViewMode } = useViewMode();
+  const { t } = useI18n();
   const dataSource = filter ? bundleAlerts.filter(filter) : bundleAlerts;
   useEffect(() => {
     if (!hasViewModeFromStorage()) {
@@ -31,16 +40,26 @@ const BundleAlertsBase = ({ filter, project }) => {
             colorInfoBg: "#e6f4ff57",
             colorInfoBorder: "none"
           }
+        },
+        token: {
+          padding: 16,
+          colorText: "rgba(0, 0, 0, 0.85)"
         }
       },
       children: /* @__PURE__ */ jsx(
-        CommonAlertsContainer,
+        BundleAlert,
         {
-          title: "Bundle Alerts",
+          title: t("Bundle Alerts"),
           dataSource,
           extraData: {
             cwd,
-            getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+            getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(
+              PackageRelationReasonsWithServer,
+              {
+                body: { id: res.data.id, target: res.package.target },
+                cwd
+              }
+            )
           },
           viewMode: viewMode.bundleAlerts,
           setViewMode: setBundleAlertsViewMode,

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

@@ -0,0 +1,6 @@
+import type { Rule } from '@rsdoctor/types';
+import type { AlertProps } from '../Alert/types';
+export declare const AlertCollapse: (props: {
+    data: Array<Rule.RuleStoreDataItem>;
+    extraData: Omit<AlertProps, "data">;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Alerts/collapse.js

@@ -0,0 +1,209 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapse, Typography, Divider, Space, Tabs, Tag, Tooltip } from "antd";
+import Icon from "@ant-design/icons";
+import { sumBy } from "lodash-es";
+import Overview from "../Overall/overview";
+import { TextDrawer } from "../TextDrawer";
+import { Title } from "../Title";
+import { Size } from "../../constants";
+import { formatSize } from "../../utils";
+import BundleSizeSvg from "../../common/svg/bundle-size.js";
+import SourceSizeSvg from "../../common/svg/source-size.js";
+import TotalSizeSvg from "../../common/svg/total-size.js";
+import VersionSvg from "../../common/svg/version.js";
+import styles from "./collapse.module";
+const { Paragraph, Text } = Typography;
+const { innerWidth } = window;
+const LabelComponent = (props) => {
+  const { title, description, extra } = props;
+  return /* @__PURE__ */ jsxs("div", { className: styles.label, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.labelContent, children: [
+      /* @__PURE__ */ jsx("div", { children: title }),
+      /* @__PURE__ */ jsx("div", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: extra })
+  ] });
+};
+const AlertCollapse = (props) => {
+  const { data, extraData } = props;
+  const items = data.map((d) => {
+    const { packages } = d;
+    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);
+    const ChildComponent = () => {
+      return packages.map((pkg, idx) => {
+        const version = pkg.target.version;
+        const root = pkg.target.root;
+        const sizeStr = formatSize(pkg.targetSize.sourceSize);
+        const parsedSizeStr = pkg.targetSize.parsedSize ? formatSize(pkg.targetSize.parsedSize) : null;
+        return /* @__PURE__ */ jsxs("div", { className: styles.collapseContainer, children: [
+          /* @__PURE__ */ jsx(
+            Overview,
+            {
+              style: { backgroundColor: "#fff" },
+              title: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: { width: innerWidth > 1500 ? 900 : 700 },
+                  ellipsis: {
+                    tooltip: root
+                  },
+                  children: root
+                }
+              ),
+              description: /* @__PURE__ */ jsxs("div", { className: styles.collapseChild, children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: styles.attribute, children: "Version" }),
+                  /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        style: { fontSize: "18px" },
+                        component: VersionSvg
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: styles.data, children: [
+                      "v",
+                      version
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: styles.attribute, children: "Source size" }),
+                  /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        style: { fontSize: "18px" },
+                        component: SourceSizeSvg
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: styles.data, children: sizeStr })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: styles.attribute, children: "Bundle size" }),
+                  /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        style: { fontSize: "18px" },
+                        component: BundleSizeSvg
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        title: `The bundle size of "${name}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `,
+                        children: /* @__PURE__ */ jsx("span", { className: styles.data, children: parsedSizeStr || "CONCATENATED" })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              icon: /* @__PURE__ */ jsx(
+                Paragraph,
+                {
+                  style: { position: "relative", top: "-10px" },
+                  copyable: { text: root }
+                }
+              )
+            }
+          ),
+          idx !== packages.length - 1 ? /* @__PURE__ */ jsx(Divider, { style: { margin: "10px 0" } }) : null
+        ] });
+      });
+    };
+    return {
+      key: d.code,
+      label: /* @__PURE__ */ jsx(
+        LabelComponent,
+        {
+          title: /* @__PURE__ */ jsx(Tag, { style: { backgroundColor: "#EAEDF1", borderRadius: "2px" }, children: /* @__PURE__ */ jsx("span", { className: styles.pkgName, children: name }) }),
+          description: `${packages.length} versions was found`,
+          extra: /* @__PURE__ */ jsxs("div", { className: styles.extraContainer, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
+              /* @__PURE__ */ jsx(Icon, { style: { fontSize: "18px" }, component: TotalSizeSvg }),
+              /* @__PURE__ */ jsx("span", { className: styles.data, children: totalSizeStr })
+            ] }),
+            packages && packages.length > 0 ? /* @__PURE__ */ jsx(
+              TextDrawer,
+              {
+                text: "Show Relations",
+                buttonProps: { size: "small" },
+                drawerProps: { title: d.title, width: "60%" },
+                children: /* @__PURE__ */ jsxs(
+                  Space,
+                  {
+                    direction: "vertical",
+                    className: "alert-space",
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Space,
+                        {
+                          style: {
+                            marginBottom: Size.BasePadding / 2,
+                            width: "100%"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Title,
+                              {
+                                text: /* @__PURE__ */ jsx(Tag, { style: { backgroundColor: "#EAEDF1" }, children: name }),
+                                upperFirst: false
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
+                            /* @__PURE__ */ jsx(Typography.Text, { children: " versions found" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Tabs,
+                        {
+                          size: "middle",
+                          items: packages.map((pkg) => {
+                            const { target, targetSize } = pkg;
+                            return {
+                              label: /* @__PURE__ */ jsxs(Space, { className: styles.drawerLabelTitle, children: [
+                                /* @__PURE__ */ jsxs("div", { children: [
+                                  "v",
+                                  target.version
+                                ] }),
+                                /* @__PURE__ */ jsx(Tag, { className: styles.drawerLabelSize, children: formatSize(targetSize.sourceSize) })
+                              ] }),
+                              key: `${target.root}${target.name}${target.version}`,
+                              children: extraData.getPackageRelationContentComponent({
+                                data: d,
+                                package: pkg
+                              })
+                            };
+                          })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) : null
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ jsx(ChildComponent, {})
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    Collapse,
+    {
+      style: { width: "100%" },
+      defaultActiveKey: ["E1001"],
+      items
+    }
+  );
+};
+export {
+  AlertCollapse
+};