@vention/machine-apps-components 0.0.0-dev.4527.a3d343ca7

package/src/lib/action-button/action-button.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionButton } from "./action-button";
+declare const meta: Meta<typeof ActionButton>;
+export default meta;
+type Story = StoryObj<typeof ActionButton>;
+export declare const Home: Story;
+export declare const Start: Story;
+export declare const Stop: Story;
+export declare const CustomDispense: Story;
+export declare const CustomIndexer: Story;
+export declare const Destructive: Story;
+export declare const Disabled: Story;
+export declare const MachineControlExample: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;

package/src/lib/file-upload-panel/file-upload-panel.d.ts

@@ -0,0 +1,23 @@
+export interface UploadedFile {
+    id: string;
+    name: string;
+    size: number;
+    state: "indeterminate" | "success" | "error";
+    errorMessage?: string;
+}
+export interface FileUploadPanelProps {
+    title?: string;
+    files: UploadedFile[];
+    onFilesSelect: (files: FileList) => string[];
+    onFileRemove: (fileId: string) => void;
+    onFileRetry?: (fileId: string) => void;
+    onFileCancel?: (fileId: string) => void;
+    fileCriteriaDescription?: string;
+    dropzoneTitle?: string;
+    disabled?: boolean;
+    maxHeight?: number | string;
+}
+export declare function FileUploadPanel({ title, files, onFilesSelect, onFileRemove, onFileRetry, onFileCancel, fileCriteriaDescription, dropzoneTitle, disabled, maxHeight, }: FileUploadPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FileUploadPanel {
+    var displayName: string;
+}

package/src/lib/file-upload-panel/file-upload-panel.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUploadPanel } from "./file-upload-panel";
+declare const meta: Meta<typeof FileUploadPanel>;
+export default meta;
+type Story = StoryObj<typeof FileUploadPanel>;
+export declare const Empty: Story;
+export declare const WithFiles: Story;
+export declare const WithUploadingFile: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const WithMaxHeight: Story;
+export declare const Interactive: Story;

package/src/lib/i18n-settings/i18n-settings.d.ts

@@ -0,0 +1,8 @@
+export interface I18nSettingsProps {
+    className?: string;
+    layout?: "stacked" | "horizontal";
+}
+export declare const I18nSettings: {
+    ({ className, layout }: I18nSettingsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/lib/i18n-settings/i18n-settings.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { I18nSettings } from "./i18n-settings";
+declare const meta: Meta<typeof I18nSettings>;
+export default meta;
+type Story = StoryObj<typeof I18nSettings>;
+export declare const Default: Story;
+export declare const Horizontal: Story;

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;
+    level: 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-panel.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LogsPanel } from "./logs-panel";
+declare const meta: Meta<typeof LogsPanel>;
+export default meta;
+type Story = StoryObj<typeof LogsPanel>;
+export declare const Default: Story;

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,20 @@
+import { ReactNode } from "react";
+import { NavigationItemProps } from "./navigation-bar-item";
+export type NavigationBarVariant = "fixed" | "flex";
+export interface NavigationBarProps {
+    children: ReactNode;
+    showTimer?: boolean;
+    onControlCenterClick?: () => void;
+    onSupportClick?: () => void;
+    disabledNavigationItems?: string[];
+    isControlCenterDisabled?: boolean;
+    isSupportDisabled?: boolean;
+    showControlCenterButton?: boolean;
+    showSupportButton?: boolean;
+    /** Layout variant: "fixed" positions the bar fixed to viewport bottom (default), "flex" uses relative positioning for flex layouts */
+    variant?: NavigationBarVariant;
+}
+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-bar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationBar } from "./navigation-bar";
+declare const meta: Meta<typeof NavigationBar>;
+export default meta;
+type Story = StoryObj<typeof NavigationBar>;
+export declare const Default: Story;

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/password-protection-modal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PasswordProtectionModal } from "./password-protection-modal";
+declare const meta: Meta<typeof PasswordProtectionModal>;
+export default meta;
+type Story = StoryObj<typeof PasswordProtectionModal>;
+export declare const Default: Story;

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/product-form-list/product-form-list.d.ts

@@ -0,0 +1,27 @@
+type FieldType = "text" | "number" | "select";
+export interface FieldDefinition {
+    name: string;
+    label: string;
+    type: FieldType;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    min?: number;
+    max?: number;
+}
+export interface ProductFormListProps<T> {
+    title?: string;
+    items: T[];
+    onDelete: (id: string) => Promise<void>;
+    onSubmit: (formData: Partial<T>) => Promise<boolean>;
+    getItemId: (item: T) => string;
+    fields: FieldDefinition[];
+    maxHeight?: string | number;
+}
+declare function ProductFormListComponent<T extends Record<string, unknown>>({ title, items, onDelete, onSubmit, getItemId, fields, maxHeight, }: ProductFormListProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ProductFormListComponent {
+    var displayName: string;
+}
+export declare const ProductFormList: typeof ProductFormListComponent;
+export {};

package/src/lib/product-form-list/product-form-list.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductFormList } from "./product-form-list";
+interface Part {
+    [key: string]: unknown;
+    id: string;
+    partNumber: string;
+    description: string;
+    quantity: number;
+    material: string;
+    cycleTime: number;
+}
+declare const meta: Meta<typeof ProductFormList<Part>>;
+export default meta;
+type Story = StoryObj<typeof ProductFormList<Part>>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const WithMaxHeight: Story;
+export declare const Interactive: Story;

