@motionmetrics/mmpro-storybook-components-schema 2.0.32 → 2.0.34

package/lib/storybook/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { Icon } from "./renderers/Icon";
 export { Icon };
-export declare const ProductIcon: ({ iconType, name, className, size, handleClick, style, }: import("./Icon.types").IconPropsType) => import("react/jsx-runtime").JSX.Element;
-export declare const ModuleIcon: ({ iconType, name, className, size, handleClick, style, }: import("./Icon.types").IconPropsType) => import("react/jsx-runtime").JSX.Element;
-export declare const ModuleOutlinedIcon: ({ iconType, name, className, size, handleClick, style, }: import("./Icon.types").IconPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductIcon: ({ iconType, name, className, size, handleClick, style, }: import(":storybook").IconPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const ModuleIcon: ({ iconType, name, className, size, handleClick, style, }: import(":storybook").IconPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const ModuleOutlinedIcon: ({ iconType, name, className, size, handleClick, style, }: import(":storybook").IconPropsType) => import("react/jsx-runtime").JSX.Element;

package/lib/storybook/components/Schema/BaseSchema/index.d.ts

@@ -8,10 +8,10 @@ export declare const BaseSchema: import("react").MemoExoticComponent<import("rea
     reverseTeeth?: boolean;
     disableTooltip?: boolean;
     showToothNum?: boolean;
-    toothSettings?: Pick<import("../../../../models").ToothSetting, "length" | "maxLength" | "minLength">[];
-    toothWearPredictions?: Pick<import("../../../../models").ToothWearPrediction, "projectedWearOutUtcTime">[];
+    toothSettings?: Pick<import(":models").ToothSetting, "length" | "maxLength" | "minLength">[];
+    toothWearPredictions?: Pick<import(":models").ToothWearPrediction, "projectedWearOutUtcTime">[];
     toothWearLastUpdated?: number;
     toothCount: number;
     getToothOption: SchemaElementOptionGetter;
     getLipShroudOption: SchemaElementOptionGetter;
-} & import("../../..").CommonStylingProps & import("react").RefAttributes<HTMLDivElement>>>;
+} & import(":storybook").CommonStylingProps & import("react").RefAttributes<HTMLDivElement>>>;

package/lib/storybook/components/Schema/BaseSchema/types.js

@@ -0,0 +1 @@
+export {};

package/lib/storybook/components/Schema/OfflineSchema/index.d.ts

@@ -4,7 +4,7 @@ export type OfflineSchemaPropsType = ExtendedSchemaProps<{
     toothCount: number;
 }>;
 export declare const OfflineSchema: import("react").ForwardRefExoticComponent<Omit<import("../BaseSchema/types").BaseSchemaPropsType, "toothCount" | "getToothOption" | "getLipShroudOption"> & {
-    equipmentType: import("../../../../models").EquipmentTypeName;
+    equipmentType: import(":models").EquipmentTypeName;
 } & {
     toothCount: number;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/lib/storybook/components/Schema/Schema.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const Schema: import("react").ForwardRefExoticComponent<Omit<import("./BaseSchema/types").BaseSchemaPropsType, "toothCount" | "getToothOption" | "getLipShroudOption"> & {
-    equipmentType: import("../../../models").EquipmentTypeName;
+    equipmentType: import(":models").EquipmentTypeName;
 } & {
     schemaType: "tooth" | "lipShroud";
     statusArray: number[];

package/lib/storybook/components/Schema/Schema.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EMPTY_ARRAY } from ":utils";
+import { forwardRef, useCallback } from "react";
+import { BaseSchema } from "./BaseSchema";
+import { getSchemaColors } from "./assets/colors";
+import { getLipShroudComponent, getMissingToothComponent, getToothComponent, } from "./constants";
+import { getToothIntactRatio } from "./utils";
+export const Schema = forwardRef(({ statusArray = [], schemaType, equipmentType, isDarkMode, ...props }, ref) => {
+    const isToothSchema = schemaType === "tooth";
+    const toothCount = statusArray.length + (isToothSchema ? 0 : 1);
+    const toothSettings = props.toothSettings ?? EMPTY_ARRAY;
+    const colorVariant = isDarkMode ? "darkTheme" : "default";
+    const schemaColorSet = getSchemaColors(colorVariant);
+    const getStatusColor = (status) => status ? schemaColorSet.alarm : schemaColorSet.safe;
+    const getToothOption = useCallback((index) => {
+        if (!isToothSchema) {
+            return {
+                Component: getToothComponent(toothCount, equipmentType, colorVariant),
+                color: schemaColorSet.offline,
+                intactRatio: 1,
+                criticalRatio: 0,
+                disableTooltip: true,
+            };
+        }
+        const missing = statusArray[index];
+        return {
+            Component: missing
+                ? getMissingToothComponent(toothCount, equipmentType, colorVariant)
+                : getToothComponent(toothCount, equipmentType, colorVariant),
+            color: getStatusColor(missing),
+            intactRatio: missing ? 1 : getToothIntactRatio(toothSettings[index]),
+        };
+    }, [equipmentType, isToothSchema, statusArray, toothCount, toothSettings, colorVariant, schemaColorSet]);
+    const getLipShroudOption = useCallback((index) => ({
+        Component: getLipShroudComponent(toothCount, colorVariant),
+        color: isToothSchema
+            ? schemaColorSet.offline
+            : getStatusColor(statusArray[index]),
+        intactRatio: 1,
+        criticalRatio: 0,
+        disableTooltip: isToothSchema,
+    }), [toothCount, isToothSchema, statusArray, colorVariant, schemaColorSet]);
+    return (_jsx(BaseSchema, { ...props, ref: ref, toothCount: toothCount, getToothOption: getToothOption, getLipShroudOption: getLipShroudOption, isDarkMode: isDarkMode }));
+});

package/lib/storybook/components/Schema/Schema.styles.js

@@ -0,0 +1,51 @@
+import { palette } from ":storybook/tokensV2";
+import { css } from "@emotion/css";
+import { SCHEMA_DEFAULT_HEIGHT } from "./constants";
+export const container = css `
+  height: ${SCHEMA_DEFAULT_HEIGHT}px;
+  background: ${palette.background.darkBase.default};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const toothSchemaContainer = css `
+  display: flex;
+  justify-content: center;
+  margin: auto;
+  padding: 0 16px;
+  vertical-align: bottom;
+  align-items: self-end;
+  height: auto;
+  max-width: 100%;
+  position: relative;
+  column-gap: 2px;
+  width: 100%;
+
+  & svg {
+    height: auto;
+  }
+
+  & > * {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+`;
+export const gridItemDetails = css `
+  &.MuiGrid-root.MuiGrid-item {
+    padding: 0;
+    display: inline-flex;
+    white-space: nowrap;
+    max-width: fit-content;
+  }
+`;
+export const heightAdjustedTooth = css `
+  display: flex;
+  transform-origin: bottom center;
+`;
+export const criticalLine = css `
+  border-top: 1px dashed #a17ff8;
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`;

package/lib/storybook/components/Schema/Schema.types.js

@@ -0,0 +1 @@
+export {};

package/lib/storybook/components/Schema/ToothWearSchema/index.d.ts

@@ -4,7 +4,7 @@ export type ToothWearSchemaPropsType = ExtendedSchemaProps<{
     customWidth?: number;
 }>;
 export declare const ToothWearSchema: import("react").ForwardRefExoticComponent<Omit<import("../BaseSchema/types").BaseSchemaPropsType, "toothCount" | "getToothOption" | "getLipShroudOption"> & {
-    equipmentType: import("../../../../models").EquipmentTypeName;
+    equipmentType: import(":models").EquipmentTypeName;
 } & {
     customWidth?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/lib/storybook/components/Schema/assets/colors.js

@@ -0,0 +1,21 @@
+import { palette } from ":storybook/tokensV2";
+export const getSchemaColors = (colorVariant) => {
+    return {
+        safe: {
+            fill: palette.schema.normal[colorVariant],
+            stroke: palette.schema.normalBorder[colorVariant]
+        },
+        offline: {
+            fill: palette.schema.offline[colorVariant],
+            stroke: palette.schema.offlineBorder[colorVariant]
+        },
+        alarm: {
+            fill: palette.schema.alarm[colorVariant],
+            stroke: palette.schema.alarmBorder[colorVariant]
+        },
+        warning: {
+            fill: palette.schema.warning[colorVariant],
+            stroke: palette.schema.warningBorder[colorVariant]
+        }
+    };
+};

package/lib/storybook/components/Schema/assets/utils.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+import { uniqueId } from "lodash";
+import { forwardRef, useMemo } from "react";
+import { getSchemaColors } from "./colors";
+import { palette } from ":storybook/tokensV2";
+import { tss } from ":storybook/utils";
+const useStyles = tss.create(({ colorVariant }) => {
+    return {
+        thresholdLine: {
+            stroke: palette.schema.threshold[colorVariant],
+            strokeWidth: 2,
+            strokeDasharray: "3, 3",
+        },
+    };
+});
+/**
+ * Create a component template from a sample Schema element (tooth or lip shroud)
+ * SVG. The resulting template can be used to create new components with different
+ * sizes compared to the original SVG.
+ */
+const createSchemaComponentTemplate = ({ path, originalWidth, originalHeight, colorVariant }) => ({ width = originalWidth, height = originalHeight }) => {
+    /**
+     * We use 1px stroke for the border, and stroke is centered on the line. So
+     * for the stroke to be fully visible, the svg path is actually drawn in a box
+     * 1px smaller (horizontally & vertically) than the actual viewBox. This is the
+     * reason why we need to subtract 1 when calculating the transformation scales.
+     */
+    const xScale = (width - 1) / (originalWidth - 1);
+    const yScale = (height - 1) / (originalHeight - 1);
+    const viewBox = `-${width / 2} -${height / 2} ${width} ${height}`;
+    const transform = `
+      scale(${xScale}, ${yScale})
+      translate(${-originalWidth / 2}, ${-originalHeight / 2})
+    `;
+    return forwardRef(({ fill, stroke, intactRatio = 1, criticalRatio = 0, ...props }, ref) => {
+        const commonPathProps = {
+            vectorEffect: "non-scaling-stroke",
+            d: path,
+            transform: transform,
+        };
+        const fullyIntact = intactRatio === 1;
+        const { classes } = useStyles();
+        const clipPathId = useMemo(() => (fullyIntact ? undefined : `mmpro-schema-clippath-${uniqueId()}`), [fullyIntact]);
+        const clipLineId = useMemo(() => (criticalRatio <= 0 ? undefined : `mmpro-schema-linepath-${uniqueId()}`), [criticalRatio]);
+        return (_jsxs("svg", { ...props, ref: ref, width: width, height: height, viewBox: viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [fullyIntact || (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipPathId, children: _jsx("rect", { x: "0", y: (1 - intactRatio) * originalHeight, width: originalWidth, height: originalHeight }) }) }), _jsx("path", { ...commonPathProps, ...getSchemaColors(colorVariant).offline })] })), _jsx("path", { ...commonPathProps, fill: fill, stroke: stroke, clipPath: fullyIntact ? undefined : `url(#${clipPathId})` }), criticalRatio > 0 &&
+                    _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipLineId, children: _jsx("path", { ...commonPathProps }) }) }), _jsx("line", { "clip-path": `url(#${clipLineId})`, x1: -originalWidth, y1: originalHeight * (0.5 - criticalRatio), x2: originalWidth, y2: originalHeight * (0.5 - criticalRatio), className: classes.thresholdLine })] })] }));
+    });
+};
+export function createElementSets({ path, originalWidth, originalHeight, widths, colorVariant }) {
+    const template = createSchemaComponentTemplate({
+        path,
+        originalWidth,
+        originalHeight,
+        colorVariant,
+    });
+    const components = widths.map((width) => template({ width }));
+    return components;
+}

