@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/common/ButtonRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRow.js","sourceRoot":"","sources":["../../../src/components/common/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAexC,MAAM,YAAY,GAAmB;IACpC,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,SAAS,GAA6B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,eAAe,EACf,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CACN,6BACC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE;gBACd,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;QACF,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtD,MAAM,IAAI,GAAG,OAAO,CAAC;gBACrB,IAAI,EAAE,CAAC;aACP;QACF,CAAC;QAEA,GAAG,IAAI,CACP,6BACC,GAAG,EAAE,GAAG,EACR,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC5F,OAAO,EAAE,GAAG,EAAE;gBACb,WAAW,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,GACA,CACF;QACA,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,2BAAG,SAAS,EAAC,0BAA0B,GAAG;QAC5E,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;QACzC,2BAAG,SAAS,EAAE,SAAS,iBAAe,IAAI,GAAI,CACzC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;AACtC,eAAe,SAAS,CAAC","sourcesContent":["import React, { useState } from \"react\";\n\nexport interface ButtonRowProps {\n\tlabel?: string;\n\tonClick: Function;\n\ticonClass?: string;\n\tdisabled?: boolean;\n\timg?: string;\n\tshowDefaultIcon?: boolean;\n\tclassName?: string;\n\trole?: string;\n\ttabIndex?: number;\n\tonKeyDown?: Function;\n}\n\nconst defaultProps: ButtonRowProps = {\n\tlabel: \"\",\n\tonClick: () => {},\n\ticonClass: \"\",\n\tdisabled: false,\n\tshowDefaultIcon: false,\n\tclassName: \"row-btn\",\n};\n\nconst ButtonRow: React.FC<ButtonRowProps> = ({\n\tlabel,\n\tonClick,\n\ticonClass,\n\tdisabled,\n\timg,\n\tshowDefaultIcon,\n\tclassName,\n}) => {\n\tconst [imgError, setImgError] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tclassName={disabled ? \"row-btn-disabled\" : className}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tonClick={() => {\n\t\t\t\tif (!disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n\t\t\t\t\tconst func = onClick;\n\t\t\t\t\tfunc();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{img && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={img}\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tstyle={showDefaultIcon || imgError ? { display: \"none\" } : { width: \"auto\", height: \"20px\" }}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{(showDefaultIcon || imgError) && <i className=\"ff-finsemble default-img\" />}\n\t\t\t<span className=\"row__lbl\">{label}</span>\n\t\t\t<i className={iconClass} aria-hidden={true} />\n\t\t</div>\n\t);\n};\n\nButtonRow.defaultProps = defaultProps;\nexport default ButtonRow;\n"]}

package/react/components/common/ButtonTile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AdvancedButtonProps } from "./Button";
+import "./css/button.css";
+export declare const ButtonTile: React.FC<AdvancedButtonProps>;

package/react/components/common/ButtonTile.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { fashion_class_lookup } from "./Button";
+import "./css/button.css";
+import { FinsembleIcon } from "./FinsembleIcon";
+export const ButtonTile = ({ text = "", icon, disabled = false, onClick = () => { }, className = "", }) => {
+    const containerClassName = fashion_class_lookup.tile;
+    return (React.createElement("div", { className: `${containerClassName} ${className}` },
+        React.createElement("button", { onClick: onClick, disabled: disabled },
+            icon && React.createElement(FinsembleIcon, { className: `${fashion_class_lookup.tile}-icon`, icon: icon }),
+            React.createElement("div", null, text))));
+};
+//# sourceMappingURL=ButtonTile.js.map

package/react/components/common/ButtonTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTile.js","sourceRoot":"","sources":["../../../src/components/common/ButtonTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAkC,CAAC,EACzD,IAAI,GAAG,EAAE,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,GAAG,EAAE,GACd,EAAE,EAAE;IACJ,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAErD,OAAO,CACN,6BAAK,SAAS,EAAE,GAAG,kBAAkB,IAAI,SAAS,EAAE;QACnD,gCAAQ,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ;YAC1C,IAAI,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,GAAG,oBAAoB,CAAC,IAAI,OAAO,EAAE,IAAI,EAAE,IAAI,GAAkB;YAEpG,iCAAM,IAAI,CAAO,CACT,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { AdvancedButtonProps, fashion_class_lookup } from \"./Button\";\nimport \"./css/button.css\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\n\nexport const ButtonTile: React.FC<AdvancedButtonProps> = ({\n\ttext = \"\",\n\ticon,\n\tdisabled = false,\n\tonClick = () => {},\n\tclassName = \"\",\n}) => {\n\tconst containerClassName = fashion_class_lookup.tile;\n\n\treturn (\n\t\t<div className={`${containerClassName} ${className}`}>\n\t\t\t<button onClick={onClick} disabled={disabled}>\n\t\t\t\t{icon && <FinsembleIcon className={`${fashion_class_lookup.tile}-icon`} icon={icon}></FinsembleIcon>}\n\n\t\t\t\t<div>{text}</div>\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./css/checkbox.css";
+export interface CheckboxProps {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    showLabel?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/react/components/common/Checkbox.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { FinsembleIcon } from "./FinsembleIcon";
+import "./css/checkbox.css";
+export const Checkbox = ({ checked = false, disabled = false, label = "", showLabel = true, onClick = () => { }, }) => {
+    let checkboxClasses = "complex-menu-checkbox";
+    if (checked) {
+        checkboxClasses = `${checkboxClasses} checked`;
+    }
+    let style = {};
+    if (disabled) {
+        style = {
+            cursor: "default",
+            opacity: ".3",
+        };
+    }
+    return (React.createElement("div", { style: style, className: "complex-menu-checkbox-wrapper", role: "checkbox", "aria-checked": checked, "aria-label": label, tabIndex: 0, onClick: disabled ? () => { } : onClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                !disabled && onClick(e);
+            }
+        } },
+        React.createElement("div", { className: checkboxClasses }, checked && React.createElement(FinsembleIcon, { icon: "check" })),
+        showLabel && React.createElement("div", { className: "complex-menu-checkbox-label" }, label)));
+};
+//# sourceMappingURL=Checkbox.js.map

package/react/components/common/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/common/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAU5B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EACjD,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GAClB,EAAE,EAAE;IACJ,IAAI,eAAe,GAAG,uBAAuB,CAAC;IAC9C,IAAI,OAAO,EAAE;QACZ,eAAe,GAAG,GAAG,eAAe,UAAU,CAAC;KAC/C;IACD,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,QAAQ,EAAE;QACb,KAAK,GAAG;YACP,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,IAAI;SACb,CAAC;KACF;IACD,OAAO,CACN,6BACC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,+BAA+B,EACzC,IAAI,EAAC,UAAU,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;aACxB;QACF,CAAC;QAED,6BAAK,SAAS,EAAE,eAAe,IAAG,OAAO,IAAI,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,GAAG,CAAO;QACjF,SAAS,IAAI,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnE,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { FinsembleIcon } from \"./FinsembleIcon\";\nimport \"./css/checkbox.css\";\n\nexport interface CheckboxProps {\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tshowLabel?: boolean;\n\tonClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n\tchecked = false,\n\tdisabled = false,\n\tlabel = \"\",\n\tshowLabel = true,\n\tonClick = () => {},\n}) => {\n\tlet checkboxClasses = \"complex-menu-checkbox\";\n\tif (checked) {\n\t\tcheckboxClasses = `${checkboxClasses} checked`;\n\t}\n\tlet style = {};\n\tif (disabled) {\n\t\tstyle = {\n\t\t\tcursor: \"default\",\n\t\t\topacity: \".3\",\n\t\t};\n\t}\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName=\"complex-menu-checkbox-wrapper\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={checked}\n\t\t\taria-label={label}\n\t\t\ttabIndex={0}\n\t\t\tonClick={disabled ? () => {} : onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t!disabled && onClick(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<div className={checkboxClasses}>{checked && <FinsembleIcon icon=\"check\" />}</div>\n\t\t\t{showLabel && <div className=\"complex-menu-checkbox-label\">{label}</div>}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/ColorPicker.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import "./css/color-picker.css";
+export declare enum RGBA_CHANNEL {
+    RED = 0,
+    GREEN = 1,
+    BLUE = 2,
+    ALPHA = 3
+}
+export declare function colorToRGBA(color: string): Uint8ClampedArray;
+export interface ColorPickerProps {
+    startColor: string;
+    updateColor: (newColor: string) => void;
+    id?: string;
+}
+/**
+ * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
+ *
+ * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
+ */
+export declare const ColorPicker: ({ id, startColor, updateColor }: ColorPickerProps) => JSX.Element;

