@rsdoctor/components 0.0.2-beta.0

package/dist/components/Alerts/bundle.js

@@ -0,0 +1,47 @@
+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 { withServerAPI } from "../Manifest";
+import { ViewMode } from "../../constants";
+import { PackageRelationReasonsWithServer } from "../Alert/package-relation";
+const BundleAlertsBase = ({ filter, project }) => {
+  const { errors, root: cwd } = project;
+  const bundleAlerts = useBundleAlertsByErrors(errors);
+  const { setBundleAlertsViewMode, viewMode, setViewMode } = useViewMode();
+  const dataSource = filter ? bundleAlerts.filter(filter) : bundleAlerts;
+  useEffect(() => {
+    if (!hasViewModeFromStorage()) {
+      setViewMode(
+        {
+          bundleAlerts: bundleAlerts.length >= 5 ? ViewMode.Group : ViewMode.List
+        },
+        false
+      );
+    }
+  }, []);
+  return /* @__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
+    }
+  );
+};
+const BundleAlerts = withServerAPI({
+  api: SDK.ServerAPI.API.GetProjectInfo,
+  responsePropName: "project",
+  Component: BundleAlertsBase
+});
+export {
+  BundleAlerts,
+  BundleAlertsBase
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Rule } from '@rsdoctor/types';
+import { ViewMode } from '../../constants';
+import { AlertProps } from '../Alert/types';
+interface CommonAlertsContainerProps {
+  title: string;
+  cwd: string;
+  dataSource: Rule.RuleStoreDataItem[];
+  extraData: Omit<AlertProps, 'data'>;
+  viewMode: ViewMode;
+  setViewMode(mode: ViewMode): void;
+  extraCom?: JSX.Element | undefined;
+}
+export declare const CommonAlertsContainer: React.FC<CommonAlertsContainerProps>;
+export {};

package/dist/components/Alerts/common.js

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapse, Space, Radio, Typography, Tooltip } from "antd";
+import { useMemo } from "react";
+import { AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import { Rule } from "@rsdoctor/types";
+import { groupBy, values } from "lodash-es";
+import { Size, ViewMode } from "../../constants";
+import { Alert } from "../Alert";
+import { Card } from "../Card";
+import { Badge as Bdg } from "../Badge";
+const LevelMap = {
+  warn: 1,
+  error: 2
+};
+const CommonAlertsList = ({ dataSource, extraData }) => {
+  const _dataSource = useMemo(
+    () => dataSource.slice().sort((a, b) => {
+      return LevelMap[b.level] - LevelMap[a.level];
+    }),
+    [dataSource]
+  );
+  return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: _dataSource.map((err, i) => {
+    return /* @__PURE__ */ jsx(Alert, __spreadValues({ data: err }, extraData), i);
+  }) });
+};
+const CommonAlertsGroup = ({ dataSource, extraData }) => {
+  const _dataSource = useMemo(() => values(groupBy(dataSource, (e) => e.code)), [dataSource]);
+  return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: /* @__PURE__ */ jsx(Collapse, { children: _dataSource.map((el) => {
+    var _a;
+    const [first] = el;
+    return /* @__PURE__ */ jsx(
+      Collapse.Panel,
+      {
+        header: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, style: { cursor: "pointer" }, children: first.code }),
+          /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: ((_a = Rule.RuleErrorMap[first.code]) == null ? void 0 : _a.title) || first.title }),
+          /* @__PURE__ */ jsx(Bdg, { label: "count", value: el.length, type: "error" })
+        ] }),
+        children: /* @__PURE__ */ jsx(Space, { direction: "vertical", size: 16, children: el.map((err, i) => {
+          return /* @__PURE__ */ jsx(Alert, __spreadValues({ data: err }, extraData), i);
+        }) })
+      },
+      first.code
+    );
+  }) }) });
+};
+const CommonAlertsContainer = ({
+  title,
+  dataSource,
+  extraData,
+  viewMode,
+  setViewMode,
+  extraCom
+}) => {
+  if (!dataSource.length)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title,
+      style: { marginTop: Size.BasePadding },
+      collapsable: true,
+      extra: extraCom || /* @__PURE__ */ jsx(
+        Radio.Group,
+        {
+          options: [
+            {
+              label: /* @__PURE__ */ jsx(Tooltip, { title: "display by list", children: /* @__PURE__ */ jsx(UnorderedListOutlined, {}) }),
+              value: ViewMode.List
+            },
+            {
+              label: /* @__PURE__ */ jsx(Tooltip, { title: "display by group", children: /* @__PURE__ */ jsx(AppstoreOutlined, {}) }),
+              value: ViewMode.Group
+            }
+          ],
+          value: viewMode,
+          optionType: "button",
+          size: "small",
+          onChange: (v) => {
+            setViewMode(v.target.value);
+          }
+        }
+      ),
+      children: viewMode === ViewMode.List ? /* @__PURE__ */ jsx(CommonAlertsList, { dataSource, extraData }) : /* @__PURE__ */ jsx(CommonAlertsGroup, { dataSource, extraData })
+    }
+  );
+};
+export {
+  CommonAlertsContainer
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Rule, SDK } from '@rsdoctor/types';
+interface CompileAlertsProps {
+  filter?(alert: Rule.RuleStoreDataItem): boolean;
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}
+export declare const CompileAlerts: React.FC<Omit<CompileAlertsProps, "project"> & Partial<{
+  body?: any;
+}>>;
+export {};

