buckaroo-js-core 0.8.0

package/buckaroo_js/vendor/RechartTooltip.d.ts

@@ -0,0 +1,82 @@
+import React, { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';
+import type { ValueType, NameType, Payload, DefaultProps } from './RechartExtra';
+import { AnimationDuration, AnimationTiming } from './RechartExtra';
+export type ContentType<TValue extends ValueType, TName extends NameType> = ReactElement | ((props: TooltipProps<TValue, TName>) => ReactNode);
+type UniqueFunc<TValue extends ValueType, TName extends NameType> = (entry: Payload<TValue, TName>) => unknown;
+type UniqueOption<TValue extends ValueType, TName extends NameType> = boolean | UniqueFunc<TValue, TName>;
+export type OptionalCoords = {
+    x?: number;
+    y?: number;
+};
+export type TooltipProps<TValue extends ValueType, TName extends NameType> = DefaultProps<TValue, TName> & {
+    allowEscapeViewBox?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    reverseDirection?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    content?: ContentType<TValue, TName>;
+    viewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+    active?: boolean;
+    offset?: number;
+    wrapperStyle?: CSSProperties;
+    cursor?: boolean | ReactElement | SVGProps<SVGElement>;
+    coordinate?: OptionalCoords;
+    position?: OptionalCoords;
+    trigger?: 'hover' | 'click';
+    shared?: boolean;
+    payloadUniqBy?: UniqueOption<TValue, TName>;
+    isAnimationActive?: boolean;
+    animationDuration?: AnimationDuration;
+    animationEasing?: AnimationTiming;
+    filterNull?: boolean;
+    useTranslate3d?: boolean;
+    box?: OptionalCoords;
+};
+export declare const Tooltip: {
+    <TValue extends ValueType, TName extends NameType>(props: DefaultProps<TValue, TName> & {
+        allowEscapeViewBox?: {
+            x?: boolean | undefined;
+            y?: boolean | undefined;
+        } | undefined;
+        reverseDirection?: {
+            x?: boolean | undefined;
+            y?: boolean | undefined;
+        } | undefined;
+        content?: ContentType<TValue, TName> | undefined;
+        viewBox?: {
+            x?: number | undefined;
+            y?: number | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+        } | undefined;
+        active?: boolean | undefined;
+        offset?: number | undefined;
+        wrapperStyle?: React.CSSProperties | undefined;
+        cursor?: boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.SVGProps<SVGElement> | undefined;
+        coordinate?: OptionalCoords | undefined;
+        position?: OptionalCoords | undefined;
+        trigger?: "hover" | "click" | undefined;
+        shared?: boolean | undefined;
+        payloadUniqBy?: UniqueOption<TValue, TName> | undefined;
+        isAnimationActive?: boolean | undefined;
+        animationDuration?: number | undefined;
+        animationEasing?: AnimationTiming | undefined;
+        filterNull?: boolean | undefined;
+        useTranslate3d?: boolean | undefined;
+        box?: OptionalCoords | undefined;
+    } & {
+        children?: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+    defaultProps: TooltipProps<number, string>;
+};
+export {};
+//# sourceMappingURL=RechartTooltip.d.ts.map

package/buckaroo_js/vendor/RechartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RechartTooltip.d.ts","sourceRoot":"","sources":["../../src/buckaroo_js/vendor/RechartTooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EACV,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EAKX,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAM/E,OAAO,EAAC,iBAAiB,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAQlE,MAAM,MAAM,WAAW,CAAC,MAAM,SAAS,SAAS,EAAE,KAAK,SAAS,QAAQ,IAClE,YAAY,GACZ,CAAC,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC;AAE1D,KAAK,UAAU,CAAC,MAAM,SAAS,SAAS,EAAE,KAAK,SAAS,QAAQ,IAAI,CAChE,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,KAC5B,OAAO,CAAC;AACb,KAAK,YAAY,CAAC,MAAM,SAAS,SAAS,EAAE,KAAK,SAAS,QAAQ,IAC5D,OAAO,GACP,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAoChC,MAAM,MAAM,cAAc,GAAG;IACzB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,MAAM,SAAS,SAAS,EAAE,KAAK,SAAS,QAAQ,IAAI,YAAY,CACrF,MAAM,EACN,KAAK,CACR,GAAG;IACA,kBAAkB,CAAC,EAAE;QACjB,CAAC,CAAC,EAAE,OAAO,CAAC;QACZ,CAAC,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,CAAC,CAAC,EAAE,OAAO,CAAC;QACZ,CAAC,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE;QACN,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AA4BF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBACiC,eAAe;;;;CAqMnE,CAAC"}

package/buckaroo_js/vendor/RechartTooltip.js

@@ -0,0 +1,232 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var react_1 = __importStar(require("react"));
+var react_smooth_1 = require("react-smooth");
+var lodash_1 = __importDefault(require("lodash"));
+var RechartExtra_1 = require("./RechartExtra");
+var recharts_1 = require("recharts");
+var CLS_PREFIX = 'recharts-tooltip-wrapper';
+var EPS = 1;
+function defaultUniqBy(entry) {
+    return entry.dataKey;
+}
+function getUniqPayload(option, payload) {
+    if (option === true) {
+        return lodash_1.default.uniqBy(payload, defaultUniqBy);
+    }
+    if (lodash_1.default.isFunction(option)) {
+        return lodash_1.default.uniqBy(payload, option);
+    }
+    return payload;
+}
+function renderContent(content, props) {
+    if (react_1.default.isValidElement(content)) {
+        return react_1.default.cloneElement(content, props);
+    }
+    if (lodash_1.default.isFunction(content)) {
+        return react_1.default.createElement(content, props);
+    }
+    return react_1.default.createElement(recharts_1.DefaultTooltipContent, __assign({}, props));
+}
+var tooltipDefaultProps = {
+    active: false,
+    allowEscapeViewBox: { x: false, y: false },
+    reverseDirection: { x: false, y: false },
+    offset: 10,
+    viewBox: { x: 0, y: 0, height: 0, width: 0 },
+    coordinate: { x: 0, y: 0 },
+    cursorStyle: {},
+    separator: ' : ',
+    wrapperStyle: {},
+    contentStyle: {},
+    itemStyle: {},
+    labelStyle: {},
+    cursor: true,
+    trigger: 'hover',
+    isAnimationActive: !RechartExtra_1.Global.isSsr,
+    animationEasing: 'ease',
+    animationDuration: 400,
+    filterNull: true,
+    useTranslate3d: false,
+    box: { x: 0, y: 0 }
+};
+var Tooltip = function (props) {
+    var _a = __read((0, react_1.useState)(-1), 2), boxWidth = _a[0], setBoxWidth = _a[1];
+    var _b = __read((0, react_1.useState)(-1), 2), boxHeight = _b[0], setBoxHeight = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), dismissed = _c[0], setDismissed = _c[1];
+    var _d = __read((0, react_1.useState)({
+        x: 0,
+        y: 0
+    }), 2), dismissedAtCoordinate = _d[0], setDismissedAtCoordinate = _d[1];
+    var _e = __read((0, react_1.useState)({ x: 0, y: 0 }), 2), boxCoords = _e[0], setBoxCoords = _e[1];
+    var wrapperNode = (0, react_1.useRef)();
+    var allowEscapeViewBox = props.allowEscapeViewBox, reverseDirection = props.reverseDirection, coordinate = props.coordinate, offset = props.offset, position = props.position, viewBox = props.viewBox;
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+        if (event.key === 'Escape') {
+            setDismissed(true);
+            setDismissedAtCoordinate(function (prev) { return (__assign(__assign({}, prev), { x: coordinate === null || coordinate === void 0 ? void 0 : coordinate.x, y: coordinate === null || coordinate === void 0 ? void 0 : coordinate.y })); });
+        }
+    }, [coordinate === null || coordinate === void 0 ? void 0 : coordinate.x, coordinate === null || coordinate === void 0 ? void 0 : coordinate.y]);
+    (0, react_1.useEffect)(function () {
+        var updateBBox = function () {
+            if (dismissed) {
+                document.removeEventListener('keydown', handleKeyDown);
+                if ((coordinate === null || coordinate === void 0 ? void 0 : coordinate.x) !== dismissedAtCoordinate.x ||
+                    (coordinate === null || coordinate === void 0 ? void 0 : coordinate.y) !== dismissedAtCoordinate.y) {
+                    setDismissed(false);
+                }
+            }
+            else {
+                document.addEventListener('keydown', handleKeyDown);
+            }
+            if (wrapperNode.current && wrapperNode.current.getBoundingClientRect) {
+                var box = wrapperNode.current.getBoundingClientRect();
+                setBoxCoords({ x: box.x, y: box.y });
+                if (Math.abs(box.width - boxWidth) > EPS ||
+                    Math.abs(box.height - boxHeight) > EPS) {
+                    setBoxWidth(box.width);
+                    setBoxHeight(box.height);
+                }
+            }
+            else if (boxWidth !== -1 || boxHeight !== -1) {
+                setBoxWidth(-1);
+                setBoxHeight(-1);
+            }
+        };
+        updateBBox();
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        boxHeight,
+        boxWidth,
+        coordinate,
+        dismissed,
+        dismissedAtCoordinate.x,
+        dismissedAtCoordinate.y,
+        handleKeyDown
+    ]);
+    var getTranslate = function (_a) {
+        var key = _a.key, tooltipDimension = _a.tooltipDimension, viewBoxDimension = _a.viewBoxDimension;
+        if (position && (0, RechartExtra_1.isNumber)(position[key])) {
+            return position[key];
+        }
+        var pCoordinate = coordinate || { x: 0, y: 0 };
+        var negative = (pCoordinate[key] || 0) - tooltipDimension - (offset || 0);
+        var positive = (pCoordinate[key] || 0) + offset;
+        if (allowEscapeViewBox === null || allowEscapeViewBox === void 0 ? void 0 : allowEscapeViewBox[key]) {
+            return reverseDirection[key] ? negative : positive;
+        }
+        if (reverseDirection === null || reverseDirection === void 0 ? void 0 : reverseDirection[key]) {
+            var tooltipBoundary_1 = negative;
+            var viewBoxBoundary_1 = viewBox[key];
+            if (tooltipBoundary_1 < viewBoxBoundary_1) {
+                return Math.max(positive, viewBox[key]);
+            }
+            return Math.max(negative, viewBox[key]);
+        }
+        var tooltipBoundary = positive + tooltipDimension;
+        var viewBoxBoundary = viewBox[key] + viewBoxDimension;
+        if (tooltipBoundary > viewBoxBoundary) {
+            return Math.max(negative, viewBox[key]);
+        }
+        return Math.max(positive, viewBox[key]);
+    };
+    var payload = props.payload, payloadUniqBy = props.payloadUniqBy, filterNull = props.filterNull, active = props.active, wrapperStyle = props.wrapperStyle, useTranslate3d = props.useTranslate3d, isAnimationActive = props.isAnimationActive, animationDuration = props.animationDuration, animationEasing = props.animationEasing;
+    var finalPayload = getUniqPayload(payloadUniqBy, filterNull && payload && payload.length
+        ? payload.filter(function (entry) { return !lodash_1.default.isNil(entry.value); })
+        : payload);
+    var hasPayload = finalPayload && finalPayload.length;
+    var content = props.content;
+    var outerStyle = __assign({ pointerEvents: 'none', visibility: !dismissed && active && hasPayload ? 'visible' : 'hidden', position: 'absolute', top: 0, left: 0 }, wrapperStyle);
+    var translateX, translateY;
+    if (position && (0, RechartExtra_1.isNumber)(position.x) && (0, RechartExtra_1.isNumber)(position.y)) {
+        translateX = position.x;
+        translateY = position.y;
+    }
+    else if (boxWidth > 0 && boxHeight > 0 && coordinate) {
+        translateX = getTranslate({
+            key: 'x',
+            tooltipDimension: boxWidth,
+            viewBoxDimension: viewBox.width
+        });
+        translateY = getTranslate({
+            key: 'y',
+            tooltipDimension: boxHeight,
+            viewBoxDimension: viewBox.height
+        });
+    }
+    else {
+        outerStyle.visibility = 'hidden';
+    }
+    outerStyle = __assign(__assign({}, (0, react_smooth_1.translateStyle)({
+        transform: useTranslate3d
+            ? "translate3d(".concat(translateX, "px, ").concat(translateY, "px, 0)")
+            : "translate(".concat(translateX, "px, ").concat(translateY, "px)")
+    })), outerStyle);
+    if (isAnimationActive && active) {
+        outerStyle = __assign(__assign({}, (0, react_smooth_1.translateStyle)({
+            transition: "transform ".concat(animationDuration, "ms ").concat(animationEasing)
+        })), outerStyle);
+    }
+    var cls = "".concat(CLS_PREFIX, "-top");
+    return (react_1.default.createElement("div", { tabIndex: -1, role: 'dialog', className: cls, style: outerStyle, ref: wrapperNode }, renderContent(content, __assign(__assign({}, props), { box: boxCoords, payload: finalPayload }))));
+};
+exports.Tooltip = Tooltip;
+exports.Tooltip.displayName = 'Tooltip';
+exports.Tooltip.defaultProps = tooltipDefaultProps;
+//# sourceMappingURL=RechartTooltip.js.map

