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

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -1,21 +1,20 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
 import {
     Badge,
+    Card,
+    Depiction,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
-    Depiction,
-} from "./../../../index";
-
-import Card from "../../Card/Card";
-
+} from "./../../../../index";
+import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
+import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
-import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -29,49 +28,57 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Elements used as depiction, text and interactive elements of an overview-item."
-        }
+            description: "Elements used as depiction, text and interactive elements of an overview-item.",
+        },
     },
-} as ComponentMeta<typeof OverviewItem>;
+} as Meta<typeof OverviewItem>;
 
-const Template: ComponentStory<typeof OverviewItem> = (args) => (
-    <OverviewItem {...args}></OverviewItem>
+const Template: StoryFn<typeof OverviewItem> = (args) => (
+    <OverlaysProvider>
+        <OverviewItem {...args} />
+    </OverlaysProvider>
 );
 
 export const ItemExample = Template.bind({});
 ItemExample.args = {
     children: [
-        <OverviewItemDepiction { ...DepictionExample.args } />,
-        <OverviewItemDescription { ...DescriptionExample.args } />,
-        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
-        <OverviewItemActions children={ ActionsExample.args.children[1] } />
-    ]
-}
+        <OverviewItemDepiction {...DepictionExample.args} key="depiction" />,
+        <OverviewItemDescription {...DescriptionExample.args} key="description" />,
+        <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions key="hiddenactions" />,
+        <OverviewItemActions children={ActionsExample.args.children[1]} key="actions" />,
+    ],
+};
 
 export const ItemWithDepictionElement = Template.bind({});
 ItemWithDepictionElement.args = {
     children: [
         <Depiction
-            { ...OtherDepictionExample.args }
-            badge={<Badge position="top-right" intent="accent">B</Badge>}
+            {...OtherDepictionExample.args}
+            badge={
+                <Badge position="top-right" intent="accent">
+                    B
+                </Badge>
+            }
             ratio="1:1"
             resizing="stretch"
             captionPosition="tooltip"
             border
             rounded
         />,
-        <OverviewItemDescription { ...DescriptionExample.args } />,
-        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
-        <OverviewItemActions children={ ActionsExample.args.children[1] } />
-    ]
-}
+        <OverviewItemDescription {...DescriptionExample.args} />,
+        <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions />,
+        <OverviewItemActions children={ActionsExample.args.children[1]} />,
+    ],
+};
 
-const TemplateCard: ComponentStory<typeof OverviewItem> = (args) => (
-    <Card isOnlyLayout><OverviewItem {...args}></OverviewItem></Card>
+const TemplateCard: StoryFn<typeof OverviewItem> = (args) => (
+    <Card isOnlyLayout>
+        <OverviewItem {...args}></OverviewItem>
+    </Card>
 );
 
 export const ItemInCard = TemplateCard.bind({});
 ItemInCard.args = {
     ...ItemExample.args,
     hasSpacing: true,
-}
+};

package/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx

@@ -1,31 +1,26 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import IconButton from "../../Icon/IconButton";
-import Button from "../../Button/Button";
-import ContextMenu from "../../ContextOverlay/ContextMenu";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemActions from "./../OverviewItemActions";
+import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemActions",
-  component: OverviewItemActions,
-  subcomponents: { Button, IconButton, ContextMenu },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "User-interactive elements."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemActions>;
+    title: "Components/OverviewItem/OverviewItemActions",
+    component: OverviewItemActions,
+    subcomponents: { Button, IconButton, ContextMenu },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "User-interactive elements.",
+        },
+    },
+} as Meta<typeof OverviewItemActions>;
 
-const Template: ComponentStory<typeof OverviewItemActions> = (args) => (
-  <OverviewItemActions {...args}></OverviewItemActions>
-);
+const Template: StoryFn<typeof OverviewItemActions> = (args) => <OverviewItemActions {...args}></OverviewItemActions>;
 
 export const Default = Template.bind({});
 Default.args = {
     children: [
         <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
-        <Button affirmative>Other action</Button>
-    ]
-}
+        <Button affirmative>Other action</Button>,
+    ],
+};

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,31 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Depiction, Icon, OverviewItemDepiction } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
 
