import image as datauri, some eslint fixes

packages/taler-wallet-webextension/build-fast-with-linaria.mjs

@@ -52,7 +52,7 @@ export const buildConfig = {
   minify: false,
   loader: {
     '.svg': 'text',
-    '.png': 'file',
+    '.png': 'dataurl',
   },
   target: [
     'es6'

packages/taler-wallet-webextension/src/components/styled/index.tsx

@@ -137,7 +137,6 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     flex-direction: row;
     justify-content: space-between;
     display: flex;
-    background-color: #f7f7f7;
     button {
       margin-right: 8px;
       margin-left: 8px;
@@ -375,7 +374,6 @@ export const CenteredDialog = styled.div`
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
     padding: 10px;
-    background-color: #f5f5f5;
     display: flex;
     justify-content: space-between;
   }

packages/taler-wallet-webextension/src/stories.tsx

@@ -22,7 +22,6 @@ import { setupI18n } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import {
   ComponentChild,
-  ComponentProps,
   Fragment,
   FunctionComponent,
   h,
@@ -60,6 +59,7 @@ const SideBar = styled.div`
   height: calc(100vh - 20px);
   overflow-y: visible;
   overflow-x: hidden;
+  scroll-behavior: smooth;
   & > {
     ol {
       padding: 4px;
@@ -86,9 +86,10 @@ const SideBar = styled.div`
 
 const Content = styled.div`
   width: 100%;
+  padding: 20px;
 `;
 
-function parseExampleImport(group: string, im: any) {
+function parseExampleImport(group: string, im: any): ComponentItem {
   const component = im.default.title;
   return {
     name: component,
@@ -113,6 +114,11 @@ const allExamples = Object.entries({ popup, wallet, mui }).map(
   }),
 );
 
+interface ComponentItem {
+  name: string;
+  examples: ExampleItem[];
+}
+
 interface ExampleItem {
   group: string;
   component: string;
@@ -127,7 +133,7 @@ function findByGroupComponentName(
   group: string,
   component: string,
   name: string,
-) {
+): ExampleItem | undefined {
   const gl = allExamples.filter((e) => e.title === group);
   if (gl.length === 0) {
     return undefined;
@@ -163,7 +169,7 @@ function ExampleList({
     name: string;
     examples: ExampleItem[];
   }[];
-}) {
+}): VNode {
   const [open, setOpen] = useState(true);
   return (
     <ol>
@@ -173,17 +179,15 @@ function ExampleList({
           <li>
             <dl>
               <dt>{k.name}</dt>
-              {k.examples.map((r) => (
+              {k.examples.map((r) => {
-                <dd>
+                const e = encodeURIComponent;
-                  <a
+                const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`;
-                    href={`#${encodeURIComponent(r.group)}-${encodeURIComponent(
+                return (
-                      r.component,
+                  <dd id={eId}>
-                    )}-${encodeURIComponent(r.name)}`}
+                    <a href={`#${eId}`}>{r.name}</a>
-                  >
+                  </dd>
-                    {r.name}
+                );
-                  </a>
+              })}
-                </dd>
-              ))}
             </dl>
           </li>
         ))}
@@ -219,7 +223,7 @@ function ErrorReport({
 }: {
   children: ComponentChild;
   selected: ExampleItem | undefined;
-}) {
+}): VNode {
   const [error] = useErrorBoundary();
   if (error) {
     return (
@@ -261,13 +265,13 @@ function getSelectionFromLocationHash(): ExampleItem | undefined {
   );
 }
 
-function Application() {
+function Application(): VNode {
   const initialSelection = getSelectionFromLocationHash();
   const [selected, updateSelected] = useState<ExampleItem | undefined>(
     initialSelection,
   );
 
-  function updateSelectedFromHashChange({ newURL, oldURL }: any) {
+  function updateSelectedFromHashChange({ newURL, oldURL }: any): void {
     const selected = getSelectionFromLocationHash();
     updateSelected(selected);
   }

packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx

@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Amounts, Balance, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Balance, parsePaytoUri } from "@gnu-taler/taler-util";
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { createExample } from "../test-utils.js";
 import { View as TestedComponent } from "./DepositPage.js";
@@ -46,6 +46,7 @@ export const WithEmptyAccountList = createExample(TestedComponent, {
       available: "USD:10",
     } as Balance,
   ],
+  currency: "USD",
   onCalculateFee: alwaysReturnFeeToOne,
 });
 
@@ -56,5 +57,6 @@ export const WithSomeBankAccounts = createExample(TestedComponent, {
       available: "USD:10",
     } as Balance,
   ],
+  currency: "USD",
   onCalculateFee: alwaysReturnFeeToOne,
 });

packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx

@@ -32,7 +32,6 @@ import {
   TransactionWithdrawal,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
-import { ComponentChildren, h } from "preact";
 import { DevContextProviderForTesting } from "../context/devContext.js";
 import {
   createExample,
@@ -239,6 +238,8 @@ export const PaymentPending = createExample(TestedComponent, {
   transaction: { ...exampleData.payment, pending: true },
 });
 
+import beer from "../../static-dev/beer.png";
+
 export const PaymentWithProducts = createExample(TestedComponent, {
   transaction: {
     ...exampleData.payment,
@@ -263,11 +264,13 @@ export const PaymentWithProducts = createExample(TestedComponent, {
           description: "beer",
           unit: "pint",
           quantity: 15,
+          image: beer,
         },
         {
           description: "beer",
           unit: "pint",
           quantity: 15,
+          image: beer,
         },
       ],
     },