@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/BundleDiff/DiffContainer/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { Client, Manifest, SDK } from '@rsdoctor/types';
+import { UpdateType } from './constants';
+import { InferServerAPIBody } from '../../Manifest';
+export type BundleDiffServerAPIProviderComponentCommonProps<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends> = {
+    manifests?: Manifest.RsdoctorManifest[];
+    api: T;
+    children: (baseline: SDK.ServerAPI.InferResponseType<T>, current: SDK.ServerAPI.InferResponseType<T>) => JSX.Element;
+} & InferServerAPIBody<T>;
+export interface BundleDiffContainerProps {
+    manifests: Manifest.RsdoctorManifest[];
+}
+export interface BundleDiffComponentCommonProps {
+    baseline: Manifest.RsdoctorManifest;
+    current: Manifest.RsdoctorManifest;
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffComponentCardProps {
+    baseline: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    current: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffTableOverviewData {
+    total: Client.RsdoctorClientAssetsDiffItem;
+    initial?: Client.RsdoctorClientAssetsDiffItem;
+}
+export interface BundleDiffTableAssetsData {
+    alias: string;
+    baseline?: SDK.AssetData;
+    current?: SDK.AssetData;
+}
+export interface BundleDiffTableModulesData {
+    [key: string]: unknown;
+    path: string;
+    baseline?: SDK.ModuleData;
+    current?: SDK.ModuleData;
+}
+export interface BundleDiffTablePackagesData {
+    name: string;
+    updateType: UpdateType;
+    baseline?: SDK.PackageData[];
+    current?: SDK.PackageData[];
+}

package/dist/components/BundleDiff/DiffContainer/utils.d.ts

@@ -0,0 +1,2 @@
+import { Client } from '@rsdoctor/types';
+export declare const formatDiffSize: (bSize: number, cSize: number, state: Client.RsdoctorClientDiffState, propsStyle?: Record<string, string | number>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BundleDiff/DiffContainer/utils.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { formatSize } from "@rsdoctor/components/utils";
+import { Client } from "@rsdoctor/types";
+import { Typography } from "antd";
+import { Color } from "../../../constants";
+const formatDiffSize = (bSize, cSize, state, propsStyle) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: cSize - bSize === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(
+    Typography.Text,
+    {
+      strong: true,
+      style: {
+        color: state === Client.RsdoctorClientDiffState.Up ? Color.Red : Color.Green,
+        ...propsStyle
+      },
+      children: [
+        state === Client.RsdoctorClientDiffState.Up ? "+" : "-",
+        formatSize(Math.abs(cSize - bSize))
+      ]
+    }
+  ) });
+};
+export {
+  formatDiffSize
+};

package/dist/components/BundleDiff/DiffServerAPIProvider/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SDK } from '@rsdoctor/types';
+import { BundleDiffServerAPIProviderComponentCommonProps } from '../DiffContainer/types';
+export declare const DiffServerAPIProvider: <T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(props: BundleDiffServerAPIProviderComponentCommonProps<T>) => JSX.Element;

package/dist/components/BundleDiff/DiffServerAPIProvider/index.js

@@ -0,0 +1,37 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Empty } from "antd";
+import { ServerAPIProvider } from "../../Manifest";
+import { useUrlQuery, fetchManifest } from "../../../utils";
+const DiffServerAPIProvider = (props) => {
+  const { api, body, children, manifests } = props;
+  const query = useUrlQuery();
+  const [baselineFile, currentFile] = query[Client.RsdoctorClientUrlQuery.BundleDiffFiles]?.split(",") || [];
+  if (manifests?.length) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(manifests[0].data, manifests[1].data) });
+  }
+  return /* @__PURE__ */ jsx(
+    ServerAPIProvider,
+    {
+      api,
+      body,
+      manifestLoader: baselineFile ? () => fetchManifest(baselineFile) : void 0,
+      children: (baseline) => {
+        return baseline ? /* @__PURE__ */ jsx(
+          ServerAPIProvider,
+          {
+            api,
+            body,
+            manifestLoader: currentFile ? () => fetchManifest(currentFile) : void 0,
+            children: (current) => {
+              return current ? children(baseline, current) : /* @__PURE__ */ jsx(Empty, {});
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Empty, {});
+      }
+    }
+  );
+};
+export {
+  DiffServerAPIProvider
+};

package/dist/components/BundleDiff/constants.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Client, Manifest } from '@rsdoctor/types';
+export declare const name = "Bundle Diff";
+export declare const route = Client.RsdoctorClientRoutes.BundleDiff;
+export declare const BundleDiffContext: React.Context<{
+    manifests: Manifest.RsdoctorManifest[];
+    setManifests(_manifests: Manifest.RsdoctorManifest[]): void;
+    loading: boolean;
+    setLoading(_loading: boolean): void;
+    withLoading(_func: (...args: unknown[]) => Promise<unknown> | unknown): Promise<void>;
+}>;