+import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemDepiction",
-  component: OverviewItemDepiction,
-  subcomponents: {Icon },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Element used as depiction."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemDepiction>;
+    title: "Components/OverviewItem/OverviewItemDepiction",
+    component: OverviewItemDepiction,
+    subcomponents: { Icon },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Element used as depiction.",
+        },
+    },
+} as Meta<typeof OverviewItemDepiction>;
 
-const Template: ComponentStory<typeof OverviewItemDepiction> = (args) => (
-  <OverviewItemDepiction {...args}></OverviewItemDepiction>
+const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
+    <OverviewItemDepiction {...args}></OverviewItemDepiction>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <><Icon name="artefact-dataset" /></>
-}
+    children: (
+        <>
+            <Icon name="artefact-dataset" />
+        </>
+    ),
+};
 
 export const UseDepictionElement = Template.bind({});
 UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />
-}
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};

package/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx

@@ -1,32 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemDescription from "./../OverviewItemDescription";
-import OverviewItemLine from "./../OverviewItemLine";
+import { OverviewItemDescription, OverviewItemLine } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemDescription",
-  component: OverviewItemDescription,
-  subcomponents: {
-      OverviewItemLine
-  },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for text content."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemDescription>;
+    title: "Components/OverviewItem/OverviewItemDescription",
+    component: OverviewItemDescription,
+    subcomponents: {
+        OverviewItemLine,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for text content.",
+        },
+    },
+} as Meta<typeof OverviewItemDescription>;
 
-const Template: ComponentStory<typeof OverviewItemDescription> = (args) => (
-  <OverviewItemDescription {...args}></OverviewItemDescription>
+const Template: StoryFn<typeof OverviewItemDescription> = (args) => (
+    <OverviewItemDescription {...args}></OverviewItemDescription>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <OverviewItemLine large><h4>Item title</h4></OverviewItemLine>,
-        <OverviewItemLine small><LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} /></OverviewItemLine>
-    ]
-}
+        <OverviewItemLine large>
+            <h4>Item title</h4>
+        </OverviewItemLine>,
+        <OverviewItemLine small>
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+        </OverviewItemLine>,
+    ],
+};

package/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -1,25 +1,23 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemLine from "./../OverviewItemLine";
+import { OverviewItemLine } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemLine",
-  component: OverviewItemLine,
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for line content."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemLine>;
+    title: "Components/OverviewItem/OverviewItemLine",
+    component: OverviewItemLine,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for line content.",
+        },
+    },
+} as Meta<typeof OverviewItemLine>;
 
-const Template: ComponentStory<typeof OverviewItemLine> = (args) => (
-  <OverviewItemLine {...args}></OverviewItemLine>
-);
+const Template: StoryFn<typeof OverviewItemLine> = (args) => <OverviewItemLine {...args}></OverviewItemLine>;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-}
+    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />,
+};

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -1,30 +1,24 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import {
-    OverviewItem,
-    OverviewItemList,
-} from "./../";
+import { Meta, StoryFn } from "@storybook/react";
 
+import { OverviewItem, OverviewItemList } from "./../../../../index";
 import { ItemExample } from "./OverviewItem.stories";
 
 export default {
     title: "Components/OverviewItem",
     component: OverviewItemList,
     subcomponents: {
-        OverviewItem
+        OverviewItem,
     },
     argTypes: {
         children: {
             control: "none",
-            description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards."
-        }
+            description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards.",
+        },
     },
-} as ComponentMeta<typeof OverviewItemList>;
+} as Meta<typeof OverviewItemList>;
 
-const Template: ComponentStory<typeof OverviewItemList> = (args) => (
-    <OverviewItemList {...args}></OverviewItemList>
-);
+const Template: StoryFn<typeof OverviewItemList> = (args) => <OverviewItemList {...args}></OverviewItemList>;
 
 export const ItemList = Template.bind({});
 ItemList.args = {
@@ -33,9 +27,9 @@ ItemList.args = {
     densityHigh: false,
     columns: 1,
     children: [
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-    ]
-}
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+    ],
+};