package/react/components/common/ColorPicker.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import "./css/color-picker.css";
+const RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;
+export var RGBA_CHANNEL;
+(function (RGBA_CHANNEL) {
+    RGBA_CHANNEL[RGBA_CHANNEL["RED"] = 0] = "RED";
+    RGBA_CHANNEL[RGBA_CHANNEL["GREEN"] = 1] = "GREEN";
+    RGBA_CHANNEL[RGBA_CHANNEL["BLUE"] = 2] = "BLUE";
+    RGBA_CHANNEL[RGBA_CHANNEL["ALPHA"] = 3] = "ALPHA";
+})(RGBA_CHANNEL || (RGBA_CHANNEL = {}));
+// From https://stackoverflow.com/a/24390910
+export function colorToRGBA(color) {
+    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
+    // color must be a valid canvas fillStyle. This will cover most anything
+    // you'd want to use.
+    // Examples:
+    // colorToRGBA('red')  # [255, 0, 0, 255]
+    // colorToRGBA('#f00') # [255, 0, 0, 255]
+    const cvs = document.createElement("canvas");
+    cvs.height = 1;
+    cvs.width = 1;
+    const ctx = cvs.getContext("2d");
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    return ctx.getImageData(0, 0, 1, 1).data;
+}
+function byteToHex(num) {
+    // Turns a number (0-255) into a 2-character hex number (00-ff)
+    return `0${num.toString(16)}`.slice(-2);
+}
+function colorToHex(color) {
+    // Convert any CSS color to a hex representation
+    // Examples:
+    // colorToHex('red')            # '#ff0000'
+    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
+    // colorToHex('#ff0000') # '#ff0000'
+    if (color.match(RE_HEX_COLOR) !== null) {
+        return color;
+    }
+    const rgba = colorToRGBA(color);
+    const hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join("");
+    return `#${hex}`;
+}
+/**
+ * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.
+ *
+ * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }
+ */
+export const ColorPicker = ({ id, startColor, updateColor }) => {
+    /**
+     * There is a delicate ballet here between the color picket and the input box. This is because this color picker
+     * has state (when the end user is in the midst of picking a color by editing the input field) and also
+     * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,
+     * the input box overrides the prop.
+     */
+    const [priorColor, setPriorColor] = useState(startColor);
+    /**
+     * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input
+     * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately
+     * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has
+     * been entered, the value is flagged invalid which causes the input box to be underlined red.
+     */
+    const [inputValue, setInputValue] = useState(null);
+    /**
+     * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance
+     * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values
+     * down to all color pickers as a new prop.
+     */
+    if (priorColor !== startColor) {
+        setPriorColor(startColor);
+        setInputValue(null);
+    }
+    // If the value in the input box isn't valid then give UI feedback
+    const isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;
+    // The swatch always displays the current color from prop. This won't change
+    // until a valid alternative color is picked.
+    const color = colorToHex(startColor);
+    const onColorChanged = ({ target }) => {
+        const maybeNewColor = target.value;
+        // Update the value in the input box
+        setInputValue(maybeNewColor);
+        // If the color is valid then send an update
+        const isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;
+        if (isNewValueValid) {
+            updateColor(maybeNewColor);
+        }
+    };
+    return (React.createElement("div", { className: "color-picker" },
+        React.createElement("input", { className: "theme-color-picker", type: "color", value: color, onChange: onColorChanged, "aria-hidden": "true" }),
+        React.createElement("input", Object.assign({ className: "theme-color-picker-text", type: "text", "aria-invalid": !isValid, value: inputValue !== null && inputValue !== void 0 ? inputValue : color, onChange: onColorChanged }, { id }))));
+};
+//# sourceMappingURL=ColorPicker.js.map

package/react/components/common/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/common/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport \"./css/color-picker.css\";\n\nconst RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;\n\nexport enum RGBA_CHANNEL {\n\tRED = 0,\n\tGREEN = 1,\n\tBLUE = 2,\n\tALPHA = 3,\n}\n\n// From https://stackoverflow.com/a/24390910\nexport function colorToRGBA(color: string) {\n\t// Returns the color as an array of [r, g, b, a] -- all range from 0 - 255\n\t// color must be a valid canvas fillStyle. This will cover most anything\n\t// you'd want to use.\n\t// Examples:\n\t// colorToRGBA('red')  # [255, 0, 0, 255]\n\t// colorToRGBA('#f00') # [255, 0, 0, 255]\n\tconst cvs = document.createElement(\"canvas\");\n\tcvs.height = 1;\n\tcvs.width = 1;\n\n\tconst ctx = cvs.getContext(\"2d\")!;\n\tctx.fillStyle = color;\n\tctx.fillRect(0, 0, 1, 1);\n\treturn ctx.getImageData(0, 0, 1, 1).data;\n}\n\nfunction byteToHex(num: number) {\n\t// Turns a number (0-255) into a 2-character hex number (00-ff)\n\treturn `0${num.toString(16)}`.slice(-2);\n}\n\nfunction colorToHex(color: string) {\n\t// Convert any CSS color to a hex representation\n\t// Examples:\n\t// colorToHex('red')            # '#ff0000'\n\t// colorToHex('rgb(255, 0, 0)') # '#ff0000'\n\t// colorToHex('#ff0000') # '#ff0000'\n\tif (color.match(RE_HEX_COLOR) !== null) {\n\t\treturn color;\n\t}\n\tconst rgba = colorToRGBA(color);\n\tconst hex = [0, 1, 2].map((idx) => byteToHex(rgba[idx])).join(\"\");\n\treturn `#${hex}`;\n}\n\nexport interface ColorPickerProps {\n\tstartColor: string;\n\tupdateColor: (newColor: string) => void;\n\tid?: string;\n}\n\n/**\n * ColorPicker component to update theme variables.  Displays a browser color input alongside a text version for hex color values.\n *\n * @param {{ [id]: string, startColor: string; updateColor: function }} { id, startColor, callback }\n */\nexport const ColorPicker = ({ id, startColor, updateColor }: ColorPickerProps) => {\n\t/**\n\t * There is a delicate ballet here between the color picket and the input box. This is because this color picker\n\t * has state (when the end user is in the midst of picking a color by editing the input field) and also\n\t * receives state (via props). When prop startColor is received, it overrides the input box. But when the user is editing,\n\t * the input box overrides the prop.\n\t */\n\tconst [priorColor, setPriorColor] = useState(startColor);\n\t/**\n\t * inputValue state is set _whenever the user is editing the input box_. Only at this time, the value in the input\n\t * box reflects the user's editing. If at any point the editing yields a valid color then it is immediately\n\t * passed up as an action, which updates the screen and resets the startColor prop. Whenever an invalid color has\n\t * been entered, the value is flagged invalid which causes the input box to be underlined red.\n\t */\n\tconst [inputValue, setInputValue] = useState<string | null>(null);\n\n\t/**\n\t * If the value of the startColor prop changes then we reset the input to the new color. This occurs for instance\n\t * when the user presses the light or dark themes on the theme page. At that point, the parent sends new values\n\t * down to all color pickers as a new prop.\n\t */\n\tif (priorColor !== startColor) {\n\t\tsetPriorColor(startColor);\n\t\tsetInputValue(null);\n\t}\n\n\t// If the value in the input box isn't valid then give UI feedback\n\tconst isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;\n\n\t// The swatch always displays the current color from prop. This won't change\n\t// until a valid alternative color is picked.\n\tconst color = colorToHex(startColor);\n\n\tconst onColorChanged = ({ target }: { target: HTMLInputElement }) => {\n\t\tconst maybeNewColor = target.value;\n\t\t// Update the value in the input box\n\t\tsetInputValue(maybeNewColor);\n\t\t// If the color is valid then send an update\n\t\tconst isNewValueValid = maybeNewColor.match(RE_HEX_COLOR) !== null;\n\t\tif (isNewValueValid) {\n\t\t\tupdateColor(maybeNewColor);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"color-picker\">\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker\"\n\t\t\t\ttype=\"color\"\n\t\t\t\tvalue={color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t></input>\n\t\t\t<input\n\t\t\t\tclassName=\"theme-color-picker-text\"\n\t\t\t\ttype=\"text\"\n\t\t\t\taria-invalid={!isValid}\n\t\t\t\tvalue={inputValue ?? color}\n\t\t\t\tonChange={onColorChanged}\n\t\t\t\t{...{ id }}\n\t\t\t></input>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/DropZone.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./css/drop-zone.css";
+export declare type FileWithPath = File & {
+    path?: string;
+};
+export declare type DropZoneProps = {
+    children: React.ReactNode;
+    processFile: (fileObj: FileWithPath, index: number) => void;
+    suppress?: boolean;
+};
+/***
+ * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
+ * drag-and-drop.
+ *
+ * The DropZone component is intended to be a container element for other elements, such as text, lists,
+ * images, input elements, etc.
+ *
+ * @callback processFile - This function will be called for each file that is dropped in the dropzone.
+ * @param {ReactNode} children - React will fill this in.
+ * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
+ */
+export declare const DropZone: ({ processFile, children, suppress }: DropZoneProps) => JSX.Element;

