From 5ff4234552d919520b8d5aaa68ee4efa649c09ba Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Mon, 28 Jul 2025 09:05:25 +0000 Subject: [PATCH] Merged in chore/SW-3145-move-date-to-design-system (pull request #2556) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../Forms/Edit/Profile/FormContent/index.tsx | 17 ++++- .../components/Forms/Signup/index.tsx | 12 +++- .../Details/RoomOne/Signup/index.tsx | 23 ++++++- .../EnterDetails/Details/RoomOne/index.tsx | 1 + .../MyStay/Receipt/Footer/index.tsx | 2 +- .../TempDesignSystem/Form/Date/date.ts | 13 ---- .../Form/Date => tests}/date.test.tsx | 16 +++-- packages/common/package.json | 2 + .../common}/utils/dateFormatting.ts | 4 +- .../common}/utils/rangeArray.ts | 2 +- .../lib/components}/Form/Date/date.module.css | 0 .../lib/components/Form/Date/date.ts | 21 ++++++ .../lib/components}/Form/Date/index.tsx | 64 ++++++++----------- packages/design-system/package.json | 5 +- yarn.lock | 2 + 15 files changed, 120 insertions(+), 64 deletions(-) delete mode 100644 apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts rename apps/scandic-web/{components/TempDesignSystem/Form/Date => tests}/date.test.tsx (89%) rename {apps/scandic-web => packages/common}/utils/dateFormatting.ts (82%) rename {apps/scandic-web => packages/common}/utils/rangeArray.ts (77%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Form/Date/date.module.css (100%) create mode 100644 packages/design-system/lib/components/Form/Date/date.ts rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Form/Date/index.tsx (74%) diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx index 4cbd6f7b6..38b582dae 100644 --- 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 }) {

- + diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx index 6329e9768..a1d36358b 100644 --- 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({ diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx index d55d299e7..d89c8e547 100644 --- 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 : (
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx index 695958fd6..f7ddb6e1b 100644 --- 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" diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts b/apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts deleted file mode 100644 index 8f17d4607..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.ts +++ /dev/null @@ -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 { - name: string - registerOptions?: RegisterOptions -} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx b/apps/scandic-web/tests/date.test.tsx similarity index 89% rename from apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx rename to apps/scandic-web/tests/date.test.tsx index a53203db2..12bc37f7e 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx +++ b/apps/scandic-web/tests/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) }} > - + ) diff --git a/packages/common/package.json b/packages/common/package.json index a6d2915ed..b9a6974cb 100644 --- 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", diff --git a/apps/scandic-web/utils/dateFormatting.ts b/packages/common/utils/dateFormatting.ts similarity index 82% rename from apps/scandic-web/utils/dateFormatting.ts rename to packages/common/utils/dateFormatting.ts index a4e6363aa..3f12e093d 100644 --- a/apps/scandic-web/utils/dateFormatting.ts +++ b/packages/common/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 diff --git a/apps/scandic-web/utils/rangeArray.ts b/packages/common/utils/rangeArray.ts similarity index 77% rename from apps/scandic-web/utils/rangeArray.ts rename to packages/common/utils/rangeArray.ts index 71e12d8de..5423d4fa3 100644 --- a/apps/scandic-web/utils/rangeArray.ts +++ b/packages/common/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 ) } diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/date.module.css b/packages/design-system/lib/components/Form/Date/date.module.css similarity index 100% rename from apps/scandic-web/components/TempDesignSystem/Form/Date/date.module.css rename to packages/design-system/lib/components/Form/Date/date.module.css diff --git a/packages/design-system/lib/components/Form/Date/date.ts b/packages/design-system/lib/components/Form/Date/date.ts new file mode 100644 index 000000000..7102c984f --- /dev/null +++ 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 { + labels: { + day: string + month: string + year: string + errorMessage?: string + } + lang: Lang + name: string + registerOptions?: RegisterOptions +} diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx b/packages/design-system/lib/components/Form/Date/index.tsx similarity index 74% rename from apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx rename to packages/design-system/lib/components/Form/Date/index.tsx index d6ebd15a3..79a659d80 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx +++ b/packages/design-system/lib/components/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) {
setValue(DateName.month, Number(key))} isRequired @@ -158,9 +153,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {