chore: enable naming-conventation lint

joonatank · joonatank · commit 1c8c5e72dc45 · 2024-12-04T14:48:19.000+02:00
diff --git a/apps/ui/components/common/PageWrapper.tsx b/apps/ui/components/common/PageWrapper.tsx
@@ -8,7 +8,7 @@ import Navigation from "./Navigation";
 import { InProgressReservationNotification } from "@/components/reservations/UnpaidReservationNotification";
 import { mainStyles } from "common/styles/layout";
 
-interface Props {
+interface PageProps {
   children: React.ReactNode;
   overrideBackgroundColor?: string;
   apiBaseUrl: string;
@@ -27,7 +27,7 @@ function PageWrapper({
   feedbackUrl,
   children,
   version,
-}: Props): JSX.Element {
+}: PageProps): JSX.Element {
   return (
     <>
       <Head>
diff --git a/apps/ui/components/recurring/ApplicationRoundCard.tsx b/apps/ui/components/recurring/ApplicationRoundCard.tsx
@@ -12,7 +12,7 @@ import Card from "common/src/components/Card";
 import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";
 import { getApplicationRoundPath } from "@/modules/urls";
 
-interface Props {
+interface CardProps {
   applicationRound: ApplicationRoundFieldsFragment;
 }
 
@@ -43,7 +43,9 @@ function translateRoundDate(
   }
 }
 
-export function ApplicationRoundCard({ applicationRound }: Props): JSX.Element {
+export function ApplicationRoundCard({
+  applicationRound,
+}: CardProps): JSX.Element {
   const { t } = useTranslation();
 
   const state = applicationRound.status;
diff --git a/apps/ui/components/reservation-unit/Head.tsx b/apps/ui/components/reservation-unit/Head.tsx
@@ -22,7 +22,7 @@ import { Flex } from "common/styles/util";
 import { breakpoints } from "common";
 
 type QueryT = NonNullable<ReservationUnitPageQuery["reservationUnit"]>;
-interface Props {
+interface HeadProps {
   reservationUnit: QueryT;
   reservationUnitIsReservable?: boolean;
   subventionSuffix?: JSX.Element;
@@ -80,7 +80,7 @@ export function Head({
   reservationUnit,
   reservationUnitIsReservable,
   subventionSuffix,
-}: Props): JSX.Element {
+}: HeadProps): JSX.Element {
   const reservationUnitName = getReservationUnitName(reservationUnit);
   const unitName = getUnitName(reservationUnit.unit ?? undefined);
 
@@ -123,7 +123,7 @@ const IconListWrapper = styled.div`
 function IconList({
   reservationUnit,
   subventionSuffix,
-}: Pick<Props, "reservationUnit" | "subventionSuffix">): JSX.Element {
+}: Pick<HeadProps, "reservationUnit" | "subventionSuffix">): JSX.Element {
   const { t } = useTranslation();
 
   const minDur = reservationUnit.minReservationDuration ?? 0;
diff --git a/apps/ui/components/search/ReservationUnitCard.tsx b/apps/ui/components/search/ReservationUnitCard.tsx
@@ -17,7 +17,7 @@ import { getReservationUnitPath } from "@/modules/urls";
 import { ButtonLikeLink } from "../common/ButtonLikeLink";
 
 type Node = ReservationUnitCardFieldsFragment;
-interface IProps {
+interface CardProps {
   reservationUnit: Node;
   selectReservationUnit: (reservationUnit: Node) => void;
   containsReservationUnit: (reservationUnit: Node) => boolean;
@@ -29,7 +29,7 @@ export function ReservationUnitCard({
   selectReservationUnit,
   containsReservationUnit,
   removeReservationUnit,
-}: IProps): JSX.Element {
+}: CardProps): JSX.Element {
   const { t } = useTranslation();
 
   const name = getReservationUnitName(reservationUnit);
diff --git a/packages/common/src/components/form/ControlledSelect.tsx b/packages/common/src/components/form/ControlledSelect.tsx
@@ -9,7 +9,7 @@ import {
   type UseControllerProps,
 } from "react-hook-form";
 
-interface Props<T extends FieldValues> extends UseControllerProps<T> {
+interface SelectProps<T extends FieldValues> extends UseControllerProps<T> {
   name: Path<T>;
   control: Control<T>;
   label: string;
@@ -47,7 +47,7 @@ export function ControlledSelect<T extends FieldValues>({
   multiselect,
   disabled,
   afterChange,
-}: Props<T>): JSX.Element {
+}: SelectProps<T>): JSX.Element {
   const { t } = useTranslation(["common"]);
   const {
     field: { value, onChange },
diff --git a/packages/eslint-config-custom/react.js b/packages/eslint-config-custom/react.js
@@ -98,7 +98,6 @@ module.exports = defineConfig({
     "@typescript-eslint/no-unsafe-return": 0,
     "@typescript-eslint/no-unnecessary-type-arguments": 0,
     // TODO there should be rules for this already
-    "@typescript-eslint/naming-convention": 0,
     "no-implicit-coercion": 0,
     "import/no-named-as-default-member": 0,
     "import/no-named-as-default": 0,
@@ -181,7 +180,6 @@ module.exports = defineConfig({
       },
     ],
     "react/destructuring-assignment": 0,
-    "react/jsx-props-no-spreading": 0,
     "react/prop-types": 0,
     "react/require-default-props": 0,
     "react/static-property-placement": 0,
@@ -192,6 +190,10 @@ module.exports = defineConfig({
         unnamedComponents: ["function-expression", "arrow-function"],
       },
     ],
+    // Custom rule to enforce data-testid attribute naming
+    'react/no-unknown-property': ['error', {
+      requireDataLowercase: true,
+    }],
     // There seems to be no other way to override this than disabling it and rewriting the rules in the naming-convention
     "@typescript-eslint/camelcase": ["off"],
     "@typescript-eslint/no-empty-function": 0,

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ import Card from "common/src/components/Card";`
`12`	`12`	`import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";`
`13`	`13`	`import { getApplicationRoundPath } from "@/modules/urls";`
`14`	`14`
`15`		`-interface Props {`
	`15`	`+interface CardProps {`
`16`	`16`	`applicationRound: ApplicationRoundFieldsFragment;`
`17`	`17`	`}`
`18`	`18`
`@@ -43,7 +43,9 @@ function translateRoundDate(`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`		`-export function ApplicationRoundCard({ applicationRound }: Props): JSX.Element {`
	`46`	`+export function ApplicationRoundCard({`
	`47`	`+ applicationRound,`
	`48`	`+}: CardProps): JSX.Element {`
`47`	`49`	`const { t } = useTranslation();`
`48`	`50`
`49`	`51`	`const state = applicationRound.status;`