@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-5

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

@@ -1,31 +0,0 @@
-.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

@@ -1,13 +0,0 @@
-.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

@@ -1,57 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-.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

@@ -1,51 +0,0 @@
-.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

@@ -1,133 +0,0 @@
-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

@@ -1,56 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-.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

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

package/react/components/common/file_helpers.js

@@ -1,22 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,5 +0,0 @@
-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>;