sag_components 1.0.28 → 1.0.30

package/src/stories/components/Button.jsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import MUIButton from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-
-export const Button = ({
-  text,
-  shape,
-  size,
-  disabled,
-  radius,
-  textColor,
-  backgroundColor,
-  onClick,
-  ...props
-}) => {
-  const getTextColor = () => {
-   
-    if (!textColor || textColor == "" || textColor == "none") {
-      //default when parameter was not set
-      if (shape === "contained") {
-        return "white";
-      } else {
-        return "black";
-      }
-    }
-    else{
-      return textColor;
-    }
-  };
-
-  return (
-    <Stack direction="row" spacing={2}>
-      <MUIButton
-        sx={{
-          textTransform: "none",
-          borderRadius: radius * 0.05,
-          color: getTextColor(), //  shape === "contained" ? "white" : "black",
-          backgroundColor: { backgroundColor },
-        }}
-       
-        variant={shape}
-        size={size}
-        disabled={disabled ? true : false}
-        onClick={(event) => {
-          onClick(event);
-        }}
-      >
-        {text}
-      </MUIButton>
-    </Stack>
-  );
-};
-
-export default Button;

package/src/stories/components/Dropdown.jsx

@@ -1,249 +0,0 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import "../Dropdown.style.js";
-//import PropTypes from "prop-types";
-import { DropdownContainer } from "../Dropdown.style.js";
-
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-// import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
-
-import Autocomplete from "@mui/material/Autocomplete";
-import TextField from "@mui/material/TextField";
-import Checkbox from "@mui/material/Checkbox";
-import InputAdornment from "@mui/material/InputAdornment";
-import Icon from "@mui/material/Icon";
-
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import SearchIcon from "@mui/icons-material/Search.js";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown.js";
-
-const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
-const checkedIcon = <CheckBoxIcon fontSize="small" />;
-
-/**
- *  SAG Dropdown
- */
-export const Dropdown = ({
-  width,
-  size,
-  text,
-  shape,
-  placeHolder,
-  multiSelect,
-  limitTagsOnMultiSelect,
-  showPopupIcon,
-  showSearchIcon,
-  options,
-  onChange,
-  onInputChange,
-}) => {
-  /**
-   *  SAG Dropdown
-   */
-  const [currentInputValue, setCurrentInputValue] = useState(null);
-  const [currentOption, setCurrentOption] = useState(null);
-
-  useEffect(() => {
-    const delayDebounceFn = setTimeout(() => {
-      onInputChange(currentInputValue);
-    }, 1000);
-
-    return () => clearTimeout(delayDebounceFn);
-  }, [currentInputValue]);
-
-  //defines shape: squire or round
-  const getTextFieldStyle = () => {
-    if (shape === "round") {
-      // round
-      return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "50px",
-
-          legend: {
-            marginLeft: "30px",
-          },
-        },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "20px !important",
-          borderRadius: "50px",
-        },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "20px",
-        },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "20px",
-          paddingLeft: "10px",
-          paddingRight: 0,
-          background: "white",
-        },
-      };
-    } else {
-      //square
-      return null;
-    }
-  };
-
-  const onInputChangeHandler = (event, newInputValue) => {
-    setCurrentInputValue({
-      syntheticBaseEvent: event,
-      inputValue: newInputValue,
-    });
-  };
-
-  const onChangeHandler = (event, newValue) => {
-    setCurrentOption(newValue);
-    onChange(event, newValue);
-  };
-
-  const getAutocompleteSingle = () => {
-    return (
-      <Autocomplete
-        onChange={(event, newValue) => {
-          onChangeHandler(event, newValue);
-        }}
-        onInputChange={(event, newInputValue) => {
-          onInputChangeHandler(event, newInputValue);
-        }}
-        disablePortal
-        id="combo-box"
-        options={options}
-        sx={{ width: width }}
-        popupIcon={showPopupIcon ? <ArrowDropDownIcon /> : null}
-        forcePopupIcon={"auto"}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label={text}
-            size={size}
-            sx={getTextFieldStyle()}
-            placeholder={placeHolder}
-            InputProps={{
-              ...params.InputProps,
-              startAdornment: showSearchIcon ? (
-                <InputAdornment position="start">
-                  <SearchIcon fontSize="medium" />
-                </InputAdornment>
-              ) : null,
-            }}
-          />
-        )}
-      />
-    );
-  };
-
-  const getAutocompleteMulti = () => {
-    return (
-      <Autocomplete
-        onChange={(event, newValue) => {
-          onChangeHandler(event, newValue);
-        }}
-        onInputChange={(event, newInputValue) => {
-          onInputChangeHandler(event, newInputValue);
-        }}
-        multiple
-        limitTags={limitTagsOnMultiSelect}
-        size={size}
-        id="checkboxes-tags"
-        options={options}
-        disableCloseOnSelect
-        getOptionLabel={(option) => option.label}
-        popupIcon={showPopupIcon ? <ArrowDropDownIcon /> : null}
-        renderOption={(props, option, { selected }) => (
-          <li {...props}>
-            <Checkbox
-              icon={icon}
-              checkedIcon={checkedIcon}
-              style={{ marginRight: 8 }}
-              checked={selected}
-            />
-            {option.label}
-          </li>
-        )}
-        style={{ width: width }}
-        renderInput={(params) =>
-          showSearchIcon && (!currentOption || (currentOption && currentOption.length === 0)) ? (
-            <TextField
-              {...params}
-              label={text}
-              size={size}
-              sx={getTextFieldStyle()}
-              placeholder={placeHolder}
-              InputProps={{
-                ...params.InputProps,
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon fontSize="medium" />
-                  </InputAdornment>
-                ),
-              }}
-            />
-          ) : (
-            <TextField
-              {...params}
-              label={text}
-              size={size}
-              sx={getTextFieldStyle()}
-              placeholder={placeHolder}
-            />
-          )
-        }
-      />
-    );
-  };
-
-  return (
-    <DropdownContainer width={width}>
-      {/* <TextField
-        label={"Retailer"}
-         size={"small"}
-        placeholder="Type..."
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon fontSize="small" />
-            </InputAdornment>
-          ),
-        }}
-      /> */}
-      {multiSelect ? getAutocompleteMulti() : getAutocompleteSingle()}
-    </DropdownContainer>
-  );
-};
-
-// Dropdown.propTypes = {
-//   /**
-//    *  dropdown width
-//    */
-//   width: PropTypes.string,
-
-//   /**
-//    *  dropdown size: small/large
-//    */
-//   size: PropTypes.string,
-
-//   /**
-//    * dropdown initial input text
-//    */
-//   text: PropTypes.string,
-
-//   /**
-//    * arrayOf <T> - options array to load into dropdown
-//    */
-//   options: PropTypes.arrayOf,
-
-//   /**
-//    *  shape: round/square
-//    */
-//   shape: PropTypes.string,
-// };
-
-// Dropdown.defaultProps = {
-//   width: 300,
-//   size: "small",
-//   text: "Select retailer...",
-//   options: [],
-//   shape: "round",
-// };
-
-export default Dropdown;

