@eccenca/gui-elements 24.0.1 → 24.1.0-rc.1

package/src/components/ContentGroup/ContentGroup.tsx

@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+    Divider,
+    Icon,
+    IconButton,
+    OverflowText,
+    Section,
+    SectionHeader,
+    Spacing,
+    StickyTarget,
+    StickyTargetProps,
+    Toolbar,
+    ToolbarSection,
+    Tooltip,
+} from "../index";
+
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+    children,
+    className = "",
+    title,
+    contextInfo,
+    annotation,
+    actionOptions,
+    isCollapsed = false,
+    textToggleCollapse,
+    handlerToggleCollapse,
+    borderMainConnection = false,
+    borderSubConnection = false,
+    level = 1,
+    minimumHeadlineLevel = 3,
+    whitespaceSize = "small",
+    style,
+    stickyHeaderProps,
+    description,
+    hideGroupDivider,
+    contentProps,
+    ...otherContentWrapperProps
+}: ContentGroupProps) => {
+    const displayHeader = title || handlerToggleCollapse;
+
+    let borderGradient: string[] | undefined = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+            try {
+                const color = Color(borderColor);
+
+                acc.push(
+                    `${color.rgb().toString()} ` +
+                        `${(index / borderColors.length) * 100}% ` +
+                        `${((index + 1) / borderColors.length) * 100}%`
+                );
+            } catch {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+
+    const headerContent = displayHeader ? (
+        <>
+            <SectionHeader className={`${eccgui}-contentgroup__header`}>
+                <Toolbar>
+                    {handlerToggleCollapse && (
+                        <ToolbarSection>
+                            <IconButton
+                                className={`${eccgui}-contentgroup__header__toggler`}
+                                name={isCollapsed ? "toggler-showmore" : "toggler-showless"}
+                                text={textToggleCollapse ?? (isCollapsed ? "Show more" : "Show less")}
+                                onClick={handlerToggleCollapse}
+                            />
+                            <Spacing vertical size="small" />
+                        </ToolbarSection>
+                    )}
+                    {title && (
+                        <ToolbarSection canShrink>
+                            {React.createElement(
+                                "h" +
+                                    Math.min(
+                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+                                        6
+                                    ).toString(),
+                                {
+                                    children: <OverflowText>{title}</OverflowText>,
+                                    className: `${eccgui}-contentgroup__header__title`,
+                                }
+                            )}
+                            {description && (
+                                <>
+                                    <Spacing vertical size="tiny" />
+                                    <Tooltip content={description}>
+                                        <Icon name="item-info" small className="dmapp--text-info" />
+                                    </Tooltip>
+                                </>
+                            )}
+                        </ToolbarSection>
+                    )}
+                    {contextInfoElements &&
+                        contextInfoElements[0]?.props &&
+                        Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+                            <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
+                                <div className={`${eccgui}-contentgroup__content `}>
+                                    <Spacing vertical size="tiny" />
+                                    {contextInfoElements}
+                                </div>
+                            </ToolbarSection>
+                        )}
+                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                        <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
+                            <Spacing vertical size="small" />
+                            {actionOptions}
+                        </ToolbarSection>
+                    )}
+                </Toolbar>
+            </SectionHeader>
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    {!hideGroupDivider && <Divider addSpacing="small" />}
+                    <Spacing size={whitespaceSize} />
+                </>
+            )}
+        </>
+    ) : (
+        <></>
+    );
+
+    return (
+        <Section
+            className={
+                `${eccgui}-contentgroup` +
+                (className ? ` ${className}` : "") +
+                (whitespaceSize ? ` ${eccgui}-contentgroup--padding-${whitespaceSize}` : "") +
+                (borderMainConnection ? ` ${eccgui}-contentgroup--border-main` : "") +
+                (borderSubConnection ? ` ${eccgui}-contentgroup--border-sub` : "")
+            }
+            style={
+                borderGradient
+                    ? ({
+                          ...(style ?? {}),
+                          [`--${eccgui}-color-contentgroup-border-sub`]: borderGradient.join(", "),
+                      } as React.CSSProperties)
+                    : style
+            }
+            {...otherContentWrapperProps}
+        >
+            {headerContent && stickyHeaderProps ? (
+                <StickyTarget {...stickyHeaderProps}>{headerContent}</StickyTarget>
+            ) : (
+                headerContent
+            )}
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    <div className={`${eccgui}-contentgroup__content`}>
+                        <div
+                            className={classNames(`${eccgui}-contentgroup__content__body`, contentClassName)}
+                            {...otherContentProps}
+                        >
+                            {children}
+                        </div>
+                        {contextInfo && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__context`}>{contextInfoElements}</div>
+                        )}
+                        {annotation && <div>{annotation}</div>}
+                        {actionOptions && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__options`}>{actionOptions}</div>
+                        )}
+                    </div>
+                </>
+            )}
+        </Section>
+    );
+};

