contentoh-components-library 0.1.1

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

@@ -0,0 +1,28 @@
+import { FullProductNameHeader } from "./index";
+
+export default {
+  title: "Components/organisms/FullProductNameHeader",
+  component: FullProductNameHeader,
+};
+
+const Template = (args) => <FullProductNameHeader {...args} />;
+export const FullProductNameHeaderDefault = Template.bind({});
+
+FullProductNameHeaderDefault.args = {
+  headerData: {
+    name: "Nombre del producto",
+    status: "P",
+    percent: 20,
+    backgroundColor: "in_progress",
+    priority: "low",
+    date: new Date().toLocaleDateString(),
+    features: [
+      { feature: "Prov", value: "Unilever" },
+      { feature: "Vendor", value: "1234567890" },
+      { feature: "SKU", value: "1234567890" },
+      { feature: "UPC", value: "1234567890" },
+      { feature: "Categoría", value: "Desodorantes Caballero y Dama" },
+    ],
+    validation: "null-button",
+  },
+};

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

@@ -0,0 +1,26 @@
+import { Container } from "./styles";
+import { ProductNameHeader } from "../../molecules/ProductNameHeader";
+import { FeaturesBar } from "../../molecules/FeaturesBar";
+import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
+
+export const FullProductNameHeader = ({ headerData }) => {
+  return (
+    <Container>
+      <ProductNameHeader
+        productName={headerData?.name}
+        statusType={headerData?.status}
+        percent={headerData?.percent}
+        backgroundColor={headerData?.backgroundColor}
+        priority={headerData?.priority}
+        date={headerData?.date}
+      />
+      <div className="features-bar-container">
+        <FeaturesBar features={headerData?.features} />
+        <AvatarAndValidation
+          avatarData={headerData?.avatarData}
+          validation={headerData?.validation}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  .features-bar-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & + * {
+    margin-top: 17px;
+  }
+`;

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

@@ -0,0 +1,22 @@
+import { FullTabsMenu } from "./index";
+
+export default {
+  title: "Components/organisms/FullTabsMenu",
+  component: FullTabsMenu,
+};
+
+const Template = (args) => <FullTabsMenu {...args} />;
+
+export const FullTabsMenuDefault = Template.bind({});
+FullTabsMenuDefault.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

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

@@ -0,0 +1,30 @@
+import { Container } from "./styles";
+import { TabsMenu } from "../../molecules/TabsMenu/index";
+import { StatusAsignationInfo } from "../../molecules/StatusAsignationInfo/index";
+import { useState } from "react";
+
+export const FullTabsMenu = ({
+  tabsSections,
+  status,
+  profileImage,
+  setActiveTab,
+  setImageLayout,
+}) => {
+  const [imagesSection, setImagesSection] = useState(false);
+
+  return (
+    <Container>
+      <TabsMenu
+        tabsSections={tabsSections}
+        setImagesSection={setImagesSection}
+        setActiveTab={setActiveTab}
+      />
+      <StatusAsignationInfo
+        status={status}
+        image={profileImage}
+        setImageLayout={setImageLayout}
+        imagesSection={imagesSection}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  & + * {
+    margin-top: 15px;
+  }
+`;

package/src/components/organisms/Fullplan/FullPlan.stories.js

@@ -0,0 +1,23 @@
+import { FullPlan } from "./index";
+
+export default {
+  title: "Components/organisms/FullPlan",
+  component: FullPlan,
+};
+
+const Template = (args) => <FullPlan {...args} />;
+export const FullPlanDefault = Template.bind({});
+
+FullPlanDefault.args = {
+  title: "Elige el número de proveedores",
+  textGeneral:
+    "Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena",
+  containerData: {
+    planSelection: [
+      { number: "300", name: "Proveedores" },
+      { number: "1500", name: "Proveedores" },
+      { number: "+3000", name: "Proveedores" },
+      { number: "Ondemand", name: "agrega proveedores a tu forma" },
+    ],
+  },
+};

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

@@ -0,0 +1,34 @@
+import { Container } from "./styles";
+import { PlanSelection } from "../../molecules/PlanSelection";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors } from "../../../global-files/variables";
+import { Button } from "../../atoms/GeneralButton";
+import { useState } from "react";
+
+export const FullPlan = ({ title, textGeneral, containerData }) => {
+  const [buttonActive, setbuttonActive] = useState(false);
+  return (
+    <Container>
+      <div className="title">
+        <ScreenHeader
+          headerType={"product-name-header"}
+          text={title}
+          color={GlobalColors.original_purpura}
+        />
+      </div>
+      <div className="general-text">
+        <p>{textGeneral}</p>
+      </div>
+      <PlanSelection
+        planSelection={containerData.planSelection}
+        setbuttonActive={setbuttonActive}
+      />
+      <Button
+        buttonType={
+          buttonActive ? "general-default-button" : "general-transparent-button"
+        }
+        label={"Continuar"}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  text-align: center;
+
+  .title {
+    text-align: center;
+    font-feature-settings: "pnum" on, "lnum" on;
+    h2 {
+      max-width: 350px;
+      margin: auto;
+    }
+  }
+  .general-text {
+    text-align: center;
+    font-feature-settings: "pnum" on, "lnum" on;
+    p {
+      color: ${GlobalColors.s4};
+      font-family: ${FontFamily.AvenirNext};
+      font-size: 14px;
+      max-width: 390px;
+      margin: auto;
+    }
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { ImageDataTable } from "./index";
+
+export default {
+  title: "Components/organisms/ImageDataTable",
+  component: ImageDataTable,
+};
+
+const Template = (args) => <ImageDataTable {...args} />;
+
+export const ImageDataTableDefault = Template.bind({});
+ImageDataTableDefault.args = {
+  headerInfo: {
+    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+    name: "Hero.jpg",
+    status: "AA",
+  },
+  imageData: [
+    { feature: "Tipo de imagen", value: "Tipo de imagen" },
+    { feature: "Identificador", value: "F26" },
+    { feature: "Formato", value: "jpg" },
+    { feature: "Resolución", value: "300dpi" },
+    { feature: "Tamaño de imagen", value: "1000x10000" },
+  ],
+};

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

@@ -0,0 +1,19 @@
+import { Container } from "./styles";
+import { TableHeader } from "../../molecules/TableHeader";
+import { TableRow } from "../../molecules/TableRow";
+
+export const ImageDataTable = ({ headerInfo, imageData, activeImage }) => {
+  return (
+    <Container>
+      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
+      {imageData?.map((attribute, index) => (
+        <TableRow
+          key={index}
+          feature={attribute.feature}
+          value={attribute.value}
+          valueType={index < 2}
+        />
+      ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 340px;
+  padding: 10px;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 3px;
+`;

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

@@ -0,0 +1,38 @@
+import { ImagePreviewer } from "./index";
+
+export default {
+  title: "Components/organisms/ImagePreviewer",
+  component: ImagePreviewer,
+};
+
+const Template = (args) => <ImagePreviewer {...args} />;
+
+export const ImagePreviewerDefault = Template.bind({});
+ImagePreviewerDefault.args = {
+  imagesArray: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+    },
+    {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+    },
+    {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+    },
+  ],
+};

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

@@ -0,0 +1,26 @@
+import { Container } from "./styles";
+import { EditionActiveImage } from "../../molecules/EditionActiveImage";
+import { ImageSelector } from "../../molecules/ImageSelector";
+import { useEffect, useState } from "react";
+
+export const ImagePreviewer = ({
+  imagesArray = [],
+  activeImage,
+  setActiveImage,
+}) => {
+  const [imageSelected, setImageSelected] = useState(activeImage);
+
+  useEffect(() => {
+    setActiveImage && setActiveImage(imageSelected);
+  }, [imageSelected]);
+
+  return (
+    <Container>
+      <EditionActiveImage
+        img={imageSelected?.img}
+        altText={imageSelected?.alt}
+      />
+      <ImageSelector images={imagesArray} setActiveImage={setImageSelected} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & + * {
+    margin-top: 10px;
+  }
+`;

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

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+import { GalleryElement } from "../../molecules/GalleryElement";
+
+export const ImagesGroup = ({}) => {
+  return (
+    <Container>
+      <GalleryElement />
+    </Container>
+  );
+};

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

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const Container = styled.div``;

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

@@ -0,0 +1,31 @@
+import { InputGroup } from "./index";
+
+export default {
+  title: "Components/organisms/InputGroup",
+  component: InputGroup,
+  argTypes: {
+    activeSection: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <InputGroup {...args} />;
+
+export const InputGroupDefault = Template.bind({});
+InputGroupDefault.args = {
+  inputGroup: {
+    name: "Información básica del producto",
+    inputs: [
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+      { label: "Item", value: "1234567890", placeholder: "Ingresar valor" },
+    ],
+  },
+};

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

@@ -0,0 +1,31 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { TagAndInput } from "../../molecules/TagAndInput";
+
+export const InputGroup = ({ inputGroup = {}, activeSection }) => {
+  return (
+    <Container
+      className={
+        activeSection === "Ficha técnica"
+          ? "datasheets-layout"
+          : "descriptions-layout"
+      }
+    >
+      <ScreenHeader
+        headerType={"retailer-name-header"}
+        text={inputGroup?.name}
+      />
+      <div className="inputs-container">
+        {inputGroup?.inputs?.map((input, index) => (
+          <TagAndInput
+            key={index}
+            inputType={activeSection === "Ficha técnica" ? "text" : "textarea"}
+            label={input.label}
+            value={input.value}
+            inputPlaceHolder={input.placeholder}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 6px;
+  padding: 10px;
+  width: 100%;
+
+  .retailer-name-header {
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  &.datasheets-layout {
+    padding-right: 0;
+
+    .inputs-container {
+      display: flex;
+      flex-wrap: wrap;
+
+      .input-container {
+        flex: 1 1 20%;
+        margin-right: 10px;
+        min-width: 227px;
+      }
+    }
+  }
+
+  & + * {
+    margin-top: 15px;
+  }
+`;

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

@@ -0,0 +1,87 @@
+import { ProductImageModal } from "./index";
+
+export default {
+  title: "Components/organisms/ProductImageModal",
+  component: ProductImageModal,
+};
+
+const Template = (args) => <ProductImageModal {...args} />;
+
+export const ProductImageModalDefault = Template.bind({});
+ProductImageModalDefault.args = {
+  headerInfo: {},
+  imagesArray: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+      name: "Hero",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+    {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+      name: "Hero2",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+    {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+      name: "Hero3",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+    {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+      name: "Hero4",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+    {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+      name: "Hero5",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+    {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+      name: "Hero6",
+      data: [
+        { feature: "Tamaño de imagen", value: "1000x10000" },
+        { feature: "Formato", value: "jpg" },
+        { feature: "Resolución", value: "300dpi" },
+        { feature: "Tipo de imagen", value: "Tipo de imagen" },
+        { feature: "Identificador", value: "F261" },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,79 @@
+import { Container } from "./styles";
+import { ProductImage } from "../../atoms/ProductImage";
+import { ImageDataTable } from "../ImageDataTable";
+import { ImageSelector } from "../../molecules/ImageSelector";
+import { useState, useEffect } from "react";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { Button } from "../../atoms/GeneralButton";
+
+export const ProductImageModal = ({
+  imagesArray = [],
+  headerInfo,
+  validation,
+}) => {
+  const [activeImage, setActiveImage] = useState(
+    imagesArray.length > 0 && imagesArray[0]
+  );
+  const [buttonType, setButtonType] = useState(
+    validation ? validation : "null-button"
+  );
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+  return (
+    <Container>
+      <div className="modal-container">
+        <div className="modal-image-container">
+          <ProductImage
+            img={activeImage?.img}
+            altText={activeImage?.name}
+            imageType={"expanded-modal-image"}
+          />
+        </div>
+        <div className="modal-data-container">
+          <div className="validation-and-table-container">
+            <div className="validation-panel">
+              <Button
+                buttonType={`circular-button ${buttonType}`}
+                onClick={() => setShowValidationPanel(true)}
+              />
+              <Button buttonType={"close-button"} />
+
+              {showValidationPanel && (
+                <ValidationPanel
+                  id="validation-panel"
+                  setOptionClicked={setButtonType}
+                  setShowValidationPanel={setShowValidationPanel}
+                />
+              )}
+            </div>
+            <ImageDataTable
+              imageData={activeImage.data}
+              headerInfo={headerInfo}
+              activeImage={activeImage}
+            />
+          </div>
+          <ImageSelector
+            images={imagesArray}
+            setActiveImage={setActiveImage}
+            modalSelector={true}
+          />
+        </div>
+      </div>
+    </Container>
+  );
+};