@rsdoctor/components 0.4.13 → 1.0.0-alpha.1

package/dist/components/Overall/help-center.module.js

@@ -0,0 +1,5 @@
+import "./help-center_module.css";
+var help_center_module_default = { "title": "title_a3408", "container": "container_a3408", "content": "content_a3408" };
+export {
+  help_center_module_default as default
+};

package/dist/components/Overall/help-center_module.css

@@ -0,0 +1,35 @@
+.title_a3408 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  height: 36px;
+  position: relative;
+  top: -12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+
+.container_a3408 {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.container_a3408 .content_a3408 {
+  cursor: pointer;
+  width: 48%;
+  transition: color 0.5s ease;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}
+.container_a3408 .content_a3408:hover {
+  color: #1677ff;
+}

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

@@ -1,5 +1,5 @@
 import "./list_module.css";
-var list_module_default = { "root": "root_17e15" };
+var list_module_default = { "projectOverall": "projectOverall_17e15", "bundleOverall": "bundleOverall_17e15" };
 export {
   list_module_default as default
 };

package/dist/components/Overall/list_module.css

@@ -1,7 +1,17 @@
-.root_17e15 .ant-descriptions-item-label,
-.root_17e15 .ant-descriptions-item-content {
+.projectOverall_17e15 .ant-descriptions-item-label,
+.projectOverall_17e15 .ant-descriptions-item-content {
   font-size: 13px;
+  color: rgba(0, 0, 0, 0.6509803922);
 }
-.root_17e15 .ant-descriptions-item {
-  padding-bottom: 6px !important;
+.projectOverall_17e15 .ant-descriptions-item {
+  padding-bottom: 10px !important;
+}
+
+.bundleOverall_17e15 .ant-descriptions-item-label,
+.bundleOverall_17e15 .ant-descriptions-item-content {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.6509803922);
+}
+.bundleOverall_17e15 .ant-descriptions-item {
+  padding-bottom: 0px !important;
 }

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

@@ -0,0 +1,8 @@
+interface OverviewProps {
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    icon?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const Overview: (props: OverviewProps) => import("react/jsx-runtime").JSX.Element;
+export default Overview;

package/dist/components/Overall/overview.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./overview.module";
+const Overview = (props) => {
+  const { title, description, icon, style } = props;
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
+      /* @__PURE__ */ jsx("div", { className: styles.description, children: description })
+    ] }),
+    icon
+  ] });
+};
+var overview_default = Overview;
+export {
+  Overview,
+  overview_default as default
+};

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

@@ -0,0 +1,5 @@
+import "./overview_module.css";
+var overview_module_default = { "container": "container_ec279", "content": "content_ec279", "title": "title_ec279", "description": "description_ec279" };
+export {
+  overview_module_default as default
+};

package/dist/components/Overall/overview_module.css

@@ -0,0 +1,25 @@
+.container_ec279 {
+  width: 100%;
+  display: flex;
+  background: #f6f8fa;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  padding: 8px 20px 8px 20px;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+.container_ec279 .content_ec279 {
+  flex: 1 1;
+}
+.container_ec279 .content_ec279 .title_ec279 {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.6509803922);
+}
+.container_ec279 .content_ec279 .description_ec279 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SDK } from '@rsdoctor/types';
 export declare const ProjectOverall: React.FC<{
     configs: SDK.ConfigData;

package/dist/components/Overall/project.js

@@ -1,15 +1,22 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Space, Row, Col, Descriptions } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Descriptions, Avatar } from "antd";
+import {
+  CloseCircleFilled,
+  WarningFilled,
+  FileFilled,
+  ExperimentFilled
+} from "@ant-design/icons";
 import { filter } from "lodash-es";
-import { useI18n } from "../../utils";
+import { ServerAPIProvider } from "../Manifest";
+import { useI18n, formatSize } from "../../utils";
 import { WebpackConfigurationViewer } from "../Configuration";
 import { Card } from "../Card";