package/src/components/Pagination/Pagination.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
-import {
-    Pagination as CarbonPagination,
-    PaginationProps as CarbonPaginationProps,
-} from "carbon-components-react";
+import { Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface PaginationProps extends CarbonPaginationProps {
@@ -55,7 +53,7 @@ export const Pagination = ({
             }
         />
     );
-}
+};
 
 interface IPaginationDetails {
     total: number;
@@ -85,28 +83,36 @@ export const usePagination = ({
         current: 1,
         limit: initialPageSize ? initialPageSize : minSize,
         minPageSize: minSize,
-    })
+    });
     const [pagination, _setPagination] = useState<IPaginationDetails>(_pagination.current);
     const setPagination = React.useCallback((newPagination: IPaginationDetails) => {
         // Check if pagination has actually changed
-        const current = _pagination.current
-        if (newPagination.current !== current.current ||
+        const current = _pagination.current;
+        if (
+            newPagination.current !== current.current ||
             newPagination.minPageSize !== current.minPageSize ||
             newPagination.limit !== current.limit ||
-            newPagination.total !== current.total) {
-            _pagination.current = newPagination
-            _setPagination(newPagination)
+            newPagination.total !== current.total
+        ) {
+            _pagination.current = newPagination;
+            _setPagination(newPagination);
         }
-    }, [])
-    const onPaginationChange = React.useCallback(({ page, pageSize }: {page: any, pageSize: any}) => {
-        setPagination({ ..._pagination.current, current: page, limit: pageSize });
-    }, [setPagination]);
+    }, []);
+    const onPaginationChange = React.useCallback(
+        ({ page, pageSize }: { page: any; pageSize: any }) => {
+            setPagination({ ..._pagination.current, current: page, limit: pageSize });
+        },
+        [setPagination]
+    );
     // When the total number of pageable items changes, this function must be called
-    const onTotalChange = React.useCallback((total: number): void => {
-        if(_pagination.current.total !== total) {
-            setPagination({ ..._pagination.current, total: total, current: 1 });
-        }
-    }, [setPagination]);
+    const onTotalChange = React.useCallback(
+        (total: number): void => {
+            if (_pagination.current.total !== total) {
+                setPagination({ ..._pagination.current, total: total, current: 1 });
+            }
+        },
+        [setPagination]
+    );
     const paginationElement = (
         <Pagination
             onChange={onPaginationChange}

package/src/components/Pagination/Stories/Pagination.stories.tsx

@@ -1,32 +1,30 @@
 import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Pagination } from "../../../../index";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 export default {
     title: "Components/Pagination",
     component: Pagination,
-    argTypes: {
-    }
-} as ComponentMeta<typeof Pagination>
+    argTypes: {},
+} as ComponentMeta<typeof Pagination>;
 
-const PaginationExample = (args) => (
-    <Pagination {...args}/>
-);
+const PaginationExample = (args) => <Pagination {...args} />;
 
-export const Default : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const Default: ComponentStory<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
-    pageSizes:[10,20,50,100],
-    totalItems : 60,
-    backwardText:"Previous page",
-    forwardText : "Next page",
+    pageSizes: [10, 20, 50, 100],
+    totalItems: 60,
+    backwardText: "Previous page",
+    forwardText: "Next page",
 };
 
-export const ExtendedPagesizeSelection : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+export const ExtendedPagesizeSelection: ComponentStory<typeof Pagination> = PaginationExample.bind({});
 ExtendedPagesizeSelection.args = {
     ...Default.args,
-    pageSizes:[
-       {text: "10", value : "10"},
-       {text: "20", value : "25"},
-       {text: "50", value : "50"},
-       {text : 'Large page with 100 items' , value : "100"}
+    pageSizes: [
+        { text: "10", value: "10" },
+        { text: "20", value: "25" },
+        { text: "50", value: "50" },
+        { text: "Large page with 100 items", value: "100" },
     ],
 };

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,7 +1,4 @@
-import {
-    ProgressBar as BlueprintProgressBar,
-    ProgressBarProps as BlueprintProgressBarProps
-} from "@blueprintjs/core";
+import { ProgressBar as BlueprintProgressBar, ProgressBarProps as BlueprintProgressBarProps } from "@blueprintjs/core";
 
 // we currently do not apply changes or additions
 export const ProgressBar = BlueprintProgressBar;

package/src/components/ProgressBar/Stories/ProgressBar.stories.tsx

@@ -1,25 +1,21 @@
 import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { ProgressBar } from "../../../../index";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
-    argTypes: {
-    }
-
-} as ComponentMeta<typeof ProgressBar>
+    argTypes: {},
+} as ComponentMeta<typeof ProgressBar>;
 
