Merge branch 'main' into 191-well-completion-module

frontend/.dependency-cruiser.cjs

@@ -15,8 +15,7 @@ module.exports = {
         },
         {
             name: "lib-has-dependencies-in-src-tree",
-            comment:
-                "Files in the 'lib' folder are not allowed to import from project files from outside the 'lib' folder.",
+            comment: "Files in the 'lib' folder must not be imported from project files from outside the 'lib' folder.",
             severity: "error",
             from: {
                 path: "^(src/lib)",
@@ -26,27 +25,26 @@ module.exports = {
             },
         },
         {
-            name: "shared-used-outside-modules",
+            name: "access-to-api-not-via-main-index-file",
             comment:
-                "Files in the 'modules/_shared' folder are not allowed to be imported from files outside the 'modules' folder.",
+                "Models, types, objects and functions of the API should only be accessed through the main index file (import {...} from '@api').",
             severity: "error",
             from: {
-                pathNot: "^(src/modules)",
+                pathNot: "^(src/api)",
             },
             to: {
-                path: "^(src/modules/_shared)",
+                path: "^(src/api/(?!index.ts))",
             },
         },
         {
-            name: "access-to-api-not-via-main-index-file",
-            comment:
-                "Models, types, objects and functions of the API should only be accessed through the main index file (import {...} from '@api').",
+            name: "private-folder-accessed-from-outside",
+            comment: "Files in private folders (e.g. '_utils/') must not be imported from files on the outside.",
             severity: "error",
             from: {
-                pathNot: "^(src/api)",
+                path: "^src/(api|framework|lib|modules)",
             },
             to: {
-                path: "^(src/api/(?!index.ts))",
+                path: "^src/(?!$1/).*(/_[^/]+/)",
             },
         },
     ],

frontend/src/framework/components/ChannelSelect/channelSelect.tsx

@@ -6,8 +6,8 @@ import {
     Broadcaster,
     checkChannelCompatibility,
 } from "@framework/Broadcaster";
+import { BaseComponentProps } from "@lib/components/BaseComponent";
 import { Dropdown } from "@lib/components/Dropdown";
