@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.d.ts

@@ -0,0 +1,32 @@
+import type { JSX } from 'react';
+import type { CascaderOption } from '../../../../primitives/index.js';
+import type { AlertLocalFilters } from '../alerts-types';
+import './tag-filter-bar.scss';
+export type TagFilterBarProps = {
+    /** Active tag filter values */
+    filterTags: string[];
+    /** Current local filter state */
+    localFilters: AlertLocalFilters;
+    /** Called when tag filter changes */
+    onSearchTagsChange: (tags: string[]) => void;
+    /** Called when any local filter changes */
+    onLocalFiltersChange: (filters: AlertLocalFilters) => void;
+    /**
+     * Site-specific overrides for the "type" filter children.
+     * If provided, the "Type" filter group will use these instead of the defaults.
+     */
+    typeFiltersForSite?: CascaderOption[];
+    /** Search input placeholder */
+    placeholder?: string;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Horizontal strip of removable tag chips that narrow a list view; clicking a chip removes the filter.
+ *
+ * @category tables
+ * @domain mining-operations
+ * @kernelCapability hashrate-monitoring
+ * @tier agent-ready
+ */
+export declare const TagFilterBar: ({ filterTags, localFilters, onSearchTagsChange, onLocalFiltersChange, typeFiltersForSite, placeholder, className, }: TagFilterBarProps) => JSX.Element;

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.example.d.ts

@@ -0,0 +1 @@
+export declare const TagFilterBarExample: () => import("react").JSX.Element;

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TagFilterBar } from '@tetherto/mdk-react-devkit';
+export const TagFilterBarExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(TagFilterBar, { filterTags: [], localFilters: {}, onSearchTagsChange: (tags) => console.warn('tags', tags), onLocalFiltersChange: (f) => console.warn('filters', f) }) }));

package/dist/domain/components/alerts/tag-filter-bar/tag-filter-bar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cn, ListViewFilter, TagInput } from '../../../../primitives/index.js';
+import _map from 'lodash/map';
+import _capitalize from 'lodash/capitalize';
+import _find from 'lodash/find';
+import _reject from 'lodash/reject';
+import { ALERTS_FILTER_OPTIONS } from './tag-filter-bar.const';
+const groupSelections = (selections) => selections.reduce((result, current) => {
+    const [key, value, childValue] = current;
+    const existing = result[key] ?? [];
+    return { ...result, [key]: [...existing, childValue ?? value] };
+}, {});
+/**
+ * Horizontal strip of removable tag chips that narrow a list view; clicking a chip removes the filter.
+ *
+ * @category tables
+ * @domain mining-operations
+ * @kernelCapability hashrate-monitoring
+ * @tier agent-ready
+ */
+export const TagFilterBar = ({ filterTags, localFilters, onSearchTagsChange, onLocalFiltersChange, typeFiltersForSite, placeholder, className, }) => {
+    const options = useMemo(() => {
+        if (!typeFiltersForSite || typeFiltersForSite.length === 0) {
+            return ALERTS_FILTER_OPTIONS;
+        }
+        const typeOption = _find(ALERTS_FILTER_OPTIONS, { value: 'type' });
+        return [
+            ..._reject(ALERTS_FILTER_OPTIONS, { value: 'type' }),
+            ...(typeOption
+                ? [
+                    {
+                        ...typeOption,
+                        label: _capitalize(typeOption.label),
+                        children: typeFiltersForSite,
+                    },
+                ]
+                : []),
+        ];
+    }, [typeFiltersForSite]);
+    const handleFiltersChange = (selections) => {
+        onLocalFiltersChange(groupSelections(selections));
+    };
+    return (_jsxs("div", { className: cn('mdk-alerts-tag-filter-bar', className), children: [_jsx(ListViewFilter, { options: options, onChange: handleFiltersChange, localFilters: localFilters }), _jsx(TagInput, { size: "md", value: filterTags, onTagsChange: onSearchTagsChange, placeholder: placeholder ?? 'Search / filter devices', variant: "search", allowCustomTags: true, options: _map(filterTags, (tag) => ({ value: tag, label: tag })), className: "mdk-alerts-tag-filter-bar__search" })] }));
+};

