asab_webui_components 25.1.1

package/dist/styles/components/card.scss

@@ -0,0 +1,174 @@
+[data-bs-theme=dark] .card {
+	--bs-card-cap-bg: unset;
+}
+
+.card {
+	--bs-card-border-color: var(--bs-border-color);
+	--bs-card-cap-bg: var(--white);
+	--bs-card-cap-padding-y: 0.9rem;
+
+	> .card-header h3,  > .card-header-flex h3 {
+		font-size: 16px;
+		color: var(--bs-body-color);
+	}
+
+	button[class*="btn-outline"],
+	button[class*="btn-outline"]:disabled {
+		--bs-btn-border-color: inherit;
+	}
+}
+
+$card-flex-height: 3.2rem;
+
+// Extending `.card-header` class to accept flex sub-items
+.card-header-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex !important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center !important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+	}
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+
+	> .nav {
+		padding: 0;
+		display: contents;
+
+		.nav-item a {
+			border: none;
+			background: inherit;
+			border-bottom: 2px solid transparent;
+		}
+
+		.nav-item a:hover {
+			cursor: pointer;
+			border-bottom: 2px solid var(--bs-secondary);
+		}
+
+		.nav-item a.active {
+			border-bottom: 2px solid var(--bs-primary);
+		}
+	}
+
+	h2, h3, h4, h5, h6 {
+		margin-bottom: 0;
+	}
+}
+
+
+.card-footer-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex!important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center!important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+	}
+
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+}
+
+// Styles for enabling fullscreen mode covering header and sidebar
+.card-fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+}

package/dist/styles/components/form.scss

