@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/src/components/Typography/typography.scss

@@ -0,0 +1,282 @@
+// TODO: add vars and process them
+$eccgui-size-typography-whitespace-regular: $eccgui-size-typo-base !default;
+
+// lib requisites
+@import "reset";
+
+// basics
+
+html {
+    font-size: $eccgui-size-typo-base;
+    line-height: $eccgui-size-typo-base-lineheight;
+}
+
+body {
+    font-family: $eccgui-font-family-default;
+    font-weight: $eccgui-font-weight-regular;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: $eccgui-font-family-monospace;
+    font-size: 0.9em;
+}
+
+strong {
+    font-weight: $eccgui-font-weight-bold;
+}
+
+em {
+    font-family: $eccgui-font-family-cursive;
+    font-style: italic;
+}
+
+sup {
+    vertical-align: super;
+}
+
+sub {
+    vertical-align: sub;
+}
+
+a {
+    color: $eccgui-color-accent;
+}
+
+mark {
+    /*
+        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(yellow, 0.61) !important;
+    color: black !important;
+}
+
+// HtmlContentBlock
+
+.#{$eccgui}-typography__contentblock,
+.#{$eccgui}-typography__text {
+    line-height: $eccgui-size-typo-text-lineheight;
+}
+
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
+    line-height: $eccgui-size-typo-caption-lineheight;
+    font-size: $eccgui-size-typo-caption;
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+ul {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        list-style: disc;
+    }
+}
+
+ol {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        list-style: decimal;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+table {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        &:not(:last-child) {
+            margin-bottom: $eccgui-size-block-whitespace;
+        }
+    }
+}
+
+li {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        margin-left: $eccgui-size-block-whitespace * 2;
+        &:not(:last-child) {
+            margin-bottom: $eccgui-size-block-whitespace / 2;
+        }
+    }
+}
+
+blockquote {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        margin: $eccgui-size-block-whitespace * 2;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+pre {
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+        padding: $eccgui-size-block-whitespace / 2;
+        overflow-x: auto;
+    }
+}
+
+table {
+    .#{$eccgui}-typography__contentblock & {
+        @extend .#{$prefix}--data-table;
+    }
+}
+
+.#{$eccgui}-typography__contentblock {
+    audio, canvas, iframe, img, svg, video {
+        max-width: 100%;
+    }
+}
+
+// OverflowText
+
+.#{$ns}-text-overflow-ellipsis,
+.#{$eccgui}-typography__overflowtext,
+.#{$eccgui}-typography__overflowtext--passdown * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    white-space: nowrap;
+    // display: inherit;
+    max-width: 100%;
+}
+
+.#{$eccgui}-typography__overflowtext--inline {
+    display: inline-block;
+
+    &.#{$eccgui}-typography__overflowtext--passdown * {
+        display: inline;
+    }
+}
+
+.#{$eccgui}-typography__overflowtext--ellipsis-none {
+    text-overflow: clip;
+}
+
+.#{$eccgui}-typography__overflowtext--ellipsis-reverse {
+    direction: rtl;
+    text-overflow: ellipsis;
+    unicode-bidi: embed;
+    text-align: left;
+
+    &:after {
+        /*
+            hex value for ‎
+            @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367
+        */
+        content: "\200e";
+    }
+
+    &:before {
+        /*
+            hex value for ‎
+            @see https://stackoverflow.com/questions/20798667/#comment98304322_42551367
+        */
+        content: "\200e";
+    }
+}
+
+// helpers
+
+.#{$eccgui}-typography--nooverflow {
+    overflow: hidden;
+}
+
+.#{$eccgui}-typography--forcelinebreak {
+    word-break: break-all;
+}
+
+.#{$eccgui}-typography--preventlinebreak {
+    word-break: keep-all;
+    white-space: nowrap;
+}
+
+// white spaces
+@each $whitespacePlace in ("margin", "padding") {
+    @each $whitespaceDirection in ("top", "right", "bottom", "left") {
+        @each $whitespaceSizeName,
+            $whitespaceSizeValue
+                in (
+                    "tiny": $eccgui-size-typography-whitespace-regular/4,
+                    "small": $eccgui-size-typography-whitespace-regular/2,
+                    "regular": $eccgui-size-typography-whitespace-regular,
+                    "large": $eccgui-size-typography-whitespace-regular * 1.5,
+                    "xlarge": $eccgui-size-typography-whitespace-regular * 2
+                )
+        {
+            .#{$eccgui}-typography__whitespace-#{$whitespacePlace}#{$whitespaceDirection}-#{$whitespaceSizeName} {
+                #{$whitespacePlace}-#{$whitespaceDirection}: $whitespaceSizeValue;
+            }
+        }
+    }
+}

