npm - @finsemble/finsemble-ui - Versions diffs - 6.6.0 → 7.0.0-beta.1 - Mend

@finsemble/finsemble-ui 6.6.0 → 7.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@finsemble/finsemble-ui",
-  "version": "6.6.0",
+  "version": "7.0.0-beta.1",
   "description": "Ready-made React components to give you a head-start building your SmartDesktop.",
   "types": "index.d.ts",
   "files": [
@@ -10,6 +10,7 @@
   "scripts": {
     "build": "yarn clean && yarn copy-css && tsc",
     "do-audit": " improved-yarn-audit --min-severity high",
+    "depcheck": "depcheck",
     "clean": "rimraf ./react & rimraf coverage",
     "copy-css": "copyfiles -u 1 \"./src/assets/**/*\" react/ && copyfiles -u 1 \"src/**/*.css\" \"react/\"",
     "dev": "yarn copy-css && yarn watch",
@@ -27,21 +28,18 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@finsemble/finsemble-api": "6.6.0",
+    "@finsemble/finsemble-api": "7.0.0-beta.1",
     "@q42/floating-focus-a11y": "^1.3.3",
     "@reduxjs/toolkit": "^1.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/async": "3.2.12",
     "@types/chai": "4.3.0",
-    "@types/lodash": "4.14.178",
-    "@types/mime-types": "^2.1.0",
+    "@types/lodash": "4.14.179",
     "@types/mocha": "9.1.0",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "@types/react-input-autosize": "2.2.1",
-    "@types/react-redux": "7.1.22",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "17.0.13",
+    "@types/react-redux": "7.1.23",
     "@types/react-relative-portal": "^1.8.1",
-    "@types/react-syntax-highlighter": "13.5.2",
     "async": "3.2.3",
     "date-fns": "^2.25.0",
     "immer": "9.0.12",
@@ -61,14 +59,13 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-methods": "7.16.7",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.12.10",
     "@babel/register": "^7.16.0",
-    "@storybook/addon-actions": "6.4.13",
+    "@storybook/addon-actions": "6.4.19",
     "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-links": "6.4.13",
-    "@storybook/react": "6.4.13",
+    "@storybook/addon-links": "6.4.19",
+    "@storybook/react": "6.4.19",
     "@types/enzyme": "^3.10.8",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/react-transition-group": "4.4.4",
@@ -82,23 +79,22 @@
     "concurrently": "7.0.0",
     "copyfiles": "2.4.1",
     "core-js": "^3.15.2",
+    "depcheck": "^1.4.3",
     "enzyme": "^3.11.0",
     "ignore-styles": "^5.0.1",
     "improved-yarn-audit": "^3.0.0",
     "jsdom": "^19.0.0",
-    "mime-types": "^2.1.28",
     "mocha": "9.1.3",
     "nyc": "15.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
-    "sinon": "^12.0.0",
-    "ts-loader": "^9.2.3",
+    "sinon": "^13.0.1",
     "ts-mocha": "9.0.2",
     "typescript": "4.5.5"
   },
   "resolutions": {
-    "@types/react-dom": "17.0.11",
+    "@types/react-dom": "17.0.13",
     "ts-mocha/ts-node": "^10.1.0",
     "trim": "0.0.3",
     "css-what": "5.0.1",

package/react/components/common/ColorPicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import "./css/color-picker.css";
 const RE_HEX_COLOR = /^#[0-9a-f]{6}$/i;
 export var RGBA_CHANNEL;
@@ -29,23 +29,24 @@ function colorToHex(color) {
     return `#${hex}`;
 }
 export const ColorPicker = ({ id, startColor, updateColor }) => {
-    const [color, setColor] = useState(colorToHex(startColor));
-    const isValid = color.match(RE_HEX_COLOR) !== null;
-    useEffect(() => {
-        if (isValid) {
-            updateColor(color);
-        }
-    }, [color]);
-    useEffect(() => {
-        if (startColor) {
-            setColor(startColor);
-        }
-    }, [startColor]);
+    const [priorColor, setPriorColor] = useState(startColor);
+    const [inputValue, setInputValue] = useState(null);
+    if (priorColor !== startColor) {
+        setPriorColor(startColor);
+        setInputValue(null);
+    }
+    const isValid = inputValue === null || inputValue.match(RE_HEX_COLOR) !== null;
+    const color = colorToHex(startColor);
     const onColorChanged = ({ target }) => {
-        setColor(target.value);
+        const maybeNewColor = target.value;
+        setInputValue(maybeNewColor);
+        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: color, onChange: onColorChanged }, { id }))));
+        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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/common/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,~~EAAE~~,~~SAAS,EAAE,~~MAAM,OAAO,CAAC;AACnD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAEvC,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACvB,6CAAO,CAAA;IACP,iDAAS,CAAA;IACT,+CAAQ,CAAA;IACR,iDAAS,CAAA;AACV,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAGD,MAAM,UAAU,WAAW,CAAC,KAAa;IAOxC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC7C,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;IACf,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;IAEd,MAAM,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;IAClC,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC;IACtB,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1C,CAAC;AAED,SAAS,SAAS,CAAC,GAAW;IAE7B,OAAO,IAAI,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC;AAED,SAAS,UAAU,CAAC,KAAa;IAMhC,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE;QACvC,OAAO,KAAK,CAAC;KACb;IACD,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClE,OAAO,IAAI,GAAG,EAAE,CAAC;AAClB,CAAC;AAaD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,WAAW,EAAoB,EAAE,EAAE;~~IAChF~~,MAAM,CAAC,~~KAAK~~,EAAE,~~QAAQ~~,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,~~UAAU,~~CAAC~~,CAAC,CAAC~~;~~IAC3D~~,MAAM,~~OAAO~~,~~GAAG~~,~~KAAK~~,~~CAAC~~,~~KAAK,~~CAAC,~~YAAY~~,~~CAAC~~,~~KAAK~~,IAAI,CAAC~~;IAEnD~~,~~SAAS,~~CAAC~~,GAAG,EAAE~~;~~QACd~~,IAAI,~~OAAO~~,EAAE;~~YACZ~~,~~WAAW~~,CAAC,~~KAAK~~,CAAC,CAAC;~~SACnB;IACF~~,~~CAAC~~,~~EAAE,~~CAAC,~~KAAK~~,CAAC,CAAC~~,CAAC~~;~~IAEZ~~,~~SAAS~~,~~CAAC~~,GAAG,~~EAAE;QACd~~,IAAI,UAAU,~~EAAE;YACf~~,~~QAAQ~~,CAAC,~~UAAU~~,CAAC,CAAC;~~SACrB;IACF~~,~~CAAC~~,~~EAAE~~,~~CAAC~~,UAAU,CAAC,CAAC,CAAC;~~IAEjB~~,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE;QACnE,~~QAAQ~~,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;~~IACxB~~,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,cAAc;QAC5B,+BACC,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,cAAc,iBACZ,MAAM,GACV;QACT,6CACC,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,MAAM,kBACG,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,~~EACZ~~,QAAQ,EAAE,cAAc,IACpB,EAAE,EAAE,EAAE,EACF,CACJ,CACN,CAAC;AACH,CAAC,CAAC","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\tconst [~~color~~, ~~setColor~~] = useState(~~colorToHex(~~startColor));\n\~~tconst~~ ~~isValid~~ = ~~color~~.~~match(RE_HEX_COLOR)~~ ~~!==~~ ~~null;\n~~\n\~~tuseEffect(()~~ => {\n\t~~\tif~~ ~~(isValid)~~ {\n\t\t\~~tupdateColor~~(~~color~~);\n\t\t}\n\t}, ~~[color]);\n~~\n\~~tuseEffect(()~~ => {\n\t\tif (startColor) {\n\t\~~t\tsetColor~~(startColor);\n\t\t}\n\t}, [startColor]);\n\n\tconst onColorChanged = ({ target }: { target: HTMLInputElement }) => {\n\t\~~tsetColor(~~target.value);\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={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"]}
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/FinsembleIcon.d.ts CHANGED Viewed

@@ -5,5 +5,6 @@ export declare type FinsembleIconProps = {
     icon: FinsembleIconType;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
+    label?: string;
 };
 export declare const FinsembleIcon: (props: FinsembleIconProps) => JSX.Element;

package/react/components/common/FinsembleIcon.js CHANGED Viewed

@@ -81,7 +81,8 @@ const icons = {
     window: WindowIcon,
 };
 export const FinsembleIcon = (props) => {
+    var _a;
     const Icon = icons[props.icon];
-    return (React.createElement("span", { className: ["finsemble-icon", `finsemble-icon-${props.icon}`, props.className || ""].join(" "), role: "img", "aria-label": `${props.icon} icon`, onClick: (e) => props.onClick && props.onClick(e) }, Icon && React.createElement(Icon, null)));
+    return (React.createElement("span", { className: ["finsemble-icon", `finsemble-icon-${props.icon}`, props.className || ""].join(" "), role: "img", "aria-label": (_a = props.label) !== null && _a !== void 0 ? _a : `${props.icon} icon`, onClick: (e) => props.onClick && props.onClick(e) }, Icon && React.createElement(Icon, null)));
 };
 //# sourceMappingURL=FinsembleIcon.js.map

package/react/components/common/FinsembleIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FinsembleIcon.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleIcon.tsx"],"names":[],"mappings":"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~~AAQF~~,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,OAAO,CACN,8BACC,SAAS,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC9F,IAAI,EAAC,KAAK,gBACE,GAAG,KAAK,CAAC,IAAI,OAAO,~~EAChC~~,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAEhD,IAAI,IAAI,oBAAC,IAAI,OAAQ,CAChB,CACP,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport \"./css/icon.css\";\nimport { ReactComponent as AlwaysOnTopIcon } from \"../../assets/icons/always-on-top.svg\";\nimport { ReactComponent as Caret } from \"../../assets/icons/caret.svg\";\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\nimport { ReactComponent as CheckSquare } from \"../../assets/icons/check-square.svg\";\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\nimport { ReactComponent as CloseIcon } from \"../../assets/icons/close.svg\";\nimport { ReactComponent as CodeBlockIcon } from \"../../assets/icons/code-block.svg\";\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\nimport { ReactComponent as DocumentationIcon } from \"../../assets/icons/documentation.svg\";\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\nimport { ReactComponent as LinkerIcon } from \"../../assets/icons/linker.svg\";\nimport { ReactComponent as LockIcon } from \"../../assets/icons/lock.svg\";\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\nimport { ReactComponent as MaximizeIcon } from \"../../assets/icons/maximize.svg\";\nimport { ReactComponent as MinimizeIcon } from \"../../assets/icons/minimize.svg\";\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\nimport { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\nimport { ReactComponent as ToolbarIcon } from \"../../assets/icons/toolbar.svg\";\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\nimport { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\n\nexport type FinsembleIconType =\n\t\| \"alwaysOnTop\"\n\t\| \"caret\"\n\t\| \"check-square\"\n\t\| \"check\"\n\t\| \"chevron-left\"\n\t\| \"chevron-right\"\n\t\| \"close\"\n\t\| \"code-block\"\n\t\| \"copy\"\n\t\| \"documentation\"\n\t\| \"exclamation-circle\"\n\t\| \"external-link\"\n\t\| \"flag\"\n\t\| \"folder\"\n\t\| \"font\"\n\t\| \"globe\"\n\t\| \"hdd\"\n\t\| \"key\"\n\t\| \"life-ring\"\n\t\| \"linker\"\n\t\| \"lock\"\n\t\| \"magic\"\n\t\| \"maximize\"\n\t\| \"minimize\"\n\t\| \"moon\"\n\t\| \"paint-roller\"\n\t\| \"pencil\"\n\t\| \"plus\"\n\t\| \"question-circle\"\n\t\| \"search\"\n\t\| \"sun\"\n\t\| \"times\"\n\t\| \"toggle-off\"\n\t\| \"toggle-on\"\n\t\| \"toolbar\"\n\t\| \"tools\"\n\t\| \"trash\"\n\t\| \"upload\"\n\t\| \"window\";\n\ntype IconComponents = {\n\t[key in FinsembleIconType]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n};\n\nconst icons: IconComponents = {\n\talwaysOnTop: AlwaysOnTopIcon,\n\tcaret: Caret,\n\tcheck: CheckIcon,\n\t\"check-square\": CheckSquare,\n\t\"chevron-left\": ChevronLeftIcon,\n\t\"chevron-right\": ChevronRightIcon,\n\tclose: CloseIcon,\n\t\"code-block\": CodeBlockIcon,\n\tcopy: CopyIcon,\n\tdocumentation: DocumentationIcon,\n\t\"exclamation-circle\": ExclaimationCircleIcon,\n\t\"external-link\": ExternalLinkIcon,\n\tflag: FlagIcon,\n\tfolder: FolderIcon,\n\tfont: FontIcon,\n\tglobe: GlobeIcon,\n\thdd: HDDIcon,\n\tkey: KeyIcon,\n\t\"life-ring\": LifeRingIcon,\n\tlinker: LinkerIcon,\n\tlock: LockIcon,\n\tmagic: MagicIcon,\n\tmaximize: MaximizeIcon,\n\tminimize: MinimizeIcon,\n\tmoon: MoonIcon,\n\t\"paint-roller\": PaintRollerIcon,\n\tpencil: PencilIcon,\n\tplus: PlusIcon,\n\t\"question-circle\": QuestionCircleIcon,\n\tsearch: SearchIcon,\n\tsun: SunIcon,\n\ttimes: TimesIcon,\n\t\"toggle-off\": ToggleOffIcon,\n\t\"toggle-on\": ToggleOnIcon,\n\ttoolbar: ToolbarIcon,\n\ttools: ToolsIcon,\n\ttrash: TrashIcon,\n\tupload: UploadIcon,\n\twindow: WindowIcon,\n};\n\nexport type FinsembleIconProps = {\n\ticon: FinsembleIconType;\n\tclassName?: string;\n\tonClick?: (e: React.MouseEvent) => void;\n};\n\nexport const FinsembleIcon = (props: FinsembleIconProps) => {\n\tconst Icon = icons[props.icon];\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${props.icon}`, props.className \|\| \"\"].join(\" \")}\n\t\t\trole=\"img\"\n\t\t\taria-label={`${props.icon} icon`}\n\t\t\tonClick={(e) => props.onClick && props.onClick(e)}\n\t\t>\n\t\t\t{Icon && <Icon></Icon>}\n\t\t</span>\n\t);\n};\n"]}
1	+ {"version":3,"file":"FinsembleIcon.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport \"./css/icon.css\";\nimport { ReactComponent as AlwaysOnTopIcon } from \"../../assets/icons/always-on-top.svg\";\nimport { ReactComponent as Caret } from \"../../assets/icons/caret.svg\";\nimport { ReactComponent as CheckIcon } from \"../../assets/icons/check.svg\";\nimport { ReactComponent as CheckSquare } from \"../../assets/icons/check-square.svg\";\nimport { ReactComponent as ChevronLeftIcon } from \"../../assets/icons/chevron-left.svg\";\nimport { ReactComponent as ChevronRightIcon } from \"../../assets/icons/chevron-right.svg\";\nimport { ReactComponent as CloseIcon } from \"../../assets/icons/close.svg\";\nimport { ReactComponent as CodeBlockIcon } from \"../../assets/icons/code-block.svg\";\nimport { ReactComponent as CopyIcon } from \"../../assets/icons/copy.svg\";\nimport { ReactComponent as DocumentationIcon } from \"../../assets/icons/documentation.svg\";\nimport { ReactComponent as ExclaimationCircleIcon } from \"../../assets/icons/exclamation-circle.svg\";\nimport { ReactComponent as ExternalLinkIcon } from \"../../assets/icons/external-link.svg\";\nimport { ReactComponent as FlagIcon } from \"../../assets/icons/flag.svg\";\nimport { ReactComponent as FolderIcon } from \"../../assets/icons/folder.svg\";\nimport { ReactComponent as FontIcon } from \"../../assets/icons/font.svg\";\nimport { ReactComponent as GlobeIcon } from \"../../assets/icons/globe.svg\";\nimport { ReactComponent as HDDIcon } from \"../../assets/icons/hdd.svg\";\nimport { ReactComponent as KeyIcon } from \"../../assets/icons/key.svg\";\nimport { ReactComponent as LifeRingIcon } from \"../../assets/icons/life-ring.svg\";\nimport { ReactComponent as LinkerIcon } from \"../../assets/icons/linker.svg\";\nimport { ReactComponent as LockIcon } from \"../../assets/icons/lock.svg\";\nimport { ReactComponent as MagicIcon } from \"../../assets/icons/magic.svg\";\nimport { ReactComponent as MaximizeIcon } from \"../../assets/icons/maximize.svg\";\nimport { ReactComponent as MinimizeIcon } from \"../../assets/icons/minimize.svg\";\nimport { ReactComponent as MoonIcon } from \"../../assets/icons/moon.svg\";\nimport { ReactComponent as PaintRollerIcon } from \"../../assets/icons/paint-roller.svg\";\nimport { ReactComponent as PencilIcon } from \"../../assets/icons/pencil.svg\";\nimport { ReactComponent as PlusIcon } from \"../../assets/icons/plus.svg\";\nimport { ReactComponent as QuestionCircleIcon } from \"../../assets/icons/question-circle.svg\";\nimport { ReactComponent as SearchIcon } from \"../../assets/icons/search.svg\";\nimport { ReactComponent as SunIcon } from \"../../assets/icons/sun.svg\";\nimport { ReactComponent as TimesIcon } from \"../../assets/icons/times.svg\";\nimport { ReactComponent as ToggleOffIcon } from \"../../assets/icons/toggle-off.svg\";\nimport { ReactComponent as ToggleOnIcon } from \"../../assets/icons/toggle-on.svg\";\nimport { ReactComponent as ToolbarIcon } from \"../../assets/icons/toolbar.svg\";\nimport { ReactComponent as ToolsIcon } from \"../../assets/icons/tools.svg\";\nimport { ReactComponent as TrashIcon } from \"../../assets/icons/trash.svg\";\nimport { ReactComponent as UploadIcon } from \"../../assets/icons/upload.svg\";\nimport { ReactComponent as WindowIcon } from \"../../assets/icons/window.svg\";\n\nexport type FinsembleIconType =\n\t\| \"alwaysOnTop\"\n\t\| \"caret\"\n\t\| \"check-square\"\n\t\| \"check\"\n\t\| \"chevron-left\"\n\t\| \"chevron-right\"\n\t\| \"close\"\n\t\| \"code-block\"\n\t\| \"copy\"\n\t\| \"documentation\"\n\t\| \"exclamation-circle\"\n\t\| \"external-link\"\n\t\| \"flag\"\n\t\| \"folder\"\n\t\| \"font\"\n\t\| \"globe\"\n\t\| \"hdd\"\n\t\| \"key\"\n\t\| \"life-ring\"\n\t\| \"linker\"\n\t\| \"lock\"\n\t\| \"magic\"\n\t\| \"maximize\"\n\t\| \"minimize\"\n\t\| \"moon\"\n\t\| \"paint-roller\"\n\t\| \"pencil\"\n\t\| \"plus\"\n\t\| \"question-circle\"\n\t\| \"search\"\n\t\| \"sun\"\n\t\| \"times\"\n\t\| \"toggle-off\"\n\t\| \"toggle-on\"\n\t\| \"toolbar\"\n\t\| \"tools\"\n\t\| \"trash\"\n\t\| \"upload\"\n\t\| \"window\";\n\ntype IconComponents = {\n\t[key in FinsembleIconType]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n};\n\nconst icons: IconComponents = {\n\talwaysOnTop: AlwaysOnTopIcon,\n\tcaret: Caret,\n\tcheck: CheckIcon,\n\t\"check-square\": CheckSquare,\n\t\"chevron-left\": ChevronLeftIcon,\n\t\"chevron-right\": ChevronRightIcon,\n\tclose: CloseIcon,\n\t\"code-block\": CodeBlockIcon,\n\tcopy: CopyIcon,\n\tdocumentation: DocumentationIcon,\n\t\"exclamation-circle\": ExclaimationCircleIcon,\n\t\"external-link\": ExternalLinkIcon,\n\tflag: FlagIcon,\n\tfolder: FolderIcon,\n\tfont: FontIcon,\n\tglobe: GlobeIcon,\n\thdd: HDDIcon,\n\tkey: KeyIcon,\n\t\"life-ring\": LifeRingIcon,\n\tlinker: LinkerIcon,\n\tlock: LockIcon,\n\tmagic: MagicIcon,\n\tmaximize: MaximizeIcon,\n\tminimize: MinimizeIcon,\n\tmoon: MoonIcon,\n\t\"paint-roller\": PaintRollerIcon,\n\tpencil: PencilIcon,\n\tplus: PlusIcon,\n\t\"question-circle\": QuestionCircleIcon,\n\tsearch: SearchIcon,\n\tsun: SunIcon,\n\ttimes: TimesIcon,\n\t\"toggle-off\": ToggleOffIcon,\n\t\"toggle-on\": ToggleOnIcon,\n\ttoolbar: ToolbarIcon,\n\ttools: ToolsIcon,\n\ttrash: TrashIcon,\n\tupload: UploadIcon,\n\twindow: WindowIcon,\n};\n\nexport type FinsembleIconProps = {\n\ticon: FinsembleIconType;\n\tclassName?: string;\n\tonClick?: (e: React.MouseEvent) => void;\n\tlabel?: string;\n};\n\nexport const FinsembleIcon = (props: FinsembleIconProps) => {\n\tconst Icon = icons[props.icon];\n\n\treturn (\n\t\t<span\n\t\t\tclassName={[\"finsemble-icon\", `finsemble-icon-${props.icon}`, props.className \|\| \"\"].join(\" \")}\n\t\t\trole=\"img\"\n\t\t\taria-label={props.label ?? `${props.icon} icon`}\n\t\t\tonClick={(e) => props.onClick && props.onClick(e)}\n\t\t>\n\t\t\t{Icon && <Icon></Icon>}\n\t\t</span>\n\t);\n};\n"]}

