cortex-react-ui 0.1.172 → 0.1.174

package/lib/cjs/types/Scanner/Dialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const Dialog: (props: DialogProps) => JSX.Element;
+export declare type DialogTitleProps = {
+    title?: string;
+};
+export declare type DialogProps = DialogTitleProps & {
+    open: boolean;
+    className?: string;
+    message?: string;
+    confirmation?: boolean;
+    children?: React.ReactNode;
+    onClose?: () => void;
+};

package/lib/cjs/types/Scanner/DialogBody.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare const DialogBody: (props: DialogBodyProps) => JSX.Element;
+export declare type DialogBodyProps = HTMLAttributes<HTMLDivElement>;

package/lib/cjs/types/Scanner/DialogMask.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare const DialogMask: (props: DialogMaskProps) => JSX.Element;
+export declare type DialogMaskProps = HTMLAttributes<HTMLDivElement>;

package/lib/cjs/types/Scanner/ScanConfirmationDialog.d.ts

@@ -0,0 +1,18 @@
+export declare const ScanConfirmationDialog: (props: TScanConfirmDialogProps) => JSX.Element;
+export declare type TScanConfirmDialogLabels = {
+    title?: string;
+    message?: string;
+    btnOk?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+    btnCancel?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+};
+export declare type TScanConfirmDialogProps = {
+    open: boolean;
+    onConfirm: () => void;
+    onClose: () => void;
+} & TScanConfirmDialogLabels;

package/lib/cjs/types/Scanner/Scanner.d.ts

@@ -1,7 +1,11 @@
-import { IDetectedBarcode } from '@yudiel/react-qr-scanner';
-export interface ScannerProps {
+import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
+import { TScanConfirmDialogLabels } from './ScanConfirmationDialog';
+declare const Scanner: ({ scanConfirmation, scanTrackerType, ...props }: ScannerProps) => JSX.Element;
+export declare type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
+declare type ScannerProps = {
     scanConfirmation?: boolean;
+    scanConfirmDialog?: TScanConfirmDialogLabels;
+    scanTrackerType?: TScanTrackerType;
     onScan?: (detectedCodes: IDetectedBarcode[]) => void;
-}
-declare const Scanner: React.FC<ScannerProps>;
+} & IScannerProps;
 export default Scanner;

package/lib/cjs/types/index.d.ts

@@ -2,10 +2,9 @@ export { default as Popper } from './Popper';
 export { default as DomContainer } from './DomContainer';
 export { default as Spinner } from './Spinner';
 export { default as BarLoader } from './BarLoader';
-export { default as Scanner } from './Scanner';
-export { default as Camera } from './Camera';
 export { default as Selected } from './Selected';
 export { default as Button } from './Button';
+export { default as Scanner } from './Scanner';
 export { default as ToggleButton } from './ToggleButton';
 export { default as Tooltip } from './Tooltip';
 export { default as TagInput } from './TagInput';

package/lib/index.d.ts

@@ -1,6 +1,5 @@
 import React$1, { CSSProperties } from 'react';
-import { IDetectedBarcode } from '@yudiel/react-qr-scanner';
-import { WebcamProps } from 'react-webcam';
+import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -60,26 +59,6 @@ interface BarLoaderProps {
 }
 declare const BarLoader: React$1.FC<BarLoaderProps>;
 
