Merged in chore/eslint-curly-braces (pull request #3304)

Chore/eslint curly braces

* Add eslint rule for curly braces

* run eslint --fix for all files


Approved-by: Linus Flood

apps/partner-sas/app/[lang]/page.tsx

@@ -38,7 +38,7 @@ export default async function Home(props: PageArgs<LangParams>) {
       <section className={styles.mainContent}>
         <div className={styles.contentContainer}>
           <section className={styles.bookingWidgetWrapper}>
-            <Typography variant={"Title/lg"}>
+            <Typography variant="Title/lg">
               <h1 className={styles.heading}>
                 {intl.formatMessage({
                   id: "partnerSas.startPage.heading",
@@ -64,7 +64,7 @@ export default async function Home(props: PageArgs<LangParams>) {
                   defaultMessage:
                     "Collect new SAS EuroBonus points with your bookings.",
                 })}
-                theme={"SAS-Blue"}
+                theme="SAS-Blue"
                 icon={IconName.Diamond}
               />
               <InfoBox
@@ -77,7 +77,7 @@ export default async function Home(props: PageArgs<LangParams>) {
                   defaultMessage:
                     "Then use your points to pay for your next Scandic stay!",
                 })}
-                theme={"SAS-Blue"}
+                theme="SAS-Blue"
                 icon={IconName.CreditCard}
               />
             </section>

apps/partner-sas/app/global-error.tsx

@@ -64,9 +64,8 @@ export default function GlobalError({
 
           <p>
             <strong>
-              {
+              While we&apos;re working hard to fix it, you can always give us a
-                "While we're working hard to fix it, you can always give us a call:"
+              call:
-              }
             </strong>
           </p>
 

apps/partner-sas/components/LanguageSwitcher/index.tsx

@@ -61,12 +61,12 @@ export function LanguageSwitcher({
   return (
     <div className={classNames}>
       <DialogTrigger>
-        <Button className={styles.triggerButton} variant={"Text"} wrapping>
+        <Button className={styles.triggerButton} variant="Text" wrapping>
           {isMobile && !isFooter ? null : (
             <MaterialIcon
               icon="globe"
               size={16}
-              color={"Icon/Inverted"}
+              color="Icon/Inverted"
               className={styles.globeIcon}
             />
           )}
@@ -109,7 +109,7 @@ export function LanguageSwitcher({
           <Popover
             offset={isFooter ? 0 : 21}
             className={styles.languageSwitcherPopover}
-            placement={"bottom right"}
+            placement="bottom right"
           >
             <Dialog>
               {({ close }) => (
@@ -158,8 +158,8 @@ function LanguageSwitcherContent({
         <>
           <div className={styles.closeModalWrapper}>
             <Button
-              variant={"Text"}
+              variant="Text"
-              size={"Medium"}
+              size="Medium"
               onPress={closeModal}
               className={styles.closeModal}
             >
@@ -167,17 +167,17 @@ function LanguageSwitcherContent({
                 icon="chevron_left"
                 size={28}
                 className={styles.arrowBackIcon}
-                color={"CurrentColor"}
+                color="CurrentColor"
               />
               <MaterialIcon
                 icon="close"
                 size={32}
                 className={styles.closeIcon}
-                color={"CurrentColor"}
+                color="CurrentColor"
               />
             </Button>
           </div>
-          <Typography variant={"Title/Subtitle/md"}>
+          <Typography variant="Title/Subtitle/md">
             <h3 className={styles.title}>
               {intl.formatMessage({
                 id: "common.selectYourLanguage",

apps/partner-sas/components/Menu/MobileMenu/index.tsx

@@ -35,7 +35,7 @@ export function MobileMenu({ children }: React.PropsWithChildren) {
       />
       <div id="close-menu-container" style={{ position: "relative" }}>
         <Button
-          variant={"Text"}
+          variant="Text"
           type="button"
           className={`${styles.hamburger} ${isOpen ? styles.isExpanded : ""}`}
           aria-label={isOpen ? closeMsg : openMsg}

apps/partner-sas/components/Menu/NavigationMenu/index.tsx

@@ -36,7 +36,7 @@ export function NavigationMenu({ isMobile = false }: { isMobile?: boolean }) {
           className={`${styles.menuItem} ${styles.contactLink}`}
         >
           {isMobile ? null : (
-            <MaterialIcon icon="call" size={16} color={"CurrentColor"} />
+            <MaterialIcon icon="call" size={16} color="CurrentColor" />
           )}
           {intl.formatMessage({
             id: "common.contactUs",

apps/partner-sas/components/Menu/UserMenu/index.tsx

@@ -58,9 +58,9 @@ export function UserMenu({
     <div className={styles.userMenu}>
       {(session.status === "loading" || isLoading) &&
         (isMobile ? (
-          <SkeletonShimmer width={"4ch"} height={"4ch"} />
+          <SkeletonShimmer width="4ch" height="4ch" />
         ) : (
-          <SkeletonShimmer width={"12ch"} height={"1ch"} />
+          <SkeletonShimmer width="12ch" height="1ch" />
         ))}
       {(session.status === "unauthenticated" || isError) && (
         <a href={loginLink} className={styles.loginLink}>
@@ -86,7 +86,7 @@ export function UserMenu({
       {session.status === "authenticated" && isSuccess && profileData && (
         <div>
           <DialogTrigger onOpenChange={onOpenChange} isOpen={isOpen}>
-            <Button className={styles.userName} variant={"Text"}>
+            <Button className={styles.userName} variant="Text">
               <Avatar
                 className={styles.avatar}
                 initials={getInitials(
@@ -153,7 +153,7 @@ function UserMenuContent({
     <>
       <div>
         {isMobile && (
-          <Typography variant={"Title/Subtitle/md"}>
+          <Typography variant="Title/Subtitle/md">
             <h3 data-hj-suppress>
               {intl.formatMessage(
                 {
@@ -176,7 +176,7 @@ function UserMenuContent({
           </Typography>
           <Typography variant="Title/Overline/sm">
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            <span>{"·"}</span>
+            <span>·</span>
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <span>
@@ -194,7 +194,7 @@ function UserMenuContent({
         </p>
       </div>
       <Divider className={styles.menuDivider} />
-      <Typography variant={"Link/md"} className={styles.logoutLink}>
+      <Typography variant="Link/md" className={styles.logoutLink}>
         {/* Link triggers rsc which doesn't reload complete page and shows logged in even after logout  */}
         <a href={`/${lang}/logout`}>
           {intl.formatMessage({

apps/partner-sas/eslint.config.mjs

@@ -47,6 +47,14 @@ export default defineConfig([
       "no-console": "warn",
       "no-unused-vars": "off",
       "react/function-component-definition": "error",
+      "react/jsx-curly-brace-presence": [
+        "error",
+        {
+          props: "never",
+          children: "never",
+          propElementValues: "always",
+        },
+      ],
       "import/no-relative-packages": "error",
       "simple-import-sort/imports": [
         "warn",

apps/partner-sas/package.json

@@ -7,8 +7,8 @@
     "dev": "NODE_OPTIONS=--openssl-legacy-provider PORT=3001 NEXT_PUBLIC_PORT=3001 next dev --turbo",
     "build": "next build",
     "start": "node .next/standalone/server.js",
-    "lint": "eslint --max-warnings 0 . && tsgo --noEmit",
+    "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --fix . && tsgo --noEmit",
+    "lint:fix": "eslint --fix .",
     "check-types": "tsgo --noEmit",
     "typegen": "next typegen",
     "clean": "rm -rf .next",

apps/redis-api/package.json

@@ -6,8 +6,8 @@
     "scripts": {
         "dev": "bun --watch src/index.ts | pino-pretty -o '{if module}[{module}] {end}{msg}' -i pid,hostname",
         "check-types": "tsgo --noEmit",
-        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsgo --noEmit",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-        "lint:fix": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0 && tsgo --noEmit",
+        "lint:fix": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0",
         "format": "prettier --write ."
     },
     "dependencies": {

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -18,7 +18,7 @@ export function AlreadyLinkedError() {
     <SASModal>
       <MaterialIcon
         icon="check_circle"
-        color={"Icon/Feedback/Success"}
+        color="Icon/Feedback/Success"
         isFilled
         size={64}
       />
@@ -43,9 +43,9 @@ export function AlreadyLinkedError() {
       <Typography variant="Body/Paragraph/mdBold">
         <ButtonLink
           href={partnerSas[lang]}
-          variant={"Tertiary"}
+          variant="Tertiary"
-          color={"Primary"}
+          color="Primary"
-          size={"Large"}
+          size="Large"
         >
           {intl.formatMessage({
             id: "linkEuroBonusAccount.viewLinkedAccountsButton",

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -54,7 +54,7 @@ export function LinkAccountForm({
       <form onSubmit={handleSubmit} className={styles.form}>
         <div className={styles.titles}>
           <Image
-            alt={"Scandic ❤️ SAS"}
+            alt="Scandic ❤️ SAS"
             height={25}
             width={182}
             src="/_static/img/partner/sas/sas-campaign-logo.png"

apps/scandic-web/app/global-error.tsx

@@ -78,9 +78,8 @@ export default function GlobalError({
 
           <p>
             <strong>
-              {
+              While we&apos;re working hard to fix it, you can always give us a
-                "While we're working hard to fix it, you can always give us a call:"
+              call:
-              }
             </strong>
           </p>
 

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx

@@ -32,7 +32,7 @@ export default function Filter({
     <form className={styles.filterForm}>
       <DeprecatedSelect
         items={countryFilters}
-        defaultSelectedKey={""}
+        defaultSelectedKey=""
         label={intl.formatMessage({
           id: "common.country",
           defaultMessage: "Country",
@@ -46,7 +46,7 @@ export default function Filter({
       />
       <DeprecatedSelect
         items={cityFilters}
-        defaultSelectedKey={""}
+        defaultSelectedKey=""
         label={intl.formatMessage({
           id: "jobylonFeed.cityFilterLabel",
           defaultMessage: "Location (shown in local language)",
@@ -60,7 +60,7 @@ export default function Filter({
       />
       <DeprecatedSelect
         items={departmentFilters}
-        defaultSelectedKey={""}
+        defaultSelectedKey=""
         label={intl.formatMessage({
           id: "jobylonFeed.departmentFilterLabel",
           defaultMessage: "Hotel or office",
@@ -74,7 +74,7 @@ export default function Filter({
       />
       <DeprecatedSelect
         items={categoryFilters}
-        defaultSelectedKey={""}
+        defaultSelectedKey=""
         label={intl.formatMessage({
           id: "jobylonFeed.categoryFilterLabel",
           defaultMessage: "Category",

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx

@@ -157,8 +157,8 @@ export default function OverviewTableClient({
     <div>
       <div className={styles.mobileColumns}>
         <div className={styles.columnHeaderContainer}>
-          <MobileColumnHeader column={"A"} />
+          <MobileColumnHeader column="A" />
-          <MobileColumnHeader column={"B"} />
+          <MobileColumnHeader column="B" />
         </div>
         <RewardList
           levels={[

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -40,7 +40,7 @@ export default function LargeTable({
 
             return (
               <tr key={key + idx} className={styles.tr}>
-                <th scope={"row"} className={styles.rewardTh}>
+                <th scope="row" className={styles.rewardTh}>
                   <RewardTableHeader name={label} description={description} />
                 </th>
                 {levels.map((level, idx) => {
@@ -71,7 +71,7 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
     <details className={styles.details}>
       <summary className={styles.summary}>
         <hgroup className={styles.rewardHeader}>
-          <Title as="h4" level="h2" textTransform={"regular"}>
+          <Title as="h4" level="h2" textTransform="regular">
             {name}
           </Title>
           <span className={styles.chevron}>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx

@@ -19,7 +19,7 @@ export default function RewardCard({
         <details className={styles.details}>
           <summary className={styles.summary}>
             <hgroup className={styles.rewardCardHeader}>
-              <Title as="h4" level="h2" textTransform={"regular"}>
+              <Title as="h4" level="h2" textTransform="regular">
                 {title}
               </Title>
               <span className={styles.chevron}>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx

@@ -11,7 +11,7 @@ export default function YourLevel() {
       className={styles.script}
       color="peach80"
       type="two"
-      textAlign={"center"}
+      textAlign="center"
     >
       {intl.formatMessage({
         id: "overviewTable.yourLevel",

apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx

@@ -27,8 +27,8 @@ export default async function PointsOverview({
         link={link}
         preamble={subtitle}
         title={title}
-        headingAs={"h3"}
+        headingAs="h3"
-        headingLevel={"h1"}
+        headingLevel="h1"
       />
       <div className={styles.membershipCardsContainer}>
         <PointsToSpendCard user={user} />

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/Form.tsx

@@ -43,7 +43,7 @@ export function DestinationSearchForm({
         handlePressEnter={() => {
           void 0
         }}
-        inputName={"destinationSearch"}
+        inputName="destinationSearch"
         onSelect={(item) => {
           if (!item.url) {
             Sentry.captureMessage(

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -210,7 +210,7 @@ export default function ConfirmationStep({
                   onChange={(method) => {
                     trackUpdatePaymentMethod({ method })
                   }}
-                  formName={"paymentMethod"}
+                  formName="paymentMethod"
                 />
               </>
             )}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx

@@ -28,7 +28,7 @@ export default function DeliveryMethodStep() {
           </Typography>
           <Select
             name="deliveryTime"
-            label={""}
+            label=""
             items={deliveryTimeOptions}
             registerOptions={{ required: true }}
             isNestedInModal

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -124,7 +124,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
       <div className={styles.roomHeader}>
         {isCancelled ? (
           <IconChip
-            color={"red"}
+            color="red"
             icon={
               <MaterialIcon
                 icon="cancel"

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx

@@ -40,7 +40,7 @@ export default function SingleRoom({ user }: RoomProps) {
   if (!roomNumber) {
     return (
       <div className={styles.room}>
-        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width="200px" height="30px" />
         <SkeletonShimmer width="100%" height="750px" />
       </div>
     )

apps/scandic-web/components/HotelReservation/MyStay/myStaySkeleton.tsx

@@ -8,15 +8,15 @@ export function MyStaySkeleton() {
   return (
     <div className={styles.content}>
       <div className={styles.headerSkeleton}>
-        <SkeletonShimmer width={"100px"} height="20px" />
+        <SkeletonShimmer width="100px" height="20px" />
-        <SkeletonShimmer width={"450px"} height="50px" />
+        <SkeletonShimmer width="450px" height="50px" />
-        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width="200px" height="30px" />
       </div>
       <div className={styles.cardSkeleton}>
         <SkeletonShimmer width="590px" height="380px" />
       </div>
       <div className={styles.section}>
-        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width="200px" height="30px" />
         <div className={styles.ancillariesSkeleton}>
           <SkeletonShimmer width="280px" height="200px" />
           <SkeletonShimmer width="280px" height="200px" />
@@ -26,7 +26,7 @@ export function MyStaySkeleton() {
         </div>
       </div>
       <div className={styles.section}>
-        <SkeletonShimmer width={"200px"} height="30px" />
+        <SkeletonShimmer width="200px" height="30px" />
         <div>
           <SkeletonShimmer width="100%" height="700px" />
         </div>

apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx

@@ -41,7 +41,7 @@ export default function LevelProgressModal({
     <Modal
       className={styles.dialog}
       trigger={
-        <IconButton theme={"Black"}>
+        <IconButton theme="Black">
           <MaterialIcon
             className={styles.infoButton}
             icon="info"

apps/scandic-web/components/MyPages/Pagination/index.tsx

@@ -15,7 +15,7 @@ function PaginationButton({
 }: React.PropsWithChildren<PaginationButtonProps>) {
   return (
     <button
-      type={"button"}
+      type="button"
       disabled={disabled}
       onClick={handleClick}
       className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}

apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx

@@ -171,7 +171,7 @@ export default function BookedRoomSidePeekContent({
       <div className={styles.roomHeader}>
         {isCancelled ? (
           <IconChip
-            color={"red"}
+            color="red"
             icon={
               <MaterialIcon
                 icon="cancel"

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -26,21 +26,21 @@ export default async function JoinLoyaltyContact({
     <section className={styles.joinLoyaltyContainer}>
       <article className={styles.wrapper}>
         {block.title ? (
-          <Typography variant={"Title/Subtitle/md"}>
+          <Typography variant="Title/Subtitle/md">
             <h4 className={styles.title}>{block.title}</h4>
           </Typography>
         ) : null}
         <ScandicFriends color="red" />
         {block.preamble ? (
-          <Typography variant={"Body/Paragraph/mdRegular"}>
+          <Typography variant="Body/Paragraph/mdRegular">
             <p className={styles.preamble}>{block.preamble}</p>
           </Typography>
         ) : null}
         {block.button ? (
-          <Typography variant={"Body/Paragraph/mdBold"}>
+          <Typography variant="Body/Paragraph/mdBold">
             <ButtonLink
               className={styles.button}
-              size={"Small"}
+              size="Small"
               wrapping
               href={block.button.href}
               target={block.button.openInNewTab ? "_blank" : "_self"}
@@ -50,7 +50,7 @@ export default async function JoinLoyaltyContact({
           </Typography>
         ) : null}
         <section className={styles.loginContainer}>
-          <Typography variant={"Body/Paragraph/mdRegular"}>
+          <Typography variant="Body/Paragraph/mdRegular">
             <p>
               {intl.formatMessage({
                 id: "loyalty.alreadyFriend",

apps/scandic-web/eslint.config.mjs

@@ -48,6 +48,14 @@ export default defineConfig([
       "no-console": "warn",
       "no-unused-vars": "off",
       "react/function-component-definition": "error",
+      "react/jsx-curly-brace-presence": [
+        "error",
+        {
+          props: "never",
+          children: "ignore",
+          propElementValues: "always",
+        },
+      ],
       "import/no-relative-packages": "error",
       "simple-import-sort/imports": [
         "warn",

apps/scandic-web/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "build": "next build",
     "dev": "NODE_OPTIONS=--openssl-legacy-provider PORT=3000 NEXT_PUBLIC_PORT=3000 next dev --turbo",
-    "lint": "next typegen && eslint --max-warnings 0 . && tsgo --noEmit",
+    "lint": "next typegen && eslint --max-warnings 0 .",
-    "lint:fix": "next typegen && eslint --fix --max-warnings 0 . && tsgo --noEmit",
+    "lint:fix": "next typegen && eslint --fix --max-warnings 0 .",
     "start": "node .next/standalone/server.js",
     "test:setup": "yarn build && yarn start",
     "test:e2e": "playwright test",

packages/booking-flow/eslint.config.mjs

@@ -49,6 +49,14 @@ export default defineConfig([
       "no-console": "warn",
       "no-unused-vars": "off",
       "react/function-component-definition": "error",
+      "react/jsx-curly-brace-presence": [
+        "error",
+        {
+          props: "never",
+          children: "never",
+          propElementValues: "always",
+        },
+      ],
       "import/no-relative-packages": "error",
       "import/no-extraneous-dependencies": [
         "warn",

packages/booking-flow/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
-    "lint:fix": "eslint . --fix && tsgo --noEmit",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
     "format": "prettier --write ."

packages/common/package.json

@@ -8,7 +8,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
     "format": "prettier --write ."
   },
   "exports": {

packages/design-system/eslint.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig, globalIgnores } from 'eslint/config'
 import globals from 'globals'
 import tsParser from '@typescript-eslint/parser'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import react from 'eslint-plugin-react'
 import { FlatCompat } from '@eslint/eslintrc'
 import js from '@eslint/js'
 import importPlugin from 'eslint-plugin-import'
@@ -35,6 +36,7 @@ export default defineConfig([
       'react-refresh': reactRefresh,
       import: importPlugin,
       formatjs,
+      react,
     },
     settings: {
       // Ensure the plugin can resolve workspace packages and TS path aliases
@@ -64,6 +66,14 @@ export default defineConfig([
           allowConstantExport: true,
         },
       ],
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
+          propElementValues: 'always',
+        },
+      ],
 
       'formatjs/enforce-default-message': ['error', 'literal'],
       'formatjs/enforce-placeholders': ['error'],

packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx

@@ -98,7 +98,7 @@ const meta: Meta<CompositionProps> = {
 
       {showPrimaryButton && inMainArea && (
         <Button
-          size={'Large'}
+          size="Large"
           variant="Primary"
           typography="Body/Paragraph/mdBold"
           onPress={args._onPrimaryPress}
@@ -109,7 +109,7 @@ const meta: Meta<CompositionProps> = {
 
       {showPrimaryButton && !inMainArea && (
         <Button
-          size={'Small'}
+          size="Small"
           variant="Tertiary"
           typography="Body/Paragraph/mdBold"
           onPress={args._onPrimaryPress}

packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx

@@ -44,7 +44,7 @@ export function PaymentOption({
           </div>
           <div className={styles.cardContainer}>
             {cardNumber && (
-              <Typography variant={'Body/Supporting text (caption)/smRegular'}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
                 {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <span>•••• {cardNumber}</span>
               </Typography>

packages/design-system/lib/components/HotelCard/HotelCardSkeleton.tsx

@@ -7,27 +7,27 @@ export function HotelCardSkeleton() {
     <article className={styles.card}>
       {/* image container */}
       <div className={styles.imageContainer}>
-        <SkeletonShimmer width={'100%'} height="100%" />
+        <SkeletonShimmer width="100%" height="100%" />
       </div>
 
       <div className={styles.content}>
-        <SkeletonShimmer height={'65px'} />
+        <SkeletonShimmer height="65px" />
         <div className={styles.text}>
-          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height="20px" />
-          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height="20px" />
-          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height="20px" />
-          <SkeletonShimmer height={'20px'} />
+          <SkeletonShimmer height="20px" />
         </div>
-        <SkeletonShimmer height={'56px'} />
+        <SkeletonShimmer height="56px" />
-        <SkeletonShimmer height={'52px'} width={'150px'} />
+        <SkeletonShimmer height="52px" width="150px" />
       </div>
 
       <div className={styles.priceVariants}>
         {/* price variants */}
         {Array.from({ length: 2 }).map((_, index) => (
-          <SkeletonShimmer key={index} height={'100px'} />
+          <SkeletonShimmer key={index} height="100px" />
         ))}
-        <SkeletonShimmer height={'40px'} />
+        <SkeletonShimmer height="40px" />
       </div>
     </article>
   )

packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -40,8 +40,9 @@ export default function HotelChequeCard({
           </Subtitle>
           <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
+            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
-              {'+'}
+              +
               <Subtitle type="two" color="uiTextHighContrast">
                 {productTypeCheque.localPrice.additionalPricePerStay}
               </Subtitle>
@@ -61,7 +62,7 @@ export default function HotelChequeCard({
               defaultMessage: 'Approx.',
             })}
           </Caption>
-          <Caption color={'uiTextMediumContrast'}>
+          <Caption color="uiTextMediumContrast">
             {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
             {productTypeCheque.requestedPrice.additionalPricePerStay
               ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx

packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx

@@ -69,8 +69,8 @@ export const Default: Story = {
         none: null,
         button: (
           <Button
-            variant={'Text'}
+            variant="Text"
-            typography={'Body/Supporting text (caption)/smBold'}
+            typography="Body/Supporting text (caption)/smBold"
             onPress={() => fn()}
           >
             Read more <MaterialIcon icon="chevron_right" />

packages/design-system/lib/components/ImageGallery/index.tsx

@@ -65,7 +65,7 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <Typography variant={'Body/Supporting text (caption)/smRegular'}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
           <span
             className={`${styles.imageCount} ${
               imageCountPosition === 'top'

packages/design-system/lib/components/InfoBox/InfoBox.tsx

@@ -41,7 +41,7 @@ export function InfoBox({ heading, text, theme, icon }: Props) {
     <article className={infoBoxVariants({ theme })}>
       {icon && (
         <div className={iconVariants({ theme })}>
-          <IconByIconName iconName={icon} color={'CurrentColor'} />
+          <IconByIconName iconName={icon} color="CurrentColor" />
         </div>
       )}
       <div className={styles.content}>

packages/design-system/lib/components/LinkList/LinkListItem/index.tsx

@@ -29,7 +29,7 @@ export function LinkListItem({
   return (
     <Link
       href={href}
-      target={'_blank'}
+      target="_blank"
       onClick={onClick}
       className={cx(styles.content, {
         [styles.graphic]: illustration,

packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx

@@ -156,7 +156,7 @@ export const Examples: Story = {
           }}
         >
           <HotelMarkerByType {...args} {...exampleArgs} />
-          <Typography variant={'Label/xsRegular'}>
+          <Typography variant="Label/xsRegular">
             <p>{exampleArgs.name}</p>
           </Typography>
         </div>

packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx

@@ -68,7 +68,7 @@ export const All: Story = {
           }}
         >
           <PaymentMethodIcon {...args} paymentMethod={m} />
-          <Typography variant={'Label/xsRegular'}>
+          <Typography variant="Label/xsRegular">
             <p>{m}</p>
           </Typography>
         </div>

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -94,7 +94,7 @@ export default function CampaignRateCard({
             >
               {rateTermDetails.map((termGroup) => (
                 <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant={'Body/Paragraph/mdBold'}>
+                  <Typography variant="Body/Paragraph/mdBold">
                     <p>{termGroup.title}</p>
                   </Typography>
                   {termGroup.terms.map((term) => (

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -84,7 +84,7 @@ export default function CodeRateCard({
             >
               {rateTermDetails.map((termGroup) => (
                 <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant={'Body/Paragraph/mdBold'}>
+                  <Typography variant="Body/Paragraph/mdBold">
                     <p>{termGroup.title}</p>
                   </Typography>
                   {termGroup.terms.map((term) => (

packages/design-system/lib/components/RateCard/Modal/index.tsx

@@ -59,7 +59,7 @@ function InnerModal({
     <MotionOverlay
       animate={animation}
       className={styles.overlay}
-      initial={'hidden'}
+      initial="hidden"
       isDismissable
       isExiting={animation === AnimationStateEnum.hidden}
       onAnimationComplete={modalStateHandler}
@@ -71,7 +71,7 @@ function InnerModal({
         className={styles.modal}
         variants={slideInOut}
         animate={animation}
-        initial={'hidden'}
+        initial="hidden"
       >
         <Dialog className={styles.dialog}>
           {({ close }) => (

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -70,7 +70,7 @@ export default function PointsRateCard({
               >
                 {rateTermDetails.map((termGroup) => (
                   <div key={termGroup.title} className={styles.terms}>
-                    <Typography variant={'Body/Paragraph/mdBold'}>
+                    <Typography variant="Body/Paragraph/mdBold">
                       <p>{termGroup.title}</p>
                     </Typography>
                     {termGroup.terms.map((term) => (

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -79,7 +79,7 @@ export default function RegularRateCard({
             >
               {rateTermDetails.map((termGroup) => (
                 <div key={termGroup.title} className={styles.terms}>
-                  <Typography variant={'Body/Paragraph/mdBold'}>
+                  <Typography variant="Body/Paragraph/mdBold">
                     <p>{termGroup.title}</p>
                   </Typography>
                   {termGroup.terms.map((term) => (

packages/design-system/lib/components/Toasts/Toast.tsx

@@ -31,7 +31,7 @@ export function Toast({ children, message, onClose, variant }: ToastsProps) {
     <div className={className} role={getRole(variant)} aria-atomic="true">
       <div className={styles.iconContainer}>{Icon && Icon}</div>
       {message ? (
-        <Typography variant={'Body/Paragraph/mdRegular'}>
+        <Typography variant="Body/Paragraph/mdRegular">
           <p className={styles.message}>{message}</p>
         </Typography>
       ) : (

packages/design-system/package.json

@@ -213,8 +213,8 @@
     "generate": "cd generate && jiti generate.ts && yarn format",
     "format": "prettier . --write",
     "build": "yarn build-storybook",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsc",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix --max-warnings 0 && tsc",
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix --max-warnings 0",
     "storybook": "yarn run generate && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest run --passWithNoTests",
@@ -272,6 +272,7 @@
     "eslint": "^9",
     "eslint-plugin-formatjs": "^5.3.1",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-storybook": "^10.0.8",

packages/tracking/package.json

@@ -8,7 +8,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
     "format": "prettier --write ."
   },
   "exports": {

packages/trpc/package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
-    "lint:fix": "eslint . --fix && tsgo --noEmit",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest",
     "format": "prettier --write ."

yarn.lock

@@ -5314,6 +5314,7 @@ __metadata:
     eslint: "npm:^9"
     eslint-plugin-formatjs: "npm:^5.3.1"
     eslint-plugin-import: "npm:^2.31.0"
+    eslint-plugin-react: "npm:^7.37.5"
     eslint-plugin-react-hooks: "npm:^5.2.0"
     eslint-plugin-react-refresh: "npm:^0.4.20"
     eslint-plugin-storybook: "npm:^10.0.8"
@@ -10424,7 +10425,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.37.0":
+"eslint-plugin-react@npm:^7.37.0, eslint-plugin-react@npm:^7.37.5":
   version: 7.37.5
   resolution: "eslint-plugin-react@npm:7.37.5"
   dependencies: