Merge remote-tracking branch 'origin/develop' into fix/uriPatternEditor-CMEM-6461

Author: haschek

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<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
+    -   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 />`
+    -   added `additionalElements` property to display elements at the end of the label
+
 ### Fixed
 
 -   `CodeAutocompleteField`:

package.json

@@ -81,10 +81,13 @@
         "@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",
+        "n3": "^1.23.1",
         "re-resizable": "^6.10.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
@@ -129,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>
+    ),
+};