package/src/lib/settings-page/settings-page.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { SidebarItem } from "../sidebar/sidebar";
+export interface SettingsPageProps {
+    sidebarItems: SidebarItem[];
+    children: ReactNode;
+    sidebarWidth?: number | string;
+}
+export declare const SettingsPage: {
+    ({ sidebarItems, children, sidebarWidth }: SettingsPageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/lib/settings-page/settings-page.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SettingsPage } from "./settings-page";
+declare const meta: Meta<typeof SettingsPage>;
+export default meta;
+type Story = StoryObj<typeof SettingsPage>;
+export declare const Default: Story;
+export declare const NarrowSidebar: Story;
+export declare const WideSidebar: Story;
+export declare const PercentageWidth: Story;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type IconType } from "@vention/machine-ui";
+export type SidebarVariant = "card" | "accent";
+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[];
+    /** Style variant: "card" (default) shows full bordered cards, "accent" shows left border accent only */
+    variant?: SidebarVariant;
+}
+export declare const Sidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Sidebar } from "./sidebar";
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+export declare const Default: Story;
+export declare const CardVariant: Story;
+export declare const AccentVariant: Story;

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;
+    disabled?: 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,27 @@
+import { ReactNode } from "react";
+export interface ButtonConfig {
+    id: string;
+    label: string;
+    onClick?: () => void;
+    visible?: boolean;
+    disabled?: boolean;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
+    borderColor?: string;
+    textColor?: string;
+    width?: number;
+    height?: number;
+    icon?: ReactNode;
+    iconDisabled?: ReactNode;
+}
+export type StatusTopBarVariant = "light" | "dark";
+export interface StatusTopBarProps {
+    status?: {
+        label: string;
+        color: string;
+    };
+    buttonConfigs?: ButtonConfig[];
+    variant?: StatusTopBarVariant;
+}
+export declare const StatusTopBar: (props: StatusTopBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusTopBar;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StatusTopBar } from "./status-top-bar";
+declare const meta: Meta<typeof StatusTopBar>;
+export default meta;
+type Story = StoryObj<typeof StatusTopBar>;
+export declare const Default: Story;
+export declare const DarkVariant: Story;
+export declare const DarkVariantRunning: Story;
+export declare const DarkVariantError: Story;
+export declare const Error: Story;

package/src/lib/step-progress-circle/step-progress-circle.d.ts

@@ -0,0 +1,14 @@
+export type StepProgressCircleVariant = "default" | "success" | "error" | "warning";
+export interface StepProgressCircleProps {
+    currentStep: number;
+    totalSteps: number;
+    title?: string;
+    variant?: StepProgressCircleVariant;
+    size?: number;
+    strokeWidth?: number;
+    showTitle?: boolean;
+}
+export declare function StepProgressCircle({ currentStep, totalSteps, title, variant, size, strokeWidth, showTitle, }: StepProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepProgressCircle {
+    var displayName: string;
+}

package/src/lib/step-progress-circle/step-progress-circle.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StepProgressCircle } from "./step-progress-circle";
+declare const meta: Meta<typeof StepProgressCircle>;
+export default meta;
+type Story = StoryObj<typeof StepProgressCircle>;
+export declare const Default: Story;
+export declare const InProgress: Story;
+export declare const Complete: Story;
+export declare const WithError: Story;
+export declare const Warning: Story;
+export declare const CustomTitle: Story;
+export declare const NoTitle: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const AllVariants: Story;
+export declare const ProgressStages: Story;

package/src/lib/utils/api-config-utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This module provides utilities for generating API base URLs for machine apps.
+ * It automatically detects the environment and returns the appropriate URL:
+ * - Local/Edge: http://hostname:8000
+ * - Deployed: Uses passthrough URL for digital twin infrastructure
+ */
+interface ApiConfigOptions {
+    /**
+     * The name of the process/service (e.g., "ai-operator", "my-service")
+     */
+    processName: string;
+    /**
+     * Optional custom port for edge/local development (default: 8000)
+     */
+    edgePort?: number;
+}
+/**
+ * Checks if the current environment is running on edge (local controller)
+ * @returns true if running on edge, false otherwise
+ */
+export declare function isOnEdge(): boolean;
+/**
+ * Gets the API base URL for the specified process/service
+ * @param options - Configuration options including process name and optional edge port
+ * @returns The API base URL for all backend API calls
+ * @example
+ * ```ts
+ * const apiUrl = getApiBaseUrl({ processName: "ai-operator" })
+ * // Returns: http://192.168.1.100:8000 (on edge)
+ * // or https://digital-twin.../passthrough/.../ai-operator (deployed)
+ * ```
+ */
+export declare function getApiBaseUrl(options: ApiConfigOptions): string;
+export {};

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,13 @@
+import { ReactElement } from "react";
+import { RenderOptions, RenderResult } from "@testing-library/react";
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+    initialRoute?: string;
+    i18nConfig?: {
+        locale?: string;
+        unitSystem?: "metric" | "imperial";
+        timezone?: string | "auto";
+        supportedLanguages?: string[];
+    };
+}
+export declare const renderWithProviders: (ui: ReactElement, { initialRoute, i18nConfig, ...renderOptions }?: CustomRenderOptions) => RenderResult;
+export * from "@testing-library/react";

package/src/types/user-level.d.ts

@@ -0,0 +1,6 @@
+export declare enum UserLevel {
+    Operator = 1,
+    Maintenance = 2,
+    Admin = 3
+}
+export declare function hasSufficientLevel(requiredLevel: UserLevel, currentLevel: UserLevel): boolean;