Add ESLint naming convention rule

packages/components/src/Collapse/Collapse.styles.ts

@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 /**
  * Styles
  */
-export const Styles = (theme: GrafanaTheme2) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     rootOutline: css`
       border: 1px solid ${theme.colors.border.weak};

packages/components/src/Collapse/Collapse.tsx

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { IconButton, useStyles2, useTheme2 } from '@grafana/ui';
 import React from 'react';
 
-import { Styles } from './Collapse.styles';
+import { getStyles } from './Collapse.styles';
 
 /**
  * Properties
@@ -72,7 +72,7 @@ export const Collapse: React.FC<Props> = ({
    * Styles and Theme
    */
   const theme = useTheme2();
-  const styles = useStyles2(Styles);
+  const styles = useStyles2(getStyles);
 
   /**
    * Fill Options

packages/eslint-config/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "./index.js",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "sourceType": "module"
+  }
+}

packages/eslint-config/.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

packages/eslint-config/index.js

@@ -1,34 +1,86 @@
-"use strict";
+'use strict';
+
+/**
+ * Get Naming Convention Rule
+ */
+const getNamingConventionRule = ({ target = 'default' }) => ({
+  '@typescript-eslint/naming-convention': [
+    'error',
+    target === 'component'
+      ? {
+          selector: ['default'],
+          format: ['strictCamelCase', 'StrictPascalCase'],
+        }
+      : {
+          selector: ['default'],
+          format: ['strictCamelCase'],
+        },
+    target === 'constant' && {
+      selector: 'variable',
+      modifiers: ['global'],
+      format: ['UPPER_CASE'],
+    },
+    {
+      selector: 'typeLike',
+      format: ['StrictPascalCase'],
+    },
+    {
+      selector: 'typeParameter',
+      format: ['StrictPascalCase'],
+      prefix: ['T', 'K'],
+    },
+    {
+      selector: 'enumMember',
+      format: ['UPPER_CASE'],
+    },
+    {
+      selector: ['classProperty', 'objectLiteralProperty'],
+      format: null,
+      modifiers: ['requiresQuotes'],
+    },
+  ].filter(Boolean),
+});
 
 /**
  * Documentation - https://eslint.org/docs/latest/extend/plugins#configs-in-plugins
  */
 module.exports = {
-  extends: ["plugin:@typescript-eslint/recommended"],
-  plugins: [
-    "@typescript-eslint/eslint-plugin",
-    "simple-import-sort",
-    "deprecation",
-  ],
+  extends: ['plugin:@typescript-eslint/recommended'],
+  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'deprecation'],
   rules: {
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
       {
-        args: "after-used",
+        args: 'after-used',
         ignoreRestSiblings: true,
-        vars: "all",
+        vars: 'all',
       },
     ],
-    "deprecation/deprecation": ["warn"],
-    "simple-import-sort/exports": "error",
-    "simple-import-sort/imports": "error",
-    "sort-imports": [
-      "error",
+    'deprecation/deprecation': ['warn'],
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': 'error',
+    'sort-imports': [
+      'error',
       {
         ignoreCase: true,
         ignoreDeclarationSort: true,
       },
     ],
+    ...getNamingConventionRule({ target: 'default' }),
   },
+  overrides: [
+    {
+      files: ['**/*.tsx'],
+      rules: {
+        ...getNamingConventionRule({ target: 'component' }),
+      },
+    },
+    {
+      files: ['**/constants/*.ts', '**/constants.ts'],
+      rules: {
+        ...getNamingConventionRule({ target: 'constant' }),
+      },
+    },
+  ],
 };

packages/eslint-config/package.json

@@ -29,8 +29,8 @@
   },
   "scripts": {
     "build": "",
-    "lint": "",
+    "lint": "eslint './tests/**/*.{ts,tsx}'",
     "test:ci": ""
   },
-  "version": "1.1.0"
+  "version": "1.2.0"
 }

packages/eslint-config/tests/constants/naming-convention.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * Global Constant
+ */
+const GLOBAL_CONSTANT = {};
+
+/**
+ * Property
+ */
+const ADMIN_USER = {
+  firstName: 'John',
+};
+
+/**
+ * Enum
+ */
+enum Status {
+  ACTIVE = 'active',
+  PAUSED = 'paused',
+}

packages/eslint-config/tests/naming-convention.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * Constant
+ */
+const globalConstant = {};
+
+/**
+ * Global Function
+ */
+const func = () => {
+  /**
+   * Local Variable
+   */
+  const localVariable = 'hello';
+
+  const func = () => {};
+
+  return localVariable.trim();
+};
+
+/**
+ * Enum
+ */
+enum Status {
+  ACTIVE = 'active',
+  PAUSED = 'paused',
+}
+
+/**
+ * Type
+ */
+type User = object;
+
+/**
+ * Interface
+ */
+interface UserObject {}
+
+/**
+ * Generic Type
+ */
+type ApiResponse<TData> = {
+  data: TData;
+};
+
+/**
+ * Property
+ */
+const adminUser = {
+  firstName: 'John',
+};
+
+/**
+ * Non matched external property
+ */
+interface ThirdPartyObject {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'custom-name': string;
+}
+
+const ThirdPartyObject: ThirdPartyObject = {
+  'custom-name': 'john',
+};
+
+/**
+ * Destructing
+ */
+const printName = () => {
+  const { firstName } = { firstName: 'John' };
+};
+
+/**
+ * Class
+ */
+class Service {}
+
+export const service = new Service();
+
+/**
+ * Component
+ */
+const Component: React.FC<null> = () => {
+  const onChange = () => {};
+
+  return <input onChange={onChange} />;
+};

packages/eslint-config/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["./"]
+}

packages/jest-selectors/src/types.ts

@@ -3,9 +3,9 @@ import { GetByBoundAttribute } from '@testing-library/react';
 /**
  * Jest Selector
  */
-type JestSelector<Args extends unknown[]> = (
+type JestSelector<TArgs extends unknown[]> = (
   noThrowOnNotFound?: boolean,
-  ...args: Args
+  ...args: TArgs
 ) => ReturnType<GetByBoundAttribute>;
 
 /**

packages/jest-selectors/src/utils.ts

@@ -8,10 +8,10 @@ import { JestSelectors } from './types';
  * @param enforceTestIdSelectorForKeys
  */
 export const getJestSelectors =
-  <Selectors extends Record<keyof Selectors, Selectors[keyof Selectors]>>(
-    selectors: Selectors,
-    enforceTestIdSelectorForKeys: Array<keyof Selectors> = []
-  ): ((screen: Screen | BoundFunctions<Queries>) => JestSelectors<Selectors>) =>
+  <TSelectors extends Record<keyof TSelectors, TSelectors[keyof TSelectors]>>(
+    selectors: TSelectors,
+    enforceTestIdSelectorForKeys: Array<keyof TSelectors> = []
+  ): ((screen: Screen | BoundFunctions<Queries>) => JestSelectors<TSelectors>) =>
   (screen) => {
     return Object.entries(selectors).reduce((acc, [key, selector]) => {
       /**
@@ -22,7 +22,7 @@ export const getJestSelectors =
       const getElement = (noThrowOnNotFound = false, ...args: unknown[]) => {
         const value = typeof selector === 'function' ? selector(...args) : selector;
 
-        if (value.startsWith('data-testid') || enforceTestIdSelectorForKeys.includes(key as keyof Selectors)) {
+        if (value.startsWith('data-testid') || enforceTestIdSelectorForKeys.includes(key as keyof TSelectors)) {
           return noThrowOnNotFound ? screen.queryByTestId(value) : screen.getByTestId(value);
         }
 
@@ -33,5 +33,5 @@ export const getJestSelectors =
         ...acc,
         [key]: getElement,
       };
-    }, {} as JestSelectors<Selectors>);
+    }, {} as JestSelectors<TSelectors>);
   };