package/dist/domain/components/alerts/tag-filter-bar/type-filter-map.d.ts

@@ -0,0 +1,15 @@
+type FilterOption = {
+    label: string;
+    value: string;
+};
+type TypeFilter = {
+    value: string;
+    label: string;
+    children: FilterOption[];
+};
+/**
+ * Device-type options for the alerts tag filter: containers, miners, LV
+ * cabinets and pools, each with its known types as children.
+ */
+export declare const TYPE_FILTER_MAP: Record<string, TypeFilter>;
+export {};

package/dist/domain/components/alerts/tag-filter-bar/type-filter-map.js

@@ -0,0 +1,36 @@
+import { COMPLETE_CONTAINER_TYPE, CONTAINER_TYPE_NAME_MAP } from '../../../constants/container-constants';
+import { ALERT_TYPE_POOL_NAME, ALERT_TYPE_POOL_VALUE, CABINET_DEVICES_TYPES_NAME_MAP, COMPLETE_MINER_TYPES, LV_CABINET_DEVICES_TYPE, MINER_TYPE_NAME_MAP, } from '../../../constants/device-constants';
+import { CROSS_THING_TYPES } from '../../../constants/devices';
+const getFilterOptions = (types, names) => {
+    const valuesList = Array.isArray(types) ? types : Object.values(types);
+    return valuesList.map((value) => ({
+        label: names[value],
+        value,
+    }));
+};
+/**
+ * Device-type options for the alerts tag filter: containers, miners, LV
+ * cabinets and pools, each with its known types as children.
+ */
+export const TYPE_FILTER_MAP = {
+    CONTAINER: {
+        value: CROSS_THING_TYPES.CONTAINER,
+        label: 'Container',
+        children: getFilterOptions(COMPLETE_CONTAINER_TYPE, CONTAINER_TYPE_NAME_MAP),
+    },
+    MINER: {
+        value: CROSS_THING_TYPES.MINER,
+        label: 'Miner',
+        children: getFilterOptions(COMPLETE_MINER_TYPES, MINER_TYPE_NAME_MAP),
+    },
+    LV_CABINET: {
+        value: CROSS_THING_TYPES.CABINET,
+        label: 'LV cabinet',
+        children: getFilterOptions(LV_CABINET_DEVICES_TYPE, CABINET_DEVICES_TYPES_NAME_MAP),
+    },
+    POOL: {
+        value: CROSS_THING_TYPES.POOL,
+        label: 'Pool',
+        children: getFilterOptions(ALERT_TYPE_POOL_VALUE, ALERT_TYPE_POOL_NAME),
+    },
+};

package/dist/domain/components/auth/index.d.ts

@@ -0,0 +1,2 @@
+export * from './require-auth';
+export * from './sign-in-google-button';

package/dist/domain/components/auth/index.js

@@ -0,0 +1,2 @@
+export * from './require-auth';
+export * from './sign-in-google-button';

package/dist/domain/components/auth/require-auth/index.d.ts

@@ -0,0 +1,2 @@
+export type { RequireAuthProps } from './require-auth';
+export { consumeLastVisitedPath, RequireAuth } from './require-auth';

package/dist/domain/components/auth/require-auth/index.js

@@ -0,0 +1 @@
+export { consumeLastVisitedPath, RequireAuth } from './require-auth';

package/dist/domain/components/auth/require-auth/require-auth.d.ts

