#65 Add fallback to useLabel, improve naming

croz-ltd · Mar 6, 2023 · e6d7664 · e6d7664
1 parent 5fd896b
commit e6d7664
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 34 deletions.
diff --git a/libs/core/src/Pagination.tsx b/libs/core/src/Pagination.tsx
@@ -183,7 +183,7 @@ function PageSummary({ pageNumber, pageSize, totalElements, children, ...props }
     <p className={pageSummaryClassName}>
       {intl ? (
         <Intl
-          name={intl.commonKeys["paginationDefault"] ?? "pagination.default"}
+          name={intl.commonKeys["paginationSummary"] ?? "pagination.summary"}
           params={{ from: fromElement, to: toElement, total: totalElement }}
         >
           {{

diff --git a/libs/form-elements/src/Field.tsx b/libs/form-elements/src/Field.tsx
@@ -144,7 +144,7 @@ export function FieldLabel({ id, label, required, tooltip, ...props }: FieldLabe
   const inputTokens = useTokens("Input", props.inputTokens);
   const fieldTokens = useTokens("Field", props.fieldTokens);
 
-  const requiredLabelText = useLabel("required");
+  const requiredLabelText = useLabel("required", "Required field");
 
   return (
     <Label id={id}>

diff --git a/libs/form-elements/src/FieldGroup.tsx b/libs/form-elements/src/FieldGroup.tsx
@@ -90,7 +90,7 @@ function FieldGroup({
   const fieldGroupTokens = useTokens("FieldGroup", props.fieldGroupTokens);
   const inputTokens = useTokens("Input", props.inputTokens);
 
-  const requiredLabelText = useLabel("required");
+  const requiredLabelText = useLabel("required", "Required field");
 
   let errorMessage = error;
 
@@ -102,7 +102,7 @@ function FieldGroup({
     className,
     fieldGroupTokens.Group.content.master,
     { [fieldGroupTokens.Group.content.horizontal]: !vertical },
-    { [fieldGroupTokens.Group.content.vertical]: vertical }
+    { [fieldGroupTokens.Group.content.vertical]: vertical },
   );
 
   return (

diff --git a/libs/intl/src/IntlProvider.tsx b/libs/intl/src/IntlProvider.tsx
@@ -31,7 +31,7 @@ export type CommonKeys = {
   autocompleteAddTag?: string;
   autocompleteNoResults?: string;
   selectNoResults?: string;
-  paginationDefault?: string;
+  paginationSummary?: string;
 };
 
 type IntlProviderProps = {
@@ -92,7 +92,7 @@ export function useIntl(
     autocompleteAddTag: "autocomplete.addTag",
     autocompleteNoResults: "autocomplete.noResults",
     selectNoResults: "select.noResults",
-    paginationDefault: "pagination.default",
+    paginationSummary: "pagination.summary",
   },
 ): IntlValue {
   const [lang, setLang] = React.useState<string>(language);

diff --git a/libs/intl/src/intlDictionary.js b/libs/intl/src/intlDictionary.js
@@ -5,7 +5,7 @@ export default {
     "autocomplete.addTag": "Add tag:",
     "autocomplete.noResults": "No results for:",
     "select.noResults": "No results",
-    "pagination.default": "Showing {from} to {to} of {total} results",
+    "pagination.summary": "Showing {from} to {to} of {total} results",
   },
   translations: {
     hr: {
@@ -14,15 +14,15 @@ export default {
       "autocomplete.addTag": "Dodaj oznaku:",
       "autocomplete.noResults": "Nema rezultata za:",
       "select.noResults": "Nema rezultata",
-      "pagination.default": "Prikazuje se {from} do {to} od {total} rezultata",
+      "pagination.summary": "Prikazuje se {from} do {to} od {total} rezultata",
     },
     en: {
       required: "Required field",
       "autocomplete.noTags": "No tags selected",
       "autocomplete.addTag": "Add tag:",
       "autocomplete.noResults": "No results for:",
       "select.noResults": "No results",
-      "pagination.default": "Showing {from} to {to} of {total} results",
+      "pagination.summary": "Showing {from} to {to} of {total} results",
     },
   },
 };
diff --git a/libs/intl/src/useIntlContext.tsx b/libs/intl/src/useIntlContext.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
 
-import { IntlContext, IntlContextType } from "./IntlProvider";
+import { IntlContext } from "./IntlProvider";
 
 export function useIntlContext() {
   const context = React.useContext(IntlContext);
 
   if (!context) {
-    return null as unknown as IntlContextType;
+    return undefined;
   }
 
   return context;

diff --git a/libs/intl/src/useLabel.tsx b/libs/intl/src/useLabel.tsx
@@ -21,7 +21,7 @@ import defaultDictionary from "./intlDictionary";
 import { CommonKeys } from "./IntlProvider";
 import { useIntlContext } from "./useIntlContext";
 
-export function useLabel(name: keyof CommonKeys): string {
+export function useLabel(name: keyof CommonKeys, fallbackValue: string): string {
   const intlContext = useIntlContext();
 
   if (intlContext) {
@@ -35,5 +35,5 @@ export function useLabel(name: keyof CommonKeys): string {
     return (dictionary?.translations?.[lang]?.[key] || dictionary?.messages?.[key]) as string;
   }
 
-  return "Required field";
+  return fallbackValue;
 }
diff --git a/storybook/src/intl/Intl.mdx b/storybook/src/intl/Intl.mdx
@@ -35,29 +35,32 @@ We ship Tiller with a default dictionary which contains necessary translations (
 
 ```json
 {
-    messages: {
-        required: "Obavezno polje",
-        "autocomplete.noTags": "Nema odabranih oznaka",
-        "autocomplete.addTag": "Dodaj oznaku:",
-        "autocomplete.noResults": "Nema rezultata za:",
-        "select.noResults": "Nema rezultata",
+  messages: {
+    required: "Required field",
+    "autocomplete.noTags": "No tags selected",
+    "autocomplete.addTag": "Add tag:",
+    "autocomplete.noResults": "No results for:",
+    "select.noResults": "No results",
+    "pagination.summary": "Showing {from} to {to} of {total} results",
+  },
+  translations: {
+    hr: {
+      required: "Obavezno polje",
+      "autocomplete.noTags": "Nema odabranih oznaka",
+      "autocomplete.addTag": "Dodaj oznaku:",
+      "autocomplete.noResults": "Nema rezultata za:",
+      "select.noResults": "Nema rezultata",
+      "pagination.summary": "Prikazuje se {from} do {to} od {total} rezultata",
     },
-    translations: {
-        hr: {
-            required: "Obavezno polje",
-            "autocomplete.noTags": "Nema odabranih oznaka",
-            "autocomplete.addTag": "Dodaj oznaku:",
-            "autocomplete.noResults": "Nema rezultata za:",
-            "select.noResults": "Nema rezultata",
-        },
-        en: {
-            required: "Required field",
-            "autocomplete.noTags": "No tags selected",
-            "autocomplete.addTag": "Add tag:",
-            "autocomplete.noResults": "No results for:",
-            "select.noResults": "No results",
-        },
+    en: {
+      required: "Required field",
+      "autocomplete.noTags": "No tags selected",
+      "autocomplete.addTag": "Add tag:",
+      "autocomplete.noResults": "No results for:",
+      "select.noResults": "No results",
+      "pagination.summary": "Showing {from} to {to} of {total} results",
     },
+  },
 };
 ```