diff options
author | Sebastian <sebasjm@gmail.com> | 2023-05-30 14:59:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-06-01 12:24:05 -0300 |
commit | 5e4c12831991660de627cad9c4ce0ee03ad5053d (patch) | |
tree | 5dce92a3f31c20c6da7e21bc466d17472378d697 /packages | |
parent | 592387cd742d2080eb3f53c755d53a4f017551be (diff) | |
download | wallet-core-5e4c12831991660de627cad9c4ce0ee03ad5053d.tar.xz |
use latest linaria lib
Diffstat (limited to 'packages')
50 files changed, 180 insertions, 166 deletions
diff --git a/packages/demobank-ui/dev.mjs b/packages/demobank-ui/dev.mjs index 0c8289156..b1bfc12eb 100755 --- a/packages/demobank-ui/dev.mjs +++ b/packages/demobank-ui/dev.mjs @@ -16,7 +16,7 @@ */ import { serve } from "@gnu-taler/web-util/node"; -import { initializeDev, getFilesInDirectory } from "@gnu-taler/web-util/build"; +import { initializeDev } from "@gnu-taler/web-util/build"; const devEntryPoints = ["src/stories.tsx", "src/index.tsx"]; @@ -26,6 +26,7 @@ const build = initializeDev({ assets: ["src/index.html"], }, destination: "./dist/dev", + public: "/app", css: "sass", }); diff --git a/packages/taler-wallet-webextension/babel.config-linaria.json b/packages/demobank-ui/src/pages/BankFrame.stories.tsx index dc9d579f3..a64885489 100644 --- a/packages/taler-wallet-webextension/babel.config-linaria.json +++ b/packages/demobank-ui/src/pages/BankFrame.stories.tsx @@ -13,18 +13,17 @@ 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) */ -/* - * Linaria need pre-process typscript files into javascript before running. - * We choose to use the default preact-cli config. - * This file should be used from @linaria/rollup plugin only - */ -{ - "presets": [ - "preact-cli/babel", - ], - "plugins": ["./trim-extension.cjs"], -} + +import * as tests from "@gnu-taler/web-util/testing"; +import { BankFrame } from "./BankFrame.js"; + +export default { + title: "bank frame", +}; + +export const Ready = tests.createExample(BankFrame, {}); diff --git a/packages/demobank-ui/src/pages/index.stories.tsx b/packages/demobank-ui/src/pages/index.stories.tsx index 10ce479a1..168e9938e 100644 --- a/packages/demobank-ui/src/pages/index.stories.tsx +++ b/packages/demobank-ui/src/pages/index.stories.tsx @@ -17,3 +17,4 @@ export * as qr from "./QrCodeSection.stories.js"; export * as po from "./PaymentOptions.stories.js"; export * as ptf from "./PaytoWireTransferForm.stories.js"; +export * as frame from "./BankFrame.stories.js"; diff --git a/packages/taler-wallet-webextension/build.mjs b/packages/taler-wallet-webextension/build.mjs index 889ba7d05..230a850e2 100755 --- a/packages/taler-wallet-webextension/build.mjs +++ b/packages/taler-wallet-webextension/build.mjs @@ -15,53 +15,12 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { - build, - computeConfig, - getFilesInDirectory, -} from "@gnu-taler/web-util/build"; import linaria from "@linaria/esbuild"; -import esbuild from "esbuild"; -import path from "path"; -import fs from "fs"; - -const BASE = process.cwd(); +import { build, getFilesInDirectory } from "@gnu-taler/web-util/build"; const allStaticFiles = getFilesInDirectory("static"); -// await build({ -// source: { -// js: [ -// "src/popupEntryPoint.tsx", -// "src/walletEntryPoint.tsx", -// "src/background.ts", -// "src/taler-wallet-interaction-loader.ts", -// "src/taler-wallet-interaction-support.ts", -// "src/browserWorkerEntry.ts", -// ], -// assets: allStaticFiles, -// }, -// destination: "./dist/prod", -// css: "linaria", -// }); -function copyFilesPlugin(files) { - return { - name: "copy-files", - setup(build) { - const outDir = build.initialOptions.outdir; - if (outDir === undefined) - throw Error("esbuild build options does not specify outdir"); - build.onEnd(() => { - for (const file of files) { - const name = path.parse(file).base; - fs.copyFileSync(file, path.join(outDir, name)); - } - }); - }, - }; -} - -const buildConfig2 = computeConfig({ +await build({ source: { js: [ "src/popupEntryPoint.tsx", @@ -75,45 +34,17 @@ const buildConfig2 = computeConfig({ }, destination: "./dist/prod", css: "linaria", -}); - -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) => ({ - path: preact, - })); - }, -}; - -const asd = linaria.default({ - babelOptions: { - babelrc: false, - configFile: "./babel.config-linaria.json", + linariaPlugin: () => { + // linaria has a bug if this run in web-util library + return linaria({ + babelOptions: { + presets: [ + "@babel/preset-typescript", + "@babel/preset-react", + "@linaria", + ], + }, + sourceMap: true, + }); }, - sourceMap: true, -}); - -// buildConfig2.plugins = [ -// preactCompatPlugin, -// copyFilesPlugin(allStaticFiles), -// asd, -// ]; - -// console.log(JSON.stringify(buildConfig, undefined, 2)); -// console.log(JSON.stringify(buildConfig2, undefined, 2)); - -await esbuild.build(buildConfig2).catch((e) => { - // eslint-disable-next-line no-undef - console.log(e); - // eslint-disable-next-line no-undef - process.exit(1); }); diff --git a/packages/taler-wallet-webextension/clean_and_build.sh b/packages/taler-wallet-webextension/clean_and_build.sh index 1c01e3a4a..fa8d514f2 100755 --- a/packages/taler-wallet-webextension/clean_and_build.sh +++ b/packages/taler-wallet-webextension/clean_and_build.sh @@ -5,7 +5,7 @@ set -e rm -rf dist lib tsconfig.tsbuildinfo .linaria-cache echo typecheck and bundle... -node build-fast-with-linaria.mjs & +node build.mjs & pnpm tsc --noEmit & wait -n wait -n diff --git a/packages/taler-wallet-webextension/dev.mjs b/packages/taler-wallet-webextension/dev.mjs index 94df79f3d..1ded20c7f 100755 --- a/packages/taler-wallet-webextension/dev.mjs +++ b/packages/taler-wallet-webextension/dev.mjs @@ -15,18 +15,52 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import linaria from "@linaria/esbuild"; import { serve } from "@gnu-taler/web-util/node"; -import esbuild from "esbuild"; -import { buildConfig } from "./build-fast-with-linaria.mjs"; +import { initializeDev, getFilesInDirectory } from "@gnu-taler/web-util/build"; -buildConfig.inject = ["./node_modules/@gnu-taler/web-util/lib/live-reload.mjs"]; +const allStaticFiles = getFilesInDirectory("static"); + +const devEntryPoints = [ + "src/popupEntryPoint.tsx", + "src/walletEntryPoint.tsx", + "src/background.ts", + "src/taler-wallet-interaction-loader.ts", + "src/taler-wallet-interaction-support.ts", + "src/browserWorkerEntry.ts", + "src/stories.tsx", +]; + +const build = initializeDev({ + source: { + js: devEntryPoints, + assets: allStaticFiles, + }, + destination: "./dist/dev", + public: "/app", + css: "linaria", + linariaPlugin: () => { + // linaria has a bug if this run in web-util library + return linaria({ + babelOptions: { + presets: [ + "@babel/preset-typescript", + "@babel/preset-react", + "@linaria", + ], + }, + sourceMap: true, + }); + }, +}); + +await build(); serve({ - folder: "./dist", + folder: "./dist/dev", port: 8080, source: "./src", - development: true, - onUpdate: async () => esbuild.build(buildConfig), + onSourceUpdate: build, }); // FIXME: create a mocha test in the browser as it was before diff --git a/packages/taler-wallet-webextension/pack.sh b/packages/taler-wallet-webextension/pack.sh index ca05f36de..f83948a4d 100755 --- a/packages/taler-wallet-webextension/pack.sh +++ b/packages/taler-wallet-webextension/pack.sh @@ -13,11 +13,14 @@ fi vers_manifest=$(jq -r '.version' manifest-common.json) + +# Create version form Manifest v2 zipfile="taler-wallet-webextension-${vers_manifest}.zip" TEMP_DIR=$(mktemp -d) jq -s 'add | .name = "GNU Taler Wallet" ' manifest-common.json manifest-v2.json > $TEMP_DIR/manifest.json -cp -r dist static $TEMP_DIR +cp -r static $TEMP_DIR +cp -r dist/prod $TEMP_DIR/dist find $TEMP_DIR/dist \( -name "test.*" -o -name "*.test.*" -o -name "stories.*" -o -name "*.dev.*" \) -delete [[ "$ENV" == "prod" ]] && find $TEMP_DIR/dist \( -name "*.map" \) -delete @@ -35,11 +38,14 @@ mkdir -p extension/v2/unpacked echo "Packed webextension: extension/v2/$zipfile" cp -rf src extension/v2/unpacked +# Create version form Manifest v3 zipfile="taler-wallet-webextension-${vers_manifest}.zip" TEMP_DIR=$(mktemp -d) jq -s 'add | .name = "GNU Taler Wallet" ' manifest-common.json manifest-v3.json > $TEMP_DIR/manifest.json -cp -r dist static service_worker.js $TEMP_DIR +cp -r static $TEMP_DIR +cp -r dist/prod $TEMP_DIR/dist +cp -r service_worker.js $TEMP_DIR find $TEMP_DIR/dist \( -name "test.*" -o -name "*.test.*" -o -name "stories.*" -o -name "*.dev.*" \) -delete [[ "$ENV" == "prod" ]] && find $TEMP_DIR/dist \( -name "*.map" \) -delete diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index 3b2417527..bb2bbb4b5 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -10,9 +10,9 @@ "private": false, "scripts": { "clean": "rimraf dist lib tsconfig.tsbuildinfo", - "test": "mocha --require source-map-support/register 'dist/**/*.test.js' 'dist/**/test.js'", + "test": "./test.mjs && mocha --require source-map-support/register 'dist/test/**/*.test.js' 'dist/test/**/test.js'", "test:coverage": "nyc pnpm test", - "compile": "tsc && ./build-fast-with-linaria.mjs", + "compile": "tsc && ./build.mjs", "prepare": "tsc", "dev": "./dev.mjs", "pretty": "prettier --write src", @@ -44,27 +44,21 @@ } }, "devDependencies": { - "@babel/core": "7.18.9", - "@babel/plugin-transform-modules-commonjs": "7.18.6", - "@babel/plugin-transform-react-jsx-source": "7.18.6", - "@babel/plugin-transform-typescript": "^7.20.13", + "@babel/preset-react": "^7.22.3", "@babel/preset-typescript": "7.18.6", - "@babel/runtime": "7.18.9", "@gnu-taler/pogen": "workspace:*", "@gnu-taler/web-util": "workspace:*", - "@linaria/babel-preset": "3.0.0-beta.22", - "@linaria/core": "3.0.0-beta.22", - "@linaria/react": "3.0.0-beta.22", - "@linaria/webpack-loader": "3.0.0-beta.22", + "@linaria/babel-preset": "^4.4.5", + "@linaria/core": "^4.2.10", + "@linaria/esbuild": "^4.2.11", + "@linaria/react": "^4.3.8", "@types/chai": "^4.3.0", "@types/chrome": "0.0.197", "@types/history": "^4.7.8", "@types/mocha": "^9.0.0", "@types/node": "^18.11.17", - "babel-loader": "^8.2.3", - "babel-plugin-transform-react-jsx": "^6.24.1", "chai": "^4.3.6", - "esbuild": "^0.17.7", + "esbuild": "^0.17.19", "mocha": "^9.2.0", "nyc": "^15.1.0", "polished": "^4.1.4", @@ -82,4 +76,4 @@ "pogen": { "domain": "taler-wallet-webex" } -}
\ No newline at end of file +} diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 8a41ee68e..dd2d31c3d 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -34,9 +34,9 @@ import { } from "./components/styled/index.js"; import { useBackendContext } from "./context/backend.js"; import { useAsyncAsHook } from "./hooks/useAsyncAsHook.js"; -import qrIcon from "./svg/qr_code_24px.svg"; -import settingsIcon from "./svg/settings_black_24dp.svg"; -import warningIcon from "./svg/warning_24px.svg"; +import qrIcon from "./svg/qr_code_24px.inline.svg"; +import settingsIcon from "./svg/settings_black_24dp.inline.svg"; +import warningIcon from "./svg/warning_24px.inline.svg"; import { parseTalerUri, TalerUriAction } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 60b100478..ee2dbfc69 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -24,7 +24,7 @@ import { Avatar } from "../mui/Avatar.js"; import { Typography } from "../mui/Typography.js"; import { Banner } from "./Banner.js"; import { SvgIcon } from "./styled/index.js"; -import wifiIcon from "../svg/wifi.svg"; +import wifiIcon from "../svg/wifi.inline.svg"; export default { title: "banner", component: Banner, diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 11f526865..0a53d33ba 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -16,7 +16,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ErrorBox } from "./styled/index.js"; export function ErrorMessage({ diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index 2979c28e5..3298840e2 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -16,7 +16,7 @@ import { TalerErrorDetail, TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ErrorBox } from "./styled/index.js"; import { EnabledBySettings } from "./EnabledBySettings.js"; diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx index 28bef9320..b0209f855 100644 --- a/packages/taler-wallet-webextension/src/components/Loading.tsx +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -17,7 +17,7 @@ import { css } from "@linaria/core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import ProgressIcon from "../svg/progress.svg"; +import ProgressIcon from "../svg/progress.inline.svg"; import { CenteredText } from "./styled/index.js"; const fadeIn = css` diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 7b9701336..2330b1b95 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -15,7 +15,7 @@ */ import { h, VNode } from "preact"; -import logo from "../svg/logo-2021.svg"; +import logo from "../svg/logo-2021.inline.svg"; export function LogoHeader(): VNode { return ( diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx index 3fea063d3..11fa72181 100644 --- a/packages/taler-wallet-webextension/src/components/Modal.tsx +++ b/packages/taler-wallet-webextension/src/components/Modal.tsx @@ -17,7 +17,7 @@ import { styled } from "@linaria/react"; import { ComponentChildren, h, VNode } from "preact"; import { ButtonHandler } from "../mui/handlers.js"; -import closeIcon from "../svg/close_24px.svg"; +import closeIcon from "../svg/close_24px.inline.svg"; import { Link, LinkPrimary, LinkWarning } from "./styled/index.js"; interface Props { diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index d6a730a4f..7d3cf3f57 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -17,7 +17,7 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Button } from "../mui/Button.js"; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { ParagraphClickable } from "./styled/index.js"; export interface Props { diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index d4eab21ee..b95bbf3b7 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -96,7 +96,7 @@ const CollasibleBox = styled.div` } } `; -import arrowDown from "../svg/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.inline.svg"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; export function PartCollapsible({ text, title, big, showSign }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index e36502333..92b8d2667 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -16,7 +16,7 @@ // need to import linaria types, otherwise compiler will complain // eslint-disable-next-line @typescript-eslint/no-unused-vars -import type * as Linaria from "@linaria/core"; +// import type * as Linaria from "@linaria/core"; import { styled } from "@linaria/react"; @@ -24,7 +24,7 @@ export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; - background-color: ${(p) => p.color}; + background-color: ${(p: any) => p.color}; `; export const WalletAction = styled.div` @@ -100,7 +100,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` width: 800px; } & > section { - padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; margin-bottom: auto; overflow: auto; @@ -168,7 +168,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; & > section { - padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header margin-bottom: auto; overflow-y: auto; @@ -411,7 +411,8 @@ export const Button = styled.button<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; @@ -461,7 +462,8 @@ export const Link = styled.a<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; + text-transform: ${({ upperCased }: any) => + upperCased ? "uppercase" : "none"}; font-family: inherit; font-size: 100%; @@ -539,7 +541,7 @@ export const LinkPrimary = styled(Link)` `; export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` - font-size: ${({ small }) => (small ? "small" : "inherit")}; + font-size: ${({ small }: any) => (small ? "small" : "inherit")}; background-color: #0042b2; border-color: #0042b2; `; @@ -717,13 +719,13 @@ export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); - border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + border-color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } `; @@ -735,7 +737,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` font-weight: bold; margin-left: 0.5em; padding: 5px; - color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; + color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; } & div { @@ -761,7 +763,7 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` /* border-color: lightgray; */ border-bottom-right-radius: 0.25em; border-top-right-radius: 0.25em; - border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")}; + border-color: ${({ invalid }: any) => (!invalid ? "lightgray" : "red")}; } margin-bottom: 16px; `; @@ -859,8 +861,8 @@ interface SvgIconProps { } export const SvgIcon = styled.div<SvgIconProps>` & > svg { - fill: ${({ color }) => color}; - transform: ${({ transform }) => (transform ? transform : "")}; + fill: ${({ color }: any) => color}; + transform: ${({ transform }: any) => (transform ? transform : "")}; } /* width: 24px; height: 24px; */ @@ -868,7 +870,7 @@ export const SvgIcon = styled.div<SvgIconProps>` margin-right: 8px; display: inline; padding: 4px; - cursor: ${({ onClick }) => (onClick ? "pointer" : "inherit")}; + cursor: ${({ onClick }: any) => (onClick ? "pointer" : "inherit")}; `; export const Icon = styled.div` diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx index 1917b01d9..18da2609c 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx @@ -27,7 +27,7 @@ import { import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Button } from "../../mui/Button.js"; import { TextField } from "../../mui/TextField.js"; -import editIcon from "../../svg/edit_24px.svg"; +import editIcon from "../../svg/edit_24px.inline.svg"; import { ExchangeDetails, getAmountWithFee, diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index 4405d57b8..50bf99a0c 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -25,7 +25,7 @@ import { Input, LinkSuccess, SvgIcon } from "../../components/styled/index.js"; import { TermsOfService } from "../../components/TermsOfService/index.js"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Button } from "../../mui/Button.js"; -import editIcon from "../../svg/edit_24px.svg"; +import editIcon from "../../svg/edit_24px.inline.svg"; import { ExchangeDetails, getAmountWithFee, diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx index d44472ca5..22ea0b8ab 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx @@ -17,11 +17,11 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions -import CloseIcon from "../svg/close_24px.svg"; -import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.svg"; -import InfoOutlinedIcon from "../svg/info_outlined_24px.svg"; -import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.svg"; -import SuccessOutlinedIcon from "../svg/success_outlined_24px.svg"; +import CloseIcon from "../svg/close_24px.inline.svg"; +import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.inline.svg"; +import InfoOutlinedIcon from "../svg/info_outlined_24px.inline.svg"; +import ReportProblemOutlinedIcon from "../svg/report_problem_outlined_24px.inline.svg"; +import SuccessOutlinedIcon from "../svg/success_outlined_24px.inline.svg"; import { IconButton } from "./Button.js"; import { darken, lighten } from "./colors/manipulation.js"; import { Paper } from "./Paper.js"; diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index 65af81849..5506caa42 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -21,8 +21,8 @@ import { Button } from "./Button.js"; import { Fragment, h, VNode } from "preact"; -import DeleteIcon from "../svg/delete_24px.svg"; -import SendIcon from "../svg/send_24px.svg"; +import DeleteIcon from "../svg/delete_24px.inline.svg"; +import SendIcon from "../svg/send_24px.inline.svg"; import { styled } from "@linaria/react"; export default { diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx index f5b70f07c..f7b5040e4 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -15,7 +15,6 @@ */ import { css } from "@linaria/core"; import { h, VNode } from "preact"; -// eslint-disable-next-line import/extensions import { Colors, theme } from "../style.js"; import { useFormControl } from "./FormControl.js"; import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js"; diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index 3fcf3ac1e..99adf2a76 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -56,8 +56,6 @@ export interface Spacing { (top: number, right: number, bottom: number, left: number): string; } -export const theme = createTheme(); - const zIndex = { mobileStepper: 1000, speedDial: 1050, @@ -68,6 +66,8 @@ const zIndex = { tooltip: 1500, }; +export const theme = createTheme(); + export const ripple = css` background-position: center; diff --git a/packages/taler-wallet-webextension/src/svg/check_24px.svg b/packages/taler-wallet-webextension/src/svg/check_24px.inline.svg index 522695ef3..522695ef3 100644 --- a/packages/taler-wallet-webextension/src/svg/check_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/check_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg b/packages/taler-wallet-webextension/src/svg/chevron-down.inline.svg index 0e1c0aeda..0e1c0aeda 100644 --- a/packages/taler-wallet-webextension/src/svg/chevron-down.svg +++ b/packages/taler-wallet-webextension/src/svg/chevron-down.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/close_24px.svg b/packages/taler-wallet-webextension/src/svg/close_24px.inline.svg index 8b7eb6e84..8b7eb6e84 100644 --- a/packages/taler-wallet-webextension/src/svg/close_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/close_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/delete_24px.svg b/packages/taler-wallet-webextension/src/svg/delete_24px.inline.svg index ead7caa9f..ead7caa9f 100644 --- a/packages/taler-wallet-webextension/src/svg/delete_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/delete_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/download_24px.svg b/packages/taler-wallet-webextension/src/svg/download_24px.inline.svg index c4ec1c354..c4ec1c354 100644 --- a/packages/taler-wallet-webextension/src/svg/download_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/download_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/edit_24px.svg b/packages/taler-wallet-webextension/src/svg/edit_24px.inline.svg index a4b3c9f6b..a4b3c9f6b 100644 --- a/packages/taler-wallet-webextension/src/svg/edit_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/edit_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.inline.svg index 4a0daa1e9..4a0daa1e9 100644 --- a/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/error_outline_outlined_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.inline.svg index 80dad95cc..80dad95cc 100644 --- a/packages/taler-wallet-webextension/src/svg/info_outlined_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/info_outlined_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/logo-2021.svg b/packages/taler-wallet-webextension/src/svg/logo-2021.inline.svg index 8c5ff3e5b..8c5ff3e5b 100644 --- a/packages/taler-wallet-webextension/src/svg/logo-2021.svg +++ b/packages/taler-wallet-webextension/src/svg/logo-2021.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/progress.svg b/packages/taler-wallet-webextension/src/svg/progress.inline.svg index c7284a545..c7284a545 100644 --- a/packages/taler-wallet-webextension/src/svg/progress.svg +++ b/packages/taler-wallet-webextension/src/svg/progress.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg b/packages/taler-wallet-webextension/src/svg/qr_code_24px.inline.svg index c0c158359..c0c158359 100644 --- a/packages/taler-wallet-webextension/src/svg/qr_code_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/qr_code_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.inline.svg index ed32f6f28..ed32f6f28 100644 --- a/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/report_problem_outlined_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg b/packages/taler-wallet-webextension/src/svg/ri-bank-line.inline.svg index 8d987df79..8d987df79 100644 --- a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg +++ b/packages/taler-wallet-webextension/src/svg/ri-bank-line.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/send_24px.svg b/packages/taler-wallet-webextension/src/svg/send_24px.inline.svg index 6e41d1c9e..6e41d1c9e 100644 --- a/packages/taler-wallet-webextension/src/svg/send_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/send_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.inline.svg index adcd50405..adcd50405 100644 --- a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg +++ b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.inline.svg index c6130b495..c6130b495 100644 --- a/packages/taler-wallet-webextension/src/svg/success_outlined_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/success_outlined_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/upload_24px.svg b/packages/taler-wallet-webextension/src/svg/upload_24px.inline.svg index c604ef78d..c604ef78d 100644 --- a/packages/taler-wallet-webextension/src/svg/upload_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/upload_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/warning_24px.svg b/packages/taler-wallet-webextension/src/svg/warning_24px.inline.svg index d27c4c6ec..d27c4c6ec 100644 --- a/packages/taler-wallet-webextension/src/svg/warning_24px.svg +++ b/packages/taler-wallet-webextension/src/svg/warning_24px.inline.svg diff --git a/packages/taler-wallet-webextension/src/svg/wifi.svg b/packages/taler-wallet-webextension/src/svg/wifi.inline.svg index ad712435d..ad712435d 100644 --- a/packages/taler-wallet-webextension/src/svg/wifi.svg +++ b/packages/taler-wallet-webextension/src/svg/wifi.inline.svg diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index aef271442..31a71e249 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -66,7 +66,7 @@ import { } from "../cta/Withdraw/index.js"; import { strings } from "../i18n/strings.js"; import { platform } from "../platform/foreground.js"; -import CloseIcon from "../svg/close_24px.svg"; +import CloseIcon from "../svg/close_24px.inline.svg"; import { AddBackupProviderPage } from "./AddBackupProvider/index.js"; import { BackupPage } from "./BackupPage.js"; import { DepositPage } from "./DepositPage/index.js"; diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx index b1542943a..47c5ffea1 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx @@ -30,8 +30,8 @@ import { Button } from "../../mui/Button.js"; import { Grid } from "../../mui/Grid.js"; import { Paper } from "../../mui/Paper.js"; import { Pages } from "../../NavigationBar.js"; -import arrowIcon from "../../svg/chevron-down.svg"; -import bankIcon from "../../svg/ri-bank-line.svg"; +import arrowIcon from "../../svg/chevron-down.inline.svg"; +import bankIcon from "../../svg/ri-bank-line.inline.svg"; import { assertUnreachable } from "../../utils/index.js"; import { Contact, State } from "./index.js"; diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index 447b07ece..be720f10e 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -28,7 +28,7 @@ import { Time } from "../../components/Time.js"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { Button } from "../../mui/Button.js"; -import arrowDown from "../../svg/chevron-down.svg"; +import arrowDown from "../../svg/chevron-down.inline.svg"; import { State } from "./index.js"; const ButtonGroup = styled.div` diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 0ea0f8da1..34eb9be8c 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -40,8 +40,8 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Button } from "../mui/Button.js"; import { NoBalanceHelp } from "../popup/NoBalanceHelp.js"; -import DownloadIcon from "../svg/download_24px.svg"; -import UploadIcon from "../svg/upload_24px.svg"; +import DownloadIcon from "../svg/download_24px.inline.svg"; +import UploadIcon from "../svg/upload_24px.inline.svg"; interface Props { currency?: string; @@ -262,7 +262,9 @@ export function HistoryView({ <Fragment key={i}> <DateSeparator> <Time - timestamp={AbsoluteTime.fromMilliseconds(Number.parseInt(d, 10))} + timestamp={AbsoluteTime.fromMilliseconds( + Number.parseInt(d, 10), + )} format="dd MMMM yyyy" /> </DateSeparator> diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx index 1b4678b8a..4d045ee13 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx @@ -33,9 +33,9 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Button } from "../../mui/Button.js"; import { TextFieldHandler } from "../../mui/handlers.js"; import { TextField } from "../../mui/TextField.js"; -import checkIcon from "../../svg/check_24px.svg"; -import deleteIcon from "../../svg/delete_24px.svg"; -import warningIcon from "../../svg/warning_24px.svg"; +import checkIcon from "../../svg/check_24px.inline.svg"; +import deleteIcon from "../../svg/delete_24px.inline.svg"; +import warningIcon from "../../svg/warning_24px.inline.svg"; import { State } from "./index.js"; type AccountType = "bitcoin" | "x-taler-bank" | "iban"; diff --git a/packages/taler-wallet-webextension/static/wallet.html b/packages/taler-wallet-webextension/static/wallet.html index 3246ac8f8..32a98130b 100644 --- a/packages/taler-wallet-webextension/static/wallet.html +++ b/packages/taler-wallet-webextension/static/wallet.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html> <head> + <title>GNU Taler Wallet - WebExtension</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/dist/walletEntryPoint.css" /> <link rel="stylesheet" type="text/css" href="/static/font/import.css" /> diff --git a/packages/taler-wallet-webextension/test.mjs b/packages/taler-wallet-webextension/test.mjs new file mode 100755 index 000000000..f3538fb5f --- /dev/null +++ b/packages/taler-wallet-webextension/test.mjs @@ -0,0 +1,44 @@ +#!/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 <http://www.gnu.org/licenses/> + */ + +import linaria from "@linaria/esbuild"; +import { build, getFilesInDirectory } from "@gnu-taler/web-util/build"; + +const allTestFiles = getFilesInDirectory("src", /.test.tsx?$/); +const allStaticFiles = getFilesInDirectory("static"); + +await build({ + source: { + js: allTestFiles, + assets: allStaticFiles, + }, + destination: "./dist/test", + css: "linaria", + linariaPlugin: () => { + // linaria has a bug if this run in web-util library + return linaria({ + babelOptions: { + presets: [ + "@babel/preset-typescript", + "@babel/preset-react", + "@linaria", + ], + }, + sourceMap: true, + }); + }, +}); |