From 5969a44391f32d931d0b26416fb3e1528f4a32a2 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 6 Dec 2022 11:25:05 -0300 Subject: using web-utils in demobank --- packages/demobank-ui/build.mjs | 43 +++- packages/demobank-ui/dev.mjs | 30 +++ packages/demobank-ui/package.json | 7 +- .../demobank-ui/src/components/menu/SideBar.tsx | 9 +- .../src/components/picker/DurationPicker.tsx | 12 +- packages/demobank-ui/src/context/translation.ts | 52 +++-- packages/demobank-ui/src/hooks/index.ts | 79 +------ packages/demobank-ui/src/hooks/useLang.ts | 30 +++ packages/demobank-ui/src/hooks/useLocalStorage.ts | 80 +++++++ packages/demobank-ui/src/i18n/index.tsx | 201 ------------------ packages/demobank-ui/src/index.html | 15 +- packages/demobank-ui/src/index.tsx | 1 + .../src/pages/home/QrCodeSection.stories.tsx | 33 +++ .../demobank-ui/src/pages/home/QrCodeSection.tsx | 55 +++++ .../demobank-ui/src/pages/home/index.stories.tsx | 1 + packages/demobank-ui/src/pages/home/index.tsx | 234 +++++++++------------ packages/demobank-ui/src/scss/main.scss | 8 +- packages/demobank-ui/src/stories.tsx | 46 ++++ packages/demobank-ui/static/index.html | 15 -- 19 files changed, 477 insertions(+), 474 deletions(-) create mode 100755 packages/demobank-ui/dev.mjs create mode 100644 packages/demobank-ui/src/hooks/useLang.ts create mode 100644 packages/demobank-ui/src/hooks/useLocalStorage.ts delete mode 100644 packages/demobank-ui/src/i18n/index.tsx create mode 100644 packages/demobank-ui/src/pages/home/QrCodeSection.stories.tsx create mode 100644 packages/demobank-ui/src/pages/home/QrCodeSection.tsx create mode 100644 packages/demobank-ui/src/pages/home/index.stories.tsx create mode 100644 packages/demobank-ui/src/stories.tsx delete mode 100644 packages/demobank-ui/static/index.html (limited to 'packages/demobank-ui') diff --git a/packages/demobank-ui/build.mjs b/packages/demobank-ui/build.mjs index 63ddc1f25..c93b4eb67 100755 --- a/packages/demobank-ui/build.mjs +++ b/packages/demobank-ui/build.mjs @@ -18,9 +18,9 @@ import esbuild from "esbuild"; import path from "path"; import fs from "fs"; -import crypto from "crypto"; -import { sassPlugin } from "esbuild-sass-plugin"; +import sass from "sass"; +// eslint-disable-next-line no-undef const BASE = process.cwd(); const preact = path.join( @@ -44,14 +44,16 @@ const preactCompatPlugin = { }, }; -const entryPoints = ["src/index.tsx"]; +const entryPoints = ["src/index.tsx", "src/stories.tsx"]; let GIT_ROOT = BASE; while (!fs.existsSync(path.join(GIT_ROOT, ".git")) && GIT_ROOT !== "/") { GIT_ROOT = path.join(GIT_ROOT, "../"); } if (GIT_ROOT === "/") { + // eslint-disable-next-line no-undef console.log("not found"); + // eslint-disable-next-line no-undef process.exit(1); } const GIT_HASH = GIT_ROOT === "/" ? undefined : git_hash(); @@ -86,6 +88,26 @@ function copyFilesPlugin(options) { }; } +const DEFAULT_SASS_FILTER = /\.(s[ac]ss|css)$/ + +const buildSassPlugin = { + name: "custom-build-sass", + setup(build) { + + build.onLoad({ filter: DEFAULT_SASS_FILTER }, ({ path: file }) => { + const resolveDir = path.dirname(file) + const { css: contents } = sass.compile(file, { loadPaths: ["./"] }) + + return { + resolveDir, + loader: 'css', + contents + } + }); + + }, +}; + export const buildConfig = { entryPoints: [...entryPoints], bundle: true, @@ -95,6 +117,10 @@ export const buildConfig = { ".svg": "file", ".png": "dataurl", ".jpeg": "dataurl", + '.ttf': 'file', + '.woff': 'file', + '.woff2': 'file', + '.eot': 'file', }, target: ["es6"], format: "esm", @@ -108,17 +134,14 @@ export const buildConfig = { }, plugins: [ preactCompatPlugin, - sassPlugin(), copyFilesPlugin([ { - src: "static/index.html", - dest: "dist/index.html", + src: "./src/index.html", + dest: "./dist/index.html", }, ]), + buildSassPlugin ], }; -esbuild.build(buildConfig).catch((e) => { - console.log(e); - process.exit(1); -}); +await esbuild.build(buildConfig) diff --git a/packages/demobank-ui/dev.mjs b/packages/demobank-ui/dev.mjs new file mode 100755 index 000000000..35a9fa16c --- /dev/null +++ b/packages/demobank-ui/dev.mjs @@ -0,0 +1,30 @@ +#!/usr/bin/env node +/* + This file is part of GNU Taler + (C) 2022 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 + */ + +import { serve } from "@gnu-taler/web-util/lib/index.node"; +import esbuild from "esbuild"; +import { buildConfig } from "./build.mjs"; + +buildConfig.inject = ['./node_modules/@gnu-taler/web-util/lib/live-reload.mjs'] + +serve({ + folder: './dist', + port: 8080, + source: './src', + development: true, + onUpdate: async () => esbuild.build(buildConfig) +}) diff --git a/packages/demobank-ui/package.json b/packages/demobank-ui/package.json index cc8048a0f..41031977f 100644 --- a/packages/demobank-ui/package.json +++ b/packages/demobank-ui/package.json @@ -11,13 +11,13 @@ }, "dependencies": { "@gnu-taler/taler-util": "workspace:*", + "@gnu-taler/web-util": "workspace:*", "date-fns": "2.29.3", "history": "4.10.1", "jed": "1.1.1", - "preact": "10.6.5", + "preact": "10.11.3", "preact-router": "3.2.1", "qrcode-generator": "^1.4.4", - "react": "npm:@preact/compat@^17.1.2", "swr": "1.3.0" }, "devDependencies": { @@ -30,11 +30,10 @@ "bulma-checkbox": "^1.1.1", "bulma-radio": "^1.1.1", "esbuild": "^0.15.12", - "esbuild-sass-plugin": "^2.4.0", "eslint": "^8.26.0", "eslint-config-preact": "^1.2.0", "po2json": "^0.4.5", - "sass": "1.32.13", + "sass": "1.56.1", "typescript": "^4.4.4" } } diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx index d7833df5a..7bfba2a75 100644 --- a/packages/demobank-ui/src/components/menu/SideBar.tsx +++ b/packages/demobank-ui/src/components/menu/SideBar.tsx @@ -20,7 +20,7 @@ */ import { h, VNode } from "preact"; -import { Translate } from "../../i18n"; +import { useTranslationContext } from "../../context/translation.js"; interface Props { mobile?: boolean; @@ -31,6 +31,7 @@ export function Sidebar({ mobile }: Props): VNode { const config = { version: "none" }; // FIXME: add replacement for __VERSION__ with the current version const process = { env: { __VERSION__: "0.0.0" } }; + const { i18n } = useTranslationContext(); return (