l-min-components 0.2.0

package/src/components/input/index.jsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from "react";
+import { Input, Label, ErrorMsg } from "./index.styled";
+
+/**
+ * @param {{
+ *  type: string,
+ *  disabled: boolean,
+ *  onClick: function,
+ *  style: CSSProperties,
+ *  required: boolean,
+ *  value: string | number,
+ *  onChange: function,
+ * }} props - properties of Input Component
+ *
+ */
+
+const InputComponent = (props) => {
+  const [value, setValue] = useState("");
+  const [formErrors, setFormErrors] = useState(false);
+
+  const validate = (e) => {
+    if (!e.target.value) {
+      setFormErrors(true);
+      setTimeout(() => {
+        setFormErrors(false);
+      }, 2000);
+    } else {
+      console.log("false");
+    }
+  };
+
+  //validation
+  const handleValidation = () => {
+    // setFormErrors(validate(formData));
+  };
+
+  return (
+    <div style={props.style}>
+      <Label htmlFor={props.in} style={props.customLabelStyle}>
+        {props.label}
+      </Label>
+      <Input
+        type={props.inputType}
+        name={props.inputName}
+        value={props.value}
+        id={props.inputId}
+        placeholder={props.placeholder}
+        style={props.customInputStyle}
+        disabled={props.disabled}
+        hasError={props.hasError}
+        onBlur={validate}
+        required={props.required}
+        onChange={props.onChange}
+        ariaDescribedby={props.ariaDescribedby}
+        min={props.min}
+        max={props.max}
+        pattern={props.pattern}
+      />
+      {props.hasError && (
+        <ErrorMsg role="alert" id={props.errorMsgId}>
+          {props.errorMsg}
+        </ErrorMsg>
+      )}
+    </div>
+  );
+};
+
+export default InputComponent;

package/src/components/input/index.styled.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+/* styles for input component */
+ export const Input = styled.input`
+  background-color: transparent;
+  padding: 10px 14px;
+  font-size: 16px;
+  font-weight: 400;
+  border-radius: 10px;
+  border: 1px solid ${(props) => (props.hasError ? "#F95454" : "#adb2b2")};
+  color: #adb3b3;
+  transition: 0.5s;
+  outline: none;
+  width: 100%;
+  
+  &:disabled {
+    background-color: #c6cccc;
+    cursor: not-allowed;
+  }
+  &:focus {
+    border: 1px solid #00c2c2;
+  }
+  &:active {
+    border: 1px solid #00c2c2;
+  }
+  &::placeholder {
+    color: #adb2b2;
+  }
+`;
+
+export const Label = styled.label`
+  font-size: 14px;
+  font-weight: 400;
+  color: #313333;
+  display: block;
+  margin-bottom: 12px;
+`;
+
+export const ErrorMsg = styled.small`
+  font-size: 12px;
+  font-weight: 400;
+  color: #f95454;
+  display: block;
+  margin-top: 12px;
+`;

package/src/components/loader/index.jsx

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+
+/**
+ *
+ * @param {{zoom: number, color: string}} param0
+ * @returns
+ */
+const Loader = ({ zoom, color }) => {
+  return (
+    <Wrap zoom={zoom}>
+      <Container zoom={zoom} color={color}>
+        <div></div>
+        <div></div>
+        <div></div>
+      </Container>
+    </Wrap>
+  );
+};
+
+const Wrap = styled.div`
+  width: ${({ zoom }) => (zoom ? (zoom * 100 * 80) / 100 : 80)}px;
+  height: ${({ zoom }) => (zoom ? (zoom * 100 * 80) / 100 : 80)}px;
+  display: flex;
+  align-items: center;
+  justify-content: "center";
+`;
+
+const Container = styled.div`
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  width: 80px;
+  height: 80px;
+  transform: scale(${({ zoom }) => zoom ?? 1});
+  & > div {
+    position: absolute;
+    /* display: flex; */
+    gap: 2px;
+    left: 8px;
+    width: 16px;
+    background: ${({ color }) => color ?? "#fff"};
+    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  }
+  & > div:nth-child(1) {
+    left: 8px;
+    animation-delay: -0.24s;
+  }
+  & > div:nth-child(2) {
+    left: 32px;
+    animation-delay: -0.12s;
+  }
+  & > div:nth-child(3) {
+    left: 56px;
+    animation-delay: 0;
+  }
+  @keyframes lds-facebook {
+    0% {
+      top: 8px;
+      height: 64px;
+    }
+    50%,
+    100% {
+      top: 24px;
+      height: 32px;
+    }
+  }
+`;
+
+export default Loader;

package/src/components/notificationProgressBar/index.jsx