package/dist/components/BundleDiff/constants.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Client } from "@rsdoctor/types";
+const name = "Bundle Diff";
+const route = Client.RsdoctorClientRoutes.BundleDiff;
+const BundleDiffContext = React.createContext({
+  manifests: [],
+  setManifests(_manifests) {
+  },
+  loading: false,
+  setLoading(_loading) {
+  },
+  async withLoading(_func) {
+  }
+});
+export {
+  BundleDiffContext,
+  name,
+  route
+};

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

@@ -0,0 +1 @@
+export * from './DiffContainer';

package/dist/components/BundleDiff/index.js

@@ -0,0 +1 @@
+export * from "./DiffContainer";

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

@@ -0,0 +1,24 @@
+import { Client } from '@rsdoctor/types';
+import React from 'react';
+export { StatisticCard } from './statistic';
+export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
+    titles: Array<string> | [string | React.ReactNode];
+    datas: Array<DiffCardContentProps['data']>;
+    showPercentInTitle?: boolean;
+}
+export interface DiffCardContentProps {
+    data: Client.RsdoctorClientAssetsDiffItem;
+    formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
+}
+export interface PercentProps {
+    percent: number;
+    state: Client.RsdoctorClientDiffState;
+    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>;

package/dist/components/Card/diff.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Segmented, Space, Tooltip, Typography } from "antd";
+import { Graph } from "@rsdoctor/utils/common";
+import { useState } from "react";
+import { formatSize } from "../../utils";
+import { Color } from "../../constants";
+import { StatisticCard } from "./statistic";
+import { StatisticCard as StatisticCard2 } from "./statistic";
+const SizePercent = ({ baseline, current, ...rest }) => {
+  const diff = Graph.diffSize(baseline, current);
+  return /* @__PURE__ */ jsx(Percent, { ...rest, ...diff });
+};
+const Percent = ({
+  percent,
+  state,
+  fontSize = 14
+}) => {
+  const _percent = +percent.toFixed(2);
+  if (_percent > 0) {
+    const percentText = `${_percent}`;
+    if (state === Client.RsdoctorClientDiffState.Up) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Red }, children: [
+        "+",
+        percentText,
+        "%"
+      ] });
+    }
+    if (state === Client.RsdoctorClientDiffState.Down) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Green }, children: [
+        "-",
+        percentText,
+        "%"
+      ] });
+    }
+  }
+  return null;
+};
+const DiffCardContent = ({
+  data,
+  formatter
+}) => {
+  const { percent, state, size } = data;
+  const { baseline, current } = size;
+  const bSize = formatter ? formatter(baseline, "baseline") : formatSize(baseline);
+  const cSize = formatter ? formatter(current, "current") : formatSize(current);
+  return /* @__PURE__ */ jsx(Space, { align: "start", children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { textAlign: "left" }, children: [
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Current" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof cSize === "number" || typeof cSize === "string" ? `Value of Current is ${cSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 16, color: "inherit" }, strong: true, children: cSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(Percent, { percent, state })
+    ] }),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Baseline" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof bSize === "number" || typeof bSize === "string" ? `Value of Baseline is ${bSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14 }, type: "secondary", children: bSize })
+        }
+      )
+    ] })
+  ] }) });
+};
+const DiffCard = ({
+  titles,
+  datas,
+  formatter,
+  showPercentInTitle
+}) => {
+  const [idx, setIdx] = useState(0);
+  return /* @__PURE__ */ jsx(
+    StatisticCard,
+    {
+      title: titles.length > 1 ? /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          defaultValue: titles[idx],
+          options: showPercentInTitle ? titles.map((e, i) => {
+            const data = datas[i];
+            return {
+              label: /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { children: e }),
+                /* @__PURE__ */ jsx(Percent, { percent: data.percent, state: data.state })
+              ] }),
+              value: e
+            };
+          }) : titles,
+          onChange: (e) => {
+            setIdx(titles.indexOf(e));
+          },
+          size: "small",
+          style: { transition: "transform 0.3s ease" },
+          value: titles[idx] || titles[0]
+        }
+      ) : titles[idx],
+      value: /* @__PURE__ */ jsx(DiffCardContent, { data: datas[idx], formatter }),
+      statisticProps: {
+        style: { textAlign: "left" }
+      }
+    }
+  );
+};
+export {
+  DiffCard,
+  DiffCardContent,
+  Percent,
+  SizePercent,
+  StatisticCard2 as StatisticCard
+};

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