package/lib/storybook/components/Schema/constants.d.ts

@@ -1,6 +1,6 @@
 import { EquipmentTypeName } from ":models";
 import type { ColorVariantKey } from ":storybook/tokensV2";
 export declare const SCHEMA_DEFAULT_HEIGHT = 60;
-export declare const getToothComponent: (numberOfTeeth: number, equipmentType: EquipmentTypeName, colorVariant: ColorVariantKey, widthsOverride?: number) => import("./assets/utils").SchemaElementComponent;
-export declare const getMissingToothComponent: (numberOfTeeth: number, equipmentType: EquipmentTypeName, colorVariant: ColorVariantKey) => import("./assets/utils").SchemaElementComponent;
-export declare const getLipShroudComponent: (numberOfTeeth: number, colorVariant: ColorVariantKey) => import("./assets/utils").SchemaElementComponent;
+export declare const getToothComponent: (numberOfTeeth: number, equipmentType: EquipmentTypeName, colorVariant: ColorVariantKey, widthsOverride?: number) => import(":storybook/components/Schema/assets/utils").SchemaElementComponent;
+export declare const getMissingToothComponent: (numberOfTeeth: number, equipmentType: EquipmentTypeName, colorVariant: ColorVariantKey) => import(":storybook/components/Schema/assets/utils").SchemaElementComponent;
+export declare const getLipShroudComponent: (numberOfTeeth: number, colorVariant: ColorVariantKey) => import(":storybook/components/Schema/assets/utils").SchemaElementComponent;

