@reltio/design 0.1.1 → 0.2.1

package/charts/Chart/Chart.d.ts

@@ -0,0 +1,4 @@
+import * as echartsCore from "echarts/core";
+import type { ChartProps } from "./Chart.types";
+export { echartsCore as echarts };
+export declare const Chart: ({ option, renderer, height, loading, className, style, ...rest }: ChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/Chart/Chart.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridComponent, LegendComponent, TooltipComponent, } from "echarts/components";
+import * as echartsCore from "echarts/core";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import { useEffect, useRef } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./Chart.module.css";
+import { buildTheme } from "./theme";
+export { echartsCore as echarts };
+echartsCore.use([
+    CanvasRenderer,
+    SVGRenderer,
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+]);
+const DEFAULT_HEIGHT = 300;
+export const Chart = ({ option, renderer = "canvas", height = DEFAULT_HEIGHT, loading = false, className, style, ...rest }) => {
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const rendererRef = useRef(renderer);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const theme = buildTheme(container);
+        const chart = echartsCore.init(container, theme, {
+            renderer: rendererRef.current,
+        });
+        chartRef.current = chart;
+        const resizeObserver = new ResizeObserver(() => {
+            chart.resize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+            chart.dispose();
+            chartRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        chartRef.current?.setOption(option);
+    }, [option]);
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        if (loading) {
+            const maskColor = getComputedStyle(containerRef.current)
+                .getPropertyValue("--reltio-color-bg-white")
+                .trim();
+            chartRef.current.showLoading({ maskColor });
+        }
+        else {
+            chartRef.current.hideLoading();
+        }
+    }, [loading]);
+    const containerHeight = typeof height === "number" ? `${height}px` : height;
+    return (_jsx("div", { ref: containerRef, className: classNames(styles.root, className), style: { ...style, height: containerHeight }, ...rest }));
+};

package/charts/Chart/Chart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Chart.module.css.json';
+export default json;

package/charts/Chart/Chart.module.css.js

@@ -0,0 +1,8 @@
+import styleInject from 'style-inject';
+import json from './Chart.module.css.json';
+styleInject(`
+.Chart_root__L29wd {
+	width: 100%;
+}
+`);
+export default json;

package/charts/Chart/Chart.module.css.json

@@ -0,0 +1 @@
+{ "root": "Chart_root__L29wd" }

package/charts/Chart/Chart.types.d.ts

@@ -0,0 +1,24 @@
+import type { EChartsOption } from "echarts";
+import type { HtmlProps } from "../../utils/types";
+export type ChartProps = HtmlProps<"div", {
+    /**
+     * ECharts option object defining the chart content.
+     * Passed directly to chart.setOption().
+     */
+    option: EChartsOption;
+    /**
+     * Rendering engine. Read once at mount — changes after mount are ignored.
+     * @default "canvas"
+     */
+    renderer?: "canvas" | "svg";
+    /**
+     * Height of the chart container. Number values are treated as pixels.
+     * @default 300
+     */
+    height?: number | string;
+    /**
+     * When true, shows the ECharts built-in loading indicator.
+     * @default false
+     */
+    loading?: boolean;
+}>;

package/charts/Chart/Chart.types.js

@@ -0,0 +1 @@
+export {};

package/charts/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export { Chart, echarts } from "./Chart";
+export type { ChartProps } from "./Chart.types";

package/charts/Chart/index.js

@@ -0,0 +1 @@
+export { Chart, echarts } from "./Chart";

