cortex-react-ui 0.2.21 → 0.2.22

package/lib/styles/Selected/index.scss

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

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

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

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

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

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

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

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

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

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

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

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