v4.5.4

.github/workflows/publish-development.yaml

@@ -62,7 +62,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: 18.16.0
+        node-version: 20.9.0
     - name: Build
       run: |
         #!/bin/bash

.github/workflows/publish-production.yaml

@@ -62,7 +62,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: 18.16.0
+        node-version: 20.9.0
     - name: Build
       run: |
         #!/bin/bash

.github/workflows/publish-stage.yaml

@@ -62,7 +62,7 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: 18.16.0
+        node-version: 20.9.0
     - name: Build
       run: |
         #!/bin/bash

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-sass-guidelines",
+  "extends": "stylelint-config-standard-scss",
   "plugins": [
     "stylelint-order",
     "stylelint-scss"
@@ -13,6 +13,8 @@
     "order/properties-alphabetical-order": true,
     "max-nesting-depth": 9,
     "selector-max-id": 3,
+    "no-descending-specificity": null,
+    "selector-id-pattern": null,
     "selector-max-compound-selectors": 9,
     "selector-class-pattern": null,
     "selector-no-qualifying-type": [

eslint.config.mjs

@@ -0,0 +1,51 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import jsxA11Y from "eslint-plugin-jsx-a11y";
+import prettier from "eslint-plugin-prettier";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [...fixupConfigRules(
+    compat.extends("react-app", "airbnb", "plugin:jsx-a11y/recommended", "prettier"),
+), {
+    plugins: {
+        "jsx-a11y": fixupPluginRules(jsxA11Y),
+        prettier
+    },
+
+    rules: {
+        camelcase: 0,
+        "no-nested-ternary": 0,
+        "no-param-reassign": 0,
+        "no-return-assign": 0,
+        "no-restricted-syntax": 0,
+        "react/jsx-filename-extension": 0,
+        "react/jsx-props-no-spreading": 0,
+        "react/destructuring-assignment": 0,
+        "react/prop-types": 0,
+        "react/no-danger": 0,
+        "no-unused-vars": 1,
+        "react/button-has-type": 1,
+        "import/no-named-as-default": 0,
+        "import/no-named-as-default-member": 0,
+        "no-underscore-dangle": ["warn", {
+            allow: ["_kmq", "_kmk"],
+        }],
+
+        "jsx-a11y/label-has-associated-control": 0,
+        "react/jsx-no-bind": 0,
+
+        "react/no-unstable-nested-components": ["warn", {
+            allowAsProps: true,
+        }],
+    },
+}];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harperdb-studio",
-  "version": "4.5.3",
+  "version": "4.5.5",
   "description": "A UI for HarperDB",
   "deploymentUrl": "studio.harperdb.io",
   "private": true,
@@ -66,19 +66,24 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
-    "eslint": "^8.32.0",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.10.0",
+    "eslint": "^9.10.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^5.0.1",
-    "postcss-custom-properties": "^13.0.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "postcss-custom-properties": "^14.0.1",
     "prettier": "^3.1.0",
     "sass": "^1.46.0",
     "stylelint": "^16.0.2",
-    "stylelint-config-sass-guidelines": "^11.0.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-sass-guidelines": "^12.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.1",
-    "stylelint-scss": "^6.0.0"
+    "stylelint-scss": "^6.0.0",
+    "typescript": "^5.6.2"
   }
 }

src/app.scss

@@ -2,7 +2,6 @@
 @import '~bootstrap-scss/bootstrap-reboot';
 @import '~bootstrap-scss/bootstrap-grid';
 @import 'assets/styles/core/vars';
-
 @import '~bootstrap-scss/bootstrap-utilities';
 @import '~bootstrap-scss/button-group';
 @import '~bootstrap-scss/buttons';

src/assets/styles/components/_button.scss

@@ -1,8 +1,9 @@
 .btn {
   align-items: center;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 31%, rgba(0, 0, 0, 0.05) 100%);
+  background: linear-gradient(to bottom, rgb(255 255 255 / 5%) 31%, rgb(0 0 0 / 5%) 100%);
   border: 1px solid $faintest-white-overlay !important;
   border-radius: $border-radius;
+
   // box-shadow: 0 0 3px $grey-overlay !important;
   display: inline-flex;
   font-family: $font-family-sans;