package/src/stories/components/InfoIcon.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export const InfoIcon = ({clicked}) => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke={clicked ? "white" : "black"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
-    );
-  };
-
-export default InfoIcon;  

package/src/stories/components/OneColumnContainer.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useState } from "react";
-import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '../OneColumnContainer.style';
-import { InfoIcon } from "./InfoIcon";
-import { useDroppable, UniqueIdentifier } from "@dnd-kit/core";
-import classNames from "classnames";
-/**
- * Primary UI component for user interaction
- */
-export const OneColumnContainer = ({ children,nodeRef,itemClass,divStyle,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
-  const [clicked, setClicked] = useState(false);
-  const onInfoClick = ()=>{
-    setClicked(!clicked)
-  }
-
-  return (
-
-    <StyledContainer className={classNames(
-      itemClass,
-      overStyle,
-      draggingStyle,
-      children && droppedStyle
-    )} width={width} height={height}>
-        <div className={classNames(divStyle)} ref={nodeRef} >
-      {children}
-      <InfoTextContainer clicked={clicked} width={width} height={height}>
-        <InfoTextLabel>{infoText}</InfoTextLabel>
-      </InfoTextContainer>
-      <IconContainer onClick={onInfoClick}>
-        <InfoIcon clicked={clicked} />
-      </IconContainer>
-      </div>
-    </StyledContainer>
-
-  );
-};
-
-OneColumnContainer.propTypes = {
-
-};
-
-OneColumnContainer.defaultProps = {
-
-};
-
- export default OneColumnContainer;

package/src/stories/components/SegmentedButton.jsx

@@ -1,110 +0,0 @@
-import React from "react";
-import { useState, useEffect, useRef } from "react";
-
-import {
-  ControlsContainer,
-  Controls,
-  ControlsInput,
-  Segment,
-  SegmentLabel,
-} from "../SegmentedButton.style.js";
-
-/*SegmentedButton*/
-export const SegmentedButton = ({
-  name,
-  options,
-  segmentWidth = 120,  
-  segmentHeigth = 41,  
-  controlRadius = 8,
-  segmentRadius = 8,  
-  fontSize = 14,
-  backgroundColor = "#ECF0FF",
-  selectedSegmentColor  = "#3a9df9",
-  selectedTextColor = "white",
-  unselectedTextColor = "black",
-  defaultIndex = 0,
-  onClick,
-  ...props
-}) => {
-  const [activeIndex, setActiveIndex] = useState(defaultIndex);
-    
-  const controlRef = useRef();
-  const componentReady = useRef();
-
-  const optionsRef = options.map((item, i) => {
-    return { ...item, id: i, ref: useRef() };
-  });
-
-  // Determine when the component is "ready"
-  useEffect(() => {
-    componentReady.current = true;
-  }, []);
-
-  useEffect(()=>{
-    if( defaultIndex >= 0 && defaultIndex < options?.length){
-      setActiveIndex(defaultIndex);
-    }
-   },[defaultIndex])
-
-  useEffect(() => {
-    const activeSegmentRef = optionsRef[activeIndex].ref;
-    const { offsetWidth, offsetLeft } = activeSegmentRef.current;
-    const { style } = controlRef.current;
-
-    style.setProperty("--highlight-width", `${offsetWidth}px`);
-    style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
-  }, [activeIndex, controlRef, optionsRef]);
-
-  const onInputChangeHandler = (value, index) => {
-    setActiveIndex(index);
-    onClick({index: index, value: value} );
-  };
-
-  return (
-    <ControlsContainer 
-        fontSize={fontSize} 
-        ref={controlRef}>
-      <Controls
-        backgroundColor={backgroundColor}
-        selectedSegmentColor={selectedSegmentColor}   
-        segmentRadius={segmentRadius} 
-        controlRadius={controlRadius}                  
-        segmentWidth={segmentWidth}       
-        className={`controls ${componentReady.current ? "ready" : "idle"}`}        
-      >
-        {optionsRef?.map((item, i) => (
-          <Segment
-            key={item.id}
-            backgroundColor={backgroundColor}
-            selectedSegmentColor={selectedSegmentColor}
-            segmentRadius={segmentRadius} 
-            controlRadius={controlRadius}                      
-            segmentWidth={segmentWidth}                    
-            className={`${activeIndex === i ? "active" : "inactive"}`}
-            ref={item.ref}
-          >
-            <ControlsInput
-              type="radio"
-              value={item.value}
-              id={item.id}
-              name={name}
-              onChange={() => onInputChangeHandler(item.value, item.id)}
-              checked={i === activeIndex}
-            />
-            <SegmentLabel              
-              selectedTextColor={selectedTextColor}
-              unselectedTextColor={unselectedTextColor}             
-              segmentHeigth={segmentHeigth/5}                   
-              className={`${activeIndex === i ? "active" : "inactive"} `}
-              htmlFor={item.value}
-            >
-              {item.value}
-            </SegmentLabel>
-          </Segment>
-        ))}
-      </Controls>
-    </ControlsContainer>
-  );
-};
-
-export default SegmentedButton;

package/src/stories/components/TotalDoughnutChart.jsx

@@ -1,178 +0,0 @@
-import React from "react";
-
-import { PieChart as SourcePieChart, Pie, Cell, Tooltip } from "recharts";
-
-import {
-  ControlsContainer,
-  Title,
-  CurrencySign,
-  FormattedValue,
-  Controls,
-  DoughnutChart,
-  LegendControls,
-  LegendColorRectangle,
-  LegendTitle,
-  LegendCurrencySign,
-  LegendFormattedValue,
-} from "../TotalDoughnutChart.style.js";
-
-/*TotalDoughnutChart*/
-export const TotalDoughnutChart = ({
-  title = "Total Cost",
-  value = 0,
-  dotCut = true,
-  currency = true,
-  currencyType = "USD",
-  legendData,
-  width = 260,
-  height = 350,
-  textColor = "black",
-  ...props
-}) => {
-  const MIN_WIDTH = 260;
-  const MIN_HEIGHT = 300;
-
-  const getCurrencySign = (currencyTypeToConvert) => {
-    if (!currencyTypeToConvert) return "";
-    let currencySign = "";
-    const currencyFormatter = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currencyTypeToConvert,
-    });
-    currencySign = currencyFormatter.format(value).substring(0, 1);
-    return currencySign;
-  };
-
-  const getFormattedUnits = (num) => {
-    if (Math.abs(num) >= 1000000000) {
-      return "B";
-    }
-    if (Math.abs(num) >= 1000000) {
-      return "M";
-    }
-    if (Math.abs(num) >= 1000) {
-      return "K";
-    }
-    return "";
-  };
-
-  const getFormattedValue = (num) => {
-    if (Math.abs(num) >= 1000000000) {
-      return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
-    }
-    if (Math.abs(num) >= 1000000) {
-      return (num / 1000000).toFixed(1).replace(/\.0$/, "");
-    }
-    if (Math.abs(num) >= 1000) {
-      return (num / 1000).toFixed(1).replace(/\.0$/, "");
-    }
-    return num;
-  };
-
-  const getNumberWithCommas = (x) => {
-    x = x.toString();
-    var pattern = /(-?\d+)(\d{3})/;
-    while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-    return x;
-  };
-
-  const getDoughnutChartLeft = () => {
-    if( width <= 260) { return 10};
-    if( width >= 290) { return 40};
-    return 10 + (width - MIN_WIDTH) ;   
-  };
-
-    const getLegendControlsLeft = () => {   
-    if( width <= 260) { return 100};
-    if( width >= 300) { return 140};
-    return 100 + (width - MIN_WIDTH)  ;   
-  };
-    
-  const getDoughnutChartTop = () => {
-    if( height <= 300) { return 180};
-    if( height >= 340) { return 220};
-    return 180 + (height - MIN_HEIGHT)  ;   
-  };
-  
-  const getLegendControlsTop = () => {   
-    if( height <= 300) { return 180};
-    if( height >= 340) { return 220};
-    return 180 + (height - MIN_HEIGHT)  ;   
-  };
-
-    
-  const getControlsLeft = () => {   
-    if( (width - MIN_WIDTH)<= 0) { return MIN_WIDTH};    
-    return width ;   
-  };
-  
-  const getControlsTop = () => {   
-    if( (height - MIN_HEIGHT)<= 0) { return MIN_HEIGHT};    
-    return height ;   
-  };
-
-  const onPieEnterHandler = () => {};
-
-  return (
-    <ControlsContainer height={getControlsTop()} width={getControlsLeft()} textColor={textColor}>
-      <Controls height={height} width={getControlsLeft}>
-        <Title>{title}</Title>
-
-        <CurrencySign>
-          {`${currency ? getCurrencySign(currencyType) : ""}`}
-        </CurrencySign>
-        <FormattedValue>
-          {`${dotCut ? getFormattedValue(value) : getNumberWithCommas(value)}`}
-          {`${dotCut ? getFormattedUnits(value) : ""}`}
-        </FormattedValue>
-
-        {legendData.map((row, index) => (
-          <LegendControls
-            left={getLegendControlsLeft()}
-            top={getLegendControlsTop()}
-          >
-            <LegendColorRectangle color={row.color}></LegendColorRectangle>
-            <LegendTitle>{row.name}</LegendTitle>
-            <LegendCurrencySign>
-              {`${currency ? getCurrencySign(currencyType) : ""}`}
-            </LegendCurrencySign>
-            <LegendFormattedValue>
-              {`${
-                dotCut
-                  ? getFormattedValue(row.value)
-                  : getNumberWithCommas(row.value)
-              }`}
-              {`${dotCut ? getFormattedUnits(row.value) : ""}`}
-            </LegendFormattedValue>
-          </LegendControls>
-        ))}
-
-        <DoughnutChart 
-            left={getDoughnutChartLeft() }
-            top={getDoughnutChartTop()}>
-          <SourcePieChart
-            width={90}
-            height={90}
-            onMouseEnter={onPieEnterHandler}
-          >
-            <Pie
-              data={legendData}
-              innerRadius={30}
-              outerRadius={45}
-              fill="#8884d8"
-              dataKey="value"
-            >
-              {legendData.map((row, index) => (
-                <Cell key={`cell-${index}`} fill={row.color} />
-              ))}
-            </Pie>
-
-            <Tooltip />
-          </SourcePieChart>
-        </DoughnutChart>
-      </Controls>
-    </ControlsContainer>
-  );
-};
-
-export default TotalDoughnutChart;