@@ -0,0 +1,25 @@
+import { type JSX, type ReactNode } from 'react';
+/**
+ * Read the last-visited path stored by {@link RequireAuth}. Sign-in pages can
+ * call this after a successful auth to send the user back to where they were
+ * redirected from.
+ *
+ * @category auth
+ */
+export declare const consumeLastVisitedPath: () => string | null;
+export type RequireAuthProps = {
+    /** Rendered when a token is present. */
+    children: ReactNode;
+    /** Rendered when no token is present — typically `<Navigate to="/signin" />`. */
+    fallback: ReactNode;
+    /**
+     * When true (default), the current location is persisted to sessionStorage
+     * before rendering the fallback so the sign-in flow can return there.
+     * @default true
+     */
+    rememberPath?: boolean;
+};
+export declare function RequireAuth({ children, fallback, rememberPath, }: RequireAuthProps): JSX.Element;
+export declare namespace RequireAuth {
+    var displayName: string;
+}

package/dist/domain/components/auth/require-auth/require-auth.example.d.ts

@@ -0,0 +1 @@
+export declare const RequireAuthExample: () => import("react").JSX.Element;

package/dist/domain/components/auth/require-auth/require-auth.example.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for RequireAuth.
+ *
+ * Wraps the application content in an auth guard. When `authStore.token` is
+ * null, renders the fallback (typically a `<Navigate />` to `/signin`).
+ */
+import { RequireAuth } from '@tetherto/mdk-react-devkit';
+const PretendDashboard = () => _jsx("div", { children: "Authenticated dashboard content" });
+const PretendRedirect = () => _jsx("div", { children: "Redirecting to sign in\u2026" });
+export const RequireAuthExample = () => (_jsx(RequireAuth, { fallback: _jsx(PretendRedirect, {}), children: _jsx(PretendDashboard, {}) }));

