@eccenca/gui-elements 23.0.0-rc.3 → 23.0.0-rc.4

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,26 @@
 import React, { useState } from "react";
-import {Pagination as CarbonPagination} from "carbon-components-react";
+import {Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+interface PaginationProps extends CarbonPaginationProps {
+    /**
+     Hide the select option to set how many items per page are displayed.
+     */
+    hidePageSizeConfiguration?: boolean;
+    /**
+     Hide info about the item numbers that are currently displayed.
+     */
+    hideInfoText?: boolean;
+    /**
+     Hide select box to switch between pages.
+     */
+    hidePageSelect?: boolean;
+    /**
+     Hide buttons to switch beteen nex/prev pages.
+     */
+    hideNavigationArrows?: boolean;
+}
+
 function Pagination({
     className,
     hidePageSizeConfiguration = false,
@@ -9,7 +28,7 @@ function Pagination({
     hidePageSelect = false,
     hideNavigationArrows = false,
     ...otherProps
-}: any) {
+}: PaginationProps) {
     return (
         <CarbonPagination
             {...otherProps}
@@ -38,10 +57,7 @@ interface IPaginationOptions {
     // The option of page sizes
     pageSizes?: number[];
     // Presentation options
-    presentation?: {
-        // For narrow space requirements, the info text in the middle can be hidden
-        hideInfoText?: boolean;
-    };
+    presentation?: Omit<PaginationProps, "onChange" | "totalItems" | "pageSizes" | "page" | "pageSize">;
 }
 
 // Custom hook to add pagination. Currently only use-cases are supported where paging has no further side effects, e.g. REST calls.

package/src/components/SimpleTable/simpletable.scss

@@ -7,9 +7,14 @@ $eccgui-size-tablecell-height-tall: mini-units(6) !default;
 $eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
+$eccgui-color-tableheader-background: lighten($menu-item-color-hover, 15%) !default; // rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+$eccgui-color-tablerow-background-even: $card-background-color !default;
+$eccgui-color-tablerow-background-odd: lighten($menu-item-color-hover, 24%) !default;
+$eccgui-color-tablerow-hover: $menu-item-color-hover !default;
+$eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
 
 // lib vars
-/* already defined */
 // import libs
 // currently not needed @import '~carbon-components/scss/components/data-table/data-table-action';
 @import "~carbon-components/scss/components/data-table/data-table-core";
@@ -23,6 +28,10 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
     min-width: unset;
 }
 
+.#{$prefix}--data-table-header {
+    background-color: $eccgui-color-tablerow-background-even;
+}
+
 .#{$prefix}--data-table {
     min-width: 100%;
 }
@@ -33,9 +42,12 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 }
 
 .#{$prefix}--data-table th {
-    background-color: rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+    background-color: $eccgui-color-tableheader-background;
     font-weight: $eccgui-size-tableheader-font-weight;
 }
+.#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
+    background: $eccgui-color-tableheader-background;
+}
 
 .#{$prefix}--data-table thead tr,
 .#{$prefix}--data-table tbody tr,
@@ -72,6 +84,50 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
     }
 }
 
+.#{$prefix}--data-table td,
+.#{$prefix}--data-table tbody th {
+    border-top: 1px solid $eccgui-color-tablerow-background-even;
+    background-color: $eccgui-color-tablerow-background-even;
+}
+
+.#{$prefix}--data-table tbody {
+    background-color: $eccgui-color-tablerow-background-even;
+
+    tr {
+        &:hover {
+            background-color: transparent;
+
+            th, td {
+                border-top: 1px solid $eccgui-color-tablerow-hover;
+                border-bottom: 1px solid $eccgui-color-tablerow-hover;
+                background-color: $eccgui-color-tablerow-hover;
+            }
+        }
+
+        &.#{$prefix}--data-table--selected {
+            th {
+                border-top: 1px solid mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%);
+                background-color: mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%);
+            }
+            td {
+                border-top: 1px solid $eccgui-color-tablerow-selected;
+                background-color: $eccgui-color-tablerow-selected;
+            }
+
+            &:hover {
+                th {
+                    border-top: 1px solid mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%);
+                    background-color: mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%);
+                }
+                td {
+                    border-top: 1px solid $eccgui-color-tablerow-selected-hover;
+                    background-color: $eccgui-color-tablerow-selected-hover;
+                }
+            }
+        }
+    }
+}
+
 // Compact
 
 .#{$prefix}--data-table--compact thead tr,
