@dative-gpi/foundation-shared-components 0.0.37 → 0.0.39

package/composables/useColors.ts

@@ -16,59 +16,89 @@ export const useColors = () => {
         return maxDiff < 10;
     };
 
-    const lighten = (base: Color): Color => {
+    const isPastel = (color: Color): boolean => {
+        return color.saturationv() <= 15 && color.value() >= 85;
+    };
+
+    const getLight = (base: Color): Color => {
         if (isGrayScale(base)) {
             return base.value(Math.min(base.value() + 10, 100));
         }
         return base.saturationv(10).value(100);
     };
 
-    const soften = (base: Color): Color => {
+    const getSoft = (base: Color): Color => {
         return base.value(Math.min(base.value() + 10, 100));
     };
 
-    const darken = (base: Color): Color => {
-        return base.value(Math.max(base.value() - 15, 0));
+    const getBase = (base: Color): Color => {
+        if (isGrayScale(base)) {
+            return base.saturationv(1);
+        }
+        return base.saturationv(((base.saturationv() * 30) / 100) + 70).value(90);
     };
 
-    const getColors = (color: ColorBase): ColorVariations => {
-        const themed = (Object as any).values(ColorEnum).includes(color);
-
-        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
-        const light = lighten(base);
-        const soft = soften(base);
-        const dark = darken(base);
-
-        return {
-            light: light.hex(),
-            soft: soft.hex(),
-            base: base.hex(),
-            dark: dark.hex()
-        };
+    const getDark = (base: Color): Color => {
+        return base.value(Math.max(base.value() - 15, 0));
     };
 
-    const getContrasts = (color: ColorBase): ColorVariations => {
+    const getContrast = (color: Color, fallback: Color): Color => {
+        if (isGrayScale(color)) {
+            if (color.value() > 50) {
+                return color.value(Math.max(0, color.value() - 75));
+            }
+            else {
+                return color.value(Math.min(100, color.value() + 75));
+            }
+        }
+        return fallback;
+    }
+
+    const getColors = (color: ColorBase): ColorVariations => {
         const themed = (Object as any).values(ColorEnum).includes(color);
 
-        let base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        const seed = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        
+        const base = getBase(seed);
+        const light = getLight(base);
+        const soft = getSoft(base);
+        const dark = getDark(base);
+
+        if (isPastel(seed)) {
+            return {
+                light: getLight(seed).hex(),
+                lightContrast: getContrast(light, dark).hex(),
+                soft: getSoft(seed).hex(),
+                softContrast: getContrast(seed, dark).hex(),
+                base: seed.hex(),
+                baseContrast: getContrast(seed, base).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, light).hex()
+            };
+        }
 
-        if (isGrayScale(base)) {
-            switch (color) {
-                case ColorEnum.Light:
-                    return getColors(ColorEnum.Dark);
-                case ColorEnum.Dark:
-                    return getColors(ColorEnum.Light);
-                default:
-                    if (base.value() > 50) {
-                        base = base.value(Math.max(base.value() - 65, 0));
-                    }
-                    else {
-                        base = base.value(Math.min(base.value() + 65, 100));
-                    }
-                    break;
-            }
+        switch (color) {
+            case ColorEnum.Background: return {
+                light: base.hex(),
+                lightContrast: getContrast(base, base).hex(),
+                soft: base.hex(),
+                softContrast: getContrast(base, base).hex(),
+                base: base.hex(),
+                baseContrast: getContrast(base, base).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, base).hex()
+            };
+            default: return {
+                light: light.hex(),
+                lightContrast: getContrast(light, dark).hex(),
+                soft: soft.hex(),
+                softContrast: getContrast(soft, light).hex(),
+                base: base.hex(),
+                baseContrast: getContrast(base, light).hex(),
+                dark: dark.hex(),
+                darkContrast: getContrast(dark, light).hex()
+            };
         }
-        return getColors(base.hex());
     };
 
     const getGradients = (colors: ColorBase | ColorBase[]): ColorVariations => {
@@ -87,7 +117,6 @@ export const useColors = () => {
 
     return {
         getColors,
-        getContrasts,
         getGradients
     };
 }

package/composables/useRules.ts

@@ -61,6 +61,9 @@ export const useRules = () => {
         }
       }
     }
+    for (let i = 1; i < messages.length; i++) {
+      messages[i] = messages[i].toLowerCase();
+    }
     return [...new Set(messages)];
   }
 

package/models/colors.ts

@@ -10,9 +10,13 @@ export enum ColorEnum {
 
 export interface ColorVariations {
     light: string;
+    lightContrast?: string;
     soft: string;
+    softContrast?: string;
     base: string;
+    baseContrast?: string;
     dark: string;
+    darkContrast?: string;
 };
 
 export type ColorBase = (String | ColorEnum);

package/models/errors.ts

@@ -0,0 +1,36 @@
+export const Errors = [
+    { code: "errors.missingorganisation", default: "Missing organisation header", status: 400 },
+    { code: "errors.missinglanguage", default: "Missing language header", status: 400 },
+    { code: "errors.invalidchart", default: "Invalid chart configuration", status: 400 },
+    { code: "errors.invalidscenario", default: "Invalid scenario configuration", status: 400 },
+    { code: "errors.passwordtooshort", default: "Password too short", status: 400 },
+    { code: "errors.passwordtoolong", default: "Password too long", status: 400 },
+    { code: "errors.passwordlowercase", default: "Lowercase character required", status: 400 },
+    { code: "errors.passworduppercase", default: "Uppercase character required", status: 400 },
+    { code: "errors.passwordnumber", default: "Number required", status: 400 },
+    { code: "errors.passwordspecial", default: "Special character required", status: 400 },
+    { code: "errors.authenticationfailed", default: "Authentication failed", status: 401 },
+    { code: "errors.noregistereduser", default: "No registered user", status: 401 },
+    { code: "errors.badcredentials", default: "Bad credentials", status: 401 },
+    { code: "errors.unauthorizedorganisation", default: "Unauthorized organisation", status: 403 },
+    { code: "errors.unauthorizedextension", default: "Unauthorized extension", status: 403 },
+    { code: "errors.unauthorizeduser", default: "Unauthorized user", status: 403 },
+    { code: "errors.usernotinorganisation", default: "User not in organisation", status: 403 },
+    { code: "errors.noadminprivilege", default: "No admin privilege", status: 403 },
+    { code: "errors.dashboardLocked", default: "Dashboard locked", status: 403 },
+    { code: "errors.entitynotfound", default: "Entity not found", status: 404 },
+    { code: "errors.imagenotfound", default: "Image not found", status: 404 },
+    { code: "errors.tokennotfound", default: "Token not found", status: 404 },
+    { code: "errors.alreadyregistereduser", default: "Already registered user", status: 409 },
+    { code: "errors.devicealreadyinorganisation", default: "Device already in organisation", status: 409 },
+    { code: "errors.devicealreadywatched", default: "Device already watched", status: 409 },
+    { code: "errors.useralreadyinorganisation", default: "User already in organisation", status: 409 },
+    { code: "errors.emailfailure", default: "Email failure", status: 422 },
+    { code: "errors.requirevalidation", default: "Require validation", status: 422 },
+    { code: "errors.databaseerror", default: "Database error", status: 449 },
+    { code: "errors.graphsettingserror", default: "Microsoft graph settings error", status: 500 },
+    { code: "errors.graphusererror", default: "Microsoft graph user error", status: 500 },
+    { code: "errors.nomappableproperty", default: "No mappable property", status: 500 },
+    { code: "errors.unvalidextensioncookie", default: "Unvalid extension cookie", status: 500 },
+    { code: "errors.unexpectederror", default: "Unexpected error", status: 500 }
+  ];

package/models/index.ts

@@ -3,6 +3,7 @@ export * from "./colors";
 export * from "./deviceAlerts";
 export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
+export * from "./errors";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.37",
-    "@dative-gpi/foundation-shared-services": "0.0.37",
+    "@dative-gpi/foundation-shared-domain": "0.0.39",
+    "@dative-gpi/foundation-shared-services": "0.0.39",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "60d7b514ce598dccaef07b4696e957ea2165a7a3"
+  "gitHead": "f4259f72e37e80ea5276d61fa030956976738397"
 }

package/styles/components/fs_color.scss

@@ -1,6 +1,6 @@
 .fs-color {
-    display: flex;
     background-color: var(--fs-color-background-color) !important;
     border-color: var(--fs-color-border-color) !important;
     color: var(--fs-color-color);
+    display: flex;
 }

package/styles/components/fs_container.scss

@@ -1,16 +1,16 @@
 .fs-container {
-    display: flex;
-    padding: var(--fs-container-padding);
     background-color: var(--fs-container-background-color);
+    padding: var(--fs-container-padding);
+    display: flex;
 
     &-border {
-        border-radius: 4px;
         border: 1px solid var(--fs-container-border-color);
+        border-radius: 4px;
     }
 
     &-elevation {
-        margin: 4px;
-        border-radius: 4px;
         box-shadow: 0px 1px 8px 0px #00000029;
+        border-radius: 4px;
+        margin: 4px;
     }
 }

package/styles/components/fs_error_toast.scss

@@ -0,0 +1,5 @@
+.fs-error-toast {
+    border-radius: var(--fs-error-toast-border-radius);
+    background-color: var(--fs-error-toast-background-color);
+    color: var(--fs-error-toast-color);
+}

package/styles/components/fs_option_group.scss

@@ -0,0 +1,7 @@
+.fs-option-group {
+    border-radius: var(--fs-option-group-border-radius) !important;
+    border: var(--fs-option-group-border-size) solid !important;
+    width: fit-content;
+
+    border-color: var(--fs-option-group-border-color) !important;
+}

package/styles/components/fs_span.scss

@@ -7,7 +7,7 @@
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
 .fs-span-ellipsis {

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_date_field.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
+@import "fs_error_toast.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_form.scss";
@@ -32,6 +33,7 @@
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
+@import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";

package/utils/error.ts

@@ -0,0 +1,5 @@
+import { Errors } from "../models/errors";
+
+export const getError = (code: string): { code: string, default: string, status: number } => {
+    return Errors.find(e => e.code === code) || { code: "errors.unexpectederror", default: "Unexpected error", status: 500 };
+};

package/utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./color";
 export * from "./css";
 export * from "./icons";
+export * from "./error";
 export * from "./levenshtein";
 export * from "./lexical";
 export * from "./sort";