@eccenca/gui-elements 23.6.0-rc.0 → 23.6.0-rc.2

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -1,7 +1,8 @@
+import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { MultiSuggestField } from "./../../../index";
+import { MultiSelectSelectionProps, MultiSuggestField } from "./../../../index";
 
 export default {
     title: "Forms/MultiSuggestField",
@@ -55,4 +56,62 @@ dropdownOnFocus.args = {
     prePopulateWithItems: false,
     itemId: (item) => item.testId,
     itemLabel: (item) => item.testLabel,
+    noResultText: "No result.",
 };
+
+const selectedItems = items.slice(1, 3);
+
+/**
+ * Set the default selected values from the client code.
+ */
+export const predefinedValues = Template.bind({});
+predefinedValues.args = {
+    items,
+    selectedItems,
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => <span data-testid={`${item.testLabel.trim()}`}>{item.testLabel}</span>,
+};
+
+/**
+ * New item creation, add to a existing list
+ */
+export const newItemCreation = Template.bind({});
+newItemCreation.args = {
+    items,
+    createNewItemFromQuery: (query) => ({ testId: `${query}-id`, testLabel: query }),
+    prePopulateWithItems: false,
+    itemId: (item) => item.testId,
+    itemLabel: (item) => item.testLabel,
+};
+
+const CreationTemplate: StoryFn = () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+    const empty = useMemo<string[]>(() => [], []);
+
+    const identity = useCallback((item: string): string => item, []);
+
+    const handleOnSelect = useCallback((params: MultiSelectSelectionProps<string>) => {
+        const selected = params.selectedItems;
+
+        setSelectedValues(selected);
+    }, []);
+
+    return (
+        <MultiSuggestField<string>
+            items={empty}
+            selectedItems={selectedValues}
+            onSelection={handleOnSelect}
+            itemId={identity}
+            itemLabel={identity}
+            createNewItemFromQuery={identity}
+            prePopulateWithItems
+        />
+    );
+};
+
+/**
+ * Completely create all items from quieries
+ */
+export const buildItemsFromQuery = CreationTemplate.bind({});

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { MultiSuggestField } from "../MultiSuggestField";
+import { Default, dropdownOnFocus, predefinedValues } from "../MultiSuggestField.stories";
+
+describe("MultiSuggestField", () => {
+    it("should render default input", () => {
+        const { container } = render(<MultiSuggestField {...Default.args} />);
+        const [input] = container.getElementsByClassName("eccgui-multiselect");
+
+        expect(input).toBeInTheDocument();
+    });
+
+    it("should render default selected items", async () => {
+        const { getByTestId } = render(<MultiSuggestField {...predefinedValues.args} />);
+
+        const [firstSelected, secondSelected]: Array<string> = predefinedValues.args.selectedItems.map(
+            ({ testLabel }) => testLabel.trim()
+        );
+
+        await waitFor(() => {
+            expect(getByTestId(firstSelected)).toBeInTheDocument();
+            expect(getByTestId(secondSelected)).toBeInTheDocument();
+        });
+    });
+
+    it("should clear all selected items on clear button click", async () => {
+        const { queryByTestId, container } = render(<MultiSuggestField {...predefinedValues.args} />);
+
+        const [firstSelected, secondSelected]: Array<string> = predefinedValues.args.selectedItems.map(
+            ({ testLabel }) => testLabel.trim()
+        );
+
+        const clearButton = container.querySelector('[data-test-id="clear-all-items"');
+
+        expect(clearButton).toBeInTheDocument();
+
+        fireEvent.click(clearButton!);
+
+        await waitFor(() => {
+            expect(queryByTestId(firstSelected)).not.toBeInTheDocument();
+            expect(queryByTestId(secondSelected)).not.toBeInTheDocument();
+        });
+    });
+
+    it("should filter options and reset them if the query is empty", async () => {
+        const { container } = render(<MultiSuggestField {...dropdownOnFocus.args} />);
+
+        const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+        const [input] = inputContainer.getElementsByTagName("input");
+
+        fireEvent.click(input);
+
+        await waitFor(() => {
+            const listbox = screen.getByRole("listbox");
+            expect(listbox).toBeInTheDocument();
+
+            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+            expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+        });
+
+        fireEvent.change(input, { target: { value: "ex" } });
+
+        await waitFor(() => {
+            const listbox = screen.getByRole("listbox");
+            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+
+            expect(menuItems.length).toBe(1);
+
+            const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
+            expect(noResult).not.toBeInTheDocument();
+        });
+
+        fireEvent.change(input, { target: { value: "ttt" } });
+
+        await waitFor(() => {
+            const listbox = screen.getByRole("listbox");
+            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+
+            expect(menuItems.length).toBe(1);
+
+            const noResult = screen.queryByText(dropdownOnFocus.args.noResultText);
+            expect(noResult).toBeInTheDocument();
+        });
+
+        fireEvent.change(input, { target: { value: "" } });
+
+        await waitFor(() => {
+            const listbox = screen.getByRole("listbox");
+            const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+            expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+        });
+    });
+});

