@vention/machine-apps-components 0.3.22 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-apps-components",
-  "version": "0.3.22",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"
@@ -12,6 +12,9 @@
   "license": "MIT",
   "dependencies": {
     "dayjs": "1.11.19",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "react-i18next": "15.0.1",
     "tss-react": "4.9.19"
   },
   "peerDependencies": {
@@ -22,7 +25,10 @@
   },
   "devDependencies": {
     "@nx/vite": "21.1.3",
+    "@storybook/react": "8.6.14",
+    "@tabler/icons-react": "3.35.0",
     "@testing-library/react": "12.1.5",
+    "@types/i18next-browser-languagedetector": "^3.0.0",
     "@vitejs/plugin-react": "4.5.2",
     "vite": "6.3.5",
     "vitest": "3.2.4"

package/src/constants/z-index.d.ts

@@ -0,0 +1,8 @@
+export declare const Z_INDEX: {
+    readonly NAVIGATION: 1100;
+    readonly MENU: 1200;
+    readonly MENU_OVERLAY: 1210;
+    readonly MODAL: 1300;
+    readonly SNACKBAR: 1400;
+    readonly TOOLTIP: 1500;
+};

package/src/contexts/i18n-context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type UnitSystem = "metric" | "imperial";
+export interface I18nContextType {
+    locale: string;
+    unitSystem: UnitSystem;
+    timezone: string | "auto";
+    supportedLanguages: string[];
+    setLocale: (locale: string) => void;
+    setUnitSystem: (system: UnitSystem) => void;
+    setTimezone: (tz: string | "auto") => void;
+}
+export declare const I18nContext: import("react").Context<I18nContextType>;

package/src/contexts/i18n-provider.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UnitSystem } from "./i18n-context";
+export interface I18nProviderProps {
+    children: React.ReactNode;
+    defaultLocale?: string;
+    defaultUnitSystem?: UnitSystem;
+    defaultTimezone?: string | "auto";
+    supportedLanguages?: string[];
+}
+export declare const I18nProvider: {
+    ({ children, defaultLocale, defaultUnitSystem, defaultTimezone, supportedLanguages, }: I18nProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/hooks/use-i18n.d.ts

@@ -0,0 +1,19 @@
+import { UnitSystem } from "../contexts/i18n-context";
+import { FormatLengthOptions } from "../i18n/utils";
+export interface UseI18nReturn {
+    t: (key: string, options?: {
+        defaultValue?: string;
+    }) => string;
+    formatDate: (utcTimestamp: number, format?: string) => string;
+    formatValueToDisplayUnit: (value: number, options?: FormatLengthOptions) => string;
+    convertDisplayValueToMm: (value: number) => number;
+    getUnitDisplayLabel: () => string;
+    locale: string;
+    unitSystem: UnitSystem;
+    timezone: string | "auto";
+    supportedLanguages: string[];
+    setLocale: (locale: string) => void;
+    setUnitSystem: (system: UnitSystem) => void;
+    setTimezone: (tz: string | "auto") => void;
+}
+export declare const useI18n: () => UseI18nReturn;

package/src/i18n/config.d.ts

@@ -0,0 +1,8 @@
+import i18n from "i18next";
+import "dayjs/locale/en";
+import "dayjs/locale/fr";
+import "dayjs/locale/de";
+import "dayjs/locale/es";
+export declare const getSupportedLanguages: () => string[];
+export declare const getLanguageDisplayName: (code: string) => string;
+export default i18n;

package/src/i18n/locales/de.d.ts

@@ -0,0 +1,118 @@
+declare const _default: {
+    common: {
+        units: {
+            mm: string;
+            in: string;
+            metric: string;
+            imperial: string;
+        };
+        settings: {
+            unitSystem: string;
+            timezone: string;
+            autoDetect: string;
+            locale: string;
+        };
+    };
+    actionButton: {
+        home: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        clear: string;
+        run: string;
+        resume: string;
+    };
+    logs: {
+        table: {
+            date: string;
+            type: string;
+            code: string;
+            message: string;
+            description: string;
+        };
+        type: {
+            error: string;
+            warning: string;
+            info: string;
+        };
+        emptyState: {
+            noLogs: string;
+        };
+        loading: string;
+        loadingMore: string;
+        noMoreLogs: string;
+        error: {
+            loading: string;
+        };
+        filter: {
+            from: string;
+            to: string;
+            type: string;
+            sort: string;
+            reset: string;
+            typeOptions: {
+                all: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+            sortOptions: {
+                latest: string;
+                oldest: string;
+            };
+            chooseType: string;
+        };
+    };
+    navigation: {
+        pages: {
+            home: string;
+            operation: string;
+            logs: string;
+            calibration: string;
+            settings: string;
+        };
+        bar: {
+            controlCenter: string;
+            support: string;
+        };
+        modal: {
+            exit: {
+                title: string;
+                message: string;
+            };
+            goToControlCenter: string;
+            goToRemoteSupport: string;
+            password: {
+                title: string;
+                label: string;
+                error: string;
+                confirm: string;
+            };
+        };
+    };
+    pagination: {
+        page: string;
+        of: string;
+    };
+    fileUploadPanel: {
+        defaultTitle: string;
+        dropzoneTitle: string;
+        defaultFileCriteria: string;
+    };
+    stepProgressCircle: {
+        title: {
+            progress: string;
+            manufacturing: string;
+            processing: string;
+            uploading: string;
+            notstarted: string;
+            ready: string;
+            inprogress: string;
+            complete: string;
+            loading: string;
+            waiting: string;
+        };
+    };
+};
+export default _default;

package/src/i18n/locales/en.d.ts

@@ -0,0 +1,118 @@
+declare const _default: {
+    common: {
+        units: {
+            mm: string;
+            in: string;
+            metric: string;
+            imperial: string;
+        };
+        settings: {
+            unitSystem: string;
+            timezone: string;
+            autoDetect: string;
+            locale: string;
+        };
+    };
+    actionButton: {
+        home: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        clear: string;
+        run: string;
+        resume: string;
+    };
+    logs: {
+        table: {
+            date: string;
+            type: string;
+            code: string;
+            message: string;
+            description: string;
+        };
+        type: {
+            error: string;
+            warning: string;
+            info: string;
+        };
+        emptyState: {
+            noLogs: string;
+        };
+        loading: string;
+        loadingMore: string;
+        noMoreLogs: string;
+        error: {
+            loading: string;
+        };
+        filter: {
+            from: string;
+            to: string;
+            type: string;
+            sort: string;
+            reset: string;
+            typeOptions: {
+                all: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+            sortOptions: {
+                latest: string;
+                oldest: string;
+            };
+            chooseType: string;
+        };
+    };
+    navigation: {
+        pages: {
+            home: string;
+            operation: string;
+            logs: string;
+            calibration: string;
+            settings: string;
+        };
+        bar: {
+            controlCenter: string;
+            support: string;
+        };
+        modal: {
+            exit: {
+                title: string;
+                message: string;
+            };
+            goToControlCenter: string;
+            goToRemoteSupport: string;
+            password: {
+                title: string;
+                label: string;
+                error: string;
+                confirm: string;
+            };
+        };
+    };
+    pagination: {
+        page: string;
+        of: string;
+    };
+    fileUploadPanel: {
+        defaultTitle: string;
+        dropzoneTitle: string;
+        defaultFileCriteria: string;
+    };
+    stepProgressCircle: {
+        title: {
+            progress: string;
+            manufacturing: string;
+            processing: string;
+            uploading: string;
+            notstarted: string;
+            ready: string;
+            inprogress: string;
+            complete: string;
+            loading: string;
+            waiting: string;
+        };
+    };
+};
+export default _default;

package/src/i18n/locales/es.d.ts

@@ -0,0 +1,118 @@
+declare const _default: {
+    common: {
+        units: {
+            mm: string;
+            in: string;
+            metric: string;
+            imperial: string;
+        };
+        settings: {
+            unitSystem: string;
+            timezone: string;
+            autoDetect: string;
+            locale: string;
+        };
+    };
+    actionButton: {
+        home: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        clear: string;
+        run: string;
+        resume: string;
+    };
+    logs: {
+        table: {
+            date: string;
+            type: string;
+            code: string;
+            message: string;
+            description: string;
+        };
+        type: {
+            error: string;
+            warning: string;
+            info: string;
+        };
+        emptyState: {
+            noLogs: string;
+        };
+        loading: string;
+        loadingMore: string;
+        noMoreLogs: string;
+        error: {
+            loading: string;
+        };
+        filter: {
+            from: string;
+            to: string;
+            type: string;
+            sort: string;
+            reset: string;
+            typeOptions: {
+                all: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+            sortOptions: {
+                latest: string;
+                oldest: string;
+            };
+            chooseType: string;
+        };
+    };
+    navigation: {
+        pages: {
+            home: string;
+            operation: string;
+            logs: string;
+            calibration: string;
+            settings: string;
+        };
+        bar: {
+            controlCenter: string;
+            support: string;
+        };
+        modal: {
+            exit: {
+                title: string;
+                message: string;
+            };
+            goToControlCenter: string;
+            goToRemoteSupport: string;
+            password: {
+                title: string;
+                label: string;
+                error: string;
+                confirm: string;
+            };
+        };
+    };
+    pagination: {
+        page: string;
+        of: string;
+    };
+    fileUploadPanel: {
+        defaultTitle: string;
+        dropzoneTitle: string;
+        defaultFileCriteria: string;
+    };
+    stepProgressCircle: {
+        title: {
+            progress: string;
+            manufacturing: string;
+            processing: string;
+            uploading: string;
+            notstarted: string;
+            ready: string;
+            inprogress: string;
+            complete: string;
+            loading: string;
+            waiting: string;
+        };
+    };
+};
+export default _default;

package/src/i18n/locales/fr.d.ts

@@ -0,0 +1,118 @@
+declare const _default: {
+    common: {
+        units: {
+            mm: string;
+            in: string;
+            metric: string;
+            imperial: string;
+        };
+        settings: {
+            unitSystem: string;
+            timezone: string;
+            autoDetect: string;
+            locale: string;
+        };
+    };
+    actionButton: {
+        home: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        clear: string;
+        run: string;
+        resume: string;
+    };
+    logs: {
+        table: {
+            date: string;
+            type: string;
+            code: string;
+            message: string;
+            description: string;
+        };
+        type: {
+            error: string;
+            warning: string;
+            info: string;
+        };
+        emptyState: {
+            noLogs: string;
+        };
+        loading: string;
+        loadingMore: string;
+        noMoreLogs: string;
+        error: {
+            loading: string;
+        };
+        filter: {
+            from: string;
+            to: string;
+            type: string;
+            sort: string;
+            reset: string;
+            typeOptions: {
+                all: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+            sortOptions: {
+                latest: string;
+                oldest: string;
+            };
+            chooseType: string;
+        };
+    };
+    navigation: {
+        pages: {
+            home: string;
+            operation: string;
+            logs: string;
+            calibration: string;
+            settings: string;
+        };
+        bar: {
+            controlCenter: string;
+            support: string;
+        };
+        modal: {
+            exit: {
+                title: string;
+                message: string;
+            };
+            goToControlCenter: string;
+            goToRemoteSupport: string;
+            password: {
+                title: string;
+                label: string;
+                error: string;
+                confirm: string;
+            };
+        };
+    };
+    pagination: {
+        page: string;
+        of: string;
+    };
+    fileUploadPanel: {
+        defaultTitle: string;
+        dropzoneTitle: string;
+        defaultFileCriteria: string;
+    };
+    stepProgressCircle: {
+        title: {
+            progress: string;
+            manufacturing: string;
+            processing: string;
+            uploading: string;
+            notstarted: string;
+            ready: string;
+            inprogress: string;
+            complete: string;
+            loading: string;
+            waiting: string;
+        };
+    };
+};
+export default _default;

package/src/i18n/utils.d.ts

@@ -0,0 +1,13 @@
+export declare const MM_TO_INCH = 0.0393701;
+export declare const INCH_TO_MM = 25.4;
+export type UnitSystem = "metric" | "imperial";
+export interface FormatLengthOptions {
+    decimals?: number;
+    showUnit?: boolean;
+}
+export declare function mmToInches(mm: number): number;
+export declare function inchesToMm(inches: number): number;
+export declare function formatValueToDisplayUnit(value: number, unitSystem: UnitSystem, options?: FormatLengthOptions): string;
+export declare function convertDisplayValueToMm(displayValue: number, unitSystem: UnitSystem): number;
+export declare function getUnitDisplayLabel(unitSystem: UnitSystem): string;
+export declare function getAvailableTimezones(): string[];

package/src/index.d.ts

@@ -1,3 +1,8 @@
+export * from "./contexts/i18n-provider";
+export * from "./hooks/use-i18n";
+export * from "./lib/i18n-settings/i18n-settings";
+export { getAvailableTimezones } from "./i18n/utils";
+export { getLanguageDisplayName, getSupportedLanguages } from "./i18n/config";
 export * from "./lib/navigation-bar/navigation-bar";
 export * from "./lib/navigation-bar/navigation-confirmation-modal";
 export * from "./lib/navigation-bar/password-protection-modal";
@@ -11,5 +16,13 @@ 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";
+export * from "./lib/settings-page/settings-page";
+export * from "./lib/file-upload-panel/file-upload-panel";
+export * from "./lib/step-progress-circle/step-progress-circle";
+export type { StepProgressCircleProps, StepProgressCircleVariant } from "./lib/step-progress-circle/step-progress-circle";
+export * from "./lib/action-button/action-button";
+export type { ActionButtonProps, ActionButtonVariant } from "./lib/action-button/action-button";
+export * from "./types/user-level";
 export * from "./lib/utils/api-config-utils";
 export * from "./lib/utils/device-utils";
+export * from "./constants/z-index";

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export type ActionButtonVariant = "primary" | "destructive";
+export interface ActionButtonProps {
+    variant?: ActionButtonVariant;
+    onClick: () => void;
+    disabled?: boolean;
+    icon: ReactNode;
+    label: string;
+    size?: number;
+}
+export declare const ActionButton: {
+    ({ variant, onClick, disabled, icon, label, size, }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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;