package/react/components/common/DropZone.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import "./css/drop-zone.css";
+/***
+ * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for
+ * drag-and-drop.
+ *
+ * The DropZone component is intended to be a container element for other elements, such as text, lists,
+ * images, input elements, etc.
+ *
+ * @callback processFile - This function will be called for each file that is dropped in the dropzone.
+ * @param {ReactNode} children - React will fill this in.
+ * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div
+ */
+export const DropZone = ({ processFile, children, suppress = false }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [potential, setPotential] = useState(false);
+    const [singleton, setSingleton] = useState(true);
+    const preventDefaults = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    // Check if something is being dragged somewhere on the page
+    // If dragging is happening on the page, there will be a visual indication for potential drop zone
+    if (singleton) {
+        // "dragenter" and "dragleave" events are fired off of every single child element, and counting them isn't reliable
+        // so, when "dragover" events are fired, we know dragging is happening.
+        // we will wait 100ms after the last "dragover" event is fired, and then turn off the potential zone.
+        let timeout = null;
+        document.addEventListener("dragover", (e) => {
+            preventDefaults(e);
+            setPotential(true);
+            // If timeout was previously set, clear it
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            // Set a new timeout, now that we've gotten a new dragover event
+            timeout = setTimeout(() => {
+                // If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.
+                setPotential(false);
+            }, 100); // 100ms was chosen by trial and error.
+            // 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay
+        });
+        setSingleton(false);
+    }
+    const isPotentialStr = potential ? "isPotential" : "";
+    const isDraggingStr = isDragging ? "isDragging" : isPotentialStr;
+    return suppress ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: `dropZone ${isDraggingStr}`, onDragEnter: (e) => {
+            preventDefaults(e);
+            setIsDragging(true);
+        }, onDragLeave: (e) => {
+            preventDefaults(e);
+            setIsDragging(false);
+        }, onDrop: (e) => {
+            setIsDragging(false);
+            const { files } = e.dataTransfer;
+            for (let i = 0; i < files.length; i++) {
+                if (files[i] === null) {
+                    continue;
+                }
+                processFile(files[i], i);
+            }
+            preventDefaults(e);
+        } }, children));
+};
+//# sourceMappingURL=DropZone.js.map

