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

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/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";

package/src/components/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      markdownProps?: Omit<MarkdownParserProps, "children">;
 }
 
-function Tooltip({
+export const Tooltip = ({
     children,
     content,
     className = "",
@@ -44,7 +44,7 @@ function Tooltip({
     markdownEnabler = "\n\n",
     markdownProps,
     ...otherProps
-}: TooltipProps) {
+}: TooltipProps) => {
     let tooltipContent = content;
 
     if (

package/src/components/Typography/Highlighter.tsx

@@ -10,7 +10,7 @@ export interface HighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-function Highlighter({ label, searchValue }: HighlighterProps) {
+export function Highlighter({ label, searchValue }: HighlighterProps) {
     return <>{getSearchHighlight(label, searchValue)}</>;
 }
 
@@ -49,22 +49,37 @@ const escapeRegexWord = (str: string) => {
     return str.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 };
 
-/** Extracts search words separated by white space. */
+/**
+ * Extracts search words separated by white space.
+ * @deprecated moved to `highlighterUtils.extractSearchWords`
+ */
 export function extractSearchWords(textQuery: string, toLowerCase: boolean = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
     return toLowerCase ? words.map(w => w.toLowerCase()) : words
 }
 
-/** Returns true if all search words are included in the given text */
+/**
+ * Returns true if all search words are included in the given text
+ * @deprecated moved to `highlighterUtils.matchesAllWords`
+ */
 export function matchesAllWords(text: string,
                                 searchWords: string[]): boolean {
     return searchWords.every(w => text.includes(w))
 }
 
-/** Creates a case-insensitive multi-word regex, that matches any of the given words. */
+/**
+ * Creates a case-insensitive multi-word regex, that matches any of the given words.
+ * @deprecated moved to `highlighterUtils.createMultiWordRegex`
+ */
 export function createMultiWordRegex(multiWordQuery: string[], global: boolean = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }
 
+export const highlighterUtils = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+}
+
 export default Highlighter;

package/src/components/Typography/HtmlContentBlock.tsx

@@ -18,7 +18,7 @@ export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivEleme
     noScrollbarsOnChildren?: boolean;
 }
 
-function HtmlContentBlock({
+export const HtmlContentBlock = ({
     className = "",
     children,
     small = false,
@@ -29,7 +29,7 @@ function HtmlContentBlock({
     linebreakPrevented = false,
     noScrollbarsOnChildren = false,
     ...otherProps
-}: HtmlContentBlockProps) {
+}: HtmlContentBlockProps) => {
     return (
         <div
             className={

package/src/components/Typography/OverflowText.tsx

@@ -11,7 +11,7 @@ export interface OverflowTextProps {
 }
 
 /** Prevents text from overflowing. */
-function OverflowText({
+export const OverflowText = ({
     className = "",
     children,
     ellipsis,
@@ -19,7 +19,7 @@ function OverflowText({
     passDown = false,
     useHtmlElement,
     ...otherProps
-}: OverflowTextProps) {
+}: OverflowTextProps) => {
     const defaultHtmlElement = inline ? "span" : "div";
     const overflowtextElement = useHtmlElement
         ? React.createElement(useHtmlElement)

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -47,7 +47,7 @@ export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivEl
  * Simple container to add whitespace inside and around of it without adding style attributes directly.
  * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
  */
-function WhiteSpaceContainer({
+export const WhiteSpaceContainer = ({
     className,
     children,
     marginTop,
@@ -60,7 +60,7 @@ function WhiteSpaceContainer({
     paddingLeft,
     linebreakForced = false,
     ...otherDivProps
-}: WhiteSpaceContainerProps) {
+}: WhiteSpaceContainerProps) => {
 
     const elementClassName = `${eccgui}-typography__whitespace`;
 

package/src/components/Typography/index.ts

@@ -1,25 +1,13 @@
-import Highlighter, { HighlighterProps } from "./Highlighter";
 import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
-import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
-import OverflowText, { OverflowTextProps } from "./OverflowText";
-import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
-
-export type {
-    HighlighterProps,
-    HtmlContentBlockProps,
-    OverflowTextProps,
-    WhiteSpaceContainerProps
-};
-
-export {
-    Highlighter,
-    HtmlContentBlock,
-    OverflowText,
-    WhiteSpaceContainer,
-};
 
+// @deprecated use `highlighterUtils`
 export const HighlighterFunctions = {
     extractSearchWords,
     matchesAllWords,
     createMultiWordRegex,
 };
+
+export * from "./Highlighter";
+export * from "./HtmlContentBlock";
+export * from "./OverflowText";
+export * from "./WhiteSpaceContainer";

package/src/components/Workspace/WorkspaceContent.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 // import PropTypes from 'prop-types';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Grid from "./../Grid/Grid";
+import Grid, { GridProps } from "./../Grid/Grid";
 import GridRow from "./../Grid/GridRow";
 
-function WorkspaceContent({ children, className = '', ...restProps }: any) {
+export interface WorkspaceContentProps extends GridProps {};
+
+export const WorkspaceContent = ({ children, className = '', ...restProps }: WorkspaceContentProps) => {
     return (
         <Grid
             {...restProps}

package/src/components/Workspace/WorkspaceHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: any;
     /**
         space-delimited list of class names
@@ -9,7 +9,9 @@ interface IWorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-function WorkspaceHeader({ children, className = '', ...otherProps }: IWorkspaceHeaderProps) {
+export type IWorkspaceHeaderProps = WorkspaceHeaderProps;
+
+export const WorkspaceHeader = ({ children, className = '', ...otherProps }: WorkspaceHeaderProps) => {
     return (
         <div className={`${eccgui}-workspace__header ` + className} {...otherProps}>
             { children }

package/src/components/Workspace/WorkspaceMain.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceMain({ children, className = "", ...restProps }: any) {
+export interface WorkspaceMainProps extends GridColumnProps {};
+
+export const WorkspaceMain = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
         <GridColumn {...restProps} className={`${eccgui}-workspace__main ` + className}>
             {children}

package/src/components/Workspace/WorkspaceSide.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-// import PropTypes from 'prop-types';
-import GridColumn from "./../Grid/GridColumn";
+import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-function WorkspaceSide({ children, className = '', ...restProps }: any) {
+export interface WorkspaceSideProps extends GridColumnProps {};
+
+export const WorkspaceSide = ({ children, className = '', ...restProps }: GridColumnProps) => {
     return (
         <GridColumn
             {...restProps}
             className={`${eccgui}-workspace__side `+className}
-            sm={4} md={8} lg={5} xlg={5}
+            carbonSizeConfig={{ sm:4, md:8, lg:5, xlg:5 }}
         >
             { children }
         </GridColumn>

package/src/components/Workspace/index.ts

@@ -0,0 +1,4 @@
+export * from "./WorkspaceContent";
+export * from "./WorkspaceMain";
+export * from "./WorkspaceSide";
+export * from "./WorkspaceHeader";

package/src/components/Workspace/workspace.scss

@@ -1 +1,6 @@
 @import 'header';
+
+html {
+    background-color: $eccgui-color-workspace-background;
+    color: $eccgui-color-workspace-text;
+}

package/src/components/index.scss

@@ -1,6 +1,40 @@
-@import "./Badge/badge";
+@import "./Application/application";
+@import "./AutocompleteField/autocompletefield";
+@import "./Breadcrumb/breadcrumb";
+@import "./Button/button";
+@import "./Card/card";
+@import "./Checkbox/checkbox";
+@import "./ContextOverlay/contextoverlay";
 @import "./Depiction/depiction";
+@import "./Dialog/dialog";
+@import "./Form/form";
+@import "./Grid/grid";
+@import "./HoverToggler/hovertoggler";
 @import "./Icon/icon";
-@import "./Tree/tree";
+@import "./Iframe/iframe";
+@import "./InteractionGate/interactiongate";
+@import "./Label/label";
+@import "./Link/link";
+@import "./Menu/menu";
+@import "./Notification/notification";
+@import "./OverviewItem/overviewitem";
+@import "./Pagination/pagination";
+@import "./RadioButton/radiobutton";
+@import "./Select/select";
+@import "./Separation/separation";
+@import "./Spinner/spinner";
+@import "./Structure/titles";
 @import "./Table/table";
+@import "./Tabs/tabs";
+@import "./TagInput/taginput";
+@import "./Tag/tag";
+@import "./TextField/textfield";
+@import "./Toolbar/toolbar";
+@import "./Tooltip/tooltip";
+@import "./Tree/tree";
 @import "./Typography/typography";
+@import "./Workspace/workspace";
+@import "./Accordion/accordion";
+@import "./AutoSuggestion/AutoSuggestion";
+@import "./Badge/badge";
+@import "./PropertyValuePair/propertyvalue";