@@ -0,0 +1,20 @@
+.form-control, .form-select, .form-check-input {
+	font-size: var(--bs-body-font-size);
+	border-radius: 0px;
+	background-color: var(--bs-input-bg-color);
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+.form-select, .form-check-input {
+	cursor: pointer;
+	&:disabled {
+		cursor: default;
+	}
+}
+
+.form-select option:checked {
+	color: white;
+	background-color: var(--bs-primary);
+}

package/dist/styles/components/html.scss

@@ -0,0 +1,16 @@
+a {
+	text-decoration: none;
+}
+
+hr {
+	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+	background-color: var(--bs-border-color);
+}
+
+pre code {
+	color: var(--bs-code-color);  // The colour of the pre-formatted code has to match <code>
+}
+
+code {
+	font-size: var(--asab-monospace-font-size);
+}

package/dist/styles/constants/colors.scss

@@ -0,0 +1,66 @@
+// Colors for themes
+// IMPORTANT: Always enter two variants (hex and RGB)
+
+:root {
+	--soft-sky-blue: #7A9CFF; // The link color for a dark theme
+	--soft-sky-blue-rgb: 122, 156, 255;
+
+	--pastel-sky-blue: #DBEEFF; // The link-hover color and body-bg color for a dark theme
+	--pastel-sky-blue-rgb: 219, 238, 255;
+
+	--deep-space-blue: #0E1426; // The dark for a light, dark theme and dark for body bg, tertiary color for a light theme
+	--deep-space-blue-rgb: 14, 20, 38;
+
+	--nightfall-blue: #19223f; // The card-bg and table-bg color for a dark theme
+
+	--deep-ocean-blue: #24366D; // The border and card-border color for dark theme
+	--deep-ocean-blue-rgb: 36, 54, 109;
+
+	--polar-mist: #F3F4FA; // The light for a light and dark theme
+	--polar-mist-rgb: 243, 244, 250;
+
+	--white: #FFFFFF; // The card-bg, table-bg, input-bg color for light theme
+	--white-rgb: 255, 255, 255;
+
+	--royal-blue: #315EE3; // The link and primary color for a light theme
+	--royal-blue-rgb: 49, 94, 227;
+
+	--tropical-rainforest: #3DC9B0;  // Corresponds with vs-dark color (from the Monaco editor)
+	--tropical-rainforest-rgb: 61, 201, 176;
+
+	--teal: #008080; // Corresponds with vs color (from the Monaco editor)
+	--teal-rgb: 0 128 128;
+
+	--lavender-mist: #DDE1F8; // The secondary for a light and dark theme, the border-color for light theme
+	--lavender-mist-rgb: 221, 225, 248;
+
+	--vibrant-magenta: #d63384; // The code color for light theme
+	--vibrant-magenta-rgb: 214, 51, 132;
+
+	--black: #000000; // The body-color for light theme
+	--black-rgb: 0, 0, 0;
+
+	--midnight-blue: #131C37; // The input-bg color for a dark theme
+	--midnight-blue-rgb: 19, 28, 55;
+
+	--slate-smoke: #6a6a6a8f; // The color of the disabled item text in the TreeMenu
+	--slate-smoke-rgb: 106, 106, 106;
+
+	--deep-red: #D1004A; // The color of the highest Alert severity
+	--deep-red-rgb: 209, 0, 74;
+
+	--deep-green: #0E6027; // The color of the lowest Alert severity
+	--deep-green-rgb: 14, 96, 39;
+
+	--charcoal: #494949; // Console background dark theme
+	--charcoal-rgb: 0, 43, 54;
+
+	--old-lace: #FDF6E3; // Console background light theme
+	--old-lace-rgb: 253, 246, 227;
+
+	--gainsboro: #E0E0E0; // Console font color for dark theme
+	--gainsboro-rgb: rgb(224, 224, 224);
+
+	--moody-blues: #586E75; // Console font color for light theme
+	--moody-blues-rgb: rgb(88, 110, 117);
+}

package/dist/styles/constants/index.scss

@@ -0,0 +1,70 @@
+@use './colors.scss';
+@use './theme-light.scss';
+@use './theme-dark.scss';
+@use './theme-print.scss';
+
+// Universal styling goes here
+// It means fonts, borders but no colors
+// Set only `--bs-*` variables here.
+
+:root {
+	// Font and typography
+	--bs-font-sans-serif: 'Verdana', sans-serif;
+	--bs-body-font-size: 14px;
+
+	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--asab-monospace-font-size: 14px;
+
+	--bs-body-line-height: 1.5;
+
+	// Borders
+	--bs-border-radius: 8px;
+	
+}
+
+// Specific components
+
+.list-group {
+	--bs-list-group-bg: transparent;
+}
+
+.dropdown-menu {
+	--bs-dropdown-border-radius: 0px;  // No radius for dropdowns
+	--bs-dropdown-font-size: var(--bs-body-font-size);
+
+	--bs-dropdown-header-color: var(--bs-heading-color);
+	--bs-dropdown-link-color: var(--bs-link-color);
+}
+
+.progress-bar {
+	--bs-progress-height: 16px;
+}
+
+.card {
+	--bs-card-bg: var(--bs-element-bg-color);
+}
+
+.table {
+	--bs-table-bg: var(--bs-body-bg);
+	thead th {
+		/*Setting table header background color*/
+		background-color: transparent;
+	}
+}
+
+.dropdown-menu {
+	--bs-dropdown-bg: var(--bs-element-bg-color);
+}
+
+.input-group-text {
+	border-radius: 0;
+}
+
+.react-json-view {
+	background-color: transparent !important;
+}
+
+/*Fix the position of the monaco hover marker tooltip*/
+.monaco-hover {
+	position: fixed;
+}

package/dist/styles/constants/theme-dark.scss

@@ -0,0 +1,55 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+[data-bs-theme=dark] {
+
+	--bs-primary: var(--soft-sky-blue);
+	--bs-primary-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--soft-sky-blue);
+	--bs-link-color-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-link-hover-color: var(--pastel-sky-blue);
+	--bs-link-hover-color-rgb: var(--pastel-sky-rgb);
+
+	--bs-code-color: var(--tropical-rainforest);
+	--bs-code-color-rgb: var(--tropical-rainforest-rgb);
+
+	--bs-body-bg: var(--deep-space-blue);
+	--bs-body-bg-rgb: var(--deep-space-blue-rgb);
+
+	--bs-body-color: var(--pastel-sky-blue);
+	--bs-body-color-rgb: var(--pastel-sky-blue-rgb);
+
+	--bs-border-color: var(--deep-ocean-blue);
+	--bs-border-color-rgb: var(--deep-ocean-blue-rgb);
+
+	--bs-input-bg-color: var(--midnight-blue);
+	--bs-input-bg-color-rgb: var(--midnight-blue);
+
+	--bs-element-bg-color: var(--nightfall-blue);
+	--bs-element-bg-color-rgb: var(--nightfall-blue);
+
+	--bs-alert-info-color: var(--deep-space-blue);
+	--bs-alert-info-color-rgb: var(--deep-space-blue-rgb);
+}
+
+[data-bs-theme=dark] {
+	.progress-bar {
+		--bs-progress-bar-color: var(--white);
+		--bs-progress-bar-bg: var(--soft-sky-blue);
+	}
+
+	.badge.bg-info {
+		--bs-badge-color: var(--deep-space-blue);
+	}
+}

