@eccenca/gui-elements 25.0.0-rc.2 → 25.0.0

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,20 +1,11 @@
 import React from "react";
-import { Classes, OverlaysProvider } from "@blueprintjs/core";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import {
-    Button,
-    Card,
-    CardContent,
-    Modal,
-    ModalContext,
-    ModalSize,
-    Spacing,
-    useModalContext,
-} from "./../../../../index";
+import { Card, Modal } from "./../../../../index";
 
 export default {
     title: "Components/Dialog/Modal",
@@ -24,15 +15,18 @@ export default {
             control: false,
         },
     },
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "400px" }}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
 } as Meta<typeof Modal>;
 
-const Template: StoryFn<typeof Modal> = (args) => (
-    <OverlaysProvider>
-        <div style={{ height: "400px" }}>
-            <Modal {...args} />
-        </div>
-    </OverlaysProvider>
-);
+const Template: StoryFn<typeof Modal> = (args) => <Modal {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -42,135 +36,3 @@ Default.args = {
     onOpening: fn(),
     onClosing: fn(),
 };
-
-const ContextTemplate = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
-    const { setModalOpen, openModalStack } = useModalContext();
-
-    return (
-        <OverlaysProvider>
-            <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
-                <ModalContext.Provider value={{ setModalOpen, openModalStack }}>{children}</ModalContext.Provider>
-            </div>
-        </OverlaysProvider>
-    );
-};
-
-const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
-    return (
-        <Card style={{ height: "100%" }}>
-            <CardContent>{children}</CardContent>
-        </Card>
-    );
-};
-
-/** Component for nested modals. */
-const ExampleModal = ({
-    id,
-    size,
-    children,
-}: {
-    id?: string;
-    size: ModalSize;
-    children?: React.HTMLAttributes<HTMLDivElement>["children"];
-}) => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
-
-    React.useEffect(() => {
-        setPortalElement(document.getElementById("modalPortal")!);
-    }, []);
-
-    return (
-        <Modal
-            modalId={id}
-            size={size}
-            isOpen={isOpen}
-            usePortal={true}
-            portalContainer={portalElement}
-            hasBackdrop={true}
-            onOpened={() => {
-                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
-                document.body.classList.remove(Classes.OVERLAY_OPEN);
-            }}
-        >
-            <ModalContent>
-                Modal with constant modal ID "{id}".
-                <Spacing />
-                <TrackingContent />
-                <Spacing />
-                {children}
-                <Spacing />
-                <Button key={"close"} onClick={() => setIsOpen(false)}>
-                    Close
-                </Button>
-            </ModalContent>
-        </Modal>
-    );
-};
-
-const InnerModal = () => {
-    return <ExampleModal id="innerModal" size="small" />;
-};
-
-const MiddleModal = () => {
-    return (
-        <ExampleModal id="middleModal" size="regular">
-            <InnerModal />
-        </ExampleModal>
-    );
-};
-
-/** Shows the current stack of open modals. */
-const TrackingContent = () => {
-    const modalContext = React.useContext(ModalContext);
-
-    return (
-        <ul>
-            {(modalContext.openModalStack() ?? []).map((modalId, idx) => (
-                <li key={modalId}>
-                    {idx + 1}. {modalId}
-                </li>
-            ))}
-        </ul>
-    );
-};
-
-/**
- * `ModalContext` can be used as provider to track a stack of modals.
- *
- * ```(Javascript)
- * const ContextTemplate = () => {
- *     const { setModalOpen, openModalStack } = useModalContext();
- *     return (
- *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
- *             <SimpleDialog size="large" isOpen>
- *                 <OtherModal />
- *             </SimpleDialog>
- *         </ModalContext.Provider>
- *     );
- * };
- *
- * const OtherModal = () => {
- *     const modalContext = React.useContext(ModalContext);
- *     return (
- *         <SimpleDialog size="small">
- *            <ul>
- *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
- *                    <li key={modalId}>
- *                        {idx + 1}. {modalId}
- *                    </li>
- *                ))}
- *            </ul>
- *         </SimpleDialog>
- *     );
- * };
- * ```
- */
-export const NestedModalWithContext = ContextTemplate.bind({});
-NestedModalWithContext.args = {
-    children: [
-        <ExampleModal id="rootModal" size="large">
-            <MiddleModal />
-        </ExampleModal>,
-    ],
-};

package/src/components/Dialog/stories/ModalContext.stories.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
+import { Meta } from "@storybook/react";
+
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalContextProps,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * import { ModalContext, SimpleDialog } from "@eccenca/gui-elements";
+ *
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export default {
+    title: "Components/Dialog/ModalContext",
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
+} as Meta<ModalContextProps>;
+
+export const Usage = () => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+            <ExampleModal id="rootModal" size="large">
+                <MiddleModal />
+            </ExampleModal>
+        </ModalContext.Provider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack() ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -18,8 +18,9 @@ Default.args = {
         <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
         "Simple text with URL http://example.com/ that should not get parsed.",
         "a < b to test equations in text like b > a.",
+        `Something with a "quote" in it.`,
         <>
-            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown\n* containing a few HTML 'entities' & "quotes".`}</Markdown>
             <HtmlContentBlock>
                 <h1>Block with sub elements</h1>
                 <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />

package/src/components/TextReducer/TextReducer.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {render, RenderResult} from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Markdown, TextReducer } from "./../../";
+import { Default as TextReducerStory } from "./TextReducer.stories";
+
+describe("TextReducer", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    }
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    }
+    it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
+        textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustNotExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should not display encoded HTML entities if `decodeHtmlEntities` is enabled", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} decodeHtmlEntities />);
+        textMustNotExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should only decode if correct encoded HTML entities are found (strict mode)", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustExist(queryByText, "& &amp foo&ampbar");
+        textMustNotExist(queryByText, "& & foo&ampbar");
+    });
+    it("should allow decoding non-strict encoded HTML entities", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities decodeHtmlEntitiesOptions={{ strict: false }}>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustNotExist(queryByText, "& &amp foo&ampbar");
+        textMustExist(queryByText, "& & foo&ampbar");
+    });
+});

package/src/components/TextReducer/TextReducer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { reduceToText } from "../../common/utils/reduceToText";
+import { DecodeHtmlEntitiesOptions, utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { OverflowText, OverflowTextProps } from "./../Typography";
@@ -24,6 +24,17 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
      * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
      */
     overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+    /**
+     * If you transform HTML markup to text then the result could contain HTML entity encoded strings.
+     * By enabling this option they are decoded back to it's original char.
+     */
+    decodeHtmlEntities?: boolean;
+    /**
+     * Set the options used to decode the HTML entities, if `decodeHtmlEntities` is enabled.
+     * Internally we use `he` library, see their [documentation on decode options](https://www.npmjs.com/package/he#hedecodehtml-options).
+     * If not set we use `{ isAttributeValue: true, strict: true }` as default value.
+     */
+    decodeHtmlEntitiesOptions?: DecodeHtmlEntitiesOptions;
 }
 
 /**
@@ -32,16 +43,15 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
  */
 export const TextReducer = ({
     children,
-    maxNodes,
-    maxLength,
     useOverflowTextWrapper,
     overflowTextProps,
+    ...reduceToTextOptions
 }: TextReducerProps) => {
     if (typeof children === "undefined") {
         return <></>;
     }
 
-    const shrinkedContent = reduceToText(children, { maxLength, maxNodes });
+    const shrinkedContent = utils.reduceToText(children, reduceToTextOptions);
 
     return useOverflowTextWrapper ? (
         <OverflowText