Merge pull request #785 from eisbuk/feature/shortened-names

Feature/shortened names

packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx

@@ -23,6 +23,14 @@ const customers: CustomerFull[] = Object.values({
     photoURL:
       "https://avatars.akamai.steamstatic.com/3f8169f3268ec0601dc642ab94eb8cbed57ab66e_full.jpg",
   },
+  pablo: {
+    ...c.saul,
+    id: "pablo",
+    name: "Pablo Emilio",
+    surname: "Escobar Gaviria",
+    photoURL:
+      "https://cdn.britannica.com/62/192062-131-96B933EF/mug-shot-Colombia-control-agency-Medellin.jpg",
+  },
 });
 
 export const Default = (): JSX.Element => {

packages/ui/src/CustomerGrid/CustomerGridItem.tsx

@@ -4,6 +4,8 @@ import { Customer } from "@eisbuk/shared";
 
 import { CustomerAvatar, BadgeSize } from "../UserAvatar";
 
+import { shortName } from "../utils/helpers";
+
 export interface GridItemProps extends Customer {
   onClick?: (customer: Customer) => void;
 }
@@ -14,6 +16,8 @@ const CustomerGridItem: React.FC<GridItemProps> = ({
 }) => {
   const customerValidated = customer.categories.length > 0;
 
+  const [sName, sSurname] = shortName(customer.name, customer.surname);
+
   return (
     <div
       style={
@@ -27,8 +31,8 @@ const CustomerGridItem: React.FC<GridItemProps> = ({
         className="w-20 h-20 mb-2"
         {...{ customer }}
       />
-      <p className="w-full text-center truncate">{customer.name}</p>
-      <p className="w-full text-center truncate">{customer.surname}</p>
+      <p className="w-full text-center truncate">{sName}</p>
+      <p className="w-full text-center truncate">{sSurname}</p>
     </div>
   );
 };

packages/ui/src/UserAvatar/UserAvatar.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentMeta } from "@storybook/react";
 import UserAvatar from "./UserAvatar";
 
 export default {
-  title: "Header Avatar",
+  title: "User Avatar",
   component: UserAvatar,
 } as ComponentMeta<typeof UserAvatar>;
 
@@ -20,6 +20,18 @@ export const Default = (): JSX.Element => (
         />
       </div>
     </div>
+    <div>
+      <h1 className="text-lg font-bold mb-4">
+        Avatar with shortened long name
+      </h1>
+      <div className="flex items-center justify-end max-w-max bg-gray-800 p-4">
+        <UserAvatar
+          name="Pablo Emilio"
+          surname="Escobar Gaviria"
+          photoURL="https://cdn.britannica.com/62/192062-131-96B933EF/mug-shot-Colombia-control-agency-Medellin.jpg"
+        />
+      </div>
+    </div>
     <div>
       <h1 className="text-lg font-bold mb-4">No Image</h1>
       <div className="flex items-center justify-end max-w-max bg-gray-800 p-4">

packages/ui/src/UserAvatar/UserAvatar.tsx

@@ -2,6 +2,8 @@ import React from "react";
 
 import Avatar from "./Avatar";
 
+import { shortName } from "../utils/helpers";
+
 export interface UserAvatarProps {
   name?: string;
   surname?: string;
@@ -13,7 +15,7 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
   surname = "",
   photoURL,
 }) => {
-  const displayName = [name, surname].join(" ").trim();
+  const displayName = shortName(name, surname).join(" ");
 
   const containerClassNames = containerClasses.join(" ");
   const userNameClassNames = userNameClasses.join(" ");

packages/ui/src/utils/__tests__/helpers.test.ts

@@ -1,5 +1,5 @@
 import { test, expect, describe } from "vitest";
-import { sortIntervals } from "../helpers";
+import { shortName, sortIntervals } from "../helpers";
 
 interface TestParams {
   input: string[];
@@ -35,4 +35,46 @@ describe("Test helpers", () => {
       },
     ]);
   });
+
+  describe("Name shortening function", () => {
+    test("should not shorten if there's only one name and one surname", () => {
+      const name = "John";
+      const surname = "Doe";
+      expect(shortName(name, surname)).toEqual(["John", "Doe"]);
+    });
+
+    test("should shorten the name and surname and return a string containing full first name and last name with all other names shortened", () => {
+      const name = "John Ronald Reuel";
+      const surname = "Tolkien";
+      expect(shortName(name, surname)).toEqual(["John R. R.", "Tolkien"]);
+
+      const name2 = "Thomas";
+      const surname2 = "Tailor Thomas";
+      expect(shortName(name2, surname2)).toEqual(["Thomas", "T. Thomas"]);
+    });
+
+    test("should leave the surname particles (common in a lot of languages) intact", () => {
+      const name = "John";
+      const surname = "de la Cruz";
+      expect(shortName(name, surname)).toEqual(["John", "de la Cruz"]);
+
+      const name2 = "Ludwig";
+      const surname2 = "van Beethoven";
+      expect(shortName(name2, surname2)).toEqual(["Ludwig", "van Beethoven"]);
+
+      const name3 = "Robert";
+      const surname3 = "De Niro";
+      expect(shortName(name3, surname3)).toEqual(["Robert", "De Niro"]);
+    });
+
+    test("should shorten the last names even if there prepended with a particle", () => {
+      const name = "Pablo Diego José Francisco";
+      const surname =
+        "de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso";
+      expect(shortName(name, surname)).toEqual([
+        "Pablo D. J. F.",
+        "de P. J. N. M. de los R. C. de la S. T. R. y Picasso",
+      ]);
+    });
+  });
 });

packages/ui/src/utils/helpers.ts

@@ -33,3 +33,87 @@ export const sortIntervals = (a: string, b: string) => {
     ? 1
     : -1;
 };
+
+export const shortName = (name: string, surname: string) => {
+  const nameWords = name.split(" ");
+  const surnameWords = surname.split(" ");
+
+  const n = nameWords
+    .map((word, i) => (i === 0 ? word : `${word[0]}.`))
+    .join(" ");
+
+  const sn = surnameWords
+    .map((word, i, o) =>
+      i === o.length - 1
+        ? word
+        : surnameParticles.includes(word.toLowerCase())
+        ? word
+        : `${word[0]}.`
+    )
+    .join(" ");
+
+  return [n, sn];
+};
+
+const surnameParticles = [
+  "de",
+  "di",
+  "von",
+  "van",
+  "del",
+  "della",
+  "des",
+  "du",
+  "el",
+  "la",
+  "le",
+  "los",
+  "las",
+  "der",
+  "den",
+  "het",
+  "ten",
+  "ter",
+  "op",
+  "of",
+  "zu",
+  "zum",
+  "zur",
+  "do",
+  "dos",
+  "da",
+  "das",
+  "dem",
+  "d",
+  "l",
+  "o",
+  "y",
+  "e",
+  "i",
+  "san",
+  "saint",
+  "st",
+  "s",
+  "al",
+  "bin",
+  "ibn",
+  "ben",
+  "bar",
+  "bat",
+  "abd",
+  "ap",
+  "ab",
+  "af",
+  "mac",
+  "mc",
+  "m",
+  "v",
+  "ve",
+  "vel",
+  "dal",
+  "dell",
+  "dello",
+  "dela",
+  "degli",
+  "delle",
+];