package/dist/styles/constants/theme-light.scss

@@ -0,0 +1,46 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+:root, [data-bs-theme=light] {
+
+	--bs-primary: var(--royal-blue);
+	--bs-primary-rgb: var(--royal-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--royal-blue);
+	--bs-link-color-rgb: var(--royal-blue-rgb);
+
+	--bs-link-hover-color: var(--royal-blue);
+	--bs-link-hover-color-rgb: var(--royal-blue-rgb);
+
+	--bs-code-color: var(--teal);
+	--bs-code-color-rgb: var(--teal-rgb);
+
+	--bs-body-bg: var(--polar-mist);
+	--bs-body-bg-rgb: var(--polar-mist-rgb); 
+
+	--bs-body-color: var(--black);
+	--bs-body-color-rgb: var(--black-rgb);
+
+	--bs-border-color: var(--lavender-mist);
+	--bs-border-color-rgb: var(--lavender-mist-rgb);
+
+	--bs-input-bg-color: var(--white);
+	--bs-input-bg-color-rgb: var(--white-rgb);
+
+	--bs-element-bg-color: var(--white);
+	--bs-element-bg-color-rgb: var(--white-rgb);
+}
+
+:root, [data-bs-theme=light] .progress-bar {
+	--bs-progress-bar-color: var(--white);
+	--bs-progress-bar-bg: var(--royal-blue);
+}

package/dist/styles/constants/theme-print.scss

