@vention/machine-apps-components 0.4.1 → 0.5.0

package/index.esm.js

@@ -826,6 +826,7 @@ const useI18n = function useI18n() {
 
 const I18nSettings = function I18nSettings({
   className,
+  sx,
   layout = "stacked"
 }) {
   const {
@@ -886,6 +887,7 @@ const I18nSettings = function I18nSettings({
   };
   return jsxs(Box, {
     className: cx(classes.container, className),
+    sx: sx,
     children: [jsx(Box, {
       className: classes.settingItem,
       children: jsx(VentionSelect, {
@@ -2709,6 +2711,7 @@ const LogsPanel = forwardRef((props, ref) => {
     onFilterChange,
     onLogClick,
     className,
+    sx,
     tableHeight,
     emptyStateMessage,
     emptyStateIcon
@@ -2829,6 +2832,7 @@ const LogsPanel = forwardRef((props, ref) => {
   }), [refresh, resetFilters, applyFilters, getCurrentFilters, exportLogs]);
   return jsxs(Box, {
     className: cx(classes.root, className),
+    sx: sx,
     children: [jsx(LogFilterForm, {
       onFilterChange: handleFilterChange,
       onReset: handleReset,
@@ -2924,10 +2928,14 @@ function FileUploadPanel({
   fileCriteriaDescription,
   dropzoneTitle,
   disabled = false,
-  maxHeight
+  maxHeight,
+  titleVariant = "heading18SemiBold",
+  className,
+  sx
 }) {
   const {
-    classes
+    classes,
+    cx
   } = useStyles$3({
     maxHeight
   });
@@ -2951,9 +2959,10 @@ function FileUploadPanel({
     }
   }
   return jsxs(Box, {
-    className: classes.container,
+    className: cx(classes.container, className),
+    sx: sx,
     children: [displayTitle && jsx(Typography, {
-      variant: "heading18SemiBold",
+      variant: titleVariant,
       className: classes.title,
       children: displayTitle
     }), jsx(VentionDropZone, {
@@ -3018,14 +3027,19 @@ function StepProgressCircle({
   variant = "default",
   size = 180,
   strokeWidth = 12,
-  showTitle = true
+  showTitle = true,
+  titleVariant = "heading18SemiBold",
+  progressVariant = "heading24SemiBold",
+  className,
+  sx
 }) {
   var _a;
   const {
     t
   } = useTranslation();
   const {
-    classes
+    classes,
+    cx
   } = useStyles$2({
     size,
     strokeWidth,
@@ -3042,9 +3056,10 @@ function StepProgressCircle({
   const center = size / 2;
   const progressText = totalSteps > 0 ? `${currentStep}/${totalSteps}` : "-/-";
   return jsxs(Box, {
-    className: classes.container,
+    className: cx(classes.container, className),
+    sx: sx,
     children: [showTitle && jsx(Typography, {
-      variant: "heading18SemiBold",
+      variant: titleVariant,
       className: classes.title,
       children: displayTitle
     }), jsxs(Box, {
@@ -3074,7 +3089,7 @@ function StepProgressCircle({
       }), jsx(Box, {
         className: classes.textContainer,
         children: jsx(Typography, {
-          variant: "heading24SemiBold",
+          variant: progressVariant,
           className: classes.progressText,
           children: progressText
         })
@@ -3145,10 +3160,14 @@ const ActionButton = function ActionButton({
   disabled = false,
   icon,
   label,
-  size = 96
+  size = 96,
+  labelVariant = "uiText14SemiBold",
+  className,
+  sx
 }) {
   const {
-    classes
+    classes,
+    cx
   } = useStyles$1({
     size
   });
@@ -3164,7 +3183,8 @@ const ActionButton = function ActionButton({
     disabled: disabled,
     size: "x-large",
     variant: variant === "destructive" ? "destructive" : "filled",
-    className: classes.button,
+    className: cx(classes.button, className),
+    sx: sx,
     "data-testid": "action-button",
     children: jsxs(Box, {
       className: classes.content,
@@ -3172,7 +3192,7 @@ const ActionButton = function ActionButton({
         className: classes.iconContainer,
         children: icon
       }), jsx(Typography, {
-        variant: "uiText14SemiBold",
+        variant: labelVariant,
         className: classes.label,
         children: translatedLabel
       })]
@@ -3277,7 +3297,12 @@ function ProductFormListComponent({
   onSubmit,
   getItemId,
   fields,
-  maxHeight = 600
+  maxHeight = 600,
+  titleVariant = "heading24SemiBold",
+  itemTitleVariant = "heading18SemiBold",
+  itemSubtitleVariant = "uiText14Regular",
+  className,
+  sx
 }) {
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -3287,7 +3312,8 @@ function ProductFormListComponent({
     t
   } = useTranslation();
   const {
-    classes
+    classes,
+    cx
   } = useStyles({
     maxHeight
   });
@@ -3335,11 +3361,11 @@ function ProductFormListComponent({
     return jsxs(Box, {
       className: classes.itemContent,
       children: [jsx(Typography, {
-        variant: "heading18SemiBold",
+        variant: itemTitleVariant,
         className: classes.itemTitle,
         children: getFieldDisplayValue(mainField, item[mainField.name])
       }), jsx(Typography, {
-        variant: "uiText14Regular",
+        variant: itemSubtitleVariant,
         color: "textSecondary",
         className: classes.itemSubtitle,
         children: secondaryFields.map(field => `${field.label}: ${getFieldDisplayValue(field, item[field.name])}`).join(" | ")
@@ -3382,11 +3408,12 @@ function ProductFormListComponent({
   }
   const isEditing = Object.keys(formData).length > 0 && "id" in formData;
   return jsxs(Box, {
-    className: classes.container,
+    className: cx(classes.container, className),
+    sx: sx,
     children: [jsxs(Box, {
       className: classes.header,
       children: [jsx(Typography, {
-        variant: "heading24SemiBold",
+        variant: titleVariant,
         children: title
       }), jsx(VentionButton, {
         onClick: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-apps-components",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { TypographyProps, SxProps, Theme } from "@mui/material";
 export type ActionButtonVariant = "primary" | "destructive";
 export interface ActionButtonProps {
     variant?: ActionButtonVariant;
@@ -7,8 +8,11 @@ export interface ActionButtonProps {
     icon: ReactNode;
     label: string;
     size?: number;
+    labelVariant?: TypographyProps["variant"];
+    className?: string;
+    sx?: SxProps<Theme>;
 }
 export declare const ActionButton: {
-    ({ variant, onClick, disabled, icon, label, size, }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, onClick, disabled, icon, label, size, labelVariant, className, sx, }: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -13,3 +13,6 @@ export declare const Disabled: Story;
 export declare const MachineControlExample: Story;
 export declare const SmallSize: Story;
 export declare const LargeSize: Story;
+export declare const HmiLabelVariant: Story;
+export declare const LabelVariants: Story;
+export declare const WithSxOverride: Story;

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

@@ -1,3 +1,4 @@
+import { TypographyProps, SxProps, Theme } from "@mui/material";
 export interface UploadedFile {
     id: string;
     name: string;
@@ -16,8 +17,11 @@ export interface FileUploadPanelProps {
     dropzoneTitle?: string;
     disabled?: boolean;
     maxHeight?: number | string;
+    titleVariant?: TypographyProps["variant"];
+    className?: string;
+    sx?: SxProps<Theme>;
 }
-export declare function FileUploadPanel({ title, files, onFilesSelect, onFileRemove, onFileRetry, onFileCancel, fileCriteriaDescription, dropzoneTitle, disabled, maxHeight, }: FileUploadPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUploadPanel({ title, files, onFilesSelect, onFileRemove, onFileRetry, onFileCancel, fileCriteriaDescription, dropzoneTitle, disabled, maxHeight, titleVariant, className, sx, }: 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

@@ -9,4 +9,6 @@ export declare const WithUploadingFile: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;
 export declare const WithMaxHeight: Story;
+export declare const WithSxOverride: Story;
+export declare const HmiTitleVariant: Story;
 export declare const Interactive: Story;

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

@@ -1,8 +1,10 @@
+import { SxProps, Theme } from "@mui/material";
 export interface I18nSettingsProps {
     className?: string;
+    sx?: SxProps<Theme>;
     layout?: "stacked" | "horizontal";
 }
 export declare const I18nSettings: {
-    ({ className, layout }: I18nSettingsProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, sx, layout }: I18nSettingsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof I18nSettings>;
 export declare const Default: Story;
 export declare const Horizontal: Story;
+export declare const WithSxOverride: Story;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { SxProps, Theme } from "@mui/material";
 export type LogType = "error" | "warning" | "info";
 export interface LogEntry {
     id: string;
@@ -51,6 +52,7 @@ interface LogsPanelProps {
     onFilterChange?: (filters: LogFilterFormValues) => void;
     onLogClick?: (log: LogEntry) => void;
     className?: string;
+    sx?: SxProps<Theme>;
     tableHeight?: string | number;
     emptyStateMessage?: string;
     emptyStateIcon?: ReactNode;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof LogsPanel>;
 export default meta;
 type Story = StoryObj<typeof LogsPanel>;
 export declare const Default: Story;
+export declare const WithSxOverride: Story;

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

@@ -1,3 +1,4 @@
+import { TypographyProps, SxProps, Theme } from "@mui/material";
 type FieldType = "text" | "number" | "select";
 export interface FieldDefinition {
     name: string;
@@ -18,8 +19,13 @@ export interface ProductFormListProps<T> {
     getItemId: (item: T) => string;
     fields: FieldDefinition[];
     maxHeight?: string | number;
+    titleVariant?: TypographyProps["variant"];
+    itemTitleVariant?: TypographyProps["variant"];
+    itemSubtitleVariant?: TypographyProps["variant"];
+    className?: string;
+    sx?: SxProps<Theme>;
 }
-declare function ProductFormListComponent<T extends Record<string, unknown>>({ title, items, onDelete, onSubmit, getItemId, fields, maxHeight, }: ProductFormListProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ProductFormListComponent<T extends Record<string, unknown>>({ title, items, onDelete, onSubmit, getItemId, fields, maxHeight, titleVariant, itemTitleVariant, itemSubtitleVariant, className, sx, }: ProductFormListProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace ProductFormListComponent {
     var displayName: string;
 }

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

@@ -15,4 +15,6 @@ type Story = StoryObj<typeof ProductFormList<Part>>;
 export declare const Default: Story;
 export declare const Empty: Story;
 export declare const WithMaxHeight: Story;
+export declare const WithSxOverride: Story;
+export declare const HmiTypography: Story;
 export declare const Interactive: Story;

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

@@ -1,3 +1,4 @@
+import { TypographyProps, SxProps, Theme } from "@mui/material";
 export type StepProgressCircleVariant = "default" | "success" | "error" | "warning";
 export interface StepProgressCircleProps {
     currentStep: number;
@@ -7,8 +8,12 @@ export interface StepProgressCircleProps {
     size?: number;
     strokeWidth?: number;
     showTitle?: boolean;
+    titleVariant?: TypographyProps["variant"];
+    progressVariant?: TypographyProps["variant"];
+    className?: string;
+    sx?: SxProps<Theme>;
 }
-export declare function StepProgressCircle({ currentStep, totalSteps, title, variant, size, strokeWidth, showTitle, }: StepProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepProgressCircle({ currentStep, totalSteps, title, variant, size, strokeWidth, showTitle, titleVariant, progressVariant, className, sx, }: 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

@@ -12,5 +12,7 @@ export declare const CustomTitle: Story;
 export declare const NoTitle: Story;
 export declare const SmallSize: Story;
 export declare const LargeSize: Story;
+export declare const WithSxOverride: Story;
+export declare const HmiTypography: Story;
 export declare const AllVariants: Story;
 export declare const ProgressStages: Story;