Merge remote-tracking branch 'origin/develop' into feature/newMappingSuggestion-CMEM-5433

Author: haschek

CHANGELOG.md

@@ -8,7 +8,31 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
--   New icons: "item-magic-edit"
+-   `CntentGroup` 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
+    -   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` component
+    -   added `additionalElements` property to display elements at the end of the label
+-   `<NodeContent />`
+    -   `resizeDirections` to specifiy the axis that can be used to resize the node
+    -   `resizeMaxDimensions` to add maximum values for resizing height/width
+-   New icons:
+    -   "item-magic-edit": icon for "magic" edit suggestions
+    -   "artefact-task-concatenatetofile": icon for "Concatenate to file" operator
+
+### Changed
+
+-   `<ReactFlow />`
+    -   property color for `graph` configuration was adjusted
+
+## [24.0.1] - 2025-02-06
 
 ### Changed
 
@@ -17,7 +41,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Fixed
 
 -   `MultiSelect`:
-    -    Old suggestions might be shown for a very short time when typing in a new search query.
+    -   Old suggestions might be shown for a very short time when typing in a new search query.
+-   `CodeEditor`:
+    -   Broken highlighting for editor modes that leveraged adapted legacy modes.
 
 ## [24.0.0] - 2024-12-17
 
@@ -97,8 +123,6 @@ This is a major release, and it might be not compatible with your current usage
     -   link color and separation char were adjusted
 -   `<Markdown/>`
     -   align blocks for language specific code to default code blocks
--   `<ReactFlow />`
-    -   property color for `graph` configuration was adjusted
 -   switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
 -   Remove duplicated icon names `artefact-customtask*` and only keep `artefact-task*` names.
 -   `<OverviewItemDepiction/>`

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.0",
+    "version": "24.0.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -72,17 +72,23 @@
         "@blueprintjs/core": "^5.16.2",
         "@blueprintjs/select": "^5.3.7",
         "@carbon/icons": "^11.53.0",
-        "@carbon/react": "^1.72.0",
+        "@carbon/react": "1.72.0",
+        "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
+        "@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",
@@ -126,7 +132,9 @@
         "@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",

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/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, lineNumbers, Rect } from "@codemirror/view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { CodeEditor } from "../../extensions/codemirror/CodeMirror";
+import { CodeEditor, CodeEditorProps } from "../../extensions/codemirror/CodeMirror";
 //hooks
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -15,23 +15,23 @@ export interface IRange {
 
 export interface ExtendedCodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setCM: (editor: EditorView | undefined) => any;
+    setCM: (editor: EditorView | undefined) => void;
     // Called whenever the editor content changes
-    onChange: (value: string) => any;
+    onChange: (value: string) => void;
     // Called when the cursor position changes
-    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
     // The editor theme, e.g. "sparql"
     mode?: SupportedCodeEditorModes;
     // The initial value of the editor
     initialValue: string;
     // Called when the focus status changes
-    onFocusChange: (focused: boolean) => any;
+    onFocusChange: (focused: boolean) => void;
     // Called when the user presses a key
     onKeyDown: (event: KeyboardEvent) => boolean;
     // function invoked when any click occurs
     onMouseDown?: (view: EditorView) => void;
     // Called when the user selects text
-    onSelection: (ranges: IRange[]) => any;
+    onSelection: (ranges: IRange[]) => void;
     // If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
     enableTab?: boolean;
     /** Placeholder to be shown when no text has been entered, yet. */
@@ -40,6 +40,27 @@ export interface ExtendedCodeEditorProps {
     showScrollBar?: boolean;
     /** allow multiline entries when new line characters are entered */
     multiline?: boolean;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<
+        CodeEditorProps,
+        | "defaultValue"
+        | "setEditorView"
+        | "onChange"
+        | "onCursorChange"
+        | "onFocusChange"
+        | "onKeyDown"
+        | "onSelection"
+        | "onMouseDown"
+        | "shouldHaveMinimalSetup"
+        | "preventLineNumbers"
+        | "mode"
+        | "name"
+        | "enableTab"
+        | "additionalExtensions"
+        | "outerDivAttributes"
+    >;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -58,6 +79,7 @@ export const ExtendedCodeEditor = ({
     placeholder,
     onCursorChange,
     onSelection,
+    codeEditorProps,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -88,6 +110,7 @@ export const ExtendedCodeEditor = ({
                     multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`
                 }`,
             }}
+            {...codeEditorProps}
         />
     );
 };

src/components/ContentGroup/ContentGroup.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+
+export default {
+    title: "Components/ContentGroup",
+    component: ContentGroup,
+    argTypes: {
+        handlerToggleCollapse: {
+            action: "toggle collapse",
+        },
+    },
+} as Meta<typeof ContentGroup>;
+
+const TemplateFull: StoryFn<typeof ContentGroup> = (args) => <ContentGroup {...args} />;
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    title: "Content group title",
+    contextInfo: <Badge children={100} maxLength={3} intent={"warning"} title="Found warnings context." />,
+    annotation: (
+        <Tag backgroundColor={"purple"} round>
+            Context tag
+        </Tag>
+    ),
+    actionOptions: (
+        <>
+            <IconButton name="item-remove" text="Example remove tooltip" disruptive />
+        </>
+    ),
+    isCollapsed: false,
+    handlerToggleCollapse: () => {},
+    borderMainConnection: true,
+    borderSubConnection: ["red", "blue"],
+    level: 1,
+    minimumHeadlineLevel: 5,
+    whitespaceSize: "small",
+    description: "More context description by tooltip.",
+    hideGroupDivider: false,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={3} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+};