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

package/src/components/Typography/index.ts

@@ -1,4 +1,4 @@
-import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
 
 // @deprecated use `highlighterUtils`
 export const HighlighterFunctions = {

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -1,55 +1,58 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
 
 const whiteSpaceSizeOptions = {
     control: "select",
     options: {
         "not set": undefined,
-        "tiny": "tiny",
-        "small": "small",
-        "regular": "regular",
-        "large": "large",
-        "xlarge": "xlarge"
-    }
-}
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
 
 export default {
     title: "Components/Typography",
     component: WhiteSpaceContainerElement,
     argTypes: {
         children: { control: "none" },
-        marginTop: {...whiteSpaceSizeOptions},
-        marginRight: {...whiteSpaceSizeOptions},
-        marginBottom: {...whiteSpaceSizeOptions},
-        marginLeft: {...whiteSpaceSizeOptions},
-        paddingTop: {...whiteSpaceSizeOptions},
-        paddingRight: {...whiteSpaceSizeOptions},
-        paddingBottom: {...whiteSpaceSizeOptions},
-        paddingLeft: {...whiteSpaceSizeOptions},
+        marginTop: { ...whiteSpaceSizeOptions },
+        marginRight: { ...whiteSpaceSizeOptions },
+        marginBottom: { ...whiteSpaceSizeOptions },
+        marginLeft: { ...whiteSpaceSizeOptions },
+        paddingTop: { ...whiteSpaceSizeOptions },
+        paddingRight: { ...whiteSpaceSizeOptions },
+        paddingBottom: { ...whiteSpaceSizeOptions },
+        paddingLeft: { ...whiteSpaceSizeOptions },
     },
 } as ComponentMeta<typeof WhiteSpaceContainerElement>;
 
 const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
-    <WhiteSpaceContainerElement {...args} style={{background: "#eee"}}/>
+    <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
 );
 
 const testContent = loremIpsum({
     p: 2,
     avgSentencesPerParagraph: 4,
-    random: false
-}).toString()
+    random: false,
+}).toString();
 
 export const WhiteSpaceContainer = Template.bind({});
 WhiteSpaceContainer.args = {
     children: [
-        <p>{ testContent }</p>,
-        <p><strong>{ testContent.replaceAll(" ", "") }</strong></p>,
-        <p>{ testContent }</p>
+        <p>{testContent}</p>,
+        <p>
+            <strong>{testContent.replaceAll(" ", "")}</strong>
+        </p>,
+        <p>{testContent}</p>,
     ],
     paddingTop: "tiny",
     paddingRight: "small",
     paddingBottom: "regular",
     paddingLeft: "large",
-}
+};

package/src/components/Typography/typography.scss

@@ -14,7 +14,7 @@ html {
 body {
     font-family: $eccgui-font-family-default;
     font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -46,13 +46,14 @@ a {
 }
 
 mark {
+    color: $eccgui-color-info-text !important;
+
     /*
         we need to use important keyword overwrite here to prevent problems with
         styles from other stylesheets we cannot control here
         TODO: need to reevaluated when it is not used together with MDL anymore
     */
     background-color: rgba($eccgui-color-info-background, 1) !important;
-    color: $eccgui-color-info-text !important;
 }
 
 // HtmlContentBlock
@@ -63,16 +64,16 @@ mark {
 }
 
 .#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
-    line-height: $eccgui-size-typo-caption-lineheight;
     font-size: $eccgui-size-typo-caption;
+    line-height: $eccgui-size-typo-caption-lineheight;
 }
 
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-headline;
-        line-height: $eccgui-size-typo-headline-lineheight;
         font-weight: $eccgui-font-weight-light;
+        line-height: $eccgui-size-typo-headline-lineheight;
     }
 }
 
@@ -80,8 +81,8 @@ h2 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-title;
-        line-height: $eccgui-size-typo-title-lineheight;
         font-weight: $eccgui-font-weight-light;
+        line-height: $eccgui-size-typo-title-lineheight;
     }
 }
 
@@ -89,8 +90,8 @@ h3 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-subtitle;
-        line-height: $eccgui-size-typo-subtitle-lineheight;
         font-weight: $eccgui-font-weight-regular;
+        line-height: $eccgui-size-typo-subtitle-lineheight;
     }
 }
 
@@ -98,8 +99,8 @@ h4 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-text;
-        line-height: $eccgui-size-typo-text-lineheight;
         font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-text-lineheight;
     }
 }
 
@@ -107,9 +108,9 @@ h5 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
-        font-weight: $eccgui-font-weight-bold;
         font-style: italic;