package/react/components/common/DropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.js","sourceRoot":"","sources":["../../../src/components/common/DropZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,qBAAqB,CAAC;AAW7B;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAiB,EAAE,EAAE;IACtF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,CAAC,CAA0D,EAAE,EAAE;QACtF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC,CAAC;IAEF,4DAA4D;IAC5D,kGAAkG;IAClG,IAAI,SAAS,EAAE;QACd,mHAAmH;QACnH,uEAAuE;QACvE,qGAAqG;QACrG,IAAI,OAAO,GAA0B,IAAI,CAAC;QAC1C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;YAC3C,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,YAAY,CAAC,IAAI,CAAC,CAAC;YAEnB,0CAA0C;YAC1C,IAAI,OAAO,KAAK,IAAI,EAAE;gBACrB,YAAY,CAAC,OAAO,CAAC,CAAC;aACtB;YAED,gEAAgE;YAChE,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzB,mGAAmG;gBACnG,YAAY,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uCAAuC;YAChD,iIAAiI;QAClI,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,KAAK,CAAC,CAAC;KACpB;IAED,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACtD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,OAAO,QAAQ,CAAC,CAAC,CAAC,CACjB,0CAAG,QAAQ,CAAI,CACf,CAAC,CAAC,CAAC,CACH,6BACC,SAAS,EAAE,YAAY,aAAa,EAAE,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,eAAe,CAAC,CAAC,CAAC,CAAC;YACnB,aAAa,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,aAAa,CAAC,KAAK,CAAC,CAAC;YAErB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;oBACtB,SAAS;iBACT;gBACD,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACzB;YAED,eAAe,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,IAEA,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState } from \"react\";\nimport \"./css/drop-zone.css\";\n\n// Electron adds File.path\nexport type FileWithPath = File & { path?: string };\n\nexport type DropZoneProps = {\n\tchildren: React.ReactNode;\n\tprocessFile: (fileObj: FileWithPath, index: number) => void;\n\tsuppress?: boolean;\n};\n\n/***\n * Component that serves as a drop zone. It also keeps track of visual concerns and event handlers for\n * drag-and-drop.\n *\n * The DropZone component is intended to be a container element for other elements, such as text, lists,\n * images, input elements, etc.\n *\n * @callback processFile - This function will be called for each file that is dropped in the dropzone.\n * @param {ReactNode} children - React will fill this in.\n * @param {boolean} suppress=false - If the dropzone-ness should be suppressed, which would turn this container into just a div\n */\nexport const DropZone = ({ processFile, children, suppress = false }: DropZoneProps) => {\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst [potential, setPotential] = useState(false);\n\tconst [singleton, setSingleton] = useState(true);\n\n\tconst preventDefaults = (e: { preventDefault: Function; stopPropagation: Function }) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\t// Check if something is being dragged somewhere on the page\n\t// If dragging is happening on the page, there will be a visual indication for potential drop zone\n\tif (singleton) {\n\t\t// \"dragenter\" and \"dragleave\" events are fired off of every single child element, and counting them isn't reliable\n\t\t// so, when \"dragover\" events are fired, we know dragging is happening.\n\t\t// we will wait 100ms after the last \"dragover\" event is fired, and then turn off the potential zone.\n\t\tlet timeout: NodeJS.Timeout | null = null;\n\t\tdocument.addEventListener(\"dragover\", (e) => {\n\t\t\tpreventDefaults(e);\n\t\t\tsetPotential(true);\n\n\t\t\t// If timeout was previously set, clear it\n\t\t\tif (timeout !== null) {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t}\n\n\t\t\t// Set a new timeout, now that we've gotten a new dragover event\n\t\t\ttimeout = setTimeout(() => {\n\t\t\t\t// If it's been 100ms and no dragover event has been fired, assume the user isn't dragging anymore.\n\t\t\t\tsetPotential(false);\n\t\t\t}, 100); // 100ms was chosen by trial and error.\n\t\t\t// 10ms was too little time, and caused flicker. 100ms doesn't have a flicker, and turns off potential without a noticeable delay\n\t\t});\n\t\tsetSingleton(false);\n\t}\n\n\tconst isPotentialStr = potential ? \"isPotential\" : \"\";\n\tconst isDraggingStr = isDragging ? \"isDragging\" : isPotentialStr;\n\n\treturn suppress ? (\n\t\t<>{children}</>\n\t) : (\n\t\t<div\n\t\t\tclassName={`dropZone ${isDraggingStr}`}\n\t\t\tonDragEnter={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(true);\n\t\t\t}}\n\t\t\tonDragLeave={(e) => {\n\t\t\t\tpreventDefaults(e);\n\t\t\t\tsetIsDragging(false);\n\t\t\t}}\n\t\t\tonDrop={(e) => {\n\t\t\t\tsetIsDragging(false);\n\n\t\t\t\tconst { files } = e.dataTransfer;\n\t\t\t\tfor (let i = 0; i < files.length; i++) {\n\t\t\t\t\tif (files[i] === null) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tprocessFile(files[i], i);\n\t\t\t\t}\n\n\t\t\t\tpreventDefaults(e);\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/common/DropdownButton.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../../assets/css/button.css";
+import { IFinsembleButtonProps } from "../shared/Button";
+export interface IFinsembleDropdownActionButtonProps {
+    buttonLabel: string;
+    buttonOptions: Array<IFinsembleButtonProps>;
+    mainAction: Function;
+}
+/**
+ * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
+ * @deprecated Use DefaultDropDownButton instead.
+ */
+declare const DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps>;
+export default DropdownButton;

