[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 05/06: implement web-utils in web-extension
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 05/06: implement web-utils in web-extension |
|
Date: |
Tue, 06 Dec 2022 16:13:40 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 51bbf08d241f0eff8847f6656accee03c0626d88
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Tue Dec 6 11:28:56 2022 -0300
implement web-utils in web-extension
---
.../build-fast-with-linaria.mjs | 7 +-
packages/taler-wallet-webextension/dev.mjs | 101 ++---
packages/taler-wallet-webextension/package.json | 11 +-
.../src/components/Amount.stories.tsx | 2 +-
.../src/components/AmountField.stories.tsx | 2 +-
.../src/components/Banner.stories.tsx | 2 +-
.../src/components/PendingTransactions.stories.tsx | 2 +-
.../src/components/QR.stories.tsx | 2 +-
.../ShowFullContractTermPopup.stories.tsx | 2 +-
.../src/components/index.stories.tsx | 16 +-
.../src/cta/Deposit/stories.tsx | 2 +-
.../src/cta/InvoiceCreate/stories.tsx | 2 +-
.../src/cta/InvoicePay/stories.tsx | 2 +-
.../src/cta/Payment/stories.tsx | 2 +-
.../src/cta/Recovery/stories.tsx | 2 +-
.../src/cta/Refund/stories.tsx | 2 +-
.../src/cta/Tip/stories.tsx | 2 +-
.../src/cta/TransferCreate/stories.tsx | 2 +-
.../src/cta/TransferPickup/stories.tsx | 2 +-
.../src/cta/Withdraw/stories.tsx | 2 +-
.../src/cta/index.stories.ts | 20 +-
.../src/mui/Alert.stories.tsx | 2 +-
.../src/mui/Button.stories.tsx | 3 +-
.../src/mui/Grid.stories.tsx | 2 +-
.../src/mui/Menu.stories.tsx | 2 +-
.../src/mui/Paper.stories.tsx | 2 +-
.../src/mui/TextField.stories.tsx | 2 +-
.../src/mui/index.stories.tsx | 14 +-
.../src/popup/Balance.stories.tsx | 4 +-
.../src/popup/TalerActionFound.stories.tsx | 3 +-
.../src/popup/index.stories.tsx | 6 +-
.../taler-wallet-webextension/src/stories.test.ts | 44 +-
packages/taler-wallet-webextension/src/stories.tsx | 499 +--------------------
.../taler-wallet-webextension/src/test-utils.ts | 19 +-
.../src/wallet/AddBackupProvider/stories.tsx | 2 +-
.../src/wallet/AddNewActionView.stories.tsx | 2 +-
.../src/wallet/Backup.stories.tsx | 8 +-
.../src/wallet/DepositPage/stories.tsx | 2 +-
.../src/wallet/DestinationSelection/index.ts | 2 +-
.../src/wallet/DestinationSelection/state.ts | 49 +-
.../src/wallet/DestinationSelection/stories.tsx | 2 +-
.../src/wallet/DestinationSelection/views.tsx | 18 +-
.../src/wallet/DeveloperPage.stories.tsx | 2 +-
.../src/wallet/ExchangeAddConfirm.stories.tsx | 2 +-
.../src/wallet/ExchangeAddSetUrl.stories.tsx | 8 +-
.../src/wallet/ExchangeSelection/stories.tsx | 2 +-
.../src/wallet/History.stories.tsx | 2 +-
.../src/wallet/ManageAccount/stories.tsx | 2 +-
.../src/wallet/Notifications/stories.tsx | 2 +-
.../wallet/ProviderAddConfirmProvider.stories.tsx | 2 +-
.../src/wallet/ProviderAddSetUrl.stories.tsx | 2 +-
.../src/wallet/ProviderDetail.stories.tsx | 2 +-
.../src/wallet/QrReader.stories.tsx | 2 +-
.../src/wallet/ReserveCreated.stories.tsx | 2 +-
.../src/wallet/Settings.stories.tsx | 2 +-
.../src/wallet/Transaction.stories.tsx | 2 +-
.../src/wallet/Welcome.stories.tsx | 2 +-
.../src/wallet/index.stories.tsx | 57 +--
packages/taler-wallet-webextension/tsconfig.json | 3 +
59 files changed, 230 insertions(+), 740 deletions(-)
diff --git a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
index 25e5e78db..1232eac98 100755
--- a/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
+++ b/packages/taler-wallet-webextension/build-fast-with-linaria.mjs
@@ -40,6 +40,7 @@ function getFilesInDirectory(startPath, regex) {
return result
}
+// eslint-disable-next-line no-undef
const BASE = process.cwd()
const allTestFiles = getFilesInDirectory(path.join(BASE, 'src'), /.test.ts$/)
@@ -67,7 +68,9 @@ 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()
@@ -118,10 +121,12 @@ export const buildConfig = {
],
}
-esbuild
+await esbuild
.build(buildConfig)
.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/dev.mjs
b/packages/taler-wallet-webextension/dev.mjs
index 842424a9d..fb5661aa5 100755
--- a/packages/taler-wallet-webextension/dev.mjs
+++ b/packages/taler-wallet-webextension/dev.mjs
@@ -1,67 +1,38 @@
#!/usr/bin/env node
-/* eslint-disable no-undef */
-
-import linaria from '@linaria/esbuild'
-import esbuild from 'esbuild'
-import { buildConfig } from "./build-fast-with-linaria.mjs"
-import fs from 'fs';
-import WebSocket from "ws";
-import chokidar from "chokidar";
-import path from "path"
-
-const devServerBroadcastDelay = 500
-const devServerPort = 8002
-const wss = new WebSocket.Server({ port: devServerPort });
-const toWatch = ["./src"]
-
-function broadcast(file, event) {
- setTimeout(() => {
- wss.clients.forEach((client) => {
- if (client.readyState === WebSocket.OPEN) {
- console.log(new Date(), file)
- client.send(JSON.stringify(event));
- }
- });
- }, devServerBroadcastDelay);
-}
-
-const watcher = chokidar
- .watch(toWatch, {
- persistent: true,
- ignoreInitial: true,
- awaitWriteFinish: {
- stabilityThreshold: 100,
- pollInterval: 100,
- },
- })
- .on("error", (error) => console.error(error))
- .on("change", async (file) => {
- broadcast(file, { type: "RELOAD" });
- })
- .on("add", async (file) => {
- broadcast(file, { type: "RELOAD" });
- })
- .on("unlink", async (file) => {
- broadcast(file, { type: "RELOAD" });
- });
-
-
-fs.writeFileSync("dev-html/manifest.json", fs.readFileSync("manifest-v2.json"))
-fs.writeFileSync("dev-html/mocha.css",
fs.readFileSync("node_modules/mocha/mocha.css"))
-fs.writeFileSync("dev-html/mocha.js",
fs.readFileSync("node_modules/mocha/mocha.js"))
-fs.writeFileSync("dev-html/mocha.js.map",
fs.readFileSync("node_modules/mocha/mocha.js.map"))
-
-const server = await esbuild
- .serve({ servedir: 'dev-html' }, {
- ...buildConfig, outdir: 'dev-html/dist'
- })
- .catch((e) => {
- console.log(e)
- process.exit(1)
- });
-
-console.log(`Dev server is ready at http://localhost:${server.port}/.
-http://localhost:${server.port}/stories.html for the components stories.
-The server is running a using websocket at ${devServerPort} to notify code
change and live reload.
-`);
+/*
+ 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 { serve } from "@gnu-taler/web-util/lib/index.node";
+import esbuild from 'esbuild';
+import { buildConfig } from "./build-fast-with-linaria.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)
+})
+
+// FIXME: create a mocha test in the browser as it was before
+
+// fs.writeFileSync("dev-html/manifest.json",
fs.readFileSync("manifest-v2.json"))
+// fs.writeFileSync("dev-html/mocha.css",
fs.readFileSync("node_modules/mocha/mocha.css"))
+// fs.writeFileSync("dev-html/mocha.js",
fs.readFileSync("node_modules/mocha/mocha.js"))
+// fs.writeFileSync("dev-html/mocha.js.map",
fs.readFileSync("node_modules/mocha/mocha.js.map"))
diff --git a/packages/taler-wallet-webextension/package.json
b/packages/taler-wallet-webextension/package.json
index cdd0e7372..0deca26cc 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -25,12 +25,11 @@
"@gnu-taler/taler-wallet-core": "workspace:*",
"date-fns": "^2.29.2",
"history": "4.10.1",
- "preact": "^10.6.5",
+ "preact": "10.11.3",
"preact-router": "3.2.1",
"qr-scanner": "^1.4.1",
"qrcode-generator": "^1.4.4",
- "tslib": "^2.4.0",
- "ws": "7.4.5"
+ "tslib": "^2.4.0"
},
"eslintConfig": {
"plugins": [
@@ -44,6 +43,7 @@
}
},
"devDependencies": {
+ "@gnu-taler/web-util": "workspace:*",
"@babel/core": "7.18.9",
"@babel/plugin-transform-modules-commonjs": "7.18.6",
"@babel/plugin-transform-react-jsx-source": "7.18.6",
@@ -54,8 +54,6 @@
"@linaria/core": "3.0.0-beta.22",
"@linaria/react": "3.0.0-beta.22",
"@linaria/webpack-loader": "3.0.0-beta.22",
- "@testing-library/preact": "^2.0.1",
- "@testing-library/preact-hooks": "^1.1.0",
"@types/chai": "^4.3.0",
"@types/chrome": "0.0.197",
"@types/history": "^4.7.8",
@@ -64,7 +62,6 @@
"babel-loader": "^8.2.3",
"babel-plugin-transform-react-jsx": "^6.24.1",
"chai": "^4.3.6",
- "chokidar": "^3.5.3",
"esbuild": "^0.15.13",
"mocha": "^9.2.0",
"nyc": "^15.1.0",
@@ -83,4 +80,4 @@
"pogen": {
"domain": "taler-wallet-webex"
}
-}
+}
\ No newline at end of file
diff --git
a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx
b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx
index caf35d57e..095c9be24 100644
--- a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx
@@ -24,7 +24,7 @@ import { Fragment, h, VNode } from "preact";
import { Amount } from "./Amount.js";
export default {
- title: "components/amount",
+ title: "amount",
component: Amount,
};
diff --git
a/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
b/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
index ff9a71992..9a1d96014 100644
--- a/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
@@ -29,7 +29,7 @@ import { AmountFieldHandler, TextFieldHandler } from
"../mui/handlers.js";
import { AmountField } from "./AmountField.js";
export default {
- title: "components/amountField",
+ title: "amountField",
};
function RenderAmount(): VNode {
diff --git
a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 354815313..39012480b 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -26,7 +26,7 @@ import { Banner } from "./Banner.js";
import { SvgIcon } from "./styled/index.js";
import wifiIcon from "../svg/wifi.svg";
export default {
- title: "mui/banner",
+ title: "banner",
component: Banner,
};
diff --git
a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
index 12525e2f8..2155c7aa6 100644
---
a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
+++
b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx
@@ -28,7 +28,7 @@ import { createExample } from "../test-utils.js";
import { PendingTransactionsView as TestedComponent } from
"./PendingTransactions.js";
export default {
- title: "component/PendingTransactions",
+ title: "PendingTransactions",
component: TestedComponent,
};
diff --git a/packages/taler-wallet-webextension/src/components/QR.stories.tsx
b/packages/taler-wallet-webextension/src/components/QR.stories.tsx
index 890cd1941..83365670e 100644
--- a/packages/taler-wallet-webextension/src/components/QR.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/QR.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { QR } from "./QR.js";
export default {
- title: "wallet/qr",
+ title: "qr",
};
export const Restore = createExample(QR, {
diff --git
a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
index 1396d8707..841583113 100644
---
a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
+++
b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
@@ -29,7 +29,7 @@ import {
} from "./ShowFullContractTermPopup.js";
export default {
- title: "component/ShowFullContractTermPopup",
+ title: "ShowFullContractTermPopup",
};
const cd: WalletContractData = {
diff --git
a/packages/taler-wallet-webextension/src/components/index.stories.tsx
b/packages/taler-wallet-webextension/src/components/index.stories.tsx
index 2e4e7fa2e..469ed82fa 100644
--- a/packages/taler-wallet-webextension/src/components/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/index.stories.tsx
@@ -19,12 +19,10 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "./Banner.stories.js";
-import * as a2 from "./PendingTransactions.stories.js";
-import * as a3 from "./Amount.stories.js";
-import * as a4 from "./ShowFullContractTermPopup.stories.js";
-import * as a5 from "./TermsOfService/stories.js";
-import * as a6 from "./QR.stories";
-import * as a7 from "./AmountField.stories.js";
-
-export default [a1, a2, a3, a4, a5, a6, a7];
+export * as a1 from "./Banner.stories.js";
+export * as a2 from "./PendingTransactions.stories.js";
+export * as a3 from "./Amount.stories.js";
+export * as a4 from "./ShowFullContractTermPopup.stories.js";
+export * as a5 from "./TermsOfService/stories.js";
+export * as a6 from "./QR.stories";
+export * as a7 from "./AmountField.stories.js";
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
index a4168bcc2..6d1535953 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "cta/deposit",
+ title: "deposit",
};
export const Ready = createExample(ReadyView, {
diff --git
a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
index 8d4473d8f..05b923c9e 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/invoice create",
+ title: "invoice create",
};
export const Ready = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
index 38eb2336a..749cd78fc 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/invoice payment",
+ title: "invoice payment",
};
export const Ready = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
index fd437d5d2..28fcd8db7 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
@@ -30,7 +30,7 @@ import { BaseView } from "./views.js";
import beer from "../../../static-dev/beer.png";
export default {
- title: "cta/payment",
+ title: "payment",
component: BaseView,
argTypes: {},
};
diff --git a/packages/taler-wallet-webextension/src/cta/Recovery/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Recovery/stories.tsx
index e1da860fb..9243cc015 100644
--- a/packages/taler-wallet-webextension/src/cta/Recovery/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Recovery/stories.tsx
@@ -24,5 +24,5 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "cta/recovery",
+ title: "recovery",
};
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
index f95bfc693..921cf77e6 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
@@ -24,7 +24,7 @@ import beer from "../../../static-dev/beer.png";
import { createExample } from "../../test-utils.js";
import { IgnoredView, InProgressView, ReadyView } from "./views.js";
export default {
- title: "cta/refund",
+ title: "refund",
};
export const InProgress = createExample(InProgressView, {
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
index d200029e7..86bdd27a9 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../../test-utils.js";
import { AcceptedView, ReadyView } from "./views.js";
export default {
- title: "cta/tip",
+ title: "tip",
};
export const Accepted = createExample(AcceptedView, {
diff --git
a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
index de781f008..d0650f562 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/transfer create",
+ title: "transfer create",
};
export const Ready = createExample(ReadyView, {
diff --git
a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
index 23cfe7525..250e99ae1 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/transfer pickup",
+ title: "transfer pickup",
};
export const Ready = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index 1c3eaaf34..a8031223b 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -25,7 +25,7 @@ import { createExample } from "../../test-utils.js";
import { SuccessView } from "./views.js";
export default {
- title: "cta/withdraw",
+ title: "withdraw",
};
const exchangeList = {
diff --git a/packages/taler-wallet-webextension/src/cta/index.stories.ts
b/packages/taler-wallet-webextension/src/cta/index.stories.ts
index d920ff854..84863f84f 100644
--- a/packages/taler-wallet-webextension/src/cta/index.stories.ts
+++ b/packages/taler-wallet-webextension/src/cta/index.stories.ts
@@ -19,14 +19,12 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "./Deposit/stories.jsx";
-import * as a3 from "./Payment/stories.jsx";
-import * as a4 from "./Refund/stories.jsx";
-import * as a5 from "./Tip/stories.jsx";
-import * as a6 from "./Withdraw/stories.jsx";
-import * as a8 from "./InvoiceCreate/stories.js";
-import * as a9 from "./InvoicePay/stories.js";
-import * as a10 from "./TransferCreate/stories.js";
-import * as a11 from "./TransferPickup/stories.js";
-
-export default [a1, a3, a4, a5, a6, a8, a9, a10, a11];
+export * as a1 from "./Deposit/stories.jsx";
+export * as a3 from "./Payment/stories.jsx";
+export * as a4 from "./Refund/stories.jsx";
+export * as a5 from "./Tip/stories.jsx";
+export * as a6 from "./Withdraw/stories.jsx";
+export * as a8 from "./InvoiceCreate/stories.js";
+export * as a9 from "./InvoicePay/stories.js";
+export * as a10 from "./TransferCreate/stories.js";
+export * as a11 from "./TransferPickup/stories.js";
diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
index 66af50c11..62f7a2993 100644
--- a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx
@@ -24,7 +24,7 @@ import { ComponentChildren, Fragment, h, VNode } from
"preact";
import { Alert } from "./Alert.jsx";
export default {
- title: "mui/alert",
+ title: "alert",
component: Alert,
};
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index 385eb1028..65af81849 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -26,8 +26,7 @@ import SendIcon from "../svg/send_24px.svg";
import { styled } from "@linaria/react";
export default {
- title: "mui/button",
- component: Button,
+ title: "Button",
};
const Stack = styled.div`
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
index 3510fd737..d399cb825 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
@@ -23,7 +23,7 @@ import { Grid } from "./Grid.js";
import { Fragment, h, VNode } from "preact";
export default {
- title: "mui/grid",
+ title: "grid",
component: Grid,
};
diff --git a/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx
index 60e373be4..e2bba2678 100644
--- a/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx
@@ -25,7 +25,7 @@ import { Menu, MenuItem } from "./Menu.jsx";
import { Paper } from "./Paper.js";
export default {
- title: "mui/menu",
+ title: "menu",
component: Menu,
};
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
index f27a5606d..b0e06d137 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
@@ -23,7 +23,7 @@ import { h, VNode } from "preact";
import { Paper } from "./Paper.js";
export default {
- title: "mui/paper",
+ title: "paper",
component: Paper,
};
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
index 7db6b2964..1c41c2141 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
@@ -25,7 +25,7 @@ import { useState } from "preact/hooks";
import { TextField, Props } from "./TextField.js";
export default {
- title: "mui/TextField",
+ title: "TextField",
component: TextField,
};
diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx
b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
index b70b56698..aa8dd2526 100644
--- a/packages/taler-wallet-webextension/src/mui/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/index.stories.tsx
@@ -19,11 +19,9 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "./Button.stories.js";
-import * as a3 from "./Grid.stories.js";
-import * as a4 from "./Paper.stories.js";
-import * as a5 from "./TextField.stories.js";
-import * as a6 from "./Alert.stories.js";
-import * as a7 from "./Menu.stories.js";
-
-export default [a1, a3, a4, a5, a6, a7];
+export * as a1 from "./Button.stories.js";
+export * as a3 from "./Grid.stories.js";
+export * as a4 from "./Paper.stories.js";
+export * as a5 from "./TextField.stories.js";
+export * as a6 from "./Alert.stories.js";
+export * as a7 from "./Menu.stories.js";
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index 87cc98ea0..8f3762c29 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -23,9 +23,7 @@ import { createExample } from "../test-utils.js";
import { BalanceView as TestedComponent } from "./BalancePage.js";
export default {
- title: "popup/balance",
- component: TestedComponent,
- argTypes: {},
+ title: "balance",
};
export const EmptyBalance = createExample(TestedComponent, {
diff --git
a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
index f5020b599..00293a690 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
@@ -23,8 +23,7 @@ import { createExample } from "../test-utils.js";
import { TalerActionFound as TestedComponent } from "./TalerActionFound.js";
export default {
- title: "popup/TalerActionFound",
- component: TestedComponent,
+ title: "TalerActionFound",
};
export const PayAction = createExample(TestedComponent, {
diff --git a/packages/taler-wallet-webextension/src/popup/index.stories.tsx
b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
index 540ae5a6a..ea7cee77d 100644
--- a/packages/taler-wallet-webextension/src/popup/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
@@ -19,7 +19,5 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a2 from "./Balance.stories.js";
-import * as a6 from "./TalerActionFound.stories.js";
-
-export default [a2, a6];
+export * as a1 from "./Balance.stories.js";
+export * as a2 from "./TalerActionFound.stories.js";
diff --git a/packages/taler-wallet-webextension/src/stories.test.ts
b/packages/taler-wallet-webextension/src/stories.test.ts
index bb5abb92c..9277530a3 100644
--- a/packages/taler-wallet-webextension/src/stories.test.ts
+++ b/packages/taler-wallet-webextension/src/stories.test.ts
@@ -19,37 +19,33 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
import { setupI18n } from "@gnu-taler/taler-util";
+import { parseGroupImport } from "@gnu-taler/web-util/lib/index.browser";
+import { setupPlatform } from "./platform/api.js";
+import chromeAPI from "./platform/chrome.js";
+import { renderNodeOrBrowser } from "./test-utils.js";
+
import * as components from "./components/index.stories.js";
import * as cta from "./cta/index.stories.js";
import * as mui from "./mui/index.stories.js";
-import { setupPlatform } from "./platform/api.js";
-import chromeAPI from "./platform/chrome.js";
import * as popup from "./popup/index.stories.js";
-import { renderNodeOrBrowser } from "./test-utils.js";
import * as wallet from "./wallet/index.stories.js";
setupI18n("en", { en: {} });
setupPlatform(chromeAPI);
-function testThisStory(st: any): any {
- describe(`example "${(st as any).default.title}"`, () => {
- Object.keys(st).forEach((k) => {
- const Component = (st as any)[k];
- if (k === "default" || !Component) return;
-
- it(`example: ${k}`, () => {
- renderNodeOrBrowser(Component, Component.args);
- });
- });
- });
-}
-
-describe("render every storybook example", () => {
- [popup, wallet, cta, mui, components].forEach(function testAll(st: any) {
- if (Array.isArray(st.default)) {
- st.default.forEach(testAll);
- } else {
- testThisStory(st);
- }
- });
+describe("All the examples:", () => {
+ const cms = parseGroupImport({ popup, wallet, cta, mui, components })
+ cms.forEach(group => {
+ describe(`Example for group "${group.title}:"`, () => {
+ group.list.forEach(component => {
+ describe(`Component ${component.name}:`, () => {
+ component.examples.forEach(example => {
+ it(`should render example: ${example.name}`, () => {
+ renderNodeOrBrowser(example.render.component,
example.render.props)
+ })
+ })
+ })
+ })
+ })
+ })
});
diff --git a/packages/taler-wallet-webextension/src/stories.tsx
b/packages/taler-wallet-webextension/src/stories.tsx
index 02cc15393..8834b8084 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -18,516 +18,65 @@
*
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { setupI18n } from "@gnu-taler/taler-util";
-import { styled } from "@linaria/react";
-import {
- ComponentChild,
- ComponentChildren,
- Fragment,
- FunctionComponent,
- h,
- render,
- VNode,
-} from "preact";
-import { useEffect, useErrorBoundary, useState } from "preact/hooks";
+import { Fragment, FunctionComponent, h } from "preact";
import { LogoHeader } from "./components/LogoHeader.js";
import { PopupBox, WalletBox } from "./components/styled/index.js";
-import * as mui from "./mui/index.stories.js";
+import { strings } from "./i18n/strings.js";
import { PopupNavBar, WalletNavBar } from "./NavigationBar.js";
+
+import * as components from "./components/index.stories.js";
+import * as cta from "./cta/index.stories.js";
+import * as mui from "./mui/index.stories.js";
import * as popup from "./popup/index.stories.js";
import * as wallet from "./wallet/index.stories.js";
-import * as cta from "./cta/index.stories.js";
-import * as components from "./components/index.stories.js";
-import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api.js";
-import chromeAPI from "./platform/chrome.js";
-import firefoxAPI from "./platform/firefox.js";
-const url = new URL(window.location.href);
-const lang = url.searchParams.get("lang") || "en";
+import { renderStories } from "@gnu-taler/web-util/lib/index.browser";
-setupI18n(lang, strings);
-
-const Page = styled.div`
- * {
- font-family: Arial, Helvetica, sans-serif;
- }
- p:not([class]) {
- margin-bottom: 1em;
- margin-top: 1em;
- }
- width: 100%;
- display: flex;
- flex-direction: row;
-`;
-
-const SideBar = styled.div`
- min-width: var(--with-size);
- height: calc(100vh - 20px);
- overflow-y: visible;
- overflow-x: hidden;
- scroll-behavior: smooth;
-
- * {
- margin: 0px;
- padding: 0px;
- }
-
- & > {
- ol {
- padding: 4px;
- div:first-child {
- background-color: lightcoral;
- cursor: pointer;
- }
- div[data-hide="true"] {
- display: none;
- }
- dd {
- margin-left: 1em;
- padding: 4px;
- cursor: pointer;
- border-radius: 4px;
- margin-bottom: 4px;
- }
- dd:nth-child(even) {
- background-color: lightgray;
- }
- dd:nth-child(odd) {
- background-color: lightblue;
- }
- a {
- color: black;
- }
- dd[data-selected] {
- background-color: green;
- }
- }
- }
-`;
-
-const ResizeHandleDiv = styled.div`
- width: 10px;
- background: #ddd;
- cursor: ew-resize;
-`;
-
-function ResizeHandle({ onUpdate }: { onUpdate: (x: number) => void }): VNode {
- const [start, setStart] = useState<number | undefined>(undefined);
- return (
- <ResizeHandleDiv
- onMouseDown={(e: any) => {
- setStart(e.pageX);
- console.log("active", e.pageX);
- return false;
- }}
- onMouseMove={(e: any) => {
- if (start !== undefined) {
- onUpdate(e.pageX - start);
- }
- return false;
- }}
- onMouseUp={() => {
- setStart(undefined);
- return false;
- }}
- />
- );
-}
-
-const Content = styled.div`
- width: 100%;
- padding: 20px;
-`;
-
-function parseExampleImport(group: string, im: any): ComponentItem {
- const component = im.default.title;
- return {
- name: component,
- examples: Object.entries(im)
- .filter(([k]) => k !== "default")
- .map(
- ([name, render]) =>
- ({
- group,
- component,
- name,
- render,
- } as ExampleItem),
- ),
- };
-}
-
-const allExamples = Object.entries({ popup, wallet, cta, mui, components
}).map(
- ([title, value]) => ({
- title,
- list: value.default.map((s) => parseExampleImport(title, s)),
- }),
-);
-
-interface ComponentItem {
- name: string;
- examples: ExampleItem[];
-}
-
-interface ExampleItem {
- group: string;
- component: string;
- name: string;
- render: {
- (args: any): VNode;
- args: any;
- };
-}
-
-function findByGroupComponentName(
- group: string,
- component: string,
- name: string,
-): ExampleItem | undefined {
- const gl = allExamples.filter((e) => e.title === group);
- if (gl.length === 0) {
- return undefined;
- }
- const cl = gl[0].list.filter((l) => l.name === component);
- if (cl.length === 0) {
- return undefined;
- }
- const el = cl[0].examples.filter((c) => c.name === name);
- if (el.length === 0) {
- return undefined;
- }
- return el[0];
-}
-
-function getContentForExample(item: ExampleItem | undefined): () => VNode {
- if (!item)
- return function SelectExampleMessage() {
- return <div>select example from the list on the left</div>;
- };
- const example = findByGroupComponentName(
- item.group,
- item.component,
- item.name,
- );
- if (!example) {
- return function ExampleNotFoundMessage() {
- return <div>example not found</div>;
- };
- }
- return () => example.render(example.render.args);
-}
-
-function ExampleList({
- name,
- list,
- selected,
- onSelectStory,
-}: {
- name: string;
- list: {
- name: string;
- examples: ExampleItem[];
- }[];
- selected: ExampleItem | undefined;
- onSelectStory: (i: ExampleItem, id: string) => void;
-}): VNode {
- const [isOpen, setOpen] = useState(selected && selected.group === name);
- return (
- <ol>
- <div onClick={() => setOpen(!isOpen)}>{name}</div>
- <div data-hide={!isOpen}>
- {list.map((k) => (
- <li key={k.name}>
- <dl>
- <dt>{k.name.substring(k.name.indexOf("/") + 1)}</dt>
- {k.examples.map((r) => {
- const e = encodeURIComponent;
- const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`;
- const isSelected =
- selected &&
- selected.component === r.component &&
- selected.group === r.group &&
- selected.name === r.name;
- return (
- <dd id={eId} key={r.name} data-selected={isSelected}>
- <a
- href={`#${eId}`}
- onClick={(e) => {
- e.preventDefault();
- location.hash = `#${eId}`;
- onSelectStory(r, eId);
- history.pushState({}, "", `#${eId}`);
- }}
- >
- {r.name}
- </a>
- </dd>
- );
- })}
- </dl>
- </li>
- ))}
- </div>
- </ol>
+function main(): void {
+ renderStories(
+ { popup, wallet, cta, mui, components },
+ {
+ strings,
+ getWrapperForGroup,
+ },
);
}
-/**
- * Prevents the UI from redirecting and inform the dev
- * where the <a /> should have redirected
- * @returns
- */
-function PreventLinkNavigation({
- children,
-}: {
- children: ComponentChildren;
-}): VNode {
- return (
- <div
- onClick={(e) => {
- let t: any = e.target;
- do {
- if (t.localName === "a" && t.getAttribute("href")) {
- alert(`should navigate to: ${t.attributes.href.value}`);
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
- return false;
- }
- } while ((t = t.parentNode));
- }}
- >
- {children}
- </div>
- );
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+} else {
+ main();
}
-
function getWrapperForGroup(group: string): FunctionComponent {
switch (group) {
case "popup":
return function PopupWrapper({ children }: any) {
return (
- <PreventLinkNavigation>
+ <Fragment>
<PopupNavBar />
<PopupBox>{children}</PopupBox>
- </PreventLinkNavigation>
+ </Fragment>
);
};
case "wallet":
return function WalletWrapper({ children }: any) {
return (
- <PreventLinkNavigation>
+ <Fragment>
<LogoHeader />
<WalletNavBar />
<WalletBox>{children}</WalletBox>
- </PreventLinkNavigation>
+ </Fragment>
);
};
case "cta":
return function WalletWrapper({ children }: any) {
return (
- <PreventLinkNavigation>
+ <Fragment>
<WalletBox>{children}</WalletBox>
- </PreventLinkNavigation>
+ </Fragment>
);
};
default:
return Fragment;
}
}
-
-function ErrorReport({
- children,
- selected,
-}: {
- children: ComponentChild;
- selected: ExampleItem | undefined;
-}): VNode {
- const [error, resetError] = useErrorBoundary();
- //if there is an error, reset when unloading this component
- useEffect(() => (error ? resetError : undefined));
- if (error) {
- return (
- <div>
- <p>Error was thrown trying to render</p>
- {selected && (
- <ul>
- <li>
- <b>group</b>: {selected.group}
- </li>
- <li>
- <b>component</b>: {selected.component}
- </li>
- <li>
- <b>example</b>: {selected.name}
- </li>
- <li>
- <b>args</b>:{" "}
- <pre>{JSON.stringify(selected.render.args, undefined, 2)}</pre>
- </li>
- </ul>
- )}
- <p>{error.message}</p>
- <pre>{error.stack}</pre>
- </div>
- );
- }
- return <Fragment>{children}</Fragment>;
-}
-
-function getSelectionFromLocationHash(hash: string): ExampleItem | undefined {
- if (!hash) return undefined;
- const parts = hash.substring(1).split("-");
- if (parts.length < 3) return undefined;
- return findByGroupComponentName(
- decodeURIComponent(parts[0]),
- decodeURIComponent(parts[1]),
- decodeURIComponent(parts[2]),
- );
-}
-
-function Application(): VNode {
- const initialSelection = getSelectionFromLocationHash(location.hash);
- const [selected, updateSelected] = useState<ExampleItem | undefined>(
- initialSelection,
- );
- useEffect(() => {
- if (location.hash) {
- const hash = location.hash.substring(1);
- const found = document.getElementById(hash);
- if (found) {
- setTimeout(() => {
- found.scrollIntoView({
- block: "center",
- });
- }, 10);
- }
- }
- }, []);
-
- const ExampleContent = getContentForExample(selected);
-
- const GroupWrapper = getWrapperForGroup(selected?.group || "default");
- const [sidebarWidth, setSidebarWidth] = useState(200);
-
- return (
- <Page>
- <LiveReload />
- <SideBar style={{ "--with-size": `${sidebarWidth}px` }}>
- {allExamples.map((e) => (
- <ExampleList
- key={e.title}
- name={e.title}
- list={e.list}
- selected={selected}
- onSelectStory={(item, htmlId) => {
- document.getElementById(htmlId)?.scrollIntoView({
- block: "center",
- });
- updateSelected(item);
- }}
- />
- ))}
- <hr />
- </SideBar>
- <ResizeHandle
- onUpdate={(x) => {
- setSidebarWidth((s) => s + x);
- }}
- />
- <Content>
- <ErrorReport selected={selected}>
- <GroupWrapper>
- <ExampleContent />
- </GroupWrapper>
- </ErrorReport>
- </Content>
- </Page>
- );
-}
-
-if (document.readyState === "loading") {
- document.addEventListener("DOMContentLoaded", main);
-} else {
- main();
-}
-function main(): void {
- try {
- const container = document.getElementById("container");
- if (!container) {
- throw Error("container not found, can't mount page contents");
- }
- render(<Application />, container);
- } catch (e) {
- console.error("got error", e);
- if (e instanceof Error) {
- document.body.innerText = `Fatal error: "${e.message}". Please report
this bug at https://bugs.gnunet.org/.`;
- }
- }
-}
-
-let liveReloadMounted = false;
-function LiveReload({ port = 8002 }: { port?: number }): VNode {
- const [isReloading, setIsReloading] = useState(false);
- useEffect(() => {
- if (!liveReloadMounted) {
- setupLiveReload(port, () => {
- setIsReloading(true);
- window.location.reload();
- });
- liveReloadMounted = true;
- }
- });
-
- if (isReloading) {
- return (
- <div
- style={{
- position: "absolute",
- width: "100%",
- height: "100%",
- backgroundColor: "rgba(0,0,0,0.5)",
- color: "white",
- display: "flex",
- justifyContent: "center",
- }}
- >
- <h1 style={{ margin: "auto" }}>reloading...</h1>
- </div>
- );
- }
- return <Fragment />;
-}
-
-function setupLiveReload(port: number, onReload: () => void): void {
- const protocol = location.protocol === "https:" ? "wss:" : "ws:";
- const host = location.hostname;
- const socketPath = `${protocol}//${host}:${port}/socket`;
-
- const ws = new WebSocket(socketPath);
- ws.onmessage = (message) => {
- const event = JSON.parse(message.data);
- if (event.type === "LOG") {
- console.log(event.message);
- }
- if (event.type === "RELOAD") {
- onReload();
- }
- };
- ws.onerror = (error) => {
- console.error(error);
- };
-}
-
-const isFirefox = typeof (window as any)["InstallTrigger"] !== "undefined";
-
-//FIXME: create different entry point for any platform instead of
-//switching in runtime
-if (isFirefox) {
- console.log("Wallet setup for Firefox API");
- setupPlatform(firefoxAPI);
-} else {
- console.log("Wallet setup for Chrome API");
- setupPlatform(chromeAPI);
-}
diff --git a/packages/taler-wallet-webextension/src/test-utils.ts
b/packages/taler-wallet-webextension/src/test-utils.ts
index ccc8774e9..b4983b4c2 100644
--- a/packages/taler-wallet-webextension/src/test-utils.ts
+++ b/packages/taler-wallet-webextension/src/test-utils.ts
@@ -49,8 +49,12 @@ export function createExample<Props>(
// check how we can build evaluatedProps in render time
const evaluatedProps = typeof props === "function" ? props() : props;
const Render = (args: any): VNode => create(Component, args);
- Render.args = evaluatedProps;
- return Render;
+ // Render.args = evaluatedProps;
+
+ return {
+ component: Render,
+ props: evaluatedProps
+ };
}
export function createExampleWithCustomContext<Props, ContextProps>(
@@ -66,8 +70,11 @@ export function createExampleWithCustomContext<Props,
ContextProps>(
...contextProps,
children: [Render(args)],
} as any);
- WithContext.args = evaluatedProps;
- return WithContext;
+
+ return {
+ component: WithContext,
+ props: evaluatedProps
+ };
}
export function NullLink({
@@ -334,8 +341,8 @@ export function createWalletApiMock(): {
callback: cb
? cb
: () => {
- null;
- },
+ null;
+ },
});
return handler;
},
diff --git
a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
index ae3e1b091..887ad235e 100644
---
a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ConfirmProviderView, SelectProviderView } from "./views.js";
export default {
- title: "wallet/backup/confirm",
+ title: "add backup provider",
};
export const DemoService = createExample(ConfirmProviderView, {
diff --git
a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
index cf1551127..f5db3825d 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { AddNewActionView as TestedComponent } from "./AddNewActionView.js";
export default {
- title: "wallet/add new action",
+ title: "add new action",
component: TestedComponent,
argTypes: {
setDeviceName: () => Promise.resolve(),
diff --git a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
index 2e19d3944..c3a1ea5d6 100644
--- a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
@@ -29,13 +29,7 @@ import { createExample } from "../test-utils.js";
import { TalerProtocolTimestamp } from "@gnu-taler/taler-util";
export default {
- title: "wallet/backup/list",
- component: TestedComponent,
- argTypes: {
- onRetry: { action: "onRetry" },
- onDelete: { action: "onDelete" },
- onBack: { action: "onBack" },
- },
+ title: "backup",
};
export const LotOfProviders = createExample(TestedComponent, {
diff --git
a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
index 75c544c84..b4d1060eb 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
@@ -25,7 +25,7 @@ import { labelForAccountType } from "./state.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/deposit",
+ title: "deposit",
};
// const ac = parsePaytoUri("payto://iban/ES8877998399652238")!;
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
index 492da193b..2f066d744 100644
---
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
@@ -74,7 +74,7 @@ export namespace State {
}
export type Contact = {
- icon: string;
+ icon_type: string;
name: string;
description: string;
};
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
index fe02151de..a67f926bc 100644
---
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
@@ -21,7 +21,6 @@ import { useAsyncAsHook } from
"../../hooks/useAsyncAsHook.js";
import { assertUnreachable, RecursiveState } from "../../utils/index.js";
import { wxApi } from "../../wxApi.js";
import { Contact, Props, State } from "./index.js";
-import bankIcon from "../../svg/ri-bank-line.svg";
export function useComponentState(
props: Props,
@@ -42,22 +41,22 @@ export function useComponentState(
const previous: Contact[] = true
? []
: [
- {
- name: "International Bank",
- icon: bankIcon, //FIXME: should be decided in the view
- description: "account ending with 3454",
- },
- {
- name: "Max",
- icon: bankIcon,
- description: "account ending with 3454",
- },
- {
- name: "Alex",
- icon: bankIcon,
- description: "account ending with 3454",
- },
- ];
+ {
+ name: "International Bank",
+ icon_type: 'bank',
+ description: "account ending with 3454",
+ },
+ {
+ name: "Max",
+ icon_type: 'bank',
+ description: "account ending with 3454",
+ },
+ {
+ name: "Alex",
+ icon_type: 'bank',
+ description: "account ending with 3454",
+ },
+ ];
if (!amount) {
return () => {
@@ -115,15 +114,15 @@ export function useComponentState(
onClick: invalid
? undefined
: async () => {
- props.goToWalletBankDeposit(currencyAndAmount);
- },
+ props.goToWalletBankDeposit(currencyAndAmount);
+ },
},
goToWallet: {
onClick: invalid
? undefined
: async () => {
- props.goToWalletWalletSend(currencyAndAmount);
- },
+ props.goToWalletWalletSend(currencyAndAmount);
+ },
},
amountHandler: {
onInput: async (s) => setAmount(s),
@@ -145,15 +144,15 @@ export function useComponentState(
onClick: invalid
? undefined
: async () => {
- props.goToWalletManualWithdraw(currencyAndAmount);
- },
+ props.goToWalletManualWithdraw(currencyAndAmount);
+ },
},
goToWallet: {
onClick: invalid
? undefined
: async () => {
- props.goToWalletWalletInvoice(currencyAndAmount);
- },
+ props.goToWalletWalletInvoice(currencyAndAmount);
+ },
},
amountHandler: {
onInput: async (s) => setAmount(s),
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
index b8d868683..ffec8ba36 100644
---
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView, SelectCurrencyView } from "./views.js";
export default {
- title: "wallet/destination",
+ title: "destination",
};
export const GetCash = createExample(ReadyView, {
diff --git
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
index ba8d65ffa..a9a4b2e41 100644
---
a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
@@ -377,6 +377,7 @@ export function ReadySendView({
</Container>
);
}
+import bankIcon from "../../svg/ri-bank-line.svg";
function RowExample({
info,
@@ -385,15 +386,22 @@ function RowExample({
info: Contact;
disabled?: boolean;
}): VNode {
+ const icon = info.icon_type === "bank" ? bankIcon : undefined;
return (
<MediaExample data-disabled={disabled}>
<MediaLeft>
<CircleDiv>
- <SvgIcon
- title={info.name}
- dangerouslySetInnerHTML={{ __html: info.icon }}
- color="currentColor"
- />
+ {icon !== undefined ? (
+ <SvgIcon
+ title={info.name}
+ dangerouslySetInnerHTML={{
+ __html: icon,
+ }}
+ color="currentColor"
+ />
+ ) : (
+ <span>A</span>
+ )}
</CircleDiv>
</MediaLeft>
<MediaBody>
diff --git
a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
index 73bcbc6bc..d9a5a8fd7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../test-utils.js";
import { View as TestedComponent } from "./DeveloperPage.js";
export default {
- title: "wallet/developer",
+ title: "developer",
component: TestedComponent,
argTypes: {
setDeviceName: () => Promise.resolve(),
diff --git
a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
index b58fce8e6..8fbecfc4c 100644
---
a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { ExchangeAddConfirmPage as TestedComponent } from
"./ExchangeAddConfirm.js";
export default {
- title: "wallet/exchange add/confirm",
+ title: "exchange add confirm",
component: TestedComponent,
argTypes: {
onRetry: { action: "onRetry" },
diff --git
a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
index e71b34f31..cd86ad8c6 100644
---
a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
@@ -24,13 +24,7 @@ import { queryToSlashKeys } from "../utils/index.js";
import { ExchangeSetUrlPage as TestedComponent } from "./ExchangeSetUrl.js";
export default {
- title: "wallet/exchange add/set url",
- component: TestedComponent,
- argTypes: {
- onRetry: { action: "onRetry" },
- onDelete: { action: "onDelete" },
- onBack: { action: "onBack" },
- },
+ title: "exchange add set url",
};
export const ExpectedUSD = createExample(TestedComponent, {
diff --git
a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
index dfa8bbd39..3706359a8 100644
---
a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ComparingView, ReadyView } from "./views.js";
export default {
- title: "wallet/select exchange",
+ title: "select exchange",
};
export const Bitcoin1 = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 1efd917c8..1674ac135 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -40,7 +40,7 @@ import { HistoryView as TestedComponent } from "./History.js";
import { createExample } from "../test-utils.js";
export default {
- title: "wallet/balance",
+ title: "balance",
component: TestedComponent,
};
diff --git
a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
index 875dec227..ca6db8be9 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/manage account",
+ title: "manage account",
};
const nullFunction = async () => {
diff --git
a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
index e4c7105e9..c4da99909 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../../test-utils.js";
import { ReadyView } from "./views.js";
export default {
- title: "wallet/notifications",
+ title: "notifications",
};
export const Ready = createExample(ReadyView, {
diff --git
a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
index bd3b7d2d3..9ca397302 100644
---
a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { ConfirmProviderView as TestedComponent } from "./ProviderAddPage.js";
export default {
- title: "wallet/backup/confirm",
+ title: "confirm",
component: TestedComponent,
argTypes: {
onRetry: { action: "onRetry" },
diff --git
a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
index b728d1e2e..a5528c36b 100644
---
a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
+++
b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { SetUrlView as TestedComponent } from "./ProviderAddPage.js";
export default {
- title: "wallet/backup/add",
+ title: "add",
component: TestedComponent,
argTypes: {
onRetry: { action: "onRetry" },
diff --git
a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
index 854c14ac1..98c68e6bd 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
@@ -25,7 +25,7 @@ import { createExample } from "../test-utils.js";
import { ProviderView as TestedComponent } from "./ProviderDetailPage.js";
export default {
- title: "wallet/backup/details",
+ title: "provider details",
component: TestedComponent,
argTypes: {
onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
index caf833e79..0fc38e90f 100644
--- a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { QrReaderPage } from "./QrReader.js";
export default {
- title: "wallet/qr reader",
+ title: "qr reader",
};
export const Reading = createExample(QrReaderPage, {});
diff --git
a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
index 7d10ad0f4..7ea3b386b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../test-utils.js";
import { ReserveCreated as TestedComponent } from "./ReserveCreated.js";
export default {
- title: "wallet/manual withdraw/reserve created",
+ title: "reserve created",
component: TestedComponent,
argTypes: {},
};
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index 4082ca29b..04b7f3e09 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { SettingsView as TestedComponent } from "./Settings.js";
export default {
- title: "wallet/settings",
+ title: "settings",
component: TestedComponent,
argTypes: {
setDeviceName: () => Promise.resolve(),
diff --git
a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index abbc883bd..868d3b0e6 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -46,7 +46,7 @@ import {
import { TransactionView as TestedComponent } from "./Transaction.js";
export default {
- title: "wallet/history/details",
+ title: "transaction details",
component: TestedComponent,
argTypes: {
onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
index 118d261fa..7e52d4270 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
import { View as TestedComponent } from "./Welcome.js";
export default {
- title: "wallet/welcome",
+ title: "welcome",
component: TestedComponent,
};
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 554527108..05e141dc6 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -19,42 +19,21 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "./Backup.stories.js";
-import * as a4 from "./DepositPage/stories.js";
-import * as a5 from "./ExchangeAddConfirm.stories.js";
-import * as a6 from "./ExchangeAddSetUrl.stories.js";
-import * as a7 from "./History.stories.js";
-import * as a8 from "./AddBackupProvider/stories.js";
-import * as a10 from "./ProviderDetail.stories.js";
-import * as a11 from "./ReserveCreated.stories.js";
-import * as a12 from "./Settings.stories.js";
-import * as a13 from "./Transaction.stories.js";
-import * as a14 from "./Welcome.stories.js";
-import * as a15 from "./AddNewActionView.stories.js";
-import * as a16 from "./DeveloperPage.stories.js";
-import * as a17 from "./QrReader.stories.js";
-import * as a18 from "./DestinationSelection/stories.js";
-import * as a19 from "./ExchangeSelection/stories.js";
-import * as a20 from "./ManageAccount/stories.js";
-import * as a21 from "./Notifications/stories.js";
-
-export default [
- a1,
- a4,
- a5,
- a6,
- a7,
- a8,
- a10,
- a11,
- a12,
- a13,
- a14,
- a15,
- a16,
- a17,
- a18,
- a19,
- a20,
- a21,
-];
+export * as a1 from "./Backup.stories.js";
+export * as a4 from "./DepositPage/stories.js";
+export * as a5 from "./ExchangeAddConfirm.stories.js";
+export * as a6 from "./ExchangeAddSetUrl.stories.js";
+export * as a7 from "./History.stories.js";
+export * as a8 from "./AddBackupProvider/stories.js";
+export * as a10 from "./ProviderDetail.stories.js";
+export * as a11 from "./ReserveCreated.stories.js";
+export * as a12 from "./Settings.stories.js";
+export * as a13 from "./Transaction.stories.js";
+export * as a14 from "./Welcome.stories.js";
+export * as a15 from "./AddNewActionView.stories.js";
+export * as a16 from "./DeveloperPage.stories.js";
+export * as a17 from "./QrReader.stories.js";
+export * as a18 from "./DestinationSelection/stories.js";
+export * as a19 from "./ExchangeSelection/stories.js";
+export * as a20 from "./ManageAccount/stories.js";
+export * as a21 from "./Notifications/stories.js";
diff --git a/packages/taler-wallet-webextension/tsconfig.json
b/packages/taler-wallet-webextension/tsconfig.json
index 95e7b34fd..5fc45caae 100644
--- a/packages/taler-wallet-webextension/tsconfig.json
+++ b/packages/taler-wallet-webextension/tsconfig.json
@@ -31,6 +31,9 @@
{
"path": "../taler-wallet-core/"
},
+ {
+ "path": "../web-util/"
+ },
{
"path": "../taler-util/"
}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (219e48f35 -> f42ebb30c), gnunet, 2022/12/06
- [taler-wallet-core] 04/06: using web-utils in merchant-backoffice (not yet completed), gnunet, 2022/12/06
- [taler-wallet-core] 05/06: implement web-utils in web-extension,
gnunet <=
- [taler-wallet-core] 02/06: using web-utils in anastasis-webui, gnunet, 2022/12/06
- [taler-wallet-core] 03/06: using web-utils in demobank, gnunet, 2022/12/06
- [taler-wallet-core] 06/06: update package lock for dependecies update, gnunet, 2022/12/06
- [taler-wallet-core] 01/06: web-util: utils for developing webapps, gnunet, 2022/12/06