Release v24.1.0 into main branch

.storybook/helpers.js

@@ -5,6 +5,7 @@ import { Icon, TestIcon } from "../src/";
 import { Definitions as IntentDefinitions } from "../src/common/Intent";
 
 import canonicalIcons from "./../src/components/Icon/canonicalIconNames";
+
 // argTypes helpers
 
 const allIcons = new Map([
@@ -20,17 +21,19 @@ export const helpersArgTypes = {
         mapping: {
             "Not set": undefined,
             Handler: () => {
+                // eslint-disable-next-line no-undef
                 alert("clicked");
             },
         },
     },
     exampleIcon: {
         control: "select",
-        options: ["Not set", "Test icon", ...Object.keys(canonicalIcons)],
+        options: ["Not set", "Test icon", ...Object.keys(canonicalIcons), "Icon with tooltip"],
         mapping: {
             "Not set": undefined,
             "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
             ...Object.fromEntries(allIcons),
+            "Icon with tooltip": <Icon name={"item-info"} intent="info" tooltipText="Example tooltip" />,
         },
     },
     exampleIntent: {

CHANGELOG.md

@@ -6,6 +6,86 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<CardActions />`
+    -   `noWrap` property to display them without wrapping its children on multiple lines
+-   `<ContentGroup />` component
+    -   Manage display of a grouped content section.
+    -   Add info, actions and context annotations by using its properties.
+    -   Can be nested into each other.
+-   `<CodeEditor />`
+    -   implemented support for linting which is enabled via `useLinting` prop
+        -   `turtle` and `javascript` are currently supported languages for linting
+    -   `useToolbar` property to display toolbar if the `mode` is supported
+        -   currently `markdown` mode is integrated, including support for headlines `<h1-6>`, `<blockquote>`, `<code>` block and inline, `<b>` bold, `<i>`, italic, `<del>` strike through, `<ul>`, `<ol>` and checkbox lists, `<a>` links and `<img>` images
+    -   editor is focused on load if `autoFocus` prop is set to `true`
+    -   implemented support for `disabled` state in code editor
+    -   implemented support for `intent` states in code editor
+-   `<Label />`
+    -   `additionalElements` property to display elements at the end of the label
+    -   `inline` property to display the label component as inline block
+-   `<MenutItem />`
+    -   `tooltip` property to dislay tooltip on menu item label
+-   `<NodeContent />`
+    -   `resizeDirections` to specifiy the axis that can be used to resize the node
+    -   `resizeMaxDimensions` to add maximum values for resizing height/width
+-   `<OverviewItem />`
+    -   `hasCardWrapper` property to use a `Card` component as wrapper around it, simplifies the process to put it in a box, use `cardProps` to forward basic properties to that `Card` wrapper
+-   `<SimpleDialog />`
+    -   `actionsProps` property to forward `CardActions` properties, e.g. `noWrap`
+-   New icons:
+    -   `artefact-task-concatenatetofile`
+    -   `artefact-task-pivot`
+    -   `artefact-task-unpivot`
+    -   `item-magic-edit`
+    -   `operation-format-text-code`
+    -   `operation-format-text-bold`
+    -   `operation-format-text-italic`
+    -   `operation-format-text-strikethrough`
+    -   `operation-format-list-bullet`
+    -   `operation-format-list-checked`
+    -   `operation-format-list-numbered`
+
+### Fixed
+
+-   `<CodeAutocompleteField />`:
+    -   Code editor resets to initial value on every code editor instance re-init
+-   `<CodeEditor />`
+    -   re-render the component if the `wrapLines` property is changed after the component's render
+    -   only fire `onChange` event when the document has actually changed
+-   `<OverviewItem />`
+    -   whitespace after `Depiction` element when the `OverviewItem` ist used with `densityHigh` and `hasSpacing`
+-   `<OverviewItemActions />`
+    -   `hiddenInteractions` stay visible if they contain focused elements or opened overlays (e.g. context menus)
+-   `<TagList />`
+    -   do not create empty list items
+-   `<SearchField />`
+    -   allow to use `onClearanceHandler` and `rightElement` together
+    -   fix display of `Icon` with `tooltipText` as direct child in `rightElement`
+
+### Changed
+
+-   `<ActivityControlWidget />`
+    -   display running time after label if there is an status info to prevent a third line
+-   `<ReactFlow />`
+    -   property color for `graph` configuration was adjusted
+-   `<SearchField />`
+    -   internally forced to be managed controlled to keep `onClearanceHandler` independent from outer `value` property
+-   `<Switch />`
+    -   use always `<Label/>` component for `label` value
+-   `<StickyNoteNode />`
+    -   Refactored data structure position and dimension (breaking change)
+
+### Deprecated
+
+-   `<CodeEditor />`
+    -   fallback of static test id is removed, need then always to be set if necessary
+-   `<OverflowText />`
+    -   component won't accept properties of any name in future, only data attributes for test IDs and basic HTML element properties
+-   `<OverviewItemList />`
+    -   `densityHigh` property will be removed, use it directly on `OverviewItem` children
+
 ## [24.0.1] - 2025-02-06
 
 ### Changed

babel.config.json

@@ -1,8 +1,8 @@
 {
     "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "@babel/preset-flow"],
     "plugins": [
-        ["@babel/plugin-proposal-private-methods", { "loose": true }],
-        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
-        ["@babel/plugin-proposal-class-properties", { "loose": true }]
+        ["@babel/plugin-transform-private-methods", { "loose": true }],
+        ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+        ["@babel/plugin-transform-class-properties", { "loose": true }]
     ]
 }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.1",
+    "version": "24.1.0-rc.7",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -81,11 +81,14 @@
         "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
+        "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
+        "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "re-resizable": "^6.10.1",
+        "n3": "^1.23.1",
+        "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
@@ -103,38 +106,40 @@
         "xml-formatter": "^3.6.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+        "@babel/plugin-transform-private-methods": "^7.25.9",
+        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
+        "@babel/preset-typescript": "^7.27.0",
         "@eslint/compat": "^1.2.4",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.17.0",
-        "@storybook/addon-actions": "^8.4.7",
-        "@storybook/addon-essentials": "^8.4.7",
-        "@storybook/addon-jest": "^8.4.7",
-        "@storybook/addon-links": "^8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.7",
+        "@storybook/addon-actions": "^8.6.9",
+        "@storybook/addon-essentials": "^8.6.9",
+        "@storybook/addon-jest": "^8.6.9",
+        "@storybook/addon-links": "^8.6.9",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+        "@storybook/cli": "^8.6.9",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.7",
-        "@storybook/react-webpack5": "^8.4.7",
-        "@storybook/test": "^8.4.7",
+        "@storybook/react": "^8.6.9",
+        "@storybook/react-webpack5": "^8.6.9",
+        "@storybook/test": "^8.6.9",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.14",
+        "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.13",
+        "@types/n3": "^1.21.1",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^8.18.1",
         "@typescript-eslint/parser": "^8.18.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.20.2",
+        "chromatic": "^11.27.0",
         "eslint": "^9.17.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.1.0",
@@ -154,7 +159,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.7",
+        "storybook": "^8.6.9",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
@@ -173,7 +178,9 @@
         "**/@types/react": "^17.0.83",
         "node-sass-package-importer/**/postcss": "^8.4.49",
         "**/cross-spawn": "^7.0.5 ",
-        "**/micromatch": "^4.0.8"
+        "**/micromatch": "^4.0.8",
+        "**/@babel/runtime": "^7.26.10",
+        "**/@babel/helpers": "^7.26.10"
     },
     "husky": {
         "hooks": {

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -92,7 +92,7 @@ interface IActivityContextMenu extends TestableComponent {
 
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any;
+    action: () => void;
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
@@ -147,6 +147,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 {props.label && (
                     <OverviewItemLine small={small}>
                         {React.cloneElement(labelWrapper, {}, props.label)}
+                        {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
@@ -170,7 +171,9 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && !(props.statusMessage || tags) && (
+                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                )}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&

src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -4,7 +4,16 @@ import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
-import { Button, FieldItem, Icon, SimpleDialog, SimpleDialogProps, Tag, TagList } from "./../../../index";
+import {
+    Button,
+    CodeEditorProps,
+    FieldItem,
+    Icon,
+    SimpleDialog,
+    SimpleDialogProps,
+    Tag,
+    TagList,
+} from "./../../../index";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -32,10 +41,14 @@ export interface StickyNoteModalProps {
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
     simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<CodeEditorProps, "defaultValue" | "onChange" | "preventLinuNumbers" | "id" | "name">;
 }
 
 export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
-    ({ metaData, onClose, onSubmit, translate, simpleDialogProps }) => {
+    ({ metaData, onClose, onSubmit, translate, simpleDialogProps, codeEditorProps }) => {
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
@@ -123,6 +136,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                             refNote.current = value;
                         }}
                         defaultValue={refNote.current}
+                        {...codeEditorProps}
                     />
                 </FieldItem>
                 <FieldItem

src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,7 +1,7 @@
 $reactflow-color-graph-node: #745a85 !default;
 $reactflow-color-class-node: #3a7896 !default;
 $reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !default;
+$reactflow-color-property-node: #40a691 !default;
 $reactflow-color-implicit-edge: #ae3c74 !default;
 $reactflow-color-import-edge: $reactflow-color-graph-node !default;
 $reactflow-color-subclass-edge: $reactflow-color-class-node !default;
@@ -13,6 +13,8 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-graph {
+    /* stylelint-disable custom-property-pattern */
+    // TODO: we should correct custom property names later but atm this would lead to broken consumer apps
     --graphNode: #{$reactflow-color-graph-node};
     --classNode: #{$reactflow-color-class-node};
     --instanceNode: #{$reactflow-color-instance-node};
@@ -31,4 +33,5 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
     --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
     --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
     --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
+    /* stylelint-enable custom-property-pattern */
 }

src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,3 +1,4 @@
+$reactflow-color-project-node: #A5356E !default; // Cannot be part of a workflow but we have no other place atm to configure it
 $reactflow-color-dataset-node: #3a7896 !default;
 $reactflow-color-linking-node: #0097a7 !default;
 $reactflow-color-transform-node: #40a691 !default;
@@ -10,12 +11,14 @@ $reactflow-color-replaceable-input: #faa854 !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-workflow {
+    --projectNode: #{$reactflow-color-project-node};
     --datasetNode: #{$reactflow-color-dataset-node};
     --linkingNode: #{$reactflow-color-linking-node};
     --transformNode: #{$reactflow-color-transform-node};
     --taskNode: #{$reactflow-color-task-node};
     --workflowNode: #{$reactflow-color-workflow-node};
     --replaceableInput: #{$reactflow-color-replaceable-input};
+    --projectNodeBright: #{bright($reactflow-color-project-node)};
     --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
     --linkingNodeBright: #{bright($reactflow-color-linking-node)};
     --transformNodeBright: #{bright($reactflow-color-transform-node)};

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -219,6 +219,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
+    const currentCm = React.useRef<EditorView>()
+    currentCm.current = cm
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -235,12 +237,21 @@ const AutoSuggestion = ({
     const pathIsValid = validationResponse?.valid ?? true;
 
     React.useEffect(() => {
-        if (reInitOnInitialValueChange && initialValue != null && cm) {
+        if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
             dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+                changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
+            // Validate initial value change
+            checkValuePathValidity(initialValue)
         }
-    }, [initialValue, cm, reInitOnInitialValueChange]);
+    }, [initialValue, reInitOnInitialValueChange]);
+
+    React.useEffect(() => {
+        if(currentCm.current) {
+            // Validate initial value
+            checkValuePathValidity(initialValue)
+        }
+    }, [currentCm.current!!])
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;