+        font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-caption-lineheight;
     }
 }
 
@@ -117,8 +118,8 @@ h6 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
         font-weight: $eccgui-font-weight-bold;
+        line-height: $eccgui-size-typo-caption-lineheight;
     }
 }
 
@@ -159,9 +160,9 @@ table {
 li {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
-        margin-left: $eccgui-size-block-whitespace * 2;
         margin-top: $eccgui-size-block-whitespace * 0.25;
         margin-bottom: $eccgui-size-block-whitespace * 0.25;
+        margin-left: $eccgui-size-block-whitespace * 2;
     }
 }
 
@@ -180,9 +181,9 @@ blockquote {
 pre {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
-        background-color: $eccgui-color-workspace-background;
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
+        background-color: $eccgui-color-workspace-background;
     }
 }
 
@@ -193,7 +194,12 @@ table {
 }
 
 .#{$eccgui}-typography__contentblock {
-    audio, canvas, iframe, img, svg, video {
+    audio,
+    canvas,
+    iframe,
+    img,
+    svg,
+    video {
         max-width: 100%;
     }
 }
@@ -203,12 +209,12 @@ table {
 .#{$ns}-text-overflow-ellipsis,
 .#{$eccgui}-typography__overflowtext,
 .#{$eccgui}-typography__overflowtext--passdown * {
+    // display: inherit;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     overflow-wrap: normal;
     white-space: nowrap;
-    // display: inherit;
-    max-width: 100%;
     vertical-align: middle;
 }
 
@@ -225,12 +231,12 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    direction: rtl;
+    text-align: left;
     text-overflow: ellipsis;
+    direction: rtl;
     unicode-bidi: embed;
-    text-align: left;
 