package/charts/Chart/theme.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Builds an ECharts theme object by reading --reltio-color-* CSS custom
+ * properties from the given DOM element. CSS custom properties inherit
+ * through the DOM tree, so the resolved values reflect the nearest
+ * ancestor's data-theme attribute (light or dark).
+ */
+export declare function buildTheme(element: HTMLElement): {
+    color: string[];
+    backgroundColor: string;
+    title: {
+        textStyle: {
+            color: string;
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        textStyle: {
+            color: string;
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    };
+};

package/charts/Chart/theme.js

@@ -0,0 +1,85 @@
+const TOKEN_NAMES = [
+    "primary",
+    "success",
+    "warning",
+    "orange",
+    "pink",
+    "purple",
+    "aqua-font",
+    "lime",
+    "error",
+];
+function getToken(styles, name) {
+    return styles.getPropertyValue(`--reltio-color-${name}`).trim();
+}
+/**
+ * Builds an ECharts theme object by reading --reltio-color-* CSS custom
+ * properties from the given DOM element. CSS custom properties inherit
+ * through the DOM tree, so the resolved values reflect the nearest
+ * ancestor's data-theme attribute (light or dark).
+ */
+export function buildTheme(element) {
+    const styles = getComputedStyle(element);
+    const colorPalette = TOKEN_NAMES.map((name) => getToken(styles, name));
+    return {
+        color: colorPalette,
+        backgroundColor: "transparent",
+        title: {
+            textStyle: {
+                color: getToken(styles, "text"),
+            },
+        },
+        legend: {
+            textStyle: {
+                color: getToken(styles, "text-secondary"),
+            },
+        },
+        tooltip: {
+            backgroundColor: getToken(styles, "bg-tooltip"),
+            borderColor: getToken(styles, "border-2"),
+            textStyle: {
+                color: getToken(styles, "text-forced-white"),
+            },
+        },
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisLabel: {
+                color: getToken(styles, "text-secondary"),
+            },
+            splitLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-1"),
+                },
+            },
+        },
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: getToken(styles, "border-2"),
+                },
+            },
+            axisLabel: {
+                color: getToken(styles, "text-secondary"),
+            },
+            splitLine: {
+                lineStyle: {
+                    color: getToken(styles, "border-1"),
+                },
+            },
+        },
+    };
+}

package/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,2 @@
+import type { LineChartProps } from "./LineChart.types";
+export declare const LineChart: ({ data, xKey, series, height, units, loading, error, className, ...rest }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/LineChart/LineChart.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart as EChartsLine } from "echarts/charts";
+import { Chart, echarts } from "../../charts/Chart";
+import { classNames } from "../../utils/classNames";
+import styles from "./LineChart.module.css";
+echarts.use([EChartsLine]);
+const DEFAULT_HEIGHT = 300;
+const EMPTY_GRID_OPTION = {
+    xAxis: { type: "category" },
+    yAxis: {
+        type: "value",
+        min: 0,
+        max: 1000,
+        splitLine: { show: true },
+    },
+    series: [],
+    grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+    },
+};
+function formatWithUnits(value, units) {
+    if (!units)
+        return `${value}`;
+    return `${value} ${units}`;
+}
+function buildLineOption(data, xKey, series, units) {
+    const xLabels = typeof xKey === "function"
+        ? data.map(xKey)
+        : data.map((d) => d[xKey]);
+    return {
+        xAxis: {
+            type: "category",
+            data: xLabels,
+        },
+        yAxis: {
+            type: "value",
+            ...(units && {
+                axisLabel: {
+                    formatter: (value) => formatWithUnits(value, units),
+                },
+            }),
+        },
+        series: series.map((s) => ({
+            type: "line",
+            name: s.name ?? s.key,
+            data: data.map((d) => d[s.key]),
+        })),
+        tooltip: {
+            trigger: "axis",
+            ...(units && {
+                valueFormatter: (value) => formatWithUnits(value, units),
+            }),
+        },
+        legend: {
+            show: series.length > 1,
+            bottom: 0,
+        },
+        grid: {
+            left: "3%",
+            right: "4%",
+            bottom: series.length > 1 ? "10%" : "3%",
+            containLabel: true,
+        },
+    };
+}
+export const LineChart = ({ data, xKey, series, height = DEFAULT_HEIGHT, units, loading = false, error, className, ...rest }) => {
+    const hasData = Array.isArray(data) && data.length > 0;
+    const option = hasData && !error
+        ? buildLineOption(data, xKey, series, units)
+        : EMPTY_GRID_OPTION;
+    const overlay = error ? (_jsx("div", { className: classNames(styles.overlay, styles.errorOverlay), children: error })) : !hasData && !loading ? (_jsx("div", { className: styles.overlay, children: "No data" })) : null;
+    return (_jsxs("div", { className: classNames(styles.root, className), ...rest, children: [overlay, _jsx(Chart, { option: option, height: height, loading: loading })] }));
+};

package/charts/LineChart/LineChart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './LineChart.module.css.json';
+export default json;

package/charts/LineChart/LineChart.module.css.js

@@ -0,0 +1,25 @@
+import styleInject from 'style-inject';
+import json from './LineChart.module.css.json';
+styleInject(`
+.LineChart_root__L29wd {
+	position: relative;
+	width: 100%;
+}
+
+.LineChart_overlay__L29wd {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--reltio-color-text-secondary);
+	font-size: 14px;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.LineChart_errorOverlay__L29wd {
+	color: var(--reltio-color-error-font);
+}
+`);
+export default json;

package/charts/LineChart/LineChart.module.css.json