package/dist/domain/components/auth/require-auth/require-auth.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from '@tetherto/mdk-react-adapter';
+import { useEffect } from 'react';
+const LAST_PATH_STORAGE_KEY = 'mdk:last-visited-path';
+const saveLastVisitedPath = () => {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const next = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        if (next && next !== '/signin') {
+            window.sessionStorage.setItem(LAST_PATH_STORAGE_KEY, next);
+        }
+    }
+    catch {
+        /* sessionStorage disabled — ignore */
+    }
+};
+/**
+ * Read the last-visited path stored by {@link RequireAuth}. Sign-in pages can
+ * call this after a successful auth to send the user back to where they were
+ * redirected from.
+ *
+ * @category auth
+ */
+export const consumeLastVisitedPath = () => {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const value = window.sessionStorage.getItem(LAST_PATH_STORAGE_KEY);
+        if (value)
+            window.sessionStorage.removeItem(LAST_PATH_STORAGE_KEY);
+        return value;
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Route guard that reads the session token from the headless `authStore` (via
+ * `useAuth`) and renders the children only when a token is present. Otherwise
+ * it renders `fallback` — typically `<Navigate to="/signin" replace />` from
+ * `react-router`. Router-agnostic by design.
+ *
+ * @category auth
+ * @kernelCapability authentication
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <RequireAuth fallback={<Navigate to="/signin" replace />}>
+ *   <Dashboard />
+ * </RequireAuth>
+ * ```
+ * @tier agent-ready
+ */
+export const RequireAuth = ({ children, fallback, rememberPath = true, }) => {
+    const { token } = useAuth();
+    useEffect(() => {
+        if (!token && rememberPath)
+            saveLastVisitedPath();
+    }, [token, rememberPath]);
+    return token ? _jsx(_Fragment, { children: children }) : _jsx(_Fragment, { children: fallback });
+};
+RequireAuth.displayName = 'RequireAuth';

package/dist/domain/components/auth/sign-in-google-button/index.d.ts

@@ -0,0 +1,2 @@
+export type { SignInGoogleButtonProps } from './sign-in-google-button';
+export { SignInGoogleButton } from './sign-in-google-button';

package/dist/domain/components/auth/sign-in-google-button/index.js

@@ -0,0 +1 @@
+export { SignInGoogleButton } from './sign-in-google-button';

package/dist/domain/components/auth/sign-in-google-button/sign-in-google-button.d.ts

@@ -0,0 +1,60 @@
+import { type ButtonProps } from '../../../../primitives/index.js';
+export type SignInGoogleButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & {
+    /**
+     * Base URL of the OAuth backend (no trailing slash). Click navigates to
+     * `${oauthBaseUrl}/oauth/google`.
+     */
+    oauthBaseUrl: string;
+    /**
+     * Override the visible button label.
+     * @default "Sign in with Google"
+     */
+    label?: string;
+    /**
+     * Override the click behaviour entirely. When set, `oauthBaseUrl` is ignored.
+     * @default redirect
+     */
+    onClick?: () => void;
+};
+/**
+ * One-click Google OAuth sign-in trigger. Defaults to a full-page redirect
+ * to `${oauthBaseUrl}/oauth/google`, the Gateway's Google sign-in route.
+ *
+ * @category auth
+ * @kernelCapability authentication
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <SignInGoogleButton oauthBaseUrl={import.meta.env.VITE_OAUTH_BASE_URL} />
+ * ```
+ * @tier agent-ready
+ */
+declare const SignInGoogleButton: import("react").ForwardRefExoticComponent<Omit<Partial<{
+    loading: boolean;
+    fullWidth: boolean;
+    icon: import("react").ReactNode;
+    variant: import("../../../../primitives/index.js").ButtonVariant;
+    contentClassName: string;
+    iconPosition: import("../../../../primitives/index.js").ButtonIconPosition;
+    size: import("../../../../primitives/index.js").ComponentSize;
+    disabled: import("react").ButtonHTMLAttributes<HTMLButtonElement>['disabled'];
+    type: import("react").ButtonHTMLAttributes<HTMLButtonElement>['type'];
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "children" | "onClick"> & {
+    /**
+     * Base URL of the OAuth backend (no trailing slash). Click navigates to
+     * `${oauthBaseUrl}/oauth/google`.
+     */
+    oauthBaseUrl: string;
+    /**
+     * Override the visible button label.
+     * @default "Sign in with Google"
+     */
+    label?: string;
+    /**
+     * Override the click behaviour entirely. When set, `oauthBaseUrl` is ignored.
+     * @default redirect
+     */
+    onClick?: () => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { SignInGoogleButton };

package/dist/domain/components/auth/sign-in-google-button/sign-in-google-button.example.d.ts

@@ -0,0 +1 @@
+export declare const SignInGoogleButtonExample: () => import("react").JSX.Element;

package/dist/domain/components/auth/sign-in-google-button/sign-in-google-button.example.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for SignInGoogleButton.
+ *
+ * Triggers a full-page redirect to the OAuth backend. In a real app you'd
+ * read `oauthBaseUrl` from `import.meta.env.VITE_OAUTH_BASE_URL`.
+ */
+import { SignInGoogleButton } from '@tetherto/mdk-react-devkit';
+export const SignInGoogleButtonExample = () => (_jsx(SignInGoogleButton, { oauthBaseUrl: "http://localhost:3000" }));

package/dist/domain/components/auth/sign-in-google-button/sign-in-google-button.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../primitives/index.js';
+import { forwardRef } from 'react';
+const GoogleLogo = () => (_jsxs("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M17.64 9.205c0-.638-.057-1.252-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.616z", fill: "#4285F4" }), _jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.345 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z", fill: "#34A853" }), _jsx("path", { d: "M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.957H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.043l3.007-2.333z", fill: "#FBBC05" }), _jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.957L3.964 7.29C4.672 5.163 6.655 3.58 9 3.58z", fill: "#EA4335" })] }));
+/**
+ * One-click Google OAuth sign-in trigger. Defaults to a full-page redirect
+ * to `${oauthBaseUrl}/oauth/google`, the Gateway's Google sign-in route.
+ *
+ * @category auth
+ * @kernelCapability authentication
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <SignInGoogleButton oauthBaseUrl={import.meta.env.VITE_OAUTH_BASE_URL} />
+ * ```
+ * @tier agent-ready
+ */
+const SignInGoogleButton = forwardRef(({ oauthBaseUrl, label = 'Sign in with Google', onClick, ...buttonProps }, ref) => {
+    const handleClick = () => {
+        if (onClick)
+            return onClick();
+        if (typeof window === 'undefined')
+            return;
+        // Trim trailing slashes without a regex: an unanchored `/\/+$/` backtracks
+        // polynomially (ReDoS) on long slash-heavy input; this linear scan does not.
+        let end = oauthBaseUrl.length;
+        while (end > 0 && oauthBaseUrl.charAt(end - 1) === '/')
+            end -= 1;
+        const trimmed = oauthBaseUrl.slice(0, end);
+        window.location.href = `${trimmed}/oauth/google`;
+    };
+    return (_jsx(Button, { ref: ref, type: "button", variant: "secondary", icon: _jsx(GoogleLogo, {}), iconPosition: "left", onClick: handleClick, ...buttonProps, children: label }));
+});
+SignInGoogleButton.displayName = 'SignInGoogleButton';
+export { SignInGoogleButton };

package/dist/domain/components/composite/metric-card/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { MetricCardProps } from './props';
+export { getMetricCardValueColor } from './metric-card-utils';
+/**
+ * Compact card displaying a labelled metric value with optional highlight and transparency states.
+ *
+ * @category cards
+ * @domain mining-operations
+ * @kernelCapability pool-performance
+ * @tier agent-ready
+ */
+export declare const MetricCard: ({ unit, label, value, bgColor, className, noMinWidth, isHighlighted, isValueMedium, showDashForZero, isTransparentColor, }: MetricCardProps) => ReactElement;

package/dist/domain/components/composite/metric-card/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, COLOR, FALLBACK } from '../../../../primitives/index.js';
+import { getMetricCardValueColor } from './metric-card-utils';
+export { getMetricCardValueColor } from './metric-card-utils';
+/**
+ * Compact card displaying a labelled metric value with optional highlight and transparency states.
+ *
+ * @category cards
+ * @domain mining-operations
+ * @kernelCapability pool-performance
+ * @tier agent-ready
+ */
+export const MetricCard = ({ unit, label, value, bgColor, className, noMinWidth = false, isHighlighted = false, isValueMedium = false, showDashForZero = false, isTransparentColor = false, }) => {
+    const displayValue = showDashForZero && value === 0 ? FALLBACK : value;
+    return (_jsxs("div", { className: cn('mdk-metric-card', noMinWidth && 'mdk-metric-card--no-min-width', className), style: {
+            '--mdk-metric-card-bg': bgColor ?? COLOR.BLACK_ALPHA_05,
+        }, children: [_jsx("div", { className: "mdk-metric-card__label", children: label }), _jsxs("div", { className: cn('mdk-metric-card__value', isValueMedium && 'mdk-metric-card__value--medium'), style: { color: getMetricCardValueColor({ isHighlighted, isTransparentColor }) }, children: [displayValue, displayValue !== FALLBACK && unit ? ` ${unit}` : null] })] }));
+};

package/dist/domain/components/composite/metric-card/metric-card-utils.d.ts

@@ -0,0 +1,2 @@
+import type { MetricCardValueColorProps } from './props';
+export declare const getMetricCardValueColor: ({ isHighlighted, isTransparentColor, }: MetricCardValueColorProps) => string;

package/dist/domain/components/composite/metric-card/metric-card-utils.js

@@ -0,0 +1,10 @@
+import { COLOR } from '../../../../primitives/index.js';
+export const getMetricCardValueColor = ({ isHighlighted, isTransparentColor, }) => {
+    if (isHighlighted) {
+        return COLOR.COLD_ORANGE;
+    }
+    if (isTransparentColor) {
+        return COLOR.WHITE_ALPHA_05;
+    }
+    return COLOR.WHITE;
+};

package/dist/domain/components/composite/metric-card/metric-card.example.d.ts

@@ -0,0 +1 @@
+export declare const MetricCardExample: () => import("react").JSX.Element;

package/dist/domain/components/composite/metric-card/metric-card.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for MetricCard.
+ */
+import { MetricCard } from '@tetherto/mdk-react-devkit';
+export const MetricCardExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(MetricCard, { label: "Hashrate", unit: "TH/s", value: 102.4 }), _jsx(MetricCard, { label: "Power", unit: "W", value: 3200, isHighlighted: true }), _jsx(MetricCard, { label: "Efficiency", unit: "J/TH", value: 31.2, isValueMedium: true }), _jsx(MetricCard, { label: "Revenue", unit: "USD", value: 0, showDashForZero: true }), _jsx(MetricCard, { label: "Temperature", unit: "\u00B0C", value: null })] }));