package/src/components/ContentGroup/_contentgroup.scss

@@ -0,0 +1,56 @@
+$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
+$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+
+.#{$eccgui}-contentgroup {
+    --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
+    --#{$eccgui}-color-contentgroup-border-sub: #{$eccgui-color-scontentgroup-border-sub};
+}
+
+.#{$eccgui}-contentgroup--border-main {
+    border-left: 0.25 * $eccgui-size-block-whitespace solid
+        var(--#{$eccgui}-color-contentgroup-border-main, #{$eccgui-color-scontentgroup-border-main});
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-left: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--border-sub {
+    position: relative;
+    border-right: 0.25 * $eccgui-size-block-whitespace solid transparent;
+
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
+        width: 0.25 * $eccgui-size-block-whitespace;
+        content: " ";
+        background-color: var(--#{$eccgui}-color-contentgroup-border-sub, #{$eccgui-color-scontentgroup-border-sub});
+        background-image: linear-gradient(to bottom, var(--#{$eccgui}-color-contentgroup-border-sub));
+    }
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-right: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--padding-small {
+    + .#{$eccgui}-contentgroup {
+        margin-top: 0.5 * $eccgui-size-block-whitespace;
+    }
+
+    > .#{$eccgui}-contentgroup__content {
+        column-gap: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup__content {
+    display: flex;
+}
+
+.#{$eccgui}-contentgroup__content__body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+}

package/src/components/TextField/stories/TextField.stories.tsx

@@ -31,6 +31,7 @@ Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
     readOnly: false,
+    disabled: false,
 };
 
 /** Text field with default value that contains a zero width/invisible character.
@@ -46,7 +47,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
                         const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
-                        return info.fullLabel;
+                        return info?.fullLabel;
                     })
                     .join(", ");
                 alert("Invisible character detected in input string. Code points: " + codePointsString);

package/src/components/index.scss

@@ -41,3 +41,4 @@
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
+@import "./ContentGroup/contentgroup";

package/src/components/index.ts

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 
 export * from "./interfaces";

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { CodeEditor } from "./CodeMirror";
 
 export default {
@@ -11,6 +13,9 @@ export default {
         onChange: {
             action: "value changed",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof CodeEditor>;
 
@@ -22,3 +27,28 @@ BasicExample.args = {
     mode: "markdown",
     defaultValue: "**test me**",
 };
+
+export const LinterExample = TemplateFull.bind({});
+LinterExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    useLinting: true,
+    autoFocus: true,
+};
+
+export const DisabledExample = TemplateFull.bind({});
+DisabledExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    disabled: true,
+};
+
+export const IntentExample = TemplateFull.bind({});
+IntentExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    intent: "warning",
+};

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,11 +1,14 @@
-import React, { useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
+import { lintGutter } from "@codemirror/lint";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
+import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -14,6 +17,8 @@ import {
     supportedCodeEditorModes,
     useCodeMirrorModeExtension,
 } from "./hooks/useCodemirrorModeExtension.hooks";
+import { jsLinter } from "./linters/jsLinter";
+import { turtleLinter } from "./linters/turtleLinter";
 //adaptations
 import {
     adaptedCodeFolding,
@@ -25,10 +30,11 @@ import {
     adaptedLineNumbers,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
+import { ExtensionCreator } from "./types";
 
-export interface CodeEditorProps {
+export interface CodeEditorProps extends TestableComponent {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setEditorView?: (editor: EditorView | undefined) => any;
+    setEditorView?: (editor: EditorView | undefined) => void;
     /**
      * `name` attribute of connected textarea element.
      */
@@ -50,7 +56,7 @@ export interface CodeEditorProps {
     /**
      *  Called when the focus status changes
      */
-    onFocusChange?: (focused: boolean) => any;
+    onFocusChange?: (focused: boolean) => void;
     /**
      * Called when the user presses a key
      */
@@ -62,7 +68,7 @@ export interface CodeEditorProps {
     /**
      * Called when the user selects text
      */
-    onSelection?: (ranges: { from: number; to: number }[]) => any;
+    onSelection?: (ranges: { from: number; to: number }[]) => void;
     /**
      * Called when the cursor position changes
      */
@@ -133,6 +139,23 @@ export interface CodeEditorProps {
      * 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;
+    /**
+     * Enables linting feature in the editor ("turtle" and "javascript" modes can use linting currently).
+     */
+    useLinting?: boolean;
+
+    /**
+     * Autofocus the editor when it is rendered
+     */
+    autoFocus?: boolean;
+    /**
+     * Intent state of the code editor.
+     */
+    intent?: IntentTypes | "edited" | "removed";
+    /**
+     * Disables the editor.
+     */
+    disabled?: boolean;
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
@@ -140,6 +163,11 @@ const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys]
 const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
     flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
 
+const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<ExtensionCreator>> = new Map([
+    ["turtle", [turtleLinter]],
+    ["javascript", [jsLinter]],
+]);
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
@@ -170,9 +198,30 @@ export const CodeEditor = ({
     tabForceSpaceForModes = ["python", "yaml"],
     enableTab = false,
     height,
+    useLinting = false,
+    "data-test-id": dataTestId,
+    autoFocus = false,
+    disabled = false,
+    intent,
+    ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
 
+    const linters = useMemo(() => {
+        if (!mode) {
+            return [];
+        }
+
+        const values = [lintGutter()];
+
+        const linters = ModeLinterMap.get(mode);
+        if (linters) {
+            values.push(...linters.map((linter) => linter()));
+        }
+
+        return values;
+    }, [mode]);
+
     const onKeyDownHandler = (event: KeyboardEvent, view: EditorView) => {
         if (onKeyDown && !onKeyDown(event)) {
             if (event.key === "Enter") {
@@ -219,13 +268,22 @@ export const CodeEditor = ({
             keymap?.of(keyMapConfigs),
             EditorState?.tabSize.of(tabIntentSize),
             EditorState?.readOnly.of(readOnly),
+            EditorView?.editable.of(!disabled),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
-                onChange && onChange(v.state.doc.toString());
+                if (disabled) return;
+
+                if (onChange) {
+                    onChange(v.state.doc.toString());
+                }
 
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
+                if (onFocusChange) {
+                    v.view.dom.className += ` ${eccgui}-intent--${intent}`;
+                }
+
                 if (onCursorChange) {
                     const cursorPosition = v.state.selection.main.head ?? 0;
                     const editorRect = v.view.dom.getBoundingClientRect();
@@ -250,6 +308,7 @@ export const CodeEditor = ({
             addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
             addExtensionsFor(wrapLines, EditorView?.lineWrapping),
             addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
+            addExtensionsFor(useLinting, ...linters),
             additionalExtensions,
         ];
 
@@ -265,11 +324,27 @@ export const CodeEditor = ({
             view.dom.style.height = typeof height === "string" ? height : `${height}px`;
         }
 
-        setEditorView && setEditorView(view);
+        if (disabled) {
+            view.dom.className += ` ${eccgui}-disabled`;
+        }
+
+        if (intent) {
+            view.dom.className += ` ${eccgui}-intent--${intent}`;
+        }
+
+        if (autoFocus) {
+            view.focus();
+        }
+
+        if (setEditorView) {
+            setEditorView(view);
+        }
 
         return () => {
             view.destroy();
-            setEditorView && setEditorView(undefined);
+            if (setEditorView) {
+                setEditorView(undefined);
+            }
         };
     }, [parent.current, mode, preventLineNumbers]);
 
@@ -279,11 +354,13 @@ export const CodeEditor = ({
             // overwrite/extend some attributes
             id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
-            data-test-id="codemirror-wrapper"
+            // @deprecated (v25) fallback with static test id will be removed
+            data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
                 (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
             }
+            {...otherCodeEditorProps}
         />
     );
 };