From 51bbf08d241f0eff8847f6656accee03c0626d88 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 6 Dec 2022 11:28:56 -0300 Subject: 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 + */ + +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(undefined); - return ( - { - 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
select example from the list on the left
; - }; - const example = findByGroupComponentName( - item.group, - item.component, - item.name, - ); - if (!example) { - return function ExampleNotFoundMessage() { - return
example not found
; - }; - } - 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 ( -
    -
    setOpen(!isOpen)}>{name}
    -
    - {list.map((k) => ( -
  1. -
    -
    {k.name.substring(k.name.indexOf("/") + 1)}
    - {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 ( -
    - { - e.preventDefault(); - location.hash = `#${eId}`; - onSelectStory(r, eId); - history.pushState({}, "", `#${eId}`); - }} - > - {r.name} - -
    - ); - })} -
    -
    2. - ))} -
    -
+function main(): void { + renderStories( + { popup, wallet, cta, mui, components }, + { + strings, + getWrapperForGroup, + }, ); } -/** - * Prevents the UI from redirecting and inform the dev - * where the should have redirected - * @returns - */ -function PreventLinkNavigation({ - children, -}: { - children: ComponentChildren; -}): VNode { - return ( -
{ - 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} -
- ); +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 ( - + {children} - + ); }; case "wallet": return function WalletWrapper({ children }: any) { return ( - + {children} - + ); }; case "cta": return function WalletWrapper({ children }: any) { return ( - + {children} - + ); }; 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 ( -
-

Error was thrown trying to render

- {selected && ( -
    -
  • - group: {selected.group} -
    • -
  • - component: {selected.component} -
    • -
  • - example: {selected.name} -
    • -
  • - args:{" "} - 
    {JSON.stringify(selected.render.args, undefined, 2)}
    -
    • -
- )} -

{error.message}

- 
{error.stack}
-
- ); - } - return {children}; -} - -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( - 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 ( - - - - {allExamples.map((e) => ( - { - document.getElementById(htmlId)?.scrollIntoView({ - block: "center", - }); - updateSelected(item); - }} - /> - ))} -
- - { - setSidebarWidth((s) => s + x); - }} - /> - - - - - - - - - ); -} - -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(, 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 ( -
-

reloading...

-
- ); - } - return ; -} - -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( // 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( @@ -66,8 +70,11 @@ export function createExampleWithCustomContext( ...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({ ); } +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 ( - + {icon !== undefined ? ( + + ) : ( + A + )} 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/" } -- cgit v1.2.3