package/dist/domain/components/composite/metric-card/props.d.ts

@@ -0,0 +1,47 @@
+export type MetricCardValueColorProps = Partial<{
+    isHighlighted: boolean;
+    isTransparentColor: boolean;
+}>;
+type MetricCardPartialProps = Partial<{
+    /**
+     * Custom background color (CSS color string)
+     * @default BLACK_ALPHA_05
+     */
+    bgColor: string;
+    /** Additional class names appended to the root element */
+    className: string;
+    /**
+     * Removes the default minimum width so the card shrinks to content
+     * @default false
+     */
+    noMinWidth: boolean;
+    /**
+     * Applies a medium-weight variant to the value typography
+     * @default false
+     */
+    isValueMedium: boolean;
+    /**
+     * Renders the value in orange to draw attention
+     * @default false
+     */
+    isHighlighted: boolean;
+    /**
+     * Displays `—` instead of `0` when value is zero
+     * @default false
+     */
+    showDashForZero: boolean;
+    /**
+     * Renders the value in a low-opacity white for de-emphasized display
+     * @default false
+     */
+    isTransparentColor: boolean;
+}>;
+export type MetricCardProps = {
+    /** Text label shown above the value */
+    label: string;
+    /** Unit suffix appended after the value (e.g. `"TH/s"`, `"W"`, `"USD"`) */
+    unit: string;
+    /** Metric value to display */
+    value: number | string | null;
+} & MetricCardPartialProps;
+export {};