-interface ScannerProps {
-    scanConfirmation?: boolean;
-    onScan?: (detectedCodes: IDetectedBarcode[]) => void;
-}
-declare const Scanner: React.FC<ScannerProps>;
-
-declare const Camera: ({ onCapture, isOffline, mode, ...props }: CameraProps) => JSX.Element;
-declare type CameraProps = {
-    onCapture: ({ fileStoreName, fileRowId, file }: TfileCapturedProps) => void;
-    mode?: 'photo' | 'video';
-    isOffline?: boolean;
-} & Partial<WebcamProps>;
-declare type TfileCapturedProps = {
-    fileStoreName?: string | null;
-    fileRowId?: number | null;
-    file?: File | null;
-    imageSrc?: string | null;
-    videoSrc?: string | null;
-};
-
 interface SelectedProps {
     title?: string;
     data: any[];
@@ -97,6 +76,28 @@ interface ButtonProps {
 }
 declare const Button: React$1.FC<ButtonProps>;
 
+declare type TScanConfirmDialogLabels = {
+    title?: string;
+    message?: string;
+    btnOk?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+    btnCancel?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+};
+
+declare const Scanner: ({ scanConfirmation, scanTrackerType, ...props }: ScannerProps) => JSX.Element;
+declare type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
+declare type ScannerProps = {
+    scanConfirmation?: boolean;
+    scanConfirmDialog?: TScanConfirmDialogLabels;
+    scanTrackerType?: TScanTrackerType;
+    onScan?: (detectedCodes: IDetectedBarcode[]) => void;
+} & IScannerProps;
+
 interface ToggleButtonProps {
     selected?: boolean;
     value?: string;
@@ -306,4 +307,4 @@ interface Props {
 }
 declare const CrossIcon: React$1.FC<Props>;
 
-export { AuthDownloadLink, BarLoader, Button, Camera, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };
+export { AuthDownloadLink, BarLoader, Button, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };

package/lib/styles/index.scss

@@ -8,11 +8,11 @@
 @import "TextField";
 @import "Menu";
 @import "Dialog";
+@import "Scanner";
 @import "Button";
 @import "ToggleButton";
 @import "Selected";
 @import "BarLoader";
-@import "Camera";
 
 
 @include icons();
@@ -22,12 +22,12 @@
 @include taginput();
 @include input();
 @include menu();
+@include scanner();
 @include dialog();
 @include button();
 @include toggleButton();
 @include selected();
 @include barLoader();
-@include camera();
 
 // @include popper();
 // @include popper(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.1.172",
+  "version": "0.1.174",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
@@ -94,10 +94,7 @@
     "sass-loader": "10.1.1",
     "storybook-dark-mode": "^1.0.9",
     "style-loader": "2.0.0",
-    "typescript": "^4.1.2",
-    "lodash": "^4.17.21",
-    "react-icons": "^5.3.0",
-    "react-webcam": "^7.2.0"
+    "typescript": "^4.1.2"
   },
   "dependencies": {
     "@rollup/plugin-replace": "^5.0.2"

package/lib/cjs/types/Camera/Camera.d.ts

@@ -1,15 +0,0 @@
-import { WebcamProps } from 'react-webcam';
-declare const Camera: ({ onCapture, isOffline, mode, ...props }: CameraProps) => JSX.Element;
-export declare type CameraProps = {
-    onCapture: ({ fileStoreName, fileRowId, file }: TfileCapturedProps) => void;
-    mode?: 'photo' | 'video';
-    isOffline?: boolean;
-} & Partial<WebcamProps>;
-export declare type TfileCapturedProps = {
-    fileStoreName?: string | null;
-    fileRowId?: number | null;
-    file?: File | null;
-    imageSrc?: string | null;
-    videoSrc?: string | null;
-};
-export default Camera;

package/lib/cjs/types/Camera/FileStorageDb.d.ts

@@ -1,9 +0,0 @@
-declare class FileStorageDB {
-    private dbName;
-    private storeName;
-    private db;
-    openDatabase(): Promise<IDBDatabase>;
-    storeFile(file: File): Promise<number>;
-    retrieveFile(id: number): Promise<File | null>;
-}
-export default FileStorageDB;

package/lib/cjs/types/Camera/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Camera';

package/lib/cjs/types/Camera/useTimer.d.ts

@@ -1,6 +0,0 @@
-export declare const useTimer: () => {
-    formatTime: (totalSeconds: number) => string;
-    startTimer: () => void;
-    stopTimer: () => void;
-    formatedTime: string;
-};

package/lib/styles/Camera/index.css

@@ -1,192 +0,0 @@
-.camera-container {
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-}
-
-.camera-switch-btn {
-  all: initial;
-  display: flex;
-  cursor: pointer;
-}
-
-.camera-recording-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #f44336;
-  animation: clignote 1s infinite;
-}
-
-.camera-recording-timer {
-  z-index: 99;
-  position: absolute;
-  top: 1rem;
-  left: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  padding: 3px 7px;
-  font-size: 12px;
-  color: #fff;
-  font-family: sans-serif;
-  gap: 6px;
-}
-
-.camera-offline-mode {
-  position: absolute;
-  top: 1rem;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  padding: 3px 7px;
-  font-size: 12px;
-  color: red;
-  font-family: sans-serif;
-}
-
-.camera-mode {
-  z-index: 9999;
-  position: absolute;
-  bottom: 2rem;
-  right: 20px;
-  padding: 0.5rem;
-  border-radius: 6px;
-  color: #ffffff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 7px;
-  background-color: #2196f3;
-  transition: background-color 0.3s ease;
-}
-
-.camera-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.camera-controls {
-  z-index: 999;
-  position: absolute;
-  bottom: 2rem;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.video-play-btn {
-  all: initial;
-  position: absolute;
-  bottom: 10%;
-  left: 50%;
-  z-index: 9;
-  width: 1em;
-  height: 1em;
-  min-width: 15px;
-  min-height: 15px;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 1px solid;
-  padding: 20px 20px;
-  background-color: #ffffff;
-  cursor: pointer;
-}
-
-.camera-button {
-  padding: 0.5rem;
-  border-radius: 6px;
-  color: #ffffff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 7px;
-  transition: background-color 0.3s ease;
-}
-.camera-button--capture {
-  border-radius: 50%;
-  color: initial;
-  width: 50px;
-  height: 50px;
-  border: 1px solid black;
-  background-color: #ffffff;
-}
-.camera-button--record {
-  border-radius: 50%;
-  color: red;
-  width: 50px;
-  height: 50px;
-  border: 1px solid black;
-  background-color: #ffffff;
-}
-.camera-button--download {
-  background-color: #4caf50;
-}
-.camera-button--download:hover {
-  background-color: #388e3c;
-}
-.camera-button--reset {
-  background-color: #9e9e9e;
-}
-.camera-button--reset:hover {
-  background-color: #757575;
-}
-
-.camera-offline-mode {
-  font-size: 0.875rem;
-  font-family: sans-serif;
-  color: #d32f2f;
-}
-
-.camera-screen-animation {
-  animation: fadeIn 0.3s;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes clignote {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/*# sourceMappingURL=index.css.map */