feat: handle lists

.github/workflows/cd.yml

@@ -6,7 +6,7 @@ on:
     types:
       - completed
     branches:
-      - main
+      - master
 
 jobs:
   publish:

README.md

@@ -19,8 +19,10 @@
 - Dynamic translations with multiple keys
 - Access deeply nested keys in json translations files
 - Adapts syntax to gender
+- Supports lists
 - Supports React Native
-- Provides typescript autocompletion for your keys (🤘)
+- Provides typescript autocompletion for your keys 
+
 
 <hr/>
 
@@ -72,7 +74,8 @@ yarn add talkr
     "zero": "you don't have new messages",
     "one": "you have 1 message",
     "many": "you have __count__ messages"
-  }
+  },
+  "days": ["Monday", "Tuesday", "Wednesday"],
 }
 ```
 
@@ -217,6 +220,34 @@ export default function MyComponent() {
 }
 ```
 
+# LIST
+
+- You can render a list of string
+- The last junction can be styled thanks to the following parameters:
+
+```ts
+  listType?: "conjunction" | "disjunction"; // ""conjunction" by default
+  listStyle?: "long" | "narrow"; // "narrow" by default
+```
+
+```json
+  "days": ["Monday", "Tuesday", "Wednesday"],
+```
+
+```javascript
+import React from "react";
+import { useT } from "talkr";
+
+export default function MyComponent() {
+  const { T } = useT();
+  return (
+    <>
+      <h1>{T("days", { listType: "conjunction" })}</h1>
+    </>
+  );
+}
+```
+
 <hr/>
 
 # LOCALE

src/models.ts

@@ -1,6 +1,7 @@
+import { PropsWithChildren } from "react";
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export interface TProps {
-  children: React.ReactNode;
+export interface TProps extends PropsWithChildren {
   languages: Record<string, any>;
   defaultLanguage: string;
   detectBrowserLanguage?: boolean;
@@ -32,7 +33,12 @@ export type KeyPath<T> = (
   ? Extract<D, string>
   : never;
 
-export type TParams = { count?: number; [key: string]: any };
+export type TParams = Record<string, any> & {
+  count?: number;
+  gender?: "m" | "f";
+  listType?: "conjunction" | "disjunction";
+  listStyle?: "long" | "narrow";
+};
 
 export type Autocomplete<schema> = KeyPath<schema>;
 

src/tr.tsx

@@ -7,6 +7,17 @@ const getPlural = (count: number, locale: string) => {
   return count === 0 ? "zero" : count === 1 ? "one" : "other";
 };
 
+const getList = (list: Array<string>, locale: string, options: TParams) => {
+  if (typeof Intl == "object" && typeof Intl.ListFormat == "function") {
+    const formatter = new Intl.ListFormat(locale, {
+      style: options?.listStyle || "narrow",
+      type: options?.listType || "conjunction",
+    });
+    return formatter.format(list);
+  }
+  return list.join(", ");
+};
+
 export function tr<Key extends string, Params extends TParams>(
   { locale, languages, defaultLanguage }: TrContext,
   key: Key,
@@ -15,6 +26,7 @@ export function tr<Key extends string, Params extends TParams>(
   const currentLocale = !languages[locale] ? defaultLanguage : locale;
   let result = languages[currentLocale];
   let currentKey: string = key;
+
   if (params && Object.keys(params).includes("count")) {
     const plural = getPlural(params.count as number, currentLocale);
     currentKey +=
@@ -24,21 +36,25 @@ export function tr<Key extends string, Params extends TParams>(
           ? ".many"
           : `.${plural}`;
   }
-  if (params && params["gender"]) {
+  if (params?.gender) {
     currentKey += params.gender === "m" ? ".male" : ".female";
   }
   currentKey.split(".").forEach((k: string) => {
     if (!result[k]) return;
     return (result = result[k]);
   });
-  if (typeof result !== "string") {
-    console.warn(`Talkr: Missing translation for ${key}`);
-    return "";
+  if (Array.isArray(result)) {
+    console.log("IS ARRAY", result);
+    return getList(result, locale, params as Params);
+  }
+  if (typeof result === "string") {
+    return params
+      ? result
+          .split("__")
+          .map((word: string) => params[word] || word)
+          .join("")
+      : result;
   }
-  return params
-    ? result
-        .split("__")
-        .map((word: string) => params[word] || word)
-        .join("")
-    : result;
+  //console.warn(`Talkr: Missing translation for ${key}`);
+  return "";
 }

test/dummy-app.tsx

@@ -25,6 +25,8 @@ const en = {
     one: "You have 1 message",
     many: "You have __count__ messages",
   },
+  days: ["Monday", "Tuesday", "Wednesday"],
+  emptyList: [],
 };
 
 const fr = {
@@ -50,6 +52,8 @@ const fr = {
     one: "Vous avez 1 message",
     many: "Vous avez __count__ messages",
   },
+  days: ["Lundi", "Mardi", "Mercredi"],
+  emptyList: [],
 };
 
 const DummyApp: FC<{ children: ReactNode }> = ({ children }) => {

test/index.test.tsx

@@ -28,6 +28,16 @@ const Component = () => {
       <div data-testid="talkr-queen">
         {T("idiom.sovereign", { gender: "f" })}
       </div>
+      <div data-testid="talkr-days-conjunction">{T("days")}</div>
+      <div data-testid="talkr-days-conjunction-long">
+        {T("days", { listStyle: "long" })}
+      </div>
+      <div data-testid="talkr-days-disjunction">
+        {T("days", { listType: "disjunction" })}
+      </div>
+      <div data-testid=" talkr-empty-list">
+        {T("empty-list", { listType: "disjunction" })}
+      </div>
       <div data-testid="talkr-unknown">{T("unknown.key")}</div>
       <button role="button" onClick={() => setLocale("fr")}>
         speak french
@@ -107,6 +117,28 @@ describe("gender", () => {
   });
 });
 
+describe("list", () => {
+  it("return a conjuction list", () => {
+    render(<Component />);
+    expect(screen.getByTestId("talkr-days-conjunction").textContent).toEqual(
+      "Monday, Tuesday, Wednesday",
+    );
+    expect(
+      screen.getByTestId("talkr-days-conjunction-long").textContent,
+    ).toEqual("Monday, Tuesday, and Wednesday");
+  });
+  it("return a disjunction list", () => {
+    render(<Component />);
+    expect(screen.getByTestId("talkr-days-disjunction").textContent).toEqual(
+      "Monday, Tuesday, or Wednesday",
+    );
+  });
+  it("return a empty string if the list is empty", () => {
+    render(<Component />);
+    expect(screen.getByTestId("talkr-empty-list").textContent).toEqual("");
+  });
+});
+
 describe("live translation update", () => {
   it("update a translation based on a dynamic counter", () => {
     render(<Counter />);