@@ -110,6 +166,10 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 
 // Sticky header
 
+.#{$prefix}--data-table_inner-container {
+    background-color: $eccgui-color-tableheader-background;
+}
+
 .#{$prefix}--data-table--sticky-header {
     thead tr th {
         // border-bottom-color: $active-ui;

package/src/components/Spinner/Spinner.tsx

@@ -23,6 +23,12 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
     stroke?: SpinnerStroke
     // Delay when to show the spinner in ms, default: 0
     delay?: number
+    /**
+     * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
+     * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
+     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or soe equivalent CSS rule.
+     */
+    showLocalBackdrop?: boolean
 }
 
 function Spinner({
@@ -32,6 +38,7 @@ function Spinner({
     position = "local",
     size,
     stroke,
+    showLocalBackdrop = false,
     delay = 0,
     ...otherProps
 }: SpinnerProps) {
@@ -80,11 +87,12 @@ function Spinner({
             tagName={spinnerElement}
             className={
                 `${eccgui}-spinner` +
-                (className ? " " + className : "") +
-                ` ${eccgui}-spinner--intent-` +
-                spinnerIntent +
-                ` ${eccgui}-spinner--size-` +
-                spinnerSize
+                ` ${eccgui}-spinner--position-${position}` +
+                ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+                ` ${eccgui}-spinner--size-${spinnerSize}` +
+                (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
+                (className ? " " + className : "")
+
             }
             {...otherProps}
         />

package/src/components/Spinner/spinner.scss

@@ -69,6 +69,20 @@ span.#{$eccgui}-spinner {
     width: 1em;
 }
 
+.#{$eccgui}-spinner--localbackdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+
+    .#{$eccgui}-card & {
+        background-color: rgba($card-background-color, $eccgui-opacity-muted);
+    }
+}
+
 .#{$eccgui}-spinner__overlay {
     position: fixed;
     display: flex;

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,15 @@
-import React, { memo } from 'react';
-import { Switch as BlueprintSwitch } from "@blueprintjs/core";
+import React, {memo, SyntheticEvent} from 'react';
+import { Switch as BlueprintSwitch, SwitchProps } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Switch({className, ...otherProps}:any) {
-    const handleChange = (e: any) => {
-        otherProps.onChange(e.target.checked)
+interface Props extends Omit<SwitchProps, "onChange"> {
+    onChange?: (value: boolean) => any
+}
+
+function Switch({onChange, ...otherProps}: Props) {
+    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
+        const checked = !!(e as any).target?.checked
+        onChange && onChange(checked);
     };
 
     return <BlueprintSwitch

package/src/components/Tabs/Tab.tsx

@@ -4,6 +4,7 @@ import {
     TabProps as BlueprintTabProps
 } from "@blueprintjs/core";
 import Color from "color";
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import TabTitle, { TabTitleProps } from "./TabTitle";
 
@@ -47,7 +48,7 @@ export const transformTabProperties = ({
         }
         colorStyles = {
             backgroundColor: `${color.rgb().toString()}`,
-            color: color.isLight() ? "#000" : "#fff",
+            color: decideContrastColorValue({testColor: color}),
         }
     }
     const extraStyles = (dontShrink || !!backgroundColor) ? {style: {...flexStyles, ...colorStyles}} : {};

package/src/components/Tag/Tag.tsx

@@ -4,6 +4,7 @@ import {
     TagProps as BlueprintTagProps
 } from "@blueprintjs/core";
 import Color from "color";
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 interface TagProps extends Omit<
@@ -74,7 +75,7 @@ function Tag({
             ...additionalStyles,
             ...{
                 backgroundColor: color.rgb().toString(),
-                color: color.isLight() ? "#000" : "#fff",
+                color: decideContrastColorValue({testColor: color}),
             }
         }
     }

package/src/components/Tag/TagList.tsx

@@ -14,7 +14,7 @@ function TagList({
         <ul
             className={
                 `${eccgui}-tag__list` +
-                ((className && label) ? ' ' + className : '')
+                ((className && !label) ? ' ' + className : '')
             }
             {...otherProps}
         >

package/src/components/Tag/tag.scss

@@ -93,6 +93,7 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__list-item {
     margin-bottom: $eccgui-size-margin-tag;
     display: inline-block;
+    max-width: 100%;
 }
 
 .#{$eccgui}-tag__list-label,

package/src/components/TextField/TextField.tsx

@@ -69,6 +69,10 @@ function TextField({
       break;
   }
 
+  if ((!!otherProps.readOnly || !!otherProps.disabled) && !!otherProps.value && !otherProps.title) {
+      otherProps["title"] = otherProps.value;
+  }
+
   return (
     <BlueprintInputGroup
       className={`${eccgui}-textfield ` + className}

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

@@ -96,4 +96,5 @@ export const Default = Template.bind({});
 Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
+    readOnly: false,
 };

package/src/components/TextField/textfield.scss

@@ -4,7 +4,7 @@
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
-    $eccgui-size-type-levelratio !default;
+$eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -45,6 +45,30 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 // enhancements
 
+@mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
+    @keyframes intent-state-flash-#{$state} {
+        0% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
+        39% { background-color: $bgcolor; }
+        100% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
+    }
+
+    .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
+        animation-name: intent-state-flash-#{$state};
+        background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+    }
+}
+
+.#{$ns}-input {
+    .#{$ns}-input-group[class*="#{$ns}-intent"] & {
+        animation-delay: 0.5s;
+        animation-duration: 1s;
+    }
+    @include intent-state-flash("primary", $eccgui-color-info-background);
+    @include intent-state-flash("success", $eccgui-color-success-background);
+    @include intent-state-flash("warning", $eccgui-color-warning-background);
+    @include intent-state-flash("danger", $eccgui-color-danger-background);
+}
+
 .#{$eccgui}-textarea {
     width: 100%;
 }

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -17,20 +17,28 @@ const Template: ComponentStory<typeof Tooltip> = (args) => (
     <Tooltip {...args} />
 );
 
+const testContent = loremIpsum({
+    p: 1,
+    avgSentencesPerParagraph: 2,
+    random: false
+}).toString()
+
 export const Default = Template.bind({});
 Default.args = {
     children: <span>hover me</span>,
-    content: loremIpsum({
-        p: 1,
-        avgSentencesPerParagraph: 2,
-        random: false
-    }).toString(),
+    content: testContent,
     addIndicator: true,
-    // this is a workaround to prevent empty functions in code example
+    // Workaround: setting handlers to false is the only way to prevent Storybook to insert empty handlers in the code examples
     onClose: false,
-    // onClosed: false, // this somehow leads to a problem when closed with `<span>` target
     onClosing: false,
+    //onClosed: false,
     onInteraction: false,
     onOpened: false,
     onOpening: false,
 }
+
+export const MarkdownSupport = Template.bind({});
+MarkdownSupport.args = {
+    ...Default.args,
+    content: "### This is a headline" + "\n\n" + testContent,
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -6,6 +6,7 @@ import {
     Tooltip2 as BlueprintTooltip,
     Tooltip2Props as BlueprintTooltipProps
 } from "@blueprintjs/popover2";
+import { MarkdownParserProps, Markdown } from "./../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
@@ -22,6 +23,16 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      * The tolltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
+    /**
+     * A regular expression that when it matches against the tooltip text, enables the tooltip to be rendered as Markdown.
+     * This only works if the tooltip content is a string.
+     * Set to `false` to turn off Markdown rendering completely.
+     */
+     markdownEnabler?: false | string;
+     /**
+      * Set properties for the Markdown parser
+      */
+     markdownProps?: Omit<MarkdownParserProps, "children">;
 }
 
 function Tooltip({
@@ -30,14 +41,26 @@ function Tooltip({
     className = "",
     size = "medium",
     addIndicator = false,
+    markdownEnabler = "\n\n",
+    markdownProps,
     ...otherProps
 }: TooltipProps) {
+    let tooltipContent = content;
+
+    if (
+        typeof content === "string" &&
+        typeof markdownEnabler === "string" &&
+        new RegExp(markdownEnabler).test(content)
+    ) {
+        tooltipContent = <Markdown {...markdownProps}>{content}</Markdown>;
+    }
+
     return (
         <BlueprintTooltip
             lazy={true}
             hoverOpenDelay={500}
             {...otherProps}
-            content={content}
+            content={tooltipContent}
             className={
                 `${eccgui}-tooltip__wrapper` +
                 (className ? " " + className : "") +

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tree, TreeNodeInfo, Tag, OverflowText, Icon } from "./../../index";
+import { TreeNodeShadow as TreeNode } from "./Tree";
+
+export default {
+    title: "Components/Tree",
+    component: Tree,
+    subcomponents: { TreeNode },
+    argTypes: {
+    },
+} as ComponentMeta<typeof Tree>;
+
+const Template: ComponentStory<typeof Tree> = (args) => {
+    const [treeContents, setTreeContents] = React.useState(args.contents);
+
+    return (
+        <Tree
+            {...args}
+            contents={treeContents}
+            /*
+            FIXME: should be demonstrated but is not the focus here
+            onNodeCollapse={toggleNode}
+            onNodeExpand={toggleNode}
+            */
+        />
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    contents: [
+        {
+            id: 0,
+            label: "Tree item 1",
+            isExpanded: true,
+            childNodes: [
+                {
+                    id: 1,
+                    label: <>Tree item 1a with{" "}<Tag>Tag</Tag></>,
+                },
+                {
+                    id: 2,
+                    label: "Tree item 1b with a very long label that is not ellipsed on overflow",
+                },
+                {
+                    id: 3,
+                    label: <OverflowText inline>Tree item 1c with a very long label that is ellipsed on overflow</OverflowText>,
+                },
+                {
+                    id: 4,
+                    label: "Tree item 1d with icon",
+                    icon: <Icon name="item-info" />
+                },
+            ]
+        },
+        {
+            id: 5,
+            label: "Tree item 2",
+            hasCaret: true,
+        },
+    ] as TreeNodeInfo[]
+}

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import {
+    Tree as BlueprintTree,
+    TreeProps as BlueprintTreeProps,
+    TreeNode as BlueprintTreeNode,
+    TreeNodeInfo as BlueprintTreeNodeInfo,
+} from "@blueprintjs/core";
+import { IconProps } from "./../Icon/Icon";
+
+/* This is basically a tunnel to the Blueprint elements but we change a view thigs regarding the icons */
+
+// TreeNode
+
+export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "childNodes" | "icon"> {
+    /**
+     * Child tree nodes of this node.
+     */
+    childNodes?: Array<TreeNodeInfo<T>>;
+    /**
+     * `<Icon />` element to render next to the node's label.
+     */
+    icon?: React.ReactElement<IconProps>;
+}
+
+//export const TreeNode = BlueprintTreeNode;
+
+export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
+    children?: React.ReactNode;
+    contentRef?: (node: TreeNode<T>, element: HTMLDivElement | null) => void;
+    depth: number;
+    key?: string | number;
+    onClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onCollapse?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onContextMenu?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onDoubleClick?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onExpand?: (node: TreeNode<T>, e: React.MouseEvent<HTMLSpanElement>) => void;
+    onMouseEnter?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (node: TreeNode<T>, e: React.MouseEvent<HTMLDivElement>) => void;
+    path: number[];
+}
+export class TreeNode<T = {}> extends BlueprintTreeNode<TreeNodeProps<T>> {
+}
+export class TreeNodeShadow<T = {}> extends React.Component<TreeNodeProps<T>> {
+    // only provided for Storybook, so it can read the correct interface
+}
+
+// Tree
+
+export interface TreeProps<T = {}> extends Omit<BlueprintTreeProps<T>, "contents"> {
+    /**
+     * Tree contents.
+     */
+    contents: ReadonlyArray<TreeNodeInfo<T>>;
+}
+
+/**
+ * Tree component to display a tree structure.
+ * Have a look to the underlaying [BlueprintJS Tree](https://blueprintjs.com/docs/#core/components/tree) component for examples how to use handlers.
+ * Use only our `<Icon />` elements in the tree nodes!
+ */
+export const Tree = BlueprintTree;

package/src/components/Tree/tree.scss

@@ -0,0 +1,28 @@
+@import "~@blueprintjs/core/src/components/tree/tree";
+
+.#{$ns}-tree {
+    overflow-x: hidden;
+}
+
+.#{$ns}-tree-node-content {
+    & > .#{$eccgui}-icon {
+        margin-right: $eccgui-size-inline-whitespace;
+    }
+}
+
+.#{$ns}-tree-node-label {
+    overflow: visible;
+    min-width: 0;
+
+    span {
+        display: inherit;
+    }
+
+    & > span {
+        display: inline-block;
+    }
+
+    .#{$ns}-tag {
+        display: inline-flex;
+    }
+}

package/src/includes/carbon-components/_variables.scss

@@ -30,7 +30,7 @@ $feature-flags: (
     // not necessary, we include 16 columns grid directly
 ) !default;
 
-// ⚠️ Manage deprecations
+// Manage deprecations
 $deprecations--entry: true;
 $deprecations--reasons: ();
 $deprecations--message: "Deprecated code was found, this code will be removed before the next release of Carbon.";
@@ -105,5 +105,7 @@ $layout-04: carbon--rem(
 ) !default; // regular height of text input
 $spacing-05: carbon--rem($eccgui-size-inline-whitespace) !default;
 
+// FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables
+
 // fetch some imports even earlier than normally necessary to have them ready before auto-included by library elements
 @import "./../../components/Button/button";

package/src/index.scss

@@ -59,7 +59,7 @@
 // used in own component @import "~@blueprintjs/core/src/components/tag-input/tag-input";
 // used in own component @import "~@blueprintjs/core/src/components/toast/toast";
 // used in own component @import "~@blueprintjs/core/src/components/tooltip/tooltip";
-// currently not used @import "~@blueprintjs/core/src/components/tree/tree";
+// used in own component @import "~@blueprintjs/core/src/components/tree/tree";
 
 // -- Carbon Elements ----------------------------------------------------------
 
@@ -142,7 +142,6 @@
 @import "./components/Icon/icon";
 @import "./components/Menu/menu";
 @import "./components/ContextOverlay/contextoverlay";
-@import "./components/SimpleTable/simpletable";
 @import "./components/Button/button";
 @import "./components/OverviewItem/overviewitem";
 @import "./components/Breadcrumb/breadcrumb";
@@ -165,11 +164,15 @@
 @import "./components/Notification/notification";
 @import "./components/Link/link";
 @import "./components/Spinner/spinner";
+@import "./components/InteractionGate/interactiongate";
 @import "./components/Tabs/tabs";
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
 @import "./components/AutoSuggestion/AutoSuggestion";
 @import "./components/Select/select";
+@import "./components/HoverToggler/hovertoggler";
+@import "./components/SimpleTable/simpletable";
+@import "./components/Tree/tree";
 @import "./extensions/codemirror/codemirror";
 
 // == load tweaks ==============================================================