alepha 0.15.1 → 0.15.3

package/src/react/i18n/components/Localize.spec.tsx

@@ -0,0 +1,357 @@
+import { Alepha } from "alepha";
+import { DateTimeProvider } from "alepha/datetime";
+import { AlephaContext } from "alepha/react";
+import type { ReactNode } from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { I18nProvider, Localize } from "../index.ts";
+
+describe("<Localize/>", () => {
+  const setup = () => {
+    const alepha = Alepha.create();
+    return {
+      i18n: alepha.inject(I18nProvider),
+      dateTime: alepha.inject(DateTimeProvider),
+      alepha,
+      render: (children: ReactNode) =>
+        renderToString(
+          <AlephaContext value={alepha}>{children}</AlephaContext>,
+        ),
+    };
+  };
+
+  it("should format date", () => {
+    const { render, i18n } = setup();
+    const date = new Date("2024-09-23T23:45:00Z");
+    expect(render(<Localize value={date} />)).toBe("9/24/2024");
+    i18n.setLang("fr");
+    expect(render(<Localize value={date} />)).toBe("24/09/2024");
+  });
+
+  it("should format number", () => {
+    const { render, i18n } = setup();
+    const number = 1234567.89;
+    expect(render(<Localize value={number} />)).toBe("1,234,567.89");
+    i18n.setLang("de");
+    expect(render(<Localize value={number} />)).toBe("1.234.567,89");
+    i18n.setLang("fr");
+    expect(render(<Localize value={number} />)).toBe("1\u202f234\u202f567,89");
+  });
+
+  // it("should format typebox error", async () => {
+  //   const { render, i18n, alepha } = setup();
+  //   const boom = async () => alepha.codec.decode(t.number(), "..");
+  //   const error = await boom().catch((err) => err);
+  //   expect(render(<Localize value={error} />)).toBe("must be number");
+  //   await i18n.setLang("fr");
+  //   expect(render(<Localize value={error} />)).toBe("doit être number");
+  // });
+
+  describe("number formatting options", () => {
+    it("should format currency", () => {
+      const { render } = setup();
+      const number = 1234.56;
+      expect(
+        render(
+          <Localize
+            value={number}
+            number={{ style: "currency", currency: "USD" }}
+          />,
+        ),
+      ).toBe("$1,234.56");
+    });
+
+    it("should format currency with locale", () => {
+      const { render, i18n } = setup();
+      const number = 1234.56;
+      i18n.setLang("fr");
+      expect(
+        render(
+          <Localize
+            value={number}
+            number={{ style: "currency", currency: "EUR" }}
+          />,
+        ),
+      ).toBe("1\u202f234,56\u00a0€");
+    });
+
+    it("should format percentage", () => {
+      const { render } = setup();
+      const number = 0.1234;
+      expect(
+        render(<Localize value={number} number={{ style: "percent" }} />),
+      ).toBe("12%");
+    });
+
+    it("should format with minimum fraction digits", () => {
+      const { render } = setup();
+      const number = 10;
+      expect(
+        render(
+          <Localize value={number} number={{ minimumFractionDigits: 2 }} />,
+        ),
+      ).toBe("10.00");
+    });
+
+    it("should format with maximum fraction digits", () => {
+      const { render } = setup();
+      const number = 10.123456;
+      expect(
+        render(
+          <Localize value={number} number={{ maximumFractionDigits: 2 }} />,
+        ),
+      ).toBe("10.12");
+    });
+
+    it("should format with notation", () => {
+      const { render } = setup();
+      const number = 1000000;
+      expect(
+        render(<Localize value={number} number={{ notation: "compact" }} />),
+      ).toBe("1M");
+    });
+  });
+
+  describe("date formatting options", () => {
+    it("should format with dayjs format string - LLL", () => {
+      const { render, i18n, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T00:45:00Z").toDate();
+      const formatted = render(<Localize value={date} date="LLL" />);
+      // Format depends on local timezone, so just check it contains the key parts
+      expect(formatted).toContain("September");
+      expect(formatted).toContain("2024");
+      i18n.setLang("fr");
+      const frFormatted = render(<Localize value={date} date="LLL" />);
+      expect(frFormatted).toContain("septembre");
+      expect(frFormatted).toContain("2024");
+    });
+
+    it("should format with dayjs format string - YYYY-MM-DD", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should format with dayjs format string - dddd, MMMM D YYYY", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="dddd, MMMM D YYYY" />)).toBe(
+        "Tuesday, September 24 2024",
+      );
+    });
+
+    it("should format with fromNow for Date", () => {
+      const { render, dateTime } = setup();
+      dateTime.pause();
+      const date = dateTime.now().subtract(2, "hour").toDate();
+      const result = render(<Localize value={date} date="fromNow" />);
+      expect(result).toBe("2 hours ago");
+    });
+
+    it("should format with fromNow for DateTime", () => {
+      const { render, dateTime } = setup();
+      dateTime.pause();
+      const date = dateTime.now().subtract(3, "day");
+      const result = render(<Localize value={date} date="fromNow" />);
+      expect(result).toBe("3 days ago");
+    });
+
+    it("should format DateTime with dayjs format string", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.of("2024-09-23T23:45:00Z");
+      expect(render(<Localize value={date} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should format with Intl.DateTimeFormatOptions", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      expect(
+        render(
+          <Localize
+            value={date}
+            date={{
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }}
+          />,
+        ),
+      ).toBe("Tuesday, September 24, 2024");
+    });
+
+    it("should format with Intl.DateTimeFormatOptions and locale", () => {
+      const { render, i18n } = setup();
+      const date = new Date("2024-09-23T23:45:00Z");
+      i18n.setLang("fr");
+      expect(
+        render(
+          <Localize
+            value={date}
+            date={{
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }}
+          />,
+        ),
+      ).toBe("mardi 24 septembre 2024");
+    });
+
+    it("should format DateTime with Intl.DateTimeFormatOptions", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T00:45:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          date={{
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: true,
+          }}
+        />,
+      );
+      // Format depends on local timezone, so just verify it contains time parts
+      expect(formatted).toMatch(/\d{1,2}:\d{2}\s(AM|PM)/);
+    });
+  });
+
+  describe("string date parsing", () => {
+    it("should parse string date when dateOptions is provided", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} date="YYYY-MM-DD" />)).toBe(
+        "2024-09-24",
+      );
+    });
+
+    it("should parse string date with format options", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} date="LLL" />)).toContain(
+        "September",
+      );
+    });
+
+    it("should parse string date with timezone", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(
+        render(
+          <Localize
+            value={dateString}
+            timezone="America/New_York"
+            date="YYYY-MM-DD HH:mm"
+          />,
+        ),
+      ).toBe("2024-09-24 08:00");
+    });
+
+    it("should return string as-is when no dateOptions provided", () => {
+      const { render } = setup();
+      const dateString = "2024-09-24T12:00:00Z";
+      expect(render(<Localize value={dateString} />)).toBe(dateString);
+    });
+  });
+
+  describe("timezone formatting", () => {
+    it("should format Date with timezone using Intl", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      expect(
+        render(<Localize value={date} timezone="America/New_York" />),
+      ).toBe("9/24/2024");
+    });
+
+    it("should format Date with timezone and dateOptions", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      expect(
+        render(
+          <Localize
+            value={date}
+            timezone="America/New_York"
+            date={{
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: true,
+              timeZoneName: "short",
+            }}
+          />,
+        ),
+      ).toContain("EDT");
+    });
+
+    it("should format Date with timezone using dayjs format", () => {
+      const { render } = setup();
+      const date = new Date("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="America/New_York"
+          date="YYYY-MM-DD HH:mm"
+        />,
+      );
+      expect(formatted).toBe("2024-09-24 08:00");
+    });
+
+    it("should format DateTime with timezone using dayjs format", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="Europe/Paris"
+          date="YYYY-MM-DD HH:mm"
+        />,
+      );
+      expect(formatted).toBe("2024-09-24 14:00");
+    });
+
+    it("should format DateTime with timezone and Intl options", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize
+          value={date}
+          timezone="Asia/Tokyo"
+          date={{
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          }}
+        />,
+      );
+      expect(formatted).toBe("21:00");
+    });
+
+    it("should format DateTime with timezone using LLL format", () => {
+      const { render, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      const formatted = render(
+        <Localize value={date} timezone="America/Los_Angeles" date="LLL" />,
+      );
+      expect(formatted).toContain("September");
+      expect(formatted).toContain("2024");
+      expect(formatted).toContain("5:00 AM");
+    });
+
+    it("should respect locale and timezone together", () => {
+      const { render, i18n, dateTime } = setup();
+      const date = dateTime.utc("2024-09-24T12:00:00Z");
+      i18n.setLang("fr");
+      const formatted = render(
+        <Localize value={date} timezone="Europe/Paris" date="LLL" />,
+      );
+      console.log(formatted);
+      expect(formatted).toContain("septembre");
+      expect(formatted).toContain("2024");
+      expect(formatted).toContain("14:00");
+    });
+  });
+});

