impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Slider/index.js

@@ -1,314 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import MUISlider from "@mui/material/Slider";
-import FormControl, { useFormControl } from "@mui/material/FormControl";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
-import "./Sliders.styles.scss";
-
-const DEFAULT_BELOW_THRESHOLD_COLOR = "#4259ee";
-const DEFAULT_ABOVE_THRESHOLD_COLOR = "#ED9998";
-
-export function Slider({
-  headerOrientation = "top",
-  header,
-  label,
-  inputPlaceholder,
-  value = 0,
-  onChange,
-  required,
-  disabled,
-  min = 0,
-  max = 100,
-  variant = "default",
-  inputPosition = "inline",
-  colorChangeThreshold,
-  valueFormat,
-  messageTimeout = 5000,
-  ...args
-}) {
-  const [infoMessage, setInfoMessage] = useState("");
-  const [showInfo, setShowInfo] = useState(false);
-
-  const isRangedSlider =
-    Array.isArray(value) && variant == "ranged" && value.length == 2;
-  let primaryValue;
-  let secondaryValue;
-
-  const [focusedInput, setFocusedInput] = useState(null);
-  const [rightInputFocused, setRightInputFocused] = useState(false);
-  const [formattedValue, setFormattedValue] = useState(value);
-
-  if (Array.isArray(value) && value.length == 2) {
-    primaryValue = value[0];
-    secondaryValue = value[1];
-  }
-
-  const {
-    valueForThreshold,
-    isAboveThreshold,
-    trackSplitPercent,
-    thresholdMarkerLeft,
-  } = useMemo(() => {
-    const valueForThresh = Array.isArray(value) ? Math.max(...value) : value;
-    if (colorChangeThreshold == null) {
-      return {
-        valueForThreshold: valueForThresh,
-        isAboveThreshold: false,
-        trackSplitPercent: 0,
-        thresholdMarkerLeft: null,
-      };
-    }
-    const isRanged = Array.isArray(value) && value.length === 2;
-    const primary = isRanged ? value[0] : undefined;
-    const secondary = isRanged ? value[1] : undefined;
-    const aboveThresh = valueForThresh > colorChangeThreshold;
-
-    let split;
-    if (isRanged) {
-      if (colorChangeThreshold <= primary) split = 0;
-      else if (colorChangeThreshold >= secondary) split = 100;
-      else
-        split =
-          ((colorChangeThreshold - primary) / (secondary - primary)) * 100;
-    } else {
-      split =
-        aboveThresh && valueForThresh > min
-          ? ((colorChangeThreshold - min) / (valueForThresh - min)) * 100
-          : 0;
-    }
-
-    const markerLeft =
-      colorChangeThreshold > min && colorChangeThreshold < max
-        ? ((colorChangeThreshold - min) / (max - min)) * 100
-        : null;
-    return {
-      valueForThreshold: valueForThresh,
-      isAboveThreshold: aboveThresh,
-      trackSplitPercent: split,
-      thresholdMarkerLeft: markerLeft,
-    };
-  }, [value, min, max, colorChangeThreshold]);
-
-  const handleInputChange = (e, key) => {
-    const value = e.target.value;
-
-    // Clear info message when user starts typing
-    if (showInfo) {
-      setShowInfo(false);
-      setInfoMessage("");
-    }
-
-    // Ignore if the value is not a number
-    if (isNaN(value)) {
-      setInfoMessage("Please enter a valid number");
-      setShowInfo(true);
-      return;
-    }
-    e.persist(); // unpool the event
-
-    // passing fakeEvent to maintain stability of values received from slider and input field
-    const fakeEvent = {
-      ...e,
-      target: {
-        ...e.target,
-        value: [],
-      },
-    };
-    if (key == "min") {
-      if (Number(value) < min || Number(value) > secondaryValue) {
-        const message =
-          Number(value) < min
-            ? `Value must be at least ${min}`
-            : `Initial value must be less than the maximum value`;
-        setInfoMessage(message);
-        setShowInfo(true);
-        return;
-      }
-      fakeEvent.target.value = [Number(value), secondaryValue];
-      onChange(fakeEvent, key);
-    } else if (key == "max") {
-      if (Number(value) > max || Number(value) < primaryValue) {
-        const message =
-          Number(value) > max
-            ? `Value must not exceed ${max}`
-            : `Maximum value must be greater than the initial value`;
-        setInfoMessage(message);
-        setShowInfo(true);
-        return;
-      }
-      fakeEvent.target.value = [primaryValue, Number(value)];
-      onChange(fakeEvent, key);
-    } else {
-      onChange(e, key);
-    }
-  };
-
-  useEffect(() => {
-    if (!valueFormat) return;
-
-    const [pos, symbol] = valueFormat;
-
-    const format = (v) => {
-      const formatValue = (val) =>
-        pos === "left" ? `${symbol}${val}` : `${val}${symbol}`;
-      return Array.isArray(v) ? v.map(formatValue) : formatValue(v);
-    };
-
-    setFormattedValue(format(value));
-  }, [valueFormat, value]);
-
-  const handleFocusChange = (e) => {
-    setFocusedInput(true);
-  };
-
-  const handleBlurChange = (e) => {
-    setFocusedInput(null);
-  };
-
-  useEffect(() => {
-    if (showInfo) {
-      setTimeout(() => {
-        setShowInfo(false);
-      }, messageTimeout);
-    }
-  }, [showInfo]);
-
-  return (
-    <div className="slider-container">
-      <div
-        className={`impact_slider_layout slider-container${
-          headerOrientation === "top" ? "header-top" : "header-left"
-        } input-position-${inputPosition}`}
-      >
-        {isRangedSlider && inputPosition == "inline" && (
-          <div className="input_layout_style ranged ranged-start">
-            <form noValidate autoComplete="off">
-              <FormControl>
-                <OutlinedInput
-                  value={
-                    !focusedInput && valueFormat
-                      ? isRangedSlider
-                        ? formattedValue[0]
-                        : formattedValue
-                      : isRangedSlider
-                      ? primaryValue
-                      : value
-                  }
-                  onChange={(e) => {
-                    handleInputChange(e, isRangedSlider ? "min" : "");
-                  }}
-                  disabled={disabled}
-                  onFocus={handleFocusChange}
-                  onBlur={handleBlurChange}
-                />
-              </FormControl>
-            </form>
-          </div>
-        )}
-        <div className="impact_slider_container">
-          {header && (
-            <div className="impact_slider_layout_heading">{header}</div>
-          )}
-          {label && (
-            <label className="impact_slider_labelname">
-              {label} {required && <span style={{ color: "red" }}>*</span>}
-            </label>
-          )}
-          <div
-            className={`impact_slider_main_container ${
-              disabled && "impact_slider_disabled"
-            }`}
-          >
-            {colorChangeThreshold && (
-              <span
-                className="impact_slider_threshold_marker"
-                style={{
-                  left: `${thresholdMarkerLeft}%`,
-                }}
-                aria-hidden
-              />
-            )}
-            <MUISlider
-              {...args}
-              defaultValue={value}
-              value={value}
-              onChange={onChange}
-              disabled={disabled}
-              max={max}
-              min={min}
-              aria-label="Default"
-              valueLabelDisplay="auto"
-              sx={
-                isAboveThreshold
-                  ? {
-                      color: DEFAULT_BELOW_THRESHOLD_COLOR,
-                      "& .MuiSlider-track": {
-                        background: `linear-gradient(to right, ${DEFAULT_BELOW_THRESHOLD_COLOR} 0%, ${DEFAULT_BELOW_THRESHOLD_COLOR} ${trackSplitPercent}%, ${DEFAULT_ABOVE_THRESHOLD_COLOR} ${trackSplitPercent}%, ${DEFAULT_ABOVE_THRESHOLD_COLOR} 100%)`,
-                        border: "none",
-                        transition: "none",
-                      },
-                      "& .MuiSlider-thumb": {
-                        backgroundColor: DEFAULT_BELOW_THRESHOLD_COLOR,
-                        zIndex: 2,
-                      },
-                    }
-                  : undefined
-              }
-            />
-          </div>
-        </div>
-
-        <div
-          className={`input_layout_style ${
-            isRangedSlider ? "ranged" : "single"
-          }`}
-        >
-          <form noValidate autoComplete="off">
-            <FormControl>
-              {(!isRangedSlider || inputPosition == "bottom") && (
-                <OutlinedInput
-                  value={
-                    !focusedInput && valueFormat
-                      ? formattedValue
-                      : isRangedSlider
-                      ? primaryValue
-                      : value
-                  }
-                  onChange={(e) => {
-                    handleInputChange(e, isRangedSlider ? "min" : "");
-                  }}
-                  disabled={disabled}
-                  onFocus={handleFocusChange}
-                  onBlur={handleBlurChange}
-                />
-              )}
-              {isRangedSlider && (
-                <OutlinedInput
-                  value={
-                    !rightInputFocused && valueFormat
-                      ? formattedValue[1]
-                      : secondaryValue
-                  }
-                  onChange={(e) => {
-                    handleInputChange(e, "max");
-                  }}
-                  disabled={disabled}
-                  onFocus={() => setRightInputFocused(true)}
-                  onBlur={() => setRightInputFocused(false)}
-                />
-              )}
-            </FormControl>
-          </form>
-        </div>
-      </div>
-      <div className={`slider-info-message ${!showInfo ? "hidden" : ""}`}>
-        {showInfo && (
-          <>
-            <InfoIcon className="slider-info-icon" />
-            <span className="slider-info-text">{infoMessage}</span>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Stepper/Stepper.styles.scss

@@ -1,355 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-stepper {
-  font-family: $fontFamily !important;
-  &.MuiStepContent-root {
-    margin-left: 12px;
-    padding-left: 20px;
-    padding-right: 8px;
-    border-left: none;
-    position: absolute;
-    bottom: 0;
-  }
-  &.MuiBox-root {
-    max-width: none;
-  }
-  &.ia-stepper {
-    font-family: $fontFamily;
-
-    .MuiStep-horizontal {
-      background: $whiteColor;
-      border-radius: 8px;
-      height: 44px;
-      display: flex;
-      align-items: center;
-      padding-left: 12px;
-      padding-right: 12px;
-      position: relative;
-      cursor: pointer;
-      width: 100%;
-    }
-    .MuiStepLabel-iconContainer {
-      .MuiSvgIcon-root.Mui-active {
-        color: $primaryColor;
-        background: $primaryColor;
-        border-radius: 8px;
-        width: 24px;
-        height: 24px;
-        .MuiStepIcon-text {
-          font-family: $fontFamily;
-          fill: $whiteColor;
-        }
-      }
-      .MuiSvgIcon-root {
-        color: #d9dde7;
-        background: #d9dde7;
-        border-radius: 8px;
-        width: 24px;
-        height: 24px;
-        .MuiStepIcon-text {
-          font-family: $fontFamily;
-          fill: #7a8294;
-          font-weight: 800;
-        }
-      }
-      .MuiSvgIcon-root.Mui-completed {
-        color: #3bb273;
-        background: #3bb273 url("../../assets/checkmark.svg") no-repeat;
-        background-size: 16px;
-        background-position: center;
-        border-radius: 8px;
-        width: 24px;
-        height: 24px;
-        position: relative;
-      }
-    }
-
-    .MuiStepLabel-vertical {
-      .MuiStepLabel-iconContainer {
-        .MuiSvgIcon-root.Mui-active {
-          color: $primaryColor;
-          background: $primaryColor;
-          width: 20px;
-          height: 20px;
-          .MuiStepIcon-text {
-            fill: $whiteColor;
-          }
-        }
-
-        .MuiSvgIcon-root {
-          color: #7a8294;
-          background: #7a8294;
-          width: 20px;
-          height: 20px;
-          .MuiStepIcon-text {
-            fill: #ffffff;
-            font-weight: 700;
-          }
-        }
-
-        .MuiSvgIcon-root.Mui-completed {
-          color: #3bb273;
-          background: #3bb273;
-          background-image: url("../../assets/checkmark.svg");
-          background-repeat: no-repeat;
-          background-position: center;
-          background-size: 12px;
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-
-    .MuiStepLabel-labelContainer {
-      .MuiStepLabel-label {
-        font-family: $fontFamily;
-        font-weight: 500;
-        max-width: 200px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        &.Mui-active {
-          // color: $activeStepper;
-        }
-        &.Mui-completed {
-          color: #3bb273;
-        }
-      }
-    }
-  }
-
-  .MuiTypography-caption {
-    font-family: $fontFamily;
-  }
-
-  .MuiStepLabel-label.Mui-completed
-    + .MuiTypography-root.MuiTypography-caption {
-    color: #3bb273;
-  }
-
-  .MuiStepLabel-label.Mui-active + .MuiTypography-root.MuiTypography-caption {
-    // color: $activeStepper;
-  }
-
-  .MuiStepConnector-line {
-    border-color: #b4bac7;
-    border-style: dashed;
-    width: 23px;
-  }
-  .MuiStep-horizontal:has(.Mui-active) {
-    border-bottom: 2px solid $primaryColor !important;
-    &::before {
-      content: " ";
-      width: 13px;
-      height: 10px;
-      position: absolute;
-      left: 18px;
-      bottom: -10px;
-      background: url("../../assets/stepper-triangle.svg") no-repeat;
-      background-size: 13px;
-    }
-  }
-  .MuiStep-root:has(.Mui-completed) {
-    border-bottom: 2px solid $greenBadge !important;
-  }
-  .MuiStep-vertical {
-    padding: 10px 15px 10px 12px;
-    border-radius: 3px;
-    position: relative;
-    &.Mui-completed {
-      background: #ebf7f1;
-      border: 1px solid #ebf7f1 !important;
-    }
-  }
-
-  .MuiStep-vertical:has(.Mui-active) {
-    background: #eceefd;
-    border: 1px solid #eceefd !important;
-    &::before {
-      content: " ";
-      width: 5px;
-      height: 25px;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      background: url("../../assets/stepper-vertical.svg") no-repeat;
-      background-size: contain;
-      margin-left: -20px;
-    }
-  }
-
-  .MuiStep-vertical:has(.Mui-disabled) {
-    background: #eff2fa;
-    border: 1px solid #eff2fa !important;
-  }
-
-  .css-14sza3e-MuiStepLabel-root {
-    padding: 0px !important;
-  }
-
-  &.progress {
-    .progress-steps {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 0px;
-      .step {
-        height: 8px;
-        border-radius: 4px;
-        background-color: $lightBlueColor;
-        transition: background-color 0.3s ease;
-        width: 132px;
-
-        &.active,
-        &.completed {
-          background-color: $primaryColor;
-        }
-      }
-    }
-
-    .step-labels {
-      display: flex;
-      justify-content: space-between;
-
-      .step-label {
-        font-size: 14px;
-        font-weight: 500;
-        color: #6b7280;
-        transition: color 0.3s ease;
-        cursor: pointer;
-
-        &.active {
-          color: #3649c6;
-        }
-
-        &.completed {
-          color: #3649c6;
-        }
-      }
-    }
-  }
-
-  &.numbered {
-    .numbered-steps {
-      display: flex;
-      gap: 16px;
-      margin-bottom: 32px;
-      align-items: center;
-
-      .step {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background-color: #e8e8e8;
-        color: #666;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 14px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-
-        &.active {
-          background-color: #3649c6;
-          color: #fff;
-        }
-
-        &:not(:last-child)::after {
-          content: "";
-          position: absolute;
-          right: -16px;
-          width: 16px;
-          height: 2px;
-          background-color: #e8e8e8;
-        }
-      }
-    }
-  }
-
-  &.labeled {
-    .labeled-steps {
-      display: flex;
-      gap: 24px;
-      margin-bottom: 32px;
-      align-items: center;
-
-      .step {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .step-number {
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          background-color: #e8e8e8;
-          color: #666;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 12px;
-          font-weight: 600;
-          transition: all 0.3s ease;
-        }
-
-        .step-label {
-          font-size: 14px;
-          color: #666;
-          transition: color 0.3s ease;
-        }
-
-        &.active {
-          .step-number {
-            background-color: #3649c6;
-            color: #fff;
-          }
-
-          .step-label {
-            color: #1a1a1a;
-            font-weight: 600;
-          }
-        }
-
-        &:not(:last-child)::after {
-          content: "";
-          display: block;
-          width: 24px;
-          height: 1px;
-          background-color: #e8e8e8;
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-  // Status config styles
-  .status-config {
-    flex: 1;
-    .MuiStepLabel-label {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      max-width: none !important;
-    }
-  }
-}
-
-// For horizontal orientation
-.ia-stepper.MuiStepper-horizontal {
-  .MuiStepLabel-label.Mui-active {
-    color: $darkColor;
-  }
-
-  .MuiStepLabel-label.Mui-active + .MuiTypography-root.MuiTypography-caption {
-    color: $darkColor;
-  }
-}
-
-// For vertical orientation
-.ia-stepper.MuiStepper-vertical {
-  .MuiStepLabel-label.Mui-active {
-    color: $primaryColor;
-  }
-
-  .MuiStepLabel-label.Mui-active + .MuiTypography-root.MuiTypography-caption {
-    color: $primaryColor;
-  }
-}