@rsdoctor/components 0.0.2-beta.0 → 0.0.2-beta.1

package/dist/components/Alert/change.js

@@ -72,7 +72,7 @@ const CodeChangeAlert = ({ data, cwd }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: Description,
-      type: isFixed ? "success" : level === "warn" ? "warning" : level,
+      type: isFixed ? "success" : level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(Space, { children: [
         /* @__PURE__ */ jsx(
           TextDrawer,

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

@@ -2,7 +2,7 @@ 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 });
+  return /* @__PURE__ */ jsx(Alert, { type: level === "warn" ? "info" : level, description });
 };
 export {
   FileRelationAlert

package/dist/components/Alert/index.css

@@ -27,3 +27,6 @@
   width: 100%;
   height: 100%;
 }
+.ant-alert-warning {
+  border: none;
+}

package/dist/components/Alert/link.js

@@ -14,7 +14,7 @@ const LinkRuleAlert = ({ data }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: description } }),
-      type: level === "warn" ? "warning" : level,
+      type: level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(Button, { type: "link", onClick: navigate, size: "small", children: [
         "More",
         /* @__PURE__ */ jsx(InfoCircleOutlined, {})

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

@@ -24,7 +24,7 @@ import { Space, Alert, Button, Typography, Divider, Tabs, Row, Col, Timeline, Ca
 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 { useRuleIndexNavigate, formatSize, useI18n, useWindowWidth } from "../../utils";
 import { TextDrawer } from "../TextDrawer";
 import { Title } from "../Title";
 import { Size, Color } from "../../constants";
@@ -92,6 +92,7 @@ const PackageRelationAlert = ({
   const navigate = useRuleIndexNavigate(code, data.link);
   const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
   const totalSizeStr = formatSize(totalSize);
+  const windowWith = useWindowWidth();
   const { name } = packages.find((e) => !!e.target.name).target;
   const versions = packages.map((item) => item.target.version);
   return /* @__PURE__ */ jsx(
@@ -154,16 +155,16 @@ const PackageRelationAlert = ({
           /* @__PURE__ */ jsx(
             Typography.Paragraph,
             {
-              style: { marginBottom: 0 },
+              style: { marginBottom: 0, width: windowWith > 1500 ? "50vw" : windowWith > 1200 ? "40vw" : "30vw" },
               copyable: { text: el.root },
-              ellipsis: { rows: 2, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
+              ellipsis: { rows: 1, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
               code: true,
               children: el.root
             }
           )
         ] }, el.version);
       }) }),
-      type: level === "warn" ? "warning" : level,
+      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: [

package/dist/components/Alert/view.js

@@ -42,7 +42,7 @@ const CodeViewAlert = ({ data, cwd }) => {
         /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title })
       ] }),
       description: Description,
-      type: level === "warn" ? "warning" : level,
+      type: level === "warn" ? "info" : 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: [

package/dist/components/Alerts/bundle.js

@@ -6,6 +6,7 @@ import { CommonAlertsContainer } from "./common";
 import { withServerAPI } from "../Manifest";
 import { ViewMode } from "../../constants";
 import { PackageRelationReasonsWithServer } from "../Alert/package-relation";
+import { ConfigProvider } from "antd";
 const BundleAlertsBase = ({ filter, project }) => {
   const { errors, root: cwd } = project;
   const bundleAlerts = useBundleAlertsByErrors(errors);
@@ -22,17 +23,30 @@ const BundleAlertsBase = ({ filter, project }) => {
     }
   }, []);
   return /* @__PURE__ */ jsx(
-    CommonAlertsContainer,
+    ConfigProvider,
     {
-      title: "Bundle Alerts",
-      dataSource,
-      extraData: {
-        cwd,
-        getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+      theme: {
+        components: {
+          Alert: {
+            colorInfoBg: "#e6f4ff57",
+            colorInfoBorder: "none"
+          }
+        }
       },
-      viewMode: viewMode.bundleAlerts,
-      setViewMode: setBundleAlertsViewMode,
-      cwd
+      children: /* @__PURE__ */ jsx(
+        CommonAlertsContainer,
+        {
+          title: "Bundle Alerts",
+          dataSource,
+          extraData: {
+            cwd,
+            getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+          },
+          viewMode: viewMode.bundleAlerts,
+          setViewMode: setBundleAlertsViewMode,
+          cwd
+        }
+      )
     }
   );
 };

package/dist/components/Badge/index.js

@@ -19,7 +19,6 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "antd";
-import { Color } from "../../constants";
 var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
   BadgeType2["Default"] = "default";
   BadgeType2["Success"] = "success";
@@ -28,10 +27,10 @@ var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
   return BadgeType2;
 })(BadgeType || {});
 const BadgeColorMap = {
-  ["default" /* Default */]: "linear-gradient(to bottom, #1182c2, #0273b4)",
-  ["success" /* Success */]: "linear-gradient(to bottom, #4dc71f, #3fb911)",
-  ["warn" /* Warn */]: "linear-gradient(to bottom, #d9b32f, #c9a319)",
-  ["error" /* Error */]: `linear-gradient(to bottom, #da644e, ${Color.Red})`
+  ["default" /* Default */]: "linear-gradient(to bottom, #3ea2ff 0%, #0072db 100%)",
+  ["success" /* Success */]: "linear-gradient(to bottom, #6cf42a 0%, #52C41A 100%)",
+  ["warn" /* Warn */]: "linear-gradient(to bottom, #ffc100 0%, #f59025 100%)",
+  ["error" /* Error */]: `linear-gradient(to bottom, rgb(250 127 22), #FF4D4F 100%)`
 };
 const Badge = ({ label, value, type = "default", tooltip }) => {
   const height = 22;
@@ -72,7 +71,7 @@ const Badge = ({ label, value, type = "default", tooltip }) => {
             style: __spreadProps(__spreadValues({}, commonStyle), {
               borderTopLeftRadius: borderRadius,
               borderBottomLeftRadius: borderRadius,
-              background: "linear-gradient(to bottom, #5d5d5d, #4f4f4f)"
+              background: "linear-gradient(to bottom, #525252a3 0%, #1F1F1F 100%)"
             }),
             children: label
           }

package/dist/components/Charts/loader.js

@@ -12,6 +12,7 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
   const { isDark } = useTheme();
   const ref = useRef(null);
   const groupByLoader = useMemo(() => groupBy(loaders, (e) => e.loader), [loaders]);
+  console.log("Loader Data:", groupByLoader);
   const formatterForLoader = useCallback((raw) => {
     const { name, data: data2 } = raw;
     const loaderName = name.replace(" total", "");
@@ -23,15 +24,6 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
   const data = useMemo(() => {
     return Object.keys(groupByLoader).map((loaderName) => {
       const list = groupByLoader[loaderName] || [];
-      if (list.length === 1) {
-        const { startAt, endAt } = list[0];
-        return {
-          p: loaderName,
-          n: loaderName,
-          s: startAt,
-          e: endAt
-        };
-      }
       const { start, end } = findLoaderTotalTiming(list);
       return {
         p: loaderName,
@@ -51,6 +43,7 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
       };
     });
   }, [groupByLoader]);
+  console.log("Loader Transformed Data:", data);
   if (!data.length)
     return /* @__PURE__ */ jsx(Empty, {});
   return /* @__PURE__ */ jsx(

package/dist/components/FileTree/index.js

@@ -15,15 +15,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Space } from "antd";
+import { Space, theme } from "antd";
 import { FileOutlined, FolderOpenOutlined, FolderOutlined, RightOutlined } from "@ant-design/icons";
 import Tree from "rc-tree";
 import { Size } from "../../constants";
 import "./index.css";
 import { useTheme } from "../../utils";
+const { useToken } = theme;
 const FileTree = (props) => {
   const { isDark } = useTheme();
-  const color = isDark ? "#fff" : "#000";
+  const { token } = useToken();
+  const color = isDark ? token.colorWhite : token.colorPrimaryText;
+  const style = { fontSize: token.fontSize };
   return /* @__PURE__ */ jsx(
     Tree,
     __spreadValues({
@@ -35,11 +38,12 @@ const FileTree = (props) => {
             /* @__PURE__ */ jsx(
               RightOutlined,
               {
+                twoToneColor: color,
                 className: `file-tree-switcher-arrow ${expanded ? "file-tree-switcher-arrow-expand" : ""}`,
-                style: { fontSize: 10, color }
+                style
               }
             ),
-            expanded ? /* @__PURE__ */ jsx(FolderOpenOutlined, { style: { fontSize: 14, color } }) : /* @__PURE__ */ jsx(FolderOutlined, { style: { fontSize: 14, color } })
+            expanded ? /* @__PURE__ */ jsx(FolderOpenOutlined, { twoToneColor: color, style }) : /* @__PURE__ */ jsx(FolderOutlined, { twoToneColor: color, style })
           ] });
         }
         return /* @__PURE__ */ jsx(FileOutlined, { style: { marginLeft: Size.BasePadding - 6, color } });

package/dist/components/Layout/header.js

@@ -9,7 +9,7 @@ import {
 import { OverlayAlertsWithButton } from "../Alerts";
 import { BuilderSelect } from "./builder-select";
 import { Menus } from "./menus";
-import icon from "../../assets/icon.7509d763.svg";
+import icon from "../../assets/rsdoctor.508e522f.png";
 import "./header.css";
 const Header = () => {
   const { i18n } = useI18n();
@@ -44,7 +44,7 @@ const Header = () => {
       children: /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", style: { height: Size.NavBarHeight }, wrap: false, children: [
         /* @__PURE__ */ jsx(Col, { style: { height: Size.NavBarHeight, lineHeight: `${Size.NavBarHeight + 2}px` }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", height: "100%" }, children: [
           /* @__PURE__ */ jsx("img", { style: { height: 30 }, src: icon, className: "web-doctor-logo", alt: "logo" }),
-          /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", fontSize: 18, marginLeft: 4 }, children: "Rsdoctor" }),
+          /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", fontSize: 18, marginLeft: 4, marginTop: 8 }, children: "Rsdoctor" }),
           /* @__PURE__ */ jsx(BuilderSelect, {})
         ] }) }),
         /* @__PURE__ */ jsx(Col, { flex: 1, children: /* @__PURE__ */ jsxs(

package/dist/constants.d.ts

@@ -32,7 +32,7 @@ export declare enum Size {
   NavBarHeight = 54,
 }
 export declare enum Color {
-  Red = "rgb(207, 19, 34)",
+  Red = "#e17055",
   Green = "#52c41a",
   Yellow = "#faad14",
   Blue = "#1677ff",

package/dist/constants.js

@@ -39,7 +39,7 @@ var Size = /* @__PURE__ */ ((Size2) => {
   return Size2;
 })(Size || {});
 var Color = /* @__PURE__ */ ((Color2) => {
-  Color2["Red"] = "rgb(207, 19, 34)";
+  Color2["Red"] = "#e17055";
   Color2["Green"] = "#52c41a";
   Color2["Yellow"] = "#faad14";
   Color2["Blue"] = "#1677ff";

package/dist/pages/ModuleAnalyze/components/fileTreeCom.css

@@ -62,27 +62,36 @@
 .rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) {
   border-left: 1px solid #eee;
 }
-.file-tree-com-titles-box .file-tree-com-titles {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles {
   display: flex;
   flex-direction: column;
 }
-.file-tree-com-titles-box .file-tree-com-titles .file-tree-com-node-title {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title {
   display: flex;
   cursor: pointer;
 }
-.file-tree-com-titles-box .file-tree-com-titles .file-tree-com-node-title img {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img {
   cursor: pointer;
 }
-.file-tree-com-titles-box .file-tree-com-titles .file-tree-com-node-title img-tag {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img-tag {
   cursor: pointer;
 }
-.file-tree-com-titles-box .file-tree-com-titles .file-tree-com-node-title-selected {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-selected {
   background-color: yellow;
 }
-.file-tree-com-titles-box .file-tree-com-titles .file-tree-com-node-title-tag {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-tag {
   margin-inline-end: 0;
 }
-.file-tree-com-node-title-code .file-tree-com-titles-box .file-tree-com-titles-tag {
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-code-tag {
   cursor: pointer;
   padding: 0 2px;
 }
+.rc-tree-indent {
+  display: inline-block;
+  height: 0;
+  vertical-align: bottom;
+}
+.rc-tree-indent-unit {
+  display: inline-block;
+  width: 14px;
+}

package/dist/utils/hooks.d.ts

@@ -27,4 +27,5 @@ export declare function useCompileAlertsByErrors(errors: Manifest.DoctorManifest
 export declare function useBundleAlertsByErrors(errors: Manifest.DoctorManifestData['errors']): Rule.RuleStoreDataItem[];
 export declare function useDuplicatePackagesByErrors(errors: Manifest.DoctorManifestData['errors']): Rule.PackageRelationDiffRuleStoreData[];
 export declare function useWebpackConfigurationByConfigs(configs?: SDK.ConfigData): SDK.WebpackConfigData | null | undefined;
-export declare function useDetectIfCloudIdeEnv(): boolean;
+export declare function useDetectIfCloudIdeEnv(): boolean;
+export declare function useWindowWidth(): number;

package/dist/utils/hooks.js

@@ -52,7 +52,7 @@ var __async = (__this, __arguments, generator) => {
 import { Algorithm } from "@rsdoctor/utils/common";
 import { Client, Rule } from "@rsdoctor/types";
 import { uniqBy, isArray, defaults } from "lodash-es";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useLocation } from "react-router-dom";
 import parse from "url-parse";
@@ -230,6 +230,17 @@ function useDetectIfCloudIdeEnv() {
   }
   return false;
 }
+function useWindowWidth() {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowWidth;
+}
 export {
   useBundleAlertsByErrors,
   useBundleAlertsByManifest,
@@ -252,5 +263,6 @@ export {
   useUniqModules,
   useUniqModulesByManifest,
   useUrlQuery,
-  useWebpackConfigurationByConfigs
+  useWebpackConfigurationByConfigs,
+  useWindowWidth
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "0.0.2-beta.0",
+  "version": "0.0.2-beta.1",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -70,9 +70,9 @@
     "terser": "^5.26.0",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "0.0.2-beta.0",
-    "@rsdoctor/types": "0.0.2-beta.0",
-    "@rsdoctor/utils": "0.0.2-beta.0"
+    "@rsdoctor/types": "0.0.2-beta.1",
+    "@rsdoctor/graph": "0.0.2-beta.1",
+    "@rsdoctor/utils": "0.0.2-beta.1"
   },
   "publishConfig": {
     "access": "public",

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

@@ -1,21 +0,0 @@
-<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>