package/lib/storybook/components/Schema/constants.js

@@ -0,0 +1,19 @@
+import { EquipmentTypeName } from ":models";
+import { lipShroud, toothCableShovel, toothCableShovelMissing, toothHydraulicShovel, toothHydraulicShovelMissing, } from "./assets";
+export const SCHEMA_DEFAULT_HEIGHT = 60;
+export const getToothComponent = (numberOfTeeth, equipmentType, colorVariant, widthsOverride) => {
+    const set = equipmentType === EquipmentTypeName.hydraulicShovel
+        ? toothHydraulicShovel
+        : toothCableShovel;
+    return set(colorVariant, {
+        count: numberOfTeeth,
+        width: widthsOverride,
+    })[numberOfTeeth];
+};
+export const getMissingToothComponent = (numberOfTeeth, equipmentType, colorVariant) => {
+    const set = equipmentType === EquipmentTypeName.hydraulicShovel
+        ? toothHydraulicShovelMissing
+        : toothCableShovelMissing;
+    return set(colorVariant)[numberOfTeeth];
+};
+export const getLipShroudComponent = (numberOfTeeth, colorVariant) => lipShroud(colorVariant)[numberOfTeeth];

package/lib/storybook/components/Schema/utils.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as classes from "./Schema.styles";
+import { Typography } from ":storybook/tokensV2";
+import { convertAndRoundLength, getWearOutPredictionTextAndColor, } from ":storybook/utils";
+import { t } from "i18next";
+const SOURCE_UNIT = "m";
+export const DECIMAL_PLACES = {
+    in: 3, // inch has 3 decimals because client uses 1/8, 5/8 in target size
+    m: 3,
+    cm: 1,
+    mm: 0,
+};
+export const getLipShroudMessage = ({ index }) => {
+    return (_jsx(Typography, { variant: "tooltipTitle", children: t("ID_LIP_SHROUD_NO_0", { 0: index + 1 }) + "\n" }));
+};
+export const getToothMessage = ({ index, toothSettings, toothWearPredictions, unit,
+// toothWearLastUpdated,
+ }) => {
+    const settings = toothSettings?.[index];
+    const toothLength = settings && convertAndRound(settings.length, unit);
+    const critLength = settings && convertAndRound(settings.minLength, unit);
+    const prediction = toothWearPredictions?.[index];
+    const wearOutText = prediction &&
+        getWearOutPredictionTextAndColor(prediction.projectedWearOutUtcTime);
+    const content = [];
+    if (toothLength && critLength) {
+        content.push(`${t("ID_LENGTH")}: ${toothLength} ${unit} (${t("ID_CRIT")} ${critLength} ${unit})\n`);
+    }
+    if (wearOutText) {
+        content.push(`${t("ID_WEAR_OUT_IN")}: ${wearOutText.wearOutIn} ${wearOutText.suffix ?? ""}\n`);
+    }
+    // const lastUpdated = toothWearLastUpdated != null && (
+    //   <Typography variant="tooltipText" style={{ lineHeight: "24px" }}>
+    //     {capitalize(unix(toothWearLastUpdated).fromNow())}
+    //   </Typography>
+    // );
+    return (_jsx("div", { style: { whiteSpace: "pre-line" }, children: _jsx(Typography, { variant: "tooltipTitle", children: t("ID_TOOTH_NO_0", { 0: index + 1 }) + "\n" }) }));
+};
+export const getToothIntactRatio = (setting) => {
+    if (!setting)
+        return 1;
+    const { length, maxLength } = setting;
+    const ratio = Math.min(length / maxLength, 1);
+    return ratio;
+};
+export const getToothCriticalRatio = (setting) => {
+    if (!setting)
+        return 0;
+    const { minLength, maxLength } = setting;
+    const ratio = Math.max(minLength / maxLength, 0);
+    return ratio;
+};
+export const renderCriticalLine = (toothSettings) => {
+    const firstSetting = toothSettings?.[0];
+    if (!firstSetting) {
+        return null;
+    }
+    const { minLength, maxLength } = firstSetting;
+    const ratio = (minLength / maxLength) * 100;
+    return (_jsx("div", { className: classes.criticalLine, style: { bottom: `${ratio}%` } }));
+};
+const convertAndRound = (value, unit) => convertAndRoundLength(value, {
+    from: SOURCE_UNIT,
+    to: unit,
+    decimalPlaces: DECIMAL_PLACES,
+});