cortex-react-ui 0.2.9 → 0.2.11

package/lib/index.d.ts

@@ -2,8 +2,6 @@
 import React$1, { CSSProperties } from 'react';
 import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 import { WebcamProps } from 'react-webcam';
-import { MapContainerProps } from 'react-leaflet';
-import { ControlPosition, LatLngTuple } from 'leaflet';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -166,80 +164,6 @@ interface TooltipProps {
 }
 declare const TagInput: React$1.FC<TooltipProps>;
 
-declare class Point {
-    id: number;
-    order: number;
-    latitude: number;
-    longitude: number;
-}
-
-declare class Location {
-    id: number;
-    objId: string;
-    points: Point[];
-}
-
-type CenterActiveAreaControlProps = {
-    autoCenter?: boolean;
-};
-
-/** Props interface for MapFullscreenControl component */
-type MapFullscreenControlProps = {
-    /** Change the content of the button, can be HTML, default null */
-    content?: string | undefined;
-    /** Change the position of the button can be topleft, topright, bottomright or bottomleft, default topleft */
-    position?: ControlPosition | undefined;
-    /** Change the title of the button, default Full Screen */
-    title?: string | undefined;
-    /** Change the title of the button when fullscreen is on, default Exit Full Screen */
-    titleCancel?: string | undefined;
-    /** Force separate button to detach from zoom buttons, default false */
-    forceSeparateButton?: boolean | undefined;
-    /** Force use of pseudo full screen even if full screen API is available, default false */
-    forcePseudoFullscreen?: boolean | undefined;
-    /** Use pseudo fullscreen */
-    pseudoFullscreen?: boolean | undefined;
-    /** Dom element to render in full screen, false by default, fallback to map._container */
-    fullscreenElement?: false | HTMLElement | undefined;
-};
-
-type DrawToolsProps = {
-    position?: ControlPosition | undefined;
-    handleOnCreated?: (v: void) => void;
-    handleOnDeleted?: (v: void) => void;
-    draw?: drawType;
-};
-type drawType = {
-    polyline?: boolean;
-    polygon?: boolean;
-    rectangle?: boolean;
-    circle?: boolean;
-    marker?: boolean;
-    circlemarker?: boolean;
-};
-
-type MapsProps = {
-    MapContainerProps?: MapContainerProps;
-    center?: LatLngTuple;
-    fullscreen?: MapFullscreenControlProps | boolean;
-    centerActiveArea?: CenterActiveAreaControlProps | boolean;
-    drawTools?: DrawToolsProps | boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    zoom?: number;
-    data?: Location[];
-};
-
-declare const App: React$1.FC<AppProps>;
-type AppProps = MapsProps & {
-    onClose: (() => void);
-    onSave: ((points: Point[]) => void);
-    customButtons?: {
-        cancelButton?: HTMLElement;
-        saveButton?: HTMLElement;
-    };
-};
-
 interface MenuProps {
     containerRef: React$1.RefObject<HTMLElement>;
     className?: string;
@@ -403,4 +327,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, App as Map, 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.scss

@@ -110,17 +110,21 @@
         width: 100%;
         height: 90%;
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     .camera-controls {
         z-index: 999;
         display: flex;
         justify-content: center;
+        align-items: center;
         gap: 1rem;
-        margin: 0 auto;
         padding: 1rem;
         width: 100%;
-        position: fixed;
+        flex-direction: column;
     }
 
     .video-play-btn {

package/lib/styles/Scanner/index.scss

@@ -0,0 +1,110 @@
+@use "../global.scss";
+
+@mixin scanner($props: null, $options: null) {
+	$internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: global.$color-grey-darker,
+        closeBtnColor: global.$color-grey,
+        closeBtnHoverColor: global.$color-blue,
+        closeBtnDisableColor: global.$color-blue-grey-lighter,
+        confirm: (
+            headerBgColor: global.$color-orange-dark,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        error: (
+            headerBgColor: global.$color-red,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),
+        warning: (
+            headerBgColor: global.$color-grey,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: global.$color-grey-darker,
+        ),        
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+	
+	.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 */
+}

package/lib/typings/typings/css.d.ts

@@ -9,7 +9,4 @@ declare module '*.scss' {
 }
 
 // Add specific CSS module declarations
-declare module 'leaflet/dist/leaflet.css';
-declare module 'leaflet-draw/dist/leaflet.draw.css';
-declare module 'leaflet.fullscreen/Control.FullScreen.css';
 declare module './css/center-active-control.css'; 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
@@ -84,10 +84,13 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
+    "@types/leaflet": "^1.7.10",
+    "@types/leaflet-draw": "^1.0.11",
+    "@types/leaflet.fullscreen": "^1.6.1",
     "@types/node": "^22.10.5",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@yudiel/react-qr-scanner": "^2.0.2",
+    "@yudiel/react-qr-scanner": "2.1.0",
     "css-loader": "5.2.6",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.25.2",
@@ -100,7 +103,6 @@
     "react-dom": "^18.1.0",
     "react-icons": "^5.3.0",
     "react-scripts": "^5.0.1",
-    "react-webcam": "^7.2.0",
     "rollup": "^2.60.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-css-only": "^4.5.2",
@@ -119,6 +121,20 @@
     "url-loader": "^4.1.1"
   },
   "dependencies": {
-    "@rollup/plugin-replace": "^5.0.2"
+    "@rollup/plugin-replace": "^5.0.2",
+    "leaflet": "^1.8.0",
+    "leaflet-active-area": "^1.2.1",
+    "leaflet-draw": "^1.0.4",
+    "leaflet.fullscreen": "^2.4.0",
+    "react-leaflet": "^4.0.0",
+    "react-leaflet-draw": "^0.20.4",
+    "react-webcam": "^7.2.0",
+    "screenfull": "^6.0.2"
+  },
+  "overrides": {
+    "@yudiel/react-qr-scanner": "2.1.0"
+  },
+  "resolutions": {
+    "@yudiel/react-qr-scanner": "2.1.0"
   }
 }

package/lib/cjs/Map/utils/httpService.d.ts

@@ -1,16 +0,0 @@
-interface IHttpOption {
-    token?: string;
-    headers?: KeyValue<string, string>[];
-}
-export declare class HttpResponse<T = any> {
-    status: number;
-    data: T | null;
-    error: string | null;
-}
-export default class HttpService {
-    static get: <T = any>(url: string, params: Record<string, any>, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static post: <T = any>(url: string, data: any, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static put: <T = any>(url: string, data: any, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static delete: <T = any>(url: string, params: Record<string, any>, options?: IHttpOption) => Promise<HttpResponse<T>>;
-}
-export {};

package/lib/esm/Map/utils/httpService.d.ts

@@ -1,16 +0,0 @@
-interface IHttpOption {
-    token?: string;
-    headers?: KeyValue<string, string>[];
-}
-export declare class HttpResponse<T = any> {
-    status: number;
-    data: T | null;
-    error: string | null;
-}
-export default class HttpService {
-    static get: <T = any>(url: string, params: Record<string, any>, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static post: <T = any>(url: string, data: any, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static put: <T = any>(url: string, data: any, options?: IHttpOption) => Promise<HttpResponse<T>>;
-    static delete: <T = any>(url: string, params: Record<string, any>, options?: IHttpOption) => Promise<HttpResponse<T>>;
-}
-export {};

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 */