l-min-components 0.2.0

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

@@ -0,0 +1,129 @@
+import styled from "styled-components";
+
+export const ModalCardContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 720px;
+`;
+
+export const CloseModalButton = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-family: "Nunito";
+  border-radius: 50%;
+  margin-bottom: 8px;
+  margin-left: auto;
+`;
+
+export const CardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+`;
+
+export const CardHeader = styled.div`
+  width: 100%;
+  text-align: center;
+
+  h1 {
+    font-size: 22px;
+    font-weight: 600;
+    color: #000000;
+    margin-bottom: 10px;
+  }
+
+  h6 {
+    color: #313333;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 65px;
+  }
+`;
+
+export const CardBody = styled.div`
+  width: 100%;
+  display: flex;
+  margin: 20px auto 10px;
+  justify-content: center;
+
+  .tooltip-styles {
+    color: #4a4d4d;
+    background-color: #ffffff;
+    opacity: 1;
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
+      rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+  }
+
+  /* .ReactModal__Overlay.ReactModal__Overlay--after-open {
+    background-color: rgba(0, 0, 0, 0.45);
+  } */
+
+  .slider-styles {
+    .rc-slider-rail,
+    .rc-slider-track,
+    .rc-slider-step {
+      height: 10px;
+    }
+
+    .rc-slider-track {
+      background-color: #30d568;
+    }
+
+    .rc-slider-handle {
+      width: 15px;
+      height: 15px;
+      margin-top: -3px;
+      background-color: #ffffff;
+      border: 2px solid #00c2c2;
+      border-radius: 50%;
+    }
+
+    .rc-slider-handle-dragging {
+      box-shadow: 0 0 0 5px #00c2c2;
+    }
+  }
+  form {
+    width: 80%;
+  }
+
+  .form__contents {
+    display: flex;
+    width: 100%;
+    margin: 30px auto 0;
+
+    .input__contents {
+      width: 90%;
+      margin-right: 20px;
+    }
+  }
+
+  .btn__footer {
+    display: flex;
+    margin-top: 30px;
+    justify-content: center;
+
+    button {
+      width: 171px;
+      margin: 0 20px;
+    }
+  }
+`;
+
+export const ProgressBarContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+`;

package/src/components/notificationThreshold/slider.jsx

@@ -0,0 +1,46 @@
+import "rc-slider/assets/index.css";
+import Slider from "rc-slider";
+import { Tooltip } from "react-tooltip";
+import "react-tooltip/dist/react-tooltip.css";
+
+const SliderWithTooltip = (props) => {
+  const { value, setValue, ...restProps } = props;
+  return (
+    <>
+      <Tooltip
+        anchorSelect=".rc-slider-handle"
+        place="top"
+        variant="info"
+        content={value}
+        id="my-tooltip"
+        className="tooltip-styles"
+      />
+      <Slider
+        onChange={(nextValues) => {
+          setValue(nextValues[0]);
+          console.log("Change:", nextValues);
+        }}
+        value={value}
+        min={0}
+        max={124080}
+        defaultValue={10}
+        step={1}
+        className={"slider-styles"}
+        range
+        tipFormatter={(value) => `${value}%`}
+        // count={3}
+        // value={10}
+        pushable
+        // trackStyle={[{ backgroundColor: "#30d568" }]}
+        // handleStyle={[
+        //   { backgroundColor: "#ffffff" },
+        //   { backgroundColor: "#00c2c2" },
+        // ]}
+        // railStyle={{ backgroundColor: "#00c2c2" }}
+        // handleRender={handleRender}
+      />
+    </>
+  );
+};
+
+export default SliderWithTooltip;

