contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,133 +1,133 @@
-import styled from "styled-components";
-
-const defaultTemplateColumns = (totalColumns) =>
-  `minmax(100px, 1fr) `.repeat(totalColumns);
-
-export const Container = styled.div`
-  position: absolute;
-  overflow: hidden; /* Clips any scrollbars that appear */
-  font-family: Avenir Next;
-  font-size: 13px;
-  width: 90%;
-
-  .reset-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    cursor: pointer;
-    padding: 3px;
-    border: 0;
-    background: #f5f5f5;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    margin: 0;
-    z-index: 10;
-  }
-
-  .table-wrapper {
-    border-radius: 6px;
-    background: #fff;
-  }
-
-  table {
-    width: 100%;
-    height: calc(100vh - 250px);
-    overflow: auto; /* Allow scrolling within the table */
-    display: grid;
-    grid-template-columns: ${(props) =>
-      props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
-    grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
-  }
-
-  table th {
-    font-size: 15px;
-  }
-
-  table th,
-  table td {
-    text-align: left;
-    padding: 5px;
-  }
-
-  table th span,
-  table td span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;
-    border-right: 1px solid #ccc;
-    text-align: center;
-    height: 100%;
-  }
-
-  table th:last-child span,
-  table td:last-child span {
-    border-right: 0px;
-  }
-
-  table tr td {
-    border-bottom: 1px solid #ccc;
-  }
-
-  table tr th {
-    border-bottom: 1px solid #ccc;
-  }
-
-  table thead,
-  table tbody,
-  table tr {
-    display: contents;
-    background: red;
-  }
-
-  table thead {
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    background-color: #fff;
-    line-height: 40px;
-    z-index: 8;
-  }
-
-  td {
-    line-height: 40px;
-    height: 50px;
-  }
-
-  .resize-handle {
-    display: block;
-    position: absolute;
-    cursor: col-resize;
-    width: 8px;
-    right: 0;
-    top: 0;
-    z-index: 1;
-    border-right: 1px solid transparent;
-  }
-
-  .resize-handle:hover {
-    border-color: #ccc;
-  }
-
-  .resize-handle.active {
-    border-color: #517ea5;
-  }
-
-  .resizeable-table {
-    width: 100%;
-  }
-
-  .noOverflow {
-    overflow: inherit;
-    span {
-      overflow: inherit;
-    }
-  }
-`;
+import styled from "styled-components";
+
+const defaultTemplateColumns = (totalColumns) =>
+  `minmax(100px, 1fr) `.repeat(totalColumns);
+
+export const Container = styled.div`
+  position: absolute;
+  overflow: hidden; /* Clips any scrollbars that appear */
+  font-family: Avenir Next;
+  font-size: 13px;
+  width: 90%;
+
+  .reset-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 3px;
+    border: 0;
+    background: #f5f5f5;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    margin: 0;
+    z-index: 10;
+  }
+
+  .table-wrapper {
+    border-radius: 6px;
+    background: #fff;
+  }
+
+  table {
+    width: 100%;
+    height: calc(100vh - 250px);
+    overflow: auto; /* Allow scrolling within the table */
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
+    grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
+  }
+
+  table th {
+    font-size: 15px;
+  }
+
+  table th,
+  table td {
+    text-align: left;
+    padding: 5px;
+  }
+
+  table th span,
+  table td span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    border-right: 1px solid #ccc;
+    text-align: center;
+    height: 100%;
+  }
+
+  table th:last-child span,
+  table td:last-child span {
+    border-right: 0px;
+  }
+
+  table tr td {
+    border-bottom: 1px solid #ccc;
+  }
+
+  table tr th {
+    border-bottom: 1px solid #ccc;
+  }
+
+  table thead,
+  table tbody,
+  table tr {
+    display: contents;
+    background: red;
+  }
+
+  table thead {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    line-height: 40px;
+    z-index: 8;
+  }
+
+  td {
+    line-height: 40px;
+    height: 50px;
+  }
+
+  .resize-handle {
+    display: block;
+    position: absolute;
+    cursor: col-resize;
+    width: 8px;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    border-right: 1px solid transparent;
+  }
+
+  .resize-handle:hover {
+    border-color: #ccc;
+  }
+
+  .resize-handle.active {
+    border-color: #517ea5;
+  }
+
+  .resizeable-table {
+    width: 100%;
+  }
+
+  .noOverflow {
+    overflow: inherit;
+    span {
+      overflow: inherit;
+    }
+  }
+`;

package/src/components/organisms/TableResizable/utils.js