@@ -0,0 +1 @@
+{ "root": "LineChart_root__L29wd", "overlay": "LineChart_overlay__L29wd", "errorOverlay": "LineChart_errorOverlay__L29wd" }

package/charts/LineChart/LineChart.types.d.ts

@@ -0,0 +1,38 @@
+import type { HtmlProps } from "../../utils/types";
+export type LineChartSeries = {
+    /** Data object key to plot as Y values */
+    key: string;
+    /** Legend label. Defaults to `key` if not provided. */
+    name?: string;
+};
+export type LineChartProps = HtmlProps<"div", {
+    /** Array of data objects. Each object represents one data point. */
+    data?: Record<string, unknown>[];
+    /**
+     * Determines X-axis labels.
+     * - **string**: property name for direct value lookup
+     * - **function**: custom extraction and formatting in one step
+     */
+    xKey: string | ((item: Record<string, unknown>) => string);
+    /** Data series to plot. Each entry renders one line. */
+    series: LineChartSeries[];
+    /**
+     * Height of the chart container. Number values are treated as pixels.
+     * @default 300
+     */
+    height?: number | string;
+    /**
+     * Shows the ECharts built-in loading overlay.
+     * - When `data` is empty: loading overlay on empty grid
+     * - When `data` is present: loading overlay on rendered chart
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Unit suffix appended to Y-axis labels and tooltip values.
+     * Examples: "ms", "%", " records"
+     */
+    units?: string;
+    /** Error message. When set, replaces the chart with centered error text. */
+    error?: string;
+}>;

package/charts/LineChart/LineChart.types.js

@@ -0,0 +1 @@
+export {};

package/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartSeries } from "./LineChart.types";

package/charts/LineChart/index.js

@@ -0,0 +1 @@
+export { LineChart } from "./LineChart";

package/charts/index.d.ts

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

package/charts/index.js

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

package/components/AppSelector/AppSelector.d.ts