@@ -0,0 +1,9 @@
+import { CardProps as CProps } from 'antd';
+import React, { CSSProperties } from 'react';
+export * from './diff';
+export interface CardProps extends CProps {
+    collapsable?: boolean;
+    dividerStyle?: CSSProperties;
+    defaultCollapsed?: boolean;
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/Card/index.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ColumnHeightOutlined,
+  VerticalAlignMiddleOutlined
+} from "@ant-design/icons";
+import { Card as C, Space, Button, Divider } from "antd";
+import { useState } from "react";
+export * from "./diff";
+const Card = ({
+  collapsable = false,
+  children,
+  title,
+  dividerStyle,
+  defaultCollapsed = false,
+  ...rest
+}) => {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  if (title && collapsable) {
+    return /* @__PURE__ */ jsx(
+      C,
+      {
+        ...rest,
+        title: /* @__PURE__ */ jsxs(Space, { style: { fontSize: "inherit" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: collapsed ? /* @__PURE__ */ jsx(ColumnHeightOutlined, {}) : /* @__PURE__ */ jsx(VerticalAlignMiddleOutlined, {}),
+              onClick: () => setCollapsed(!collapsed),
+              size: "small"
+            }
+          ),
+          title
+        ] }),
+        children: collapsed ? /* @__PURE__ */ jsx(Divider, { orientation: "center", style: dividerStyle, plain: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}),
+            type: "text",
+            onClick: () => setCollapsed(!collapsed),
+            children: "show more"
+          }
+        ) }) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(C, { title, ...rest, children });
+};
+export {
+  Card
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface SizeCardProps {
+    files: {
+        path: string;
+        size: number;
+    }[];
+    /**
+     * total size for origin files
+     */
+    total: number;
+    /**
+     * @default false
+     */
+    showProgress?: boolean;
+    tagBgColor: string;
+}
+export interface bgColorType {
+    bgColor: string;
+    tagBgColor: string;
+}
+export declare const SizeCard: React.FC<SizeCardProps>;

package/dist/components/Card/size.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExceptionOutlined } from "@ant-design/icons";
+import { Empty, Progress, Space, Tag, Tooltip, Typography, theme } from "antd";
+import { sumBy } from "lodash-es";
+import { useMemo } from "react";
+import { createFileStructures, formatSize } from "../../utils";
+import { FileTree } from "../FileTree";
+import { TextDrawer } from "../TextDrawer";
+const height = 100;
+const { useToken } = theme;
+const SizeCard = ({ files, total, showProgress = false, tagBgColor }) => {
+  const { token } = useToken();
+  const sum = useMemo(() => {
+    return sumBy(files, (e) => e.size);
+  }, [files]);
+  const fileStructures = useMemo(() => {
+    return createFileStructures({
+      files: files.map((e) => e.path),
+      fileTitle(file, basename) {
+        const { size } = files.find((e) => e.path === file);
+        return /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { children: basename }),
+          /* @__PURE__ */ jsx(Tag, { color: "success", children: formatSize(size) })
+        ] });
+      }
+    });
+  }, [files]);
+  if (fileStructures.length === 0) {
+    return /* @__PURE__ */ jsx(Space, { style: { height, fontSize: 24 }, align: "center", children: /* @__PURE__ */ jsx(Tag, { bordered: false, color: tagBgColor, children: /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14, color: token.colorWhite }, children: [
+      /* @__PURE__ */ jsxs(Typography.Text, { style: { color: token.colorWhite }, children: [
+        " ",
+        0
+      ] }),
+      ` Files`
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Space, { style: { height }, align: "center", children: [
+    showProgress ? sum === 0 ? /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsx(
+      Progress,
+      {
+        type: "dashboard",
+        percent: +(sum / total * 100).toFixed(2),
+        strokeColor: { "0%": "#108ee9", "100%": "#87d068" },
+        width: 80
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      TextDrawer,
+      {
+        text: /* @__PURE__ */ jsx(Tooltip, { title: "Click to show the total files", children: /* @__PURE__ */ jsxs(Space, { style: { textAlign: showProgress ? "left" : "center" }, align: "end", children: [
+          /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+            /* @__PURE__ */ jsx(Tag, { bordered: false, color: tagBgColor, children: /* @__PURE__ */ jsxs(Typography.Text, { style: { fontSize: 14, color: token.colorWhite }, children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { style: { color: token.colorWhite }, children: [
+                " ",
+                files.length
+              ] }),
+              ` Files`
+            ] }) }),
+            /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 20 }, children: formatSize(sum) })
+          ] }),
+          /* @__PURE__ */ jsx(ExceptionOutlined, { style: { transform: "translateY(-3.5px)" } })
+        ] }) }),
+        buttonStyle: { height: "100%" },
+        buttonProps: { type: "text" },
+        children: /* @__PURE__ */ jsx(
+          FileTree,
+          {
+            treeData: fileStructures,
+            defaultExpandAll: true,
+            titleRender: (v) => /* @__PURE__ */ jsx(Typography.Text, { children: v.title })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  SizeCard
+};

package/dist/components/Card/statistic.css

@@ -0,0 +1,17 @@
+.statistic-card {
+  border-radius: 8px;
+  text-align: center;
+  padding: 24px;
+}
+.statistic-card-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+.statistic-card-light {
+  background: white;
+  border: 1px solid #eee;
+  box-shadow: 0px 0px 50px 0px #dcf2f4;
+}
+.statistic-card-dark {
+  background: rgb(20, 20, 20);
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StatisticProps } from 'antd';
+import './statistic.sass';
+export interface StatisticCardProps {
+    title: string | React.ReactNode;
+    value: string | React.ReactNode;
+    statisticProps?: StatisticProps;
+    boxProps?: {
+        style?: React.CSSProperties;
+    };
+}
+export declare const StatisticCard: React.FC<StatisticCardProps>;

package/dist/components/Card/statistic.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Statistic } from "antd";
+import "./statistic.css";
+import { useTheme } from "../../utils";
+const StatisticCard = ({ title, value, statisticProps, boxProps }) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx("div", { className: ["statistic-card", `statistic-card-${theme}`].join(" "), ...boxProps, children: /* @__PURE__ */ jsx(
+    Statistic,
+    {
+      title: /* @__PURE__ */ jsx("div", { className: "statistic-card-title", children: title }),
+      valueRender: () => value,
+      valueStyle: { fontSize: 24 },
+      ...statisticProps
+    }
+  ) });
+};
+export {
+  StatisticCard
+};

package/dist/components/Charts/TimelineCharts/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DurationMetric, ITraceEventData } from '../types';
+export declare const TimelineCom: React.FC<{
+    loaderData?: DurationMetric[];
+    pluginsData?: ITraceEventData[];
+    formatterFn: Function;
+    chartType?: string;
+}>;