@finsemble/finsemble-ui 6.6.3 → 7.0.0-beta-X

package/react/assets/css/userPreferences.css

@@ -5,15 +5,12 @@
  */
 
 body {
-	margin: 0px;
+	margin: 0;
 }
 
 img {
 	user-select: none;
-	-moz-user-select: none;
 	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
 }
 
 .complex-menu-wrapper {
@@ -44,11 +41,11 @@ img {
 	flex-direction: column;
 	justify-content: start;
 	color: var(--content-font-color);
-	background-color: var(--content-nav-background-color);
+	background-color: var(--core-primary-1);
 }
 
 .complex-menu-left-nav-header {
-	background-color: var(--content-nav-header-background-color);
+	background-color: var(--core-primary-1);
 	font-weight: var(--content-nav-header-font-weight);
 	font-size: var(--content-nav-header-font-size);
 	margin-bottom: 30px;
@@ -102,8 +99,8 @@ img {
 
 .complex-menu-header {
 	display: flex;
-	justify-content: Space-between;
-	padding: 6px 6px 0px 11px;
+	justify-content: space-between;
+	padding: 6px 6px 0 11px;
 	font-size: 18px;
 }
 
@@ -119,19 +116,20 @@ img {
 .complex-menu-section-toggle {
 	padding: 6px 30px;
 	margin-right: 6px;
-	border-radius: 0px 20px 20px 0px;
+	border-radius: 0 20px 20px 0;
 	height: 22px;
 	display: flex;
 	align-items: center;
 }
 
-.complex-menu-section-toggle:hover {
+.complex-menu-section-toggle:hover,
+.complex-menu-section-toggle:focus {
 	cursor: pointer;
-	background-color: var(--content-nav-highlighter-hover);
+	background-color: var(--accent-primary);
 }
 
 .active-section-toggle {
-	background-color: var(--content-nav-highlighter);
+	background-color: var(--accent-primary-1);
 }
 
 .complex-menu-content-row {
@@ -139,7 +137,7 @@ img {
 	padding: 0.75em;
 	align-content: flex-start;
 	user-select: none;
-	background-color: var(--content-background-color);
+	background-color: var(--core-primary-2);
 	overflow: auto;
 }
 
@@ -148,7 +146,7 @@ img {
 }
 
 .workspace-list-header-row {
-	padding: 0px;
+	padding: 0;
 }
 
 #UserPreferences-component-wrapper {
@@ -178,7 +176,7 @@ img {
 
 .workspace-item {
 	height: 28px;
-	padding: 4px 10px 0px 10px;
+	padding: 4px 10px 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -188,7 +186,7 @@ img {
 }
 
 .workspace-item:hover {
-	background-color: var(--content-nav-highlighter-hover);
+	background-color: var(--core-primary-2);
 }
 
 .individual-workspace-actions {
@@ -202,7 +200,7 @@ img {
 
 .workspace-item .ff-adp-hamburger {
 	color: var(--content-list-drag-icon-color);
-	margin: -2px 16px 0px 0px;
+	margin: -2px 16px 0 0;
 }
 
 .workspace-item .workspace-name {
@@ -218,7 +216,7 @@ img {
 .individual-workspace-action {
 	cursor: pointer;
 	padding: 4px;
-	margin: 0px 4px;
+	margin: 0 4px;
 	height: 17px;
 	transition: 0.2s color;
 }
@@ -261,19 +259,19 @@ img {
 
 .action-button {
 	border: 1px solid var(--button-neutral-border-hover-color);
-	padding: 0.25em 0em;
+	padding: 0.25em 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin: 16px 0px 6px 0px;
+	margin: 16px 0 6px;
 	color: var(--content-button-icon-color);
 	transition: 0.2s all;
 }
 
 .action-button:hover {
 	cursor: pointer;
-	border: solid 1px var(--content-button-neutral-hover-color);
-	color: var(--content-button-neutral-hover-color);
+	border: solid 1px var(--font-color);
+	color: var(--font-color);
 }
 
 .disabled-button,
@@ -403,11 +401,12 @@ img {
 }
 
 .daily-select.disabled {
-	color: var(--content-nav-highlighter);
+	color: var(--core-primary-5);
 }
 
 .disabled-restart {
-	color: var(--content-nav-highlighter) !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	color: var(--core-primary-5) !important;
 }
 
 select:focus,
@@ -480,8 +479,8 @@ option:focus {
 }
 
 .row-btn:hover {
-	background: var(--menu-actions-hover-color);
-	border-radius: 0px 20px 20px 0px;
+	background: var(--accent-primary);
+	border-radius: 0 20px 20px 0;
 }
 
 .row-section .row__lbl {
@@ -571,3 +570,7 @@ option:focus {
 	margin-top: 8px;
 	margin-left: 10px;
 }
+
+.complex-menu-wrapper .workspace-list .individual-workspace-action:hover {
+	color: var(--font-color);
+}

package/react/assets/css/windowTitleBar.css

@@ -4,26 +4,49 @@
  * All rights reserved.
  */
 @import url("./linkerWindow.css");
+@import url("./defaultTheme.css");
+@import url("core/icons.css");
+@import url("core/windowFrame.css");
+@import url("core/formElements.css");
+@import url("./font-finance.css");
+@import url("./fonts/Open_Sans/OpenSans-Definition.css");
+@import url("./focus.css");
 
 .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 {
@@ -38,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;
@@ -49,32 +72,32 @@ body:after {
 	background-color: var(--window-border-color);
 }
 
-/* 
-* The next few items give the border of windows 
+/*
+* 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;
@@ -135,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;
@@ -151,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) */
@@ -160,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 {
@@ -197,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;
@@ -205,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;
 }
 
@@ -216,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;
 }
@@ -230,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;
@@ -248,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);
 }
@@ -277,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;
@@ -300,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;
@@ -314,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;
@@ -347,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;
 }
 
@@ -402,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. */
@@ -425,6 +453,7 @@ html.desktop-active .fsbl-icon-highlighted {
 .fsbl-tab-editor {
 	position: relative;
 	z-index: 29999;
+	overflow: auto;
 }
 
 .fsbl-tab-title {
@@ -450,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%;
@@ -471,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;
@@ -490,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;
 }
@@ -511,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 */
@@ -530,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 {
@@ -539,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 {
@@ -548,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%;
 	}
@@ -624,7 +670,7 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 	top: 1px;
 }
 
-.tab__input {
+#title_editor_input {
 	font-size: 12px;
 	padding: 2px 10px;
 	width: 80%;
@@ -635,12 +681,12 @@ html.desktop-active .fsbl-active-tab .fsbl-tab-title {
 	background: transparent;
 }
 
-input:focus {
+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/assets/icons/server.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 7.7 9.2" style="enable-background:new 0 0 7.7 9.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M1.2,6.5H2c0.2,0,0.3-0.1,0.3-0.3V5.4c0-0.1,0-0.1-0.1-0.2C2.2,5.2,2.1,5.2,2,5.2H1.2c-0.2,0-0.3,0.1-0.3,0.3
+		v0.8C0.9,6.4,1.1,6.5,1.2,6.5z M1.5,6V5.7h0.3V6H1.5z"/>
+	<path class="st0" d="M1.2,4.8H2c0.2,0,0.3-0.1,0.3-0.3V3.7c0-0.1,0-0.1-0.1-0.2C2.2,3.5,2.1,3.4,2,3.4H1.2c-0.2,0-0.3,0.1-0.3,0.3
+		v0.8C0.9,4.7,1.1,4.8,1.2,4.8z M1.5,4.2V4h0.3v0.3H1.5z"/>
+	<path class="st0" d="M1.2,8.3H2c0.2,0,0.3-0.1,0.3-0.3V7.2C2.3,7,2.2,6.9,2,6.9H1.2C1.1,6.9,0.9,7,0.9,7.2V8
+		C0.9,8.1,1.1,8.3,1.2,8.3z M1.8,7.4v0.3H1.5V7.4H1.8z"/>
+	<path class="st0" d="M5.7,6.5h0.8c0.2,0,0.3-0.1,0.3-0.3V5.4c0-0.1,0-0.1-0.1-0.2C6.6,5.2,6.6,5.2,6.5,5.2H5.7
+		c-0.2,0-0.3,0.1-0.3,0.3v0.8C5.4,6.4,5.5,6.5,5.7,6.5z M6,6V5.7h0.3V6H6z"/>
+	<path class="st0" d="M5.7,4.8h0.8c0.2,0,0.3-0.1,0.3-0.3V3.7c0-0.1,0-0.1-0.1-0.2C6.6,3.5,6.6,3.4,6.5,3.4H5.7
+		c-0.2,0-0.3,0.1-0.3,0.3v0.8C5.4,4.7,5.5,4.8,5.7,4.8z M6,4.2V4h0.3v0.3H6z"/>
+	<path class="st0" d="M5.7,8.3h0.8c0.2,0,0.3-0.1,0.3-0.3V7.2c0-0.2-0.1-0.3-0.3-0.3H5.7C5.5,6.9,5.4,7,5.4,7.2V8
+		C5.4,8.1,5.5,8.3,5.7,8.3z M6.2,7.4v0.3H6V7.4H6.2z"/>
+	<path class="st0" d="M7.3,0H4.9C4.7,0,4.5,0.2,4.5,0.5v8.3c0,0.2,0.2,0.5,0.5,0.5h2.3c0.2,0,0.5-0.2,0.5-0.5V0.5
+		C7.7,0.2,7.5,0,7.3,0z M7.1,0.6v8.1H5V0.6H7.1z"/>
+	<path class="st0" d="M2.8,0H0.5C0.2,0,0,0.2,0,0.5v8.3C0,9,0.2,9.2,0.5,9.2h2.3C3,9.2,3.3,9,3.3,8.8V0.5C3.3,0.2,3,0,2.8,0z
+		 M2.7,0.6v8.1H0.6V0.6H2.7z"/>
+</g>
+</svg>

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);