@@ -0,0 +1,187 @@
+import React from "react";
+import styled from "styled-components";
+
+const RangeMeterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 22px;
+  height: 12px;
+  position: relative;
+`;
+
+const ThresholdsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 12px;
+  border-radius: 22px;
+  overflow: hidden;
+  position: absolute;
+`;
+
+const Threshold = styled.div`
+  width: ${(props) => props.width}%;
+  height: 100%;
+  border-radius: 22px;
+  background-color: ${(props) => props.color};
+`;
+
+const RangeTrack = styled.input.attrs((props) => ({
+  type: "range",
+  min: props.min,
+  max: props.max,
+  value: props.value,
+}))`
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 5px;
+  outline: none;
+  margin: 10px 0;
+  position: relative;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    border: 2px solid ${(props) => props.thresholdColor};
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    border: 2px solid ${(props) => props.thresholdColor};
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+const ThumbTooltip = styled.div`
+  position: absolute;
+  top: -35px;
+  left: ${(props) => props.value}%;
+  transform: translateX(-50%);
+  background-color: #ffffff;
+  color: #000000;
+  font-size: 14px;
+  padding: 3px 5px;
+  /* padding: 5px; */
+  border-radius: px;
+  display: block;
+`;
+
+const RangeMeter = ({ min, max, thresholds, value, onChange }) => {
+  const trackRef = React.useRef(null);
+  const thumbRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+
+  const [thumbPosition, setThumbPosition] = React.useState({ x: 0, y: 0 });
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+
+  const handleThumbMouseMove = (event) => {
+    const trackRect = trackRef.current.getBoundingClientRect();
+    const thumbRect = thumbRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+    const thumbPosition = {
+      x: event.clientX - trackRect.left - thumbRect.width / 2,
+      y: -tooltipRect.height - thumbRect.height,
+    };
+
+    setThumbPosition(thumbPosition);
+  };
+
+  const handleThumbMouseEnter = () => {
+    setTooltipVisible(true);
+  };
+
+  const handleThumbMouseLeave = () => {
+    setTooltipVisible(false);
+  };
+
+  const handleTrackChange = (event) => {
+    const value = parseInt(event.target.value);
+    const threshold = thresholds.find((threshold) => value < threshold.value);
+    const thresholdColor = threshold
+      ? threshold.color
+      : thresholds[thresholds.length - 1].color;
+
+    onChange(value, thresholdColor);
+  };
+
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+
+    if (thumb) {
+      thumb.addEventListener("mousemove", handleThumbMouseMove);
+      thumb.addEventListener("mouseenter", handleThumbMouseEnter);
+      thumb.addEventListener("mouseleave", handleThumbMouseLeave);
+    }
+
+    return () => {
+      if (thumb) {
+        thumb.removeEventListener("mousemove", handleThumbMouseMove);
+        thumb.removeEventListener("mouseenter", handleThumbMouseEnter);
+        thumb.removeEventListener("mouseleave", handleThumbMouseLeave);
+      }
+    };
+  }, [thumbRef]);
+  const thresholdWidths = thresholds.map((threshold, index) => {
+    const start = index === 0 ? min : thresholds[index - 1].value;
+    const end = threshold.value ;
+    const percentage = ((end - start) / (max - min)) * 100;
+    return percentage;
+  });
+
+  const thresholdColors = thresholds.map((threshold) => threshold.color);
+
+  return (
+    <RangeMeterWrapper>
+      <ThresholdsWrapper>
+        {thresholds.map((threshold, index) => (
+          <Threshold
+            key={index}
+            color={threshold.color}
+            width={thresholdWidths[index]}
+          />
+        ))}
+      </ThresholdsWrapper>
+      <RangeTrack
+        ref={trackRef}
+        min={min}
+        max={max}
+        value={value}
+        thresholdColor={thresholdColors.find(
+          (color, index) =>
+            value >= (index > 0 ? thresholds[index - 1].value : min) &&
+            value < thresholds[index].value
+        )}
+        onChange={handleTrackChange}
+        onMouseEnter={handleThumbMouseEnter}
+        onMouseLeave={handleThumbMouseLeave}
+      />
+      <ThumbTooltip
+        ref={tooltipRef}
+        value={value}
+        thumbPosition={thumbPosition}
+        visible={tooltipVisible}
+      >
+        {value}
+      </ThumbTooltip>
+    </RangeMeterWrapper>
+  );
+};
+
+export default RangeMeter;

package/src/components/notificationProgressBar/styles/index.jsx

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+
+export const sizes = {
+  xs: {
+    height: "8px",
+    borderRadius: "4px",
+  },
+  sm: {
+    height: "12px",
+    borderRadius: "6px",
+  },
+  md: {
+    height: "16px",
+    borderRadius: "8px",
+  },
+  lg: {
+    height: "24px",
+    borderRadius: "12px",
+  },
+  xl: {
+    height: "32px",
+    borderRadius: "16px",
+  },
+};
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 50px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${(props) =>
+    props.disabled ? "transparent" : "rgba(2, 215, 190, 0.091)"};
+  border: 1px solid
+    ${(props) => (props.disabled ? "#fff" : "rgba(2, 215, 190, 0.091)")};
+  position: relative;
+
+  .switch {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+`;
+export const ProgressBarContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: ${(props) => sizes[props.size].height};
+  border-radius: ${(props) => sizes[props.size].borderRadius};
+`;
+
+export const ProgressBarTotal = styled.div`
+  position: absolute;
+  height: 100%;
+  border-radius: 10px;
+  background-color: ${(props) => (props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color)};
+  left: ${(props) => props.left}%;
+  width: ${(props) => props.width}%;
+  z-index: 1;
+`;
+
+export const ProgressBarUsed = styled(ProgressBarTotal)`
+  background-color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+  z-index: 2;
+`;
+
+export const ProgressBarAvailable = styled(ProgressBarTotal)`
+  background-color: ${(props) =>
+    props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color};
+  left: ${(props) => props.left}%;
+  width: ${(props) => props.width}%;
+  z-index: 1;
+`;
+
+export const ProgressHandle = styled.div`
+  position: absolute;
+  top: 50%;
+  left: ${(props) => props.left - "0.5"}%;
+  ${(props) =>
+    props.disabled
+      ? ``
+      : `
+   width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: white;
+  border: 2px solid rgba(0, 194, 194, 1);
+  `}
+
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  display: flex;
+  /* visibility: ${(props) => (props.disabled ? "hidden" : "visible")}; */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+`;
+
+export const HandleValue = styled.div`
+  position: absolute;
+  bottom: -30px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;
+
+export const MinValue = styled.span`
+  position: absolute;
+  left: 0;
+  bottom: -20px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;
+
+export const MaxValue = styled.span`
+  position: absolute;
+  right: 0;
+  bottom: -20px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;

