@vention/machine-apps-components 0.2.8

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@vention/machine-apps-components",
+  "version": "0.2.8",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VentionCo/machine-cloud.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "dayjs": "1.11.13",
+    "tss-react": "4.9.13"
+  },
+  "peerDependencies": {
+    "react": "17.0.2",
+    "react-router-dom": "^6.0.0",
+    "@mui/material": "^5.0.0",
+    "@ventionco/machine-ui": "3.30.1"
+  },
+  "devDependencies": {
+    "@nx/vite": "21.1.3",
+    "@testing-library/react": "12.1.5",
+    "@vitejs/plugin-react": "4.5.2",
+    "vite": "6.3.5",
+    "vitest": "3.2.4"
+  },
+  "module": "./index.esm.js",
+  "type": "module",
+  "main": "./index.esm.js",
+  "types": "./index.esm.d.ts"
+}

package/src/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./lib/navigation-bar/navigation-bar";
+export * from "./lib/navigation-bar/navigation-confirmation-modal";
+export * from "./lib/navigation-bar/password-protection-modal";
+export * from "./lib/navigation-bar/time-label";
+export * from "./lib/status-top-bar/status-top-bar";
+export * from "./lib/sidebar/sidebar";
+export type { SidebarItem, SidebarProps } from "./lib/sidebar/sidebar";
+export * from "./lib/logs/logs-table";
+export * from "./lib/logs/log-filter-form";
+export * from "./lib/logs/logs-panel";
+export * from "./lib/logs/logs-pagination";
+export type { LogEntry, LogFilterFormValues, SortOrder, LogType, PaginationMode, PaginationConfig, LogsPanelHandle, } from "./lib/logs/logs-panel";

package/src/lib/logs/log-filter-form.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { LogFilterFormValues } from "./logs-panel";
+interface LogFilterFormProps {
+    onFilterChange?: (filters: LogFilterFormValues) => void;
+    onReset?: () => void;
+    initialFilters?: Partial<LogFilterFormValues>;
+}
+export declare const LogFilterForm: import("react").MemoExoticComponent<({ onFilterChange, onReset, initialFilters }: LogFilterFormProps) => import("react/jsx-runtime").JSX.Element>;
+export default LogFilterForm;

