@rsdoctor/components 0.4.13 → 1.0.0-alpha.1

package/dist/components/Loader/executions.js

@@ -1,9 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ClockCircleOutlined } from "@ant-design/icons";
+import { ClockCircleTwoTone } from "@ant-design/icons";
 import Editor from "@monaco-editor/react";
 import {
-  Badge,
-  Button,
   Col,
   Divider,
   Empty,
@@ -13,10 +11,14 @@ import {
   Timeline,
   Tooltip,
   Typography,
-  Tabs
+  Tabs,
+  List
 } from "antd";
 import dayjs from "dayjs";
 import { useCallback, useState } from "react";
+import StepIcon from "../../common/svg/loader/step.js";
+import InputIcon from "../../common/svg/loader/input.js";
+import OutputIcon from "../../common/svg/loader/output.js";
 import { Size } from "../../constants";
 import {
   beautifyPath,
@@ -28,96 +30,67 @@ import { Card } from "../Card";
 import { DiffViewer } from "../CodeViewer";
 import { CodeOpener } from "../Opener";
 import { Title } from "../Title";
-const LoaderInfoItem = ({
-  label,
-  value,
-  ellipsis = false,
-  ...textProps
-}) => {
-  return /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsxs(Space, { children: [
-      /* @__PURE__ */ jsx(Badge, { status: "processing" }),
-      /* @__PURE__ */ jsx("div", { style: { width: 180 }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: label }) }),
-      /* @__PURE__ */ jsx(Divider, { type: "vertical" })
-    ] }) }),
-    /* @__PURE__ */ jsx(Col, { span: 18, children: /* @__PURE__ */ jsx(Typography.Paragraph, { ellipsis, strong: true, ...textProps, children: value }) })
-  ] });
-};
+import styles from "./Analysis/style.module";
 const LoaderPropsItem = ({
   loader,
   resource,
   cwd
 }) => {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Card,
     {
       title: "Loader Details",
       style: { border: "none" },
-      extra: /* @__PURE__ */ jsx(Tag, { icon: /* @__PURE__ */ jsx(ClockCircleOutlined, {}), color: "default", children: dayjs(loader.startAt).format("YYYY-MM-DD HH:mm:ss") }),
-      children: [
+      extra: /* @__PURE__ */ jsx(Tag, { icon: /* @__PURE__ */ jsx(ClockCircleTwoTone, {}), color: "default", children: dayjs(loader.startAt).format("YYYY-MM-DD HH:mm:ss") }),
+      children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
         loader.isPitch ? /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "pitch" }) : null,
-        /* @__PURE__ */ jsxs(
-          Space,
-          {
-            direction: "vertical",
-            style: { padding: Size.BasePadding, wordBreak: "break-all" },
-            children: [
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "file path",
-                  value: beautifyPath(resource.path, cwd),
-                  code: true
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "resource path",
-                  value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: resource.path, loc: "", disabled: true })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "resource query",
-                  value: resource.queryRaw || "-"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "duration",
-                  value: formatCosts(loader.costs),
-                  mark: true
-                }
-              ),
-              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader name", value: loader.loader, code: true }),
-              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader index", value: `${loader.loaderIndex}` }),
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "loader path",
-                  value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: loader.path, loc: "", disabled: true })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoaderInfoItem,
-                {
-                  label: "options",
-                  value: JSON.stringify(loader.options || "-"),
-                  copyable: true,
-                  ellipsis: {
-                    rows: 2,
-                    expandable: true,
-                    symbol: "more"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
+        /* @__PURE__ */ jsxs(List, { size: "large", bordered: true, children: [
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "File Path" }),
+            /* @__PURE__ */ jsx("div", { children: beautifyPath(resource.path, cwd) })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Resource Path" }),
+            /* @__PURE__ */ jsx(CodeOpener, { cwd, url: resource.path, loc: "", disabled: true })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Resource Query" }),
+            /* @__PURE__ */ jsx("div", { children: resource.queryRaw || "-" })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Duration" }),
+            /* @__PURE__ */ jsx("div", { children: formatCosts(loader.costs) })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Loader" }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography.Text, { code: true, children: loader.loader }) })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Loader Index" }),
+            /* @__PURE__ */ jsx("div", { children: `${loader.loaderIndex}` })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Loader Path" }),
+            /* @__PURE__ */ jsx(CodeOpener, { cwd, url: loader.path, loc: "", disabled: true })
+          ] }),
+          /* @__PURE__ */ jsxs(List.Item, { children: [
+            /* @__PURE__ */ jsx("div", { style: { width: 180 }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Options" }) }),
+            /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+            /* @__PURE__ */ jsx(
+              Typography.Paragraph,
+              {
+                ellipsis: {
+                  rows: 2,
+                  expandable: true,
+                  symbol: "more"
+                },
+                copyable: true,
+                children: JSON.stringify(loader.options || "-")
+              }
+            )
+          ] })
+        ] })
+      ] })
     }
   );
 };
