@vention/machine-apps-components 0.5.0 → 0.6.0

package/index.esm.js

@@ -135,6 +135,16 @@ var enTranslations = {
       error: "Error"
     }
   },
+  pressButton: {
+    dispense: "Dispense",
+    dispensing: "Dispensing",
+    grip: "Grip",
+    gripping: "Gripping",
+    press: "Press",
+    pressing: "Pressing",
+    hold: "Hold",
+    holding: "Holding"
+  },
   productFormList: {
     add: "Add",
     cancel: "Cancel",
@@ -266,6 +276,16 @@ var frTranslations = {
       error: "Erreur"
     }
   },
+  pressButton: {
+    dispense: "Distribuer",
+    dispensing: "Distribution",
+    grip: "Saisir",
+    gripping: "Saisie",
+    press: "Appuyer",
+    pressing: "Appui",
+    hold: "Maintenir",
+    holding: "Maintien"
+  },
   productFormList: {
     add: "Ajouter",
     cancel: "Annuler",
@@ -397,6 +417,16 @@ var deTranslations = {
       error: "Fehler"
     }
   },
+  pressButton: {
+    dispense: "Dosieren",
+    dispensing: "Dosierung",
+    grip: "Greifen",
+    gripping: "Greifend",
+    press: "Drücken",
+    pressing: "Drückend",
+    hold: "Halten",
+    holding: "Haltend"
+  },
   productFormList: {
     add: "Hinzufügen",
     cancel: "Abbrechen",
@@ -528,6 +558,16 @@ var esTranslations = {
       error: "Error"
     }
   },
+  pressButton: {
+    dispense: "Dispensar",
+    dispensing: "Dispensando",
+    grip: "Agarrar",
+    gripping: "Agarrando",
+    press: "Presionar",
+    pressing: "Presionando",
+    hold: "Mantener",
+    holding: "Manteniendo"
+  },
   productFormList: {
     add: "Agregar",
     cancel: "Cancelar",
@@ -832,7 +872,7 @@ const I18nSettings = function I18nSettings({
   const {
     classes,
     cx
-  } = useStyles$g({
+  } = useStyles$h({
     layout
   });
   const {
@@ -922,7 +962,7 @@ const I18nSettings = function I18nSettings({
   });
 };
 I18nSettings.displayName = "I18nSettings";
-const useStyles$g = tss.withParams().create(({
+const useStyles$h = tss.withParams().create(({
   theme,
   layout
 }) => ({
@@ -1024,7 +1064,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
   } = props;
   const {
     classes
-  } = useStyles$f();
+  } = useStyles$g();
   const {
     t
   } = useI18n();
@@ -1087,7 +1127,7 @@ const NavigationConfirmationModal = function NavigationConfirmationModal(props)
     })
   });
 };
-const useStyles$f = tss.create(({
+const useStyles$g = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -1151,7 +1191,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const {
     classes
-  } = useStyles$e();
+  } = useStyles$f();
   const {
     t
   } = useI18n();
@@ -1275,7 +1315,7 @@ const PasswordProtectionModal = function PasswordProtectionModal(props) {
     })]
   });
 };
-const useStyles$e = tss.create(({
+const useStyles$f = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -1347,7 +1387,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
   const {
     classes,
     cx
-  } = useStyles$d();
+  } = useStyles$e();
   const {
     t
   } = useI18n();
@@ -1380,7 +1420,7 @@ const NavigationBarItem = function NavigationBarItem(props) {
     })]
   });
 };
