@nu-art/thunderstorm-frontend 0.400.5

package/server-info/Button_VersionUpdate.scss

@@ -0,0 +1,29 @@
+@use '@nu-art/ts-styles' as styles;
+
+@keyframes fadeInOut {
+  0%, 66.67% {
+    opacity: 1; // 4s visible
+  }
+  83.33% {
+    opacity: 0; // 1s fade out
+  }
+  100% {
+    opacity: 1; // 1s fade in
+  }
+}
+
+.version-update-message {
+  opacity: 1;
+  animation: fadeInOut 6s infinite; // 6 seconds total (4s visible, 1s fade out, 1s fade in)
+  cursor: pointer;
+  font: {
+    size: 16px;
+    weight: 650;
+  }
+  color: white;
+
+  &:hover {
+    color: styles.gray(3);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+}

package/server-info/ModuleFE_ServerInfo.d.ts

@@ -0,0 +1,26 @@
+import { Module } from '@nu-art/ts-common';
+import { ApiStruct_ServerInfo } from '@nu-art/thunderstorm-shared/server-info/api';
+import { ApiCallerRouter, ApiDefCaller } from '@nu-art/thunderstorm-shared';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+export declare const StorageKey_ServerVersion: StorageKey<string>;
+export interface OnServerInfoUpdatedListener {
+    __onServerInfoUpdated: () => void;
+}
+declare class ModuleFE_ServerInfo_Class extends Module implements ApiDefCaller<ApiStruct_ServerInfo> {
+    v1: ApiCallerRouter<ApiStruct_ServerInfo>['v1'];
+    private serverInfoFirebaseListener?;
+    constructor();
+    startListening(): void;
+    stopListening(): void;
+    private onServerInfoDataChanged;
+    Version: {
+        getAppVersion: () => string;
+        getLatestVersion: () => string;
+        shouldUpdateVersion: () => boolean;
+    };
+    Update: {
+        updateAndRefreshPage: () => void;
+    };
+}
+export declare const ModuleFE_ServerInfo: ModuleFE_ServerInfo_Class;
+export {};

package/server-info/ModuleFE_ServerInfo.js

@@ -0,0 +1,73 @@
+import { compareVersions, currentTimeMillis, exists, Module, ModuleManager, RuntimeVersion } from '@nu-art/ts-common';
+import { apiWithQuery } from '../core/typed-api.js';
+import { ApiDef_ServerInfo } from '@nu-art/thunderstorm-shared/server-info/api';
+import { Default_ServerInfoNodePath } from '@nu-art/thunderstorm-shared';
+import { ModuleFE_FirebaseListener } from '@nu-art/firebase-frontend/ModuleFE_FirebaseListener/ModuleFE_FirebaseListener';
+import { ThunderDispatcher } from '../core/thunder-dispatcher.js';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+export const StorageKey_ServerVersion = new StorageKey('server-version');
+const dispatch_OnServerInfoUpdated = new ThunderDispatcher('__onServerInfoUpdated');
+class ModuleFE_ServerInfo_Class extends Module {
+    v1;
+    serverInfoFirebaseListener;
+    constructor() {
+        super();
+        this.v1 = {
+            getServerInfo: apiWithQuery(ApiDef_ServerInfo.v1.getServerInfo),
+            // @ts-ignore // to be used only by Jenkins
+            updateServerInfoState: undefined,
+        };
+    }
+    startListening() {
+        if (this.serverInfoFirebaseListener) {
+            this.logWarning(`Trying to start listening on --- ${Default_ServerInfoNodePath} --- but the listener already exists.`);
+            return;
+        }
+        this.serverInfoFirebaseListener = ModuleFE_FirebaseListener
+            .createListener(Default_ServerInfoNodePath)
+            .startListening(this.onServerInfoDataChanged);
+    }
+    stopListening() {
+        this.logDebug(`Stop listening on ${Default_ServerInfoNodePath}`);
+        this.serverInfoFirebaseListener?.stopListening();
+        this.serverInfoFirebaseListener = undefined;
+    }
+    onServerInfoDataChanged = async (snapshot) => {
+        const rtdbServerInfoData = snapshot.val();
+        if (!rtdbServerInfoData)
+            return this.logInfo(`Did not receive any ServerInfo via firebase listener`, '');
+        if (!exists(ModuleManager.instance.version))
+            ModuleManager.instance.setVersion(rtdbServerInfoData.version);
+        StorageKey_ServerVersion.set(rtdbServerInfoData.version);
+        dispatch_OnServerInfoUpdated.dispatchAll();
+    };
+    Version = {
+        getAppVersion: () => {
+            let version = RuntimeVersion();
+            if (!version) {
+                this.logWarning(`Couldn't find a version-app.json file to get the code version from.`, '');
+                version = '0.0.0';
+            }
+            this.logInfo(`Code version: ${version}`, '');
+            return version;
+        },
+        getLatestVersion: () => {
+            const version = StorageKey_ServerVersion.get() || '0.0.0';
+            this.logInfo(`Server version: ${version}`, '');
+            return version;
+        },
+        shouldUpdateVersion: () => {
+            const lastVersion = this.Version.getLatestVersion();
+            const codeVersion = this.Version.getAppVersion();
+            return compareVersions(codeVersion, lastVersion) === 1;
+        }
+    };
+    Update = {
+        updateAndRefreshPage: () => {
+            const url = new URL(window.location.href);
+            url.searchParams.set('update', currentTimeMillis() + '');
+            window.location.assign(url.toString());
+        }
+    };
+}
+export const ModuleFE_ServerInfo = new ModuleFE_ServerInfo_Class();

package/server-info/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button_VersionUpdate.js';
+export * from './ModuleFE_ServerInfo.js';

package/server-info/index.js

@@ -0,0 +1,2 @@
+export * from './Button_VersionUpdate.js';
+export * from './ModuleFE_ServerInfo.js';

package/shared.d.ts

@@ -0,0 +1 @@
+export * from '@nu-art/thunderstorm-shared';

package/shared.js

@@ -0,0 +1,21 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from '@nu-art/thunderstorm-shared';

package/styles/declaration/basic.scss

@@ -0,0 +1,155 @@
+//@use "@nu-art/thunderstorm-frontend/styles" as *;
+
+%match_height {
+  height: 100%
+}
+
+%match_width {
+  width: 100%
+}
+
+%match_parent {
+  @extend %match_height;
+  @extend %match_width;
+}
+
+%flex__stretch {
+  place-items: stretch;
+}
+
+%flex__justify-center {
+  justify-content: center;
+}
+
+%flex__space-between {
+  justify-content: space-between;
+}
+
+%flex__space-evenly {
+  justify-content: space-evenly;
+}
+
+%flex__grow {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+%center_h {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+%center_v {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+%center {
+  margin: 0 auto;
+}
+
+%clickable {
+  cursor: pointer
+}
+
+%right {
+  right: 0;
+
+}
+
+%bottom {
+  bottom: 0;
+}
+
+%left {
+  left: 0;
+}
+
+%top {
+  top: 0;
+}
+
+%text_wrap {
+  * {
+    white-space: normal;
+  }
+}
+
+%text_nowrap {
+  * {
+    white-space: nowrap;
+  }
+}
+
+%center_children {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+%unselectable {
+  //Make text and image unselectable
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+%scrollable-y {
+  overflow-y: scroll;
+}
+
+%gap__s {
+  row-gap: 4px;
+  column-gap: 4px
+}
+
+%gap__n {
+  row-gap: 8px;
+  column-gap: 8px
+}
+
+%gap__l {
+  row-gap: 12px;
+  column-gap: 12px
+}
+
+%v-gap__s {
+  row-gap: 4px;
+}
+
+%v-gap__n {
+  row-gap: 8px;
+}
+
+%v-gap__l {
+  row-gap: 12px;
+}
+
+%v-gap__xl {
+  row-gap: 16px;
+}
+
+%v-gap__xxl {
+  row-gap: 20px;
+}
+
+%h-gap__s {
+  column-gap: 4px;
+}
+
+%h-gap__n {
+  column-gap: 8px;
+}
+
+%h-gap__l {
+  column-gap: 12px;
+}
+
+%h-gap__xl {
+  column-gap: 16px;
+}
+
+%h-gap__xxl {
+  column-gap: 20px;
+}

package/styles/declaration/mixins.scss

@@ -0,0 +1,58 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:math';
+@use 'sass:list';
+
+@mixin icon-size($width, $height: $width) {
+  width: $width;
+  height: $height;
+  min-width: $width;
+  min-height: $height;
+}
+
+@mixin icon-style-v4($color, $hoverColor:$color, $mouseDownColor:$hoverColor, $disabledColor:$color) {
+  display: inline-block;
+  background: $color;
+
+  &:hover {
+    background: $hoverColor;
+  }
+
+  &:active {
+    background: $mouseDownColor;
+  }
+}
+
+@mixin icon-url($icon) {
+  -webkit-mask-image: url($icon);
+  mask-image: url($icon);
+}
+
+@mixin spaces($depths, $depth-padding:15,$class-prefix:'depth') {
+  $depth-unit: 'px';
+  @for $i from 1 through $depths {
+    $val: $depth-padding * $i;
+    &.#{$class-prefix}-#{$i} {
+      padding-left: #{$val}#{$depth-unit};
+    }
+  }
+}

package/styles/impl/basic.scss

@@ -0,0 +1,141 @@
+@use '../declaration/basic' as *;
+// TODO - need to move Styled layout to infra.. and remove from here and from shared-components/layouts
+
+/**
+ * Dimension shit
+ */
+.match_height {
+  @extend %match_height;
+}
+
+.match_width {
+  @extend %match_width;
+}
+
+.match_parent {
+  @extend %match_parent;
+}
+
+.flex__stretch {
+  @extend %flex__stretch;
+}
+
+.flex__space-between {
+  @extend %flex__space-between;
+}
+
+.flex__justify-center {
+  @extend %flex__justify-center;
+}
+
+.flex__space-evenly {
+  @extend %flex__space-evenly;
+}
+
+.flex__grow {
+  @extend %flex__grow;
+}
+
+.center_h {
+  @extend %center_h;
+}
+
+.center_v {
+  @extend %center_v;
+}
+
+.center {
+  @extend %center;
+}
+
+.clickable {
+  @extend %clickable;
+}
+
+.right {
+  @extend %right;
+}
+
+.bottom {
+  @extend %bottom;
+}
+
+.left {
+  @extend %left;
+}
+
+.top {
+  @extend %top;
+}
+
+.text_wrap {
+  @extend %text_wrap;
+}
+
+.text_nowrap {
+  @extend %text_nowrap;
+}
+
+.center_children {
+  @extend %center_children;
+}
+
+.unselectable {
+  @extend %unselectable;
+}
+
+.scrollable-y {
+  @extend %scrollable-y;
+}
+
+.gap__s {
+  @extend %gap__s
+}
+
+.gap__n {
+  @extend %gap__n
+}
+
+.gap__l {
+  @extend %gap__l
+}
+
+.v-gap__s {
+  @extend %v-gap__s
+}
+
+.v-gap__n {
+  @extend %v-gap__n
+}
+
+.v-gap__l {
+  @extend %v-gap__l
+}
+
+.v-gap__xl {
+  @extend %v-gap__xl
+}
+
+.v-gap__xxl {
+  @extend %v-gap__xxl
+}
+
+.h-gap__s {
+  @extend %h-gap__s
+}
+
+.h-gap__n {
+  @extend %h-gap__n
+}
+
+.h-gap__l {
+  @extend %h-gap__l
+}
+
+.h-gap__xl {
+  @extend %h-gap__xl
+}
+
+.h-gap__xxl {
+  @extend %h-gap__xxl
+}

package/styles/impl/icons.scss

@@ -0,0 +1,34 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.icon--default {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  background: black;
+  mask-size: cover;
+  mask-repeat: no-repeat;
+
+  -webkit-mask-size: cover;
+  -webkit-mask-repeat: no-repeat;
+}
+

package/styles.scss

@@ -0,0 +1,40 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@forward "./components/Layouts/Layouts_";
+@forward "./styles/declaration/mixins";
+@forward "./styles/declaration/basic";
+
+.ts-languages__rtl {
+   direction: rtl;
+ }
+
+.ts-languages__ltr {
+  direction: rtl;
+}
+
+.ts-align-baseline {
+  align-self: baseline;
+}
+
+.ts-align-text-center {
+  text-align: center;
+}