Replaced moment.js with Temporal polyfill (#2549)

dmcalpin · web-flow · commit 422505e11943 · 2025-04-17T09:05:50.000-04:00
## Summary: This update changes birthday-picker.tsx to use Temporal for working with dates and removes the moment.js library. Issue: None ## Test plan: - updated unit tests - manual testing via storybook Author: dmcalpin Reviewers: beaesguerra, marcysutton, dmcalpin, jandrade Required Reviewers: Approved By: jandrade, beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2549
diff --git a/.changeset/tricky-lizards-lie.md b/.changeset/tricky-lizards-lie.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": major
+---
+
+Removed moment.js and replaced it with Temporal polyfill
diff --git a/.github/workflows/chromatic-build.yml b/.github/workflows/chromatic-build.yml
@@ -46,6 +46,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     env:
       CI: true
+      LANG: "en-US"
     strategy:
       fail-fast: false
       matrix:
diff --git a/package.json b/package.json
@@ -134,7 +134,6 @@
     "@phosphor-icons/core": "catalog:",
     "@popperjs/core": "catalog:",
     "aphrodite": "catalog:",
-    "moment": "catalog:",
     "node-fetch": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -149,4 +148,4 @@
     "@types/react-dom": "18"
   },
   "packageManager": "pnpm@10.1.0+sha512.c89847b0667ddab50396bbbd008a2a43cf3b581efd59cf5d9aa8923ea1fb4b8106c041d540d08acb095037594d73ebc51e1ec89ee40c88b30b8a66c0fae0ac1b"