package/react/components/common/FinsembleLink.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FinsembleLinkProps {
+    url: string;
+    text: string;
+}
+export declare const FinsembleLink: React.FC<FinsembleLinkProps>;

package/react/components/common/FinsembleLink.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+const openLink = (url) => {
+    FSBL.Clients.LauncherClient.spawn("", {
+        url,
+        addToWorkspace: false,
+    }, () => { });
+};
+export const FinsembleLink = ({ url, text }) => (React.createElement("a", { href: "", onClick: (e) => {
+        e.preventDefault();
+        openLink(url);
+    } }, text));
+//# sourceMappingURL=FinsembleLink.js.map

package/react/components/common/FinsembleLink.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FinsembleLink.js","sourceRoot":"","sources":["../../../src/components/common/FinsembleLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,CAChC,EAAE,EACF;QACC,GAAG;QACH,cAAc,EAAE,KAAK;KACrB,EACD,GAAG,EAAE,GAAE,CAAC,CACR,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC7E,2BACC,IAAI,EAAC,EAAE,EACP,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC;IACf,CAAC,IAEA,IAAI,CACF,CACJ,CAAC","sourcesContent":["import React from \"react\";\n\nexport interface FinsembleLinkProps {\n\turl: string;\n\ttext: string;\n}\n\nconst openLink = (url: string) => {\n\tFSBL.Clients.LauncherClient.spawn(\n\t\t\"\",\n\t\t{\n\t\t\turl,\n\t\t\taddToWorkspace: false,\n\t\t},\n\t\t() => {}\n\t);\n};\n\nexport const FinsembleLink: React.FC<FinsembleLinkProps> = ({ url, text }) => (\n\t<a\n\t\thref=\"\"\n\t\tonClick={(e) => {\n\t\t\te.preventDefault();\n\t\t\topenLink(url);\n\t\t}}\n\t>\n\t\t{text}\n\t</a>\n);\n"]}