+import { Overview } from "./overview";
+import styles from "./project.module";
 import listStyles from "./list.module";
 import cardStyles from "./card.module";
-import numberButtonStyles from "./NumberButton.module";
-import { TextDrawer } from "../TextDrawer";
-import { BundleAlerts, CompileAlerts, OverlayAlertsWithTips } from "../Alerts";
-import { NumberButton } from "./NumberButton";
+import projectStyles from "./project.module";
+import { SDK } from "@rsdoctor/types";
 const ProjectOverall = ({ configs = [], cwd, envinfo, alerts = [] }) => {
   const { t } = useI18n();
   const warns = filter(alerts, (e) => e.level === "warn").length;
@@ -38,35 +45,93 @@ const ProjectOverall = ({ configs = [], cwd, envinfo, alerts = [] }) => {
       children: cwd
     }
   ];
-  return /* @__PURE__ */ jsxs(Card, { title: t("Project Overall"), extra: /* @__PURE__ */ jsx(WebpackConfigurationViewer, {}), className: cardStyles.card, children: [
-    /* @__PURE__ */ jsxs(Row, { gutter: 16, children: [
-      /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
-        TextDrawer,
-        {
-          button: /* @__PURE__ */ jsx(NumberButton, { theme: errors === 0 ? "success" : "error", number: errors, description: "Errors" }),
-          drawerProps: { title: "Errors List" },
-          children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsx(OverlayAlertsWithTips, { defaultOpen: false }),
-            /* @__PURE__ */ jsx(BundleAlerts, { filter: (r) => r.level === "error" }),
-            /* @__PURE__ */ jsx(CompileAlerts, { filter: (r) => r.level === "error" })
-          ] })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
-        TextDrawer,
-        {
-          button: /* @__PURE__ */ jsx(NumberButton, { theme: warns === 0 ? "success" : "warning", number: warns, description: "Warnings" }),
-          drawerProps: { title: "Warnings List" },
-          children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
-            /* @__PURE__ */ jsx(OverlayAlertsWithTips, { defaultOpen: false }),
-            /* @__PURE__ */ jsx(BundleAlerts, { filter: (r) => r.level === "warn" }),
-            /* @__PURE__ */ jsx(CompileAlerts, { filter: (r) => r.level === "warn" })
-          ] })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(Descriptions, { className: listStyles.root, items, size: "small", column: 1 })
-  ] });
+  return /* @__PURE__ */ jsx(
+    ServerAPIProvider,
+    {
+      api: SDK.ServerAPI.API.GetAssetsSummary,
+      body: { withFileContent: false },
+      children: (res) => {
+        const totalSizeStr = formatSize(res.all.total.size);
+        const totalFiles = res.all.total.count;
+        const [size, unit] = totalSizeStr.split(" ");
+        const overViewData = [
+          {
+            title: "Errors",
+            description: /* @__PURE__ */ jsx("span", { style: { color: "#FF4D4F" }, children: errors }),
+            icon: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                style: { background: "#FF4D4F" },
+                shape: "circle",
+                icon: /* @__PURE__ */ jsx(CloseCircleFilled, { style: { fontSize: "18px" } })
+              }
+            )
+          },
+          {
+            title: "Warnings",
+            description: /* @__PURE__ */ jsx("span", { style: { color: "#FAAD14" }, children: warns }),
+            icon: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                style: { background: "#FAAD14" },
+                shape: "circle",
+                icon: /* @__PURE__ */ jsx(WarningFilled, { style: { fontSize: "18px" } })
+              }
+            )
+          },
+          {
+            title: "Total Files",
+            description: /* @__PURE__ */ jsx("span", { children: totalFiles }),
+            icon: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                style: { background: "#3874F6" },
+                shape: "circle",
+                icon: /* @__PURE__ */ jsx(FileFilled, { style: { fontSize: "18px" } })
+              }
+            )
+          },
+          {
+            title: "Total Size",
+            description: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "20px" }, children: size }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", marginLeft: "5px" }, children: unit })
+            ] }),
+            icon: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                style: { background: "rgba(226, 129, 73)" },
+                shape: "circle",
+                icon: /* @__PURE__ */ jsx(ExperimentFilled, { style: { fontSize: "18px" } })
+              }
+            )
+          }
+        ];
+        return /* @__PURE__ */ jsx(Card, { className: cardStyles.card, children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.left, children: t("Project Overall") }),
+            /* @__PURE__ */ jsx(WebpackConfigurationViewer, {})
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: projectStyles.overview, children: overViewData.map((data, idx) => /* @__PURE__ */ jsx(
+            Overview,
+            {
+              title: data.title,
+              description: /* @__PURE__ */ jsx("span", { children: data.description }),
+              icon: data.icon
+            },
+            idx
+          )) }),
+          /* @__PURE__ */ jsx(
+            Descriptions,
+            {
+              className: listStyles.projectOverall,
+              items
+            }
+          )
+        ] }) });
+      }
+    }
+  );
 };
 export {
   ProjectOverall

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

@@ -0,0 +1,5 @@
+import "./project_module.css";
+var project_module_default = { "overview": "overview_57654", "title": "title_57654", "left": "left_57654" };
+export {
+  project_module_default as default
+};

package/dist/components/Overall/project_module.css

@@ -0,0 +1,19 @@
+.overview_57654 {
+  display: flex;
+  margin-bottom: 19px;
+}
+
+.title_57654 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+.title_57654 .left_57654 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+}

