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

package/src/components/Spinner/Spinner.tsx

@@ -7,8 +7,11 @@ import {
 } from "@blueprintjs/core";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
+// @deprecated use `SpinnerProps['position']`
 export type SpinnerPosition = "local" | "inline" | "global"
+// @deprecated use `SpinnerProps['size']`
 export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"
+// @deprecated use `SpinnerProps['stroke']`
 export type SpinnerStroke = "thin" | "medium" | "bold"
 type Intent = "inherit" | "primary" | "success" | "warning" | "danger"
 
@@ -62,7 +65,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
     description?: string
 }
 
-function Spinner({
+export const Spinner = ({
     className = "",
     color = "inherit",
     position = "local",
@@ -73,7 +76,7 @@ function Spinner({
     overlayProps,
     description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
-}: SpinnerProps) {
+}: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
     useEffect(() => {
         if(!showSpinner) {

package/src/components/Structure/Section.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Section({ children, className = '', ...restProps }: any) {
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const Section = ({ children, className = '', ...restProps }: SectionProps) => {
     return (
         <section
             {...restProps}

package/src/components/Structure/SectionHeader.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function SectionHeader({ children, className = '', ...restProps }: any) {
+export interface SectionHeaderProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const SectionHeader = ({ children, className = '', ...restProps }: SectionHeaderProps) => {
     return (
         <header
             {...restProps}

package/src/components/Structure/TitleMainsection.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitleMainsection ({
+export interface TitleMainsectionProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const TitleMainsection = ({
     children,
     className = '',
     ...restProps
-}: any) {
+}: TitleMainsectionProps) => {
     let htmlElement = React.createElement('div');
     const childrenArray = React.Children.toArray(children);
 

package/src/components/Structure/TitlePage.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitlePage ({
+export interface TitlePageProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const TitlePage = ({
     children,
     className = '',
     ...restProps
-}: any) {
+}: TitlePageProps) => {
     let htmlElement = React.createElement('div');
     const childrenArray = React.Children.toArray(children);
 

package/src/components/Structure/TitleSubsection.tsx

@@ -1,15 +1,30 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function TitleSubsection({ children, className = "", useHtmlElement, ...restProps }: any) {
+export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
+     */
+    useHtmlElement?: keyof JSX.IntrinsicElements;
+};
+
+export const TitleSubsection = ({
+    children,
+    className = "",
+    useHtmlElement,
+    ...restProps
+}: TitleSubsectionProps) => {
     const childrenArray = React.Children.toArray(children);
     const defaultHtmlElement = childrenArray.length === 1 && typeof childrenArray[0] === "string" ? "h3" : "div";
-    const titleElement = useHtmlElement ? React.createElement(useHtmlElement) : React.createElement(defaultHtmlElement);
+    const titleElement = useHtmlElement??defaultHtmlElement;
 
-    return (
-        <titleElement.type {...restProps} className={`${eccgui}-structure__title-subsection ` + className}>
-            {children}
-        </titleElement.type>
+    return React.createElement(
+        titleElement,
+        {
+            ...restProps,
+            className: `${eccgui}-structure__title-subsection ` + className,
+        },
+        children
     );
 }
 

package/src/components/Structure/index.ts

@@ -0,0 +1,5 @@
+export * from "./Section";
+export * from "./SectionHeader";
+export * from "./TitlePage";
+export * from "./TitleMainsection";
+export * from "./TitleSubsection";

package/src/components/SuggestField/SuggestField.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { highlighterUtils, SuggestField, SuggestFieldProps, suggestFieldUtils } from "../../index";
+
+const SuggestFieldStory: Meta<typeof SuggestField> = {
+    title: "Forms/SuggestField",
+    component: SuggestField,
+    argTypes: {},
+};
+
+const Template: StoryFn<typeof SuggestField> = (args) => <SuggestField {...args}></SuggestField>;
+
+// Renders string values as string
+const defaultRenderer = (item: string) => item;
+
+export const Default = Template.bind({});
+const defaultArgs: SuggestFieldProps<string, string> = {
+    itemRenderer: (item: string) => `Rendered item: ${item}`,
+    itemValueRenderer: (item: string) => `Selected item: ${item}`,
+    itemValueString: (item: string) => `Query: ${item}`,
+    onSearch: (query: string) => {
+        const multiWord = highlighterUtils.extractSearchWords(query, true);
+        return ["search item A", "search element B", "search object C"].filter((word) =>
+            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord)
+        );
+    },
+    onChange: (elem) => {
+        console.log(`Entry '${elem}' selected!`);
+    },
+    itemValueSelector: defaultRenderer,
+    noResultText: "No result",
+    //fill: false,
+    onlyDropdownWithQuery: true,
+};
+Default.args = defaultArgs;
+
+/**
+ * Display always the dropdown after the element has the focus.
+ * Do not wait until the query input was startet.
+ */
+export const DropdownOnFocus = Template.bind({});
+const dropdownOnFocus: SuggestFieldProps<string, string> = {
+    ...defaultArgs,
+    onlyDropdownWithQuery: false,
+};
+DropdownOnFocus.args = dropdownOnFocus;
+
+/**
+ * Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+ */
+export const AdaptQueryAfterSelection = Template.bind({});
+const adaptQueryAfterSelection: SuggestFieldProps<string, string> = {
+    ...defaultArgs,
+    resetQueryToValue: (selectedValue: string) => selectedValue,
+};
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection;
+
+/**
+ * Allows to reset a selection.
+ */
+export const AllowReset = Template.bind({});
+const resetSelection: SuggestFieldProps<string, string> = {
+    ...defaultArgs,
+    reset: {
+        resetValue: "",
+        resetButtonText: "Clear selected value",
+        resettableValue: (_value: string) => true,
+    },
+};
+AllowReset.args = resetSelection;
+
+export const AllowCustomValues = Template.bind({});
+const allowCustomValues: SuggestFieldProps<string, string> = {
+    ...defaultArgs,
+    createNewItem: {
+        itemRenderer: suggestFieldUtils.createNewItemRendererFactory(
+            (query: string) => `Create new item: ${query}`,
+            "item-add-artefact"
+        ),
+        itemFromQuery: (item) => item,
+    },
+};
+AllowCustomValues.args = allowCustomValues;
+
+/**
+ * Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+ */
+export const ReadOnlyState = Template.bind({});
+const readOnlyState: SuggestFieldProps<string, string> = {
+    ...defaultArgs,
+    initialValue: "search item B",
+    inputProps: {
+        readOnly: true,
+    },
+};
+ReadOnlyState.args = readOnlyState;
+
+export default SuggestFieldStory;

package/src/components/SuggestField/SuggestField.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { AutoCompleteField, AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
+
+export type SuggestFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
+
+/**
+ * A component with the appearance of an input field that allows to select and optionally create new items.
+ * It shows suggestions for the entered text from which the user can select any option.
+ * It has the following fixed behavior:
+ *
+ * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
+ * - When changing an existing item the input text is set to the original value in order to be able to edit the original value.
+ * - When for a specific input text, the only item returns is the currently set item itself, all items are shown below it, to make
+ *   clear that there are still other items to choose from.
+ * - The suggestions are fetched with a short delay, so not too many unnecessary requests are fired.
+ * - Items where itemRenderer returns a string have a default representation, i.e. highlighting of search words, active flag etc.
+ */
+export function SuggestField<T, UPDATE_VALUE>({ className, ...otherProps }: SuggestFieldProps<T, UPDATE_VALUE>) {
+    // Currently this works only as an alias element for `AutoCompleteField`.
+    return (
+        <AutoCompleteField<T, UPDATE_VALUE>
+            className={`${eccgui}-suggestfield` + (className ? ` ${className}` : "")}
+            {...otherProps}
+        />
+    );
+}

package/src/components/SuggestField/index.ts

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

package/src/components/Switch/Switch.tsx

@@ -16,7 +16,7 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     className?: string;
 }
 
-function Switch({onChange, className, ...otherProps}: SwitchProps) {
+export const Switch = ({onChange, className, ...otherProps}: SwitchProps) => {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
         const checked = !!(e as any).target?.checked
         onChange && onChange(checked);

package/src/components/Tabs/Tab.tsx

@@ -27,9 +27,6 @@ export interface TabProps extends Omit<BlueprintTabProps, "title"> {
     dontShrink?: boolean;
 }
 
-// Dummy as we cannot use it like that directly for now
-export const TabDummyForStorybook = (props: TabProps) => { return <>{props.title}</>}
-
 export const transformTabProperties = ({
     title,
     dontShrink=false,
@@ -61,52 +58,4 @@ export const transformTabProperties = ({
     }
 }
 
-/*
-
-NOTE: Try to overload the original Tab element. Currently it does not work.
-(at least inside Storybook) because the set displayName is overwritten and
-Blueprints Tabs integration cannot match the new Tab element correctly by
-checking the displayName.
-
-const Tab = (tabProps: TabProps) => {
-    return <BlueprintTab
-        {...transformTabProperties(tabProps)}
-    />;
-}
-
-Tab.displayName = BlueprintTab.displayName;
-//*/
-
-/*
-import { AbstractPureComponent2, Classes } from "@blueprintjs/core";
-class Tab extends AbstractPureComponent2<TabProps> {
-    public static defaultProps: Partial<TabProps> = {
-        disabled: false,
-        //dontShrink: false,
-    };
-
-    constructor(props: TabProps) {
-        //const { title, ...otherProps} = transformTabProperties(props);
-        //const newProps = {...otherProps, title: props.title}
-        //console.log(newProps);
-        super(props);
-    }
-
-    public static displayName = BlueprintTab.displayName;
-
-    // this component is never rendered directly; see BlueprintTabs#renderTabPanel()
-    public render() {
-        const { className, panel } = this.props;
-        return (
-            <div className={`${Classes.TAB_PANEL} ${className}`} role="tablist">
-                {panel}
-            </div>
-        );
-    }
-}
-
-//*
-export default Tab;
-//*/
-
 export default BlueprintTab;

package/src/components/Tabs/TabPanel.tsx

@@ -21,13 +21,13 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
  * Element to display the content related to a tab.
  * This could be used if `<Tabs />` is used in uncontrolled mode.
  */
-function TabPanel({
+export const TabPanel = ({
     children,
     className = "",
     labelledBy,
     hidden = false,
     ...otherDivProps
-}: TabPanelProps) {
+}: TabPanelProps) => {
     return (
         <div
             {...otherDivProps}

package/src/components/Tabs/TabTitle.tsx

@@ -38,7 +38,7 @@ export interface TabTitleProps {
 /**
  * Gives control about functionality and layout of the tab titles.
  */
-const TabTitle = ({
+export const TabTitle = ({
     text,
     tooltip,
     titlePrefix,

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import {
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Tab, { TabProps, transformTabProperties } from "./Tab";
 
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
+export interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
     children?: React.ReactNode;
     /**
      * Data structure containing all tabs, including their titles and content panels.
@@ -20,14 +20,14 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "ani
     allowScrollbars?: boolean;
 }
 
-function Tabs(
+export const Tabs = (
     {
         tabs=[],
         children,
         className = "",
         allowScrollbars,
         ...restProps
-    }: TabsProps) {
+    }: TabsProps) => {
 
     return (
         <BlueprintTabs

package/src/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+export * from "./TabPanel";
+export * from "./Tabs";
+export * from "./Tab";
+export * from "./TabTitle";

package/src/components/TagInput/taginput.scss

@@ -1,7 +1,21 @@
 @import "~@blueprintjs/core/src/components/tag-input/tag-input";
 
 .#{$ns}-tag-input {
+    display: inline-flex;
+
+    &.#{$ns}-input {
+        height: auto;
+        min-height: $eccgui-size-textfield-height-regular;
+        padding-right: ($pt-button-height - $pt-button-height-small) * 0.5;
+    }
+
     .#{$eccgui}-spinner--position-inline {
         height: $pt-button-height-small;
     }
+
+    .#{$eccgui}-button {
+        min-width: $pt-button-height-small;
+        min-height: $pt-button-height-small;
+        margin: ($pt-button-height - $pt-button-height-small) * 0.5 0 0 0;
+    }
 }

package/src/components/TextField/SearchField.tsx

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon";
 import TextField, { TextFieldProps } from "./TextField";
 import { TestableComponent } from "../../components/interfaces";
 
-interface SearchFieldProps extends TestableComponent, Omit<
+export interface SearchFieldProps extends TestableComponent, Omit<
     TextFieldProps,
     "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
 > {
@@ -27,14 +27,14 @@ interface SearchFieldProps extends TestableComponent, Omit<
 /**
  * Special `TextField` element for search term inputs.
  */
-function SearchField({
+export const SearchField = ({
   className = "",
   emptySearchInputMessage = "Enter search term",
   onClearanceHandler,
   onClearanceText = "Clear input",
   leftIcon = <Icon name="operation-search" />,
   ...otherProps
-}: SearchFieldProps) {
+}: SearchFieldProps) => {
   return (
     <TextField
       className={

package/src/components/TextField/TextArea.tsx

@@ -8,29 +8,29 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
 export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
-  /**
-   * when set to true the input takes a blue border color
-   */
-  hasStatePrimary?: boolean;
-  /**
-   * when set to true the input takes a green border color
-   */
-  hasStateSuccess?: boolean;
-  /**
-   * when set to true the input takes an orange border color
-   */
-  hasStateWarning?: boolean;
-  /**
-   * when set to true the input takes a red border color
-   */
-  hasStateDanger?: boolean;
+    /**
+    * when set to true the input takes a blue border color
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * when set to true the input takes a green border color
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * when set to true the input takes an orange border color
+    */
+    hasStateWarning?: boolean;
+    /**
+    * when set to true the input takes a red border color
+    */
+    hasStateDanger?: boolean;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
 }
 
-function TextArea({
+export const TextArea = ({
   className = "",
   hasStatePrimary = false,
   hasStateSuccess = false,
@@ -39,7 +39,7 @@ function TextArea({
   rows = 5,
   invisibleCharacterWarning,
   ...otherProps
-}: TextAreaProps) {
+}: TextAreaProps) => {
   let intent;
   switch (true) {
     case hasStatePrimary:

package/src/components/TextField/TextField.tsx

@@ -5,7 +5,7 @@ import {
     Intent as BlueprintIntent,
     MaybeElement,
     HTMLInputProps,
-    InputGroupProps,
+    InputGroupProps2,
 } from "@blueprintjs/core";
 import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
 import Icon from "../Icon/Icon";
@@ -13,7 +13,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
-export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
+export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
     * The input element is displayed with primary color scheme.
     * @deprecated
@@ -55,7 +55,7 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
 /**
   * Text input field.
   */
-function TextField({
+export const TextField = ({
   className = "",
   hasStatePrimary = false,
   hasStateSuccess = false,
@@ -65,7 +65,7 @@ function TextField({
   leftIcon,
   invisibleCharacterWarning,
   ...otherProps
-}: TextFieldProps) {
+}: TextFieldProps) => {
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -118,7 +118,7 @@ function TextField({
       intent={(intent && !(["info", "edited", "removed", "neutral"].includes(intent))) ? intent as BlueprintIntent : undefined}
       fill={fullWidth}
       {...otherBlueprintInputGroupProps}
-      leftIcon={
+      leftElement={
         leftIcon != null && leftIcon !== false ? (
           typeof leftIcon === "string" ? (
             <Icon

package/src/components/TextField/index.ts

@@ -0,0 +1,3 @@
+export * from "./TextField";
+export * from "./TextArea";
+export * from "./SearchField";

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

@@ -2,6 +2,8 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { TextField } from "./../../../../index";
 import { helpersArgTypes } from "../../../../.storybook/helpers";
+import {TextFieldProps} from "../TextField";
+import characters from "../../../common/utils/characters"
 
 export default {
     title: "Forms/TextField",
@@ -30,3 +32,28 @@ Default.args = {
     placeholder: "placeholder text",
     readOnly: false,
 };
+
+/** Text field with default value that contains a zero width/invisible character.
+ * As long as the character exists, an alert is raised for every value change with a delay of 500ms.
+ * Instead of an alert, something more sophisticated like a clean up action should be offered in production. */
+export const InvisibleCharacterWarning = Template.bind({})
+
+const invisibleCharacterWarningProps: TextFieldProps = {
+    ...Default.args,
+    invisibleCharacterWarning: {
+        callback: (codePoints) => {
+            if(codePoints.size) {
+                const codePointsString = [...Array.from(codePoints)]
+                    .map((n) => {
+                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n)
+                        return info.fullLabel
+                    })
+                    .join(", ")
+                alert("Invisible character detected in input string. Code points: " + codePointsString)
+            }
+        },
+        callbackDelay: 500
+    },
+    defaultValue: "Invisible character ->​<-"
+}
+InvisibleCharacterWarning.args = invisibleCharacterWarningProps

package/src/components/Toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Allow sections to break up into multiple lines when there is not enough space available.
      * Only makes sense for horizontal toolbars.
@@ -17,13 +17,13 @@ interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * Element to group user-interaction elements.
  */
-function Toolbar({
+export const Toolbar = ({
     children,
     className = '',
     noWrap = false,
     verticalStack = false,
     ...restProps
-}: ToolbarProps) {
+}: ToolbarProps) => {
     return (
         <div
             {...restProps}

package/src/components/Toolbar/ToolbarSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
     * Is allowed to allocate more space than necessary to show all children.
     */
@@ -21,14 +21,14 @@ interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  * Provides element to group toolbar elements together.
  * It can be configured how dynamic it is displayed regarding provided space inside the `Toolbar` parent.
  */
-function ToolbarSection({
+export const ToolbarSection = ({
     children,
     className = '',
     canGrow = false,
     canShrink = false,
     hideOverflow = false,
     ...otherProps
-}:ToolbarSectionProps) {
+}:ToolbarSectionProps) => {
     return (
         <div
             {...otherProps}

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar";
+export * from "./ToolbarSection";