package/src/components/Select/Select.tsx

@@ -122,8 +122,8 @@ export function Select<T>({
                         </>
                     }
                     textClassName={text ? "" : BlueprintClasses.TEXT_MUTED}
-                    data-test-id={dataTestId + "_togger"}
-                    data-testid={dataTestid + "_togger"}
+                    data-test-id={dataTestId ? dataTestId + "_toggler" : undefined}
+                    data-testid={dataTestid ? dataTestid + "_toggler" : undefined}
                 />
             )}
         </BlueprintSelect>

package/src/components/Tag/tag.scss

@@ -24,6 +24,7 @@ $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
 $tag-round-adjustment: 0 !default;
 
+@use "sass:color";
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
@@ -80,6 +81,7 @@ $tag-round-adjustment: 0 !default;
     }
 
     svg {
+        max-height: 1em;
         fill: currentcolor;
         stroke: initial;
     }
@@ -107,9 +109,14 @@ $tag-round-adjustment: 0 !default;
 }
 
 .#{$eccgui}-tag__list-item {
-    display: inline-block;
+    display: inline-flex;
     max-width: 100%;
     margin-bottom: $eccgui-size-margin-tag;
+
+    .#{$eccgui}-overviewitem__line &,
+    .#{$eccgui}-typography__overflowtext & {
+        margin-bottom: 0;
+    }
 }
 
 .#{$eccgui}-tag__list-label,
@@ -153,30 +160,6 @@ $tag-round-adjustment: 0 !default;
             border-color: rgba($tag-default-color, 0.5);
         }
 
-        &.#{$ns}-minimal,
-        &.#{$ns}-minimal.#{$ns}-interactive {
-            &.#{$eccgui}-tag--strongeremphasis {
-                background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
-                border-color: rgba($tag-default-color, 0.3);
-            }
-            &.#{$eccgui}-tag--strongemphasis {
-                background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-                border-color: rgba($tag-default-color, 0.225);
-            }
-            &.#{$eccgui}-tag--normalemphasis {
-                background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
-                border-color: rgba($tag-default-color, 0.15);
-            }
-            &.#{$eccgui}-tag--weakemphasis {
-                background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-                border-color: rgba($tag-default-color, 0.075);
-            }
-            &.#{$eccgui}-tag--weakeremphasis {
-                background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
-                border-color: rgba($tag-default-color, 0.15);
-            }
-        }
-
         &.#{$eccgui}-intent--primary {
             color: $eccgui-color-primary-contrast;
             background-color: $eccgui-color-primary;
@@ -210,6 +193,26 @@ $tag-round-adjustment: 0 !default;
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
+            &.#{$eccgui}-tag--strongeremphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.3), #fff), 1);
+                border-color: rgba($tag-default-color, 0.3);
+            }
+            &.#{$eccgui}-tag--strongemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+                border-color: rgba($tag-default-color, 0.225);
+            }
+            &.#{$eccgui}-tag--normalemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+                border-color: rgba($tag-default-color, 0.15);
+            }
+            &.#{$eccgui}-tag--weakemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+                border-color: rgba($tag-default-color, 0.075);
+            }
+            &.#{$eccgui}-tag--weakeremphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0), #fff), 0.5);
+                border-color: rgba($tag-default-color, 0.15);
+            }
             &.#{$eccgui}-intent--primary {
                 color: $eccgui-color-primary;
                 background-color: $eccgui-color-primary-contrast;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -10,6 +10,14 @@ import "codemirror/mode/xml/xml.js";
 import "codemirror/mode/jinja2/jinja2.js";
 import "codemirror/mode/yaml/yaml.js";
 import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/ntriples/ntriples.js";