package/src/react/i18n/components/Localize.tsx

@@ -0,0 +1,35 @@
+import type { TypeBoxError } from "alepha";
+import type { DateTime } from "alepha/datetime";
+import { useI18n } from "../hooks/useI18n.ts";
+
+export interface LocalizeProps {
+  value: string | number | Date | DateTime | TypeBoxError;
+  /**
+   * Options for number formatting (when value is a number)
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+   */
+  number?: Intl.NumberFormatOptions;
+  /**
+   * Options for date formatting (when value is a Date or DateTime)
+   * Can be:
+   * - A dayjs format string (e.g., "LLL", "YYYY-MM-DD", "dddd, MMMM D YYYY")
+   * - "fromNow" for relative time (e.g., "2 hours ago")
+   * - Intl.DateTimeFormatOptions for native formatting
+   * @see https://day.js.org/docs/en/display/format
+   * @see https://day.js.org/docs/en/display/from-now
+   */
+  date?: string | "fromNow" | Intl.DateTimeFormatOptions;
+  /**
+   * Timezone to display dates in (when value is a Date or DateTime)
+   * Uses IANA timezone names (e.g., "America/New_York", "Europe/Paris", "Asia/Tokyo")
+   * @see https://day.js.org/docs/en/timezone/timezone
+   */
+  timezone?: string;
+}
+
+const Localize = (props: LocalizeProps) => {
+  const i18n = useI18n();
+  return i18n.l(props.value, props);
+};
+
+export default Localize;