package/dist/components/Alerts/compile.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { SDK } from "@rsdoctor/types";
+import { hasViewModeFromStorage, useCompileAlertsByErrors, useViewMode } from "../../utils";
+import { CommonAlertsContainer } from "./common";
+import { withServerAPI } from "../Manifest";
+import { ViewMode } from "../../constants";
+import { PackageRelationReasonsWithServer } from "../Alert/package-relation";
+const CompileAlertsBase = ({ filter, project }) => {
+  const { root: cwd, errors } = project;
+  const compileAlerts = useCompileAlertsByErrors(errors);
+  const { setCompileAlertsViewMode, viewMode, setViewMode } = useViewMode();
+  const dataSource = filter ? compileAlerts.filter(filter) : compileAlerts;
+  useEffect(() => {
+    if (!hasViewModeFromStorage()) {
+      setViewMode(
+        {
+          compileAlerts: compileAlerts.length >= 5 ? ViewMode.Group : ViewMode.List
+        },
+        false
+      );
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    CommonAlertsContainer,
+    {
+      title: "Compile Alerts",
+      dataSource,
+      extraData: {
+        cwd,
+        getPackageRelationContentComponent: (res) => /* @__PURE__ */ jsx(PackageRelationReasonsWithServer, { body: { id: res.data.id, target: res.package.target }, cwd })
+      },
+      viewMode: viewMode.compileAlerts,
+      setViewMode: setCompileAlertsViewMode,
+      cwd
+    }
+  );
+};
+const CompileAlerts = withServerAPI({
+  api: SDK.ServerAPI.API.GetProjectInfo,
+  responsePropName: "project",
+  Component: CompileAlertsBase
+});
+export {
+  CompileAlerts
+};

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

@@ -0,0 +1,3 @@
+export * from './bundle';
+export * from './compile';
+export * from './overlay';

package/dist/components/Alerts/index.js

@@ -0,0 +1,3 @@
+export * from "./bundle";
+export * from "./compile";
+export * from "./overlay";

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+import 'rc-dialog/assets/index.css';
+export declare const OverlayAlertsModal: React.FC<{
+  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+  open: boolean;
+  onClose(): void;
+}>;
+export declare const OverlayAlertsTips: React.FC<{
+  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+  defaultOpen?: boolean;
+}>;
+export declare const OverlayAlertsButton: React.FC<{
+  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+}>;
+export declare const OverlayAlertsWithButton: React.FC<Omit<{
+  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+}, "alerts"> & Partial<{
+  body?: any;
+}>>;
+export declare const OverlayAlertsWithTips: React.FC<Omit<{
+  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+  defaultOpen?: boolean | undefined;
+}, "alerts"> & Partial<{
+  body?: any;
+}>>;

package/dist/components/Alerts/overlay.js

@@ -0,0 +1,154 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { SDK } from "@rsdoctor/types";
+import { Alert, Button, Col, Collapse, Row, Tag, Typography } from "antd";
+import { BugOutlined, CloseCircleOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
+import Dialog from "rc-dialog";
+import Ansi from "ansi-to-react";
+import { withServerAPI } from "../Manifest";
+import { Size, Color } from "../../constants";
+import "rc-dialog/assets/index.css";
+function getOverlayAlertsMessage(alerts) {
+  let warns = 0;
+  let errors = 0;
+  alerts.forEach((item) => {
+    if (item.level === "warn") {
+      warns++;
+    } else {
+      errors++;
+    }
+  });
+  const suffixText = warns !== 0 && errors !== 0 ? "problems" : warns === 0 ? "errors" : "warns";
+  const fontSize = 16;
+  return {
+    title: `${alerts.length} compiled ${suffixText}`,
+    detail: /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { color: "#fff", marginBottom: 0 }, children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", fontSize }, children: "Compiled with " }),
+      /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { color: Color.Red, fontSize }, children: [
+        errors,
+        " errors"
+      ] }),
+      /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", fontSize }, children: " and " }),
+      /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { color: Color.Yellow, fontSize }, children: [
+        warns,
+        " warnings"
+      ] })
+    ] }),
+    warns,
+    errors
+  };
+}
+const OverlayAlertsModal = ({ alerts = [], open, onClose }) => {
+  if (!alerts.length)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      visible: open,
+      onClose: () => onClose(),
+      style: { width: "100%", height: "100%", margin: 0, zIndex: 1e3 },
+      closable: false,
+      modalRender: (e) => {
+        return React.cloneElement(e, {
+          style: {
+            background: "rgba(0, 0, 0, 0.7)",
+            color: "#fff",
+            height: "100%",
+            overflow: "scroll",
+            borderRadius: 0
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", children: [
+          getOverlayAlertsMessage(alerts).detail,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => onClose(),
+              type: "text",
+              style: { color: "#fff" },
+              size: "large",
+              icon: /* @__PURE__ */ jsx(CloseCircleOutlined, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Row, { gutter: [0, Size.BasePadding], children: alerts.map((e) => {
+          return /* @__PURE__ */ jsx(Col, { span: 24, style: { whiteSpace: "pre-wrap", lineHeight: `16px`, fontSize: 14 }, children: /* @__PURE__ */ jsx(
+            Collapse,
+            {
+              ghost: true,
+              style: { background: "#000" },
+              defaultActiveKey: [e.id],
+              expandIcon: (e2) => {
+                return e2.isActive ? /* @__PURE__ */ jsx(DownOutlined, { style: { color: "#fff" } }) : /* @__PURE__ */ jsx(RightOutlined, { style: { color: "#fff" } });
+              },
+              children: /* @__PURE__ */ jsx(
+                Collapse.Panel,
+                {
+                  header: /* @__PURE__ */ jsxs("div", { style: { color: "#fff" }, children: [
+                    e.level === "warn" ? /* @__PURE__ */ jsx(Tag, { color: Color.Yellow, children: "WARNING" }) : /* @__PURE__ */ jsx(Tag, { color: Color.Red, children: "ERROR" }),
+                    /* @__PURE__ */ jsx(Ansi, { children: e.description || e.title })
+                  ] }),
+                  children: /* @__PURE__ */ jsx("div", { style: { color: "#fff" }, children: /* @__PURE__ */ jsx(Ansi, { children: e.stack }) })
+                },
+                e.id
+              )
+            }
+          ) }, e.id);
+        }) })
+      ]
+    }
+  );
+};
+const OverlayAlertsTips = ({ alerts = [], defaultOpen = alerts.length > 0 }) => {
+  if (!alerts.length)
+    return null;
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        banner: true,
+        message: React.cloneElement(getOverlayAlertsMessage(alerts).detail, {
+          style: {
+            color: "#000"
+          }
+        }),
+        icon: /* @__PURE__ */ jsx(BugOutlined, {}),
+        action: /* @__PURE__ */ jsx(Button, { onClick: () => setOpen(true), size: "small", children: "More" })
+      }
+    ),
+    /* @__PURE__ */ jsx(OverlayAlertsModal, { alerts, open, onClose: () => setOpen(false) })
+  ] });
+};
+const OverlayAlertsButton = ({ alerts = [] }) => {
+  if (!alerts.length)
+    return null;
+  const { errors } = getOverlayAlertsMessage(alerts);
+  const defaultOpen = errors > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(BugOutlined, {}), danger: true, size: "small", onClick: () => setOpen(!open), children: getOverlayAlertsMessage(alerts).title }),
+    /* @__PURE__ */ jsx(OverlayAlertsModal, { alerts, open, onClose: () => setOpen(false) })
+  ] });
+};
+const OverlayAlertsWithButton = withServerAPI({
+  api: SDK.ServerAPI.API.GetOverlayAlerts,
+  Component: OverlayAlertsButton,
+  responsePropName: "alerts",
+  fallbackComponent: () => null
+});
+const OverlayAlertsWithTips = withServerAPI({
+  api: SDK.ServerAPI.API.GetOverlayAlerts,
+  Component: OverlayAlertsTips,
+  responsePropName: "alerts",
+  fallbackComponent: () => null
+});
+export {
+  OverlayAlertsButton,
+  OverlayAlertsModal,
+  OverlayAlertsTips,
+  OverlayAlertsWithButton,
+  OverlayAlertsWithTips
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare enum BadgeType {
+  Default = "default",
+  Success = "success",
+  Warn = "warn",
+  Error = "error",
+}
+export declare const BadgeColorMap: {
+  default: string;
+  success: string;
+  warn: string;
+  error: string;
+};
+interface BadgeProps {
+  label: string | number | React.ReactNode;
+  value: string | number | React.ReactNode;
+  type?: BadgeType | `${BadgeType}`;
+  tooltip?: true | string | React.ReactNode;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export {};

package/dist/components/Badge/index.js

@@ -0,0 +1,105 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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";
+  BadgeType2["Warn"] = "warn";
+  BadgeType2["Error"] = "error";
+  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})`
+};
+const Badge = ({ label, value, type = "default", tooltip }) => {
+  const height = 22;
+  const borderRadius = 4;
+  const commonStyle = {
+    height: "100%",
+    lineHeight: `${height}px`,
+    width: "auto",
+    display: "inline-block",
+    boxSizing: "border-box",
+    padding: `0 6px`,
+    color: "#fff",
+    fontSize: 12,
+    textAlign: "center",
+    verticalAlign: "middle"
+  };
+  const Content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height,
+        margin: 0,
+        padding: 0,
+        boxSizing: "border-box",
+        borderRadius: 4,
+        fontSize: 0,
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: __spreadProps(__spreadValues({}, commonStyle), {
+              borderTopLeftRadius: borderRadius,
+              borderBottomLeftRadius: borderRadius,
+              background: "linear-gradient(to bottom, #5d5d5d, #4f4f4f)"
+            }),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: __spreadProps(__spreadValues({}, commonStyle), {
+              borderTopRightRadius: borderRadius,
+              borderBottomRightRadius: borderRadius,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              background: BadgeColorMap[type] || BadgeColorMap["default" /* Default */]
+            }),
+            children: value
+          }
+        )
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: tooltip === true ? value : tooltip, placement: "topLeft", children: Content });
+  }
+  return Content;
+};
+export {
+  Badge,
+  BadgeColorMap,
+  BadgeType
+};

package/dist/components/Card/diff.d.ts

@@ -0,0 +1,23 @@
+import { Client } from '@rsdoctor/types';
+import React from 'react';
+export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
+  titles: Array<string> | [string | React.ReactNode];
+  datas: Array<DiffCardContentProps['data']>;
+  showPercentInTitle?: boolean;
+}
+export interface DiffCardContentProps {
+  data: Client.DoctorClientAssetsDiffItem;
+  formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
+}
+export interface PercentProps {
+  percent: number;
+  state: Client.DoctorClientDiffState;
+  fontSize?: React.CSSProperties['fontSize'];
+}
+export declare const SizePercent: React.FC<{
+  baseline: number;
+  current: number;
+} & Omit<PercentProps, 'percent' | 'state'>>;
+export declare const Percent: React.FC<PercentProps>;
+export declare const DiffCardContent: React.FC<DiffCardContentProps>;
+export declare const DiffCard: React.FC<DiffCardProps>;