cortex-react-ui 0.1.181 → 0.2.0

package/lib/styles/TagInput/index.scss

@@ -1,7 +1,7 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin taginput($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         line-height: 1.5,
@@ -28,26 +28,26 @@
         )
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-taginput {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             display: block;
             width: 100%;
             padding: 0.375rem 0.75rem;
             font-size: 0.9375rem;
-            line-height: get-map-deep($internal-props, "line-height");
+            line-height: global.get-map-deep($internal-props, "line-height");
             user-select: none;
         }
-        @if showColors($internal-options) {
-            background-color: get-map-deep($internal-props, "background-color");
-            border-bottom: get-map-deep($internal-props, "border-bottom")
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "background-color");
+            border-bottom: global.get-map-deep($internal-props, "border-bottom")
         }
     }
 
     .ui-taginputItem {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             display: inline-block;
             line-height: 1;
             text-align: center;
@@ -56,32 +56,32 @@
             border-radius: 0.25rem;
             margin: 2px;
         }
-        @if showColors($internal-options) {
-            border: get-map-deep($internal-props, "item.border");
-            color: get-map-deep($internal-props, "item.color");
+        @if global.showColors($internal-options) {
+            border: global.get-map-deep($internal-props, "item.border");
+            color: global.get-map-deep($internal-props, "item.color");
         }
     }
 
     .ui-taginputItemLabel {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             padding: 2px;
         }
     }
 
     .ui-taginputItemRemove {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             appearance: none;
             border: 0;
             cursor: pointer;
         }
-        @if showColors($internal-options) {
-            background: get-map-deep($internal-props, "item.remove.background-color");
-            color: get-map-deep($internal-props, "item.remove.color");
+        @if global.showColors($internal-options) {
+            background: global.get-map-deep($internal-props, "item.remove.background-color");
+            color: global.get-map-deep($internal-props, "item.remove.color");
         }
     }
 
     .ui-taginputFilter {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             outline: none;
             border: 0;
             overflow: visible;
@@ -90,18 +90,18 @@
     }
 
     .ui-taginputSelect {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
             min-width: 180px;
             user-select: none;
         }
-        @if showColors($internal-options) {
-            background-color: get-map-deep($internal-props, "filter.background-color");
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "filter.background-color");
         }
     }
 
     .ui-taginputSelectItem {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             display: block;
             white-space: nowrap;
             overflow: hidden;
@@ -109,9 +109,9 @@
             padding: 0 16px;
             cursor: pointer;
         }
-        @if showColors($internal-options) {
-            color: get-map-deep($internal-props, "filter.item.color");
-            background-color: get-map-deep($internal-props, "filter.item.background-color");
+        @if global.showColors($internal-options) {
+            color: global.get-map-deep($internal-props, "filter.item.color");
+            background-color: global.get-map-deep($internal-props, "filter.item.background-color");
         }
     }
 
@@ -120,21 +120,21 @@
     }
 
     .ui-taginputSelectGroupLabel {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             display: block;
             white-space: nowrap;
             overflow: hidden;
             line-height: 48px;
             padding: 0 16px;
         }
-        @if showColors($internal-options) {
-            background-color: get-map-deep($internal-props, "filter.group.background-color");
-            color: get-map-deep($internal-props, "filter.group.color");
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "filter.group.background-color");
+            color: global.get-map-deep($internal-props, "filter.group.color");
         }
     }
 
     .ui-taginputSelectGroupItems {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             padding-left: 10px;
         }
     }

package/lib/styles/TextField/index.scss