+import "codemirror/mode/mathematica/mathematica.js";
+import "codemirror-formatting";
+//folding imports
+import "codemirror/addon/fold/foldcode";
+import "codemirror/addon/fold/foldgutter";
+import "codemirror/addon/fold/brace-fold";
+import "codemirror/addon/fold/xml-fold.js";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -23,12 +31,16 @@ export const supportedCodeEditorModes = [
     "jinja2",
     "yaml",
     "json",
+    "ntriples",
+    "mathematica",
     "undefined",
 ] as const;
 type SupportedModesTuple = typeof supportedCodeEditorModes;
 export type SupportedCodeEditorModes = SupportedModesTuple[number];
 
 export interface CodeEditorProps {
+    // Is called with the editor instance that allows access via the CodeMirror API
+    setEditorInstance?: (editor: CodeMirror.Editor) => any;
     /**
      * `name` attribute of connected textarea element.
      */
@@ -42,7 +54,7 @@ export interface CodeEditorProps {
      * Handler method to receive onChange events.
      * As input the new value is given.
      */
-    onChange: (v: any) => void;
+    onChange?: (v: any) => void;
     /**
      * Syntax mode of the code editor.
      */
@@ -82,6 +94,15 @@ export interface CodeEditorProps {
      * For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
      */
     tabForceSpaceForModes?: SupportedCodeEditorModes[];
+
+    /**
+     *  handler for scroll event
+     */
+    onScroll?: (editorInstance: CodeMirror.Editor) => void;
+    /**
+     * optional property to fold code for the supported modes e.g: xml, json etc.
+     */
+    supportCodeFolding?: boolean;
 }
 
 /**
@@ -97,6 +118,9 @@ export const CodeEditor = ({
     readOnly = false,
     height,
     wrapLines = false,
+    onScroll,
+    setEditorInstance,
+    supportCodeFolding = false,
     outerDivAttributes,
     tabIntentSize = 2,
     tabIntentStyle = "tab",
@@ -119,23 +143,37 @@ export const CodeEditor = ({
                     cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
                 },
             },
+            foldGutter: supportCodeFolding,
+            gutters: supportCodeFolding ? ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] : [],
         });
 
-        editorInstance.on("change", (api) => {
-            onChange(api.getValue());
-        });
+        setEditorInstance && setEditorInstance(editorInstance);
+
+        if (onScroll) {
+            editorInstance.on("scroll", (instance) => {
+                onScroll(instance);
+            });
+        }
+
+        if (onChange) {
+            editorInstance.on("change", (api) => {
+                onChange(api.getValue());
+            });
+        }
 
         if (height) {
             editorInstance.setSize(null, height);
         }
 
+        editorInstance.setValue(defaultValue);
+
         return function cleanup() {
             editorInstance.toTextArea();
         };
     }, [onChange, mode, preventLineNumbers]);
 
     return (
-        <div {...outerDivAttributes} className={`${eccgui}-codeeditor`}>
+        <div {...outerDivAttributes} className={`${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}`}>
             <textarea
                 ref={domRef}
                 /**
@@ -159,7 +197,7 @@ const convertMode = (mode: SupportedCodeEditorModes | undefined): string | ModeS
         case "json":
             return {
                 name: "javascript",
-                json: true,
+                jsonld: true,
             };
         default:
             return mode;

package/src/extensions/codemirror/_codemirror.scss

@@ -1,5 +1,6 @@
 @import "~codemirror/lib/codemirror";
 @import "~codemirror/theme/xq-light";
+@import "~codemirror/addon/fold/foldgutter";
 
 // adjustments
 // stylelint-disable selector-class-pattern
@@ -90,3 +91,23 @@
     }
 }
 // stylelint-enable selector-class-pattern
+
+//custom styles for json mode
+.#{$eccgui}-codeeditor--mode-json {
+    .CodeMirror-line {
+        & > span {
+            span.cm-property {
+                color: $eccgui-color-warning-text;
+            }
+            span.cm-string {
+                color: $eccgui-color-success-text;
+            }
+            span.cm-number {
+                color: $eccgui-color-accent;
+            }
+            span.cm-atom {
+                color: $eccgui-color-primary;
+            }
+        }
+    }
+}