build and test like other webapps

packages/merchant-backoffice-ui/package.json

@@ -4,31 +4,20 @@
   "version": "0.0.4",
   "license": "MIT",
   "scripts": {
-    "build": "preact build --no-sw --no-esm",
+    "build": "./build.mjs",
-    "compile": "tsc",
+    "check": "tsc",
-    "serve": "sirv build --port ${PORT:=8080} --cors --single",
+    "compile": "tsc && ./build.mjs",
     "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm",
-    "lint-check": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "test": "pnpm compile && mocha --require source-map-support/register 'dist/**/test.js'",
-    "lint-fix": "eslint --fix '{src,tests}/**/*.{js,jsx,ts,tsx}'",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "test": "jest ./tests",
+    "i18n:extract": "pogen extract",
-    "dev-test": "jest ./tests --watch",
+    "i18n:merge": "pogen merge",
+    "i18n:emit": "pogen emit",
+    "i18n": "pnpm i18n:extract && pnpm i18n:merge && pnpm i18n:emit",
     "typedoc": "typedoc src",
-    "clean": "rimraf build storybook-static docs single",
+    "pretty": "prettier --write src"
-    "build-single": "preact build --no-sw --no-esm -c preact.single-config.js --dest single && sh remove-link-stylesheet.sh",
-    "serve-single": "sirv single --port ${PORT:=8080} --cors --single",
-    "build-storybook": "build-storybook",
-    "storybook": "start-storybook -p 6006"
-  },
-  "engines": {
-    "node": ">=12",
-    "pnpm": ">=5"
   },
   "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "preact",
-      "plugin:@typescript-eslint/recommended"
-    ],
     "plugins": [
       "header"
     ],
@@ -38,8 +27,8 @@
         "copyleft-header.js"
       ]
     },
-    "ignorePatterns": [
+    "extends": [
-      "build/"
+      "prettier"
     ]
   },
   "dependencies": {
@@ -53,20 +42,11 @@
     "preact-router": "3.2.1",
     "qrcode-generator": "1.4.4",
     "swr": "1.3.0",
-    "react": "npm:@preact/compat@^17.1.2",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/core": "7.18.9",
-    "@babel/plugin-transform-react-jsx-source": "7.18.6",
     "@creativebulma/bulma-tooltip": "^1.2.0",
     "@gnu-taler/pogen": "^0.0.5",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/preact": "^6.2.9",
-    "@storybook/preset-scss": "^1.0.3",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/history": "^4.7.8",
@@ -75,7 +55,6 @@
     "@types/node": "^18.8.5",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-    "babel-loader": "^8.2.2",
     "base64-inline-loader": "^1.1.1",
     "bulma": "^0.9.2",
     "bulma-checkbox": "^1.1.1",
@@ -94,15 +73,8 @@
     "inline-chunk-html-plugin": "^1.1.1",
     "jest": "^26.6.3",
     "jest-preset-preact": "^4.0.2",
-    "po2json": "^0.4.5",
-    "preact-cli": "^3.0.5",
-    "preact-render-to-json": "^3.6.6",
-    "preact-render-to-string": "^5.1.19",
     "rimraf": "^3.0.2",
-    "sass": "^1.32.13",
+    "sass": "1.56.1",
-    "sass-loader": "10.1.1",
-    "script-ext-html-webpack-plugin": "^2.1.5",
-    "sirv-cli": "^1.0.11",
     "typedoc": "^0.20.36",
     "typescript": "4.8.4"
   },

packages/merchant-backoffice-ui/src/Application.tsx

