cortex-react-ui 0.2.22 → 0.2.24

package/lib/styles/Selected/index.scss

@@ -0,0 +1,78 @@
+@use "../global.scss";
+
+@mixin selected($props: null, $options: null) {
+    $internal-options: global.$default-options;
+  
+    $internal-props: ();
+  
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+    
+    .ui-selected-params {
+        float: left;
+        color: black;
+        margin: 15px;
+        border: 1px solid black;
+        width: 250px;
+    }
+    
+    .ui-selected-title {
+        color: black;
+        font-weight: bold;
+        font-size: 15px;
+        margin-left: 5px;
+        display: table;
+        margin-top: -10px;
+        background-color: white;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+    
+    .ui-selected-content {
+        color: black;
+        margin: 10px;
+    }
+    
+    .ui-selected-button {
+        display: inline;
+    }
+    
+    .ui-selected-btn {
+        width: 28%;
+        border-radius: 5px;
+        height: 30px;
+        margin: 5px;
+        margin-left: 7px;
+        font-weight: bold;
+        cursor: pointer;
+        background-color: #75c475;
+        color: white;
+        border: none;
+    }
+    
+    .ui-not-selected {
+        width: 28%;
+        border-radius: 5px;
+        height: 30px;
+        margin: 5px;
+        margin-left: 7px;
+        font-weight: bold;
+        cursor: pointer;
+        background-color: black;
+        color: white;
+        border: none;
+    }
+    
+    .ui-new-selected {
+        width: 28%;
+        border-radius: 5px;
+        height: 30px;
+        margin: 5px;
+        margin-left: 7px;
+        font-weight: bold;
+        cursor: pointer;
+        background-color: red;
+        color: white;
+        border: none;
+    }
+}

package/lib/styles/Spinner/index.scss

@@ -0,0 +1,43 @@
+@use "../global.scss";
+
+@mixin spinner($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        color: blue,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    @if global.get-map-deep($internal-options, "properties") == true {
+        @keyframes ui-spinner-anim {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
+    .ui-spinner {
+        @if global.get-map-deep($internal-options, "properties") == true {
+            display: inline-block;
+            width: 2rem;
+            height: 2rem;
+            vertical-align: text-bottom;
+            border: 0.25em solid;
+            border-right: 0.25em solid transparent;
+            border-radius: 50%;
+            text-indent: -9999em;
+        }
+
+        @if global.get-map-deep($internal-options, "colors") == true {
+            border-left-color: global.get-map-deep($internal-props, "color");
+            border-top-color: global.get-map-deep($internal-props, "color");
+            border-bottom-color: global.get-map-deep($internal-props, "color");
+        }
+    }
+
+    .ui-spinner-indeterminate {
+        animation: ui-spinner-anim 0.75s linear infinite;
+    }
+}

package/lib/styles/TagInput/index.scss

@@ -0,0 +1,141 @@
+@use "../global.scss";
+
+@mixin taginput($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        line-height: 1.5,
+        background-color: #fff,
+        border-bottom: 1px solid #444,
+        item: (
+            border:  1px solid #444,
+            color: #000,
+            remove: (
+                color: #fff,
+                background-color: #444
+            )
+        ),
+        filter: (
+            background-color: #fff,
+            group: (
+                color: #fff,
+                background-color: #444
+            ),
+            item: (
+                color: #000,
+                background-color: #fff
+            )
+        )
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-taginput {
+        @if global.showProps($internal-options) {
+            display: block;
+            width: 100%;
+            padding: 0.375rem 0.75rem;
+            font-size: 0.9375rem;
+            line-height: global.get-map-deep($internal-props, "line-height");
+            user-select: none;
+        }
+        @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 global.showProps($internal-options) {
+            display: inline-block;
+            line-height: 1;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: baseline;
+            border-radius: 0.25rem;
+            margin: 2px;
+        }
+        @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 global.showProps($internal-options) {
+            padding: 2px;
+        }
+    }
+
+    .ui-taginputItemRemove {
+        @if global.showProps($internal-options) {
+            appearance: none;
+            border: 0;
+            cursor: pointer;
+        }
+        @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 global.showProps($internal-options) {
+            outline: none;
+            border: 0;
+            overflow: visible;
+            padding-left: 4px;
+        }
+    }
+
+    .ui-taginputSelect {
+        @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 global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "filter.background-color");
+        }
+    }
+
+    .ui-taginputSelectItem {
+        @if global.showProps($internal-options) {
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            line-height: 48px;
+            padding: 0 16px;
+            cursor: pointer;
+        }
+        @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");
+        }
+    }
+
+    .ui-taginputSelectGroup {
+
+    }
+
+    .ui-taginputSelectGroupLabel {
+        @if global.showProps($internal-options) {
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            line-height: 48px;
+            padding: 0 16px;
+        }
+        @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 global.showProps($internal-options) {
+            padding-left: 10px;
+        }
+    }
+}