package/src/components/Workspace/WorkspaceContent.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Grid from "./../Grid/Grid";
+import GridRow from "./../Grid/GridRow";
+
+function WorkspaceContent({ children, className = '', ...restProps }: any) {
+    return (
+        <Grid
+            {...restProps}
+            as={'article'}
+            className={`${eccgui}-workspace__content ` + className}
+            fullWidth={true}
+        >
+            <GridRow>
+                { children }
+            </GridRow>
+        </Grid>
+    )
+}
+
+export default WorkspaceContent;

package/src/components/Workspace/WorkspaceHeader.tsx

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

package/src/components/Workspace/WorkspaceMain.tsx

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

package/src/components/Workspace/WorkspaceSide.tsx

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

package/src/components/Workspace/_header.scss

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

package/src/components/Workspace/workspace.scss

@@ -0,0 +1 @@
+@import 'header';

package/src/components/interfaces.ts

@@ -0,0 +1,3 @@
+export interface TestableComponent {
+    "data-test-id"?: string
+}

package/src/configuration/_variables.scss

@@ -0,0 +1,130 @@
+/**
+ * Configuration base variables used to calculate config variables used in
+ * included libraries.
+ *
+ * @author Michael Haschke, eccenca GmbH
+ */
+
+/*
+     We use own prefix here to enable distinction to variables from other
+     libraries. Variables are only defined if they are not set before. Use those
+     variables to overwrite the default look of the application.
+*/
+
+$eccgui: "eccgui" !default;
+
+// -- Configuration stack of colors --------------------------------------------
+
+$eccgui-color-primary: rgb(254, 143, 1) !default;
+$eccgui-color-primary-contrast: rgb(255, 255, 255) !default;
+$eccgui-color-accent: rgb(10, 103, 163) !default;
+$eccgui-color-accent-contrast: rgb(255, 255, 255) !default;
+
+$eccgui-color-success-text: rgb(46, 125, 50) !default;
+$eccgui-color-success-background: rgb(232, 245, 233) !default;
+$eccgui-color-info-text: rgb(21, 101, 192) !default;
+$eccgui-color-info-background: rgb(227, 242, 253) !default;
+$eccgui-color-warning-text: rgb(239, 108, 0) !default;
+$eccgui-color-warning-background: rgb(255, 243, 224) !default;
+$eccgui-color-danger-text: rgb(198, 40, 40) !default;
+$eccgui-color-danger-background: rgb(255, 235, 238) !default;
+
+$eccgui-color-applicationheader-text: #222 !default;
+$eccgui-color-applicationheader-background: #ddd !default;
+$eccgui-color-workspace-text: #444 !default;
+$eccgui-color-workspace-background: #f5f5f5 !default;
+
+$eccgui-color-application-text: $eccgui-color-workspace-text !default; // deprecated
+$eccgui-color-application-background: $eccgui-color-workspace-background !default; // deprecated
+
+// -- Configuration stack of typography ----------------------------------------
+
+$eccgui-font-family-serif: "Roboto Slab", serif !default;
+$eccgui-font-family-serif-condensed: "Roboto Slab", serif !default;
+$eccgui-font-family-sans: "Roboto", sans-serif !default;
+$eccgui-font-family-sans-condensed: "Roboto Condensed", sans-serif !default;
+$eccgui-font-family-monospace: "Roboto Mono", monospace !default;
+$eccgui-font-family-monospace-condensed: "Roboto Mono", monospace !default;
+$eccgui-font-family-cursive: #{$eccgui-font-family-serif-condensed}, cursive !default;
+$eccgui-font-family-fantasy: fantasy !default;
+$eccgui-font-family-default: $eccgui-font-family-sans !default;
+$eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px
+$eccgui-size-typo-base-lineheight: 1.39 !default; // only ratio to font size, no unit!
+$eccgui-size-type-levelratio: 7/6 !default; // ratio without unit! used to calculate different text sizes, etc ...
+
+$eccgui-font-weight-light: 300 !default;
+$eccgui-font-weight-regular: 400 !default;
+$eccgui-font-weight-bold: 600 !default;
+$eccgui-font-spacing-condensed: -0.5px !default;
+$eccgui-font-spacing-regular: 0 !default;
+$eccgui-font-spacing-wide: 0.5px !default;
+
+// -- Configuration stack of sizes ---------------------------------------------
+
+$eccgui-size-block-whitespace: $eccgui-size-typo-base !default;
+$eccgui-size-inline-whitespace: $eccgui-size-typo-base / 2 !default;
+
+// -- Configuration stack of opacities -----------------------------------------
+
+$eccgui-opacity-regular: 1 !default;
+$eccgui-opacity-narrow: 0.8 !default;
+$eccgui-opacity-muted: 0.61 !default;
+$eccgui-opacity-disabled: 0.39 !default;
+$eccgui-opacity-invisible: 0 !default;
+
+// -- Calculation of more config vars ------------------------------------------
+
+/*
+    You can overwrite them by setting them before loading this configuration but
+    it is not recommended to do so.
+*/
+
+$eccgui-size-typo-caption: 1 / $eccgui-size-type-levelratio *
+    $eccgui-size-typo-base !default;
+$eccgui-size-typo-caption-lineheight: max(
+    $eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight,
+    1
+) !default;
+$eccgui-size-typo-text: $eccgui-size-typo-base !default; // should be `1rem` but bp3 currently do not support rem units here, leads to errors in their calculations for values of other properties
+$eccgui-size-typo-text-lineheight: max(
+    $eccgui-size-typo-base-lineheight,
+    1
+) !default;
+$eccgui-size-typo-subtitle: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-text !default;
+$eccgui-size-typo-subtitle-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-text-lineheight,
+    1
+) !default;
+$eccgui-size-typo-title: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-subtitle !default;
+$eccgui-size-typo-title-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-subtitle-lineheight,
+    1
+) !default;
+$eccgui-size-typo-headline: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-title !default;
+$eccgui-size-typo-headline-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-title-lineheight,
+    1
+) !default;
+$eccgui-size-typo-display-1: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-headline !default;
+$eccgui-size-typo-display-1-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-headline-lineheight,
+    1
+) !default;
+$eccgui-size-typo-display-2: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-display-1 !default;
+$eccgui-size-typo-display-2-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-display-1-lineheight,
+    1
+) !default;
+$eccgui-size-typo-display-3: $eccgui-size-type-levelratio *
+    $eccgui-size-typo-display-2 !default;
+$eccgui-size-typo-display-3-lineheight: max(
+    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-display-2-lineheight,
+    1
+) !default;
+
+$eccgui-size-maxwidth-workview: 100 * $eccgui-size-typo-text;