@@ -22,7 +23,7 @@
   }
 
   &:active {
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 31%, rgba(255, 255, 255, 0.05) 100%);
+    background: linear-gradient(to bottom, rgb(0 0 0 / 5%) 31%, rgb(255 255 255 / 5%) 100%);
   }
 
   &.btn-sm {

src/assets/styles/components/_entity-manager.scss

@@ -10,8 +10,7 @@
       &.scrollable {
         max-height: calc(50vh - 160px);
         min-height: 49px;
-        overflow-x: hidden;
-        overflow-y: auto;
+        overflow: hidden auto;
 
         &.creating {
           max-height: calc(50vh - 209px);
@@ -39,7 +38,7 @@
           width: 100%;
 
           input {
-            background: rgba(255, 255, 255, 0.3);
+            background: rgb(255 255 255 / 30%);
             border-color: transparent;
             color: $color-black;
 

src/assets/styles/components/_error-boundary.scss

@@ -4,8 +4,7 @@
 
   .error-message {
     color: $color-danger;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     white-space: nowrap;
   }
 

src/assets/styles/components/_forms.scss

@@ -3,7 +3,6 @@ select,
 textarea,
 .fake-input,
 .form-control {
-
   border: 1px solid $lighter-grey-overlay !important;
   border-radius: $border-radius;
   box-shadow: none !important;

src/assets/styles/components/_loader.scss

@@ -24,11 +24,10 @@
     width: 270px !important;
 
     .card-body {
-      align-content: center;
       display: flex;
       flex-direction: column;
       height: 205px;
-      justify-content: center;
+      place-content: center center;
     }
   }
 }

src/assets/styles/components/_modal.scss

@@ -9,11 +9,11 @@
   }
 
   .instance-form-card-holder {
-    @media screen and (max-width: 991px) {
+    @media screen and (width <= 991px) {
       margin-bottom: 1rem;
 
       &:last-child {
-        @media screen and (max-width: 991px) {
+        @media screen and (width <= 991px) {
           margin-bottom: 0;
         }
       }

src/assets/styles/components/_react-select.scss

@@ -54,8 +54,7 @@
     background: $color-white;
     border-bottom: 1px solid $color-lightgrey;
     color: $color-black;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     padding-bottom: 10px;
     padding-top: 10px;
     white-space: nowrap !important;

src/assets/styles/components/_react-table.scss

@@ -3,11 +3,10 @@
     border-bottom: 1px solid $lighter-grey-overlay;
     font-size: 12px;
     min-height: calc(100vh - 328px);
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
     width: 100%;
 
-    @media screen and (max-width: 767px) {
+    @media screen and (width <= 767px) {
       min-height: calc(100vh - 626px);
     }
 
@@ -119,7 +118,7 @@
     .btn {
       max-width: 100px;
 
-      @media screen and (max-width: 575px) {
+      @media screen and (width <= 575px) {
         max-width: 100%;
       }
     }

src/assets/styles/components/_subnav.scss

@@ -15,7 +15,7 @@
   width: 100%;
   z-index: 98 !important;
 
-  @media screen and (max-width: 991px) {
+  @media screen and (width <= 991px) {
     padding: 5px 0;
   }
 
@@ -97,7 +97,7 @@
     &.instance-nav {
       justify-content: flex-end !important;
 
-      @media screen and (max-width: 767px) {
+      @media screen and (width <= 767px) {
         justify-content: center !important;
       }
     }
@@ -114,7 +114,7 @@
       .react-select-container {
         max-width: 287px;
 
-        @media screen and (max-width: 991px) {
+        @media screen and (width <= 991px) {
           max-width: 100%;
         }
       }
@@ -154,7 +154,7 @@
     margin-left: 15px;
     width: 35px;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (width >= 768px) {
       width: 105px;
     }
   }

src/assets/styles/components/_topnav.scss

@@ -13,7 +13,7 @@
   width: 100%;
   z-index: 99 !important;
 
-  @media screen and (max-width: 991px) {
+  @media screen and (width <= 991px) {
     padding: 0 1rem;
   }
 
@@ -34,7 +34,7 @@
       height: 30px;
       width: 120px;
 
-      @media screen and (max-width: 530px) {
+      @media screen and (width <= 530px) {
         background-image: url('../../images/logo/logo_dog_only.png');
         width: 30px;
       }
@@ -51,7 +51,7 @@
       margin-left: 1rem;
       white-space: nowrap;
 
-      @media screen and (max-width: 511px) {
+      @media screen and (width <= 511px) {
         margin-left: 0.5rem;
       }
 
@@ -88,7 +88,7 @@
       overflow: hidden;
       transition: flex 500ms;
 
-      @media screen and (max-width: 511px) {
+      @media screen and (width <= 511px) {
         margin-left: 0.5rem;
       }
 
@@ -106,7 +106,7 @@
         justify-content: center;
         padding: 0 15px;
 
-        @media screen and (max-width: 511px) {
+        @media screen and (width <= 511px) {
           padding: 0 5px;
         }
       }
@@ -115,7 +115,7 @@
         border-right: 1px solid $faint-white-overlay;
         white-space: nowrap;
 
-        @media screen and (max-width: 511px) {
+        @media screen and (width <= 511px) {
           font-size: 10px;
           font-weight: $font-weight-bold;
           max-width: 75px;