-}
+}
diff --git a/packages/wonder-blocks-birthday-picker/package.json b/packages/wonder-blocks-birthday-picker/package.json
@@ -25,7 +25,7 @@
   "peerDependencies": {
     "@phosphor-icons/core": "catalog:",
     "aphrodite": "catalog:",
-    "moment": "catalog:",
+    "temporal-polyfill": "catalog:",
     "react": "catalog:"
   },
   "devDependencies": {
diff --git a/packages/wonder-blocks-birthday-picker/src/components/__tests__/birthday-picker.test.tsx b/packages/wonder-blocks-birthday-picker/src/components/__tests__/birthday-picker.test.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
-import moment from "moment";
 import {render, act, screen, waitFor} from "@testing-library/react";
 import * as DateMock from "jest-date-mock";
 import {userEvent, PointerEventsCheckLevel} from "@testing-library/user-event";
+import {Temporal} from "temporal-polyfill";
 
 import BirthdayPicker, {defaultLabels} from "../birthday-picker";
 
@@ -63,8 +63,7 @@ describe("BirthdayPicker", () => {
 
         it("renders with a valid default value", async () => {
             // Arrange
-            const date = moment(today);
-            const defaultValue = date.format("YYYY-MM-DD");
+            const defaultValue = Temporal.Now.plainDateISO().toString();
 
             // Act
             render(
@@ -92,8 +91,9 @@ describe("BirthdayPicker", () => {
         it("renders with a invalid default future value", async () => {
             // Arrange
             DateMock.advanceTo(today);
-            const date = moment(today).add(1, "day");
-            const defaultValue = date.format("YYYY-MM-DD");
+            const defaultValue = Temporal.Now.plainDateISO()
+                .add({days: 1})
+                .toString();
 
             // Act
             render(
@@ -119,8 +119,11 @@ describe("BirthdayPicker", () => {
 
         it("renders an error with a invalid default future value", async () => {
             // Arrange
-            const date = moment(today).add(1, "day");
-            const defaultValue = date.format("YYYY-MM-DD");
+            const defaultValue = Temporal.PlainDate.from({
+                year: today.getFullYear(),
+                month: today.getMonth() + 1, // Temporal is 1-based
+                day: today.getDate() + 1, // +1 for future date
+            }).toString();
 
             // Act
             render(
@@ -424,7 +427,7 @@ describe("BirthdayPicker", () => {
             // This test was written by calling methods on the instance because
             // react-window (used by SingleSelect) doesn't show all of the items
             // in the dropdown.
-            await act(() => instance.handleMonthChange("1"));
+            await act(() => instance.handleMonthChange("2"));
             await act(() => instance.handleDayChange("31"));
             await act(() => instance.handleYearChange("2021"));
 
diff --git a/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx b/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx
@@ -1,4 +1,4 @@
-import moment from "moment"; // NOTE: DO NOT use named imports; 'moment' does not support named imports
+import {Temporal} from "temporal-polyfill";
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {StyleType, View} from "@khanacademy/wonder-blocks-core";
@@ -186,31 +186,50 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         // merge custom labels with the default ones
         this.labels = {...defaultLabels, ...this.props.labels};
 
-        // If a default value was provided then we use moment to convert it
+        // If a default value was provided then we use Temporal to convert it
         // into a date that we can use to populate the
         if (defaultValue) {
-            let date = moment(defaultValue);
-
-            if (date.isValid()) {
-                if (monthYearOnly) {
-                    date = date.endOf("month");
-                }
+            let date: Temporal.PlainDate | null = null;
+            try {
+                date = Temporal.PlainDate.from(defaultValue);
+            } catch (err) {
+                initialState.error = this.labels.errorMessage;
+                return initialState;
+            }
 
-                initialState.month = String(date.month());
-                initialState.day = String(date.date());
-                initialState.year = String(date.year());
+            if (monthYearOnly) {
+                date = date.with({day: date.daysInMonth});
             }
 
-            // If the date is in the future or is invalid then we want to show
-            // an error to the user.
-            if (date.isAfter() || !date.isValid()) {
+            initialState.month = String(date.month);
+            initialState.day = String(date.day);
+            initialState.year = String(date.year);
+
+            // If the date is in the future then we want to show an error to
+            // the user.
+            if (this.isFutureDate(date)) {
                 initialState.error = this.labels.errorMessage;
             }
         }
 
         return initialState;
     }
 
+    /**
+     * Determines whether a given date is in the future.
+     *
+     * @param date - The Temporal.PlainDate to check.
+     * @returns True if the provided date comes after today's date, false otherwise.
+     */
+    isFutureDate(date: Temporal.PlainDate): boolean {
+        // The Temporal.PlainDate.compare() static method returns a number
+        // (-1, 0, or 1) indicating whether the first date comes before, is the
+        // same as, or comes after the second date.
+        return (
+            Temporal.PlainDate.compare(date, Temporal.Now.plainDateISO()) === 1
+        );
+    }
+
     lastChangeValue: string | null | undefined = null;
 
     /**
@@ -248,25 +267,45 @@ export default class BirthdayPicker extends React.Component<Props, State> {
             return;
         }
 
-        // If the month/year only mode is enabled, we set the day to the
-        // last day of the selected month.
-        // NOTE: at this point dateFields is guaranteed to have non-null values
-        // because of the .some() check above.
-        let date = moment(dateFields as Array<string>);
-        if (monthYearOnly) {
-            date = date.endOf("month");
+        let date: Temporal.PlainDate;
+        try {
+            // If the month/year only mode is enabled, we set the day to the
+            // last day of the selected month.
+            // NOTE: at this point dateFields is guaranteed to have non-null values
+            // because of the .some() check above.
+            if (monthYearOnly) {
+                date = Temporal.PlainDate.from({
+                    year: Number(year),
+                    month: Number(month),
+                    // Temporal will constrain the date to the last day of the month
+                    day: 31,
+                });
+            } else {
+                date = Temporal.PlainDate.from(
+                    {
+                        year: Number(year),
+                        month: Number(month),
+                        day: Number(day),
+                    },
+                    {overflow: "reject"},
+                );
+            }
+        } catch (err) {
+            this.setState({error: this.labels.errorMessage});
+            this.reportChange(null);
+            return;
         }
 
         // If the date is in the future or is invalid then we want to show
         // an error to the user and return a null value.
-        if (date.isAfter() || !date.isValid()) {
+        if (this.isFutureDate(date)) {
             this.setState({error: this.labels.errorMessage});
             this.reportChange(null);
         } else {
             this.setState({error: null});
-            // If the date picker is in a non-English language, we still
-            // want to generate an English date.
-            this.reportChange(date.locale("en").format("YYYY-MM-DD"));
+            // Regardless of locale, we want to format the date as YYYY-MM-DD
+            // toString() returns an ISO 8601 date string, which is YYYY-MM-DD.
+            this.reportChange(date.toString());
         }
     };
 
@@ -315,6 +354,18 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         );
     }
 
+    monthsShort(): string[] {
+        const format = new Intl.DateTimeFormat(navigator.language, {
+            month: "short",
+        }).format;
+        return [...Array(12).keys()].map((m) =>
+            // TODO: use Temporal.PlainDate.from() once the linter lets
+            // format() accept a Temporal object
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format#parameters
+            format(new Date(2021, m, 15)),
+        );
+    }
+
     renderMonth(): React.ReactNode {
         const {disabled, monthYearOnly, dropdownStyle} = this.props;
         const {month} = this.state;
@@ -331,9 +382,13 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                 style={[{minWidth}, defaultStyles.input, dropdownStyle]}
                 testId="birthday-picker-month"
             >
-                {/* eslint-disable-next-line import/no-named-as-default-member */}
-                {moment.monthsShort().map((month, i) => (
-                    <OptionItem key={month} label={month} value={String(i)} />
+                {this.monthsShort().map((monthShort, i) => (
+                    <OptionItem
+                        key={monthShort}
+                        label={monthShort}
+                        // +1 because Temporal months are 1-indexed
+                        value={String(i + 1)}
+                    />
                 ))}
             </SingleSelect>
         );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -18,7 +18,7 @@ catalog:
     # Styling
     aphrodite: ^1.2.5
     # Dates
-    moment: 2.29.4
+    temporal-polyfill: "^0.3.0"
     # Testing/data
     node-fetch: ^2.6.7
     # React

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@khanacademy/wonder-blocks-birthday-picker": major
 +---
++
 +Removed moment.js and replaced it with Temporal polyfill