taler-typescript-core

commit 8f329518e9ecd8ef14a85a6619b51b2e29aa160f
parent f586af103f68c67f763c01c105fe640ce0d34aae
Author: Sebastian <sebasjm@gmail.com>
Date:   Sun, 26 Jan 2025 08:14:06 -0300

fix when input is undefined, show help text

Diffstat:
M
packages/web-util/src/forms/fields/InputDurationText.stories.tsx
 | 
5
+++++
M
packages/web-util/src/forms/fields/InputLine.tsx
 | 
2
+-
M
packages/web-util/src/forms/fields/InputSelectMultiple.stories.tsx
 | 
1
+
M
packages/web-util/src/forms/fields/InputSelectMultiple.tsx
 | 
10
+++++++++-
M
packages/web-util/src/forms/fields/InputText.stories.tsx
 | 
5
+++++
M
packages/web-util/src/forms/fields/InputToggle.tsx
 | 
5
+++++
M
packages/web-util/src/stories-utils.tsx
 | 
14
++++++++++----

7 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/packages/web-util/src/forms/fields/InputDurationText.stories.tsx b/packages/web-util/src/forms/fields/InputDurationText.stories.tsx
@@ -56,3 +56,8 @@ export const SimpleComment = tests.createExample(TestedComponent, {
   initial,
   design,
 });
+
+export const Empty = tests.createExample(TestedComponent, {
+  initial: { age: undefined },
+  design,
+});
diff --git a/packages/web-util/src/forms/fields/InputLine.tsx b/packages/web-util/src/forms/fields/InputLine.tsx
@@ -173,7 +173,7 @@ export function InputLine<T extends object, K extends keyof T>(
   useEffect(() => {
     if (!input.current) return;
     if (input.current === document.activeElement) return;
-    input.current.value = String(value);
+    input.current.value = !value ? "" : toString(value);
   }, [value]);
 
   if (state.hidden) return <div />;
diff --git a/packages/web-util/src/forms/fields/InputSelectMultiple.stories.tsx b/packages/web-util/src/forms/fields/InputSelectMultiple.stories.tsx
@@ -52,6 +52,7 @@ const design: FormDesign = {
         {
           type: "selectMultiple",
           label: "allow duplicates" as TranslatedString,
+          help: "this is a help text" as TranslatedString,
           id: "pets" as UIHandlerId,
           placeholder: "search..." as TranslatedString,
           choices: [
diff --git a/packages/web-util/src/forms/fields/InputSelectMultiple.tsx b/packages/web-util/src/forms/fields/InputSelectMultiple.tsx
@@ -19,6 +19,7 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
     choices,
     placeholder,
     tooltip,
+    help,
     required,
     unique,
     max,
@@ -70,7 +71,9 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
               }}
               class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
             >
-              <span class="sr-only">Remove</span>
+              <span class="sr-only">
+                <i18n.Translate>Remove</i18n.Translate>
+              </span>
               <svg
                 viewBox="0 0 14 14"
                 class="h-5 w-5 stroke-gray-700/50 group-hover:stroke-gray-700/75"
@@ -168,6 +171,11 @@ export function InputSelectMultiple<T extends object, K extends keyof T>(
           )}
         </div>
       )}
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/packages/web-util/src/forms/fields/InputText.stories.tsx b/packages/web-util/src/forms/fields/InputText.stories.tsx
@@ -62,3 +62,8 @@ export const SimpleComment = tests.createExample(TestedComponent, {
   initial,
   design,
 });
+
+export const Empty = tests.createExample(TestedComponent, {
+  initial: { comment: undefined },
+  design,
+});
diff --git a/packages/web-util/src/forms/fields/InputToggle.tsx b/packages/web-util/src/forms/fields/InputToggle.tsx
@@ -63,6 +63,11 @@ export function InputToggle<T extends object, K extends keyof T>(
           ></span>
         </button>
       </div>
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/packages/web-util/src/stories-utils.tsx b/packages/web-util/src/stories-utils.tsx
@@ -192,6 +192,12 @@ function ExampleList({
                       borderRadius: 4,
                       marginBottom: 4,
                     }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      location.hash = `#${eId}`;
+                      onSelectStory(r, eId);
+                      history.pushState({}, "", `#${eId}`);
+                    }}
                   >
                     <a
                       href={`#${eId}`}
@@ -395,10 +401,10 @@ function folder(groupName: string, value: ComponentOrFolder): ComponentItem[] {
   try {
     title =
       typeof value === "object" &&
-        typeof value.default === "object" &&
-        value.default !== undefined &&
-        "title" in value.default &&
-        typeof value.default.title === "string"
+      typeof value.default === "object" &&
+      value.default !== undefined &&
+      "title" in value.default &&
+      typeof value.default.title === "string"
         ? value.default.title
         : undefined;
   } catch (e) {