@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/common/css/header.css

@@ -0,0 +1,31 @@
+.view-header {
+	display: flex;
+	margin: 2rem 0 1.4rem 2.1rem;
+}
+
+.view-header .button-container-icon button {
+	font-size: 2.15rem;
+}
+
+.view-title {
+	width: 100%;
+	margin: 0;
+	user-select: none;
+	position: relative;
+	font-size: 2.3rem;
+	box-sizing: border-box;
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.leftSide {
+	display: flex;
+	align-items: center;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.view-title button {
+	margin-right: 0.9rem;
+}

package/react/components/common/css/icon.css

@@ -0,0 +1,13 @@
+.finsemble-icon {
+	display: inline-flex;
+}
+
+.finsemble-icon svg {
+	font-size: 1em;
+	width: 1em;
+	height: 1em;
+	fill: currentcolor;
+	display: inline-block;
+	color: inherit;
+	pointer-events: none;
+}

package/react/components/common/css/image-preview.css

@@ -0,0 +1,57 @@
+.image-preview-container {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.image-preview-container .empty-preview {
+	width: 29px;
+	height: 29px;
+	margin-right: 0.9em;
+	border-radius: 4px;
+	border: dashed 2px #3d4455;
+}
+
+.image-preview-container .filled-preview {
+	width: 29px;
+	height: 29px;
+	margin-right: 0.9em;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.image-preview-container .filled-preview img {
+	width: 100%;
+	height: 100%;
+}
+
+.image-preview-container.image-preview-size-large {
+	display: block;
+}
+
+.image-preview-container.image-preview-size-large .empty-preview {
+	width: 238px;
+	height: 150px;
+	margin-top: 1em;
+	border-radius: 4px;
+	border: dashed 2px #3d4455;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.image-preview-container.image-preview-size-large .filled-preview {
+	width: 238px;
+	height: 150px;
+	margin-top: 1em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.image-preview-container.image-preview-size-large .filled-preview img {
+	width: 100%;
+}

package/react/components/common/css/loading-spinner.css

@@ -0,0 +1,34 @@
+.same-spin svg {
+	max-height: 41px;
+}
+
+.same-spin .cls-1,
+.same-spin .cls-2 {
+	fill: none;
+	stroke-miterlimit: 10;
+	stroke-width: 2.44px;
+}
+
+.same-spin .cls-1 {
+	stroke: #fff;
+	opacity: 0.2;
+}
+
+.same-spin .cls-2 {
+	stroke: #039bff;
+}
+
+.same-spin {
+	transform-origin: 50% 46%;
+	animation: same-spin 1.75s infinite linear;
+}
+
+@keyframes same-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/react/components/common/css/preload-edit-page.css

@@ -0,0 +1,37 @@
+.preload-edit-table {
+	width: 515px;
+}
+
+.preload-edit-table td,
+.preload-edit-table th {
+	padding-bottom: 17px;
+}
+
+.preload-edit-table th {
+	width: 130px;
+	text-align: left;
+	font-weight: normal;
+	vertical-align: bottom;
+}
+
+th.table-header__top-label {
+	vertical-align: top;
+}
+
+.preload-edit-table .edit-field > input[type="text"] {
+	width: 100%;
+}
+
+.preload-edit-table .emperorSelectContainer {
+	width: 100%;
+}
+
+.preload-edit-table .load-option {
+	margin-bottom: 10px;
+}
+
+.preload-edit-actions {
+	display: flex;
+	justify-content: space-between;
+	margin: 0.65em 3em 0.65em 0;
+}

package/react/components/common/css/selector.css

@@ -0,0 +1,51 @@
+.emperorSelectContainer {
+	margin: 10px 0;
+	padding: 0 0 0 10px;
+	background-color: var(--core-primary);
+	width: fit-content;
+	padding-bottom: 5px;
+}
+
+.emperorSelect {
+	overflow-y: scroll;
+}
+
+.emperorOption {
+	margin: 0 0 1px;
+	padding: 8px 0 9px;
+	border-radius: 17px;
+	background-color: var(--core-primary);
+	display: flex;
+	align-items: center;
+}
+
+.emperorOption label > span {
+	margin-left: 10px;
+}
+
+.shogunSelect {
+	position: absolute;
+	left: -1000px;
+}
+
+.emperorOption label {
+	width: fit-content;
+	min-width: 20em;
+	display: flex;
+	align-items: center;
+}
+
+.emperorSelectContainer .searchIcon {
+	margin-left: 8.5px;
+	margin-right: 10.5px;
+	color: var(--font-color);
+}
+
+.emperorSelectContainer .search {
+	min-width: 190px;
+	margin-bottom: 4px;
+}
+
+.highlight {
+	background-color: var(--accent-primary-1);
+}

package/react/components/common/css/styles.css

@@ -0,0 +1,133 @@
+body,
+html {
+	padding: 0;
+	margin: 0;
+	width: 100vw;
+	height: 100vh;
+	font-size: 13px;
+	background-color: #22262f;
+}
+
+p {
+	opacity: 0.75;
+	line-height: 1.7em;
+}
+
+h2 {
+	margin: 0;
+}
+
+* {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::after,
+*::before {
+	user-select: none;
+	-webkit-user-drag: none;
+	-webkit-app-region: no-drag;
+	cursor: default;
+}
+
+fieldset {
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+legend {
+	margin: 0;
+	padding: 0;
+}
+
+input[type="text"] {
+	border: 0 transparent solid;
+	border-bottom: 2px solid transparent;
+}
+
+textarea {
+	padding: 1em 0;
+	border: 0;
+	border-bottom: 2px transparent solid;
+}
+
+input[type="text"],
+textarea {
+	font-family: OpenSans;
+	font-size: 0.9em;
+	height: 2.9em;
+	padding-left: 0.5em;
+	color: #fff;
+	border-bottom: 2px solid #3d4455;
+	background-color: #22262f;
+	transition: all 0.2s ease-in;
+}
+
+input[type="text"]:focus,
+textarea:focus {
+	outline: none;
+	border-color: #42a5ba;
+}
+
+input[type="text"][aria-invalid="true"] {
+	border-bottom: 2px solid #f26666;
+}
+
+.invalid-message {
+	font-size: 10px;
+	color: #f26666;
+	display: block;
+}
+
+#smartDesktopDesigner {
+	position: relative;
+	height: 100%;
+	width: 100%;
+}
+
+.config-container {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	max-width: 100%;
+	max-height: 100%;
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.project-container {
+	display: flex;
+	flex-grow: 1;
+	max-height: 100%;
+	overflow: auto;
+}
+
+/* width */
+
+::-webkit-scrollbar {
+	width: 5px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+	background: none;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+	background: #f1f1f1;
+	border-radius: 3px;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+	background: #555;
+}

package/react/components/common/css/tab.css

@@ -0,0 +1,56 @@
+.view-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.horizontal-tabs[role="tablist"] {
+	width: 100px;
+	padding-bottom: 20px;
+}
+
+.horizontal-tabs [role="tab"] {
+	display: inline;
+	width: fit-content;
+	height: 22px;
+	margin: 22px 32px 3px 6px;
+	font-family: OpenSans;
+	font-size: 16px;
+	font-weight: bold;
+	font-stretch: normal;
+	font-style: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	border-bottom: solid 3px transparent;
+	transition: border-bottom 0.2s ease-in;
+}
+
+.horizontal-tabs [role="tab"][aria-selected="true"] {
+	border-bottom: solid 3px #902e57;
+	margin-bottom: -3px;
+}
+
+.horizontal-tabs [role="tab"]:first-child {
+	margin-top: 0;
+}
+
+.horizontal-tabs [role="tabpanel"] {
+	padding-left: 5px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	visibility: hidden;
+	opacity: 0;
+	height: 0;
+	transition: visibility 0s, opacity 0.5s linear;
+}
+
+.horizontal-tabs [role="tabpanel"].visible {
+	visibility: visible;
+	opacity: 1;
+	height: 100%;
+}
+
+.horizontal-tabs [role="tab"]:hover,
+.horizontal-tabs [role="tab"]:focus:not([aria-selected="true"]) {
+	border-bottom: solid 3px #36788b;
+	margin-bottom: -3px;
+}

package/react/components/common/css/time-select.css

@@ -0,0 +1,9 @@
+.time-select-label {
+	margin-top: 0.45em;
+	margin-right: 0.5em;
+}
+
+.disabled-time-select {
+	/* stylelint-disable-next-line declaration-no-important */
+	color: var(--core-primary-5) !important;
+}

package/react/components/common/css/toggle.css

@@ -0,0 +1,60 @@
+.finsembleToggle {
+	position: relative;
+	display: inline-block;
+	margin-right: 20px;
+}
+
+.finsembleToggle input[type="checkbox"] {
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	cursor: pointer;
+}
+
+.finsembleToggle.disabled input[type="checkbox"] {
+	cursor: default;
+}
+
+.toggle-text-label-wrapper {
+	display: flex;
+	width: 100%;
+}
+
+.toggle-text-label {
+	background: #22262f;
+	padding: 2px 10px;
+	border-radius: 2px;
+}
+
+.finsembleToggle .toggle-text-label[aria-selected="true"] {
+	background-color: #0a8cf4;
+}
+
+.finsembleToggle .toggle-text-label[aria-selected="false"]:hover {
+	background-color: #3d4455;
+}
+
+.finsembleToggle .finsembleToggle-icon {
+	font-size: 1.7rem;
+}
+
+.finsembleToggle-off .finsembleToggle-icon {
+	color: #5b606f;
+}
+
+.finsembleToggle-on .finsembleToggle-icon {
+	color: #0a8cf4;
+}
+
+.finsembleToggle:hover .finsembleToggle-icon {
+	color: #087ddb;
+}
+
+.finsembleToggle.disabled {
+	filter: grayscale(10%) brightness(65%);
+}

package/react/components/common/css/tooltip.css

@@ -0,0 +1,77 @@
+.tooltip {
+	position: relative;
+	display: inline-block;
+}
+
+.tooltip:hover {
+	z-index: 1000;
+}
+
+.tooltip .tooltip-icon {
+	font-size: 1.3rem;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.tooltip .tooltip-icon-info {
+	color: #8e939f;
+}
+
+.tooltip .tooltip-icon-info:hover {
+	color: #fff;
+}
+
+.tooltip .tooltip-content {
+	position: absolute;
+	display: block;
+	top: 0;
+	opacity: 0;
+	pointer-events: none;
+	transition: all 0.25s;
+	background-color: rgb(0 0 0 / 90%);
+	border: 1px solid #333;
+	border-radius: 4px;
+	padding: 1em;
+	margin-top: 0.5em;
+	margin-left: 0.5em;
+	height: fit-content;
+	width: fit-content;
+	z-index: 1000;
+	min-width: 150px;
+}
+
+.tooltip.tooltip-position-content-right .tooltip-content {
+	left: 100%;
+}
+
+.tooltip.tooltip-position-content-left .tooltip-content {
+	left: unset;
+	right: 100%;
+}
+
+.tooltip .tooltip-content.visible {
+	opacity: 1;
+	pointer-events: all;
+}
+
+.tooltip .tooltip-icon-error {
+	color: #f26666;
+	border-color: #f26666;
+}
+
+.tooltip .tooltip-icon-warn {
+	color: #f5a623;
+	border-color: #f5a623;
+	position: relative;
+}
+
+.app-edit-access-item {
+	display: flex;
+	width: 100%;
+	padding-right: 1em;
+}
+
+.app-edit-access-item-name {
+	flex-grow: 1;
+}

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

@@ -0,0 +1,2 @@
+export declare const VALID_APP_EXTENSIONS: string[];
+export declare const validateFilename: (acceptTypes: string[], filename: string) => boolean;

package/react/components/common/file_helpers.js

@@ -0,0 +1,22 @@
+// Dictionary to match extensions (eg, "png") to mimetypes (eg, "image/png")
+const mimeTypes = {
+    ico: "image/x-icon",
+    png: "image/png",
+    jpeg: "image/jpeg",
+    jpg: "image/jpeg",
+    jpe: "image/jpeg",
+    gif: "image/gif",
+    exe: "application/x-msdos-program",
+};
+export const VALID_APP_EXTENSIONS = ["application/x-msdos-program"];
+export const validateFilename = (acceptTypes, filename) => {
+    // regular express to extract extension (eg, "png")
+    const ext_re = /(?:\.([^.]+))?$/;
+    const matches = acceptTypes.filter((mimeType) => {
+        var _a;
+        const ext = (_a = ext_re.exec(filename)) === null || _a === void 0 ? void 0 : _a[1];
+        return mimeType === "*" || (ext && (mimeType === null || mimeType === void 0 ? void 0 : mimeType.toLowerCase()) == mimeTypes[ext]);
+    });
+    return filename !== "" && matches.length === 0;
+};
+//# sourceMappingURL=file_helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file_helpers.js","sourceRoot":"","sources":["../../../src/components/common/file_helpers.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,MAAM,SAAS,GAA2B;IACzC,GAAG,EAAE,cAAc;IACnB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,WAAW;IAChB,GAAG,EAAE,6BAA6B;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,WAAqB,EAAE,QAAgB,EAAE,EAAE;IAC3E,mDAAmD;IACnD,MAAM,MAAM,GAAG,iBAAiB,CAAC;IACjC,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,QAAgB,EAAE,EAAE;;QACvD,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,0CAAG,CAAC,CAAC,CAAC;QACvC,OAAO,QAAQ,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAAE,KAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;IACH,OAAO,QAAQ,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Dictionary to match extensions (eg, \"png\") to mimetypes (eg, \"image/png\")\nconst mimeTypes: Record<string, string> = {\n\tico: \"image/x-icon\",\n\tpng: \"image/png\",\n\tjpeg: \"image/jpeg\",\n\tjpg: \"image/jpeg\",\n\tjpe: \"image/jpeg\",\n\tgif: \"image/gif\",\n\texe: \"application/x-msdos-program\",\n};\n\nexport const VALID_APP_EXTENSIONS = [\"application/x-msdos-program\"];\n\nexport const validateFilename = (acceptTypes: string[], filename: string) => {\n\t// regular express to extract extension (eg, \"png\")\n\tconst ext_re = /(?:\\.([^.]+))?$/;\n\tconst matches = acceptTypes.filter((mimeType: string) => {\n\t\tconst ext = ext_re.exec(filename)?.[1];\n\t\treturn mimeType === \"*\" || (ext && mimeType?.toLowerCase() == mimeTypes[ext]);\n\t});\n\treturn filename !== \"\" && matches.length === 0;\n};\n"]}

package/react/components/common/fixtures/FinsembleIcon.css

@@ -0,0 +1,4 @@
+.test-finsemble-icon {
+	color: #dff2f8;
+	font-size: 250px;
+}

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

@@ -0,0 +1,5 @@
+import { FileInputUploadCb } from "./FileInput";
+import { Story } from "@storybook/react/types-6-0";
+export declare const uploadFunction: FileInputUploadCb;
+export declare const initFSBL: (windowObject?: any) => void;
+export declare function createStory<T>(Component: Function, args: T): Story<T>;