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
2025-12-08 07:56:21 +00:00
parent 5986828580
commit de4b3c1c3c
54 changed files with 139 additions and 104 deletions
--- a/packages/booking-flow/eslint.config.mjs
+++ b/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",
--- a/packages/booking-flow/package.json
+++ b/packages/booking-flow/package.json
@@ -5,8 +5,8 @@
  "type": "module",
  "scripts": {
    "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
-    "lint:fix": "eslint . --fix && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
    "test": "vitest run --passWithNoTests",
    "test:watch": "vitest",
    "format": "prettier --write ."
--- a/packages/common/package.json
+++ b/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": {
--- a/packages/design-system/eslint.config.mjs
+++ b/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'],
--- a/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx
+++ b/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}
--- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
+++ b/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>
--- a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.tsx
+++ b/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={'52px'} width={'150px'} />
+        <SkeletonShimmer height="56px" />
+        <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>
  )
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
+++ b/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
--- a/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
+++ b/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
@@ -69,8 +69,8 @@ export const Default: Story = {
        none: null,
        button: (
          <Button
-            variant={'Text'}
-            typography={'Body/Supporting text (caption)/smBold'}
+            variant="Text"
+            typography="Body/Supporting text (caption)/smBold"
            onPress={() => fn()}
          >
            Read more <MaterialIcon icon="chevron_right" />
--- a/packages/design-system/lib/components/ImageGallery/index.tsx
+++ b/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'
--- a/packages/design-system/lib/components/InfoBox/InfoBox.tsx
+++ b/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}>
--- a/packages/design-system/lib/components/LinkList/LinkListItem/index.tsx
+++ b/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,
--- a/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx
+++ b/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>
--- a/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
+++ b/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>
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/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) => (
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/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) => (
--- a/packages/design-system/lib/components/RateCard/Modal/index.tsx
+++ b/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 }) => (
--- a/packages/design-system/lib/components/RateCard/Points/index.tsx
+++ b/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) => (
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/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) => (
--- a/packages/design-system/lib/components/Toasts/Toast.tsx
+++ b/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>
      ) : (
--- a/packages/design-system/package.json
+++ b/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:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix --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",
    "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",
--- a/packages/tracking/package.json
+++ b/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": {
--- a/packages/trpc/package.json
+++ b/packages/trpc/package.json
@@ -5,8 +5,8 @@
  "type": "module",
  "scripts": {
    "check-types": "tsgo --noEmit",
-    "lint": "eslint . --max-warnings 0 && tsgo --noEmit",
-    "lint:fix": "eslint . --fix && tsgo --noEmit",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
    "test": "vitest run",
    "test:watch": "vitest",
    "format": "prettier --write ."