contentoh-components-library 21.2.27 → 21.2.28

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -1,6 +1,4 @@
 import styled from "styled-components";
-import { BrowserRouter as Router, NavLink } from "react-router-dom";
-import { createGlobalStyle } from "styled-components";
 
 export const Container = styled.div`
   height: 98%;
@@ -8,8 +6,8 @@ export const Container = styled.div`
   padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
-  overflow: none;
-  width: ${({ bar }) => (bar ? 260 : 58)}px;
+  overflow: auto;
+  width: ${({ bar }) => (bar ? 270 : 58)}px;
   border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
@@ -26,155 +24,86 @@ export const Container = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
-      padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
+      margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
+      padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
       .active {
         background: #e33aa9;
       }
       & + div {
         margin-top: 5px;
       }
+      a {
+        height: ${({ bar }) => (bar ? 32 : 38)}px;
+        display: flex;
+        justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
+        border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
+        align-items: center;
+        font-family: sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        text-decoration: none;
+        &.option-link {
+          cursor: pointer;
+          width: ${({ bar }) => (bar ? "160" : "38")}px;
+          margin: 5px 0;
+          padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
+        }
+        p {
+          cursor: pointer;
+          margin: 0%;
+          pointer-events: none;
+        }
+        img {
+          width: 22px;
+          & + * {
+            margin-left: 12px;
+          }
+        }
+      }
+      .option-link:hover {
+        background: #e33aa9;
+      }
       .sub-option {
         display: flex;
         flex-direction: column;
         padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
         height: auto;
         width: auto;
+        a {
+          display: flex;
+          justify-content: flex-start;
+          text-decoration: none;
+          position: relative;
+          font-size: 13px;
+          border-left: 1px solid #f0eef2;
+          border-radius: 0;
+          color: #f0eef2;
+          padding-top: 14px;
+          padding-left: 12px;
+          height: 25px;
+          &::before {
+            border-left: 1px solid #e33aa9;
+            width: 10px;
+            content: "";
+            border-radius: 50%;
+            height: 10px;
+            background-color: white;
+            position: absolute;
+            bottom: 0;
+            left: ${({ bar }) => (bar ? -4 : -34)}%;
+          }
+          &.active {
+            background: none;
+            &::before {
+              background-color: #e33aa9;
+            }
+          }
+        }
       }
     }
   }
 `;
-
-export const RouterComponent = styled(Router)``;
-
-export const NavLinkOption = styled(NavLink)`
-  height: ${({ bar }) => (bar ? 32 : 38)}px;
-  display: flex;
-  justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
-  border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
-  align-items: center;
-  font-family: sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 21px;
-  margin: 5px 0;
-  letter-spacing: -0.015em;
-  color: #fafafa;
-  text-decoration: none;
-  cursor: pointer;
-  width: ${({ bar }) => (bar ? "160" : "38")}px;
-  padding: 0 17px;
-  &:hover {
-    background: #e33aa9;
-  }
-  p {
-    cursor: pointer;
-    margin: 0%;
-    pointer-events: none;
-  }
-  img {
-    width: 22px;
-    & + * {
-      margin-left: 12px;
-    }
-  }
-  &.sub-option-link {
-    display: flex;
-    justify-content: flex-start;
-    text-decoration: none;
-    position: relative;
-    font-size: 13px;
-    border-left: 1px solid #f0eef2;
-    border-radius: 0;
-    color: #f0eef2;
-    padding-top: 14px;
-    height: 25px;
-    margin: 0;
-    padding-left: 12px;
-    &::before {
-      border-left: 1px solid #e33aa9;
-      width: 10px;
-      content: "";
-      border-radius: 50%;
-      height: 10px;
-      background-color: white;
-      position: absolute;
-      bottom: 0;
-      left: ${({ bar }) => (bar ? -4 : -16)}%;
-    }
-    &.active {
-      background: none;
-      &::before {
-        background-color: #e33aa9;
-      }
-    }
-    &:hover {
-      background: none;
-    }
-  }
-`;
-
-export const ContainerPrincipal = styled.div`
-  width: 100%;
-  display: flex;
-  height: 100vh;
-  justify-content: space-between;
-`;
-
-export const GlobalStyle = createGlobalStyle`
-@font-face {
-  font-family: 'Avenir Next';
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),
-    url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');
-}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, figure, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  background: transparent;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-:focus {
-  outline: 0;
-}
-ins {
-  text-decoration: none;
-}
-del {
-  text-decoration: line-through;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-`;

package/src/components/molecules/CustomSelect/CustomSelect.stories.js

@@ -0,0 +1,27 @@
+import { CustomSelect } from "./index";
+
+export default {
+  title: "Components/molecules/CustomSelect",
+  component: CustomSelect,
+};
+
+const Template = (args) => <CustomSelect {...args} />;
+export const CustomSelectDefault = Template.bind({});
+CustomSelectDefault.args = {
+  selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [
+    {
+      id: 1,
+      value: "Decoración",
+      subOptions: [
+        { id: 1, value: "Espejos" },
+        { id: 2, value: "Persianas" },
+      ],
+    },
+    { id: 2, value: "Eléctrico" },
+    { id: 3, value: "Ferretería" },
+    { id: 4, value: "Herramientas" },
+    { id: 5, value: "Iluminación" },
+  ],
+};

package/src/components/molecules/CustomSelect/SelectItem.js

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const SelecItem = ({
+  option,
+  customSelectId,
+  setParameterArray,
+  activeFilters,
+  setActiveFilters,
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const [chkGlobal, setChkGlobal] = useState(false);
+  return (
+    <div className="option-container" key={customSelectId + option.id}>
+      <div className="main-item">
+        <CheckBox
+          id={"main-item-" + option.id}
+          label={option.name}
+          onChange={(e) => {
+            const subOptions = option.subOptions;
+            const filtersCopy = { ...activeFilters };
+            if (subOptions) {
+              setChkGlobal(e.target.checked);
+              if (e.target.checked) {
+                subOptions.forEach((element) => {
+                  if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
+                  filtersCopy[option.name][element.name] = 1;
+                });
+                setParameterArray((current) => [
+                  ...current,
+                  ...subOptions.map((element) => element.id),
+                ]);
+              } else {
+                setParameterArray((current) =>
+                  current.filter(
+                    (item) => !subOptions.map((opt) => opt.id).includes(item)
+                  )
+                );
+                delete filtersCopy[option.name];
+              }
+            } else {
+              if (e.target.checked) {
+                filtersCopy[option.name] = 1;
+                setParameterArray((current) => [...current, option.id]);
+              } else {
+                delete filtersCopy[option.name];
+                setParameterArray((current) =>
+                  current.filter((item) => option.id !== item)
+                );
+              }
+            }
+            setActiveFilters(filtersCopy);
+          }}
+          defaultChecked={activeFilters[option.name]}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-menu">
+          {option?.subOptions?.map((sub) => (
+            <div
+              className="sub-filter"
+              key={customSelectId + "-" + option.id + "-" + sub.id}
+            >
+              <CheckBox
+                id={"sub-item-" + sub.id}
+                label={sub.name}
+                defaultChecked={
+                  activeFilters[option.name] &&
+                  activeFilters[option.name][sub.name]
+                }
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setParameterArray((current) =>
+                      [...current, sub.id].sort((a, b) => a - b)
+                    );
+                  } else {
+                    setParameterArray((current) =>
+                      current.filter((item) => sub.id !== item)
+                    );
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/molecules/CustomSelect/index.js

@@ -0,0 +1,134 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { SelecItem } from "./SelectItem";
+import { Calendar } from "../../organisms/Calendar";
+
+export const CustomSelect = ({
+  options,
+  showSearchBar,
+  placeHolder = "Buscar departamento",
+  selectLabel = "",
+  customSelectId = "defaultSelectId",
+  defaultOption,
+  setParameterArray,
+}) => {
+  const [filters, setFilters] = useState(options || []);
+  const [showList, setShowList] = useCloseModal(customSelectId);
+  const [text, setText] = useState("");
+  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [activeFilters, setActiveFilters] = useState({});
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const diff = today.getDate() - today.getDay();
+    const start = new Date(today.setDate(diff));
+    const end = new Date();
+    setStartDate(start);
+    setEndDate(end);
+  }, []);
+
+  const onChangeDatePicker = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end)
+      setParameterArray((current) => {
+        return {
+          ...current,
+          startDate: `${start.getFullYear()}-${
+            start.getMonth() + 1
+          }-${start.getDate()}`,
+          endDate: `${end.getFullYear()}-${
+            end.getMonth() + 1
+          }-${end.getDate()}`,
+        };
+      });
+  };
+
+  useEffect(() => {
+    let filteredArray = options?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+    setFilters(filteredArray);
+  }, [text]);
+
+  return (
+    <Container id={customSelectId}>
+      <div className="button-list" onClick={() => setShowList(true)}>
+        <p>{selectLabel}</p>
+        <div className="arrow-item">&#9664;</div>
+      </div>
+      {showList && (
+        <div className="select-container">
+          {showSearchBar && (
+            <div className="search-bar-filter">
+              <img src={searchIcon} alt="search icon" />
+              <input
+                type="text"
+                placeholder={placeHolder}
+                value={text}
+                onChange={onChange}
+              />
+            </div>
+          )}
+          {defaultOption && (
+            <div
+              className="default-option"
+              onClick={() => {
+                setParameterArray([]);
+                setActiveFilters({});
+                setShowList(false);
+              }}
+            >
+              <p>{defaultOption}</p>
+            </div>
+          )}
+          <div className="filters-container">
+            {filters?.map((option) =>
+              customSelectId === "dates-select" ? (
+                <div
+                  className="dates-select-item"
+                  key={customSelectId + option.id}
+                  onClick={() => {
+                    option.function
+                      ? option.function(setShowDatePicker)
+                      : setShowDatePicker(true);
+                  }}
+                >
+                  <p>{option.name}</p>
+                </div>
+              ) : (
+                <SelecItem
+                  key={customSelectId + option.id}
+                  option={option}
+                  customSelectId={customSelectId}
+                  setParameterArray={setParameterArray}
+                  activeFilters={activeFilters}
+                  setActiveFilters={setActiveFilters}
+                />
+              )
+            )}
+          </div>
+        </div>
+      )}
+      {showDatePicker && (
+        <Calendar
+          onChange={onChangeDatePicker}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
+    </Container>
+  );
+};

package/src/components/molecules/CustomSelect/styles.js

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  position: relative;
+
+  .button-list {
+    font-family: ${FontFamily.Raleway};
+    font-size: 13px;
+    display: flex;
+    padding: 10px 15px;
+    justify-content: space-between;
+    border-radius: 50px;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    cursor: pointer;
+
+    .arrow-item {
+      transform: rotate(-90deg);
+      cursor: pointer;
+      font-size: 10px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .select-container {
+    box-shadow: 0px 2px 4px #00000040;
+    border-radius: 5px;
+    background-color: #fff;
+    padding-bottom: 10px;
+    position: absolute;
+    z-index: 10;
+    .search-bar-filter {
+      display: flex;
+      align-items: center;
+      border: 1px solid #f0f0f0;
+      padding-left: 10px;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+
+      input {
+        background-color: transparent;
+        padding: 10px 10px;
+        outline: none;
+        border: none;
+      }
+    }
+    .default-option {
+      padding-top: 5px;
+      cursor: pointer;
+      padding: 5px 10px;
+      color: #817393;
+      font-family: Avenir Next;
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 21px;
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+    .filters-container {
+      overflow: auto;
+      max-height: 500px;
+      .option-container,
+      .default-option {
+        cursor: pointer;
+        padding: 5px 10px;
+        .main-item {
+          display: flex;
+          justify-content: space-between;
+
+          .arrow-item {
+            transform: rotate(-90deg);
+            cursor: pointer;
+            font-size: 10px;
+          }
+        }
+        .sub-menu {
+          padding-left: 20px;
+          .sub-filter {
+            & + * {
+              margin-top: 10px;
+            }
+          }
+        }
+
+        &:hover {
+          background-color: #f0f0f0;
+        }
+        label {
+          white-space: nowrap;
+        }
+      }
+
+      .dates-select-item {
+        cursor: pointer;
+        padding: 5px 10px;
+        color: #817393;
+        font-family: Avenir Next;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 21px;
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+`;

package/src/components/organisms/Calendar/styles.js

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  z-index: 20;
+  position: absolute;
   @charset "UTF-8";
   .react-datepicker__year-read-view--down-arrow,
   .react-datepicker__month-read-view--down-arrow,

package/src/components/organisms/DashboardMetric/index.js

@@ -1,64 +1,18 @@
 import { Container } from "./styles";
-import { MetricSelect } from "../../atoms/MetricSelect";
 import { Graphic } from "../../atoms/Graphic";
-import { Calendar } from "../Calendar";
-import { useEffect, useState } from "react";
 
 export const DashboardMetric = ({
   label,
   description,
-  retailerSelected,
   dataObject = { AA: 89 },
   indexAxis = "y",
   type = "bar",
   scale = "x",
   displayScale = false,
-  retailers = [],
-  setQueryObject,
-  queryObject,
+  displayLegend = false,
 }) => {
-  const onChangeRetailer = (e) => {
-    setQueryObject({ ...queryObject, retailerId: e.target.value });
-  };
-
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-
-  useEffect(() => {
-    const today = new Date();
-    const diff = today.getDate() - today.getDay();
-    const start = new Date(today.setDate(diff));
-    const end = new Date();
-    setStartDate(start);
-    setEndDate(end);
-  }, []);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-    if (end)
-      setQueryObject({
-        ...queryObject,
-        startDate: `${start.getFullYear()}-${
-          start.getMonth() + 1
-        }-${start.getDate()}`,
-        endDate: `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`,
-      });
-  };
-
   const labels = Object.keys(dataObject);
   const values = Object.values(dataObject);
-  const retailersArray = Object.values(retailers).sort((a, b) => {
-    if (a.name > b.name) {
-      return 1;
-    }
-    if (a.name < b.name) {
-      return -1;
-    }
-    // a must be equal to b
-    return 0;
-  });
   const colorsArray = values.map(
     () => `#${Math.floor(Math.random() * 16777215).toString(16)}`
   );
@@ -86,7 +40,7 @@ export const DashboardMetric = ({
     plugins: {
       legend: {
         position: "right",
-        display: false,
+        display: displayLegend,
       },
       title: {
         display: false,
@@ -107,16 +61,7 @@ export const DashboardMetric = ({
         <p>{label}</p>
         <p>{description}</p>
       </div>
-      <div className="select-container">
-        <Calendar onChange={onChange} startDate={startDate} endDate={endDate} />
-        <MetricSelect
-          className={"select"}
-          label={"Cadena comercial"}
-          optionSelected={retailerSelected}
-          options={retailersArray}
-          onChange={onChangeRetailer}
-        />
-      </div>
+      <div className="select-container"></div>
       <div className="graphic-cotainer">
         <Graphic data={data} options={options} type={type} />
       </div>