From 770ab6f01dc81a16f384f314982bd761540f8e65 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 19 Dec 2022 12:11:50 -0300 Subject: build and test like other webapps --- packages/merchant-backoffice-ui/package.json | 54 +++------- .../merchant-backoffice-ui/src/Application.tsx | 109 +++++++++++++++++++++ .../src/components/menu/SideBar.tsx | 5 +- packages/merchant-backoffice-ui/src/custom.d.ts | 2 + packages/merchant-backoffice-ui/src/index.html | 39 ++++++++ packages/merchant-backoffice-ui/src/index.tsx | 94 +----------------- .../merchant-backoffice-ui/src/scss/_mixins.scss | 2 +- packages/merchant-backoffice-ui/src/template.html | 52 ---------- 8 files changed, 172 insertions(+), 185 deletions(-) create mode 100644 packages/merchant-backoffice-ui/src/Application.tsx create mode 100644 packages/merchant-backoffice-ui/src/index.html delete mode 100644 packages/merchant-backoffice-ui/src/template.html (limited to 'packages') diff --git a/packages/merchant-backoffice-ui/package.json b/packages/merchant-backoffice-ui/package.json index a772f6296..b78b3636c 100644 --- a/packages/merchant-backoffice-ui/package.json +++ b/packages/merchant-backoffice-ui/package.json @@ -4,31 +4,20 @@ "version": "0.0.4", "license": "MIT", "scripts": { - "build": "preact build --no-sw --no-esm", - "compile": "tsc", - "serve": "sirv build --port ${PORT:=8080} --cors --single", + "build": "./build.mjs", + "check": "tsc", + "compile": "tsc && ./build.mjs", "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm", - "lint-check": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'", - "lint-fix": "eslint --fix '{src,tests}/**/*.{js,jsx,ts,tsx}'", - "test": "jest ./tests", - "dev-test": "jest ./tests --watch", + "test": "pnpm compile && mocha --require source-map-support/register 'dist/**/test.js'", + "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", + "i18n:extract": "pogen extract", + "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", - "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" + "pretty": "prettier --write src" }, "eslintConfig": { - "parser": "@typescript-eslint/parser", - "extends": [ - "preact", - "plugin:@typescript-eslint/recommended" - ], "plugins": [ "header" ], @@ -38,8 +27,8 @@ "copyleft-header.js" ] }, - "ignorePatterns": [ - "build/" + "extends": [ + "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-loader": "10.1.1", - "script-ext-html-webpack-plugin": "^2.1.5", - "sirv-cli": "^1.0.11", + "sass": "1.56.1", "typedoc": "^0.20.36", "typescript": "4.8.4" }, diff --git a/packages/merchant-backoffice-ui/src/Application.tsx b/packages/merchant-backoffice-ui/src/Application.tsx new file mode 100644 index 000000000..4aa0f7891 --- /dev/null +++ b/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 + */ + +/** +* +* @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 ( + // + + + + + + // + ); +} + +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
+ + +
+ } + + if (result.clientError && result.isUnauthorized) return
+ + +
+ + if (result.clientError && result.isNotfound) return
+ + + +
+ + if (result.serverError) return
+ + + +
+ + if (result.loading) return + + if (!result.ok) return
+ + + +
+ + return
+ + + +
+} diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index b96e431f8..1d15bb094 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/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}) diff --git a/packages/merchant-backoffice-ui/src/custom.d.ts b/packages/merchant-backoffice-ui/src/custom.d.ts index b357d34ab..e60fa0c83 100644 --- a/packages/merchant-backoffice-ui/src/custom.d.ts +++ b/packages/merchant-backoffice-ui/src/custom.d.ts @@ -38,3 +38,5 @@ declare module '*.scss' { const content: Record; export default content; } +declare const __VERSION__: string; +declare const __GIT_HASH__: string; diff --git a/packages/merchant-backoffice-ui/src/index.html b/packages/merchant-backoffice-ui/src/index.html new file mode 100644 index 000000000..5f7080df8 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Merchant Backoffice + + + + + + + +
+ + diff --git a/packages/merchant-backoffice-ui/src/index.tsx b/packages/merchant-backoffice-ui/src/index.tsx index 3802a2149..c60471099 100644 --- a/packages/merchant-backoffice-ui/src/index.tsx +++ b/packages/merchant-backoffice-ui/src/index.tsx @@ -14,97 +14,11 @@ GNU Taler; see the file COPYING. If not, see */ -/** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ +import {Application} from "./Application.js"; -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'; +import { h, render } from "preact"; import "./scss/main.scss"; -export default function Application(): VNode { - return ( - // - - - - - - // - ); -} +const app = document.getElementById("app"); -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
- - -
- } - - if (result.clientError && result.isUnauthorized) return
- - -
- - if (result.clientError && result.isNotfound) return
- - - -
- - if (result.serverError) return
- - - -
- - if (result.loading) return - - if (!result.ok) return
- - - -
- - return
- - - -
-} +render(, app as any); diff --git a/packages/merchant-backoffice-ui/src/scss/_mixins.scss b/packages/merchant-backoffice-ui/src/scss/_mixins.scss index 8df866de4..7d5f6b144 100644 --- a/packages/merchant-backoffice-ui/src/scss/_mixins.scss +++ b/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; } } } diff --git a/packages/merchant-backoffice-ui/src/template.html b/packages/merchant-backoffice-ui/src/template.html deleted file mode 100644 index 306b90f11..000000000 --- a/packages/merchant-backoffice-ui/src/template.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - - - - - <% if (htmlWebpackPlugin.options.manifest.theme_color) { %> - - <% } %> - - <% for (const index in htmlWebpackPlugin.files.css) { %> - <% const file = htmlWebpackPlugin.files.css[index] %> - - <% } %> - - - - - - - - - -- cgit v1.2.3