package/react/components/common/DropdownButton.js

@@ -0,0 +1,37 @@
+import React, { useState, useRef } from "react";
+import "../../assets/css/button.css";
+import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
+/**
+ * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.
+ * @deprecated Use DefaultDropDownButton instead.
+ */
+const DropdownButton = ({ buttonLabel = "Label", buttonOptions = [], mainAction, }) => {
+    const wrapperRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    useOutsideClickDetector(wrapperRef, () => setExpanded(false));
+    const options = buttonOptions.map((option, index) => (React.createElement("div", { key: index, className: "finsemble-dropdown-action__btn-option", onClick: () => {
+            option.clickHandler();
+            setExpanded(false);
+        } }, option.buttonLabel)));
+    const buttonAction = () => {
+        if (expanded) {
+            setExpanded(false);
+            return;
+        }
+        if (mainAction) {
+            mainAction();
+        }
+        else {
+            () => setExpanded(!expanded);
+        }
+    };
+    return (React.createElement("div", { ref: wrapperRef, className: "finsemble-dropdown-action__btn-container" },
+        React.createElement("div", { className: "finsemble-dropdown-action__btn" },
+            React.createElement("span", { className: "btn-label", onClick: buttonAction }, buttonLabel),
+            React.createElement("span", { className: "separator" }),
+            React.createElement("div", { className: "expand-options", onClick: () => setExpanded(!expanded) },
+                React.createElement("span", { className: "caret" }))),
+        expanded ? React.createElement("div", { className: "finsemble-dropdown-action__btn-options" }, options) : null));
+};
+export default DropdownButton;
+//# sourceMappingURL=DropdownButton.js.map

package/react/components/common/DropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/common/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAS9E;;;GAGG;AACH,MAAM,cAAc,GAAiE,CAAC,EACrF,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,EAAE,EAClB,UAAU,GAC2B,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,6BACC,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,GAAG,EAAE;YACb,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,IAEA,MAAM,CAAC,WAAW,CACd,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACb,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,OAAO;SACP;QAED,IAAI,UAAU,EAAE;YACf,UAAU,EAAE,CAAC;SACb;aAAM;YACN,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC7B;IACF,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,0CAA0C;QACzE,6BAAK,SAAS,EAAC,gCAAgC;YAC9C,8BAAM,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,IAC/C,WAAW,CACN;YACP,8BAAM,SAAS,EAAC,WAAW,GAAQ;YACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC;gBACpE,8BAAM,SAAS,EAAC,OAAO,GAAQ,CAC1B,CACD;QACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,wCAAwC,IAAE,OAAO,CAAO,CAAC,CAAC,CAAC,IAAI,CACrF,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState, useRef } from \"react\";\nimport \"../../assets/css/button.css\";\nimport { useOutsideClickDetector } from \"../../hooks/useOutsideClickDetector\";\nimport { IFinsembleButtonProps } from \"../shared/Button\";\n\nexport interface IFinsembleDropdownActionButtonProps {\n\tbuttonLabel: string;\n\tbuttonOptions: Array<IFinsembleButtonProps>;\n\tmainAction: Function;\n}\n\n/**\n * @TODO: Consolidate this and DefaultDropDownButton and change all usages to use DefaultDropDownButton.\n * @deprecated Use DefaultDropDownButton instead.\n */\nconst DropdownButton: React.FunctionComponent<IFinsembleDropdownActionButtonProps> = ({\n\tbuttonLabel = \"Label\",\n\tbuttonOptions = [],\n\tmainAction,\n}: IFinsembleDropdownActionButtonProps) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [expanded, setExpanded] = useState(false);\n\n\tuseOutsideClickDetector(wrapperRef, () => setExpanded(false));\n\n\tconst options = buttonOptions.map((option, index) => (\n\t\t<div\n\t\t\tkey={index}\n\t\t\tclassName=\"finsemble-dropdown-action__btn-option\"\n\t\t\tonClick={() => {\n\t\t\t\toption.clickHandler();\n\t\t\t\tsetExpanded(false);\n\t\t\t}}\n\t\t>\n\t\t\t{option.buttonLabel}\n\t\t</div>\n\t));\n\n\tconst buttonAction = () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false);\n\t\t\treturn;\n\t\t}\n\n\t\tif (mainAction) {\n\t\t\tmainAction();\n\t\t} else {\n\t\t\t() => setExpanded(!expanded);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div ref={wrapperRef} className=\"finsemble-dropdown-action__btn-container\">\n\t\t\t<div className=\"finsemble-dropdown-action__btn\">\n\t\t\t\t<span className=\"btn-label\" onClick={buttonAction}>\n\t\t\t\t\t{buttonLabel}\n\t\t\t\t</span>\n\t\t\t\t<span className=\"separator\"></span>\n\t\t\t\t<div className=\"expand-options\" onClick={() => setExpanded(!expanded)}>\n\t\t\t\t\t<span className=\"caret\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{expanded ? <div className=\"finsemble-dropdown-action__btn-options\">{options}</div> : null}\n\t\t</div>\n\t);\n};\n\nexport default DropdownButton;\n"]}

