Merged in chore/SW-3145-move-date-to-design-system (pull request #2556)

feat: SW-3145 Moved date component to design system * chore: SW-3145 Moved date component to design system Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
2025-07-28 09:05:25 +00:00
parent 36e8ac11d1
commit 5ff4234552
15 changed files with 120 additions and 64 deletions
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"

 import { Divider } from "@scandic-hotels/design-system/Divider"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { Select } from "@scandic-hotels/design-system/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import {
  getLocalizedLanguageOptions,
 } from "@/constants/languages"

-import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import useLang from "@/hooks/useLang"
@@ -41,7 +41,20 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
            </p>
          </Typography>
        </header>
-        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
+        <DateSelect
+          labels={{
+            day: intl.formatMessage({ defaultMessage: "Day" }),
+            month: intl.formatMessage({ defaultMessage: "Month" }),
+            year: intl.formatMessage({ defaultMessage: "Year" }),
+            errorMessage: getErrorMessage(
+              intl,
+              errors["dateOfBirth"]?.message?.toString()
+            ),
+          }}
+          lang={lang}
+          name="dateOfBirth"
+          registerOptions={{ required: true }}
+        />
        <Input
          data-hj-suppress
          label={`${intl.formatMessage({
--- a/apps/scandic-web/components/Forms/Signup/index.tsx
+++ b/apps/scandic-web/components/Forms/Signup/index.tsx
@@ -10,6 +10,7 @@ import { logger } from "@scandic-hotels/common/logger"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -25,7 +26,6 @@ import {
  privacyPolicy,
 } from "@/constants/webHrefs"

-import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
 import Link from "@/components/TempDesignSystem/Link"
@@ -162,6 +162,16 @@ export default function SignupForm({ title }: SignUpFormProps) {
                </p>
              </Typography>
              <DateSelect
+                labels={{
+                  day: intl.formatMessage({ defaultMessage: "Day" }),
+                  month: intl.formatMessage({ defaultMessage: "Month" }),
+                  year: intl.formatMessage({ defaultMessage: "Year" }),
+                  errorMessage: getErrorMessage(
+                    intl,
+                    errors.dateOfBirth?.message?.toString()
+                  ),
+                }}
+                lang={lang}
                name="dateOfBirth"
                registerOptions={{ required: true }}
              />
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
@@ -1,24 +1,33 @@
 "use client"

 import { useEffect, useState } from "react"
-import { type RegisterOptions, useWatch } from "react-hook-form"
+import {
+  type FieldErrors,
+  type RegisterOptions,
+  useWatch,
+} from "react-hook-form"
 import { useIntl } from "react-intl"

 import Caption from "@scandic-hotels/design-system/Caption"
+import DateSelect from "@scandic-hotels/design-system/Form/Date"

-import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
+import useLang from "@/hooks/useLang"
+import { getErrorMessage } from "@/utils/getErrorMessage"

 import styles from "./signup.module.css"

 export default function Signup({
+  errors,
  name,
  registerOptions,
 }: {
+  errors: FieldErrors
  name: string
  registerOptions?: RegisterOptions
 }) {
  const intl = useIntl()
+  const lang = useLang()

  const [isJoinChecked, setIsJoinChecked] = useState(false)

@@ -50,6 +59,16 @@ export default function Signup({
          </Caption>
        </header>
        <DateSelect
+          labels={{
+            day: intl.formatMessage({ defaultMessage: "Day" }),
+            month: intl.formatMessage({ defaultMessage: "Month" }),
+            year: intl.formatMessage({ defaultMessage: "Year" }),
+            errorMessage: getErrorMessage(
+              intl,
+              errors["dateOfBirth"]?.message?.toString()
+            ),
+          }}
+          lang={lang}
          name="dateOfBirth"
          registerOptions={{ required: true, ...registerOptions }}
        />
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
@@ -214,6 +214,7 @@ export default function Details({ user }: DetailsProps) {
          {user ? null : (
            <div className={styles.fullWidth}>
              <Signup
+                errors={formState.errors}
                name="join"
                registerOptions={{ onBlur: updateDetailsStore }}
              />
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx
@@ -1,4 +1,5 @@
 import { dt } from "@scandic-hotels/common/dt"
+import { getNumberOfNights } from "@scandic-hotels/common/utils/dateFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"

@@ -6,7 +7,6 @@ import { longDateWithYearFormat } from "@/constants/dateFormats"

 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
-import { getNumberOfNights } from "@/utils/dateFormatting"

 import styles from "./footer.module.css"

--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts
@@ -1,13 +0,0 @@
-import type { RegisterOptions } from "react-hook-form"
-
-export const enum DateName {
-  date = "date",
-  day = "day",
-  month = "month",
-  year = "year",
-}
-export interface DateProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  name: string
-  registerOptions?: RegisterOptions
-}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx
@@ -7,11 +7,10 @@ import { afterEach, describe, expect, test } from "vitest"

 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
+import { getLocalizedMonthName } from "@scandic-hotels/common/utils/dateFormatting"
+import Date from "@scandic-hotels/design-system/Form/Date"

 import { cleanup, render, screen } from "@/tests/utils"
-import { getLocalizedMonthName } from "@/utils/dateFormatting"
-
-import Date from "./index"

 const testUtilUser = new User({ interactionType: "touch" })

@@ -116,7 +115,16 @@ describe("Date input", () => {
            expect(data).toEqual(expectedOutput)
          }}
        >
-          <Date name="dateOfBirth" />
+          <Date
+            labels={{
+              day: "day",
+              month: "Month",
+              year: "Year",
+              errorMessage: "Date is required",
+            }}
+            lang={Lang.en}
+            name="dateOfBirth"
+          />
        </FormWrapper>
      )

--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -25,6 +25,8 @@
    "./utils/chunk": "./utils/chunk.ts",
    "./utils/isDefined": "./utils/isDefined.ts",
    "./utils/maskValue": "./utils/maskValue.ts",
+    "./utils/dateFormatting": "./utils/dateFormatting.ts",
+    "./utils/rangeArray": "./utils/rangeArray.ts",
    "./utils/zod/*": "./utils/zod/*.ts",
    "./constants/language": "./constants/language.ts",
    "./constants/membershipLevels": "./constants/membershipLevels.ts",
--- a/apps/scandic-web/utils/dateFormatting.ts
+++ b/apps/scandic-web/utils/dateFormatting.ts
@@ -1,6 +1,6 @@
-import { dt } from "@scandic-hotels/common/dt"
+import { dt } from "../dt/dt"

-import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { Lang } from "../constants/language"

 /**
 * Get the localized month name for a given month index and language
--- a/apps/scandic-web/utils/rangeArray.ts
+++ b/apps/scandic-web/utils/rangeArray.ts
@@ -1,6 +1,6 @@
 export function rangeArray(start: number, stop: number, step: number = 1) {
  return Array.from(
    { length: (stop - start) / step + 1 },
-    (value, index) => start + index * step
+    (_, index) => start + index * step
  )
 }
--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Date/date.module.css
--- a/packages/design-system/lib/components/Form/Date/date.ts
+++ b/packages/design-system/lib/components/Form/Date/date.ts
@@ -0,0 +1,21 @@
+import { Lang } from '@scandic-hotels/common/constants/language'
+import type { RegisterOptions } from 'react-hook-form'
+
+export const enum DateName {
+  date = 'date',
+  day = 'day',
+  month = 'month',
+  year = 'year',
+}
+export interface DateProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  labels: {
+    day: string
+    month: string
+    year: string
+    errorMessage?: string
+  }
+  lang: Lang
+  name: string
+  registerOptions?: RegisterOptions
+}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
@@ -1,28 +1,27 @@
-"use client"
-import { parseDate } from "@internationalized/date"
-import { useEffect } from "react"
-import { useController, useFormContext, useWatch } from "react-hook-form"
-import { useIntl } from "react-intl"
-import { useMediaQuery } from "usehooks-ts"
+'use client'
+import { parseDate } from '@internationalized/date'
+import { useEffect } from 'react'
+import { useController, useFormContext, useWatch } from 'react-hook-form'
+import { useMediaQuery } from 'usehooks-ts'

-import { dt } from "@scandic-hotels/common/dt"
-import { logger } from "@scandic-hotels/common/logger"
-import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
-import { Select } from "@scandic-hotels/design-system/Select"
+import { dt } from '@scandic-hotels/common/dt'
+import { logger } from '@scandic-hotels/common/logger'
+import { getLocalizedMonthName } from '@scandic-hotels/common/utils/dateFormatting'
+import { rangeArray } from '@scandic-hotels/common/utils/rangeArray'
+import { ErrorMessage } from '../../Form/ErrorMessage'
+import { Select } from '../../Select'

-import useLang from "@/hooks/useLang"
-import { getLocalizedMonthName } from "@/utils/dateFormatting"
-import { getErrorMessage } from "@/utils/getErrorMessage"
-import { rangeArray } from "@/utils/rangeArray"
+import { DateName, type DateProps } from './date'

-import { DateName, type DateProps } from "./date"
+import styles from './date.module.css'

-import styles from "./date.module.css"
-
-export default function DateSelect({ name, registerOptions = {} }: DateProps) {
-  const intl = useIntl()
-  const lang = useLang()
-  const isDesktop = useMediaQuery("(min-width: 768px)", {
+export default function DateSelect({
+  labels,
+  lang,
+  name,
+  registerOptions = {},
+}: DateProps) {
+  const isDesktop = useMediaQuery('(min-width: 768px)', {
    initializeWithValue: false,
  })

@@ -38,7 +37,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
  const month = watch(DateName.month)
  const day = watch(DateName.day)

-  const minAgeDate = dt().subtract(18, "year").toDate() // age 18
+  const minAgeDate = dt().subtract(18, 'year').toDate() // age 18
  const minAgeYear = minAgeDate.getFullYear()
  const minAgeMonth = year === minAgeYear ? minAgeDate.getMonth() + 1 : null
  const minAgeDay =
@@ -87,7 +86,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      .date(Number(day))

    if (newDate.isValid()) {
-      setValue(name, newDate.format("YYYY-MM-DD"), {
+      setValue(name, newDate.format('YYYY-MM-DD'), {
        shouldDirty: true,
        shouldTouch: true,
        shouldValidate: true,
@@ -106,7 +105,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      ? parseDate(currentDateValue)
      : null
  } catch (error) {
-    logger.warn("Known error for parse date in DateSelect: ", error)
+    logger.warn('Known error for parse date in DateSelect: ', error)
  }

  useEffect(() => {
@@ -125,9 +124,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
        <div className={styles.segment}>
          <Select
            items={days}
-            label={intl.formatMessage({
-              defaultMessage: "Day",
-            })}
+            label={labels.day}
            name={DateName.day}
            onSelectionChange={(key) => setValue(DateName.day, Number(key))}
            isRequired
@@ -142,9 +139,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
        <div className={styles.segment}>
          <Select
            items={months}
-            label={intl.formatMessage({
-              defaultMessage: "Month",
-            })}
+            label={labels.month}
            name={DateName.month}
            onSelectionChange={(key) => setValue(DateName.month, Number(key))}
            isRequired
@@ -158,9 +153,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
        <div className={styles.segment}>
          <Select
            items={years}
-            label={intl.formatMessage({
-              defaultMessage: "Year",
-            })}
+            label={labels.year}
            name={DateName.year}
            onSelectionChange={(key) => setValue(DateName.year, Number(key))}
            isRequired
@@ -176,10 +169,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      <ErrorMessage
        errors={formState.errors}
        name={field.name}
-        messageLabel={getErrorMessage(
-          intl,
-          formState.errors[field.name]?.message?.toString()
-        )}
+        messageLabel={labels.errorMessage}
      />
    </>
  )
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -16,6 +16,7 @@
    "./Footnote": "./dist/components/Footnote/index.js",
    "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
    "./Form/Country": "./dist/components/Form/Country/index.js",
+    "./Form/Date": "./dist/components/Form/Date/index.js",
    "./Form/ErrorMessage": "./dist/components/Form/ErrorMessage/index.js",
    "./Form/Phone": "./dist/components/Form/Phone/index.js",
    "./Form/RadioCard": "./dist/components/Form/RadioCard/index.js",
@@ -149,12 +150,14 @@
    "check-types": "tsc --noEmit"
  },
  "peerDependencies": {
+    "@internationalized/date": "^3.8.0",
    "@radix-ui/react-slot": "^1.2.2",
    "react": "^19.1.0",
    "react-aria-components": "^1.8.0",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.56.2",
-    "react-international-phone": "^4.5.0"
+    "react-international-phone": "^4.5.0",
+    "usehooks-ts": "3.1.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.3.1",
--- a/yarn.lock
+++ b/yarn.lock
@@ -6729,12 +6729,14 @@ __metadata:
    vite-plugin-lib-inject-css: "npm:^2.2.2"
    vitest: "npm:^3.2.4"
  peerDependencies:
+    "@internationalized/date": ^3.8.0
    "@radix-ui/react-slot": ^1.2.2
    react: ^19.1.0
    react-aria-components: ^1.8.0
    react-dom: ^19.1.0
    react-hook-form: ^7.56.2
    react-international-phone: ^4.5.0
+    usehooks-ts: 3.1.1
  languageName: unknown
  linkType: soft