package/src/components/progressBar/index.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ProgressBarContainer, ProgressBarValue } from "./styles";
+
+const ProgressBar = ({ value, minValue, maxValue, color, size, bgColor }) => (
+  <ProgressBarContainer size={size} bgColor={bgColor}>
+    <ProgressBarValue
+      value={value}
+      minValue={minValue}
+      maxValue={maxValue}
+      color={color}
+      size={size}
+    />
+  </ProgressBarContainer>
+);
+
+ProgressBar.propTypes = {
+  value: PropTypes.number.isRequired,
+  minValue: PropTypes.number,
+  maxValue: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
+  bgColor: PropTypes.string,
+};
+
+ProgressBar.defaultProps = {
+  color: "#007aff",
+  size: "md",
+  bgColor: "#eee",
+};
+
+export default ProgressBar;

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

@@ -0,0 +1,44 @@
+import styled, { css } 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 ProgressBarContainer = styled.div`
+  ${({ size, bgColor }) => css`
+    height: ${sizes[size].height};
+    border-radius: ${sizes[size].borderRadius};
+    background-color: ${bgColor};
+  `}
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+export const ProgressBarValue = styled.div`
+  transition: width 0.5s ease;
+  ${({ value, minValue, maxValue }) => css`
+    width: ${(((value - minValue) / (maxValue - minValue)) * 100).toFixed(2)}%;
+  `}border-radius: 20px;
+  height: 150%;
+  background-color: ${({ color }) => color || "#007aff"};
+`;

package/src/components/radio/doc.md

@@ -0,0 +1,41 @@
+## Radio Component
+
+A customizable radio input component that allows selection of one option from a group of options.
+
+### Props
+
+- `options` (required): An array of objects that represent the options. Each object should have the following keys:
+  - `value` (required): The value of the option.
+  - `label` (required): The label of the option.
+- `defaultValue`: The default selected value.
+- `onChange`: A function that will be called when the selected value changes. The new value will be passed as the first argument.
+- `color`: The color of the radio button and label.
+- `direction`: The direction of the radio buttons and labels. Can be either "row" or "column".
+
+### Example Usage
+
+```jsx
+import React from 'react';
+import Radio from './Radio';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+function MyComponent() {
+  const handleOptionChange = (newValue) => {
+    console.log('New value:', newValue);
+  };
+
+  return (
+    <Radio
+      options={options}
+      color="#007bff"
+      defaultValue="option1"
+      onChange={handleOptionChange}
+      direction="row"
+    />
+  );
+}

package/src/components/radio/index.jsx

