contentoh-components-library 21.4.57 → 21.4.59

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

@@ -1,45 +0,0 @@
-import { Container } from "./styles";
-import { ColumnItem } from "./ColumnItem";
-import { CheckBox } from "../../atoms/CheckBox";
-
-export const RowItem = ({
-  productsArray = [],
-  chkOnChange,
-  onGridClick,
-  chkChecked,
-}) => {
-  return (
-    <Container>
-      {productsArray.map(({ cols, product, id }, i) => (
-        <div
-          className="row-container"
-          key={id}
-          onClick={(e) => onGridClick && onGridClick(e, product, i)}
-        >
-          <div
-            className="chk-container"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <CheckBox
-              id={"chk-" + id}
-              name={"chk-" + id}
-              className="chk-item"
-              onChange={(e) => chkOnChange && chkOnChange(e, product)}
-              defaultChecked={chkChecked && chkChecked(product)}
-            />
-          </div>
-          {cols.map((col, i) => (
-            <ColumnItem
-              key={id + "-" + i}
-              element={col.name}
-              flex={col.flex}
-              minWidth={col.minWidth}
-            />
-          ))}
-        </div>
-      ))}
-    </Container>
-  );
-};

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

@@ -1,40 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  height: calc(100% - 36px);
-  overflow: auto;
-  min-width: fit-content;
-
-  .row-container {
-    display: flex;
-    cursor: pointer;
-    &:hover {
-      background-color: #fafafa;
-    }
-
-    .chk-container {
-      width: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .chk-item {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-`;
-
-export const Column = styled.div`
-  flex: ${({ flex }) => (flex ? flex : 1)};
-  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
-  text-align: center;
-  color: #262626;
-  font-family: ${FontFamily.Lato};
-  font-size: 12px;
-  line-height: 16px;
-  padding: 10px 5px;
-  display: flex;
-  justify-content: center;
-`;

package/src/components/organisms/Box/Box.stories.js

@@ -1,17 +0,0 @@
-import { Box } from "./index";
-import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
-import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
-import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
-
-export default {
-  title: "Components/organisms/Box",
-  component: Box,
-};
-
-const Template = (args) => <Box {...args} />;
-
-export const BoxDefault = Template.bind({});
-BoxDefault.args = {
-  panelImg:[LoginImage, Login2, Login3],
-  panelText:"Elige la plataforma que conecta proovedores y retailers",
-};

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

@@ -1,103 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Container } from "./styles";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { BoxOnboarding } from "../BoxOnboarding";
-import { BoxButtons } from "../../molecules/BoxButtons";
-
-export const Box = ({ onChange, dataInputs, inputGroup }) => {
-  const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
-  const [boxOnboardingList, setBoxOnboardingList] = useState([
-    {
-      showAdd: true,
-      value: {},
-    },
-  ]);
-
-  useEffect(() => {
-    const temp = {};
-    let maxBoxId = 0;
-    inputGroup.inputs.forEach((attrId) => {
-      if (!dataInputs[attrId].box) return;
-      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
-        if (boxId > maxBoxId) maxBoxId = boxId;
-        if (!temp[boxId]) temp[boxId] = {};
-        temp[boxId][attrId] = value;
-      });
-    });
-    const tempList = Object.values(temp);
-    if (tempList.length > 0) {
-      setBoxOnboardingList(
-        tempList.map((value, index) =>
-          index === tempList.length - 1 ? { showAdd: true, value } : { value }
-        )
-      );
-    }
-  }, []);
-
-  const handleAddBoxOnboarding = () => {
-    const newBoxOnboarding = {
-      showAdd: false,
-      value: {},
-    };
-
-    setBoxOnboardingList([...boxOnboardingList, newBoxOnboarding]);
-  };
-
-  const handleDeleteBoxOnboarding = (index) => {
-    if (index !== 0) {
-      const updatedBoxOnboardingList = [...boxOnboardingList];
-      updatedBoxOnboardingList.splice(index, 1);
-      setBoxOnboardingList(updatedBoxOnboardingList);
-    } else {
-      setIsDeleteDisabled(true);
-    }
-  };
-  
-  useEffect(() => {
-    onChange && onChange(boxOnboardingList);
-  }, [boxOnboardingList]);
-
-  return (
-    <Container
-      fontFamily={FontFamily.Raleway}
-      color={GlobalColors.original_magenta}
-    >
-      <h1 fontFamily={FontFamily.Raleway}>{inputGroup.dataGroup}</h1>
-      <div className="container-box">
-        {boxOnboardingList.map((boxOnboarding, index) => (
-          <>
-
-            <div className="container-buttons">
-              <BoxOnboarding
-                key={index}
-                index={index}
-                showAdd={boxOnboarding.showAdd}
-                data={boxOnboarding.value}
-                dataInputs={dataInputs}
-                inputs={inputGroup.inputs}
-                onChange={(e) => {
-                  setBoxOnboardingList((prev) => {
-                    return prev.map((box, i) => {
-                      if (i != index) {
-                        return box;
-                      }
-                      return { ...box, value: e };
-                    });
-                  });
-                }}
-              />
-              <BoxButtons
-                key={index}
-                index={index}
-                showAdd={boxOnboarding.showAdd}
-                onAdd={handleAddBoxOnboarding}
-                onDelete={() => handleDeleteBoxOnboarding(index)}
-                isDeleteDisabled={isDeleteDisabled}
-              />
-            </div>
-          </>
-        ))}
-      </div>
-    </Container>
-  );
-};

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

@@ -1,48 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  font-family: ${FontFamily.Roboto}, sans-serif;
-  font-weight: 400;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  font-size: var(--size);
-  line-height: 1.2;
-  height: auto;
-  border-radius: 10px;
-  background: white;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  text-align: center;
-  .container-buttons {
-    display: flex;
-    gap:10px;
-  }
-  .container-box{
-    display: flex;
-    flex-direction:column-reverse;
-    gap:10px;
-  }
-  #contenedor-caja {
-    display: flex;
-    justify-content: space-between;
-    color: #262626;
-    white-space: nowrap;
-    gap: 10px;
-  }
-  #atr-alto {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 6px;
-  }
-  h1 {
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 17px;
-    line-height: 1.2;
-    font-weight: 500;
-    text-align: left;
-  }
-`;

package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js

@@ -1,17 +0,0 @@
-import { BoxOnboarding } from "./index";
-import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
-import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
-import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
-
-export default {
-  title: "Components/organisms/BoxOnboarding",
-  component: BoxOnboarding,
-};
-
-const Template = (args) => <BoxOnboarding {...args} />;
-
-export const BoxOnboardingDefault = Template.bind({});
-BoxOnboardingDefault.args = {
-  panelImg:[LoginImage, Login2, Login3],
-  panelText:"Elige la plataforma que conecta proovedores y retailers",
-};

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

@@ -1,60 +0,0 @@
-import { Container } from "./styles";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { BoxAttribute } from "../../molecules/BoxAttribute";
-import { useState, useEffect, memo } from "react";
-import { isEqual } from "lodash";
-
-export const BoxOnboarding = memo(
-  ({
-    panelColor,
-    index,
-    onChange,
-    data,
-    dataInputs,
-    inputs,
-  }) => {
-    const [atributos, setAtributos] = useState({});
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-      onChange && onChange(atributos);
-    }, [atributos]);
-    
-
-    useEffect(() => {
-      if (isLoading && Object.keys(data).length > 0) {
-        setAtributos(data);
-        setIsLoading(false);
-      }
-    }, [data]);
-
-    return (
-      <Container
-        panelColor={panelColor}
-        fontFamily={FontFamily.Raleway}
-        color={GlobalColors.original_magenta}
-      >
-        <div id="contenedor-caja">
-          <p fontFamily={FontFamily.Raleway}>Caja {index + 1}</p>
-          {inputs.map((attrId) => {
-            return (
-              <BoxAttribute
-                id={attrId}
-                key={attrId}
-                borderType="rectangle"
-                className="caja"
-                text={dataInputs[attrId]?.name}
-                required={dataInputs[attrId]?.required}
-                description={dataInputs[attrId]?.description}
-                atributos={atributos}
-                setAtributos={setAtributos}
-              />
-            );
-          })}
-          
-        </div>
-      </Container>
-    );
-  },
-  isEqual
-);

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

@@ -1,44 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  font-family: ${FontFamily.Roboto}, sans-serif;
-  font-weight: 400;
-  font-size: var(--size);
-  line-height: 1.2;
-  background: white;
-  position: relative;
-  overflow: hidden;
-  width: 80%;
-  height: 100%;
-  text-align: center;
-  #contenedor-caja {
-    display: flex;
-    justify-content: space-between;
-    color: #262626;
-  }
-  #atr-alto {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  p {
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 12px;
-    line-height: 1.2;
-    font-weight: 600;
-    align-self: center;
-  }
-  }
-  .icon-red {
-    color: #B64545;
-    height:18px;
-  }
-  .icon-gray {
-    color: #707070;
-  }
-  .icon-gray-l {
-    color: #707070;
-    height:18px;
-  }
-`