package/dist/domain/components/composite/metric-card/props.js

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

package/dist/domain/components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker.d.ts

@@ -0,0 +1,30 @@
+import { type JSX } from 'react';
+import './dashboard-date-range-picker.scss';
+export type DashboardDateRange = {
+    /** Window start, milliseconds since epoch. */
+    start: number;
+    /** Window end, milliseconds since epoch. */
+    end: number;
+};
+export type DashboardDateRangePickerProps = {
+    /** Current range as `{ start, end }` epoch-millisecond timestamps. */
+    value: DashboardDateRange;
+    /** Fires with the next `{ start, end }` window when the user applies a range. */
+    onChange: (next: DashboardDateRange) => void;
+    /**
+     * Display format. Defaults to `dd/MM/yyyy`.
+     * @default 'dd/MM/yyyy'
+     */
+    dateFormat?: string;
+    /**
+     * Disable the trigger.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional class hook. */
+    className?: string;
+};
+export declare function DashboardDateRangePicker({ value, onChange, dateFormat, disabled, className, }: DashboardDateRangePickerProps): JSX.Element;
+export declare namespace DashboardDateRangePicker {
+    var displayName: string;
+}

package/dist/domain/components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker.example.d.ts

@@ -0,0 +1 @@
+export declare const DashboardDateRangePickerExample: () => import("react").JSX.Element;

package/dist/domain/components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker.example.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for DashboardDateRangePicker.
+ *
+ * Demonstrates the `{ start, end }` epoch-millisecond shape the picker
+ * reads and emits. The page owns the range and passes it to its queries.
+ */
+import { DashboardDateRangePicker } from '@tetherto/mdk-react-devkit';
+import { useState } from 'react';
+export const DashboardDateRangePickerExample = () => {
+    const now = Date.now();
+    const [range, setRange] = useState({
+        start: now - 24 * 60 * 60 * 1000,
+        end: now,
+    });
+    return _jsx(DashboardDateRangePicker, { value: range, onChange: setRange });
+};