@@ -0,0 +1,70 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import {
+  Container,
+  RadioControl,
+  RadioInput,
+  RadioLabel,
+  RadioWrapper,
+} from "./styles";
+
+const Radio = ({
+  options,
+  defaultValue,
+  onChange,
+  direction,
+  ...props
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <Container direction={direction} {...props}>
+      {options.map((option) => (
+        <RadioWrapper key={option.value}>
+          <RadioInput
+            id={option.value}
+            name="radio-group"
+            value={option.value}
+            checked={value === option.value}
+            onChange={handleChange}
+            {...props}
+          />
+          <RadioControl {...props}></RadioControl>
+          <RadioLabel
+            htmlFor={option.value}
+            checked={value === option.value}
+            {...props}
+          >
+            {option.label}
+          </RadioLabel>
+        </RadioWrapper>
+      ))}
+    </Container>
+  );
+};
+
+Radio.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  direction: PropTypes.oneOf(["row", "column"]),
+};
+
+Radio.defaultProps = {
+    defaultValue: null,
+    direction: 'row'
+};
+
+export default Radio;

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

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: ${(props) => props.direction};
+  gap: 10px;
+`;
+
+export const RadioWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+`;
+
+export const RadioInput = styled.input.attrs({ type: "radio" })`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+`;
+
+export const RadioControl = styled.span`
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgba(159, 159, 159, 0.365);
+  transition: all 0.2s ease-in-out;
+
+  ${RadioInput}:checked + & {
+    border-color: ${(props) => props.color || "rgba(159, 159, 159, 0.365)"};
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 70%;
+      height: 70%;
+      border-radius: 50%;
+      background-color: ${(props) =>
+        props.color || "rgba(159, 159, 159, 0.365)"};
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+
+export const RadioLabel = styled.span`
+  margin-left: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  color: ${(props) =>
+    props.checked ? props.color : "rgba(159, 159, 159, 0.365)"};
+`;

package/src/components/searchBar/doc.md

@@ -0,0 +1,68 @@
+# SearchBar Component
+
+A customizable search bar component with suggestions and async results.
+
+## Props
+
+- `onSubmit` (function): A function that will be called with the search value when the search bar is submitted.
+- `asyncResult` (function): A function that will be called with the search value when the search input is changed. It should return a promise that resolves with an array of suggestion objects.
+- `onSuggestionClick` (function): A function that will be called with the clicked suggestion.
+- `placeholder` (string): The placeholder text for the search input.
+- `outlineColor` (string): The color of the search bar outline when it is focused.
+- `color` (string): The color of the search input text.
+- `borderRadius` (string): The border radius of the search bar.
+- `warning` (string): The warning message to display when no results are found.
+
+| Prop Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onSubmit | function |  | A function that will be called with the search value when the form is submitted |
+| asyncResult | function |  | A function that takes a search value as input and returns an array of suggestion items |
+| onSuggestionClick | function |  | A function that will be called with the suggestion item when a suggestion is clicked |
+| placeholder | string | "Search" | The text to display in the search input when it is empty |
+| outlineColor | string | "#2d9cdb" | The color of the search input outline when it is focused |
+| color | string | "#333" | The color of the search input text |
+| borderRadius | string | "4px" | The border radius of the search input |
+| warning | string |  | The text to display when no results are found |
+| width | number | Sets width and height of the entire container |
+
+
+
+## Example Usage
+
+```jsx
+import SearchBar from './components/SearchBar';
+
+function App() {
+  const handleSearch = (searchValue) => {
+    console.log(`Searching for: ${searchValue}`);
+  };
+
+  const asyncResult = async (searchValue) => {
+    const response = await fetch(`https://google.com/search?query=${searchValue}`);
+    const data = await response.json();
+    return data.results;
+  };
+
+  const handleSuggestionClick = (suggestion) => {
+    console.log(`Clicked suggestion: ${suggestion}`);
+  };
+
+  return (
+    <div className="App">
+      <SearchBar
+        onSubmit={handleSearch}
+        asyncResult={asyncResult}
+        onSuggestionClick={handleSuggestionClick}
+        placeholder="Search for products"
+        outlineColor="#febf10"
+        heightSize={"20px"}
+        widthSize={"120px"}
+        color="#333"
+        borderRadius="10px"
+        warning="No results found"
+      />
+    </div>
+  );
+}
+
+export default App;