@@ -0,0 +1,5 @@
+import type { AppSelectorProps } from "./AppSelector.types";
+/** Navigation popover for switching between Reltio platform applications.
+ * Displays apps grouped by category in a grid layout.
+ */
+export declare const AppSelector: ({ apps, env, tenant, className, positionArea, ...rest }: AppSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/components/AppSelector/AppSelector.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/Button";
+import { Divider } from "../../components/Divider";
+import { Popover } from "../../components/Popover";
+import { Applications } from "../../icons/Applications";
+import { Link } from "../../icons/Link";
+import { classNames } from "../../utils/classNames";
+import styles from "./AppSelector.module.css";
+const DEFAULT_CATEGORY = "Applications";
+/** Navigation popover for switching between Reltio platform applications.
+ * Displays apps grouped by category in a grid layout.
+ */
+export const AppSelector = ({ apps, env, tenant, className, positionArea = "right span-top", ...rest }) => {
+    const validApps = apps.filter((app) => app.name && app.uri);
+    const groups = Object.groupBy(validApps, ({ category }) => category || DEFAULT_CATEGORY);
+    return (_jsx("nav", { className: classNames(className), "aria-label": "Applications", ...rest, children: _jsx(Popover, { trigger: _jsx(Button, { variant: "text", "aria-label": "Applications", children: _jsx(Applications, {}) }), positionArea: positionArea, children: _jsx("div", { className: classNames(styles.content), children: Object.entries(groups).map(([category, apps]) => (_jsxs("div", { className: classNames(styles.group), children: [_jsx(Divider, { className: classNames(styles.divider), children: category }), _jsx("div", { className: classNames(styles.grid), children: apps?.map((app) => (_jsxs("a", { href: resolveUri(app.uri, env, tenant), target: "_blank", rel: "noopener noreferrer", className: classNames(styles.app), children: [app.icon ? (_jsx("img", { src: app.icon, alt: "", className: classNames(styles.appIcon) })) : (_jsx(Link, { size: "xlarge" })), app.name] }, app.name))) })] }, category))) }) }) }));
+};
+const resolveUri = (uri, env, tenant) => uri
+    ?.replaceAll("${environment}", String(env))
+    .replaceAll("${tenant}", String(tenant));

package/components/AppSelector/AppSelector.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './AppSelector.module.css.json';
+export default json;

package/components/AppSelector/AppSelector.module.css.js

@@ -0,0 +1,61 @@
+import styleInject from 'style-inject';
+import json from './AppSelector.module.css.json';
+styleInject(`
+.AppSelector_content__L29wd {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+	width: 316px;
+	max-height: 485px;
+	overflow-y: auto;
+	box-sizing: border-box;
+}
+
+.AppSelector_group__L29wd {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.AppSelector_grid__L29wd {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	column-gap: 16px;
+	row-gap: 24px;
+}
+
+.AppSelector_divider__L29wd {
+	margin-left: 12px;
+}
+
+.AppSelector_app__L29wd {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+	border-radius: 12px;
+	text-align: center;
+	font-size: 13px;
+	line-height: 1.3;
+	color: var(--reltio-color-text);
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.AppSelector_app__L29wd:hover {
+	background: var(--reltio-color-bg-transparent-1);
+}
+
+.AppSelector_appIcon__L29wd {
+	width: 48px;
+	height: 48px;
+	object-fit: contain;
+}
+
+.AppSelector_error__L29wd {
+	margin-bottom: -8px;
+}
+`);
+export default json;

package/components/AppSelector/AppSelector.module.css.json

@@ -0,0 +1 @@
+{ "content": "AppSelector_content__L29wd", "group": "AppSelector_group__L29wd", "grid": "AppSelector_grid__L29wd", "divider": "AppSelector_divider__L29wd", "app": "AppSelector_app__L29wd", "appIcon": "AppSelector_appIcon__L29wd", "error": "AppSelector_error__L29wd" }

package/components/AppSelector/AppSelector.types.d.ts

@@ -0,0 +1,29 @@
+import type { HtmlProps } from "../../utils/types";
+export type AppEntry = {
+    /** Application display name. Apps without a name are ignored. */
+    name?: string;
+    /** URL opened in a new tab on click. Apps without a URI are ignored. */
+    uri?: string;
+    /** Absolute URL to the application icon (SVG). Falls back to a generic link icon. */
+    icon?: string;
+    /** Application category for grouping in navigation.
+     * @default "Applications"
+     */
+    category?: string;
+};
+export type AppSelectorProps = HtmlProps<"div", {
+    /** List of apps to display, grouped by category.
+     * Apps missing `name` or `uri` are silently ignored.
+     * The list of available apps for a given tenant
+     * can be retrieved from Reltio Config Service.
+     */
+    apps: AppEntry[];
+    /** Environment identifier substituted into URI templates (`${environment}`). */
+    env?: string;
+    /** Tenant identifier substituted into URI templates (`${tenant}`). */
+    tenant?: string;
+    /** CSS `position-area` value controlling popover placement relative to the trigger.
+     * @default "right span-top"
+     */
+    positionArea?: string;
+}>;

package/components/AppSelector/AppSelector.types.js

@@ -0,0 +1 @@
+export {};

package/components/AppSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AppSelector";
+export type * from "./AppSelector.types";

package/components/AppSelector/index.js

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

package/components/AssistantLoader/AssistantLoader.d.ts

@@ -1,7 +1,6 @@
 import type { AssistantLoaderProps } from "./AssistantLoader.types";
 /**
  * Displays a standardized loading indicator for assistant responses using a GIF animation.
- * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
  * Includes accessibility attributes (aria-busy, aria-label, role="status").
  */
-export declare const AssistantLoader: ({ className, ...rest }: AssistantLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantLoader: ({ className, size, style, ...rest }: AssistantLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/components/AssistantLoader/AssistantLoader.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../utils/classNames";
 import styles from "./AssistantLoader.module.css";
-const LOADING_GIF_SRC = "/icons/loading.gif";
+const LOADING_GIF_SRC = "https://reltio.design/icons/loading.gif";
 const DEFAULT_LABEL = "thinking";
 /**
  * Displays a standardized loading indicator for assistant responses using a GIF animation.
- * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
  * Includes accessibility attributes (aria-busy, aria-label, role="status").
  */
-export const AssistantLoader = ({ className, ...rest }) => {
+export const AssistantLoader = ({ className, size, style, ...rest }) => {
+    const rootStyle = {
+        ...style,
+        "--size": size ?? "32px",
+    };
     return (
     // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
-    _jsxs("div", { className: classNames(styles.root, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: [_jsx("img", { src: LOADING_GIF_SRC, alt: "", className: styles.indicator, "aria-hidden": "true" }), _jsx("div", { className: classNames(styles.dotFlashing), "aria-hidden": "true" })] }));
+    _jsxs("div", { className: classNames(styles.root, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", style: rootStyle, ...rest, children: [_jsx("img", { src: LOADING_GIF_SRC, alt: "", className: classNames(styles.indicator), "aria-hidden": "true" }), _jsx("div", { className: classNames(styles.dotFlashing), "aria-hidden": "true" })] }));
 };