package/src/configuration/constants.ts

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

package/src/extensions/_index.scss

@@ -0,0 +1 @@
+@import "./react-flow/react-flow";

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

@@ -0,0 +1,16 @@
+$reactflow-node-basesize: $button-height !default;
+$reactflow-node-border-color: $eccgui-color-workspace-text !default;
+$reactflow-node-background-color: $button-background-color !default;
+$reactflow-node-color: $eccgui-color-workspace-text !default;
+$reactflow-node-font-size: $eccgui-size-typo-caption !default;
+$reactflow-node-border-width: $button-border-width !default;
+$reactflow-node-border-radius: $button-border-radius !default;
+$reactflow-edge-stroke-color: rgba($eccgui-color-workspace-text, .61) !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-edge-stroke-opacity: alpha($reactflow-edge-stroke-color) !default;
+$reactflow-edge-stroke-opacity-hover: alpha($reactflow-edge-stroke-color) !default;
+$reactflow-edge-stroke-opacity-selected: alpha($reactflow-edge-stroke-color) !default;

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

@@ -0,0 +1,5 @@
+@import "config";
+@import "nodes/nodes";
+@import "edges/edges";
+@import "handles/handles";
+@import "minimap/minimap";

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -0,0 +1,77 @@
+import React, { memo } from 'react';
+import {
+    EdgeProps as ReactFlowEdgeProps,
+} from "react-flow-renderer/dist/types";
+import {
+    getMarkerEnd,
+    getEdgeCenter,
+    EdgeText,
+} from "react-flow-renderer";
+import { drawEdgeStraight} from "./utils";
+
+export interface EdgeDefaultDataProps {
+    pathGlowWidth?: number;
+}
+
+export interface EdgeDefaultProps extends ReactFlowEdgeProps {
+    data?: EdgeDefaultDataProps,
+    drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
+}
+
+export const EdgeDefault = memo(
+    (edge: EdgeDefaultProps) => {
+        const {
+            data = {},
+            drawSvgPath = drawEdgeStraight,
+            ...edgeOriginalProperties
+        } = edge;
+        const {
+            pathGlowWidth = 10,
+        } = data;
+
+        const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
+        const markerEnd = getMarkerEnd(
+            edgeOriginalProperties.arrowHeadType,
+            edgeOriginalProperties.markerEndId
+        );
+        const edgeCenter = getEdgeCenter({
+            sourceX: edgeOriginalProperties.sourceX,
+            sourceY: edgeOriginalProperties.sourceY,
+            targetX: edgeOriginalProperties.targetX,
+            targetY: edgeOriginalProperties.targetY,
+        });
+
+        const edgeLabel = edgeOriginalProperties.label ? (
+            <EdgeText
+                x={edgeCenter[0]}
+                y={edgeCenter[1]}
+                label={edgeOriginalProperties.label}
+                labelStyle={edgeOriginalProperties.labelStyle}
+                labelShowBg={edgeOriginalProperties.labelShowBg}
+                labelBgStyle={edgeOriginalProperties.labelBgStyle}
+                labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
+                labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
+            />
+        ) : null;
+
+        const edgeStyle = edgeOriginalProperties.style ?? {};
+        return (
+            <g style={{...edgeStyle, color: edgeStyle.color || edgeStyle.stroke}}>
+                { pathGlowWidth && (
+                    <path
+                        d={pathDisplay}
+                        className="react-flow__edge-path-glow"
+                        strokeWidth={pathGlowWidth}
+                    />
+                )}
+                <path
+                    d={pathDisplay}
+                    className="react-flow__edge-path"
+
+                    markerEnd={markerEnd}
+                />
+                { edgeLabel }
+            </g>
+        );
+    }
+);