package/src/components/notificationThreshold/index.jsx

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import {
+  CardContainer,
+  CardBody,
+  CardHeader,
+  ModalCardContainer,
+  CloseModalButton,
+} from "./index.styled";
+import InputComponent from "../input";
+import ButtonComponent from "../button";
+import { IoMdClose } from "react-icons/all";
+import Modal from "react-modal";
+import SliderWithTooltip from "./slider";
+
+/**
+ * @param {{
+ *  onClick: function,
+ *  style: CSSProperties,
+ * }} props - properties of Component
+ *
+ */
+const NotificationThresholdComponent = (props) => {
+
+  const [value, setValue] = useState(1);
+  console.log(value);
+
+  const modalCustomStyles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex: 9999999999,
+      transition: "opacity 2000ms ease-in-out",
+    },
+    content: {
+      position: "absolute",
+      overflow: "auto",
+      WebkitOverflowScrolling: "touch",
+      outline: "none",
+      top: "50%",
+      left: "50%",
+      right: "auto",
+      bottom: "auto",
+      marginRight: "-50%",
+      transform: "translate(-50%, -50%)",
+      borderRadius: "30px",
+      border: "none",
+      zIndex: 333333333,
+      background: "transparent",
+      width: "755px",
+    },
+  };
+
+  return (
+    <Modal
+      isOpen={props.isOpen}
+      onRequestClose={props.onRequestClose}
+      style={modalCustomStyles}
+      closeTimeoutMS={2000}
+    >
+      <ModalCardContainer>
+        <CloseModalButton onClick={props.onRequestClose}>
+          <IoMdClose />
+        </CloseModalButton>
+
+        <CardContainer style={props.style}>
+          <CardHeader>
+            <h1> Set Treshold Notification </h1>
+            <h6>
+              Adjust the slider to set a treshold for your notification and
+              input a notification name
+            </h6>
+          </CardHeader>
+
+          <CardBody>
+            <form action="">
+              <SliderWithTooltip value={value} setValue={setValue} />
+              <div className="form__contents">
+                <div className="input__contents">
+                  <InputComponent
+                    inputType="text"
+                    label="Notification Name"
+                    inputName="notification_name"
+                    value={""}
+                    placeholder="Enter the name for this notification"
+                  />
+                </div>
+                <ButtonComponent
+                  type="secondary"
+                  text={"Save"}
+                  styles={{ marginTop: 31 }}
+                />
+              </div>
+              <div className="notification__wrapper"></div>
+              <div className="btn__footer">
+                <ButtonComponent type="secondary" text={"Cancel"} />
+
+                <ButtonComponent text={"Done"} />
+              </div>
+            </form>
+          </CardBody>
+        </CardContainer>
+      </ModalCardContainer>
+    </Modal>
+  );
+};
+
+export default NotificationThresholdComponent;