package/react/components/common/ErrorBoundary.d.ts

@@ -0,0 +1,34 @@
+import React, { ErrorInfo, ReactNode } from "react";
+declare type ErrorBoundaryProps = {
+    fallBackUI?: ReactNode;
+};
+declare type ErrorBoundaryState = {
+    hasError: boolean;
+};
+/**
+ * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
+ * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
+ * Has the added benefit of sending the errors to the Central Logger
+ *
+ * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
+ * Note: This does not catch errors in the current component directly, only child components. See below for example
+ *
+ * Eg: WON'T WORK
+ *
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
+ *
+ * WILL WORK:
+ * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
+ *
+ * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/react/components/common/ErrorBoundary.js

@@ -0,0 +1,43 @@
+import React from "react";
+/**
+ * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central
+ * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.
+ * Has the added benefit of sending the errors to the Central Logger
+ *
+ * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.
+ * Note: This does not catch errors in the current component directly, only child components. See below for example
+ *
+ * Eg: WON'T WORK
+ *
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>
+ *
+ * WILL WORK:
+ * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>
+ * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>
+ *
+ * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries
+ */
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log the error to the dev tools where developers will expect it but also send it to the central logger
+        console.error(error, errorInfo);
+        FSBL.Clients.Logger.system.error(error, errorInfo);
+    }
+    render() {
+        var _a;
+        if (this.state.hasError) {
+            // Render custom fallback UI or default to nothing
+            return (_a = this.props.fallBackUI) !== null && _a !== void 0 ? _a : React.createElement(React.Fragment, null);
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/react/components/common/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/common/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AASpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IACzF,YAAY,KAAyB;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QACnD,wGAAwG;QACxG,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;;QACL,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACxB,kDAAkD;YAClD,OAAO,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,yCAAK,CAAC;SACtC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD","sourcesContent":["import React, { ErrorInfo, ReactNode } from \"react\";\n\ntype ErrorBoundaryProps = {\n\tfallBackUI?: ReactNode;\n};\ntype ErrorBoundaryState = {\n\thasError: boolean;\n};\n\n/**\n * Something like a try catch in React component form with some exceptions. Catches Errors and logs them to the central\n * logger. Prevents uncaught exceptions on the render of child components from unintentionally breaking the entire UI.\n * Has the added benefit of sending the errors to the Central Logger\n *\n * Note: The exceptions are that it not catch errors in Event handlers and Asynchronous code.\n * Note: This does not catch errors in the current component directly, only child components. See below for example\n *\n * Eg: WON'T WORK\n *\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><div>{test.undefined.length}</div></ErrorBoundary>\n *\n * WILL WORK:\n * const BrokenComponent = ({test}:any) => <div>{test.undefined.length}</div>\n * const ContainerComponent = ({test}:any) => <ErrorBoundary><BrokenComponent test={test}/></ErrorBoundary>\n *\n * @see https://reactjs.org/docs/error-boundaries.html for more information on Error Boundaries\n */\nexport class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\t\tthis.state = { hasError: false };\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tcomponentDidCatch(error: Error, errorInfo: ErrorInfo) {\n\t\t// Log the error to the dev tools where developers will expect it but also send it to the central logger\n\t\tconsole.error(error, errorInfo);\n\t\tFSBL.Clients.Logger.system.error(error, errorInfo);\n\t}\n\n\trender() {\n\t\tif (this.state.hasError) {\n\t\t\t// Render custom fallback UI or default to nothing\n\t\t\treturn this.props.fallBackUI ?? <></>;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"]}

package/react/components/common/FileInput.d.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+import "./css/file-input.css";
+export declare type FileInputUploadCb = (fileObject: File, cb?: (progress: number) => void) => Promise<{
+    err: string | null;
+    path: string;
+}>;
+export declare type FileInputProps = {
+    acceptTypes: string[];
+    value: string;
+    id?: string;
+    shouldUpload?: boolean;
+    onSetValue?: (value: string) => void;
+    uploadFunction?: FileInputUploadCb;
+    presetFile?: null | File;
+    suppressDropzone?: boolean;
+    disabled?: boolean;
+    allowClearing?: boolean;
+    textEditable?: boolean;
+};
+/**
+ * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
+ *
+ * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
+ * @return {*}
+ */
+export declare const FileInput: ({ acceptTypes, value, onSetValue, id, shouldUpload, uploadFunction, presetFile, suppressDropzone, disabled, allowClearing, textEditable, }: FileInputProps) => JSX.Element;

package/react/components/common/FileInput.js