-const useStyles$d = tss.create(({
+const useStyles$e = tss.create(({
   theme
 }) => ({
   tabButton: {
@@ -1451,7 +1491,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
   const theme = useTheme();
   const {
     classes
-  } = useStyles$c({
+  } = useStyles$d({
     variant
   });
   const {
@@ -1592,7 +1632,7 @@ const NavigationBarRoot = function NavigationBarRoot(props) {
     })]
   });
 };
-const useStyles$c = tss.withParams().create(({
+const useStyles$d = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -1702,7 +1742,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
   } = props;
   const {
     classes
-  } = useStyles$b();
+  } = useStyles$c();
   if (!visible) return null;
   const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
@@ -1748,7 +1788,7 @@ const StatusTopBarButton = function StatusTopBarButton(props) {
     })
   });
 };
-const useStyles$b = tss.create(({
+const useStyles$c = tss.create(({
   theme
 }) => ({
   actionButton: {
@@ -1784,7 +1824,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
   } = props;
   const {
     classes
-  } = useStyles$a({
+  } = useStyles$b({
     variant
   });
   const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
@@ -1811,7 +1851,7 @@ const StatusTopBarRoot = function StatusTopBarRoot(props) {
     })]
   });
 };
-const useStyles$a = tss.withParams().create(({
+const useStyles$b = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -1860,7 +1900,7 @@ const Sidebar = function Sidebar(props) {
   } = props;
   const {
     classes
-  } = useStyles$9({
+  } = useStyles$a({
     variant
   });
   return jsx(Box, {
@@ -1924,7 +1964,7 @@ const SidebarItemComponent = function SidebarItemComponent(props) {
     })
   });
 };
-const useStyles$9 = tss.withParams().create(({
+const useStyles$a = tss.withParams().create(({
   theme,
   variant
 }) => ({
@@ -2049,7 +2089,7 @@ const LogsTable = memo(({
   const {
     classes,
     cx
-  } = useStyles$8({
+  } = useStyles$9({
     tableHeight
   });
   const theme = useTheme();
@@ -2314,7 +2354,7 @@ const LogsTable = memo(({
   });
 });
 LogsTable.displayName = "LogsTable";
-const useStyles$8 = tss.withParams().create(({
+const useStyles$9 = tss.withParams().create(({
   theme,
   tableHeight
 }) => ({
@@ -2428,7 +2468,7 @@ const LogFilterForm = memo(({
   var _a, _b, _c, _d;
   const {
     classes
-  } = useStyles$7();
+  } = useStyles$8();
   const {
     t
   } = useI18n();
@@ -2565,7 +2605,7 @@ const LogFilterForm = memo(({
   });
 });
 LogFilterForm.displayName = "LogFilterForm";
-const useStyles$7 = tss.create(({
+const useStyles$8 = tss.create(({
   theme
 }) => ({
   filterSection: {
@@ -2629,7 +2669,7 @@ const LogsPagination = memo(({
 }) => {
   const {
     classes
-  } = useStyles$6();
+  } = useStyles$7();
   const {
     t
   } = useI18n();
@@ -2668,7 +2708,7 @@ const LogsPagination = memo(({
   });
 });
 LogsPagination.displayName = "LogsPagination";
-const useStyles$6 = tss.create(({
+const useStyles$7 = tss.create(({
   theme
 }) => ({
   paginationSection: {
@@ -2719,7 +2759,7 @@ const LogsPanel = forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles$5();
+  } = useStyles$6();
   const [logs, setLogs] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -2855,7 +2895,7 @@ const LogsPanel = forwardRef((props, ref) => {
   });
 });
 LogsPanel.displayName = "LogsPanel";
-const useStyles$5 = tss.create(({
+const useStyles$6 = tss.create(({
   theme
 }) => ({
   root: {
@@ -2873,7 +2913,7 @@ const SettingsPage = function SettingsPage({
 }) {
   const {
     classes
-  } = useStyles$4({
+  } = useStyles$5({
     sidebarWidth
   });
   return jsxs(Box, {
@@ -2890,7 +2930,7 @@ const SettingsPage = function SettingsPage({
   });
 };
 SettingsPage.displayName = "SettingsPage";
-const useStyles$4 = tss.withParams().create(({
+const useStyles$5 = tss.withParams().create(({
   theme,
   sidebarWidth
 }) => ({
@@ -2936,7 +2976,7 @@ function FileUploadPanel({
   const {
     classes,
     cx
-  } = useStyles$3({
+  } = useStyles$4({
     maxHeight
   });
   const {
@@ -2989,7 +3029,7 @@ function FileUploadPanel({
   });
 }
 FileUploadPanel.displayName = "FileUploadPanel";
-const useStyles$3 = tss.withParams().create(({
+const useStyles$4 = tss.withParams().create(({
   theme,
   maxHeight
 }) => ({
@@ -3040,7 +3080,7 @@ function StepProgressCircle({
   const {
     classes,
     cx
-  } = useStyles$2({
+  } = useStyles$3({
     size,
     strokeWidth,
     variant
@@ -3098,7 +3138,7 @@ function StepProgressCircle({
   });
 }
 StepProgressCircle.displayName = "StepProgressCircle";
-const useStyles$2 = tss.withParams().create(({
+const useStyles$3 = tss.withParams().create(({
   theme,
   size,
   strokeWidth,
@@ -3168,7 +3208,7 @@ const ActionButton = function ActionButton({
   const {
     classes,
     cx
-  } = useStyles$1({
+  } = useStyles$2({
     size
   });
   const {
@@ -3200,7 +3240,7 @@ const ActionButton = function ActionButton({
   });
 };
 ActionButton.displayName = "ActionButton";
-const useStyles$1 = tss.withParams().create(({
+const useStyles$2 = tss.withParams().create(({
   theme,
   size
 }) => ({
@@ -3227,6 +3267,130 @@ const useStyles$1 = tss.withParams().create(({
   }
 }));
 
+const PressButton = function PressButton({
+  onPress,
+  onRelease,
+  disabled = false,
+  icon,
+  label,
+  activeLabel,
+  size = 96,
+  labelVariant = "uiText14SemiBold",
+  className,
+  sx
+}) {
+  const [isPressed, setIsPressed] = useState(false);
+  const isTouchActive = useRef(false);
+  const {
+    classes,
+    cx
+  } = useStyles$1({
+    size
+  });
+  const {
+    t
+  } = useTranslation();
+  const currentLabel = isPressed && activeLabel ? activeLabel : label;
+  const translationKey = currentLabel.toLowerCase().replace(/\s+/g, "_");
+  const translatedLabel = t(`pressButton.${translationKey}`, {
+    defaultValue: currentLabel
+  });
+  function handlePress() {
+    if (disabled) return;
+    setIsPressed(true);
+    onPress();
+  }
+  function handleRelease() {
+    if (!isPressed) return;
+    setIsPressed(false);
+    onRelease();
+  }
+  function handleMouseDown() {
+    if (isTouchActive.current) return;
+    handlePress();
+  }
+  function handleMouseUp() {
+    if (isTouchActive.current) return;
+    handleRelease();
+  }
+  function handleMouseLeave() {
+    if (isTouchActive.current) return;
+    handleRelease();
+  }
+  function handleTouchStart(event) {
+    event.preventDefault();
+    isTouchActive.current = true;
+    handlePress();
+  }
+  function handleTouchEnd(event) {
+    event.preventDefault();
+    handleRelease();
+    setTimeout(() => {
+      isTouchActive.current = false;
+    }, 400);
+  }
+  return jsx(VentionIconButton, {
+    disabled: disabled,
+    size: "x-large",
+    variant: "filled",
+    className: cx(classes.button, isPressed && classes.buttonActive, className),
+    sx: sx,
+    "data-testid": "press-button",
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchEnd,
+    children: jsxs(Box, {
+      className: classes.content,
+      children: [jsx(Box, {
+        className: classes.iconContainer,
+        children: icon
+      }), jsx(Typography, {
+        variant: labelVariant,
+        className: classes.label,
+        children: translatedLabel
+      })]
+    })
+  });
+};
+PressButton.displayName = "PressButton";
+const useStyles$1 = tss.withParams().create(({
+  theme,
+  size
+}) => ({
+  button: {
+    height: size,
+    width: size,
+    minWidth: size,
+    padding: theme.spacing(2),
+    transition: "border-color 0.2s ease, transform 0.1s ease",
+    border: "3px solid transparent",
+    "&:active": {
+      transform: "scale(0.98)"
+    }
+  },
+  buttonActive: {
+    borderColor: theme.palette.primary.main
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1)
+  },
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    textAlign: "center"
+  }
+}));
+
 function useAutoScrollInput(enabled, options = {}) {
   const {
     targetPositionPercent = 25,
@@ -3682,4 +3846,4 @@ function getApiBaseUrl(options) {
   return getExecutionEngineHttpUrl(processName);
 }
 
-export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };
+export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, PressButton, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-apps-components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"
@@ -21,7 +21,7 @@
     "react": "17.0.2",
     "react-router-dom": "^6.0.0",
     "@mui/material": "^5.0.0",
-    "@vention/machine-ui": "3.38.0"
+    "@vention/machine-ui": "^3.38.0"
   },
   "devDependencies": {
     "@nx/vite": "21.1.3",

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

@@ -116,6 +116,16 @@ declare const _default: {
             error: string;
         };
     };
+    pressButton: {
+        dispense: string;
+        dispensing: string;
+        grip: string;
+        gripping: string;
+        press: string;
+        pressing: string;
+        hold: string;
+        holding: string;
+    };
     productFormList: {
         add: string;
         cancel: string;

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

@@ -116,6 +116,16 @@ declare const _default: {
             error: string;
         };
     };
+    pressButton: {
+        dispense: string;
+        dispensing: string;
+        grip: string;
+        gripping: string;
+        press: string;
+        pressing: string;
+        hold: string;
+        holding: string;
+    };
     productFormList: {
         add: string;
         cancel: string;

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

@@ -116,6 +116,16 @@ declare const _default: {
             error: string;
         };
     };
+    pressButton: {
+        dispense: string;
+        dispensing: string;
+        grip: string;
+        gripping: string;
+        press: string;
+        pressing: string;
+        hold: string;
+        holding: string;
+    };
     productFormList: {
         add: string;
         cancel: string;

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

@@ -116,6 +116,16 @@ declare const _default: {
             error: string;
         };
     };
+    pressButton: {
+        dispense: string;
+        dispensing: string;
+        grip: string;
+        gripping: string;
+        press: string;
+        pressing: string;
+        hold: string;
+        holding: string;
+    };
     productFormList: {
         add: string;
         cancel: string;

package/src/index.d.ts

@@ -19,6 +19,7 @@ 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 * from "./lib/action-button/action-button";
+export * from "./lib/press-button/press-button";
 export * from "./lib/product-form-list/product-form-list";
 export * from "./hooks/use-auto-scroll-input";
 export * from "./types/user-level";

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { TypographyProps, SxProps, Theme } from "@mui/material";
+export interface PressButtonProps {
+    onPress: () => void;
+    onRelease: () => void;
+    disabled?: boolean;
+    icon: ReactNode;
+    label: string;
+    activeLabel?: string;
+    size?: number;
+    labelVariant?: TypographyProps["variant"];
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+export declare const PressButton: {
+    ({ onPress, onRelease, disabled, icon, label, activeLabel, size, labelVariant, className, sx, }: PressButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PressButton } from "./press-button";
+declare const meta: Meta<typeof PressButton>;
+export default meta;
+type Story = StoryObj<typeof PressButton>;
+export declare const Default: Story;
+export declare const WithActiveLabel: Story;
+export declare const GripButton: Story;
+export declare const Disabled: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const HmiLabelVariant: Story;
+export declare const WithSxOverride: Story;
+export declare const MachineControlExample: Story;