package/lib/styles/TextField/index.scss

@@ -0,0 +1,22 @@
+@use "../global.scss";
+
+@mixin textfield($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        color: blue,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .ui-textfield-input {
+        border: none;
+        background: none;
+        appearance: none;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}

package/lib/styles/ToggleButton/index.scss

@@ -0,0 +1,60 @@
+@use "../global.scss";
+
+@mixin toggleButton($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: ();
+
+    $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 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: global.$color-blue-grey-light, $alpha: 0.2);
+        }
+    }
+
+    .ui-toggleBtn-selected {
+        background-color: global.$color-blue;
+        border-color: global.$color-blue;
+        color: global.$color-white;
+
+        &:hover {
+            text-decoration: none;
+            background-color: rgba($color: global.$color-blue, $alpha: 0.8);
+        }
+    }
+
+    .ui-toggleBtn-size-xs {
+        font-size: global.$font-size-xs;
+    }
+
+    .ui-toggleBtn-size-sm {
+        font-size: global.$font-size-sm;
+    }
+
+    .ui-toggleBtn-size-md {
+        font-size: global.$font-size-md;
+    }
+
+    .ui-toggleBtn-size-lg {
+        font-size: global.$font-size-lg;
+    }
+
+    .ui-toggleBtn-size-xl {
+        font-size: global.$font-size-xl;
+    }
+}

package/lib/styles/Tooltip/index.scss