@@ -0,0 +1,109 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021-2023 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import { route } from 'preact-router';
+import { useMemo } from "preact/hooks";
+import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes.js";
+import { Loading } from "./components/exception/loading.js";
+import { NotificationCard, NotYetReadyAppMenu } from "./components/menu/index.js";
+import { BackendContextProvider, useBackendContext } from './context/backend.js';
+import { ConfigContextProvider } from './context/config.js';
+import { TranslationProvider } from './context/translation.js';
+import { useBackendConfig } from "./hooks/backend.js";
+import { useTranslator } from './i18n/index.js';
+import LoginPage from './paths/login/index.js';
+
+export function Application(): VNode {
+  return (
+    // <FetchContextProvider>
+      <BackendContextProvider>
+        <TranslationProvider>
+          <ApplicationStatusRoutes />
+        </TranslationProvider>
+      </BackendContextProvider>
+    // </FetchContextProvider>
+  );
+}
+
+function ApplicationStatusRoutes(): VNode {
+  const { updateLoginStatus, triedToLog } = useBackendContext()
+  const result = useBackendConfig();
+  const i18n = useTranslator()
+
+  const updateLoginInfoAndGoToRoot = (url: string, token?: string) => {
+    updateLoginStatus(url, token)
+    route('/')
+  }
+
+  const { currency, version } = result.ok ? result.data : { currency: 'unknown', version: 'unknown' }
+  const ctx = useMemo(() => ({ currency, version }), [currency, version])
+
+  if (!triedToLog) {
+    return <div id="app">
+      <NotYetReadyAppMenu title="Welcome!" />
+      <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+    </div>
+  }
+
+  if (result.clientError && result.isUnauthorized) return <div id="app">
+    <NotYetReadyAppMenu title="Login" />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.clientError && result.isNotfound) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Server not found`,
+      type: 'ERROR',
+      description: `Check your url`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.serverError) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Couldn't access the server`,
+      type: 'ERROR',
+      description: i18n`Got message ${result.message} from ${result.info?.url}`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  if (result.loading) return <Loading />
+
+  if (!result.ok) return <div id="app">
+    <NotYetReadyAppMenu title="Error" />
+    <NotificationCard notification={{
+      message: i18n`Unexpected Error`,
+      type: 'ERROR',
+      description: i18n`Got message ${result.message} from ${result.info?.url}`,
+    }} />
+    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
+  </div>
+
+  return <div id="app" class="has-navbar-fixed-top">
+    <ConfigContextProvider value={ctx}>
+      <ApplicationReadyRoutes />
+    </ConfigContextProvider>
+  </div>
+}

packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx

@@ -28,6 +28,9 @@ import { useInstanceKYCDetails } from "../../hooks/instance.js";
 import { Translate } from "../../i18n/index.js";
 import { LangSelector } from "./LangSelector.js";
 
