@finsemble/finsemble-ui 7.0.0 → 7.1.0-beta.2

package/react/assets/css/windowTitleBar.css

@@ -14,23 +14,39 @@
 
 .fsbl-drag-handle {
 	z-index: 2147483641;
+
 	/* use below with window scrollbar hack */
 	position: fixed;
+	/* stylelint-disable-next-line declaration-no-important */
 	top: 5px !important;
-	margin-top: 0px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-top: 0 !important;
+
 	/* use below without window scrollbar hack */
+
 	/* position: absolute; */
+
 	/* top: 0px!important; */
+
 	/* background-color: red; */
+
+	/* prevent dragging any data when move window */
+	user-select: none;
 }
 
 .fsbl-drag-handle-native-movement {
 	z-index: 2147483641;
+
 	/* use below with window scrollbar hack */
 	position: fixed;
+	/* stylelint-disable-next-line declaration-no-important */
 	top: 5px !important;
-	margin-top: 0px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-top: 0 !important;
 	-webkit-app-region: drag;
+
+	/* prevent dragging any data when move window */
+	user-select: none;
 }
 
 .fsbl-drag-handle.hidden {
@@ -45,10 +61,10 @@
 	padding-left: 80px; /* leave some space for a user to grab */
 }
 
-html:before,
-html:after,
-body:before,
-body:after {
+html::before,
+html::after,
+body::before,
+body::after {
 	content: "";
 	position: fixed;
 	display: block;
@@ -60,28 +76,28 @@ body:after {
 * The next few items give the border of windows
 * thickness so that the user can see them
 */
-html:before {
+html::before {
 	height: 1px;
 	left: 0;
 	right: 0;
 	top: 0;
 }
 
-html:after {
+html::after {
 	width: 1px;
 	top: 0;
 	right: 0;
 	bottom: 0;
 }
 
-body:before {
+body::before {
 	height: 1px;
 	right: 0;
 	bottom: 0;
 	left: 0;
 }
 
-body:after {
+body::after {
 	width: 1px;
 	top: 0;
 	bottom: 0;
@@ -142,7 +158,7 @@ html.desktop-active .fsbl-header-title[data-hover="true"] {
 .fsbl-header-left {
 	height: calc(100% - 5px); /* leave some space for the resize cursor */
 	margin-left: 2px;
-	left: 0px;
+	left: 0;
 	align-content: center;
 	align-items: center;
 	justify-content: flex-start;
@@ -158,7 +174,9 @@ html.desktop-active .fsbl-header-title[data-hover="true"] {
 	width: 80%;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+
 	--webkit-user-select: none;
+
 	user-select: none;
 	position: relative;
 	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
@@ -167,7 +185,7 @@ html.desktop-active .fsbl-header-title[data-hover="true"] {
 .fsbl-tabs-enabled .fsbl-header-center {
 	height: 100%;
 	width: 100%;
-	padding-bottom: 0px;
+	padding-bottom: 0;
 }
 
 html.desktop-active .fsbl-header-right {
@@ -204,7 +222,7 @@ html.desktop-active .fsbl-tab-region-drag-area {
 	color: var(--titleBar-inactive-font-color);
 	font-size: var(--titleBar-icon-font-size);
 	width: 10px;
-	padding: 0px 6px;
+	padding: 0 6px;
 	height: calc(100% + 1px);
 	margin-top: -3px;
 	display: flex;
@@ -212,6 +230,7 @@ html.desktop-active .fsbl-tab-region-drag-area {
 	justify-content: center;
 	transition: background 0.2s ease;
 	cursor: pointer;
+	/* stylelint-disable-next-line declaration-no-important */
 	box-sizing: content-box !important;
 }
 
@@ -223,7 +242,7 @@ html.desktop-active .fsbl-tab-region-drag-area {
 	color: var(--titlebar-icon-hover-color);
 }
 
-/* So it sits over the border*/
+/* So it sits over the border */
 .fsbl-icon.fsbl-close {
 	margin-right: -1px;
 }
@@ -237,7 +256,6 @@ html.desktop-active .fsbl-icon.fsbl-close[data-hover="true"] {
 }
 
 .fsbl-icon-highlighted {
-	-webkit-transition: background-color 300ms ease-in-out;
 	transition: background-color 300ms ease-in-out;
 	background-color: var(--titleBar-button-highlight-inactive-color);
 	border-radius: 25px;
@@ -255,7 +273,6 @@ html.desktop-active .fsbl-icon-highlighted {
 }
 
 .fsbl-ejector {
-	-webkit-transition: background-color 300ms ease-in-out;
 	transition: background-color 300ms ease-in-out;
 	background-color: var(--titleBar-button-highlight-active-color);
 }
@@ -284,6 +301,7 @@ html.desktop-active .fsbl-icon-highlighted {
 }
 
 .linker-group-accessible {
+	/* stylelint-disable-next-line declaration-no-important */
 	width: 1em !important;
 	padding-bottom: 4px;
 	margin-bottom: 4px;
@@ -307,7 +325,8 @@ html.desktop-active .fsbl-icon-highlighted {
 .fsbl-linker {
 	cursor: pointer;
 	display: flex;
-	/* So it sits over the border*/
+
+	/* So it sits over the border */
 	align-items: center;
 	justify-content: center;
 	align-content: center;
@@ -321,7 +340,8 @@ html.desktop-active .fsbl-icon-highlighted {
 .fsbl-share {
 	cursor: pointer;
 	display: flex;
-	/* So it sits over the border*/
+
+	/* So it sits over the border */
 	align-items: center;
 	justify-content: center;
 	align-content: center;
@@ -354,11 +374,11 @@ html.desktop-active .fsbl-icon-highlighted {
 	padding-bottom: 3px;
 }
 
-.ff-linker:before {
+.ff-linker::before {
 	padding-top: 3px;
 }
 
-.ff-share:before {
+.ff-share::before {
 	padding-top: 3px;
 }
 
@@ -409,6 +429,7 @@ html.desktop-active .fsbl-icon-highlighted {
 
 .tab-region-wrapper {
 	display: flex;
+	max-width: 90%;
 }
 
 /* When there are multiple tabs, no border for the last tab on the right side. */
@@ -432,6 +453,7 @@ html.desktop-active .fsbl-icon-highlighted {
 .fsbl-tab-editor {
 	position: relative;
 	z-index: 29999;
+	overflow: auto;
 }
 
 .fsbl-tab-title {
@@ -457,7 +479,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 
 .fsbl-tab-close {
 	font-size: 8px;
-	padding: 0px 10px;
+	padding: 0 10px;
 	visibility: hidden;
 	cursor: pointer;
 	height: 100%;
@@ -478,7 +500,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 }
 
 .fsbl-tab-logo {
-	margin: 0px 7px;
+	margin: 0 7px;
 	padding-top: 3px;
 	width: auto;
 	height: auto;
@@ -497,15 +519,16 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 .fsbl-tab .fsbl-tab-style {
 	position: relative;
 	height: 100%;
-	left: 0px;
+	left: 0;
 }
-.fsbl-tab-region-drag-area:before {
+
+.fsbl-tab-region-drag-area::before {
 	content: "a";
 	visibility: hidden;
 }
 
 /* Without content, the ghost-tab caused really strange sizing behaviors. */
-.ghost-tab:before {
+.ghost-tab::before {
 	content: "a";
 	visibility: hidden;
 }
@@ -518,7 +541,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 	opacity: 0.7;
 	position: relative;
 	height: 100%;
-	left: 0px;
+	left: 0;
 }
 
 /* Styles the zoom pop up */
@@ -537,8 +560,8 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 .fsbl-zoom-popup button {
 	width: unset;
 	font-size: unset;
-	padding: 1px 5px 1px 5px;
-	margin: 0px 2px 0px 2px;
+	padding: 1px 5px;
+	margin: 0 2px;
 }
 
 .fsbl-zoom-popup-text {
@@ -546,7 +569,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 }
 
 .fsbl-zoom-popup-title {
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 .fsbl-zoom-popup-heading {
@@ -555,65 +578,81 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 }
 
 /* Responsive Sizing */
+
 /* At 345px, the Drag-to-Share icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 345px) {
+@media screen and (min-width: 0) and (max-width: 345px) {
 	.fsbl-icon.ff-share {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.fsbl-tabs-multiple .fsbl-header-right {
 		padding-left: 70px; /* leave some space for a user to grab */
 	}
+
 	.fsbl-header-title {
 		max-width: 50%;
 	}
 }
 
 /* At 310px, the left section of the header will be removed. */
-@media screen and (min-width: 0px) and (max-width: 310px) {
+@media screen and (min-width: 0) and (max-width: 310px) {
 	.fsbl-header-left {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.fsbl-tabs-multiple .fsbl-header-right {
 		padding-left: 60px; /* leave some space for a user to grab */
 	}
 }
 
 /* At 280px, the docking icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 280px) {
+@media screen and (min-width: 0) and (max-width: 280px) {
 	.fsbl-icon.ff-detached,
 	.fsbl-icon.ff-attached {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.fsbl-tabs-multiple .fsbl-header-right {
 		padding-left: 50px; /* this will leave some space for window dragging */
 	}
 }
 
 /* At 245px, the maximize icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 245px) {
+@media screen and (min-width: 0) and (max-width: 245px) {
 	.fsbl-icon.fsbl-maximize {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.fsbl-tabs-multiple .fsbl-header-right {
 		padding-left: 40px; /* this will leave some space for window dragging */
 	}
 }
 
 /* At 210px, all other icons icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 210px) {
+@media screen and (min-width: 0) and (max-width: 210px) {
 	.fsbl-icon.fsbl-minimize {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.fsbl-icon.fsbl-always-on-top {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
+
 	.icon-avatar-wrapper {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
 
 	.fsbl-tabs-multiple .fsbl-header-right {
 		padding-left: 30px; /* this will leave some space for window dragging */
 	}
+
 	.fsbl-header-title {
 		max-width: 25%;
 	}
@@ -644,10 +683,10 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 
 input.tab__input:focus {
 	outline: none;
-	animation: inputHighlighter 0.3s ease;
+	animation: input-highlighter 0.3s ease;
 }
 
-@keyframes inputHighlighter {
+@keyframes input-highlighter {
 	from {
 		background: #527bae;
 		width: 0;

package/react/componentTemplateGenerator.js

@@ -4,6 +4,7 @@ const path = require("path");
 const args = process.argv.slice(2);
 let file = "";
 let name = "MyComponent";
+// Stupid simple args parser
 for (let i = 0; i < args.length; i++) {
     switch (args[i]) {
         case "--file": {
@@ -25,8 +26,8 @@ if (file === "") {
 }
 const prepRelativeLink = (from, to) => path
     .relative(from, to)
-    .replace(/\\/g, "/")
-    .replace("../", "");
+    .replace(/\\/g, "/") // swap the slashes
+    .replace("../", ""); // path.relative adds an extra "../" for some reason, so remove it
 const base_path = path.join("src", "components", file);
 const component_file = `${base_path}.tsx`;
 const story_file = `${base_path}.stories.tsx`;

package/react/componentTemplateGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentTemplateGenerator.js","sourceRoot":"","sources":["../src/componentTemplateGenerator.js"],"names":[],"mappings":"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","sourcesContent":["const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst args = process.argv.slice(2);\nlet file = \"\";\nlet name = \"MyComponent\";\n\n// Stupid simple args parser\nfor (let i = 0; i < args.length; i++) {\n\tswitch (args[i]) {\n\t\tcase \"--file\": {\n\t\t\tfile = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tcase \"--name\": {\n\t\t\tname = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tdefault: {\n\t\t\tconsole.log(`Unknown flag: ${args[i]}`);\n\t\t}\n\t}\n}\n\nif (file === \"\") {\n\tconsole.log(\"Error: no provided file\");\n\treturn;\n}\n\nconst prepRelativeLink = (from, to) =>\n\tpath\n\t\t.relative(from, to)\n\t\t.replace(/\\\\/g, \"/\") // swap the slashes\n\t\t.replace(\"../\", \"\"); // path.relative adds an extra \"../\" for some reason, so remove it\nconst base_path = path.join(\"src\", \"components\", file);\nconst component_file = `${base_path}.tsx`;\nconst story_file = `${base_path}.stories.tsx`;\nconst test_file = `${base_path}.spec.tsx`;\n\nconst parsed_component_file = path.parse(component_file);\nconst { dir } = parsed_component_file;\nif (!fs.existsSync(dir)) {\n\tconsole.log(`Target directory, ${path.relative(\".\", dir)}, does not exist`);\n\treturn;\n}\n\nconst component_template = `\nimport React from \"react\";\n\nexport interface ${name}Props {\n    example: string;\n    onClick: () => void;\n};\n\nexport const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {\n    // Do things\n    return (\n        <div>\n            <button onClick={props.onClick}>{props.example}</button>\n        </div>\n    );\n};\n`;\n\nconst story_template = `\nimport React from \"react\";\nimport { ${name}, ${name}Props } from \"./${parsed_component_file.name}\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"${prepRelativeLink(story_file, \"./src/assets/css/finsemble.css\")}\";\n\nexport default {\n    title: \"${name}\",\n    component: ${name}\n};\n\nconst Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;\n\nexport const BasicStory = Template.bind({});\nBasicStory.args = {\n    example: \"My Example\",\n    onClick: action(\"Clicked\")\n};\n`;\n\nconst test_template = `\nimport * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it, afterEach } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ${name}Props } from \"./${path.parse(component_file).name}\";\nimport { BasicStory } from \"./${path.parse(component_file).name}.stories\";\n\n// For running accessibility scans\nimport { accessibilityAssessor } from \"${prepRelativeLink(test_file, \"./src/components/sdd/tests/a11y_helper\")}\";\n\n// For testing user interactions (like click events):\nimport sinon from \"sinon\";\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<${name}/>\", () => {\n    // Used to clear after each interactive test using sinon\n    afterEach(() => {\n        sinon.restore();\n    });\n\n    // Example basic test\n    it(\"should display text\", () => {\n        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        expect(wrapper.find(\"button\").exists(), \"The button exists\").to.be.true;\n        expect(wrapper.find(\"button\").text(), \"The button's text\").to.equal(\"My Example\");\n    });\n\n    // Example interactive test\n    it(\"should call function when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(BasicStory.args as ${name}Props, \"onClick\");\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        wrapper.find(\"button\").simulate(\"click\");\n        expect(buttonSpy.calledOnce).to.be.true;\n    });\n\n\t// Example accessibility scan\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n});\n`;\n\nfs.writeFile(component_file, component_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${component_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Component added at ${path.relative(\".\", component_file)}`);\n});\nfs.writeFile(story_file, story_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${story_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Story added at path \"${path.relative(\".\", story_file)}\".\nTo view it, run: yarn storybook`);\n});\nfs.writeFile(test_file, test_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${test_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Tests added at \"${path.relative(\".\", test_file)}\".\nTo run this test, run: yarn test-storybook -g ${name}\nTo run all tests, run: yarn test`);\n});\n"]}
+{"version":3,"file":"componentTemplateGenerator.js","sourceRoot":"","sources":["../src/componentTemplateGenerator.js"],"names":[],"mappings":"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","sourcesContent":["const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst args = process.argv.slice(2);\nlet file = \"\";\nlet name = \"MyComponent\";\n\n// Stupid simple args parser\nfor (let i = 0; i < args.length; i++) {\n\tswitch (args[i]) {\n\t\tcase \"--file\": {\n\t\t\tfile = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tcase \"--name\": {\n\t\t\tname = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tdefault: {\n\t\t\tconsole.log(`Unknown flag: ${args[i]}`);\n\t\t}\n\t}\n}\n\nif (file === \"\") {\n\tconsole.log(\"Error: no provided file\");\n\treturn;\n}\n\nconst prepRelativeLink = (from, to) =>\n\tpath\n\t\t.relative(from, to)\n\t\t.replace(/\\\\/g, \"/\") // swap the slashes\n\t\t.replace(\"../\", \"\"); // path.relative adds an extra \"../\" for some reason, so remove it\nconst base_path = path.join(\"src\", \"components\", file);\nconst component_file = `${base_path}.tsx`;\nconst story_file = `${base_path}.stories.tsx`;\nconst test_file = `${base_path}.spec.tsx`;\n\nconst parsed_component_file = path.parse(component_file);\nconst { dir } = parsed_component_file;\nif (!fs.existsSync(dir)) {\n\tconsole.log(`Target directory, ${path.relative(\".\", dir)}, does not exist`);\n\treturn;\n}\n\nconst component_template = `\nimport React from \"react\";\n\nexport interface ${name}Props {\n    example: string;\n    onClick: () => void;\n};\n\nexport const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {\n    // Do things\n    return (\n        <div>\n            <button onClick={props.onClick}>{props.example}</button>\n        </div>\n    );\n};\n`;\n\nconst story_template = `\nimport React from \"react\";\nimport { ${name}, ${name}Props } from \"./${parsed_component_file.name}\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"${prepRelativeLink(story_file, \"./src/assets/css/finsemble.css\")}\";\n\nexport default {\n    title: \"${name}\",\n    component: ${name}\n};\n\nconst Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;\n\nexport const BasicStory = Template.bind({});\nBasicStory.args = {\n    example: \"My Example\",\n    onClick: action(\"Clicked\")\n};\n`;\n\nconst test_template = `\nimport * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it, afterEach } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ${name}Props } from \"./${path.parse(component_file).name}\";\nimport { BasicStory } from \"./${path.parse(component_file).name}.stories\";\n\n// For running accessibility scans\nimport { accessibilityAssessor } from \"${prepRelativeLink(test_file, \"./src/components/sdd/tests/a11y_helper\")}\";\n\n// For testing user interactions (like click events):\nimport sinon from \"sinon\";\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<${name}/>\", () => {\n    // Used to clear after each interactive test using sinon\n    afterEach(() => {\n        sinon.restore();\n    });\n\n    // Example basic test\n    it(\"should display text\", () => {\n        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        expect(wrapper.find(\"button\").exists(), \"The button exists\").to.be.true;\n        expect(wrapper.find(\"button\").text(), \"The button's text\").to.equal(\"My Example\");\n    });\n\n    // Example interactive test\n    it(\"should call function when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(BasicStory.args as ${name}Props, \"onClick\");\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        wrapper.find(\"button\").simulate(\"click\");\n        expect(buttonSpy.calledOnce).to.be.true;\n    });\n\n\t// Example accessibility scan\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n});\n`;\n\nfs.writeFile(component_file, component_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${component_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Component added at ${path.relative(\".\", component_file)}`);\n});\nfs.writeFile(story_file, story_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${story_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Story added at path \"${path.relative(\".\", story_file)}\".\nTo view it, run: yarn storybook`);\n});\nfs.writeFile(test_file, test_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${test_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Tests added at \"${path.relative(\".\", test_file)}\".\nTo run this test, run: yarn test-storybook -g ${name}\nTo run all tests, run: yarn test`);\n});\n"]}

package/react/components/FinsembleProvider.d.ts

@@ -1,6 +1,13 @@
 import * as React from "react";
 import { store, createStore } from "../store";
 export { createStore };
+/**
+ * The <FinsembleProvider> must be an ancestor of any Finsemble React UI components or hooks.
+ * It manages FSBL initialization (ensuring that all components and hooks are operating with a properly initialized API.)
+ * It also constructs the UI API's redux store and makes it available through a Context Provider for all descendent components and hooks.
+ *
+ * The <FinsembleProvider> will render its children.
+ */
 export declare type FinsembleProviderProps = {
     store?: typeof store;
 };

package/react/components/FinsembleProvider.js

@@ -2,6 +2,8 @@ import * as React from "react";
 import { store, createStore } from "../store";
 import { Provider } from "react-redux";
 import { useState, useEffect } from "react";
+//import { common } from "@finsemble/finsemble-api";
+//let { Globals } = common;
 export { createStore };
 export const FinsembleProvider = (props) => {
     const [ready, setReady] = useState(false);

package/react/components/FinsembleProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FinsembleProvider.js","sourceRoot":"","sources":["../../src/components/FinsembleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAE,WAAW,EAAE,CAAC;AAcvB,MAAM,CAAC,MAAM,iBAAiB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK;YAAE,OAAO;QAClB,MAAM,OAAO,GAAG,GAAG,EAAE;YACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,CAAC,IAAI,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;YACpC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;YAC3C,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,KAAK,CAAC,CAAC,CAAC,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAY,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1F,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { store, createStore } from \"../store\";\nimport { Provider } from \"react-redux\";\nimport { useState, useEffect } from \"react\";\n//import { common } from \"@finsemble/finsemble-api\";\n\n//let { Globals } = common;\n\nexport { createStore };\n\n/**\n * The <FinsembleProvider> must be an ancestor of any Finsemble React UI components or hooks.\n * It manages FSBL initialization (ensuring that all components and hooks are operating with a properly initialized API.)\n * It also constructs the UI API's redux store and makes it available through a Context Provider for all descendent components and hooks.\n *\n * The <FinsembleProvider> will render its children.\n */\n\nexport type FinsembleProviderProps = {\n\tstore?: typeof store;\n};\n\nexport const FinsembleProvider: React.FunctionComponent<FinsembleProviderProps> = (props) => {\n\tconst [ready, setReady] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (ready) return;\n\t\tconst release = () => {\n\t\t\tsetReady(true);\n\t\t};\n\t\twindow.FSBL && FSBL?.addEventListener\n\t\t\t? FSBL.addEventListener(\"onReady\", release)\n\t\t\t: window.addEventListener(\"FSBLReady\", release);\n\t}, [ready]);\n\n\treturn ready ? <Provider store={props.store || store}>{props.children}</Provider> : null;\n};\n"]}
+{"version":3,"file":"FinsembleProvider.js","sourceRoot":"","sources":["../../src/components/FinsembleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,oDAAoD;AAEpD,2BAA2B;AAE3B,OAAO,EAAE,WAAW,EAAE,CAAC;AAcvB,MAAM,CAAC,MAAM,iBAAiB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK;YAAE,OAAO;QAClB,MAAM,OAAO,GAAG,GAAG,EAAE;YACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,CAAC,IAAI,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;YACpC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;YAC3C,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,KAAK,CAAC,CAAC,CAAC,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAY,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1F,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { store, createStore } from \"../store\";\nimport { Provider } from \"react-redux\";\nimport { useState, useEffect } from \"react\";\n//import { common } from \"@finsemble/finsemble-api\";\n\n//let { Globals } = common;\n\nexport { createStore };\n\n/**\n * The <FinsembleProvider> must be an ancestor of any Finsemble React UI components or hooks.\n * It manages FSBL initialization (ensuring that all components and hooks are operating with a properly initialized API.)\n * It also constructs the UI API's redux store and makes it available through a Context Provider for all descendent components and hooks.\n *\n * The <FinsembleProvider> will render its children.\n */\n\nexport type FinsembleProviderProps = {\n\tstore?: typeof store;\n};\n\nexport const FinsembleProvider: React.FunctionComponent<FinsembleProviderProps> = (props) => {\n\tconst [ready, setReady] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (ready) return;\n\t\tconst release = () => {\n\t\t\tsetReady(true);\n\t\t};\n\t\twindow.FSBL && FSBL?.addEventListener\n\t\t\t? FSBL.addEventListener(\"onReady\", release)\n\t\t\t: window.addEventListener(\"FSBLReady\", release);\n\t}, [ready]);\n\n\treturn ready ? <Provider store={props.store || store}>{props.children}</Provider> : null;\n};\n"]}

package/react/components/appCatalog/AppCatalog.d.ts

@@ -3,4 +3,8 @@
  * All rights reserved.
  */
 /// <reference types="react" />
+/**
+ * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application
+ * from the app catalog window.
+ */
 export declare const AppCatalog: () => JSX.Element;

package/react/components/appCatalog/AppCatalog.js

@@ -6,6 +6,10 @@ import React, { useState, useEffect } from "react";
 import { createStore } from "./stores/appStore";
 import { AppCatalogComponent } from "./AppCatalogComponent";
 import storeActions from "./stores/storeActions";
+/**
+ * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application
+ * from the app catalog window.
+ */
 export const AppCatalog = () => {
     const [isReady, setIsReady] = useState(false);
     useEffect(() => {

package/react/components/appCatalog/AppCatalog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalog.js","sourceRoot":"","sources":["../../../src/components/appCatalog/AppCatalog.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAMjD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,GAAG,EAAE;YAChB,YAAY,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,OAAO,0CAAG,OAAO,IAAI,oBAAC,mBAAmB,OAAG,CAAI,CAAC;AAClD,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { createStore } from \"./stores/appStore\";\nimport { AppCatalogComponent } from \"./AppCatalogComponent\";\nimport storeActions from \"./stores/storeActions\";\n\n/**\n * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application\n * from the app catalog window.\n */\nexport const AppCatalog = () => {\n\tconst [isReady, setIsReady] = useState(false);\n\tuseEffect(() => {\n\t\tcreateStore(() => {\n\t\t\tstoreActions.initialize(() => {\n\t\t\t\tsetIsReady(true);\n\t\t\t});\n\t\t});\n\t\treturn () => {};\n\t});\n\treturn <>{isReady && <AppCatalogComponent />}</>;\n};\n"]}
+{"version":3,"file":"AppCatalog.js","sourceRoot":"","sources":["../../../src/components/appCatalog/AppCatalog.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,GAAG,EAAE;YAChB,YAAY,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,OAAO,0CAAG,OAAO,IAAI,oBAAC,mBAAmB,OAAG,CAAI,CAAC;AAClD,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { createStore } from \"./stores/appStore\";\nimport { AppCatalogComponent } from \"./AppCatalogComponent\";\nimport storeActions from \"./stores/storeActions\";\n\n/**\n * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application\n * from the app catalog window.\n */\nexport const AppCatalog = () => {\n\tconst [isReady, setIsReady] = useState(false);\n\tuseEffect(() => {\n\t\tcreateStore(() => {\n\t\t\tstoreActions.initialize(() => {\n\t\t\t\tsetIsReady(true);\n\t\t\t});\n\t\t});\n\t\treturn () => {};\n\t});\n\treturn <>{isReady && <AppCatalogComponent />}</>;\n};\n"]}

package/react/components/appCatalog/AppCatalogComponent.d.ts

@@ -2,23 +2,81 @@ export class AppCatalogComponent extends React.Component<any, any, any> {
     constructor(props: any);
     bindCorrectContext(): void;
     addedAppsChanged(): void;
+    /**
+     * Force an update. Used to update from store listeners.
+     *
+     * @memberof AppMarket
+     */
     update(): void;
+    /**
+     * Action to take when the back button is clicked (which just goes home)
+     */
     goHome(): void;
+    /**
+     * Calls the store to add a tag to the activeTag list. Also updates the app view to switch to the AppResults page (since adding a tag implies filtering has begun)
+     * @param {string} tag The name of the tag to add
+     */
     addTag(tag: string): void;
+    /**
+     * Calls the store to remove a tag from the activeTag list. Also updates the app view to switch to the homepage if all tags have been removed
+     * @param {string} tag The name of the tag to add
+     */
     removeTag(tag: string): void;
+    /**
+     * Performs a search through the catalog
+     * @param {string} search The text to search the catalog with
+     */
     changeSearch(search: string): void;
+    /**
+     * Opens the AppShowcase page for the app supplied
+     */
     openAppShowcase(): void;
+    /**
+     * When the notification for installing/removing an app is shown a timeout is set to call this function to cease showing the notification
+     */
     stopShowingInstalledNotification(): void;
+    /**
+     * Compiles a list of apps that are installed from the information received back from appd
+     * and the information contained on the system
+     * @param {boolean} filtered If true, uses the filtered apps array. Otherwise uses all apps
+     */
     compileAddedInfo(filtered: boolean): any;
     getPageContents(): JSX.Element;
+    /**
+     * Determines the apps page based on the state of the activeTags, search text, etc
+     */
     determineActivePage(): string | undefined;
     navigateToShowcase(id: any): void;
     viewApp(error: any, event: any): void;
+    /**
+     * Checks if we have an activeApp defined
+     *
+     * @returns {boolean}
+     * @memberof AppMarket
+     */
     isActiveApp(): boolean;
+    /**
+     * Returns the active tags from the store
+     *
+     * @returns {array} activeTags
+     * @memberof AppMarket
+     */
     getActiveTags(): array;
     _asyncAppRequest: Promise<void> | undefined;
     _asyncTagsRequest: Promise<void> | undefined;
+    /**
+     * Returns the activeApp from the Store
+     *
+     * @returns {string} activeApp
+     * @memberof AppMarket
+     */
     getActiveApp(): string;
+    /**
+     * Returns the filtered list of apps from search
+     *
+     * @returns {object} filteredApps
+     * @memberof AppMarket
+     */
     getFilteredApps(): object;
 }
 import React from "react";