@@ -0,0 +1,123 @@
+/*!
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState, useRef, useEffect } from "react";
+import { SmartDesktopDesignerActions } from "../../actions/smartDesktopDesignerActions";
+import { useDispatch } from "../../store";
+import { Button } from "./Button";
+import { ButtonIcon } from "./ButtonIcon";
+import "./css/file-input.css";
+import { DropZone } from "./DropZone";
+import { validateFilename } from "./file_helpers";
+const INVALID_FILE_TYPE_ERROR = {
+    viewId: "themes",
+    message: "Your uploaded file is not in the correct format",
+};
+const defaultUploadFunction = async () => {
+    return { err: null, path: "" };
+};
+/**
+ * A Browse button with a hidden file input to allow for a file select dialog and extraction of a path
+ *
+ * @param {FileInputProps} { acceptTypes, value, onSetValue, shouldUpload=true, uploadFunction = defaultUploadFunction}
+ * @return {*}
+ */
+export const FileInput = ({ acceptTypes, value, onSetValue, id, shouldUpload = true, uploadFunction = defaultUploadFunction, presetFile = null, suppressDropzone = false, disabled = false, allowClearing = true, textEditable = false, }) => {
+    const dispatch = useDispatch();
+    const fileInputElement = useRef({});
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [fileInput, setFileInput] = useState({}); // cast to correct type so typescript doesn't complain
+    const [path, setPath] = useState(value || "");
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [handedFile, setHandedFile] = useState(presetFile);
+    const isInvalid = validateFilename(acceptTypes, path);
+    const uploadSuccess = ({ err, path: successPath }) => {
+        if (err) {
+            dispatch(SmartDesktopDesignerActions.set_project_error(INVALID_FILE_TYPE_ERROR));
+            setErrorMessage(err);
+            setPath("");
+        }
+        else {
+            dispatch(SmartDesktopDesignerActions.delete_project_error(INVALID_FILE_TYPE_ERROR));
+            setErrorMessage(null);
+            setPath(successPath);
+            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(successPath);
+            fileInput.value = "";
+        }
+    };
+    const uploadError = (err) => {
+        setErrorMessage(err);
+    };
+    const uploadFile = (fileObj) => {
+        // If it's not a file, we can't do anything with it
+        if (!(fileObj instanceof File)) {
+            return;
+        }
+        setIsUploading(true);
+        uploadFunction === null || uploadFunction === void 0 ? void 0 : uploadFunction(fileObj, (progress) => {
+            setUploadProgress(progress);
+        }).then(uploadSuccess).catch(uploadError).finally(() => {
+            setIsUploading(false);
+            setUploadProgress(0);
+        });
+    };
+    const processFile = (fileObj) => {
+        if (shouldUpload) {
+            uploadFile(fileObj);
+        }
+        else if (fileObj === null || fileObj === void 0 ? void 0 : fileObj.path) {
+            // If the consumer doesn't want the file actually uploaded, just return the file name
+            uploadSuccess({
+                err: null,
+                path: fileObj.path,
+            });
+        }
+        setIsUploading(false);
+        setUploadProgress(0);
+        setErrorMessage(null);
+    };
+    useEffect(() => {
+        setPath(value || "");
+    }, [value]);
+    const onFileChange = (e) => {
+        var _a;
+        const fileObj = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (fileObj !== undefined) {
+            processFile(fileObj);
+        }
+        setFileInput(e.target);
+    };
+    // Check if props updated
+    if (handedFile !== presetFile) {
+        setHandedFile(presetFile);
+        if (presetFile !== null) {
+            uploadFile(presetFile);
+        }
+    }
+    return (React.createElement(DropZone, { processFile: processFile, suppress: suppressDropzone },
+        React.createElement("div", { className: "file-input-container" },
+            React.createElement("div", { className: "file-input-actions" },
+                React.createElement("input", { ref: fileInputElement, disabled: disabled, type: "file", onChange: onFileChange, accept: acceptTypes.join(", "), tabIndex: -1, "aria-hidden": "true" }),
+                React.createElement(Button, { fashion: "primary", text: "Select file", disabled: disabled, onClick: () => {
+                        fileInputElement.current.click();
+                    } })),
+            textEditable ? (React.createElement("div", { className: "file-input-field" },
+                React.createElement("input", { type: "text", onChange: (e) => {
+                        if (onSetValue) {
+                            onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue(e.target.value);
+                        }
+                        setPath(e.target.value);
+                    }, "aria-label": "File name", value: path }))) : (React.createElement("div", { className: "file-input-value" },
+                React.createElement("span", Object.assign({ className: `file-input-value-input ${isInvalid && "invalid"}` }, { id }), path),
+                allowClearing && path !== "" && (React.createElement(ButtonIcon, { text: "Cancel", icon: "times", onClick: () => {
+                        setPath("");
+                        onSetValue === null || onSetValue === void 0 ? void 0 : onSetValue("");
+                    } })),
+                errorMessage && React.createElement("div", { className: "file-input-error" }, errorMessage))),
+            React.createElement("div", { className: "file-input-status" }, isUploading ? (React.createElement("div", { className: "file-input-progress-container" },
+                uploadProgress,
+                "% uploaded")) : (!errorMessage && React.createElement(React.Fragment, null))))));
+};
+//# sourceMappingURL=FileInput.js.map