@@ -138,7 +111,7 @@ const LoaderExecutions = ({
   const onChange = useCallback((key) => {
     setActiveKey(key);
   }, []);
-  return /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Row, { className: styles.executions, style: { height: "100%" }, children: [
     /* @__PURE__ */ jsx(
       Col,
       {
@@ -151,43 +124,45 @@ const LoaderExecutions = ({
           /* @__PURE__ */ jsx(Title, { text: "Executions" }),
           /* @__PURE__ */ jsx(Timeline, { mode: "left", style: { marginTop: Size.BasePadding }, children: loaders.map((e, i, arr) => {
             const { loader: loader2, isPitch } = e;
+            const costs = formatCosts(e.costs);
             return /* @__PURE__ */ jsxs(
               Timeline.Item,
               {
-                dot: isPitch ? /* @__PURE__ */ jsx(Tag, { style: { marginLeft: 1, fontWeight: 500 }, children: "pitch" }) : /* @__PURE__ */ jsx(ClockCircleOutlined, {}),
+                dot: isPitch ? /* @__PURE__ */ jsx(Tag, { style: { marginLeft: 1, fontWeight: 500 }, children: "pitch" }) : /* @__PURE__ */ jsx(ClockCircleTwoTone, {}),
                 style: { paddingBottom: 10, textAlign: "center" },
                 children: [
-                  /* @__PURE__ */ jsx(Row, { align: "middle", justify: "space-between", gutter: [0, 10], children: /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Tooltip, { title: loader2, trigger: "hover", children: /* @__PURE__ */ jsx(
-                    Button,
+                  /* @__PURE__ */ jsx(Row, { align: "middle", justify: "space-between", gutter: [0, 10], children: /* @__PURE__ */ jsx(Col, { span: 24, className: styles.timeline, children: /* @__PURE__ */ jsx(Tooltip, { title: loader2, trigger: "hover", children: /* @__PURE__ */ jsxs(
+                    "div",
                     {
-                      type: i === currentIndex ? "primary" : "default",
-                      block: true,
+                      className: `${styles.box} ${currentIndex === i ? styles.selected : ""}`,
                       onClick: () => {
                         setCurrentIndex(i);
                       },
                       style: { textAlign: "left" },
-                      children: /* @__PURE__ */ jsxs(
-                        Typography.Text,
-                        {
-                          ellipsis: true,
-                          style: { color: "inherit" },
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              Typography.Text,
-                              {
-                                strong: true,
-                                style: { color: "inherit" },
-                                children: formatCosts(e.costs)
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-                            loader2
-                          ]
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx(Typography.Text, { style: { color: "#000" }, children: costs.match(/[0-9]+/g) }),
+                          " ",
+                          /* @__PURE__ */ jsx(
+                            Typography.Text,
+                            {
+                              style: { color: "rgba(0,0,0,0.45)" },
+                              children: costs.match(/[a-zA-Z]+/g)
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          Typography.Text,
+                          {
+                            style: { color: "rgba(0,0,0,0.65)" },
+                            className: styles.loader,
+                            children: loader2
+                          }
+                        )
+                      ]
                     }
                   ) }) }) }),
-                  i === arr.length - 1 ? null : /* @__PURE__ */ jsx("div", { style: { paddingTop: 10 }, children: /* @__PURE__ */ jsx(Typography.Text, { children: "⬇️" }) })
+                  i === arr.length - 1 ? null : /* @__PURE__ */ jsx("div", { style: { paddingTop: 10 }, children: /* @__PURE__ */ jsx(StepIcon, {}) })
                 ]
               },
               i
@@ -238,7 +213,7 @@ const LoaderExecutions = ({
               /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
                 Editor,
                 {
-                  theme: "vs-dark",
+                  theme: "vs",
                   options: {
                     readOnly: true,
                     domReadOnly: true,
@@ -270,7 +245,7 @@ const LoaderExecutions = ({
               loader.isPitch ? loader.result ? /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
                 Editor,
                 {
-                  theme: "vs-dark",
+                  theme: "vs",
                   options: {
                     readOnly: true,
                     domReadOnly: true,
@@ -295,7 +270,10 @@ const LoaderExecutions = ({
                       style: {
                         padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px`
                       },
-                      children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Input" })
+                      children: /* @__PURE__ */ jsxs(Space, { align: "center", className: styles.space, children: [
+                        /* @__PURE__ */ jsx(InputIcon, {}),
+                        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Input" })
+                      ] })
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -305,7 +283,10 @@ const LoaderExecutions = ({
                       style: {
                         padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px`
                       },
-                      children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Output" })
+                      children: /* @__PURE__ */ jsxs(Space, { align: "center", className: styles.space, children: [
+                        /* @__PURE__ */ jsx(OutputIcon, {}),
+                        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Output" })
+                      ] })
                     }
                   )
                 ] }),

package/dist/components/Loader/step.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const SvgStep = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, fill: "none", viewBox: "0 0 14 14", ...props, children: /* @__PURE__ */ jsx("path", { fill: "#2994FF", d: "M7 10.736 1.7 6.589a.125.125 0 0 0-.201.098v1.208c0 .077.036.15.095.197l5.097 3.989a.5.5 0 0 0 .617 0l5.095-3.99a.248.248 0 0 0 .096-.196V6.687a.125.125 0 0 0-.202-.098L7 10.736Zm0-4.75L1.7 1.839a.125.125 0 0 0-.201.098v1.208c0 .077.036.15.095.197L6.692 7.33a.5.5 0 0 0 .617 0l5.095-3.99a.248.248 0 0 0 .096-.196V1.937a.125.125 0 0 0-.202-.098L7 5.986Z" }) });
+var step_default = SvgStep;
+export {
+  step_default as default
+};

package/dist/components/Opener/code.js

@@ -3,6 +3,7 @@ import { Typography } from "antd";
 import path from "path";
 import { startsWith } from "lodash-es";
 import { VSCode, openVSCode } from "./vscode";
+import { getShortPath } from "../../utils";
 function parseUrl(url) {
   const strs = url.split(" ");
   let res = "";
@@ -54,7 +55,7 @@ const CodeOpener = ({
             },
             style: { cursor: disabled ? "revert" : "pointer" },
             children: [
-              label || url,
+              label || getShortPath(url),
               loc ? `:${loc}` : ""
             ]
           }

package/dist/components/Overall/DataSummary.d.ts

@@ -0,0 +1,8 @@
+export interface DataSummaryProps {
+    theme: 'common' | 'warning';
+    number: string | number;
+    onClick?: () => void;
+    description: string;
+    numberFontSize?: string;
+}
+export declare const DataSummary: ({ theme, number, description, }: DataSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Overall/DataSummary.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "@ant-design/icons";
+import TotalSizeSvg from "../../common/svg/total-size.js";
+import FileSvg from "../../common/svg/file.js";
+import styles from "./DataSummary.module";
+const DataSummary = ({
+  theme,
+  number,
+  description
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[theme]}`, children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        style: { fontSize: "18px", margin: "0 5px" },
+        component: theme === "common" ? FileSvg : TotalSizeSvg
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: styles.description, children: description }),
+    /* @__PURE__ */ jsx("span", { className: styles.data, children: number })
+  ] });
+};
+export {
+  DataSummary
+};

package/dist/components/Overall/DataSummary.module.js

@@ -0,0 +1,5 @@
+import "./DataSummary_module.css";
+var DataSummary_module_default = { "errorNumber": "errorNumber_14ee6", "warningNumber": "warningNumber_14ee6", "successNumber": "successNumber_14ee6", "errorText": "errorText_14ee6", "warningText": "warningText_14ee6", "successText": "successText_14ee6", "errorButton": "errorButton_14ee6", "warningButton": "warningButton_14ee6", "successButton": "successButton_14ee6", "container": "container_14ee6", "icon": "icon_14ee6", "description": "description_14ee6", "data": "data_14ee6", "common": "common_14ee6", "warning": "warning_14ee6" };
+export {
+  DataSummary_module_default as default
+};

package/dist/components/Overall/DataSummary_module.css

@@ -0,0 +1,95 @@
+.errorNumber_14ee6,
+.warningNumber_14ee6,
+.successNumber_14ee6 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.errorNumber_14ee6,
+.errorText_14ee6 {
+  color: #f5222d;
+}
+
+.warningNumber_14ee6,
+.warningText_14ee6 {
+  color: #fa8c16;
+}
+
+.successNumber_14ee6,
+.successText_14ee6 {
+  color: #52c41a;
+}
+
+.errorButton_14ee6,
+.warningButton_14ee6,
+.successButton_14ee6 {
+  width: 100%;
+  height: 90px !important;
+  color: inherit;
+  font-size: inherit !important;
+  padding: 4px 0 8px !important;
+  border-radius: 12px !important;
+}
+
+.errorButton_14ee6 {
+  background-color: rgba(245, 34, 45, 0.08);
+}
+.errorButton_14ee6:hover {
+  background-color: rgba(245, 34, 45, 0.15) !important;
+}
+
+.warningButton_14ee6 {
+  background-color: rgba(250, 139, 22, 0.08);
+}
+.warningButton_14ee6:hover {
+  background-color: rgba(250, 139, 22, 0.15) !important;
+}
+
+.successButton_14ee6 {
+  background-color: rgba(82, 196, 26, 0.08);
+}
+.successButton_14ee6:hover {
+  background-color: rgba(82, 196, 26, 0.15) !important;
+}
+
+.errorText_14ee6,
+.warningText_14ee6,
+.successText_14ee6 {
+  opacity: 0.75;
+  font-size: 13px;
+  padding-bottom: 6px;
+  margin-top: -2px;
+}
+
+.container_14ee6 {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 10px 20px 10px 5px;
+  border-radius: 10px;
+  margin: 10px 0 20px 0;
+}
+.container_14ee6 .icon_14ee6 {
+  margin: 0 5px 0 10px;
+}
+.container_14ee6 .description_14ee6 {
+  margin-right: 5px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.6509803922);
+}
+.container_14ee6 .data_14ee6 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.common_14ee6 {
+  background: #f0f5ff;
+}
+
+.warning_14ee6 {
+  background: #fff7e6;
+}

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { SDK } from '@rsdoctor/types';
+import { Client, SDK } from '@rsdoctor/types';
+import type { TreeDataNode } from 'antd';
+export declare const getFiles: (data: Client.RsdoctorClientAssetsSummary["all"]["total"]) => {
+    treeData: TreeDataNode[];
+};
+export declare const getFilesWithDrawer: (data: Client.RsdoctorClientAssetsSummary["all"]["total"]) => JSX.Element;
 export declare const BundleOverall: React.FC<{
     errors: SDK.ErrorsData;
     cwd: string;