package/dist/components/Select/index.css

@@ -0,0 +1,6 @@
+.loader-select .ant-select-selector {
+  width: 300px;
+}
+.layer-select .ant-select-selector {
+  width: 150px;
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import './index.scss';
 interface LoaderNamesSelectProps {
     style?: React.CSSProperties;
     onChange: (loaders: string[]) => void;

package/dist/components/Select/index.js

@@ -6,6 +6,7 @@ import { KeywordInput } from "../Form/keyword";
 import { Size } from "../../constants";
 import { ServerAPIProvider } from "../Manifest";
 import { SDK } from "@rsdoctor/types";
+import "./index.css";
 const LoaderNamesSelect = ({
   style,
   onChange,
@@ -24,8 +25,9 @@ const LoaderNamesSelect = ({
         mode: "multiple",
         allowClear: true,
         defaultValue: selectLoaders,
+        className: "loader-select",
         style: { width: 300 },
-        dropdownMatchSelectWidth: true,
+        popupMatchSelectWidth: 300,
         placeholder: "select loaders",
         onChange: (e) => {
           setSelectLoaders(e);
@@ -50,6 +52,7 @@ const LoaderLayerSelect = ({ onChange, layers }) => {
       Select,
       {
         allowClear: true,
+        className: "layer-select",
         style: { width: 150 },
         defaultValue: layer,
         placeholder: "select layer",
@@ -71,12 +74,12 @@ const LoaderCommonSelect = ({ onChange, loaderNames }) => {
   useEffect(() => {
     onChange({ loaders: selectLoaders, filename, layer });
   }, [selectLoaders, filename, layer]);
-  return /* @__PURE__ */ jsxs(Row, { style: { marginBottom: Size.BasePadding }, children: [
+  return /* @__PURE__ */ jsxs(Row, { style: { marginBottom: Size.BasePadding, marginLeft: 10 }, children: [
     /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
       LoaderNamesSelect,
       {
         loaderNames,
-        style: { marginRight: Size.BasePadding / 2 },
+        style: { marginRight: Size.BasePadding },
         onChange: (e) => {
           setSelectLoaders(e);
         }
@@ -86,7 +89,7 @@ const LoaderCommonSelect = ({ onChange, loaderNames }) => {
       KeywordInput,
       {
         icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
-        style: { marginRight: Size.BasePadding / 2 },
+        style: { marginRight: Size.BasePadding },
         label: "Filename",
         placeholder: "search filename by keyword",
         onChange: (e) => {

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

@@ -1,11 +1,12 @@
 import { ButtonProps, DrawerProps } from 'antd';
-import React, { CSSProperties, PropsWithChildren } from 'react';
+import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
 export interface TextDrawerProps {
     text?: string | React.ReactNode;
     button?: React.ReactNode;
     buttonProps?: ButtonProps;
     buttonStyle?: CSSProperties;
     drawerProps?: DrawerProps;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
 }
 export declare const TextDrawer: (props: PropsWithChildren<TextDrawerProps>) => JSX.Element;
 export * from './duplicate';

package/dist/components/TextDrawer/index.js

@@ -1,34 +1,45 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CodeOutlined } from "@ant-design/icons";
 import { Button, Drawer } from "antd";
-import React, { useState } from "react";
-import { drawerWidth } from "../../constants";
+import {
+  useState
+} from "react";
 const TextDrawer = (props) => {
   const [visible, setVisible] = useState(false);
-  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    props.button ? /* @__PURE__ */ jsx("div", { onClick: () => setVisible(!visible), children: props.button }) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "link",
-        ...props.buttonProps,
-        onClick: () => setVisible(!visible),
-        style: { padding: 0, ...props.buttonStyle },
-        children: props.text
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Drawer,
-      {
-        maskClosable: true,
-        width: drawerWidth,
-        zIndex: 999,
-        ...props.drawerProps,
-        open: visible,
-        onClose: () => setVisible(false),
-        destroyOnClose: true,
-        children: props.children
-      }
-    )
-  ] });
+  return (
+    // avoid propagation event affect collapse component
+    /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), ...props.containerProps, children: [
+      props.button ? /* @__PURE__ */ jsx("div", { onClick: () => setVisible(!visible), children: props.button }) : props.text ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "link",
+          ...props.buttonProps,
+          onClick: () => setVisible(!visible),
+          style: { padding: 0, ...props.buttonStyle },
+          children: props.text
+        }
+      ) : /* @__PURE__ */ jsx(
+        CodeOutlined,
+        {
+          style: { fontSize: 14, padding: 0 },
+          onClick: () => setVisible(!visible)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Drawer,
+        {
+          maskClosable: true,
+          zIndex: 999,
+          width: "60%",
+          ...props.drawerProps,
+          open: visible,
+          onClose: () => setVisible(false),
+          destroyOnClose: true,
+          children: props.children
+        }
+      )
+    ] })
+  );
 };
 export * from "./duplicate";
 export {

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from './Alert';
 export * from './Alerts';
 export * from './Badge';
 export * from './Card';

package/dist/components/index.js

@@ -1,4 +1,3 @@
-export * from "./Alert";
 export * from "./Alerts";
 export * from "./Badge";
 export * from "./Card";

package/dist/constants.d.ts

@@ -27,7 +27,7 @@ export declare enum APILoaderMode4Dev {
     Default = "default"
 }
 export declare enum Size {
-    BasePadding = 24,
+    BasePadding = 20,
     BaseBorderRadius = 8,
     NavBarHeight = 54
 }

package/dist/constants.js

@@ -33,7 +33,7 @@ var APILoaderMode4Dev = /* @__PURE__ */ ((APILoaderMode4Dev2) => {
   return APILoaderMode4Dev2;
 })(APILoaderMode4Dev || {});
 var Size = /* @__PURE__ */ ((Size2) => {
-  Size2[Size2["BasePadding"] = 24] = "BasePadding";
+  Size2[Size2["BasePadding"] = 20] = "BasePadding";
   Size2[Size2["BaseBorderRadius"] = 8] = "BaseBorderRadius";
   Size2[Size2["NavBarHeight"] = 54] = "NavBarHeight";
   return Size2;