From de9f10cbf0c694d004149a7d8f4b9a458b5b0a71 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 6 Dec 2022 11:25:37 -0300 Subject: using web-utils in merchant-backoffice (not yet completed) --- packages/merchant-backoffice-ui/build.mjs | 147 +++++++++++++++++++++ packages/merchant-backoffice-ui/dev.mjs | 30 +++++ packages/merchant-backoffice-ui/package.json | 3 +- .../src/paths/index.stories.ts | 2 + packages/merchant-backoffice-ui/src/stories.tsx | 46 +++++++ 5 files changed, 227 insertions(+), 1 deletion(-) create mode 100755 packages/merchant-backoffice-ui/build.mjs create mode 100755 packages/merchant-backoffice-ui/dev.mjs create mode 100644 packages/merchant-backoffice-ui/src/paths/index.stories.ts create mode 100644 packages/merchant-backoffice-ui/src/stories.tsx diff --git a/packages/merchant-backoffice-ui/build.mjs b/packages/merchant-backoffice-ui/build.mjs new file mode 100755 index 000000000..c93b4eb67 --- /dev/null +++ b/packages/merchant-backoffice-ui/build.mjs @@ -0,0 +1,147 @@ +#!/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 esbuild from "esbuild"; +import path from "path"; +import fs from "fs"; +import sass from "sass"; + +// eslint-disable-next-line no-undef +const BASE = process.cwd(); + +const preact = path.join( + BASE, + "node_modules", + "preact", + "compat", + "dist", + "compat.module.js", +); + +const preactCompatPlugin = { + name: "preact-compat", + setup(build) { + build.onResolve({ filter: /^(react-dom|react)$/ }, (args) => { + //console.log("onresolve", JSON.stringify(args, undefined, 2)); + return { + path: preact, + }; + }); + }, +}; + +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(); + +let _package = JSON.parse(fs.readFileSync(path.join(BASE, "package.json"))); + +function git_hash() { + const rev = fs + .readFileSync(path.join(GIT_ROOT, ".git", "HEAD")) + .toString() + .trim() + .split(/.*[: ]/) + .slice(-1)[0]; + if (rev.indexOf("/") === -1) { + return rev; + } else { + return fs.readFileSync(path.join(GIT_ROOT, ".git", rev)).toString().trim(); + } +} + +// FIXME: Put this into some helper library. +function copyFilesPlugin(options) { + return { + name: "copy-files", + setup(build) { + build.onEnd(() => { + for (const fop of options) { + fs.copyFileSync(fop.src, fop.dest); + } + }); + }, + }; +} + +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, + outdir: "dist", + minify: false, + loader: { + ".svg": "file", + ".png": "dataurl", + ".jpeg": "dataurl", + '.ttf': 'file', + '.woff': 'file', + '.woff2': 'file', + '.eot': 'file', + }, + target: ["es6"], + format: "esm", + platform: "browser", + sourcemap: true, + jsxFactory: "h", + jsxFragment: "Fragment", + define: { + __VERSION__: `"${_package.version}"`, + __GIT_HASH__: `"${GIT_HASH}"`, + }, + plugins: [ + preactCompatPlugin, + copyFilesPlugin([ + { + src: "./src/index.html", + dest: "./dist/index.html", + }, + ]), + buildSassPlugin + ], +}; + +await esbuild.build(buildConfig) diff --git a/packages/merchant-backoffice-ui/dev.mjs b/packages/merchant-backoffice-ui/dev.mjs new file mode 100755 index 000000000..35a9fa16c --- /dev/null +++ b/packages/merchant-backoffice-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/merchant-backoffice-ui/package.json b/packages/merchant-backoffice-ui/package.json index f7e0972ec..91c4c1857 100644 --- a/packages/merchant-backoffice-ui/package.json +++ b/packages/merchant-backoffice-ui/package.json @@ -44,6 +44,7 @@ }, "dependencies": { "@gnu-taler/taler-util": "workspace:*", + "@gnu-taler/web-util": "workspace:*", "axios": "^0.21.1", "date-fns": "2.29.3", "history": "4.10.1", @@ -122,4 +123,4 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "/tests/__mocks__/fileTransformer.js" } } -} +} \ No newline at end of file diff --git a/packages/merchant-backoffice-ui/src/paths/index.stories.ts b/packages/merchant-backoffice-ui/src/paths/index.stories.ts new file mode 100644 index 000000000..b3811fd4f --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/index.stories.ts @@ -0,0 +1,2 @@ +export * as a1 from "./admin/create/Create.stories.js"; +export * as a2 from "./instance/details/Details.stories.js"; \ No newline at end of file diff --git a/packages/merchant-backoffice-ui/src/stories.tsx b/packages/merchant-backoffice-ui/src/stories.tsx new file mode 100644 index 000000000..b7136d185 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/stories.tsx @@ -0,0 +1,46 @@ +/* + This file is part of GNU Anastasis + (C) 2021-2022 Anastasis SARL + + GNU Anastasis is free software; you can redistribute it and/or modify it under the + terms of the GNU Affero General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Anastasis 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 Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License along with + GNU Anastasis; see the file COPYING. If not, see + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { strings } from "./i18n/strings.js"; + +import * as pages from "./paths/index.stories.js"; + +import { renderStories } from "@gnu-taler/web-util/lib/index.browser"; + +import "./scss/main.scss"; + +function SortStories(a: any, b: any): number { + return (a?.order ?? 0) - (b?.order ?? 0); +} + +function main(): void { + renderStories( + { pages }, + { + strings, + }, + ); +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", main); +} else { + main(); +} -- cgit v1.2.3