taler-typescript-core

commit cc062961c0050ea82d3386723b2b120b6d04d65f
parent ffb7f050fd93d65727f0ff76bc8e088438113aef
Author: Sebastian <sebasjm@gmail.com>
Date:   Mon, 27 Oct 2025 10:55:30 -0300

add a version of the button for the bulma css

Diffstat:
M
packages/web-util/src/components/Button.tsx
 | 
52
++++++++++++++++++++++++++++++++++++++++++----------
M
packages/web-util/src/components/NotificationBanner.tsx
 | 
52
+++++++++++++++++++++++++++++++++++++++++++++++++---
M
packages/web-util/src/hooks/useNotifications.ts
 | 
2
+-

3 files changed, 92 insertions(+), 14 deletions(-)
diff --git a/packages/web-util/src/components/Button.tsx b/packages/web-util/src/components/Button.tsx
@@ -16,8 +16,10 @@
 
 import { Fragment, VNode, h } from "preact";
 import { HTMLAttributes, useState } from "preact/compat";
-import { SafeHandlerTemplate, useTranslationContext } from "../index.browser.js";
-
+import {
+  SafeHandlerTemplate,
+  useTranslationContext,
+} from "../index.browser.js";
 
 export interface ButtonHandler {
   onClick: (() => Promise<void>) | undefined;
@@ -33,9 +35,9 @@ interface Props extends HTMLAttributes<HTMLButtonElement> {
  *
  * When the async function is running the inner text will change into
  * a "loading" animation.
- * 
+ *
  * @deprecated use ButtonBetter
- * 
+ *
  * @param param0
  * @returns
  */
@@ -68,14 +70,16 @@ export function Button({
   );
 }
 
-
-type PropsBetter = Omit<Omit<HTMLAttributes<HTMLButtonElement>, "onClick">,"disabled"> & {
-  onClick: SafeHandlerTemplate<any, any> | undefined
-}
+type PropsBetter = Omit<
+  Omit<HTMLAttributes<HTMLButtonElement>, "onClick">,
+  "disabled"
+> & {
+  onClick: SafeHandlerTemplate<any, any> | undefined;
+};
 /**
  * FIXME: removed deprecated and change for this one
- * @param param0 
- * @returns 
+ * @param param0
+ * @returns
  */
 export function ButtonBetter({
   children,
@@ -103,6 +107,34 @@ export function ButtonBetter({
   );
 }
 
+// FIXME: we should stop using bulma css and remove all of this support
+export function ButtonBetterBulma({
+  children,
+  onClick,
+  ...rest
+}: PropsBetter & {"data-tooltip"?: string,}): VNode {
+  const [running, setRunning] = useState(false);
+  return (
+    <span {...rest as any}>
+      <button
+        class="button is-success"
+        disabled={running || !onClick || !onClick.args}
+        onClick={(e) => {
+          e.preventDefault();
+          if (!onClick || !onClick.args) {
+            return;
+          }
+          setRunning(true);
+          onClick.call().finally(() => {
+            setRunning(false);
+          });
+        }}
+      >
+        {running ? <Wait /> : children}
+      </button>
+    </span>
+  );
+}
 
 function Wait(): VNode {
   return (
diff --git a/packages/web-util/src/components/NotificationBanner.tsx b/packages/web-util/src/components/NotificationBanner.tsx
@@ -1,7 +1,6 @@
-import { h, Fragment, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { DebugInfo, Notification } from "../index.browser.js";
 import { Attention } from "./Attention.js";
-import { DebugInfo, Notification, useTranslationContext } from "../index.browser.js";
-import { useCommonPreference } from "../context/common-preferences.js";
 
 export function LocalNotificationBanner({
   notification,
@@ -47,3 +46,50 @@ export function LocalNotificationBanner({
       );
   }
 }
+
+export function LocalNotificationBannerBulma({
+  notification,
+}: {
+  notification?: Notification;
+}): VNode {
+  if (!notification) return <Fragment />;
+  const msg = notification.message;
+  switch (msg.type) {
+    case "error":
+      return (
+        <div class="notification">
+          <div class="columns is-vcentered">
+            <div class="column is-12">
+              <article class="message is-danger">
+                <div class="message-header">
+                  <p>{msg.title}</p>
+                </div>
+                {msg.description && (
+                  <div class="message-body">
+                    <div>{msg.description}</div>
+                    {msg.debug && (
+                      <pre> {JSON.stringify(msg.debug, undefined, 2)}</pre>
+                    )}
+                  </div>
+                )}
+              </article>
+            </div>
+          </div>
+        </div>
+      );
+    case "info":
+      return (
+        <div class="notification">
+          <div class="columns is-vcentered">
+            <div class="column is-12">
+              <article class="message is-info">
+                <div class="message-header">
+                  <p>{msg.title}</p>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      );
+  }
+}
diff --git a/packages/web-util/src/hooks/useNotifications.ts b/packages/web-util/src/hooks/useNotifications.ts
@@ -377,7 +377,7 @@ function failWithTitle(
 }
 
 export type OnOperationSuccesReturnType<T, K extends any[]> = (
-  result: T extends OperationOk<any> ? T : never,
+  result: T extends OperationOk<infer B> ? B : never,
   ...args: K
 ) => TranslatedString | undefined | void;