@conduction/components 2.2.23 → 2.2.24

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js

@@ -1,36 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as styles from "./HorizontalOverflowWrapper.module.css";
-import clsx from "clsx";
-import { Button } from "@utrecht/component-library-react/dist/css-module";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const HorizontalOverflowWrapper = ({ children, ariaLabels }) => {
-    const [canScrollRight, setCanScrollRight] = React.useState(false);
-    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
-    const wrapperRef = React.useRef(null);
-    const scrollRight = () => {
-        wrapperRef.current?.scrollTo({
-            left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
-            behavior: "smooth",
-        });
-    };
-    const scrollLeft = () => {
-        wrapperRef.current?.scrollTo({
-            left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
-            behavior: "smooth",
-        });
-    };
-    React.useEffect(() => {
-        checkScrollDirections(); // initiate available scroll directions
-        window.addEventListener("resize", checkScrollDirections);
-        return () => window.removeEventListener("resize", checkScrollDirections);
-    }, []);
-    const checkScrollDirections = () => {
-        if (!wrapperRef.current)
-            return;
-        setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
-        setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-    };
-    return (_jsxs("div", { className: styles.container, children: [canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: styles.wrapper, onScroll: checkScrollDirections, children: children })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+export const HorizontalOverflowWrapper = ({ children, ariaLabels }) => {
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const scrollRight = () => {
+        wrapperRef.current?.scrollTo({
+            left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+            behavior: "smooth",
+        });
+    };
+    const scrollLeft = () => {
+        wrapperRef.current?.scrollTo({
+            left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+            behavior: "smooth",
+        });
+    };
+    React.useEffect(() => {
+        checkScrollDirections(); // initiate available scroll directions
+        window.addEventListener("resize", checkScrollDirections);
+        return () => window.removeEventListener("resize", checkScrollDirections);
+    }, []);
+    const checkScrollDirections = () => {
+        if (!wrapperRef.current)
+            return;
+        setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+        setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+    };
+    return (_jsxs("div", { className: styles.container, children: [canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: styles.wrapper, onScroll: checkScrollDirections, children: children })] }));
+};

package/lib/components/htmlParser/ParsedHTML.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { UseQueryResult } from "react-query";
+interface ParsedHTMLProps {
+    contentQuery: UseQueryResult<any, Error>;
+    location: string;
+    directories: string;
+    layoutClassName?: string;
+}
+export declare const ParsedHTML: React.FC<ParsedHTMLProps>;
+export {};

package/lib/components/htmlParser/ParsedHTML.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./ParsedHTML.module.css";
+import Parser from "html-react-parser";
+import Skeleton from "react-loading-skeleton";
+import { Alert } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import clsx from "clsx";
+import { useHtmlParser } from "./parser/useHtmlParser";
+export const ParsedHTML = ({ contentQuery, location, layoutClassName, directories }) => {
+    const { options } = useHtmlParser(location, directories);
+    if (contentQuery.isLoading)
+        return (_jsx("div", { className: styles.container, children: _jsx(Skeleton, { height: "200px" }) }));
+    if (contentQuery.isError)
+        return (_jsx("div", { className: styles.container, children: _jsx(Alert, { icon: _jsx(FontAwesomeIcon, { icon: faWarning }), type: "error", children: "Oops, something went wrong retrieving the .md file from GitHub." }) }));
+    return (_jsx("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: Parser(contentQuery.data, options) }));
+};

package/lib/components/htmlParser/ParsedHTML.module.css

@@ -0,0 +1,7 @@
+.container {
+  margin-block-start: var(--utrecht-space-block-3xl);
+}
+
+.container > div > article > *:not(:last-child) {
+  margin-block-end: var(--utrecht-space-block-lg);
+}

package/lib/components/htmlParser/parser/alert/getAlert.d.ts

@@ -0,0 +1 @@
+export declare const getAlert: (children: any, options: any, type: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/alert/getAlert.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getAlert.module.css";
+import { Alert } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getAlert = (children, options, type) => {
+    switch (true) {
+        case type.includes("note") || type.includes("info"):
+            return (_jsx(Alert, { className: styles.info, type: "info", children: domToReact(children, options) }));
+        case type.includes("error"):
+            return (_jsx(Alert, { className: styles.error, type: "error", children: domToReact(children, options) }));
+        case type.includes("warning"):
+            return (_jsx(Alert, { className: styles.warning, type: "warning", children: domToReact(children, options) }));
+        case type.includes("succes") || type.includes("ok"):
+            return (_jsx(Alert, { className: styles.ok, type: "ok", children: domToReact(children, options) }));
+        default:
+            return _jsx(Alert, { type: "info", children: domToReact(children, options) });
+    }
+};

package/lib/components/htmlParser/parser/alert/getAlert.module.css

@@ -0,0 +1,28 @@
+.info svg {
+  fill: var(--utrecht-alert-icon-info-color);
+}
+.info p {
+  color: var(--utrecht-alert-info-color);
+}
+
+.warning svg {
+  fill: var(--utrecht-alert-icon-warning-color);
+}
+.warning p {
+  color: var(--utrecht-alert-warning-color);
+}
+
+.error svg {
+  fill: var(--utrecht-alert-icon-error-color);
+}
+.error p {
+  color: var(--utrecht-alert-error-color);
+}
+
+.ok svg {
+  fill: var(--utrecht-alert-icon-ok-color);
+}
+.ok p {
+  color: var(--utrecht-alert-ok-color);
+}
+

package/lib/components/htmlParser/parser/anchor/getAnchor.d.ts

@@ -0,0 +1,2 @@
+import { TGitHubDirectory } from "../../useGitHubDirectories";
+export declare const getAnchor: (props: any, children: any, options: any, directories: TGitHubDirectory[], location: string) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/anchor/getAnchor.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import _ from "lodash";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
+import { domToReact } from "html-react-parser";
+export const getAnchor = (props, children, options, directories, location) => {
+    const handleClick = (e) => {
+        e.preventDefault();
+        const targetFile = _.upperFirst(props.href.substring(props.href.lastIndexOf("/") + 1).replace(".md", ""));
+        // No link
+        if (!props.href) {
+            navigate("#");
+            return;
+        }
+        // Anchor Links
+        if (props.className === "anchor" || Array.from(props.href)[0] === "#") {
+            handleAnchorClick(props); // handles on-page scroll anchors
+            return;
+        }
+        // Internal Links
+        if (!props.href.includes("://")) {
+            handleInternalLinks(props, targetFile, location, directories);
+            return;
+        }
+        // External Links
+        if (props.href.includes("://")) {
+            open(props.href);
+            return;
+        }
+    };
+    const attributes = {
+        ...props,
+        onClick: handleClick,
+    };
+    return _jsx(Link, { ...attributes, children: domToReact(children, options) });
+};
+const handleInternalLinks = (props, targetFile, location, directories) => {
+    // Internal Links: same directory
+    if (!props.href.includes("/")) {
+        const targetDirectory = _.upperFirst(location.split("/").reverse()[1]);
+        navigate(`/pages/${targetDirectory}/${targetFile}`);
+        return; // ensure no other flow is triggered
+    }
+    // Internal Links: homepage
+    if (props.href.includes("/") && location === "/") {
+        const directoryFound = directories.some((directory) => directory.location === props.href);
+        if (directoryFound)
+            navigate(`/pages/${targetFile}`);
+        return; // ensure no other flow is triggered
+    }
+    // Internal Links: different directory
+    if (props.href.includes("/")) {
+        const targetDirectory = props.href.split("/").reverse()[1];
+        const directoryFound = directories.some((directory) => directory.location.substring(directory.location.lastIndexOf("/") + 1) === targetDirectory);
+        // Internal Link exists: redirect to page
+        if (directoryFound) {
+            navigate(`/pages/${_.upperFirst(targetDirectory)}/${targetFile}`);
+        }
+        // Internal Link does not exist: redirect to online GitHub environment (TODO)
+        if (!directoryFound) {
+            const hrefWithLeadingSlash = !props.href.startsWith("/") ? `/${props.href}` : props.href;
+            open(`${process.env.GATSBY_GITHUB_REPOSITORY_URL}/blob/master${hrefWithLeadingSlash}`);
+        }
+        return; // ensure no other flow is triggered
+    }
+};
+const handleAnchorClick = (props) => {
+    const targetId = props.id ?? props.href.replace("#", "user-content-");
+    const target = document.getElementById(targetId);
+    const headerHeight = document.getElementById("header")?.clientHeight ?? 100;
+    if (target) {
+        window.scrollTo({ top: target.offsetTop - (headerHeight + 24), behavior: "smooth" }); // +24 simply adds some padding
+    }
+};

package/lib/components/htmlParser/parser/code/getCode.d.ts

@@ -0,0 +1 @@
+export declare const getCode: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;

package/lib/components/htmlParser/parser/code/getCode.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Code, CodeBlock } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getCode = (name, props, children, options) => {
+    switch (name) {
+        case "code":
+            return _jsx(Code, { ...props, children: domToReact(children, options) });
+        case "pre":
+            return _jsx(CodeBlock, { ...props, children: domToReact(children, options) });
+    }
+};

package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.d.ts

@@ -0,0 +1 @@
+export declare const getBlockquote: (children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/getBlockquote/getBlockquote.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getBlockquote = (children, options) => {
+    return _jsx(Alert, { children: domToReact(children, options) });
+};

package/lib/components/htmlParser/parser/header/getHeader.d.ts

@@ -0,0 +1 @@
+export declare const getHeader: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;

package/lib/components/htmlParser/parser/header/getHeader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Heading1, Heading2, Heading3, Heading4 } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getHeader = (name, props, children, options) => {
+    switch (name) {
+        case "h1":
+            return _jsx(Heading1, { ...props, children: domToReact(children, options) });
+        case "h2":
+            return _jsx(Heading2, { ...props, children: domToReact(children, options) });
+        case "h3":
+            return _jsx(Heading3, { ...props, children: domToReact(children, options) });
+        case "h4":
+            return _jsx(Heading4, { ...props, children: domToReact(children, options) });
+    }
+};

package/lib/components/htmlParser/parser/image/getImage.d.ts

@@ -0,0 +1 @@
+export declare const getImage: (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/image/getImage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "@utrecht/component-library-react/dist/css-module";
+export const getImage = (props) => {
+    let src = props.src;
+    if (!props.src.includes("https://" || "http://")) {
+        const sessionUrl = process.env.GATSBY_GITHUB_REPOSITORY_URL;
+        const url = sessionUrl?.replace("https://github.com/", "");
+        src = `https://raw.githubusercontent.com/${url}/master/docs/features/${props.src}`;
+    }
+    let alt = props.alt;
+    if (!props.alt) {
+        alt = props.title;
+    }
+    if (!props.alt && !props.title) {
+        alt = props.src;
+    }
+    const attributes = {
+        ...props,
+        src,
+        alt,
+        href: "",
+        onClick: (e) => {
+            e.stopPropagation();
+            open(src);
+        },
+    };
+    return _jsx(Image, { ...attributes });
+};

package/lib/components/htmlParser/parser/list/getList.d.ts

@@ -0,0 +1 @@
+export declare const getList: (name: string, props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;

package/lib/components/htmlParser/parser/list/getList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getList.module.css";
+import { OrderedList, UnorderedList } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getList = (name, props, children, options) => {
+    switch (name) {
+        case "ol":
+            return (_jsx(OrderedList, { className: styles.list, ...props, children: domToReact(children, options) }));
+        case "ul":
+            return (_jsx(UnorderedList, { className: styles.list, ...props, children: domToReact(children, options) }));
+    }
+};

package/lib/components/htmlParser/parser/list/getList.module.css

@@ -0,0 +1,3 @@
+.list {
+  width: 100% !important;
+}

package/lib/components/htmlParser/parser/listItem/getListItem.d.ts

@@ -0,0 +1 @@
+export declare const getListItem: (props: any, parent: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element | undefined;

package/lib/components/htmlParser/parser/listItem/getListItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OrderedListItem, UnorderedListItem } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getListItem = (props, parent, children, options) => {
+    switch (parent.name) {
+        case "ol":
+            return _jsx(OrderedListItem, { ...props, children: domToReact(children, options) });
+        case "ul":
+            return _jsx(UnorderedListItem, { ...props, children: domToReact(children, options) });
+    }
+    return;
+};

package/lib/components/htmlParser/parser/paragraph/getParagraph.d.ts

@@ -0,0 +1 @@
+export declare const getParagraph: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/paragraph/getParagraph.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paragraph } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getParagraph = (props, children, options) => {
+    return _jsx(Paragraph, { ...props, children: domToReact(children, options) });
+};

package/lib/components/htmlParser/parser/svg/getSvg.d.ts

@@ -0,0 +1 @@
+export declare const getSvg: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/svg/getSvg.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { domToReact } from "html-react-parser";
+export const getSvg = (props, children, options) => {
+    if (props.className.includes("octicon octicon-link")) {
+        return _jsx(_Fragment, {});
+    }
+    return _jsx("svg", { ...props, children: domToReact(children, options) });
+};

package/lib/components/htmlParser/parser/table/getTable.d.ts

@@ -0,0 +1 @@
+export declare const getTable: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/table/getTable.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getTable.module.css";
+import { Table } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTable = (props, children, options) => {
+    return (_jsx(Table, { className: styles.table, ...props, children: domToReact(children, options) }));
+};

package/lib/components/htmlParser/parser/table/getTable.module.css

@@ -0,0 +1,3 @@
+.table {
+  background-color: var(--utrecht-table-background-color) !important;
+}

package/lib/components/htmlParser/parser/tableBody/getTableBody.d.ts

@@ -0,0 +1 @@
+export declare const getTableBody: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/tableBody/getTableBody.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getTableBody.module.css";
+import { TableBody } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTableBody = (props, children, options) => {
+    return (_jsx(TableBody, { className: styles.tableBody, ...props, children: domToReact(children, options) }));
+};

package/lib/components/htmlParser/parser/tableBody/getTableBody.module.css

@@ -0,0 +1,3 @@
+.tableBody {
+  border: var(--utrecht-table-body-border);
+}

package/lib/components/htmlParser/parser/tableCell/getTableCell.d.ts

@@ -0,0 +1 @@
+export declare const getTableCell: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/tableCell/getTableCell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getTableCell.module.css";
+import { TableCell } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTableCell = (props, children, options) => {
+    return (_jsx(TableCell, { className: styles.tableCell, ...props, children: domToReact(children, options) }));
+};

package/lib/components/htmlParser/parser/tableCell/getTableCell.module.css

@@ -0,0 +1,3 @@
+.tableCell {
+  vertical-align: middle !important;
+}

package/lib/components/htmlParser/parser/tableHeader/getTableHeader.d.ts

@@ -0,0 +1 @@
+export declare const getTableHeader: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/tableHeader/getTableHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getTableHeader.module.css";
+import { TableHeader } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTableHeader = (props, children, options) => {
+    return (_jsx(TableHeader, { className: styles.tableHeader, ...props, children: domToReact(children, options) }));
+};

package/lib/components/htmlParser/parser/tableHeader/getTableHeader.module.css

@@ -0,0 +1,28 @@
+.tableHeader {
+  font-family: var(--utrecht-table-header-font-family);
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid
+    var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader > tr:nth-child(odd) {
+  background-color: inherit;
+  color: inherit;
+}
+
+.tableHeader > tr:nth-child(odd):hover {
+  background-color: inherit;
+  color: inherit;
+}
+
+.tableHeader > tr:nth-child(even) {
+  background-color: inherit;
+  color: inherit;
+}
+
+.tableHeader > tr:nth-child(even):hover {
+  background-color: inherit;
+  color: inherit;
+}

package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.d.ts

@@ -0,0 +1 @@
+export declare const getTableHeaderCell: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/tableHeaderCell/getTableHeaderCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableHeaderCell } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTableHeaderCell = (props, children, options) => {
+    return _jsx(TableHeaderCell, { ...props, children: domToReact(children, options) });
+};

package/lib/components/htmlParser/parser/tableRow/getTableRow.d.ts

@@ -0,0 +1 @@
+export declare const getTableRow: (props: any, children: any, options: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/tableRow/getTableRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./getTableRow.module.css";
+import { TableRow } from "@utrecht/component-library-react/dist/css-module";
+import { domToReact } from "html-react-parser";
+export const getTableRow = (props, children, options) => {
+    return (_jsx(TableRow, { className: styles.tableRow, ...props, children: domToReact(children, options) }));
+};

package/lib/components/htmlParser/parser/tableRow/getTableRow.module.css

@@ -0,0 +1,29 @@
+.tableRow:nth-child(odd) {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+
+.tableRow:nth-child(odd):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}
+
+.tableRow:nth-child(even) {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+
+.tableRow:nth-child(even):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}
+
+.tableRow:nth-child(even) {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+
+.tableRow:nth-child(even):hover {
+  background-color: var(--utrecht-table-row-hover-background-color);
+  color: var(--utrecht-table-row-hover-color);
+}

package/lib/components/htmlParser/parser/useHtmlParser.d.ts

@@ -0,0 +1,5 @@
+export declare const useHtmlParser: (location: string, directoriesJson: string) => {
+    options: {
+        replace: ({ attribs, parent, children, name }: any) => import("react/jsx-runtime").JSX.Element | undefined;
+    };
+};

package/lib/components/htmlParser/parser/useHtmlParser.js

@@ -0,0 +1,78 @@
+import { attributesToProps } from "html-react-parser";
+import { getHeader } from "./header/getHeader";
+import { getAnchor } from "./anchor/getAnchor";
+import { getListItem } from "./listItem/getListItem";
+import { getImage } from "./image/getImage";
+import { getList } from "./list/getList";
+import { getParagraph } from "./paragraph/getParagraph";
+import { getBlockquote } from "./getBlockquote/getBlockquote";
+import { getTable } from "./table/getTable";
+import { getTableRow } from "./tableRow/getTableRow";
+import { getTableHeader } from "./tableHeader/getTableHeader";
+import { getTableHeaderCell } from "./tableHeaderCell/getTableHeaderCell";
+import { getTableBody } from "./tableBody/getTableBody";
+import { getTableCell } from "./tableCell/getTableCell";
+import { getCode } from "./code/getCode";
+import { getAlert } from "./alert/getAlert";
+import { useGitHubDirectories } from "../useGitHubDirectories";
+import { getSvg } from "./svg/getSvg";
+export const useHtmlParser = (location, directoriesJson) => {
+    const { directories } = useGitHubDirectories(directoriesJson);
+    const options = {
+        replace: ({ attribs, parent, children, name }) => {
+            if (!attribs) {
+                return;
+            }
+            const props = attributesToProps(attribs);
+            if (attribs && (name === "h1" || name === "h2" || name === "h3" || name === "h4")) {
+                return getHeader(name, props, children, options);
+            }
+            if (attribs && name === "p") {
+                return getParagraph(props, children, options);
+            }
+            if (attribs && name === "a") {
+                return getAnchor(props, children, options, directories, location);
+            }
+            if (attribs && (name === "ol" || name === "ul")) {
+                return getList(name, props, children, options);
+            }
+            if (attribs && name === "li") {
+                return getListItem(props, parent, children, options);
+            }
+            if (attribs && name === "img") {
+                return getImage(props);
+            }
+            if (attribs && name === "blockquote") {
+                return getBlockquote(children, options);
+            }
+            if (attribs && name === "div" && attribs.class?.includes("markdown-alert")) {
+                return getAlert(children, options, attribs.class);
+            }
+            if (attribs && name === "table") {
+                return getTable(props, children, options);
+            }
+            if (attribs && name === "tr") {
+                return getTableRow(props, children, options);
+            }
+            if (attribs && name === "thead") {
+                return getTableHeader(props, children, options);
+            }
+            if (attribs && name === "th") {
+                return getTableHeaderCell(props, children, options);
+            }
+            if (attribs && name === "tbody") {
+                return getTableBody(props, children, options);
+            }
+            if (attribs && name === "td") {
+                return getTableCell(props, children, options);
+            }
+            if (attribs && name === "svg") {
+                return getSvg(props, children, options);
+            }
+            if (attribs && (name === "code" || name === "pre")) {
+                return getCode(name, props, children, options);
+            }
+        },
+    };
+    return { options };
+};

package/lib/components/htmlParser/useGitHubDirectories.d.ts

@@ -0,0 +1,10 @@
+export declare type TGitHubDirectory = {
+    name: string;
+    location: string;
+};
+export declare const useGitHubDirectories: (test: string) => {
+    directories: TGitHubDirectory[];
+    getSlugFromName: (name: string) => string;
+    getDirectoryReadMeLocation: (pageSlug: string) => string;
+    getDetailMdLocation: (pageSlug: string, detailPageSlug: string) => string;
+};