Merge pull request #4164 from digitalfabrik/4045-linting

4045: Add linting rule for consistent naming

Author: steffenkleinle

build-configs/TypographyType.ts

@@ -31,13 +31,7 @@ type FontStyleOptions = Partial<FontStyle> & {
 }
 
 type NormalCssProperties = CSS.Properties<number | string>
-type Fontface = CSS.AtRule.FontFace & {
-  fallbacks?: CSS.AtRule.FontFace[]
-}
-type BaseCSSProperties = NormalCssProperties & {
-  '@font-face'?: Fontface | Fontface[]
-}
-type CSSProperties = BaseCSSProperties & {
+type CSSProperties = NormalCssProperties & {
   // Allow pseudo selectors and media queries
   // `unknown` is used since TS does not allow assigning an interface without
   // an index signature to one with an index signature. This is to allow type safe

e2e-tests/native/test/helpers/Selector.ts

@@ -1,7 +1,7 @@
 export class Selector {
   private queries: string[] = new Array<string>()
 
-  public ByText(text: string): Selector {
+  public byText(text: string): Selector {
     if (driver.isAndroid) {
       this.queries.push(`.text("${text}")`)
     } else {
@@ -10,7 +10,7 @@ export class Selector {
     return this
   }
 
-  public ByBeginsWith(text: string): Selector {
+  public byBeginsWith(text: string): Selector {
     if (driver.isAndroid) {
       this.queries.push(`.textStartsWith("${text}")`)
     } else {
@@ -19,7 +19,7 @@ export class Selector {
     return this
   }
 
-  public ByContainedText(text: string): Selector {
+  public byContainedText(text: string): Selector {
     if (driver.isAndroid) {
       this.queries.push(`.textContains("${text}")`)
     } else {

e2e-tests/native/test/pageobjects/regions.page.ts

@@ -18,7 +18,7 @@ class RegionsPage extends Page {
   }
 
   region(name: string) {
-    const selector = $(new Selector().ByText(name).build())
+    const selector = $(new Selector().byText(name).build())
     return Gestures.checkIfDisplayedWithSwipeUp(selector, MAX_SCROLLS)
   }
 }

e2e-tests/native/test/specs/changeLanguage.e2e.ts

@@ -10,17 +10,17 @@ describe('change language', () => {
   })
 
   it('should change language', async () => {
-    const englishContent = $(new Selector().ByText('Welcome').build())
+    const englishContent = $(new Selector().byText('Welcome').build())
     await englishContent.waitForDisplayed()
 
     await dashboardPage.languageIcon.click()
 
-    await $(new Selector().ByText('Deutsch').build()).click()
+    await $(new Selector().byText('Deutsch').build()).click()
 
     await (
-      await $(new Selector().ByContainedText('Loading').build())
+      await $(new Selector().byContainedText('Loading').build())
     ).waitForDisplayed({ timeout: 30000, interval: 2000, reverse: true })
 
-    await $(new Selector().ByText('Willkommen').build()).waitForDisplayed()
+    await $(new Selector().byText('Willkommen').build()).waitForDisplayed()
   })
 })

e2e-tests/native/test/specs/navigateToLeafCategory.e2e.ts

@@ -5,19 +5,19 @@ describe('navigate to leaf category', () => {
   it('should open leaf category', async () => {
     await navigateToDashboard()
 
-    const firstLevelCategory = $(new Selector().ByText('Language').build())
+    const firstLevelCategory = $(new Selector().byText('Language').build())
     await firstLevelCategory.waitForDisplayed()
     await firstLevelCategory.click()
 
-    const secondLevelCategory = $(new Selector().ByText('Language courses').build())
+    const secondLevelCategory = $(new Selector().byText('Language courses').build())
     await secondLevelCategory.waitForDisplayed()
     await secondLevelCategory.click()
 
-    const leafCategory = $(new Selector().ByText('Integration Courses').build())
+    const leafCategory = $(new Selector().byText('Integration Courses').build())
     await leafCategory.waitForDisplayed()
     await leafCategory.click()
 
-    const leafCategoryContent = $(new Selector().ByContainedText('you will learn German').build())
+    const leafCategoryContent = $(new Selector().byContainedText('you will learn German').build())
     await leafCategoryContent.waitForDisplayed({ timeout: 20000 })
     expect(await leafCategoryContent.isDisplayed()).toBeTruthy()
   })

e2e-tests/native/test/specs/navigateToOtherLocation.e2e.ts

@@ -32,7 +32,7 @@ describe('navigate to other location', () => {
   it('should open a new region on location change', async () => {
     await DashboardPage.headerOverflowButton.waitForDisplayed({ timeout: 20000 })
     await DashboardPage.headerOverflowButton.click()
-    const changeLocation = $(new Selector().ByText('Change location').build())
+    const changeLocation = $(new Selector().byText('Change location').build())
     await changeLocation.waitForDisplayed()
     await changeLocation.click()
 
@@ -46,6 +46,6 @@ describe('navigate to other location', () => {
     await browser.waitUntil(async () => $(`~Dashboard-Page`).isDisplayed(), { timeout: 20000 })
     await DashboardPage.get()
 
-    await $(new Selector().ByText('Augsburg (Stadt)').build()).waitForDisplayed()
+    await $(new Selector().byText('Augsburg (Stadt)').build()).waitForDisplayed()
   })
 })

e2e-tests/native/test/specs/navigateToSearchResult.e2e.ts

@@ -14,10 +14,10 @@ describe('navigate to search result', () => {
     const searchBar = await SearchPage.search
     await searchBar.addValue(contentSearch)
 
-    const searchResult = $(new Selector().ByBeginsWith('Language').build())
+    const searchResult = $(new Selector().byBeginsWith('Language').build())
     await searchResult.waitForDisplayed({ timeout: 20000 })
     await searchResult.click()
 
-    await $(new Selector().ByText('Language courses').build()).waitForDisplayed()
+    await $(new Selector().byText('Language courses').build()).waitForDisplayed()
   })
 })

eslint.config.mjs

@@ -138,6 +138,43 @@ export default defineConfig([
       '@typescript-eslint/ban-ts-comment': 'error',
       '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
       '@typescript-eslint/explicit-module-boundary-types': 'error',
+
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allowSingleOrDouble',
+          trailingUnderscore: 'allowSingleOrDouble',
+          filter: {
+            regex: '^(_|Component)$',
+            match: false,
+          },
+        },
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: ['typeLike', 'enumMember'],
+          format: ['PascalCase'],
+        },
+        {
+          selector: 'typeProperty',
+          format: ['camelCase', 'snake_case', 'PascalCase'],
+        },
+        {
+          selector: ['objectLiteralProperty', 'objectLiteralMethod'],
+          format: null,
+        },
+      ],
+
       '@typescript-eslint/no-empty-function': 'error',
       '@typescript-eslint/no-explicit-any': 'error',
       '@typescript-eslint/no-unnecessary-condition': 'error',

native/src/BottomTabNavigator.tsx

@@ -116,7 +116,7 @@ const BottomTabNavigator = ({ navigation }: BottomTabNavigatorProps): ReactEleme
   const CategoriesIcon = useCallback(
     // eslint-disable-next-line react/no-unused-prop-types
     ({ focused }: { focused: boolean }) => (
-      <Icon Icon={SignPostIcon} color={focused ? theme.colors.onSurface : theme.colors.onSurfaceVariant} />
+      <Icon icon={SignPostIcon} color={focused ? theme.colors.onSurface : theme.colors.onSurfaceVariant} />
     ),
     [theme],
   )

native/src/components/Categories.tsx

@@ -59,8 +59,8 @@ const Categories = ({
       content={category.content}
       lastUpdate={category.lastUpdate}
       language={language}
-      AfterContent={category.organization && <OrganizationContentInfo organization={category.organization} />}
-      Footer={
+      afterContent={category.organization && <OrganizationContentInfo organization={category.organization} />}
+      footer={
         children.length ? (
           <List
             items={children}