-    &:after {
+    &::after {
         /*
             hex value for ‎
             @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367
@@ -238,7 +244,7 @@ table {
         content: "\200e";
     }
 
-    &:before {
+    &::before {
         /*
             hex value for ‎
             @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367

package/src/components/Workspace/WorkspaceContent.tsx

@@ -1,24 +1,19 @@
 import React from "react";
+
 // import PropTypes from 'prop-types';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Grid, { GridProps } from "./../Grid/Grid";
 import GridRow from "./../Grid/GridRow";
 
-export interface WorkspaceContentProps extends GridProps {};
+export type WorkspaceContentProps = GridProps;
 
-export const WorkspaceContent = ({ children, className = '', ...restProps }: WorkspaceContentProps) => {
+export const WorkspaceContent = ({ children, className = "", ...restProps }: WorkspaceContentProps) => {
     return (
-        <Grid
-            {...restProps}
-            as={'article'}
-            className={`${eccgui}-workspace__content ` + className}
-            fullWidth={true}
-        >
-            <GridRow dontWrapColumns={false}>
-                { children }
-            </GridRow>
+        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className} fullWidth={true}>
+            <GridRow dontWrapColumns={false}>{children}</GridRow>
         </Grid>
-    )
-}
+    );
+};
 
 export default WorkspaceContent;

package/src/components/Workspace/WorkspaceHeader.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,12 +12,12 @@ export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElemen
 
 export type IWorkspaceHeaderProps = WorkspaceHeaderProps;
 
-export const WorkspaceHeader = ({ children, className = '', ...otherProps }: WorkspaceHeaderProps) => {
+export const WorkspaceHeader = ({ children, className = "", ...otherProps }: WorkspaceHeaderProps) => {
     return (
         <div className={`${eccgui}-workspace__header ` + className} {...otherProps}>
-            { children }
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default WorkspaceHeader;

package/src/components/Workspace/WorkspaceMain.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-export interface WorkspaceMainProps extends GridColumnProps {};
+export type WorkspaceMainProps = GridColumnProps;
 
 export const WorkspaceMain = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
@@ -10,6 +12,6 @@ export const WorkspaceMain = ({ children, className = "", ...restProps }: GridCo
             {children}
         </GridColumn>
     );
-}
+};
 
 export default WorkspaceMain;

package/src/components/Workspace/WorkspaceSide.tsx

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

package/src/components/Workspace/_header.scss

@@ -3,7 +3,7 @@ $eccgui-color-workspace-background: #f5f5f5 !default;
 .#{$eccgui}-workspace__header {
     flex-grow: 1;
     min-width: 0;
-    padding: mini-units(1);
     height: mini-units(8);
+    padding: mini-units(1);
     background-color: $eccgui-color-workspace-background;
 }

package/src/components/Workspace/workspace.scss

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

package/src/components/index.scss

@@ -4,7 +4,6 @@
 @import "./Button/button";
 @import "./Card/card";
 @import "./Checkbox/checkbox";
-@import "./ContextOverlay/contextoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./Form/form";
@@ -16,6 +15,7 @@
 @import "./Label/label";
 @import "./Link/link";
 @import "./Menu/menu";
+@import "./ContextOverlay/contextoverlay";
 @import "./Notification/notification";
 @import "./OverviewItem/overviewitem";
 @import "./Pagination/pagination";

package/src/components/interfaces.ts

@@ -1,8 +1,8 @@
 export interface TestableComponent {
     /**
      * Can be set to use it as selector in test environments.
+     * It is also possible to use `data-testid`.
      */
-    "data-test-id"?: string
+    "data-test-id"?: string;
+    "data-testid"?: string;
 }
-
-export type { ContextOverlayProps } from "./ContextOverlay/ContextOverlay";

package/src/configuration/constants.ts

@@ -1,2 +1,2 @@
 // basic vars
-export const CLASSPREFIX = 'eccgui';
+export const CLASSPREFIX = "eccgui";

package/src/extensions/_index.scss

@@ -1,4 +1,5 @@
 @import "./react-flow/react-flow";
+
 /*
 CodeMirror styles are already included by the base component styles
 because it is used as lib for elements there already. 

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { CodeEditor } from "./CodeMirror";
 
@@ -9,14 +9,12 @@ export default {
     //parameters: { actions: { argTypesRegex: '^on.*' } },
     argTypes: {
         onChange: {
-            action: "value changed"
-        }
+            action: "value changed",
+        },
     },
 } as ComponentMeta<typeof CodeEditor>;
 
-const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => (
-    <CodeEditor {...args} />
-);
+const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {

package/src/extensions/codemirror/CodeMirror.tsx

@@ -66,6 +66,22 @@ export interface CodeEditorProps {
     wrapLines?: boolean;
 
     outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
+
+    /**
+     * Size in spaces that is used for a tabulator key.
+     */
+    tabIntentSize?: number;
+
+    /**
+     * Set the char type that is used for the tabulator key.
+     * If set to `space` the a number of `tabIntentSize` spaces is used instead of a tab.
+     */
+    tabIntentStyle?: "tab" | "space";
+
+    /**
+     * For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
+     */
+    tabForceSpaceForModes?: SupportedCodeEditorModes[];
 }
 
 /**
@@ -82,6 +98,9 @@ export const CodeEditor = ({
     height,
     wrapLines = false,
     outerDivAttributes,
+    tabIntentSize = 2,
+    tabIntentStyle = "tab",
+    tabForceSpaceForModes = ["python", "yaml"],
 }: CodeEditorProps) => {
     const domRef = useRef<HTMLTextAreaElement>(null);
 
@@ -90,9 +109,16 @@ export const CodeEditor = ({
             mode: convertMode(mode),
             lineWrapping: wrapLines,
             lineNumbers: !preventLineNumbers,
-            tabSize: 2,
+            tabSize: tabIntentSize,
+            indentUnit: tabIntentSize,
+            indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes ?? []).includes(mode),
             theme: "xq-light",
             readOnly: readOnly,
+            extraKeys: {
+                Tab: function (cm) {
+                    cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
+                },
+            },
         });
 
         editorInstance.on("change", (api) => {

package/src/extensions/codemirror/_codemirror.scss

@@ -7,9 +7,9 @@
     max-width: 100%;
 
     .CodeMirror {
+        height: 290px;
         clip-path: unset !important; // we may check later why they set inset(0) now
         border-radius: $pt-border-radius;
-        height: 290px;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
@@ -54,6 +54,20 @@
         .CodeMirror-sizer {
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
+
+        .cm-tab {
+            position: relative;
+
+            // mark tabulator chars
+            background-color: $eccgui-color-info-background;
+
+            &::after {
+                position: absolute;
+                left: 10%;
+                color: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+                content: "⇥";
+            }
+        }
     }
 }
 

package/src/extensions/react-flow/_config.scss

@@ -6,15 +6,12 @@ $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
-
 $reactflow-edge-stroke-opacity-default: 0.6 !default;
 $reactflow-edge-stroke-opacity-hover: 0.8 !default;
 $reactflow-edge-stroke-opacity-selected: 1 !default;
 $reactflow-edge-stroke-color-default: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
-
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
-
 $reactflow-transition-anglestart: -90deg;