techsbcn-storybook 2.9.0 → 2.10.0

package/dist/components/fields/FileUploadComponent/FileUploadComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface FileUploadData {
+    file: File;
+    base64Content: string;
+    note: string | null;
+}
+export interface FileUploadComponentProps {
+    labels: {
+        dropzone: string;
+        noteLabel: string;
+        notePlaceholder: string;
+        save: string;
+        success: string;
+    };
+    onUpload: (data: FileUploadData) => Promise<boolean>;
+}
+export declare const FileUploadComponent: React.FC<FileUploadComponentProps>;

package/dist/helpers/AuthHelper.d.ts

@@ -6,3 +6,4 @@ export declare const getSession: () => Session | null;
 export declare const getJwtToken: () => string | null;
 export declare const saveSession: (jwt: string) => void;
 export declare const clearSession: () => void;
+export declare const logout: (logoutRedirect: string) => void;

package/dist/helpers/FileDownloader.d.ts

@@ -3,3 +3,4 @@ export declare const redirectDownload: (url: any, fileName: string) => void;
 export declare const getImageByBlob: (binaryString: any) => string;
 export declare const getImageByBase64: (content: string) => string;
 export declare const toBase64: (file: Blob) => Promise<string>;
+export declare const readFileAsBase64: (file: File) => Promise<string>;

package/dist/index.d.ts

@@ -27,5 +27,6 @@ export * from './components/ui/Spinner/Spinner';
 export * from './components/fields/DatePickerComponent/DatePickerComponent';
 export * from './components/wrappers/CardComponent/CardComponent';
 export * from './components/notifications/SnackbarComponent';
+export * from './components/fields/FileUploadComponent/FileUploadComponent';
 export * from './helpers/index';
 export * from './interfaces/index';

package/dist/index.js

@@ -5,13 +5,13 @@ var material = require('@mui/material');
 var iconsMaterial = require('@mui/icons-material');
 var styles = require('@mui/material/styles');
 var lodash = require('lodash');
+var reactRouter = require('react-router');
 var CloseIcon = require('@mui/icons-material/Close');
 var notistack = require('notistack');
 var dayjs = require('dayjs');
 var localizedFormat = require('dayjs/plugin/localizedFormat');
 var timezone = require('dayjs/plugin/timezone');
 var utc = require('dayjs/plugin/utc');
-var reactRouter = require('react-router');
 var MenuIcon = require('@mui/icons-material/Menu');
 var Select = require('react-select');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
@@ -21,6 +21,8 @@ var yup = require('@hookform/resolvers/yup');
 var lab = require('@mui/lab');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -583,8 +585,7 @@ var TextFieldComponent = ({
     }
   ));
 };
-
-// src/helpers/AuthHelper.tsx
+var navigate = reactRouter.useNavigate();
 var AUTH_COOKIE_NAME = "auth_token";
 var NAME_IDENTIFIER_CLAIM = "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier";
 var ROLE_CLAIM = "http://schemas.microsoft.com/ws/2008/06/identity/claims/role";
@@ -629,6 +630,10 @@ var clearSession = () => {
   if (typeof document === "undefined") return;
   document.cookie = `${AUTH_COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax`;
 };
+var logout = (logoutRedirect) => {
+  clearSession();
+  navigate(logoutRedirect, { replace: true });
+};
 
 // src/helpers/CheckPermission.tsx
 var checkPermission = (persmisionAvailable, userRoles) => {
@@ -690,6 +695,12 @@ var toBase64 = (file) => {
     reader.onerror = (error) => reject(error);
   });
 };
+var readFileAsBase64 = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(String(reader.result).split(",").pop() ?? "");
+  reader.onerror = () => reject(reader.error);
+  reader.readAsDataURL(file);
+});
 
 // src/interfaces/search/SearchFilters.tsx
 var SearchBaseDefaults = {
@@ -2857,6 +2868,58 @@ var SnackbarComponent = ({
   },
   /* @__PURE__ */ React10__default.default.createElement(material.Alert, { severity, variant: "filled", onClose, action, sx: { width: "100%" } }, message)
 );
+var FileUploadComponent = ({ labels, onUpload }) => {
+  const [file, setFile] = React10.useState(null);
+  const [note, setNote] = React10.useState("");
+  const [loading, setLoading] = React10.useState(false);
+  const save = async () => {
+    if (!file) return;
+    setLoading(true);
+    try {
+      const base64Content = await readFileAsBase64(file);
+      if (!await onUpload({ file, base64Content, note: note.trim() || null })) return;
+      addNotification({ message: labels.success, type: "success" });
+      setFile(null);
+      setNote("");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ React10__default.default.createElement(material.Card, { variant: "outlined" }, /* @__PURE__ */ React10__default.default.createElement(material.CardContent, null, /* @__PURE__ */ React10__default.default.createElement(
+    material.Box,
+    {
+      component: "label",
+      onDragOver: (event) => event.preventDefault(),
+      onDrop: (event) => {
+        event.preventDefault();
+        setFile(event.dataTransfer.files[0] ?? null);
+      }
+    },
+    /* @__PURE__ */ React10__default.default.createElement(
+      "input",
+      {
+        type: "file",
+        hidden: true,
+        onChange: (event) => {
+          setFile(event.target.files?.[0] ?? null);
+          event.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ React10__default.default.createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowUpFromBracket, size: "xl" }),
+    /* @__PURE__ */ React10__default.default.createElement(material.Typography, null, file?.name ?? labels.dropzone)
+  ), /* @__PURE__ */ React10__default.default.createElement(material.Typography, { variant: "subtitle2", sx: { mt: 3, mb: 1 } }, labels.noteLabel), /* @__PURE__ */ React10__default.default.createElement(
+    TextFieldComponent,
+    {
+      name: "note",
+      placeholder: labels.notePlaceholder,
+      value: note,
+      onChange: (event) => setNote(event.target.value),
+      multiline: true,
+      rows: 3
+    }
+  ), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ React10__default.default.createElement(ButtonComponent, { label: labels.save, disabled: !file, loading, onClick: save }))));
+};
 
 exports.AppBreadcrumbs = AppBreadcrumbs;
 exports.AppHeader = AppHeader;
@@ -2867,6 +2930,7 @@ exports.ChangePasswordForm = ChangePasswordForm;
 exports.DatePickerComponent = DatePickerComponent;
 exports.DetailPanelComponent = DetailPanelComponent;
 exports.DrawerSidebar = DrawerSidebar;
+exports.FileUploadComponent = FileUploadComponent;
 exports.GroupBy = GroupBy;
 exports.LinearProgressComponent = LinearProgressComponent;
 exports.LoginForm = LoginForm;
@@ -2899,6 +2963,8 @@ exports.getImageByBase64 = getImageByBase64;
 exports.getImageByBlob = getImageByBlob;
 exports.getJwtToken = getJwtToken;
 exports.getSession = getSession;
+exports.logout = logout;
+exports.readFileAsBase64 = readFileAsBase64;
 exports.redirectDownload = redirectDownload;
 exports.removeNotification = removeNotification;
 exports.saveSession = saveSession;