-const ProgressBarExample : ComponentStory<typeof ProgressBar> = (args) => (
-    <ProgressBar {...args}></ProgressBar>
-);
+const ProgressBarExample: ComponentStory<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;
 
-export const Default  = ProgressBarExample.bind({});
+export const Default = ProgressBarExample.bind({});
 Default.args = {
-    value : 0.61,
+    value: 0.61,
     stripes: false,
-    animate : false
+    animate: false,
 };
 
-export const IndeterminateBar  = ProgressBarExample.bind({});
-IndeterminateBar.args = {
-};
+export const IndeterminateBar = ProgressBarExample.bind({});
+IndeterminateBar.args = {};

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {};
+export type PropertyValueListProps = React.HTMLAttributes<HTMLDListElement>;
 
 export const PropertyValueList = ({ className = "", children, ...otherProps }: PropertyValueListProps) => {
     return (
@@ -9,6 +10,6 @@ export const PropertyValueList = ({ className = "", children, ...otherProps }: P
             {children}
         </dl>
     );
-}
+};
 
 export default PropertyValueList;

package/src/components/PropertyValuePair/index.tsx

@@ -1,6 +1,6 @@
 import PropertyName from "./PropertyName";
 import PropertyValue from "./PropertyValue";
-import PropertyValuePair from "./PropertyValuePair";
 import PropertyValueList from "./PropertyValueList";
+import PropertyValuePair from "./PropertyValuePair";
 
 export { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList };

package/src/components/RadioButton/RadioButton.tsx

@@ -1,24 +1,13 @@
-import React from 'react';
-import {
-    Radio as BlueprintRadioButton,
-    RadioProps as BlueprintRadioProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { Radio as BlueprintRadioButton, RadioProps as BlueprintRadioProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface RadioButtonProps extends BlueprintRadioProps {
-    // currently we do not alter it
-};
+export type RadioButtonProps = BlueprintRadioProps;
 
-export const RadioButton = ({
-    children,
-    className='',
-    ...restProps
-}: RadioButtonProps) => {
+export const RadioButton = ({ children, className = "", ...restProps }: RadioButtonProps) => {
     return (
-        <BlueprintRadioButton
-            {...restProps}
-            className={`${eccgui}-radiobutton `+className}
-        >
+        <BlueprintRadioButton {...restProps} className={`${eccgui}-radiobutton ` + className}>
             {children}
         </BlueprintRadioButton>
     );

package/src/components/RadioButton/Stories/RadioButton.stories.tsx

@@ -1,30 +1,33 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { RadioButton, HtmlContentBlock } from "../../../../index";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { HtmlContentBlock, RadioButton } from "../../../../index";
 
 export default {
     title: "Forms/RadioButton",
     component: RadioButton,
     argTypes: {
-        onChange : {action : 'clicked'},
-    }
-} as ComponentMeta<typeof RadioButton>
+        onChange: { action: "clicked" },
+    },
+} as ComponentMeta<typeof RadioButton>;
 
-const Template:ComponentStory<typeof RadioButton>  = (args) => (
-    <RadioButton  {...args} />
-);
+const Template: ComponentStory<typeof RadioButton> = (args) => <RadioButton {...args} />;
 
 export const SimpleTextLabel = Template.bind({});
 SimpleTextLabel.args = {
-    label : "Radio button label",
-    inline : true,
+    label: "Radio button label",
+    inline: true,
 };
 
 export const ElementsAsLabel = Template.bind({});
 ElementsAsLabel.args = {
     ...SimpleTextLabel.args,
-    label : undefined,
-    inline : false,
-    children: <HtmlContentBlock><LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} /></HtmlContentBlock>
+    label: undefined,
+    inline: false,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />
+        </HtmlContentBlock>
+    ),
 };