@apipass/design-system 1.21.0 → 1.23.0

package/dist/types/ui/components/Widget/Widget.d.ts

@@ -7,7 +7,22 @@ type WidgetDescriptionProps = {
     description: ReactNode;
     descriptionButtonLabel: string;
 };
-export type WidgetProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & WidgetDescriptionProps & {
+type WidgetCollapseProps = {
+    isCollapsible?: false;
+    collapseButtonLabel?: undefined;
+    expandButtonLabel?: undefined;
+    collapsed?: undefined;
+    defaultCollapsed?: undefined;
+    onCollapsedChange?: undefined;
+} | {
+    isCollapsible: true;
+    collapseButtonLabel: string;
+    expandButtonLabel: string;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+export type WidgetProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & WidgetDescriptionProps & WidgetCollapseProps & {
     title: ReactNode;
     headerActions?: ReactNode;
 };

package/dist/types/ui/components/charts/TimeSeriesChart/TimeSeriesChart.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type TimeSeriesData, type TimeSeriesDisplayType, type TimeSeriesLegendMode, type TimeSeriesLineOptions, type TimeSeriesYAxisOptions } from "./time-series-option";
+import "./time-series-chart.css";
+export type { TimeSeriesData, TimeSeriesDisplayType, TimeSeriesLegendMode, TimeSeriesLineOptions, TimeSeriesLineStyle, TimeSeriesLineWidth, TimeSeriesPoint, TimeSeriesYAxisOptions, } from "./time-series-option";
+export type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    series: TimeSeriesData[];
+    displayType?: TimeSeriesDisplayType;
+    legend?: TimeSeriesLegendMode;
+    line?: TimeSeriesLineOptions;
+    yAxis?: TimeSeriesYAxisOptions;
+    showSymbols?: boolean;
+    showValueLabels?: boolean;
+    valueFormatter?: (value: number) => string;
+};
+export declare function TimeSeriesChart({ series, displayType, legend, line, yAxis, showSymbols, showValueLabels, valueFormatter, className, ...props }: TimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/charts/TimeSeriesChart/time-series-option.d.ts

@@ -0,0 +1,39 @@
+import type { ChartTheme } from "../chart-theme";
+export interface TimeSeriesPoint {
+    timestamp: number;
+    value: number | null;
+}
+export interface TimeSeriesData {
+    id: string;
+    name: string;
+    points: TimeSeriesPoint[];
+    colorToken?: string;
+}
+export type TimeSeriesDisplayType = "line" | "bar" | "area";
+export type TimeSeriesLineStyle = "solid" | "dashed" | "dotted";
+export type TimeSeriesLineWidth = "thin" | "normal" | "thick";
+export interface TimeSeriesLineOptions {
+    style?: TimeSeriesLineStyle;
+    width?: TimeSeriesLineWidth;
+}
+export type TimeSeriesLegendMode = "inline" | "none";
+export type TimeSeriesAxisScale = "linear" | "log";
+export interface TimeSeriesYAxisOptions {
+    scale?: TimeSeriesAxisScale;
+    min?: number;
+    max?: number;
+    includeZero?: boolean;
+}
+export interface TimeSeriesOptionInput {
+    series: TimeSeriesData[];
+    displayType: TimeSeriesDisplayType;
+    legend: TimeSeriesLegendMode;
+    line: TimeSeriesLineOptions;
+    yAxis: TimeSeriesYAxisOptions;
+    theme: ChartTheme;
+    showSymbols: boolean;
+    showValueLabels: boolean;
+    seriesColorOverrides: Record<string, string>;
+    valueFormatter?: (value: number) => string;
+}
+export declare function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown>;

package/dist/types/ui/components/charts/chart-palette.d.ts

@@ -0,0 +1 @@
+export declare const CHART_SERIES_COLOR_TOKENS: string[];

package/dist/types/ui/components/charts/chart-theme.d.ts

@@ -0,0 +1,11 @@
+export interface ChartTheme {
+    seriesColors: string[];
+    axisLineColor: string;
+    splitLineColor: string;
+    labelColor: string;
+    tooltipBackgroundColor: string;
+    tooltipBorderColor: string;
+    fontFamily: string;
+}
+export declare function resolveColorToken(element: HTMLElement, token: string): string | undefined;
+export declare function readChartTheme(element: HTMLElement): ChartTheme;

package/dist/types/ui/components/charts/echarts-modules.d.ts

@@ -0,0 +1,3 @@
+import * as echarts from "echarts/core";
+export declare function registerEchartsModules(): void;
+export { echarts };

package/dist/types/ui/components/charts/useChartInstance.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from "react";
+import { type ChartTheme } from "./chart-theme";
+import { echarts } from "./echarts-modules";
+export interface ChartInstance {
+    containerRef: RefObject<HTMLDivElement>;
+    chart: echarts.ECharts | null;
+    theme: ChartTheme | null;
+    resolveSeriesColor: (token: string) => string | undefined;
+}
+export declare function useChartInstance(): ChartInstance;

package/dist/types/ui/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./Breadcrumb/Breadcrumb";
 export * from "./Card/Card";
+export * from "./charts/chart-palette";
+export * from "./charts/TimeSeriesChart/TimeSeriesChart";
 export * from "./ConfirmDialog/ConfirmDialog";
 export * from "./DataTable/DataTable";
 export * from "./FormModal/FormModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [
@@ -57,6 +57,7 @@
   },
   "peerDependencies": {
     "@monaco-editor/react": ">=4.0.0",
+    "echarts": ">=5.5.0",
     "react": ">=18.0.0",
     "react-aria-components": ">=1.10.0",
     "react-dom": ">=18.0.0"
@@ -64,6 +65,9 @@
   "peerDependenciesMeta": {
     "@monaco-editor/react": {
       "optional": true
+    },
+    "echarts": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -87,6 +91,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "echarts": "^5.6.0",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",