cortex-react-ui 0.1.166 → 0.1.168

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

@@ -0,0 +1,13 @@
+import { WebcamProps } from 'react-webcam';
+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;
+};
+export default Camera;

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

@@ -0,0 +1,9 @@
+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

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

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

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

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

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

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

@@ -2,9 +2,10 @@ 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,5 +1,6 @@
 import React$1, { CSSProperties } from 'react';
-import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
+import { IDetectedBarcode } from '@yudiel/react-qr-scanner';
+import { WebcamProps } from 'react-webcam';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -59,6 +60,24 @@ 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;
+};
+
 interface SelectedProps {
     title?: string;
     data: any[];
@@ -76,28 +95,6 @@ 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;
@@ -307,4 +304,4 @@ interface Props {
 }
 declare const CrossIcon: React$1.FC<Props>;
 
-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 };
+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 };

package/lib/styles/Camera/index.css

@@ -0,0 +1,192 @@
+.camera-container {
+  width: 100%;
+  height: 100%;
+}
+
+.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%;
+  border-radius: 0.5rem;
+  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 */

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.166",
+  "version": "0.1.168",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
@@ -74,6 +74,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@yudiel/react-qr-scanner": "^2.0.2",
     "css-loader": "5.2.6",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.25.2",
@@ -97,6 +98,8 @@
   },
   "dependencies": {
     "@rollup/plugin-replace": "^5.0.2",
-    "@yudiel/react-qr-scanner": "^2.0.2"
+    "lodash": "^4.17.21",
+    "react-icons": "^5.3.0",
+    "react-webcam": "^7.2.0"
   }
 }

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

@@ -1,13 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/styles/Scanner/index.css

@@ -1,75 +0,0 @@
-.btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0.5rem 1rem;
-	border: 1px solid transparent;
-	border-radius: 0.375rem;
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-	font-size: 0.875rem;
-	font-weight: 500;
-	line-height: 1.25rem;
-	text-align: center;
-	text-transform: none;
-	white-space: nowrap;
-	vertical-align: middle;
-	user-select: none;
-	background-color: #4F46E5;
-	color: #fff;
-	cursor: pointer;
-	outline: none;
-	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-
-.btn-default {
-	background-color: #4F46E5;
-}
-
-.btn-default:hover {
-	opacity: 0.8;
-}
-
-.select {
-	display: block;
-	width: 100%;
-	padding-left: 0.75rem;
-	color: #000;
-	padding-right: 2.5rem;
-	padding-top: 0.5rem;
-	padding-bottom: 0.5rem;
-	font-size: 1rem;
-	border-radius: 0.375rem;
-}
-
-/* DIALOG */
-.dialog-header {
-	display: flex;
-	justify-content: space-between;
-}
-
-.dialog-header h4 {
-	margin: 0;
-}
-
-.dialog-mask {
-	overflow-x: hidden;
-	overflow-y: auto;
-	display: flex;
-	justify-content: center;
-	padding-top: 2.5rem;
-	padding-bottom: 5rem;
-	background-color: #0005;
-	position: fixed;
-	inset: 0;
-}
-
-.dialog-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1.25rem;
-	padding: 1.25rem;
-	height: max-content;
-	background-color: white;
-}
-
-/* DIALOG */