package/src/lib/logs/logs-pagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface LogsPaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+export declare const LogsPagination: import("react").MemoExoticComponent<({ currentPage, totalPages, onPageChange }: LogsPaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export default LogsPagination;

package/src/lib/logs/logs-panel.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+export type LogType = "error" | "warning" | "info";
+export interface LogEntry {
+    id: string;
+    date: string;
+    type: LogType;
+    code: string;
+    message: string;
+    description: string;
+}
+export type SortOrder = "latest" | "oldest";
+export interface LogFilterFormValues {
+    fromDate?: string;
+    toDate?: string;
+    logType?: LogType;
+    sortOrder: SortOrder;
+}
+export declare const formatDateToInput: (date: Date) => string;
+export declare const parseLogDate: (dateStr: string) => number;
+export type PaginationMode = "pagination" | "infinite-scroll" | "none";
+export interface PaginationConfig {
+    mode: PaginationMode;
+    pageSize?: number;
+    initialPage?: number;
+}
+export interface FetchParams {
+    filters: LogFilterFormValues;
+    page: number;
+    pageSize: number;
+}
+export interface FetchResult {
+    logs: LogEntry[];
+    totalCount: number;
+    totalPages: number;
+    currentPage: number;
+    hasMorePages: boolean;
+}
+export type DataFetcher = (params: FetchParams) => Promise<FetchResult>;
+export interface LogsPanelHandle {
+    refresh: () => Promise<void>;
+    resetFilters: () => void;
+    applyFilters: (filters: Partial<LogFilterFormValues>) => void;
+    getCurrentFilters: () => LogFilterFormValues;
+    exportLogs: () => LogEntry[];
+}
+interface LogsPanelProps {
+    dataFetcher: DataFetcher;
+    initialFilters?: Partial<LogFilterFormValues>;
+    onError?: (error: unknown) => void;
+    pagination?: PaginationConfig;
+    onFilterChange?: (filters: LogFilterFormValues) => void;
+    onLogClick?: (log: LogEntry) => void;
+    className?: string;
+    tableHeight?: string | number;
+    emptyStateMessage?: string;
+    emptyStateIcon?: ReactNode;
+}
+export declare const LogsPanel: import("react").ForwardRefExoticComponent<LogsPanelProps & import("react").RefAttributes<LogsPanelHandle>>;
+export default LogsPanel;

package/src/lib/logs/logs-table.d.ts

@@ -0,0 +1,15 @@
+import type { LogEntry } from "./logs-panel";
+import { ReactNode } from "react";
+interface LogsTableProps {
+    logs?: LogEntry[];
+    isLoading?: boolean;
+    error?: string | null;
+    onLoadMoreLogs?: () => void;
+    hasMoreLogs?: boolean;
+    onLogClick?: (log: LogEntry) => void;
+    tableHeight?: string | number;
+    emptyStateMessage?: string;
+    emptyStateIcon?: ReactNode;
+}
+export declare const LogsTable: import("react").MemoExoticComponent<({ logs, isLoading, error, onLoadMoreLogs, hasMoreLogs, onLogClick, tableHeight, emptyStateMessage, emptyStateIcon, }: LogsTableProps) => import("react/jsx-runtime").JSX.Element>;
+export default LogsTable;

package/src/lib/navigation-bar/navigation-bar-item.d.ts

@@ -0,0 +1,17 @@
+import { useLocation } from "react-router-dom";
+import { ReactNode } from "react";
+export interface NavigationItemProps {
+    id: string;
+    label: string;
+    path: string;
+    icon: ReactNode;
+    iconDisabled?: ReactNode;
+    onClick?: () => void;
+    password?: string;
+    isDisabled?: boolean;
+    location?: ReturnType<typeof useLocation>;
+    handleNavigate?: (path: string) => void;
+    currentPassword?: string | null;
+    setPasswordProtectedItem?: (item: NavigationItemProps) => void;
+}
+export declare const NavigationBarItem: (props: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/navigation-bar/navigation-bar.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { NavigationItemProps } from "./navigation-bar-item";
+export interface NavigationBarProps {
+    children: ReactNode;
+    showTimer?: boolean;
+    onControlCenterClick?: () => void;
+    onSupportClick?: () => void;
+    disabledNavigationItems?: string[];
+    isControlCenterDisabled?: boolean;
+    isSupportDisabled?: boolean;
+    showControlCenterButton?: boolean;
+    showSupportButton?: boolean;
+}
+export declare const NavigationBar: ((props: NavigationBarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (props: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default NavigationBar;

package/src/lib/navigation-bar/navigation-confirmation-modal.d.ts

@@ -0,0 +1,7 @@
+interface NavigationConfirmationModalProps {
+    isOpen: boolean;
+    destination: "controlCenter" | "remoteSupport" | null;
+    onClose: () => void;
+}
+export declare const NavigationConfirmationModal: (props: NavigationConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/navigation-bar/password-protection-modal.d.ts

@@ -0,0 +1,8 @@
+interface PasswordProtectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+    correctPassword: string;
+}
+export declare const PasswordProtectionModal: (props: PasswordProtectionModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/navigation-bar/time-label.d.ts

@@ -0,0 +1,6 @@
+export interface TimeLabelProps {
+    className?: string;
+    color?: string;
+}
+export declare function TimeLabel({ className, color }: TimeLabelProps): import("react/jsx-runtime").JSX.Element;
+export default TimeLabel;

package/src/lib/sidebar/sidebar.d.ts

@@ -0,0 +1,15 @@
+import { type IconType } from "@ventionco/machine-ui";
+import React from "react";
+export interface SidebarItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    iconType?: IconType;
+    state: "pending" | "active" | "completed" | "disabled";
+    onClick?: () => void;
+}
+export interface SidebarProps {
+    items: SidebarItem[];
+}
+export declare const Sidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/status-top-bar/status-top-bar-button.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+export interface StatusTopBarButtonProps {
+    id: string;
+    label: string;
+    onClick?: () => void;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
+    borderColor?: string;
+    textColor?: string;
+    width?: number;
+    height?: number;
+    icon?: ReactNode;
+    iconDisabled?: ReactNode;
+    isDisabled?: boolean;
+    visible?: boolean;
+}
+export declare const StatusTopBarButton: (props: StatusTopBarButtonProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/status-top-bar/status-top-bar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { StatusTopBarButtonProps } from "./status-top-bar-button";
+export interface StatusTopBarProps {
+    statusLabel?: string;
+    dotColor?: string;
+    children?: ReactNode;
+    visibleButtons?: string[];
+    disabledButtons?: string[];
+}
+export declare const StatusTopBar: ((props: StatusTopBarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Button: (props: StatusTopBarButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default StatusTopBar;

package/src/lib/utils/device-utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Detects if the current device has touch screen capabilities
+ * @returns true if the device supports touch events, false otherwise
+ */
+export declare const isTouchScreenDevice: () => boolean;
+/**
+ * Closes the custom UI by sending a message to the parent window
+ */
+export declare const closeCustomUi: () => void;
+/**
+ * Navigates to a specific route in the Control Center
+ * @param route - The route to navigate to (remoteSupport or controlCenterHomepage)
+ */
+export declare const navigateControlCenter: (route: "remoteSupport" | "controlCenterHomepage") => void;

package/src/test-setup.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/src/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import { RenderOptions, RenderResult } from "@testing-library/react";
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+    initialRoute?: string;
+}
+/**
+ * Custom render function that wraps components with necessary providers:
+ * - ThemeProvider with machineUiTheme
+ * - MemoryRouter for routing
+ */
+export declare const renderWithProviders: (ui: ReactElement, { initialRoute, ...renderOptions }?: CustomRenderOptions) => RenderResult;
+export * from "@testing-library/react";