package/src/components/searchBar/index.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  SearchBarContainer,
+  SearchInput,
+  SearchIcon,
+  WarningText,
+  SuggestionList,
+  SuggestionItem,
+  Container,
+  OptionIcon,
+} from "./styles";
+
+const SearchBar = ({
+  onSubmit,
+  warning,
+  asyncResult,
+  ...restProps
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [suggestions, setSuggestions] = useState([]);
+
+   const handleInputChange = async (event) => {
+     const value = event.target.value;
+     setSearchValue(value);
+
+     if (asyncResult) {
+       const suggestions = await asyncResult(value);
+       setSuggestions(suggestions);
+       setShowSuggestions(true);
+     }
+   };
+
+  const handleEnterPress = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit(searchValue);
+      setShowSuggestions(false);
+    }
+  };
+
+  const handleSuggestionClick = (suggestion) => {
+    setSearchValue(suggestion);
+    setShowSuggestions(false);
+    restProps.onSuggestionClick && restProps.onSuggestionClick(suggestion);
+  };
+
+  return (
+    <Container>
+      <SearchBarContainer 
+      heightSize={restProps.heightSize}
+      widthSize={restProps.widthSize}
+      borderRadius={restProps.borderRadius}
+      outlineColor={restProps.outlineColor}
+      >
+        <SearchIcon  
+        onClick={(e) => {
+            e.preventDefault();
+            onSubmit(searchValue);
+          }}/>
+        <SearchInput
+          type="search"
+          placeholder={restProps.placeholder || "Search"}
+          value={searchValue}
+          onChange={handleInputChange}
+          onKeyPress={handleEnterPress}
+          borderRadius={restProps.borderRadius || "12px"}
+          heightSize={restProps.heightSize || "50px"}
+          widthSize={restProps.widthSize || "100%"}
+        />
+        {showSuggestions && (
+          <SuggestionList>
+            {suggestions.map((suggestion) => (
+              <SuggestionItem
+                key={suggestion}
+                onClick={() => handleSuggestionClick(suggestion)}
+              >
+                {suggestion}
+              </SuggestionItem>
+            ))}
+          </SuggestionList>
+        )}
+        {warning && <WarningText>{warning}</WarningText>}
+      </SearchBarContainer>
+      <OptionIcon />
+    </Container>
+  );
+};
+
+SearchBar.propTypes = {
+  onSubmit: PropTypes.func,
+  warning: PropTypes.string,
+  asyncResult: PropTypes.func,
+  heightSize:PropTypes.string,
+  widthSize: PropTypes.string,
+  borderRadius: PropTypes.string,
+  outlineColor: PropTypes.string,
+};
+
+// SearchBar.defaultProps = {
+//   onSubmit: () => {},
+//   warning: "",
+//   asyncResult: null,
+//   size: 95,
+// };
+
+export default SearchBar;

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

@@ -0,0 +1,89 @@
+import styled from "styled-components";
+import { FiSearch } from "react-icons/fi";
+import { RiEqualizerLine } from "react-icons/ri";
+
+export const Container = styled.div`
+  display: flex;
+  // justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const SearchBarContainer = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: ${({ heightSize }) => heightSize || "50px"};
+  width: ${({ widthSize }) => widthSize || "100%"};
+  
+  border-radius: ${({ borderRadius }) => borderRadius || "12px"};
+  background-color: #FFFFFF;
+  transition: box-shadow 0.2s ease;
+  transition: all 0.3s;
+  &:focus-within {
+    box-shadow: 0 0 0 1px ${({ outlineColor }) => outlineColor || "#FEBF10"};
+    transform: scale(1.01);
+  }
+`;
+
+export const SearchIcon = styled(FiSearch)`
+  position: absolute;
+  margin-left: 12px;
+  color: #ADB3B3;
+  font-size: 20px;
+`;
+
+export const SearchInput = styled.input`
+  width: 100%;
+  height: 100%;
+  margin-left: 32px;
+  padding: 12px;
+  border: none;
+  border-radius: ${({ borderRadius }) => borderRadius || "12px"};
+  font-size: 16px;
+  background-color: #FFFFFF;
+  color: #333333;
+  outline: none;
+  &::placeholder {
+    color:  #ADB3B3;
+  }
+`;
+
+export const WarningText = styled.div`
+  // position: absolute;
+  // right: 10px;
+  // font-size: 14px;
+  // color: #e74c3c;
+
+  position: absolute;
+  right: 2%;
+  bottom: -40%;
+  font-size: 12px;
+  color: #e74c3c;
+`;
+
+export const SuggestionList = styled.ul`
+  position: absolute;
+  top: 55px;
+  left: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border: 1px solid  #DFE6E6;
+  background-color: #f1f1f1;
+  z-index: 10;
+`;
+
+export const SuggestionItem = styled.li`
+  padding: 8px 12px;
+  cursor: pointer;
+  &:hover {
+    background-color: #dddddd;
+  }
+`;
+
+export const OptionIcon = styled(RiEqualizerLine)`
+  color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
+  font-size: 16px;
+`;