package/buckaroo_js/vendor/RechartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RechartTooltip.js","sourceRoot":"","sources":["../../src/buckaroo_js/vendor/RechartTooltip.tsx"],"names":[],"mappings":"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"}

package/codecov.yml

@@ -0,0 +1,16 @@
+ignore:
+    - 'deps/**/*'
+coverage:
+    range: 70..100
+    round: down
+    precision: 2
+    status:
+        project:
+            default:
+                target: auto
+                base: auto
+                threshold: 2%
+                paths:
+                    - 'src'
+        patch:
+            default: 80%

package/eslint.config.mjs

@@ -0,0 +1,88 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import _import from "eslint-plugin-import";
+import prettier from "eslint-plugin-prettier";
+import { fixupPluginRules } from "@eslint/compat";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: ["**/webpack.config.ts", "**/jest.config.js"],
+}, ...compat.extends(
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+), {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        react,
+        "react-hooks": fixupPluginRules(reactHooks),
+        import: fixupPluginRules(_import),
+        prettier,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+        ecmaVersion: 2020,
+        sourceType: "module",
+
+        parserOptions: {
+            project: ["tsconfig.json", "examples/tsconfig.json", "test/tsconfig.json"],
+
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    rules: {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+
+        "react/jsx-filename-extension": ["warn", {
+            extensions: [".jsx", ".tsx"],
+        }],
+
+        "react/prop-types": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "no-console": "warn",
+
+        quotes: [2, "single", {
+            avoidEscape: true,
+        }],
+
+        "react/jsx-key": "off",
+    },
+}, {
+    files: ["examples/ex/*.tsx"],
+
+    rules: {
+        "no-console": "off",
+    },
+}];

package/examples/App.tsx

@@ -0,0 +1,160 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import {HashRouter as Router, Route, Link} from 'react-router-dom';
+import {Button} from 'react-bootstrap';
+
+import './app.css';
+
+const examples = {
+
+  WidgetDCFCellEx: {
+    title: 'WigetDCFCell',
+    file: 'WidgetDCFCellEx',
+    layout: 'HBox',
+  },
+  ColumnsEditorEx: {
+    title: 'ColumnsEditor',
+    file: 'ColumnsEditorEx',
+    layout: 'HBox',
+  },
+  CommandViewerEx: {
+    title: 'CommandViewer',
+    file: 'CommandViewerEx',
+    layout: 'HBox',
+  },
+  DFViewerEx: { title: 'DFViewer', file: 'DFViewerEx', layout: 'HBox' },
+  DFViewerEx_string_index: {
+    title: 'DFViewer string index',
+    file: 'DFViewerEx_string_index',
+    layout: 'HBox',
+  },
+  DFViewerEx_large: {
+    title: 'DFViewer large',
+    file: 'DFViewerEx_large',
+    layout: 'HBox',
+  },
+  DFViewerEx_real_summary: {
+    title: 'DFViewer summary',
+    file: 'DFViewerEx_real_summary',
+    layout: 'HBox',
+  },
+  DFViewerEx_short_data: {
+    title: 'DFViewer short_data',
+    file: 'DFViewerEx_short_data',
+    layout: 'HBox',
+  },
+
+  StatusBarEx: { title: 'StatusBar', file: 'StatusBarEx', layout: 'VBox' },
+  HistogramEx: { title: 'Histogram', file: 'HistogramEx', layout: 'HBox' },
+
+};
+
+// The examples use a code-loading technique that I have described in
+// https://mmomtchev.medium.com/making-examples-displaying-code-along-its-output-with-webpack-a28dcf5439c6
+
+const ReadmeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './ReadmeBlock'));
+const CodeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './CodeBlock'));
+
+for (const ex of Object.keys(examples)) {
+    examples[ex].comp = React.lazy(
+        () => import(/* webpackPrefetch: true */ `./ex/${examples[ex].file}.tsx`)
+    );
+    examples[ex].code = import(
+        /* webpackPrefetch: true */ `!!html-loader?{"minimize":false}!./jsx-loader.ts!./ex/${examples[ex].file}.tsx`
+    ).then((code) => code.default);
+    examples[ex].text = import(
+        /* webpackPrefetch: true */ `!!raw-loader!./ex/${examples[ex].file}.tsx`
+    ).then((text) => text.default);
+}
+
+const LeftMenuItem = (props): JSX.Element => (
+    <Link to={props.id}>
+        <Button className='w-100' variant='light'>
+            {props.title}
+        </Button>
+    </Link>
+);
+
+// eslint-disable-next-line no-var
+declare var VERSION: string;
+
+// eslint-disable-next-line no-var
+//declare var VERSION: string = "handwritten";
+
+const RenderEl = (ex: any): JSX.Element => {
+  if (ex.layout === 'HBox') {
+    return (
+      <div className="row">
+        <div className="col-12 col-xl-5 mb-1">
+          <React.Suspense fallback={<div>Loading component...</div>}>
+            <div className="component-example">
+              <h2> Component example </h2>
+              {React.createElement(ex.comp)}
+            </div>
+          </React.Suspense>
+        </div>
+        <div className="col-12 col-xl-7">
+          <React.Suspense fallback={<div>Parsing code...</div>}>
+            <CodeBlock title={ex.title} code={ex.code} text={ex.text} />
+          </React.Suspense>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="row">
+        <div className="row">
+          <React.Suspense fallback={<div>Loading component...</div>}>
+            <div className="component-example">
+              <h2> Component example </h2>
+              {React.createElement(ex.comp)}
+            </div>
+          </React.Suspense>
+        </div>
+        <div className="row">
+          <React.Suspense fallback={<div>Parsing code...</div>}>
+            <CodeBlock title={ex.title} code={ex.code} text={ex.text} />
+          </React.Suspense>
+        </div>
+      </div>
+    );
+  }
+};
+
+const App = (): JSX.Element => {
+    const [jsText, setJSText] = React.useState<string>('');
+
+    return (
+        <Router>
+            <h1 className='m-2'>
+                <strong>react-edit-list {VERSION} Examples</strong>
+            </h1>
+            <div className='d-flex flex-row p-3'>
+                <div className='d-flex flex-column left-menu me-2'>
+                    <LeftMenuItem id={''} title={'Home'} />
+                    {Object.keys(examples).map((e) => (
+                        <LeftMenuItem key={e} id={e} title={examples[e].title} />
+                    ))}
+                </div>
+                <div className='d-flex flex-column w-100 overflow-hidden'>
+                    <div className='fluid-container'>
+                        <Route exact path='/'>
+                            <div className='ml-2'>
+                                <React.Suspense fallback={<div>Loading...</div>}>
+                                    <ReadmeBlock />
+                                </React.Suspense>
+                            </div>
+                        </Route>
+                        {Object.keys(examples).map((e) => (
+                            <Route key={e} path={`/${e}`}>
+				{RenderEl(examples[e])}
+                            </Route>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </Router>
+    );
+};
+
+export default App;

package/examples/CodeBlock.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import CodePenButton from './CodePenButton';
+import 'prism-themes/themes/prism-vsc-dark-plus.css';
+
+// This is expensive to render
+const CodeBlock = React.memo(function CodeBlockRaw(props: {
+    title: string;
+    code: Promise<string>;
+    text: Promise<string>;
+}) {
+    const [code, setCode] = React.useState('loading()');
+    React.useEffect(() => {
+        props.code.then((r) => setCode(r));
+    }, [props.code, props.text]);
+    return (
+        <div className='position-relative'>
+            <CodePenButton title={props.title} text={props.text} />
+            <div className='codeblock'>
+                <pre className='p-2' style={{backgroundColor: 'rgb(43, 43, 43)', fontSize: '16px'}}>
+                    <code className='language-tsx' dangerouslySetInnerHTML={{__html: code}} />
+                </pre>
+            </div>
+        </div>
+    );
+});
+
+export default CodeBlock;