package/react/components/common/InputTable.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 /// <reference types="react" />
 export declare type InputTableProps = {
     tableHeaders: (string | JSX.Element)[];
-    onUpdate: (data: string[][]) => void;
-    startingData?: (string | undefined)[][];
+    setData: (data: string[][]) => void;
+    data: string[][];
 };
-export declare const InputTable: ({ tableHeaders, onUpdate, startingData }: InputTableProps) => JSX.Element;
+export declare const InputTable: ({ tableHeaders, setData, data }: InputTableProps) => JSX.Element;

package/react/components/common/InputTable.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * Copyright 2017 - 2020 by ChartIQ, Inc.
  * All rights reserved.
  */
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import { ButtonIcon } from "./ButtonIcon";
 const isLastRowEmpty = (arr) => {
     const lastRow = arr[arr.length - 1];
@@ -14,24 +14,24 @@ const isLastRowEmpty = (arr) => {
 };
 const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
 const emptyRow = (colCount) => Array(colCount).fill("").slice(0);
-export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
-    const [data, setData] = useState(startingData !== null && startingData !== void 0 ? startingData : [emptyRow(tableHeaders.length)]);
+export const InputTable = ({ tableHeaders, setData, data }) => {
     const rowCount = data.length;
-    const doSetData = (newData) => {
-        setData(newData);
-        onUpdate(newData);
-    };
     const addRow = () => {
-        doSetData(data.concat([emptyRow(tableHeaders.length)]));
+        setData(data.concat([emptyRow(tableHeaders.length)]));
     };
     const deleteRow = (rowIndex) => {
         const newData = data.splice(0);
         newData.splice(rowIndex, 1);
-        doSetData(newData);
+        setData(newData);
     };
-    if (rowCount === 0 || !isLastRowEmpty(data)) {
-        addRow();
-    }
+    useEffect(() => {
+        if (data.length === 0) {
+            setData([emptyRow(tableHeaders.length)]);
+        }
+        if (!isLastRowEmpty(data)) {
+            addRow();
+        }
+    }, [data]);
     return (React.createElement("table", { className: "inputTable" },
         React.createElement("thead", null,
             React.createElement("tr", null, tableHeaders.map((th, index) => (React.createElement("th", { scope: "col", key: `th-${index}` }, th))))),
@@ -40,7 +40,7 @@ export const InputTable = ({ tableHeaders, onUpdate, startingData }) => {
                 React.createElement("input", { type: "text", id: `input-${rowNumber}-${colNumber}`, value: td, onChange: (e) => {
                         const newData = deepCopy(data);
                         newData[rowNumber][colNumber] = e.target.value;
-                        doSetData(newData);
+                        setData(newData);
                     } })))),
             rowNumber < rowCount - 1 && (React.createElement("td", null,
                 React.createElement(ButtonIcon, { icon: "times", text: "Remove row", onClick: () => {

package/react/components/common/InputTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,~~QAAQ~~,EAAE,MAAM,OAAO,CAAC;~~AACxC~~,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,MAAM,cAAc,GAAG,CAAC,GAAe,EAAE,EAAE;IAC1C,MAAM,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;KACZ;IAED,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC9D,OAAO,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/D,MAAM,QAAQ,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AASzE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,~~QAAQ~~,EAAE,~~YAAY~~,EAAmB,EAAE,EAAE;~~IACvF~~,MAAM,~~CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,~~QAAQ,~~CAAa,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,QAAQ,~~GAAG,IAAI,CAAC,MAAM,CAAC;IAE7B,MAAM,~~SAAS,GAAG,CAAC,OAAmB,EAAE,EAAE;QACzC,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,~~MAAM,~~MAAM,~~GAAG,GAAG,EAAE;QACnB,~~SAAS~~,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;~~IACzD~~,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/B,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC5B,~~SAAS~~,CAAC,OAAO,CAAC,CAAC;~~IACpB~~,CAAC,CAAC;IAEF,IAAI,~~QAAQ~~,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;~~QAC5C~~,MAAM,EAAE,CAAC;~~KACT~~;~~IAED~~,OAAO,CACN,+BAAO,SAAS,EAAC,YAAY;QAC5B;YACC,gCACE,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,4BAAI,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,MAAM,KAAK,EAAE,IAChC,EAAE,CACC,CACL,CAAC,CACE,CACE;QACR,mCACE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,CAC5B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACpB,4BAAI,GAAG,EAAE,MAAM,SAAS,EAAE;YACxB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,MAAM,SAAS,IAAI,SAAS,EAAE;gBACtC,+BACC,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,SAAS,SAAS,IAAI,SAAS,EAAE,EACrC,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;wBAC/B,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wBAC/C,~~SAAS~~,CAAC,OAAO,CAAC,CAAC;~~oBACpB~~,CAAC,GACA,CACE,CACL,CAAC;YACD,SAAS,GAAG,QAAQ,GAAG,CAAC,IAAI,CAC5B;gBACC,oBAAC,UAAU,IACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,OAAO,EAAE,GAAG,EAAE;wBACb,SAAS,CAAC,SAAS,CAAC,CAAC;oBACtB,CAAC,GACA,CACE,CACL,CACG,CACL,CAAC,CAAC,CAAC,IAAI,CACR,CACM,CACD,CACR,CAAC;AACH,CAAC,CAAC","sourcesContent":["/!\n Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n /\n\nimport React, { ~~useState~~ } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string \| JSX.Element)[];\n\~~tonUpdate~~: (data: string[][]) => void;\n\~~tstartingData?:~~ (string ~~\| undefined)~~[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/*\n A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string\|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [~~startingData~~] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, ~~onUpdate~~, ~~startingData~~ }: InputTableProps) => {\n\tconst ~~[data, setData] = useState<string[][]>(startingData ?? [emptyRow(tableHeaders.length)]);\n\tconst~~ rowCount = data.length;\n\n\tconst ~~doSetData~~ = (~~newData: string[][]~~) => {\n\t\tsetData(~~newData);\n\t\tonUpdate(newData);\n\t};\n\n\tconst addRow = () => {\n\t\tdoSetData(~~data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\~~tdoSetData~~(newData);\n\t};\n\n\tif (~~rowCount~~ === 0 \|\| !isLastRowEmpty(data)) {\n\t\taddRow();\n\t}\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\~~tdoSetData~~(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}
1	+ {"version":3,"file":"InputTable.js","sourceRoot":"","sources":["../../../src/components/common/InputTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n Copyright 2017 - 2020 by ChartIQ, Inc.\n * All rights reserved.\n /\n\nimport React, { useEffect } from \"react\";\nimport { ButtonIcon } from \"./ButtonIcon\";\n\nexport type InputTableProps = {\n\ttableHeaders: (string \| JSX.Element)[];\n\tsetData: (data: string[][]) => void;\n\tdata: string[][];\n};\n\nconst isLastRowEmpty = (arr: String[][]) => {\n\tconst lastRow = arr[arr.length - 1];\n\tif (!Array.isArray(lastRow)) {\n\t\treturn true;\n\t}\n\n\tconst nonEmptyCells = lastRow.filter((str) => str.length > 0);\n\treturn nonEmptyCells.length === 0;\n};\n\nconst deepCopy = (obj: any) => JSON.parse(JSON.stringify(obj));\nconst emptyRow = (colCount: number) => Array(colCount).fill(\"\").slice(0);\n\n/*\n A table full on input fields. It auto-grows as users use it, and it provides \"Remove row\" functionality.\n * The number of columns in the table is determined by the number of table headers provided, which are required.\n * @param {string\|JSX} tableHeaders The headers at the top of each column\n * @param {Function} onUpdate Callback providing the data in the table. This is called onInput for any input element in the table.\n * @param {string[][]} [data] Initial data for the table\n */\nexport const InputTable = ({ tableHeaders, setData, data }: InputTableProps) => {\n\tconst rowCount = data.length;\n\n\tconst addRow = () => {\n\t\tsetData(data.concat([emptyRow(tableHeaders.length)]));\n\t};\n\n\tconst deleteRow = (rowIndex: number) => {\n\t\tconst newData = data.splice(0);\n\t\tnewData.splice(rowIndex, 1);\n\t\tsetData(newData);\n\t};\n\n\tuseEffect(() => {\n\t\tif (data.length === 0) {\n\t\t\tsetData([emptyRow(tableHeaders.length)]);\n\t\t}\n\t\tif (!isLastRowEmpty(data)) {\n\t\t\taddRow();\n\t\t}\n\t}, [data]);\n\n\treturn (\n\t\t<table className=\"inputTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t{tableHeaders.map((th, index) => (\n\t\t\t\t\t\t<th scope=\"col\" key={`th-${index}`}>\n\t\t\t\t\t\t\t{th}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t))}\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t{data.map((row, rowNumber) =>\n\t\t\t\t\tArray.isArray(row) ? (\n\t\t\t\t\t\t<tr key={`tr-${rowNumber}`}>\n\t\t\t\t\t\t\t{row.map((td, colNumber) => (\n\t\t\t\t\t\t\t\t<td key={`td-${rowNumber}-${colNumber}`}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tid={`input-${rowNumber}-${colNumber}`}\n\t\t\t\t\t\t\t\t\t\tvalue={td}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tconst newData = deepCopy(data);\n\t\t\t\t\t\t\t\t\t\t\tnewData[rowNumber][colNumber] = e.target.value;\n\t\t\t\t\t\t\t\t\t\t\tsetData(newData);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{rowNumber < rowCount - 1 && (\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"times\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Remove row\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tdeleteRow(rowNumber);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t) : null\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>\n\t);\n};\n"]}

package/react/components/common/css/application-edit-page.css CHANGED Viewed

@@ -8,15 +8,23 @@
 	height: 100%;
 }
-.app-edit-actions {
+.app-edit-actions,
+.app-edit-actions-right {
 	display: flex;
-	justify-content: space-between;
 	margin-top: 0.65em;
 	margin-bottom: 0.65em;
 	margin-left: 22px;
 	margin-right: 3em;
 }
+.app-edit-actions {
+	justify-content: space-between;
+}
+.app-edit-actions-right {
+	justify-content: flex-end;
+}
 .app-actions-right-wrapper {
 	width: 125px;
 	display: flex;

package/react/components/common/helpers.js CHANGED Viewed

@@ -24,8 +24,13 @@ export const initFSBL = (windowObject) => {
         addEventListener: (name, callback) => {
             callback();
         },
+        getFSBLInfo: () => new Promise((resolve) => {
+            resolve({
+                FSBLVersion: "1.0.0",
+            });
+        }),
         Clients: {
-            SmartDesktopClient: {
+            TmpSmartDesktopClient: {
                 checkValidURL(url) {
                     if (url.length === 0) {
                         return true;

package/react/components/common/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/common/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,CAAC,MAAM,cAAc,GAAsB,CAAC,UAAgB,EAAE,EAAE,CACrE,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IACvB,OAAO,CAAC;QACP,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,UAAU,CAAC,IAAI;KACrB,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,YAAkB,EAAE,EAAE;IAE9C,MAAM,WAAW,GAAQ,MAAM,CAAC;IAEhC,IAAI,CAAC,YAAY,EAAE;QAClB,YAAY,GAAG,WAAW,CAAC,MAAM,GAAG,EAAS,CAAC;KAC9C;SAAM;QACN,YAAY,GAAG,MAAM,CAAC;QAEtB,UAAU,CAAC,GAAG,EAAE;YACf,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAEnD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAE1C,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;KACH;IAED,WAAW,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,GAAG;QACtC,gBAAgB,EAAE,CAAC,IAAY,EAAE,QAAoB,EAAE,EAAE;YACxD,QAAQ,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,EAAE;YACR,~~kBAAkB~~,EAAE;~~gBACnB~~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","sourcesContent":["import React from \"react\";\nimport { FileInputUploadCb } from \"./FileInput\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nimport { SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\nimport { Provider } from \"react-redux\";\nimport { createStore } from \"../../store\";\n\nexport const uploadFunction: FileInputUploadCb = (fileObject: File) =>\n\tnew Promise((resolve) => {\n\t\tresolve({\n\t\t\terr: \"\",\n\t\t\tpath: fileObject.name,\n\t\t});\n\t});\n\nexport const initFSBL = (windowObject?: any) => {\n\t// Poor man's global that can take any appendage\n\tconst globalAsAny: any = global;\n\n\tif (!windowObject) {\n\t\twindowObject = globalAsAny.window = {} as any;\n\t} else {\n\t\twindowObject = window;\n\n\t\tsetTimeout(() => {\n\t\t\tconst event = window.document.createEvent(\"Event\");\n\n\t\t\tevent?.initEvent(\"FSBLReady\", true, true);\n\n\t\t\twindow.dispatchEvent(event);\n\t\t});\n\t}\n\n\tglobalAsAny.FSBL = windowObject.FSBL = {\n\t\taddEventListener: (name: String, callback: () => void) => {\n\t\t\tcallback();\n\t\t},\n\t\tClients: {\n\t\t\~~tSmartDesktopClient~~: {\n\t\t\t\tcheckValidURL(url: string) {\n\t\t\t\t\tif (url.length === 0) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn /^https?:\\/\\/[^\\s]+$/.test(url);\n\t\t\t\t},\n\t\t\t\tcheckValidProjectName(name: string) {\n\t\t\t\t\treturn /^[a-zA-Z0-9 \\-_.]{1,}$/.test(name) && /[a-zA-Z0-9]{1,}/.test(name);\n\t\t\t\t},\n\t\t\t} as unknown,\n\t\t\tConfigClient: {\n\t\t\t\tsetPreference: () => {},\n\t\t\t\tgetValues: () => {},\n\t\t\t\tgetPreferences: () => {},\n\t\t\t},\n\t\t\tDialogManager: {\n\t\t\t\tspawnDialog: (obj1: any) => {\n\t\t\t\t\tconsole.table(obj1);\n\t\t\t\t},\n\t\t\t\tregisterDialogCallback: () => {},\n\t\t\t\trespondToOpener: () => {},\n\t\t\t},\n\t\t\tLauncherClient: {\n\t\t\t\tshowWindow: () => {},\n\t\t\t},\n\t\t\tLogger: {\n\t\t\t\tlog: () => {},\n\t\t\t\terror: () => {},\n\t\t\t\tsystem: {\n\t\t\t\t\tdebug: () => {},\n\t\t\t\t\tlog: () => {},\n\t\t\t\t\terror: () => {},\n\t\t\t\t\tverbose: () => {},\n\t\t\t\t\tdeprecated: () => {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tRouterClient: {\n\t\t\t\ttransmit: () => {},\n\t\t\t\taddListener: () => {},\n\t\t\t\tsubscribe: () => {},\n\t\t\t},\n\t\t\tStorageClient: {\n\t\t\t\tsave: () => {},\n\t\t\t\tclearCache: () => {},\n\t\t\t},\n\t\t\tWindowClient: {\n\t\t\t\tfitToDOM: () => {},\n\t\t\t},\n\t\t\tWorkspaceClient: {\n\t\t\t\tbringWindowsToFront: () => {},\n\t\t\t\tminimizeAll: () => {},\n\t\t\t\tactiveWorkspace: {\n\t\t\t\t\tname: \" \",\n\t\t\t\t},\n\t\t\t\tgetWorkspaceDefinition: (obj: Object, cb: Function) => {\n\t\t\t\t\tcb(null, null);\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonShutdown: () => {},\n\t\tSystem: {\n\t\t\tgetSDServerInfo: () =>\n\t\t\t\tnew Promise((resolve) => {\n\t\t\t\t\tresolve({} as SDServerInfo);\n\t\t\t\t}),\n\t\t},\n\t\tSystemManagerClient: {\n\t\t\tpublishCheckpointState: () => {},\n\t\t},\n\t} as any;\n\n\tglobalAsAny.FSBL.Clients = {\n\t\t...globalAsAny.FSBL.Clients,\n\t\tWindowClient: {\n\t\t\tfitToDOM: () => {},\n\t\t} as any,\n\t};\n\n\tglobalAsAny.finsembleWindow = windowObject.finsembleWindow = {\n\t\tsetAlwaysOnTop: () => {},\n\t\taddEventListener: () => {},\n\t\tremoveEventListener: () => {},\n\t};\n};\n\nexport function createStory<T>(Component: Function, args: T) {\n\tconst template: Story<T> = (props: T) => {\n\t\tinitFSBL(window);\n\n\t\treturn (\n\t\t\t<Provider store={createStore()}>\n\t\t\t\t<Component {...{ ...args, ...props }} />\n\t\t\t</Provider>\n\t\t);\n\t};\n\n\ttemplate.args = args;\n\n\treturn template;\n}\n"]}
1	+ {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/common/helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { FileInputUploadCb } from \"./FileInput\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nimport { SDServerInfo } from \"../../types/smartDesktopDesignerTypes\";\nimport { Provider } from \"react-redux\";\nimport { createStore } from \"../../store\";\n\nexport const uploadFunction: FileInputUploadCb = (fileObject: File) =>\n\tnew Promise((resolve) => {\n\t\tresolve({\n\t\t\terr: \"\",\n\t\t\tpath: fileObject.name,\n\t\t});\n\t});\n\nexport const initFSBL = (windowObject?: any) => {\n\t// Poor man's global that can take any appendage\n\tconst globalAsAny: any = global;\n\n\tif (!windowObject) {\n\t\twindowObject = globalAsAny.window = {} as any;\n\t} else {\n\t\twindowObject = window;\n\n\t\tsetTimeout(() => {\n\t\t\tconst event = window.document.createEvent(\"Event\");\n\n\t\t\tevent?.initEvent(\"FSBLReady\", true, true);\n\n\t\t\twindow.dispatchEvent(event);\n\t\t});\n\t}\n\n\tglobalAsAny.FSBL = windowObject.FSBL = {\n\t\taddEventListener: (name: String, callback: () => void) => {\n\t\t\tcallback();\n\t\t},\n\t\tgetFSBLInfo: () =>\n\t\t\tnew Promise((resolve) => {\n\t\t\t\tresolve({\n\t\t\t\t\tFSBLVersion: \"1.0.0\",\n\t\t\t\t});\n\t\t\t}),\n\t\tClients: {\n\t\t\tTmpSmartDesktopClient: {\n\t\t\t\tcheckValidURL(url: string) {\n\t\t\t\t\tif (url.length === 0) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn /^https?:\\/\\/[^\\s]+$/.test(url);\n\t\t\t\t},\n\t\t\t\tcheckValidProjectName(name: string) {\n\t\t\t\t\treturn /^[a-zA-Z0-9 \\-_.]{1,}$/.test(name) && /[a-zA-Z0-9]{1,}/.test(name);\n\t\t\t\t},\n\t\t\t} as unknown,\n\t\t\tConfigClient: {\n\t\t\t\tsetPreference: () => {},\n\t\t\t\tgetValues: () => {},\n\t\t\t\tgetPreferences: () => {},\n\t\t\t},\n\t\t\tDialogManager: {\n\t\t\t\tspawnDialog: (obj1: any) => {\n\t\t\t\t\tconsole.table(obj1);\n\t\t\t\t},\n\t\t\t\tregisterDialogCallback: () => {},\n\t\t\t\trespondToOpener: () => {},\n\t\t\t},\n\t\t\tLauncherClient: {\n\t\t\t\tshowWindow: () => {},\n\t\t\t},\n\t\t\tLogger: {\n\t\t\t\tlog: () => {},\n\t\t\t\terror: () => {},\n\t\t\t\tsystem: {\n\t\t\t\t\tdebug: () => {},\n\t\t\t\t\tlog: () => {},\n\t\t\t\t\terror: () => {},\n\t\t\t\t\tverbose: () => {},\n\t\t\t\t\tdeprecated: () => {},\n\t\t\t\t},\n\t\t\t},\n\t\t\tRouterClient: {\n\t\t\t\ttransmit: () => {},\n\t\t\t\taddListener: () => {},\n\t\t\t\tsubscribe: () => {},\n\t\t\t},\n\t\t\tStorageClient: {\n\t\t\t\tsave: () => {},\n\t\t\t\tclearCache: () => {},\n\t\t\t},\n\t\t\tWindowClient: {\n\t\t\t\tfitToDOM: () => {},\n\t\t\t},\n\t\t\tWorkspaceClient: {\n\t\t\t\tbringWindowsToFront: () => {},\n\t\t\t\tminimizeAll: () => {},\n\t\t\t\tactiveWorkspace: {\n\t\t\t\t\tname: \" \",\n\t\t\t\t},\n\t\t\t\tgetWorkspaceDefinition: (obj: Object, cb: Function) => {\n\t\t\t\t\tcb(null, null);\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonShutdown: () => {},\n\t\tSystem: {\n\t\t\tgetSDServerInfo: () =>\n\t\t\t\tnew Promise((resolve) => {\n\t\t\t\t\tresolve({} as SDServerInfo);\n\t\t\t\t}),\n\t\t},\n\t\tSystemManagerClient: {\n\t\t\tpublishCheckpointState: () => {},\n\t\t},\n\t} as any;\n\n\tglobalAsAny.FSBL.Clients = {\n\t\t...globalAsAny.FSBL.Clients,\n\t\tWindowClient: {\n\t\t\tfitToDOM: () => {},\n\t\t} as any,\n\t};\n\n\tglobalAsAny.finsembleWindow = windowObject.finsembleWindow = {\n\t\tsetAlwaysOnTop: () => {},\n\t\taddEventListener: () => {},\n\t\tremoveEventListener: () => {},\n\t};\n};\n\nexport function createStory<T>(Component: Function, args: T) {\n\tconst template: Story<T> = (props: T) => {\n\t\tinitFSBL(window);\n\n\t\treturn (\n\t\t\t<Provider store={createStore()}>\n\t\t\t\t<Component {...{ ...args, ...props }} />\n\t\t\t</Provider>\n\t\t);\n\t};\n\n\ttemplate.args = args;\n\n\treturn template;\n}\n"]}

package/react/components/common/stories/ColorPicker.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ColorPicker } from "../ColorPicker";
 import "../../../assets/css/finsemble.css";
 import "../css/styles.css";
@@ -6,26 +6,21 @@ export default {
     title: "Common/ColorPicker",
     component: ColorPicker,
 };
-const Template = (args) => React.createElement(ColorPicker, Object.assign({}, args));
+const Template = (args) => {
+    var _a;
+    const [startColor, setColor] = useState(args.startColor);
+    return React.createElement(ColorPicker, { id: args.id, startColor: startColor, updateColor: (_a = args.updateColor) !== null && _a !== void 0 ? _a : setColor });
+};
 export const EmptyField = Template.bind({});
 EmptyField.args = {
     startColor: "",
-    updateColor: (newColor) => {
-        console.log(newColor);
-    },
 };
 export const ValidColor = Template.bind({});
 ValidColor.args = {
     startColor: "#FF0000",
-    updateColor: (newColor) => {
-        console.log(newColor);
-    },
 };
 export const InvalidColor = Template.bind({});
 InvalidColor.args = {
     startColor: "#ZZZZZZ",
-    updateColor: (newColor) => {
-        console.log(newColor);
-    },
 };
 //# sourceMappingURL=ColorPicker.stories.js.map

package/react/components/common/stories/ColorPicker.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAC1B~~,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAG3B,eAAe;IACd,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,QAAQ,GAA4B,CAAC,IAAsB,EAAE,EAAE,CAAC,~~oBAAC~~,~~WAAW~~,~~oBAAK~~,~~IAAI,EAAI,~~CAAC~~;AAEhG~~,~~MAAM,CAAC,MAAM,UAAU,~~GAAG,QAAQ,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,CAAC;~~AAC5C~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~GAAG;IACjB~~,~~UAAU,~~EAAE,EAAE~~;IACd~~,~~WAAW~~,EAAE,~~CAAC~~,~~QAAQ~~,EAAE,EAAE~~;QACzB~~,~~OAAO~~,~~CAAC~~,~~GAAG~~,CAAC,QAAQ,~~CAAC~~,CAAC;~~IACvB~~,CAAC~~;CACD~~,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,UAAU,EAAE,~~SAAS~~;~~IACrB~~,~~WAAW~~,~~EAAE~~,CAAC,~~QAAQ~~,~~EAAE~~,~~EAAE;QACzB~~,~~OAAO~~,CAAC,~~GAAG~~,CAAC,~~QAAQ~~,CAAC,CAAC;~~IACvB~~,CAAC;~~CACD~~,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IACnB,UAAU,EAAE,SAAS;~~IACrB~~,~~WAAW,EAAE,~~CAAC~~,QAAQ,EAAE,EAAE;QACzB,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC;CACD,CAAC~~","sourcesContent":["import React from \"react\";\nimport { ColorPicker, ColorPickerProps } from \"../ColorPicker\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nexport default {\n\ttitle: \"Common/ColorPicker\",\n\tcomponent: ColorPicker,\n};\n\nconst Template: Story<ColorPickerProps> = (args: ColorPickerProps) => <ColorPicker {~~...~~args} />;\n\nexport const EmptyField = Template.bind({});\nEmptyField.args = {\n\tstartColor: \"\",\n~~\tupdateColor: (newColor) => {\n\t\tconsole.log(newColor);\n\t~~}~~,\n}~~;\n\nexport const ValidColor = Template.bind({});\nValidColor.args = {\n\tstartColor: \"#FF0000\",\n~~\tupdateColor: (newColor) => {\n\t\tconsole.log(newColor);\n\t~~}~~,\n}~~;\n\nexport const InvalidColor = Template.bind({});\nInvalidColor.args = {\n\tstartColor: \"#ZZZZZZ\",\n~~\tupdateColor: (newColor) => {\n\t\tconsole.log(newColor);\n\t~~}~~,\n}~~;\n"]}
1	+ {"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAG3B,eAAe;IACd,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,QAAQ,GAA4B,CAAC,IAAsB,EAAE,EAAE;;IAIpE,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzD,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,GAAI,CAAC;AACxG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,UAAU,EAAE,EAAE;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACjB,UAAU,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IACnB,UAAU,EAAE,SAAS;CACrB,CAAC","sourcesContent":["import React, { useState } from \"react\";\nimport { ColorPicker, ColorPickerProps } from \"../ColorPicker\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport { Story } from \"@storybook/react/types-6-0\";\n\nexport default {\n\ttitle: \"Common/ColorPicker\",\n\tcomponent: ColorPicker,\n};\n\nconst Template: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n\t// The colorpicker was changed to not update its internal state\n\t// but only fire the event and instead rely on props, so for the purpose of unit testing\n\t// and storybook, let's define a mock component that synchonizes them\n\tconst [startColor, setColor] = useState(args.startColor);\n\treturn <ColorPicker id={args.id} startColor={startColor} updateColor={args.updateColor ?? setColor} />;\n};\n\nexport const EmptyField = Template.bind({});\nEmptyField.args = {\n\tstartColor: \"\",\n};\n\nexport const ValidColor = Template.bind({});\nValidColor.args = {\n\tstartColor: \"#FF0000\",\n};\n\nexport const InvalidColor = Template.bind({});\nInvalidColor.args = {\n\tstartColor: \"#ZZZZZZ\",\n};\n"]}

package/react/components/common/stories/InputTable.stories.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
 /// <reference types="react" />
+import { Story } from "@storybook/react/types-6-0";
 import { InputTableProps } from "../InputTable";
 import "../../../assets/css/finsemble.css";
 import "../css/styles.css";
 import "../css/tooltip.css";
 declare const _default: {
     title: string;
-    component: ({ tableHeaders, onUpdate, startingData }: InputTableProps) => JSX.Element;
+    component: ({ tableHeaders, setData, data }: InputTableProps) => JSX.Element;
 };
 export default _default;
-export declare const Basic: import("@storybook/react").Story<InputTableProps>;
-export declare const StartingData: import("@storybook/react").Story<InputTableProps>;
+export declare const Basic: Story<InputTableProps>;
+export declare const StartingData: Story<InputTableProps>;

package/react/components/common/stories/InputTable.stories.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import React from "react";
-import { createStory } from "../helpers";
 import { Tooltip } from "../Tooltip";
 import { InputTable } from "../InputTable";
 import { action } from "@storybook/addon-actions";
@@ -10,7 +9,16 @@ export default {
     title: "Common/InputTable",
     component: InputTable,
 };
-export const Basic = createStory(InputTable, {
+const Template = (args) => {
+    const [data, setData] = React.useState(args.data);
+    const doSetData = (updateData) => {
+        args.setData(updateData);
+        setData(updateData);
+    };
+    return React.createElement(InputTable, { tableHeaders: args.tableHeaders, data: data, setData: doSetData });
+};
+export const Basic = Template.bind({});
+Basic.args = {
     tableHeaders: [
         React.createElement(React.Fragment, null,
             "Contexts",
@@ -22,14 +30,16 @@ export const Basic = createStory(InputTable, {
             "Name",
             React.createElement(Tooltip, null, "Tooltip")),
     ],
-    onUpdate: action("update"),
-});
-export const StartingData = createStory(InputTable, {
+    data: [],
+    setData: action("update"),
+};
+export const StartingData = Template.bind({});
+StartingData.args = {
     tableHeaders: ["Letter", "Number"],
-    startingData: [
+    data: [
         ["A", "1"],
         ["B", "2"],
     ],
-    onUpdate: action("update"),
-});
+    setData: action("update"),
+};
 //# sourceMappingURL=InputTable.stories.js.map

package/react/components/common/stories/InputTable.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputTable.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/InputTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAC1B~~,OAAO,EAAE,~~WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,~~OAAO,EAAE,~~OAAO,EAAE,~~MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACd,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,~~WAAW~~,~~CAAkB~~,UAAU,EAAE;~~IAC7D~~,YAAY,EAAE;QACb;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;QACH;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;QACH;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;KACH;IACD,~~QAAQ~~,EAAE,MAAM,CAAC,QAAQ,CAAC;~~CAC1B~~,CAAC~~,CAAC~~;~~AAEH~~,MAAM,CAAC,MAAM,YAAY,GAAG,~~WAAW~~,~~CAAkB~~,~~UAAU~~,EAAE;~~IACpE~~,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAClC,~~YAAY~~,EAAE;~~QACb~~,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,GAAG,EAAE,GAAG,CAAC;KACV;IACD,~~QAAQ~~,EAAE,MAAM,CAAC,QAAQ,CAAC;~~CAC1B~~,CAAC~~,CAAC~~","sourcesContent":["import React from \"react\";\nimport { ~~createStory~~ } from \"~~../helpers~~\";\nimport { Tooltip } from \"../Tooltip\";\nimport { InputTable, InputTableProps } from \"../InputTable\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport \"../css/tooltip.css\";\n\nexport default {\n\ttitle: \"Common/InputTable\",\n\tcomponent: InputTable,\n};\n\nexport const Basic = ~~createStory<InputTableProps>~~(~~InputTable,~~ {\n\ttableHeaders: [\n\t\t<>\n\t\t\tContexts\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t\t<>\n\t\t\tDisplay name\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t\t<>\n\t\t\tName\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t],\n\~~tonUpdate~~: action(\"update\"),\n});\n\nexport const StartingData = ~~createStory<InputTableProps>~~(~~InputTable,~~ {\n\ttableHeaders: [\"Letter\", \"Number\"],\n\~~tstartingData~~: [\n\t\t[\"A\", \"1\"],\n\t\t[\"B\", \"2\"],\n\t],\n\~~tonUpdate~~: action(\"update\"),\n});\n"]}
1	+ {"version":3,"file":"InputTable.stories.js","sourceRoot":"","sources":["../../../../src/components/common/stories/InputTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACd,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,QAAQ,GAA2B,CAAC,IAAI,EAAE,EAAE;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,CAAC,UAAsB,EAAE,EAAE;QAC5C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACzB,OAAO,CAAC,UAAU,CAAC,CAAC;IACrB,CAAC,CAAC;IACF,OAAO,oBAAC,UAAU,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACZ,YAAY,EAAE;QACb;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;QACH;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;QACH;;YAEC,oBAAC,OAAO,kBAAkB,CACxB;KACH;IACD,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IACnB,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAClC,IAAI,EAAE;QACL,CAAC,GAAG,EAAE,GAAG,CAAC;QACV,CAAC,GAAG,EAAE,GAAG,CAAC;KACV;IACD,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC;CACzB,CAAC","sourcesContent":["import React from \"react\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { Tooltip } from \"../Tooltip\";\nimport { InputTable, InputTableProps } from \"../InputTable\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"../../../assets/css/finsemble.css\";\nimport \"../css/styles.css\";\nimport \"../css/tooltip.css\";\n\nexport default {\n\ttitle: \"Common/InputTable\",\n\tcomponent: InputTable,\n};\n\nconst Template: Story<InputTableProps> = (args) => {\n\tconst [data, setData] = React.useState(args.data);\n\tconst doSetData = (updateData: string[][]) => {\n\t\targs.setData(updateData);\n\t\tsetData(updateData);\n\t};\n\treturn <InputTable tableHeaders={args.tableHeaders} data={data} setData={doSetData} />;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n\ttableHeaders: [\n\t\t<>\n\t\t\tContexts\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t\t<>\n\t\t\tDisplay name\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t\t<>\n\t\t\tName\n\t\t\t<Tooltip>Tooltip</Tooltip>\n\t\t</>,\n\t],\n\tdata: [],\n\tsetData: action(\"update\"),\n};\n\nexport const StartingData = Template.bind({});\nStartingData.args = {\n\ttableHeaders: [\"Letter\", \"Number\"],\n\tdata: [\n\t\t[\"A\", \"1\"],\n\t\t[\"B\", \"2\"],\n\t],\n\tsetData: action(\"update\"),\n};\n"]}

package/react/components/common/tests/InputTable.spec.js CHANGED Viewed

@@ -93,7 +93,7 @@ describe("<InputTable/>", () => {
         expect(wrapper.find("input").at(2).props().value).to.equal("");
     });
     it("onUpdate is called after an input causes a new row to be added", () => {
-        const buttonSpy = sinon.spy(StartingData.args, "onUpdate");
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
         const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
         expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
             ["A", "1"],
@@ -123,7 +123,7 @@ describe("<InputTable/>", () => {
         expect(buttonSpy.getCall(3)).to.be.null;
     });
     it("onUpdate is called after an input is edited", () => {
-        const buttonSpy = sinon.spy(StartingData.args, "onUpdate");
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
         const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
         expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
             ["A", "1"],
@@ -147,7 +147,7 @@ describe("<InputTable/>", () => {
         expect(buttonSpy.getCall(2)).to.be.null;
     });
     it("onUpdate is called after a row is deleted", () => {
-        const buttonSpy = sinon.spy(StartingData.args, "onUpdate");
+        const buttonSpy = sinon.spy(StartingData.args, "setData");
         const wrapper = mount(React.createElement(StartingData, Object.assign({}, StartingData.args)));
         expect(buttonSpy.getCall(0).args[0]).to.deep.equal([
             ["A", "1"],