@omniumretail/component-library 1.1.30 → 1.1.31

package/dist/bundle.js.LICENSE.txt

@@ -19,10 +19,24 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+/*! exports provided: default */
+
+/*! no static exports found */
+
+/*! react */
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
 
+/*!******************************!*\
+  !*** ./src/react-webcam.tsx ***!
+  \******************************/
+
+/*!**************************************************************************************!*\
+  !*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
+  \**************************************************************************************/
+
 /**
  * @license React
  * react-jsx-runtime.production.min.js

package/dist/main.css

@@ -27,3 +27,4 @@
 .zsvRMmfrmqBj9iRjtQpO{display:grid;grid-template-columns:300px auto;gap:16px;height:100%}.pb4QP8qfuDG2T6wfXkUC{overflow:auto;background:#ebeced}.gP05vt1R1r67eWteznvr{overflow:auto;background:var(--color-white)}.pb4QP8qfuDG2T6wfXkUC,.gP05vt1R1r67eWteznvr{padding:20px}.btRPAI8631Q2XXYP6nZ7{font-size:var(--font-size-body-4);color:var(--color-blue);margin-bottom:36px;font-weight:var(--font-weight-semibold);text-transform:uppercase}.SbA9dHRh1JSG4xp1Aqie{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-4)}.ZsQJQ__gMgYGYau95r8U{cursor:pointer}.PPF4FGgo1aDsBm13cNj8{padding-left:16px}.PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-semibold)}.PPF4FGgo1aDsBm13cNj8 .QEsWraNRLBQux4k4KNAE .PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-light)}.QEsWraNRLBQux4k4KNAE{display:block}.VQ09MnwMcIzpW1iabb4A{color:var(--color-orange)}.cmcMqdZJEUjlu34ag1Md{margin-bottom:32px;display:flex;justify-content:space-between;align-items:center}.i_U4mKg0Sxl4EvVzgv0L{font-size:var(--font-size-body-4);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}.Tnut0v2OeSU0e7XwrCXI{font-size:var(--font-size-body-3);font-weight:var(--font-weight-light);color:var(--color-black)}.W2hZQFsItdqKPcBu4UrA{display:flex;flex-direction:row;gap:36px;margin-bottom:36px;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);padding-bottom:4px}.tIVLagS5XxibJ4PBCNpp{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.tIVLagS5XxibJ4PBCNpp .RenA6EOwu2sFJGoqYbYz{width:100%;border-bottom:none}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9{width:100%;height:auto}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-input{min-height:140px}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-form-item{margin-bottom:16px}.RenA6EOwu2sFJGoqYbYz{width:calc(100% - 149px);display:flex;align-items:center}.N0_FbFF8bLYtEcr8_2B9{width:130px;min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;padding-right:15px}.GaBbmrXh2G03hz6ha5vB{display:none}.QYrBVtDmfSFNxJFztXVl{min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;gap:34px}.V_qOYQwuQ9mXa8aniYgl{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium)}.pvSzNydRHp3dkh3WrOeA{font-weight:var(--font-weight-light);margin-bottom:4px}.Ehgx39o1k8blh7IDJ2mg{padding:6px;font-size:var(--font-size-body-4);font-weight:var(--font-weight-medium);color:var(--color-white);border-radius:5px;display:inline-flex;letter-spacing:3px}.ifR0bkZtK7yVHD6YZ_Zz{background-color:rgba(217,217,217,.5);border-radius:5px;padding:8px 15px;display:flex;flex-direction:row;gap:50px;align-items:center}.NL5HeemkTIg0oPHDXVtO{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium);color:var(--color-black)}.koYqEMOf6wzxWpwvrFkL{display:flex;justify-content:space-between;margin-bottom:12px;margin-left:16px;gap:40px;width:100%}
 .vhUOPe6KeB6afW8Pj3M1{font-size:32px}
 .nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
+.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}

package/dist/types/components/WebCam/WebCam.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<any>;

package/dist/types/components/WebCam/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CameraCaptureProps {
+    isCameraOn: boolean;
+    customClass?: string;
+    setImgSrc: React.Dispatch<React.SetStateAction<string>>;
+}
+export declare const CameraCapture: React.FC<CameraCaptureProps>;
+export {};

package/dist/types/components/index.d.ts

@@ -26,3 +26,4 @@ export * from './Notification';
 export * from './ExportTableData';
 export * from './DropdownButton';
 export * from './ResponsiveTable';
+export * from './WebCam';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -57,6 +57,7 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^4.7.4",
     "react-i18next": "^12.1.4",
+    "react-webcam": "^7.1.1",
     "sass": "^1.56.1",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",

package/src/components/WebCam/WebCam.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, Story } from "@storybook/react";
+import { CameraCapture } from '.';
+import { useState } from "react";
+import { Button } from "antd";
+
+export default {
+    title: 'CameraCapture',
+    component: CameraCapture,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [openCamera, setOpenCamera] = useState(false);
+    const [imgSrc, setImgSrc] = useState("");
+
+    return <>
+        <p>Source: {imgSrc}</p>
+        <Button onClick={() => setOpenCamera(!openCamera)}>Open</Button>
+        <CameraCapture {...args} setImgSrc={setImgSrc} isCameraOn={openCamera}></CameraCapture>
+    </>;
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/WebCam/index.tsx

@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import Webcam from 'react-webcam';
+import { useTranslation } from 'react-i18next';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { Button } from 'antd';
+
+interface CameraCaptureProps {
+  isCameraOn: boolean;
+  customClass?: string;
+  setImgSrc: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const CameraCapture: React.FC<CameraCaptureProps> = ({ isCameraOn, customClass, setImgSrc }) => {
+  const { t } = useTranslation();
+
+  const webcamRef = useRef<Webcam>(null);
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [captured, setCaptured] = useState(false);
+
+  const capture = () => {
+    const imageSrc = webcamRef.current?.getScreenshot();
+    if (imageSrc) {
+      setImageSrc(imageSrc);
+      setCaptured(true);
+    }
+  };
+
+  const retake = () => {
+    setImageSrc(null);
+    setCaptured(false);
+  };
+
+  const confirm = () => {
+    setImgSrc(imageSrc as string);
+    setCaptured(false);
+  };
+
+  const webCamStyle = classNames({ 
+    [`${customClass}`]: customClass,
+}, [styles.webCam]);
+
+  return (
+    <div className={styles.cameraCapture}>
+      <div>
+        {isCameraOn && !captured && (
+          <Webcam
+            audio={false}
+            ref={webcamRef}
+            screenshotFormat="image/jpeg"
+            className={webCamStyle}
+          />
+        )}
+      </div>
+
+      {isCameraOn && !captured && (
+        <Button onClick={capture}>{t('components.webCam.takePhoto')}</Button>
+      )}
+
+      {captured && (
+        <div className={styles.capturedImage}>
+          <img src={imageSrc || ''} alt="Captured" />
+          <div className={styles.buttonGroup}>
+            <CloseOutlined onClick={retake} title={t('components.webCam.takeAgain')!} className={styles.closeButton} />
+            <CheckOutlined onClick={confirm} title={t('components.webCam.confirm')!} className={styles.checkButton} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/WebCam/styles.module.scss

@@ -0,0 +1,37 @@
+.cameraCapture {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.webCam {
+  height: 300px;
+  width: 400px;
+}
+
+.buttonGroup {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 10px 0px 10px;
+  font-size: 20px;
+}
+
+.closeButton {
+  color: #ff4d4f;
+}
+
+.checkButton {
+  color: #52c41a;
+}
+
+.capturedImage {
+  margin-top: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.capturedImage img {
+  width: 100%;
+  height: auto;
+}

package/src/components/index.tsx

@@ -26,3 +26,4 @@ export * from './Notification';
 export * from './ExportTableData';
 export * from './DropdownButton';
 export * from './ResponsiveTable';
+export * from './WebCam';

package/src/locales/en.json

@@ -1,88 +1,94 @@
 {
     "tableHeadings": {
-        "key": "Key",
-        "name": "Name",
-        "mecanographicNumber": "Employee Code",
-        "store": "Store",
-        "role": "Role",
-        "type": "Type",
-        "id": "Id",
-        "action": "Action"
+        "key": "Clave",
+        "name": "Nombre",
+        "mecanographicNumber": "Código de Empleado",
+        "store": "Tienda",
+        "role": "Rol",
+        "type": "Tipo",
+        "id": "ID",
+        "action": "Acción"
     },
     "userInfoColumn": {
-        "Date": "Date",
-        "Store": "Store",
-        "Team": "Team",
+        "Date": "Fecha",
+        "Store": "Tienda",
+        "Team": "Equipo",
         "Supervisor": "Supervisor",
-        "TypeOfContract": "Type Of Contract",
-        "Nationality": "Nationality",
-        "CivilStatus": "Civil Status",
-        "IdentificationDocument": "Identification Document",
-        "NTaxpayer": "Taxpayer Number",
+        "TypeOfContract": "Tipo de Contrato",
+        "Nationality": "Nacionalidad",
+        "CivilStatus": "Estado Civil",
+        "IdentificationDocument": "Documento de Identificación",
+        "NTaxpayer": "Número de Contribuyente",
         "NIB": "NIB",
-        "SocialSecurity": "Social Security",
-        "NChildren": "Number of Children",
-        "Workload": "Workload",
-        "Description": "Description",
-        "Comments": "Comments"
+        "SocialSecurity": "Seguro Social",
+        "NChildren": "Número de Hijos",
+        "Workload": "Carga de Trabajo",
+        "Description": "Descripción",
+        "Comments": "Comentarios"
     },
     "navigation": {
-        "back": "Back",
-        "logout": "Logout",
-        "home": "Home"
+        "back": "Atrás",
+        "logout": "Cerrar Sesión",
+        "home": "Inicio"
     },
     "actions": {
-        "one": "one",
-        "two": "two"
+        "one": "Uno",
+        "two": "Dos"
     },
     "components": {
         "category": {
-            "addQuestion": "Add Question",
-            "placeholderInfo": "Placeholder Info",
-            "errorInfo": "Error Info",
-            "placeholderQuestion": "Question",
-            "errorQuestion": "Error/Missing Question",
-            "placeholderGrade": "Grade",
-            "errorGrade": "Error/Missing Grade",
-            "newCategory": "New Category"
+            "addQuestion": "Agregar Pregunta",
+            "placeholderInfo": "Información de Marcador",
+            "errorInfo": "Error de Información",
+            "placeholderQuestion": "Pregunta",
+            "errorQuestion": "Error/Pregunta Faltante",
+            "placeholderGrade": "Calificación",
+            "errorGrade": "Error/Calificación Faltante",
+            "newCategory": "Nueva Categoría"
         },
         "categorySidBar": {
-            "addCategory": "Add Category",
-            "removeCategory": "Remove Category"
+            "addCategory": "Agregar Categoría",
+            "removeCategory": "Eliminar Categoría"
         },
         "categoryContent": {
-            "message": "Please select a category in the sidebar",
-            "categoryName": "Category Name",
-            "categoryNameError": "Category Name Error/Missing",
-            "weighting": "Weighting",
-            "openAnswer": "Open Answer",
-            "answerOption": "Answer Option",
-            "answers": "Answers"
+            "message": "Por favor, seleccione una categoría en la barra lateral",
+            "categoryName": "Nombre de la Categoría",
+            "categoryNameError": "Error/Nombre de Categoría Faltante",
+            "weighting": "Ponderación",
+            "openAnswer": "Respuesta Abierta",
+            "answerOption": "Opción de Respuesta",
+            "answers": "Respuestas"
         },
         "categoryResponse": {
-            "notApplicable": "Not Applicable",
-            "answer": "Answer"
+            "notApplicable": "No Aplicable",
+            "answer": "Respuesta"
         },
         "categoryReadOnly": {
-            "categories": "Categories",
-            "categoryAverage": "Category Average",
-            "userResponse": "User Response:",
-            "supervisorResponse": "Supervisor Response:"
+            "categories": "Categorías",
+            "categoryAverage": "Promedio de la Categoría",
+            "userResponse": "Respuesta del Usuario:",
+            "supervisorResponse": "Respuesta del Supervisor:"
         },
         "analyticsBar": {
-            "desc": "Descending",
-            "asc": "Ascending"
+            "desc": "Descendente",
+            "asc": "Ascendente"
         },
         "tag": {
-            "search": "Search",
-            "advancedFields": "Advanced Filters"
+            "search": "Buscar",
+            "advancedFields": "Filtros Avanzados",
+            "State": "Estado"
         },
         "table": {
-            "selectAll": "Select All",
-            "deselectAll": "Deselect All"
+            "selectAll": "Seleccionar Todo",
+            "deselectAll": "Deseleccionar Todo"
         },
         "datePickerTag": {
-            "placeholder": "Select Date"
-        }
+            "placeholder": "Seleccionar Fecha"
+        },
+        "webCam": {
+            "takePhoto": "Take Photo",
+            "confirm": "Confirm",
+            "takeAgain": "Take Again"
+        }        
     }
 }

package/src/locales/es.json

@@ -83,6 +83,11 @@
         },
         "datePickerTag": {
             "placeholder": "Selecionar Data"
-        }
+        },
+        "webCam": {
+            "takePhoto": "Tomar Foto",
+            "confirm": "Confirmar",
+            "takeAgain": "Tomar de Nuevo"
+        }        
     }
 }

package/src/locales/pt.json

@@ -32,8 +32,8 @@
         "home": "Início"
     },
     "actions": {
-        "one": "one",
-        "two": "two"
+        "one": "um",
+        "two": "dois"
     },
     "components": {
         "category": {
@@ -84,6 +84,11 @@
         },
         "datePickerTag": {
             "placeholder": "Selecionar Data"
+        },
+        "webCam": {
+            "takePhoto": "Tirar Foto",
+            "confirm": "Confirmar",
+            "takeAgain": "Tirar Novamente"
         }
     }
 }