@@ -1,14 +1,14 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin textfield($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         color: blue,
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-textfield-input {
         border: none;

package/lib/styles/ToggleButton/index.scss

@@ -1,60 +1,60 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin toggleButton($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: ();
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-toggleBtn {
         background: none;
         appearance: none;
-        border: 1px solid $color-grey;
-        border-radius: $border-radius-xs;
-        font-family: $font-family;
-        font-size: $font-size-md;
-        color: $color-grey-darker;
-        padding: $spacer-sm;
+        border: 1px solid global.$color-grey;
+        border-radius: global.$border-radius-xs;
+        font-family: global.$font-family;
+        font-size: global.$font-size-md;
+        color: global.$color-grey-darker;
+        padding: global.$spacer-sm;
         cursor: pointer;
         transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
             color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
         &:hover {
             text-decoration: none;
-            background-color: rgba($color: $color-blue-grey-light, $alpha: 0.2);
+            background-color: rgba($color: global.$color-blue-grey-light, $alpha: 0.2);
         }
     }
 
     .ui-toggleBtn-selected {
-        background-color: $color-blue;
-        border-color: $color-blue;
-        color: $color-white;
+        background-color: global.$color-blue;
+        border-color: global.$color-blue;
+        color: global.$color-white;
 
         &:hover {
             text-decoration: none;
-            background-color: rgba($color: $color-blue, $alpha: 0.8);
+            background-color: rgba($color: global.$color-blue, $alpha: 0.8);
         }
     }
 
     .ui-toggleBtn-size-xs {
-        font-size: $font-size-xs;
+        font-size: global.$font-size-xs;
     }
 
     .ui-toggleBtn-size-sm {
-        font-size: $font-size-sm;
+        font-size: global.$font-size-sm;
     }
 
     .ui-toggleBtn-size-md {
-        font-size: $font-size-md;
+        font-size: global.$font-size-md;
     }
 
     .ui-toggleBtn-size-lg {
-        font-size: $font-size-lg;
+        font-size: global.$font-size-lg;
     }
 
     .ui-toggleBtn-size-xl {
-        font-size: $font-size-xl;
+        font-size: global.$font-size-xl;
     }
 }

package/lib/styles/Tooltip/index.scss

@@ -1,25 +1,25 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin tooltip($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         bgColor: red,
         fgColor: #fff
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
     
     .ui-tooltip-content {
-        @if get-map-deep($internal-options, "properties") == true {
+        @if global.get-map-deep($internal-options, "properties") == true {
             padding: 8px;
             border-radius: 4px;
             box-shadow: 0 3px 6px rgba(#000, 0.16), 0 3px 6px rgba(#000, 0.23);
         }
-        @if get-map-deep($internal-options, "colors") == true {
-            background-color: get-map-deep($internal-props, "bgColor");
-            color: get-map-deep($internal-props, "fgColor");
+        @if global.get-map-deep($internal-options, "colors") == true {
+            background-color: global.get-map-deep($internal-props, "bgColor");
+            color: global.get-map-deep($internal-props, "fgColor");
         }
     }
 }

package/lib/styles/global.scss

@@ -1,4 +1,8 @@
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
 @use "sass:math";
+@use "sass:map";
 
 $default-options: (
     properties: true,
@@ -41,11 +45,11 @@ $spacers: (
 	4: $spacer * 1.5,
 	5: $spacer * 3,
 ) !default;
-$spacer-xs: map-get($spacers, 1); //4px
-$spacer-sm: map-get($spacers, 2); //8px
-$spacer: map-get($spacers, 3); //16px
-$spacer-md: map-get($spacers, 4); //24px
-$spacer-lg: map-get($spacers, 5); //48px
+$spacer-xs: map.get($spacers, 1); //4px
+$spacer-sm: map.get($spacers, 2); //8px
+$spacer: map.get($spacers, 3); //16px
+$spacer-md: map.get($spacers, 4); //24px
+$spacer-lg: map.get($spacers, 5); //48px
 
 // Color
 $color-white: #fff;
@@ -121,38 +125,38 @@ $color-purple-darker: #54008b;
 
 @function str-split($input-string, $separator: " ") {
     $result: ();
-    $index: str-index($input-string, $separator);
-    $indent: str-length($separator);
+    $index: string.index($input-string, $separator);
+    $indent: string.length($separator);
 
     @while ($index != null) {
-        $item: str-slice($input-string, 1, $index - 1);
-        $input-string: str-slice($input-string, $index + $indent);
-        $index: str-index($input-string, $separator);
+        $item: string.slice($input-string, 1, $index - 1);
+        $input-string: string.slice($input-string, $index + $indent);
+        $index: string.index($input-string, $separator);
 
-        @if (str-length($item) != 0) {
-            $result: append($result, $item);
+        @if (string.length($item) != 0) {
+            $result: list.append($result, $item);
         }
     }
 
-    $result: append($result, $input-string);
+    $result: list.append($result, $input-string);
 
     @return $result;
 }
 
 @function get-map-deep($map, $keys) {
     @each $key in str-split($keys, ".") {
-        $map: map-get($map, $key);
+        $map: map.get($map, $key);
     }
     @return $map;
 }
 
 @function is-map($map) {
-    @return type-of($map) == "map";
+    @return meta.type-of($map) == "map";
 }
 
 @function safe-map-merge($map, $map2) {
     @if is-map($map) == true and is-map($map2) == true {
-        @return map-merge($map, $map2);
+        @return map.merge($map, $map2);
     }
     @return $map;
 }

package/lib/styles/index.scss

@@ -1,34 +1,36 @@
-@import "Icons";
-@import "Transition";
-@import "Popper";
-@import "Tooltip";
-@import "Spinner";
-@import "TagInput";
-@import "Input";
-@import "TextField";
-@import "Menu";
-@import "Dialog";
-@import "Scanner";
-@import "Button";
-@import "ToggleButton";
-@import "Selected";
-@import "BarLoader";
-@import "Camera";
+@use "Icons";
+@use "Transition";
+@use "Popper";
+@use "Tooltip";
+@use "Spinner";
+@use "TagInput";
+@use "Input";
+@use "TextField";
+@use "Menu";
+@use "Dialog";
+@use "Scanner";
+@use "Button";
+@use "ToggleButton";
+@use "Selected";
+@use "BarLoader";
+@use "Camera";
+@use "Map";
 
-@include icons();
-@include popper();
-@include tooltip();
-@include spinner();
-@include taginput();
-@include input();
-@include menu();
-@include scanner();
-@include dialog();
-@include button();
-@include toggleButton();
-@include selected();
-@include barLoader();
-@include camera();
+@include Icons.icons();
+@include Popper.popper();
+@include Tooltip.tooltip();
+@include Spinner.spinner();
+@include TagInput.taginput();
+@include Input.input();
+@include Menu.menu();
+@include Scanner.scanner();
+@include Dialog.dialog();
+@include Button.button();
+@include ToggleButton.toggleButton();
+@include Selected.selected();
+@include BarLoader.barLoader();
+@include Camera.camera();
+@include Map.map();
 
 // @include popper();
 // @include popper(

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

@@ -0,0 +1,15 @@
+declare module '*.css' {
+    const content: { [className: string]: string };
+    export default content;
+}
+
+declare module '*.scss' {
+    const content: { [className: string]: string };
+    export default content;
+}
+
+// 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.1.181",
+  "version": "0.2.0",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "build": "rd /s/q \"./lib\" && yarn rollup",
     "test": "",
     "prepare": "yarn build",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "rollup": "rollup -c"
   },
   "eslintConfig": {
@@ -56,22 +56,38 @@
     "react-dom": "^18.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "3",
     "@dateam/ark": "^0.2.19",
+    "@mdx-js/react": "^1.6.22",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/node-logger": "^6.4.22",
-    "@storybook/preset-create-react-app": "^3.2.0",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "8.4.7",
+    "@storybook/cli": "^8.4.7",
+    "@storybook/node-logger": "^8.4.7",
+    "@storybook/preset-create-react-app": "^8.4.7",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.22",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "8.4.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
+    "@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",
@@ -81,23 +97,35 @@
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
+    "file-loader": "^6.2.0",
+    "leaflet": "^1.8.0",
+    "leaflet-active-area": "^1.2.1",
+    "leaflet-draw": "^1.0.4",
+    "leaflet.fullscreen": "^2.4.0",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^5.3.0",
-    "react-scripts": "^4.0.3",
+    "react-leaflet": "^4.0.0",
+    "react-leaflet-draw": "^0.20.4",
+    "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",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.44.0",
     "sass-loader": "10.1.1",
-    "storybook-dark-mode": "^1.0.9",
+    "storybook": "^8.4.7",
+    "storybook-dark-mode": "^4.0.2",
     "style-loader": "2.0.0",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.2",
+    "url-loader": "^4.1.1"
   },
   "dependencies": {
     "@rollup/plugin-replace": "^5.0.2"

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/esm/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/esm/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/esm/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>;