refactor: remove luxon package, replace with JS Intl library

package.json

@@ -37,7 +37,6 @@
     "i18next": "^23.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
-    "luxon": "^3.4.3",
     "next": "13.4.8",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",
@@ -67,7 +66,6 @@
     "@storybook/testing-library": "0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/hast": "^3.0.0",
-    "@types/luxon": "^3.3.2",
     "@types/node": "^20.4.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

src/components/CommunityEvents/index.tsx

@@ -1,4 +1,3 @@
-import { DateTime, DateTimeFormatOptions } from "luxon"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaDiscord } from "react-icons/fa"
@@ -12,6 +11,7 @@ import {
   Icon,
 } from "@chakra-ui/react"
 
+import type { Lang } from "@/lib/types"
 import type { CommunityEvent } from "@/lib/interfaces"
 
 import { ButtonLink } from "@/components/Buttons"
@@ -21,6 +21,7 @@ import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { getLocaleTimestamp } from "@/lib/utils/time"
 
 const matomoEvent = (buttonType: string) => {
   trackCustomEvent({
@@ -30,30 +31,15 @@ const matomoEvent = (buttonType: string) => {
   })
 }
 
-const renderEventDateTime = (
-  date: string,
-  language: string,
-  params: DateTimeFormatOptions = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour12: false,
-    hour: "numeric",
-    minute: "numeric",
-  }
-) => {
-  return DateTime.fromISO(date).setLocale(language).toLocaleString(params)
-}
-
-interface EventProps {
+type EventProps = {
   event: CommunityEvent
-  language: string
   type: "upcoming" | "past"
 }
 
-const Event = ({ event, language, type }: EventProps) => {
+const Event = ({ event, type }: EventProps) => {
+  const { locale } = useRouter()
   const { date, title, calendarLink } = event
-  const params: DateTimeFormatOptions = {
+  const options: Intl.DateTimeFormatOptions = {
     year: "numeric",
     month: "short",
     day: "numeric",
@@ -63,7 +49,7 @@ const Event = ({ event, language, type }: EventProps) => {
     <Grid gap={6} templateColumns="auto 1fr" mb={4}>
       <GridItem>
         <Text color="body.medium" m={0}>
-          {renderEventDateTime(date, language, params)}
+          {getLocaleTimestamp(locale! as Lang, date, options)}
         </Text>
       </GridItem>
       <GridItem>
@@ -130,9 +116,17 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
                   {reversedUpcomingEventData[0].title}
                 </Text>
                 <Text m={0} fontSize="xl">
-                  {renderEventDateTime(
+                  {getLocaleTimestamp(
+                    locale! as Lang,
                     reversedUpcomingEventData[0].date,
-                    locale!
+                    {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                      hour12: false,
+                      hour: "numeric",
+                      minute: "numeric",
+                    }
                   )}
                 </Text>
                 <Text color="body.medium" fontSize="md">
@@ -177,14 +171,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
           <Divider mb={4} />
           {reversedUpcomingEventData.slice(1).length ? (
             reversedUpcomingEventData.slice(1).map((item, idx) => {
-              return (
-                <Event
-                  key={idx}
-                  event={item}
-                  language={locale!}
-                  type="upcoming"
-                />
-              )
+              return <Event key={idx} event={item} type="upcoming" />
             })
           ) : (
             <Text mx="auto">
@@ -197,9 +184,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
           <Divider mb={4} />
           {reversedPastEventData.length ? (
             reversedPastEventData.map((item, idx) => {
-              return (
-                <Event key={idx} event={item} language={locale!} type="past" />
-              )
+              return <Event key={idx} event={item} type="past" />
             })
           ) : (
             <Text mx="auto">

src/components/Footer.tsx

@@ -298,10 +298,12 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
         alignItems="center"
         flexWrap="wrap"
       >
-        <Box color="text200">
-          <Translation id="website-last-updated" />:{" "}
-          {getLocaleTimestamp(locale as Lang, lastDeployDate!)}
-        </Box>
+        {lastDeployDate && (
+          <Box color="text200">
+            <Translation id="website-last-updated" />:{" "}
+            {getLocaleTimestamp(locale as Lang, lastDeployDate)}
+          </Box>
+        )}
         <Box my={4}>
           {socialLinks.map((link, idk) => {
             return (

src/layouts/Docs.tsx

@@ -206,18 +206,18 @@ export const docsComponents = {
   YouTube,
 }
 
-interface DocsLayoutProps
-  extends Pick<
-      MdPageContent,
-      | "slug"
-      | "tocItems"
-      | "lastUpdatedDate"
-      | "crowdinContributors"
-      | "contentNotTranslated"
-    >,
-    ChildOnlyProp {
-  frontmatter: DocsFrontmatter
-}
+type DocsLayoutProps = Pick<
+  MdPageContent,
+  | "slug"
+  | "tocItems"
+  | "lastUpdatedDate"
+  | "crowdinContributors"
+  | "contentNotTranslated"
+> &
+  Required<Pick<MdPageContent, "lastUpdatedDate">> &
+  ChildOnlyProp & {
+    frontmatter: DocsFrontmatter
+  }
 
 export const DocsLayout = ({
   children,
@@ -233,7 +233,8 @@ export const DocsLayout = ({
   const absoluteEditPath = getEditPath(relativePath)
 
   const gitHubLastEdit = useClientSideGitHubLastEdit(relativePath)
-  const intlLastEdit = "data" in gitHubLastEdit ? gitHubLastEdit.data! : ""
+  const intlLastEdit =
+    "data" in gitHubLastEdit ? gitHubLastEdit.data : lastUpdatedDate
   const useGitHubContributors =
     frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
 
@@ -252,7 +253,7 @@ export const DocsLayout = ({
           {useGitHubContributors ? (
             <GitHubContributors
               relativePath={relativePath}
-              lastUpdatedDate={lastUpdatedDate!}
+              lastUpdatedDate={lastUpdatedDate}
             />
           ) : (
             <CrowdinContributors

src/layouts/Static.tsx

@@ -118,13 +118,15 @@ export const StaticLayout = ({
           ) : (
             <>
               <Breadcrumbs slug={slug} mb="8" />
-              <Text
-                color="text200"
-                dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
-              >
-                <Translation id="page-last-updated" />:{" "}
-                {getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
-              </Text>
+              {lastUpdatedDate && (
+                <Text
+                  color="text200"
+                  dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
+                >
+                  <Translation id="page-last-updated" />:{" "}
+                  {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
+                </Text>
+              )}
             </>
           )}
 

src/layouts/Tutorial.tsx

@@ -165,18 +165,15 @@ export const tutorialsComponents = {
   StyledDivider,
   YouTube,
 }
-interface TutorialLayoutProps
-  extends ChildOnlyProp,
-    Pick<
-      MdPageContent,
-      | "tocItems"
-      | "lastUpdatedDate"
-      | "crowdinContributors"
-      | "contentNotTranslated"
-    > {
-  frontmatter: TutorialFrontmatter
-  timeToRead: number
-}
+type TutorialLayoutProps = ChildOnlyProp &
+  Pick<
+    MdPageContent,
+    "tocItems" | "crowdinContributors" | "contentNotTranslated"
+  > &
+  Required<Pick<MdPageContent, "lastUpdatedDate">> & {
+    frontmatter: TutorialFrontmatter
+    timeToRead: number
+  }
 
 export const TutorialLayout = ({
   children,
@@ -194,7 +191,8 @@ export const TutorialLayout = ({
   const postMergeBannerTranslationString =
     frontmatter.postMergeBannerTranslation as TranslationKey | null
   const gitHubLastEdit = useClientSideGitHubLastEdit(relativePath)
-  const intlLastEdit = "data" in gitHubLastEdit ? gitHubLastEdit.data! : ""
+  const intlLastEdit =
+    "data" in gitHubLastEdit ? gitHubLastEdit.data! : lastUpdatedDate
   const useGitHubContributors =
     frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
 
@@ -226,7 +224,7 @@ export const TutorialLayout = ({
           {useGitHubContributors ? (
             <GitHubContributors
               relativePath={relativePath}
-              lastUpdatedDate={lastUpdatedDate!}
+              lastUpdatedDate={lastUpdatedDate}
             />
           ) : (
             <CrowdinContributors

src/layouts/Upgrade.tsx

@@ -9,6 +9,7 @@ import {
   Icon,
   List,
   ListItem,
+  Skeleton,
   Text,
   useToken,
 } from "@chakra-ui/react"
@@ -193,10 +194,12 @@ export const UpgradeLayout = ({
               ))}
             </List>
           </Box>
-          <LastUpdated>
-            {t("common:page-last-updated")}:{" "}
-            {getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
-          </LastUpdated>
+          {lastUpdatedDate && (
+            <LastUpdated>
+              {t("common:page-last-updated")}:{" "}
+              {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
+            </LastUpdated>
+          )}
         </TitleCard>
         {frontmatter.image && (
           <Image

src/lib/utils/time.ts

@@ -1,20 +1,17 @@
-// TODO: we are using `luxon` package just for this util, should consider rewrite using native JS Date API
-import { DateTime } from "luxon"
-
 import { Lang } from "../types"
 
-export const INVALID_DATETIME = "Invalid DateTime"
-
-export const getLocaleTimestamp = (locale: Lang, timestamp: string) => {
-  let localeTimestamp = DateTime.fromSQL(timestamp)
-    .setLocale(locale)
-    .toLocaleString(DateTime.DATE_FULL)
-
-  // Fallback to ISO
-  if (localeTimestamp === INVALID_DATETIME) {
-    localeTimestamp = DateTime.fromISO(timestamp)
-      .setLocale(locale)
-      .toLocaleString(DateTime.DATE_FULL)
-  }
-  return localeTimestamp
+export const getLocaleTimestamp = (
+  locale: Lang,
+  timestamp: string,
+  options?: Intl.DateTimeFormatOptions
+) => {
+  const opts =
+    options ||
+    ({
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    } as Intl.DateTimeFormatOptions)
+  const date = new Date(timestamp)
+  return new Intl.DateTimeFormat(locale, opts).format(date)
 }

src/pages/developers/tutorials.tsx

@@ -33,7 +33,7 @@ import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getTutorialsData } from "@/lib/utils/md"
-import { getLocaleTimestamp, INVALID_DATETIME } from "@/lib/utils/time"
+import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 import {
   filterTutorialsByLang,
@@ -126,9 +126,10 @@ export interface ITutorial {
 
 const published = (locale: string, published: string) => {
   const localeTimestamp = getLocaleTimestamp(locale as Lang, published)
-  return localeTimestamp !== INVALID_DATETIME ? (
+  return localeTimestamp !== "Invalid Date" ? (
     <span>
-      <Emoji text=":calendar:" fontSize="sm" ms={2} me={2} /> {localeTimestamp}
+      <Emoji text=":calendar:" fontSize="sm" ms={2} me={2} />
+      {localeTimestamp}
     </span>
   ) : null
 }
@@ -473,8 +474,10 @@ const TutorialPage = ({
               </Flex>
               <Text color="text200" fontSize="sm" textTransform="uppercase">
                 <Emoji text=":writing_hand:" fontSize="sm" me={2} />
-                {tutorial.author} •
-                {published(locale!, tutorial.published ?? "")}
+                {tutorial.author}
+                {tutorial.published ? (
+                  <> •{published(locale!, tutorial.published!)}</>
+                ) : null}
                 {tutorial.timeToRead && (
                   <>
                     {" "}

yarn.lock

@@ -4610,11 +4610,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
   integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
 
-"@types/luxon@^3.3.2":
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
-  integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
-
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -9466,11 +9461,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-luxon@^3.4.3:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
-  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
-
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"