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

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -15,7 +15,7 @@ import {
 import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
     options: Array<ISuggestionWithReplacementInfo>;
     // Called when an item has been selected from the drop down
@@ -32,6 +32,9 @@ export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement
     itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
 }
 
+// @deprecated
+export type IDropdownProps = AutoSuggestionListProps;
+
 type HorizontalShiftCallbackFunction = (shift: number) => any
 
 const ListItem = ({ item }: any, ref: any) => {
@@ -84,7 +87,7 @@ export const AutoSuggestionList = ({
     itemToHighlight,
     style,
     ...otherDivProps
-}: IDropdownProps) => {
+}: AutoSuggestionListProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
     >(undefined);

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/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.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+
+import { AutoCompleteField } from "./../../../index";
+export { Default } from "../SuggestField/SuggestField.stories";
+
+export default {
+    title: "Forms/AutoCompleteField",
+    component: AutoCompleteField,
+    parameters: {
+        controls: {
+            exclude: /.*/g,
+        },
+    },
+} as Meta<typeof AutoCompleteField>;