@@ -0,0 +1,25 @@
+@use "../global.scss";
+
+@mixin tooltip($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: red,
+        fgColor: #fff
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+    
+    .ui-tooltip-content {
+        @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 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/Transition/index.scss

@@ -0,0 +1,15 @@
+.ui-fade {
+    opacity: 0;
+    transition: opacity linear 160ms;
+}
+
+.ui-fade-entering,
+.ui-fade-entered {
+    opacity: 1;
+}
+
+
+.ui-fade-exited,
+.ui-fade-exiting {
+    opacity: 0;
+}

package/lib/styles/global.scss

@@ -0,0 +1,162 @@
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+
+$default-options: (
+    properties: true,
+    colors: true,
+);
+
+// Font
+$font-family: Roboto, Helvetica, Arial, 'sans-serif';
+$font-weight-semi-bold: 500;
+$font-weight-bold: 600;
+$font-size-base: 1rem; //16px
+
+$font-size-h1: $font-size-base * 6; //Headline 1 (96px)
+$font-size-h2: $font-size-base * 3.75; //Headline 2 (60px)
+$font-size-h3: $font-size-base * 3; //Headline 3 (48px)
+$font-size-h4: $font-size-base * 2.125; //Headline 4 (34px)
+$font-size-h5: $font-size-base * 1.5; //Headline 5 (24px)
+$font-size-h6: $font-size-base * 1.25; //Headline 6 (20px)
+
+$font-size-xs: $font-size-base * 0.625; //10px
+$font-size-sm: $font-size-base * 0.75; //12px
+$font-size-md: $font-size-base * 0.875; //14px
+$font-size-lg: $font-size-base * 1.125; //18px
+$font-size-xl: $font-size-base * 1.25; //20px
+
+// Border
+$border-radius-xs: 4px;
+$border-radius-sm: 6px;
+$border-radius: 8px;
+$border-radius-md: 10px;
+$border-radius-lg: 12px;
+
+// Spacers
+$spacer: 1rem !default;
+$spacers: (
+	0: 0,
+	1: math.div($spacer, 4),
+	2: math.div($spacer, 2),
+	3: $spacer,
+	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
+
+// Color
+$color-white: #fff;
+$color-black: #000;
+
+$color-red: #ef5350;
+$color-red-light: #ef9a9a;
+$color-red-lighter: #ffebee;
+$color-red-dark: #d32f2f;
+$color-red-darker: #b71c1c;
+
+$color-green: #66bb6a;
+$color-green-light: #a5d6a7;
+$color-green-lighter: #00f153;
+$color-green-dark: #43a047;
+$color-green-darker: #2e7d32;
+
+$color-grey: #9e9e9e;
+$color-grey-light: #e0e0e0;
+$color-grey-lighter: #f5f5f5;
+$color-grey-dark: #616161;
+$color-grey-darker: #212121;
+
+$color-amber: #ffc107;
+$color-amber-light: #ffd54f;
+$color-amber-lighter: #fff8e1;
+$color-amber-dark: #ffa000;
+$color-amber-darker: #ff6f00;
+
+$color-orange: #f8b123;
+$color-orange-light: #ffd0b3;
+$color-orange-lighter: #fff3e0;
+$color-orange-dark: #ec9f83;
+$color-orange-darker: #b77056;
+
+$color-blue: #29b6f6;
+$color-blue-light: #4fc3f7;
+$color-blue-lighter: #b3e5fc;
+$color-blue-dark: #0288d1;
+$color-blue-darker: #01579b;
+
+$color-cyan: #00bcd4;
+$color-cyan-light: #4dd0e1;
+$color-cyan-lighter: #b2ebf2;
+$color-cyan-dark: #0097a7;
+$color-cyan-darker: #006064;
+
+$color-blue-grey: #607d8b;
+$color-blue-grey-light: #90a4ae;
+$color-blue-grey-lighter: #cfd8dc;
+$color-blue-grey-dark: #455a64;
+$color-blue-grey-darker: #263238;
+
+$color-yellow: #fffb00;
+$color-yellow-light: #fffc57;
+$color-yellow-lighter: #fffeaf;
+$color-yellow-dark: #d3cf00;
+$color-yellow-darker: #a7a400;
+
+$color-purple: #9900ff;
+$color-purple-light: #ae36fd;
+$color-purple-lighter: #d493ff;
+$color-purple-dark: #7a00cc;
+$color-purple-darker: #54008b;
+
+@function showProps($internal-options) {
+    @return get-map-deep($internal-options, "properties") == true;
+}
+
+@function showColors($internal-options) {
+    @return get-map-deep($internal-options, "colors") == true;
+}
+
+@function str-split($input-string, $separator: " ") {
+    $result: ();
+    $index: string.index($input-string, $separator);
+    $indent: string.length($separator);
+
+    @while ($index != null) {
+        $item: string.slice($input-string, 1, $index - 1);
+        $input-string: string.slice($input-string, $index + $indent);
+        $index: string.index($input-string, $separator);
+
+        @if (string.length($item) != 0) {
+            $result: list.append($result, $item);
+        }
+    }
+
+    $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);
+    }
+    @return $map;
+}
+
+@function is-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;
+}

package/lib/styles/index.scss

@@ -0,0 +1,50 @@
+@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.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(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     )
+// );
+// @include popper(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     ),
+//     (
+//         properties: false
+//     )
+// );

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

@@ -0,0 +1,12 @@
+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 './css/center-active-control.css'; 

package/lib/typings/typings/index.d.ts

@@ -0,0 +1,31 @@
+declare module '*.module.scss' {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
+
+/*
+ ** Mapped types
+ */
+type Nullable<T> = T | null;
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> };
+type Required<T> = { [P in keyof T]-?: T[P] };
+type ValuesOf<T extends readonly any[]> = T[number];
+type ObjectValues<T> = T[keyof T];
+type IndexableProperties<T> = keyof T extends string | number ? keyof T extends infer P ? P : never : never;
+type AssertPropDefined<T, K extends keyof T = never> = {
+    [P in keyof T]: P extends K ? NonNullable<T[P]> : T[P];
+};
+type NonEmptyArray<T> = [T, ...T[]];
+type ArrayType<T extends Array<any>> = T extends (infer U)[] ? U : never;
+type NameOfProp<T, P> = P extends keyof T ? P : never;
+
+/*
+ ** Common Types
+ */
+type CustomRange<S = any, E = any> = { start: S, end: E };
+
+type RefLabel<T = number> = {
+    id: T;
+    label: string;
+};

package/lib/typings/typings/tagInput.d.ts

@@ -0,0 +1,13 @@
+// namespace Cortex {
+//     type Tag = {
+//         id: string,
+//         label: string
+//     };
+
+//     type TagSuggestion = {
+//         id: string,
+//         label: string,
+//         group?: boolean,
+//         suggestions?: TagSuggestion[]
+//     };
+// }