@eccenca/gui-elements 23.1.0 → 23.2.0-rc.0

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -6,49 +6,51 @@ import {Classes as BlueprintClassNames} from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
-export interface IEditorProps {
-  // Is called with the editor instance that allows access via the CodeMirror API
-  setEditorInstance: (editor: CodeMirrorEditor) => any
-  // Called whenever the editor content changes
-  onChange: (value: string) => any
-  // Called when the cursor position changes
-  onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
-  // The editor theme, e.g. "sparql"
-  mode?: string
-  // The initial value of the editor
-  initialValue: string
-  // Called when the focus status changes
-  onFocusChange: (focused: boolean) => any
-  // Called when the user presses a key
-  onKeyDown: (event: KeyboardEvent) => any
-  // Called when the user selects text
-  onSelection: (ranges: IRange[]) => any
-  // 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
+export interface IRange {
+  from: number
+  to: number
+}
+
+export interface SingleLineCodeEditorProps {
+    // Is called with the editor instance that allows access via the CodeMirror API
+    setEditorInstance: (editor: CodeMirrorEditor) => any
+    // Called whenever the editor content changes
+    onChange: (value: string) => any
+    // Called when the cursor position changes
+    onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
+    // The editor theme, e.g. "sparql"
+    mode?: string
+    // The initial value of the editor
+    initialValue: string
+    // Called when the focus status changes
+    onFocusChange: (focused: boolean) => any
+    // Called when the user presses a key
+    onKeyDown: (event: KeyboardEvent) => any
+    // Called when the user selects text
+    onSelection: (ranges: IRange[]) => any
+    // 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 tobe shown when no text has been entered, yet. */
     placeholder?: string
     showScrollBar?: boolean
 }
 
-export interface IRange {
-  from: number
-  to: number
-}
+export type IEditorProps = SingleLineCodeEditorProps;
 
 /** A single-line code editor. */
-const SingleLineCodeEditor = ({
-                                  setEditorInstance,
-                                  onChange,
-                                  onCursorChange,
-                                  mode,
-                                  initialValue,
-                                  onFocusChange,
-                                  onKeyDown,
-                                  onSelection,
-                                  enableTab = false,
-                                  placeholder,
-                                  showScrollBar = true
-                              }: IEditorProps) => {
+export const SingleLineCodeEditor = ({
+    setEditorInstance,
+    onChange,
+    onCursorChange,
+    mode,
+    initialValue,
+    onFocusChange,
+    onKeyDown,
+    onSelection,
+    enableTab = false,
+    placeholder,
+    showScrollBar = true
+}: SingleLineCodeEditorProps) => {
     const singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "))
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>

package/src/components/AutoSuggestion/index.ts

@@ -0,0 +1,15 @@
+import { AutoSuggestion, AutoSuggestionProps } from "./AutoSuggestion";
+import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
+import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "./SingleLineCodeEditor";
+
+export {
+    AutoSuggestion,
+    AutoSuggestionList,
+    SingleLineCodeEditor,
+};
+
+export type {
+    AutoSuggestionProps,
+    AutoSuggestionListProps,
+    SingleLineCodeEditorProps,
+};

package/src/components/AutoSuggestion/stories/AutoSuggestion.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { AutoSuggestion, AutoSuggestionProps } from "../../../../index";
+import { IPartialAutoCompleteResult } from "../AutoSuggestion";
+
+export default {
+    title: "Forms/AutoSuggestion",
+    component: AutoSuggestion,
+    argTypes: {}
+} as Meta<typeof AutoSuggestion>;
+
+const Template: StoryFn<typeof AutoSuggestion> = (args) => (
+    <AutoSuggestion {...args}></AutoSuggestion>
+);
+
+const resultList = [
+    "find me",
+    "item",
+    "auto-completion result"
+]
+
+const defaultProps: AutoSuggestionProps = {
+    initialValue: "",
+    fetchSuggestions(inputString: string, cursorPosition: number): IPartialAutoCompleteResult | undefined | Promise<IPartialAutoCompleteResult | undefined> {
+        const stringBeforeCursor = inputString.substring(0, cursorPosition)
+        const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ")
+        const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0
+        const lastWordBeforeCursor = stringBeforeCursor.substring(searchWordStart, stringBeforeCursor.length).toLowerCase().trim()
+        const replacements = resultList.filter(item => item.toLowerCase().includes(lastWordBeforeCursor))
+        if (replacements.length) {
+            return {
+                cursorPosition: cursorPosition,
+                inputString: inputString,
+                replacementResults: [{
+                    extractedQuery: lastWordBeforeCursor,
+                    replacementInterval: {
+                        from: searchWordStart,
+                        length: lastWordBeforeCursor.length
+                    },
+                    replacements: replacements.map((v) => ({
+                        label: `Label of '${v}'`,
+                        description: `Description of '${v}'`,
+                        value: v
+                    }))
+                }]
+            }
+        }
+    },
+    placeholder: "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
+    onChange(): any {
+        // Do nothing
+    },
+}
+
+/** Offers basic auto-completion for the word right before the cursor. */
+export const Default = Template.bind({});
+
+Default.args = defaultProps
+
+/** Shows validation error if the input string contains the word 'not'. */
+export const WithValidation = Template.bind({});
+
+WithValidation.args = {
+    ...defaultProps,
+    initialValue: "Contains not",
+    checkInput: (inputString) => {
+        const notIndex = inputString.indexOf("not")
+        if(notIndex >= 0) {
+            return {
+                valid: false,
+                parseError: {
+                    message: "Strings containing the sub-string 'not' are NOT allowed.",
+                    start: notIndex,
+                    end: notIndex + 3
+                }
+            }
+        } else {
+            return {
+                valid: true
+            }
+        }
+    }
+}

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

@@ -1,10 +1,10 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import {render} from "@testing-library/react";
-import AutoSuggestion, {IProps} from "../AutoSuggestion"
+import AutoSuggestion, {AutoSuggestionProps} from "../AutoSuggestion"
 
 describe("AutoSuggestion", () => {
-    let props: IProps
+    let props: AutoSuggestionProps
     beforeEach(() => {
         props = {
             label: "test value path",

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import '@testing-library/jest-dom'
 import {fireEvent, render, waitFor} from '@testing-library/react'
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import {AutoSuggestionList, IDropdownProps} from '../AutoSuggestionList'
+import {AutoSuggestionList, AutoSuggestionListProps} from '../AutoSuggestionList'
 
 describe("Dropdown list", () => {
-    let props:IDropdownProps,  mockOptions
+    let props:AutoSuggestionListProps,  mockOptions
     beforeEach(() => {
         props  = {
             currentlyFocusedIndex: 0,

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
-import SingleLineEditor, {
-    IEditorProps,
-} from "../SingleLineCodeEditor";
+import {
+    SingleLineCodeEditor,
+    SingleLineCodeEditorProps,
+} from "../../../../index";
 import CodeMirror from "codemirror";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
 describe("SingleLineCodeEditor", () => {
-    let props: IEditorProps,
+    let props: SingleLineCodeEditorProps,
         codeMirrorEditorInstance: CodeMirror.Editor = null as any;
     beforeEach(() => {
         props = {
@@ -26,12 +27,12 @@ describe("SingleLineCodeEditor", () => {
     });
 
     it("should render properly", () => {
-        const { container } = render(<SingleLineEditor {...props} />);
+        const { container } = render(<SingleLineCodeEditor {...props} />);
         expect(container.querySelector(`.${eccgui}-singlelinecodeeditor`)).not.toBeNull();
     });
 
     it("should set the editorInstance immediately it's mounted", () => {
-        render(<SingleLineEditor {...props} />);
+        render(<SingleLineCodeEditor {...props} />);
         expect(props.setEditorInstance).toHaveBeenCalledTimes(1);
         expect(codeMirrorEditorInstance).not.toBeNull();
     });
@@ -41,13 +42,13 @@ describe("SingleLineCodeEditor", () => {
             ...props,
             initialValue: "This is the initial input",
         };
-        const { getByText } = render(<SingleLineEditor {...props} />);
+        const { getByText } = render(<SingleLineCodeEditor {...props} />);
         expect(codeMirrorEditorInstance.getValue()).toBe(props.initialValue);
         expect(getByText(props.initialValue)).toBeTruthy();
     });
 
     it("should not allow user to create new lines", () => {
-        render(<SingleLineEditor {...props} />);
+        render(<SingleLineCodeEditor {...props} />);
         codeMirrorEditorInstance
             .getDoc()
             .setValue("I'm entering a new line \n character");
@@ -55,7 +56,7 @@ describe("SingleLineCodeEditor", () => {
     });
 
     it("should convert multiple lines to a single line", () => {
-        render(<SingleLineEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        render(<SingleLineCodeEditor {...{...props, initialValue: "1\n2\n3"}} />);
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
 });

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -1,8 +1,7 @@
 import React, {useEffect, useRef, useState} from "react";
 import {
     HTMLInputProps as BlueprintHTMLInputProps,
-    InputGroupProps as BlueprintInputGroupProps,
-    IRefObject
+    InputGroupProps2 as BlueprintInputGroupProps,
 } from "@blueprintjs/core";
 import {
     Suggest2 as Suggest
@@ -17,24 +16,26 @@ import {
     Spinner,
     ContextOverlayProps,
 } from "../../index";
+import {
+    IElementWidth as IElementWidthOrig,
+    IRenderModifiers as IRenderModifiersOrig
+} from "./interfaces";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
+// @deprecated import from `src/components/AutocompleteField/interfaces`
+export type IElementWidth = IElementWidthOrig;
+// @deprecated import from `src/components/AutocompleteField/interfaces`
+export type IRenderModifiers = IRenderModifiersOrig;
+
 type SearchFunction<T extends any> = (value: string) => T[];
 type AsyncSearchFunction<T extends any> = (value: string) => Promise<T[]>;
 
-export interface IRenderModifiers {
-    active: boolean
-    disabled?: boolean
-    // The width styles that should be given to the rendered option items
-    styleWidth: IElementWidth
-    highlightingEnabled: boolean
-}
 /**
  * Parameters for the auto-complete field parameterized by T and U.
  * @param T is the input data structure/type of the items that can be selected.
  * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
  */
-export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any> {
+export interface AutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any> {
     /**
      * Fired when text is typed into the input field. Returns a list of items of type T.
      */
@@ -151,26 +152,21 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
     hasBackDrop?: boolean
 }
 
+export type IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
+
 AutoCompleteField.defaultProps = {
     autoFocus: false,
     disabled: false,
 };
 
-/** Style object to be used in menu option items. */
-export interface IElementWidth {
-    minWidth: string;
-    //width: string
-    maxWidth: string
-}
-
 /** Hook that returns the element width of the given ref.*/
-const elementWidth = (elRef: IRefObject<HTMLInputElement> | null): IElementWidth => {
+const elementWidth = (elRef: React.RefObject<HTMLInputElement> | null): IElementWidth => {
     const minWidth = (elRef && elRef.current) ? elRef.current.offsetWidth + "px" : "20rem";
     return { minWidth, maxWidth: "90vw" };
 }
 
 /** Auto-complete input widget. */
-export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props: IAutoCompleteFieldProps<T, UPDATE_VALUE>) {
+export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props: AutoCompleteFieldProps<T, UPDATE_VALUE>) {
     const {
         reset,
         noResultText,
@@ -444,3 +440,5 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         </div>
     );
 }
+
+export default AutoCompleteField;

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IElementWidth, IRenderModifiers } from "./AutoCompleteField";
+import { IElementWidth, IRenderModifiers } from "./interfaces";
 import OverflowText from "../Typography/OverflowText";
 import MenuItem from "../Menu/MenuItem";
 import { TestIconProps } from "./../Icon/TestIcon";

package/src/components/AutocompleteField/index.ts

@@ -0,0 +1,5 @@
+import { createNewItemRendererFactory } from "./autoCompleteFieldUtils";
+export * from "./AutoCompleteField";
+export const autoCompleteFieldUtils = {
+    createNewItemRendererFactory
+}

package/src/components/AutocompleteField/interfaces.ts

@@ -0,0 +1,14 @@
+export interface IRenderModifiers {
+    active: boolean
+    disabled?: boolean
+    // The width styles that should be given to the rendered option items
+    styleWidth: IElementWidth
+    highlightingEnabled: boolean
+}
+
+/** Style object to be used in menu option items. */
+export interface IElementWidth {
+    minWidth: string;
+    //width: string
+    maxWidth: string
+}

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -21,13 +21,13 @@ export type BreadcrumbItemProps = Omit<
  * Item of the breadcrumbs list.
  * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
  */
-function BreadcrumbItem({
+export const BreadcrumbItem = ({
     className = "",
     onClick,
     href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
-}: BreadcrumbItemProps) {
+}: BreadcrumbItemProps) => {
 
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
@@ -40,7 +40,7 @@ function BreadcrumbItem({
     const allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
     const actions = allowActions ? {
         href,
-        onClick: (e:React.MouseEvent<HTMLElement>) => openInNewTab(e, onClick, href),
+        onClick: (e:React.MouseEvent<HTMLAnchorElement>) => openInNewTab(e, onClick, href),
     } : {};
     return (
       <BlueprintBreadcrumbItem

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -7,7 +7,8 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
-type ReducedBreadcrumbsProps = Omit<
+// FIXME: enforce onItemClick later when href value can always be routed correctly
+export interface BreadcrumbListProps extends Omit<
     BlueprintBreadcrumbsProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "breadcrumbRenderer" |
@@ -16,10 +17,7 @@ type ReducedBreadcrumbsProps = Omit<
     "minVisibleItems" |
     "overflowListProps" |
     "popoverProps"
->;
-
-// FIXME: enforce onItemClick later when href value can always be routed correctly
-interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
+> {
     /**
         list of breadcrumb items to display
     */
@@ -51,7 +49,7 @@ interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
 /**
  * Navigation path to the currently show resource or view in the application.
  */
-function BreadcrumbList({
+export const BreadcrumbList = ({
     className = "",
     // itemDivider = "/",
     onItemClick,
@@ -59,7 +57,7 @@ function BreadcrumbList({
     ignoreOverflow = false,
     latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
-}: BreadcrumbListProps) {
+}: BreadcrumbListProps) => {
     const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (

package/src/components/Breadcrumb/breadcrumb.scss

@@ -36,6 +36,10 @@
             background-size: cover;
         }
     }
+
+    .#{$eccgui}-overviewitem__line > & {
+        display: flex;
+    }
 }
 
 .#{$eccgui}-breadcrumb__list--latenoverflow {

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from "./BreadcrumbList";
+export * from "./BreadcrumbItem";

package/src/components/Button/Button.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
+
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Button, Icon, Spacing} from "../../../index";
+import { Button, Icon, Spacing } from "../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
@@ -19,9 +20,7 @@ export default {
     },
 } as ComponentMeta<typeof Button>;
 
-const TemplateFull: ComponentStory<typeof Button> = (args) => (
-    <Button {...args} />
-);
+const TemplateFull: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
@@ -79,7 +78,9 @@ const TemplateContent: ComponentStory<typeof Button> = (args) => (
     <>
         <Button {...args} text="Property label" />
         <Spacing vertical />
-        <Button {...args} text={undefined}>Children label</Button>
+        <Button {...args} text={undefined}>
+            Children label
+        </Button>
     </>
 );
 export const ButtonLabels = TemplateContent.bind({});

package/src/components/Button/Button.test.tsx

@@ -1,37 +1,36 @@
 import React from "react";
+
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import {
-  FullExample,
-} from "./Button.stories";
+import { FullExample } from "./Button.stories";
 
 import Button from "./Button";
 import Icon from "../Icon/Icon";
 
 describe("Button", () => {
-  it("should render default button successfully", () => {
-    render(<Button {...FullExample.args}>Default Button</Button>);
-    expect(screen.getByRole("button")).toHaveTextContent(/default button/i);
-  });
+    it("should render default button successfully", () => {
+        render(<Button {...FullExample.args}>Default Button</Button>);
+        expect(screen.getByRole("button")).toHaveTextContent(/default button/i);
+    });
 
-  it("should have icon at the left followed by text", () => {
-    const { container } = render(
-      <Button {...FullExample.args} icon={"item-viewdetails"}>Left icon</Button>
-    );
-    expect(screen.getByRole("button").lastChild).toEqual(
-      screen.getByText(/left icon/i)
-    );
-    expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
-  });
+    it("should have icon at the left followed by text", () => {
+        const { container } = render(
+            <Button {...FullExample.args} icon={"item-viewdetails"}>
+                Left icon
+            </Button>
+        );
+        expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
+        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+    });
 
-  it("should have icon at the right after the text", () => {
-    const { container } = render(
-      <Button {...FullExample.args} rightIcon={<Icon name={"item-download"} />}>Right icon</Button>
-    );
-    expect(screen.getByRole("button").firstChild).toEqual(
-      screen.getByText(/right icon/i)
-    );
-    expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
-  });
+    it("should have icon at the right after the text", () => {
+        const { container } = render(
+            <Button {...FullExample.args} rightIcon={<Icon name={"item-download"} />}>
+                Right icon
+            </Button>
+        );
+        expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
+        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+    });
 });