package/src/extensions/react-flow/edges/EdgeStep.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
+import { drawEdgeStep } from "./utils";
+
+export interface EdgeStepDataProps extends EdgeDefaultDataProps {
+    stepCornerRadius?: number;
+}
+
+export interface EdgeStepProps extends EdgeDefaultProps {
+    data?: EdgeStepDataProps,
+}
+
+export const EdgeStep = memo(
+    (edge: EdgeStepProps) => {
+        return (
+            <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />
+        );
+    }
+);

package/src/extensions/react-flow/edges/EdgeTools.tsx

@@ -0,0 +1,39 @@
+import React, {memo} from 'react';
+import {ContextOverlay} from "../../../index";
+import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
+import {
+    IPopoverProps as IBlueprintPopoverProps,
+    PopoverInteractionKind as BlueprintPopoverInteractionKind,
+} from "@blueprintjs/core";
+
+interface PosOffset {
+    left: number;
+    top: number;
+}
+
+export interface EdgeToolsProps extends IBlueprintPopoverProps {
+    posOffset: PosOffset;
+    children: string | JSX.Element | JSX.Element[];
+}
+
+export const EdgeTools = memo(
+    ({
+        posOffset,
+        children,
+        ...otherProps
+    }: EdgeToolsProps) => {
+        return (
+            <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }}>
+                <ContextOverlay
+                    {...otherProps}
+                    defaultIsOpen={true}
+                    autoFocus={true}
+                    interactionKind={BlueprintPopoverInteractionKind.HOVER}
+                    content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
+                    target={<div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />}
+                    popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
+                />
+            </div>
+        );
+    }
+);