@@ -1,46 +1,46 @@
-export const data = [
-  {
-    key: 1,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 2,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 3,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 4,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-];
+export const data = [
+  {
+    key: 1,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 2,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 3,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 4,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+];

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

@@ -1,15 +1,15 @@
-import { VersionSelector } from "./index";
-
-export default {
-  title: "Components/organisms/VersionSelector",
-  component: VersionSelector,
-};
-
-const Template = (args) => <VersionSelector {...args} />;
-
-export const VersionSelectorDefault = Template.bind({});
-VersionSelectorDefault.args = {
-  articleId: 35707,
-  companyName: "COMPANY DEV",
-  currentVersion: 7,
-};
+import { VersionSelector } from "./index";
+
+export default {
+  title: "Components/organisms/VersionSelector",
+  component: VersionSelector,
+};
+
+const Template = (args) => <VersionSelector {...args} />;
+
+export const VersionSelectorDefault = Template.bind({});
+VersionSelectorDefault.args = {
+  articleId: 35707,
+  companyName: "COMPANY DEV",
+  currentVersion: 7,
+};

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

@@ -1,106 +1,106 @@
-import { Container } from "./styles";
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Button } from "../../atoms/GeneralButton";
-import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-import { GlobalColors } from "../../../../dist/global-files/variables";
-import { FontFamily } from "../../../global-files/variables";
-import { VersionItem } from "../../molecules/VersionItem";
-import { CreateVersion } from "../../organisms/CreateVersion";
-import { useCloseModal } from "../../../global-files/customHooks";
-
-export const VersionSelector = ({
-  modalId,
-  articleId,
-  setVersion,
-  companyName,
-  currentVersion,
-  setShowVersionSelector,
-  jwt,
-}) => {
-  const [versions, setVersions] = useState([]);
-  const [showCreateVersion, setShowCreateVersion] =
-    useCloseModal("create-version");
-  const [reload, setReload] = useState(false);
-
-  const loadProductVersions = async (articleId) => {
-    try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-        {
-          headers: {
-            Authorization: jwt,
-          },
-        }
-      );
-
-      const versionList = JSON.parse(response.data.body).data;
-      setVersions(versionList);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    const ac = new AbortController();
-    loadProductVersions(articleId);
-
-    return () => {
-      setVersions([]);
-      setShowCreateVersion(false);
-      return () => ac.abort(); // Abort both fetches on unmount
-    };
-  }, [reload]);
-
-  return (
-    <Container id={modalId}>
-      <div className="versions-header">
-        <ScreenHeader
-          text={"Versión del producto"}
-          headerType={"input-name-header"}
-          color={GlobalColors.white}
-          fontFamily={FontFamily.Lato}
-        />
-        <div className="buttons-container">
-          <Button
-            image={addVersion}
-            buttonType={"circular-button"}
-            onClick={() => setShowCreateVersion(true)}
-            id="add-version"
-          />
-          <Button
-            image={closeIcon}
-            buttonType={"circular-button"}
-            onClick={() => setShowVersionSelector(false)}
-            id="close-button"
-          />
-        </div>
-      </div>
-      <div className="versions-container">
-        {versions?.map((item) => (
-          <VersionItem
-            key={item.version}
-            version={item.version}
-            articleStatus={item.article_status}
-            currentVersion={item.version === currentVersion}
-            productOwner={companyName}
-            setVersion={setVersion}
-            timestamp={item.timestamp}
-          />
-        ))}
-      </div>
-      {showCreateVersion && (
-        <CreateVersion
-          articleId={articleId}
-          version={currentVersion}
-          versionsList={versions}
-          setShowCreateVersion={setShowCreateVersion}
-          realoadVersion={() => setReload(!reload)}
-          jwt={jwt}
-        />
-      )}
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Button } from "../../atoms/GeneralButton";
+import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { GlobalColors } from "../../../../dist/global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+import { VersionItem } from "../../molecules/VersionItem";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
+
+export const VersionSelector = ({
+  modalId,
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowVersionSelector,
+  jwt,
+}) => {
+  const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
+
+  const loadProductVersions = async (articleId) => {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+        {
+          headers: {
+            Authorization: jwt,
+          },
+        }
+      );
+
+      const versionList = JSON.parse(response.data.body).data;
+      setVersions(versionList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    const ac = new AbortController();
+    loadProductVersions(articleId);
+
+    return () => {
+      setVersions([]);
+      setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
+    };
+  }, [reload]);
+
+  return (
+    <Container id={modalId}>
+      <div className="versions-header">
+        <ScreenHeader
+          text={"Versión del producto"}
+          headerType={"input-name-header"}
+          color={GlobalColors.white}
+          fontFamily={FontFamily.Lato}
+        />
+        <div className="buttons-container">
+          <Button
+            image={addVersion}
+            buttonType={"circular-button"}
+            onClick={() => setShowCreateVersion(true)}
+            id="add-version"
+          />
+          <Button
+            image={closeIcon}
+            buttonType={"circular-button"}
+            onClick={() => setShowVersionSelector(false)}
+            id="close-button"
+          />
+        </div>
+      </div>
+      <div className="versions-container">
+        {versions?.map((item) => (
+          <VersionItem
+            key={item.version}
+            version={item.version}
+            articleStatus={item.article_status}
+            currentVersion={item.version === currentVersion}
+            productOwner={companyName}
+            setVersion={setVersion}
+            timestamp={item.timestamp}
+          />
+        ))}
+      </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -1,29 +1,29 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 300px;
-  height: 100%;
-  background-color: ${GlobalColors.deep_gray};
-  padding: 15px;
-  overflow: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 500;
-
-  .versions-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .buttons-container {
-      display: flex;
-      align-items: center;
-
-      button + * {
-        margin-left: 10px;
-      }
-    }
-  }
-`;
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 300px;
+  height: 100%;
+  background-color: ${GlobalColors.deep_gray};
+  padding: 15px;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 500;
+
+  .versions-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+
+      button + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;