@@ -0,0 +1,198 @@
+@page print-portrait {
+	size: portrait;
+}
+@media print {
+	@page {
+		size: A4 landscape;
+		margin: 2cm 1cm 1.5cm;
+	}
+
+	.print-portrait {
+		page: print-portrait;
+	}
+
+	// Dont display page scrollbar in chrome
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Needed for background color of status indicator widget */
+	html {
+		-webkit-print-color-adjust: exact;
+	}
+
+	body {
+		position: relative !important;
+		height: auto;
+		background: none !important;
+
+		--bs-primary: var(--royal-blue);
+		--bs-primary-rgb: var(--royal-blue-rgb);
+
+		--bs-secondary: var(--lavender-mist);
+		--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+		--bs-light: var(--polar-mist);
+		--bs-light-rgb: var(--polar-mist-rgb);
+
+		--bs-dark: var(--deep-space-blue);
+		--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+		--bs-link-color: var(--royal-blue);
+		--bs-link-color-rgb: var(--royal-blue-rgb);
+
+		--bs-link-hover-color: var(--royal-blue);
+		--bs-link-hover-color-rgb: var(--royal-blue-rgb);
+
+		--bs-code-color: var(--teal);
+		--bs-code-color-rgb: var(--teal-rgb);
+
+		--bs-body-bg: var(--polar-mist);
+		--bs-body-bg-rgb: var(--polar-mist-rgb);
+
+		--bs-body-color: var(--black);
+		--bs-body-color-rgb: var(--black-rgb);
+
+		--bs-border-color: var(--lavender-mist);
+		--bs-border-color-rgb: var(--lavender-mist-rgb);
+
+		--bs-input-bg-color: var(--white);
+		--bs-input-bg-color-rgb: var(--white-rgb);
+
+		--bs-element-bg-color: var(--white);
+		--bs-element-bg-color-rgb: var(--white-rgb);
+
+		--bs-table-color: var(--bs-dark);
+
+		&.print-portrait {
+			width: 900px;
+		}
+	}
+
+	#app {
+		height: 100%;
+		overflow: visible;
+		display: block;
+	}
+
+	button, .btn-sm, .btn .btn-primary, .btn-primary {
+		display: none !important;
+	}
+
+	.card {
+		box-shadow: none !important;
+		border: 0 !important;
+		.card-header {
+			background-color: var(--white);
+			&.print-card-header {
+				min-height: auto;
+				.flex-fill {
+					height: auto;
+				}
+			}
+
+			i:not(.text-warning) {
+				display: none !important;
+			}
+			h3 {
+				font-size: 32px !important;
+			}
+		}
+		.card-body {
+			color: inherit !important;
+		}
+		.card-footer, .card-footer-flex, .input-group {
+			display: none !important;
+		}
+	}
+
+	.datatable2 {
+		margin-bottom: 0;
+		table-layout: auto;
+		td, th {
+			font-size: 12px;
+			padding: .25rem;
+		}
+		td {
+			white-space: normal;
+			& > * {
+				white-space: normal;
+			}
+		}
+		tr {
+			page-break-inside: avoid;
+		}
+		tfoot {
+			display: none;
+		}
+	}
+
+	.text-muted {
+		color: var(--bs-gray-700) !important;
+	}
+
+	.container {
+		max-width: 100% !important;
+	}
+
+	.progress-bar {
+		display: none !important;
+	}
+
+	table, .table {
+		--bs-table-color: var(--bs-dark);
+	}
+
+	.react-grid-item {
+		.recharts-tooltip-wrapper {
+			display: none !important;
+		}
+		.table-widget, .value-widget {
+			display: contents !important;
+		}
+	}
+
+
+	.reports-container {
+		padding-top: 0 !important;
+		.react-grid-layout {
+			height: unset !important;
+			display: table;
+			text-align: center;
+			.react-grid-item {
+				display: inline-block;
+				position: unset !important;
+				transform: unset !important;
+				text-align: initial;
+			}
+		}
+	}
+
+	.dashboard-container {
+		&.display-print {
+			.react-grid-layout {
+				position: static !important;
+				height: initial !important;
+				.react-grid-item {
+					display: block !important; /*avoid widgets breaking on transition between pages*/
+					margin: 0 auto 20px;
+					position: static !important;
+
+					height: initial !important; /* Alternatively, set "height: initial !important;" */
+					width: initial !important; /* Alternatively, set "width: initial !important;" */
+
+					break-inside: avoid;
+					page-break-inside: avoid; /*avoid widgets breaking on transition between pages*/
+				}
+			}
+			.recharts-responsive-container {
+				.recharts-wrapper {
+					width: 100% !important;
+					.recharts-surface, .recharts-legend-wrapper {
+						width: 100% !important;
+					}
+				}
+			}
+		}
+	}
+}

package/dist/styles/index.scss

@@ -0,0 +1,15 @@
+// This is the styling entry point
+
+@use './constants';
+
+@use './components/html';
+@use './components/card';
+@use './components/alert';
+@use './components/button.scss';
+@use './components/form';
+
+// Import default bootstrap styles
+@import 'bootstrap/dist/css/bootstrap.min.css';
+
+// Bootstrap icons import
+@import 'bootstrap-icons/font/bootstrap-icons.min.css';

package/dist/utils/ErrorHandler.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorHandler = ErrorHandler;
+var _reactI18next = require("react-i18next");
+/*
+	- Component responsible for handling and displaying error messages.
+	- The 'error' prop is an object that contains the error message and any which contains a dictionary with variables, if any, in the error message.
+	- Using "escapeValue: false" leaves the characters which would be normally escaped by i18n library in original form.
+		In this case its mostly forward slashes provided within the error.
+		More info can be found: https://www.i18next.com/translation-function/interpolation.
+*/
+
+function ErrorHandler(_ref) {
+  var _ref$error = _ref.error,
+    error = _ref$error === void 0 ? {} : _ref$error;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  if (error.error_dict) {
+    error.error_dict['interpolation'] = {
+      escapeValue: false
+    };
+  }
+  return t(error.error, error.error_dict);
+}