package/dist/domain/components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, DateRangePicker as CoreDateRangePicker } from '../../../../primitives/index.js';
+import { useCallback, useMemo } from 'react';
+/**
+ * Dashboard-friendly wrapper around the core `DateRangePicker` that speaks
+ * `{ start, end }` epoch-millisecond timestamps instead of `Date` objects, the
+ * shape a history route usually takes as query params.
+ *
+ * @category dashboard
+ * @domain mining-operations
+ * @tier agent-ready
+ * @kernelCapability time-range-filtering
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = useState({ start: Date.now() - DAY_MS, end: Date.now() })
+ * <DashboardDateRangePicker value={range} onChange={setRange} />
+ * ```
+ */
+export const DashboardDateRangePicker = ({ value, onChange, dateFormat = 'dd/MM/yyyy', disabled = false, className, }) => {
+    const selected = useMemo(() => ({ from: new Date(value.start), to: new Date(value.end) }), [value.start, value.end]);
+    const handleSelect = useCallback((range) => {
+        if (!range?.from || !range?.to)
+            return;
+        onChange({ start: range.from.getTime(), end: range.to.getTime() });
+    }, [onChange]);
+    return (_jsx(CoreDateRangePicker, { selected: selected, onSelect: handleSelect, dateFormat: dateFormat, disabled: disabled, triggerClassName: cn('mdk-dashboard-date-range-picker__trigger', className), modalClassName: "mdk-dashboard-date-range-picker__modal" }));
+};
+DashboardDateRangePicker.displayName = 'DashboardDateRangePicker';

package/dist/domain/components/dashboard/dashboard-date-range-picker/index.d.ts

@@ -0,0 +1 @@
+export { type DashboardDateRange, DashboardDateRangePicker, type DashboardDateRangePickerProps, } from './dashboard-date-range-picker';

package/dist/domain/components/dashboard/dashboard-date-range-picker/index.js

@@ -0,0 +1 @@
+export { DashboardDateRangePicker, } from './dashboard-date-range-picker';

package/dist/domain/components/dashboard/export-button/export-button.d.ts

@@ -0,0 +1,32 @@
+import type { JSX } from 'react';
+import './export-button.scss';
+export type ExportFormat = 'csv' | 'json';
+export type ExportButtonProps = {
+    /**
+     * Fires with the chosen format when the user picks an item. Return a promise
+     * to show a loading state until it settles; a rejection clears it and is not
+     * rethrown, so report failures inside the handler.
+     */
+    onExport: (format: ExportFormat) => void | Promise<void>;
+    /**
+     * Formats to offer in the dropdown — defaults to `['csv', 'json']`.
+     * @default ['csv', 'json']
+     */
+    formats?: readonly ExportFormat[];
+    /**
+     * Button label — defaults to `'Export'`.
+     * @default 'Export'
+     */
+    label?: string;
+    /**
+     * Disable the button.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional class hook on the wrapper. */
+    className?: string;
+};
+export declare function ExportButton({ onExport, formats, label, disabled, className, }: ExportButtonProps): JSX.Element;
+export declare namespace ExportButton {
+    var displayName: string;
+}

package/dist/domain/components/dashboard/export-button/export-button.example.d.ts

@@ -0,0 +1 @@
+export declare const ExportButtonExample: () => import("react").JSX.Element;

package/dist/domain/components/dashboard/export-button/export-button.example.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for ExportButton.
+ *
+ * The handler in this demo just logs the selected format. A real page
+ * would serialise the data it is showing in that format and download it.
+ */
+import { ExportButton } from '@tetherto/mdk-react-devkit';
+export const ExportButtonExample = () => (_jsx(ExportButton, { onExport: (format) => {
+        console.warn('Export requested:', format);
+    } }));