-import { BaseComponentProps } from "@lib/components/_BaseComponent";
 
 export type ChannelSelectProps = {
     initialChannel?: string;

frontend/src/framework/internal/components/ColorPaletteSettings/colorPaletteSettings.tsx

@@ -12,9 +12,9 @@ import { IconButton } from "@lib/components/IconButton";
 import { Input } from "@lib/components/Input";
 import { Label } from "@lib/components/Label";
 import { Overlay } from "@lib/components/Overlay";
-import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { ColorPalette } from "@lib/utils/ColorPalette";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { convertRemToPixels } from "@lib/utils/screenUnitConversions";
 
 enum ColorPaletteSelectorType {

frontend/src/framework/internal/components/NavBar/navBar.tsx

@@ -22,8 +22,8 @@ import {
 import { Badge } from "@lib/components/Badge";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
-import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
 import { isDevMode } from "@lib/utils/devMode";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { useQueryClient } from "@tanstack/react-query";
 
 type NavBarProps = {

frontend/src/framework/internal/components/Settings/settings.tsx

@@ -4,7 +4,7 @@ import { useStoreValue } from "@framework/StateStore";
 import { DrawerContent, Workbench } from "@framework/Workbench";
 import { useActiveModuleId, useModuleInstances } from "@framework/internal/hooks/workbenchHooks";
 import { Cog6ToothIcon } from "@heroicons/react/20/solid";
-import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import { ModulesList } from "./private-components/modulesList";
 import { Setting } from "./private-components/setting";

frontend/src/lib/components/ApiStateWrapper/apiStateWrapper.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { QueryObserverResult } from "@tanstack/react-query";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
-
 export type ApiStateWrapperProps = {
     apiResult: QueryObserverResult;
     loadingComponent: React.ReactNode;

frontend/src/lib/components/Badge/badge.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Badge as MuiBadge, BadgeProps as MuiBadgeProps } from "@mui/base";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
-
 export type BadgeProps = MuiBadgeProps;
 
 export const Badge: React.FC<BadgeProps> = (props) => {

frontend/src/lib/components/_BaseComponent/baseComponent.tsx → frontend/src/lib/components/BaseComponent/baseComponent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 export type BaseComponentProps = {
     disabled?: boolean;

frontend/src/lib/components/Button/button.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Button as ButtonUnstyled, ButtonProps as ButtonUnstyledProps } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
 
 export type ButtonProps = {
     variant?: "text" | "outlined" | "contained";

frontend/src/lib/components/Checkbox/checkbox.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
 import { v4 } from "uuid";
 
-import { BaseComponent, BaseComponentProps } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 
 export type CheckboxProps = {
     id?: string;

frontend/src/lib/components/CircularProgress/circularProgress.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
-import { OptionalValues, withDefaults } from "../_utils/components";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
+import { OptionalValues, withDefaults } from "../_component-utils/components";
 
 export type CircularProgressProps = {
     size?: "extra-small" | "small" | "medium-small" | "medium" | "large";

frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
-import { BaseComponent, BaseComponentProps } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 
 export type CollapsibleGroupProps = {
     icon?: React.ReactElement;

frontend/src/lib/components/ColorGradient/colorGradient.tsx

@@ -14,7 +14,7 @@ function makeColorSamples(steps: number, colorPalette: ColorPalette) {
         const color = colorPalette.getInterpolatedColor(i / (steps - 1));
         samples.push(
             <div
-                key={color}
+                key={`${color}-${i}`}
                 className="border border-slate-600 h-5 w-full"
                 style={{
                     backgroundColor: color,

frontend/src/lib/components/ColorTile/colorTile.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 export type ColorTileProps = {
     color: string;

frontend/src/lib/components/ColorTileGroup/colorTileGroup.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import { ColorTile } from "@lib/components/ColorTile";
 import { ColorPalette } from "@lib/utils/ColorPalette";
-
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 export type ColorPaletteProps = {
     colorPalette: ColorPalette;

frontend/src/lib/components/Dialog/dialog.tsx

@@ -3,8 +3,7 @@ import ReactDOM from "react-dom";
 
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useElementSize } from "@lib/hooks/useElementSize";
-
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 export type DialogProps = {
     title?: string;

frontend/src/lib/components/Dropdown/dropdown.tsx

@@ -3,14 +3,14 @@ import ReactDOM from "react-dom";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
 
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 import { IconButton } from "../IconButton";
 import { Input } from "../Input";
 import { Virtualization } from "../Virtualization";
-import { BaseComponent, BaseComponentProps } from "../_BaseComponent";
-import { withDefaults } from "../_utils/components";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { withDefaults } from "../_component-utils/components";
 
 export type DropdownOption = {
     value: string;

frontend/src/lib/components/IconButton/iconButton.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Button as ButtonUnstyled, ButtonProps as ButtonUnstyledProps } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
 
 export type IconButtonProps = {
     children: React.ReactNode;

frontend/src/lib/components/Input/input.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Input as InputUnstyled, InputProps as InputUnstyledProps } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
 
 export type InputProps = InputUnstyledProps & {
     wrapperStyle?: React.CSSProperties;

frontend/src/lib/components/Label/label.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
 import { LinkIcon } from "@heroicons/react/20/solid";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import { v4 } from "uuid";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
-
 export type LabelProps = {
     text: string;
     children: React.ReactElement;

frontend/src/lib/components/RadioGroup/radioGroup.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
 import { v4 } from "uuid";
 
-import { BaseComponent } from "../_BaseComponent";
-import { BaseComponentProps } from "../_BaseComponent/baseComponent";
-import { OptionalValues, withDefaults } from "../_utils/components";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
+import { BaseComponentProps } from "../BaseComponent";
+import { OptionalValues, withDefaults } from "../_component-utils/components";
 
 export type RadioGroupProps<T = string | number> = {
     name?: string;

frontend/src/lib/components/ResizablePanels/resizablePanels.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 
 import { useElementSize } from "@lib/hooks/useElementSize";
-
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 type ResizablePanelsProps = {
     id: string;

frontend/src/lib/components/Select/select.tsx

@@ -1,12 +1,12 @@
 import React, { Key } from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
 
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 import { Input } from "../Input";
 import { Virtualization } from "../Virtualization";
-import { BaseComponent, BaseComponentProps } from "../_BaseComponent/baseComponent";
-import { withDefaults } from "../_utils/components";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { withDefaults } from "../_component-utils/components";
 
 export type SelectOption = {
     value: string;

frontend/src/lib/components/Slider/slider.tsx

@@ -3,10 +3,10 @@ import ReactDOM from "react-dom";
 
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { Point } from "@lib/utils/geometry";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
 
 export type SliderProps = {
     valueLabelDisplay?: "auto" | "off";

frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import { TreeDataNodeMetaData } from "../private-utils/treeDataNodeTypes";
 import { TreeNodeSelection } from "../private-utils/treeNodeSelection";

frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx

@@ -8,7 +8,7 @@ import {
     QuestionMarkCircleIcon,
     XMarkIcon,
 } from "@heroicons/react/20/solid";
-import { resolveClassNames } from "@lib/components/_utils/resolveClassNames";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import "animate.css";
 

frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { XMarkIcon } from "@heroicons/react/20/solid";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 
 import _ from "lodash";
 
@@ -10,8 +11,6 @@ import { TreeData } from "./private-utils/treeData";
 import { TreeDataNode } from "./private-utils/treeDataNodeTypes";
 import { TreeNodeSelection } from "./private-utils/treeNodeSelection";
 
-import { resolveClassNames } from "../_utils/resolveClassNames";
-
 export enum Direction {
     Left = 0,
     Right,

frontend/src/lib/components/Switch/switch.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Switch as SwitchUnstyled, UseSwitchParameters, useSwitch } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent";
-import { resolveClassNames } from "../_utils/resolveClassNames";
+import { BaseComponent } from "../BaseComponent";
 
 export const Switch = React.forwardRef((props: UseSwitchParameters, ref: React.ForwardedRef<HTMLInputElement>) => {
     const { getInputProps, checked, disabled } = useSwitch(props);

frontend/src/lib/components/Table/table.tsx

@@ -4,10 +4,10 @@ import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from "@heroicons/react/20/s
 
 import { v4 } from "uuid";
 
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 import { IconButton } from "../IconButton";
 import { Input } from "../Input";
 import { Virtualization } from "../Virtualization";
-import { BaseComponent, BaseComponentProps } from "../_BaseComponent/baseComponent";
 
 export type TableHeading = {
     [key: string]: {
@@ -226,10 +226,11 @@ export const Table: React.FC<TableProps<TableHeading>> = (props) => {
                                 return (
                                     <tr
                                         key={item.id}
-                                        className={`${props.highlightFilter && props.highlightFilter(item.values)
-                                            ? "bg-blue-50 "
-                                            : ""
-                                            } hover:bg-blue-100`}
+                                        className={`${
+                                            props.highlightFilter && props.highlightFilter(item.values)
+                                                ? "bg-blue-50 "
+                                                : ""
+                                        } hover:bg-blue-100`}
                                         onPointerOver={() => handlePointerOver(item.values)}
                                         onPointerDown={() => handlePointerDown(item.values)}
                                         style={{ height: 30 }}

frontend/src/lib/components/ToggleButton/toggleButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Button as ButtonUnstyled, ButtonProps as ButtonUnstyledProps } from "@mui/base";
 
-import { BaseComponent } from "../_BaseComponent/baseComponent";
+import { BaseComponent } from "../BaseComponent";
 
 export type ToggleButtonProps = ButtonUnstyledProps & {
     active: boolean;