+const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
+const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
+
 interface Props {
   onLogout: () => void;
   mobile?: boolean;
@@ -76,7 +79,7 @@ export function Sidebar({
             class="is-size-7 has-text-right"
             style={{ lineHeight: 0, marginTop: -10 }}
           >
-            {process.env.__VERSION__} ({config.version})
+            {VERSION} ({config.version})
           </div>
         </div>
       </div>

packages/merchant-backoffice-ui/src/custom.d.ts

@@ -38,3 +38,5 @@ declare module '*.scss' {
   const content: Record<string, string>;
   export default content;
 }
+declare const __VERSION__: string;
+declare const __GIT_HASH__: string;

packages/merchant-backoffice-ui/src/index.html

@@ -1,5 +1,5 @@
 <!--
-	 This file is part of GNU Taler
+ This file is part of GNU Taler
  (C) 2021-2023 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
@@ -17,36 +17,23 @@
 -->
 <!DOCTYPE html>
 <html lang="en" class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded">
-	<head>
+  <head>
-		<meta charset="utf-8">
+    <meta charset="utf-8" />
-		<title><%= htmlWebpackPlugin.options.title %></title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
-		<meta name="mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
 
 		<link rel="icon" href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" />
 		<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
-
+    <title>Merchant Backoffice</title>
-		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+    <!-- Optional customization script.  -->
-			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+    <script src="merchant-backoffice-ui-settings.js"></script>
-		<% } %>
+    <!-- Entry point for the demobank SPA. -->
-
+    <script type="module" src="index.js"></script>
-		<% for (const index in htmlWebpackPlugin.files.css) { %>
+    <link rel="stylesheet" href="index.css" />
-			<% const file = htmlWebpackPlugin.files.css[index] %>
+  </head>
-			<style data-href='<%= file %>' >
+  <body>
-				<%= compilation.assets[file.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
+    <div id="app"></div>
-			</style>
+  </body>
-		<% } %>
-		
-	</head>
-	<body>
-
-		<script>
-			<%= compilation.assets[htmlWebpackPlugin.files.chunks["polyfills"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
-		</script>
-		<script>
-			<%= compilation.assets[htmlWebpackPlugin.files.chunks["bundle"].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
-		</script>
-
-	</body>
 </html>

packages/merchant-backoffice-ui/src/index.tsx

@@ -14,97 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-/**
+import {Application} from "./Application.js";
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
 
-import { h, VNode } from 'preact';
+import { h, render } from "preact";
-import { route } from 'preact-router';
-import { useMemo } from "preact/hooks";
-import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes.js";
-import { Loading } from "./components/exception/loading.js";
-import { NotificationCard, NotYetReadyAppMenu } from "./components/menu/index.js";
-import { BackendContextProvider, useBackendContext } from './context/backend.js';
-import { ConfigContextProvider } from './context/config.js';
-import { TranslationProvider } from './context/translation.js';
-import { useBackendConfig } from "./hooks/backend.js";
-import { useTranslator } from './i18n/index.js';
-import LoginPage from './paths/login/index.js';
 import "./scss/main.scss";
 
-export default function Application(): VNode {
+const app = document.getElementById("app");
-  return (
-    // <FetchContextProvider>
-      <BackendContextProvider>
-        <TranslationProvider>
-          <ApplicationStatusRoutes />
-        </TranslationProvider>
-      </BackendContextProvider>
-    // </FetchContextProvider>
-  );
-}
 
-function ApplicationStatusRoutes(): VNode {
+render(<Application />, app as any);
-  const { updateLoginStatus, triedToLog } = useBackendContext()
-  const result = useBackendConfig();
-  const i18n = useTranslator()
-
-  const updateLoginInfoAndGoToRoot = (url: string, token?: string) => {
-    updateLoginStatus(url, token)
-    route('/')
-  }
-
-  const { currency, version } = result.ok ? result.data : { currency: 'unknown', version: 'unknown' }
-  const ctx = useMemo(() => ({ currency, version }), [currency, version])
-
-  if (!triedToLog) {
-    return <div id="app">
-      <NotYetReadyAppMenu title="Welcome!" />
-      <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
-    </div>
-  }
-
-  if (result.clientError && result.isUnauthorized) return <div id="app">
-    <NotYetReadyAppMenu title="Login" />
-    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
-  </div>
-
-  if (result.clientError && result.isNotfound) return <div id="app">
-    <NotYetReadyAppMenu title="Error" />
-    <NotificationCard notification={{
-      message: i18n`Server not found`,
-      type: 'ERROR',
-      description: `Check your url`,
-    }} />
-    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
-  </div>
-
-  if (result.serverError) return <div id="app">
-    <NotYetReadyAppMenu title="Error" />
-    <NotificationCard notification={{
-      message: i18n`Couldn't access the server`,
-      type: 'ERROR',
-      description: i18n`Got message ${result.message} from ${result.info?.url}`,
-    }} />
-    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
-  </div>
-
-  if (result.loading) return <Loading />
-
-  if (!result.ok) return <div id="app">
-    <NotYetReadyAppMenu title="Error" />
-    <NotificationCard notification={{
-      message: i18n`Unexpected Error`,
-      type: 'ERROR',
-      description: i18n`Got message ${result.message} from ${result.info?.url}`,
-    }} />
-    <LoginPage onConfirm={updateLoginInfoAndGoToRoot} />
-  </div>
-
-  return <div id="app" class="has-navbar-fixed-top">
-    <ConfigContextProvider value={ctx}>
-      <ApplicationReadyRoutes />
-    </ConfigContextProvider>
-  </div>
-}

packages/merchant-backoffice-ui/src/scss/_mixins.scss

@@ -28,7 +28,7 @@
     width: $icon-base-width;
 
     &.has-update-mark:after {
-      right: ($icon-base-width / 2) - .85;
+      right: calc($icon-base-width / 2) - .85;
     }
   }
 }