Merge pull request #113 from Dschungelabenteuer/fix-eslint

chore: fix ESLint and TypeScript issues

.eslintrc.js

@@ -5,9 +5,11 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:eslint-plugin/recommended',
-    'plugin:node/recommended',
     'plugin:prettier/recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
   env: {
     node: true,
   },

lib/rules/await-interactions.ts

@@ -159,7 +159,7 @@ export = createStorybookRule({
      */
 
     let isImportedFromStorybook = true
-    let invocationsThatShouldBeAwaited = [] as Array<{
+    const invocationsThatShouldBeAwaited = [] as Array<{
       node: TSESTree.Node
       method: TSESTree.Identifier
     }>

lib/rules/context-in-play-function.ts

@@ -3,7 +3,7 @@
  * @author Yann Braga
  */
 
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 
 import { createStorybookRule } from '../utils/create-storybook-rule'
 import { CategoryId } from '../utils/constants'
@@ -100,7 +100,7 @@ export = createStorybookRule({
     // Public
     //----------------------------------------------------------------------
 
-    let invocationsWithoutProperContext: TSESTree.Node[] = [];
+    const invocationsWithoutProperContext: TSESTree.Node[] = []
 
     return {
       CallExpression(node: TSESTree.CallExpression) {

lib/rules/csf-component.ts

@@ -3,7 +3,7 @@
  * @author Yann Braga
  */
 
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 import { getMetaObjectExpression } from '../utils'
 import { CategoryId } from '../utils/constants'
 import { createStorybookRule } from '../utils/create-storybook-rule'

lib/rules/hierarchy-separator.ts

@@ -3,7 +3,7 @@
  * @author Yann Braga
  */
 
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 import { getMetaObjectExpression } from '../utils'
 import { isLiteral, isSpreadElement } from '../utils/ast'
 import { CategoryId } from '../utils/constants'

lib/rules/meta-inline-properties.ts

@@ -78,7 +78,7 @@ export = createStorybookRule({
         }
 
         const ruleProperties = ['title', 'args']
-        let dynamicProperties: TDynamicProperty[] = []
+        const dynamicProperties: TDynamicProperty[] = []
 
         const metaNodes = meta.properties.filter(
           (prop) => 'key' in prop && 'name' in prop.key && ruleProperties.includes(prop.key.name)

lib/rules/no-title-property-in-meta.ts

@@ -3,7 +3,7 @@
  * @author Yann Braga
  */
 
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 import { getMetaObjectExpression } from '../utils'
 import { CategoryId } from '../utils/constants'
 import { createStorybookRule } from '../utils/create-storybook-rule'

lib/rules/no-uninstalled-addons.ts

@@ -18,7 +18,7 @@ import {
   isVariableDeclarator,
   isVariableDeclaration,
 } from '../utils/ast'
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -66,7 +66,7 @@ export = createStorybookRule({
       return !!item
     }
 
-    type MergeDepsWithDevDeps = (packageJson: Record<string, string>) => string[]
+    type MergeDepsWithDevDeps = (packageJson: PackageJsonDependencies) => string[]
     const mergeDepsWithDevDeps: MergeDepsWithDevDeps = (packageJson) => {
       const deps = Object.keys(packageJson.dependencies || {})
       const devDeps = Object.keys(packageJson.devDependencies || {})
@@ -108,7 +108,12 @@ export = createStorybookRule({
       return result.length ? result : false
     }
 
-    type GetPackageJson = (path: string) => Record<string, any>
+    type PackageJsonDependencies = {
+      devDependencies: Record<string, string>
+      dependencies: Record<string, string>
+    }
+
+    type GetPackageJson = (path: string) => PackageJsonDependencies
 
     const getPackageJson: GetPackageJson = (path) => {
       const packageJson = {
@@ -168,7 +173,7 @@ export = createStorybookRule({
 
     function reportUninstalledAddons(addonsProp: TSESTree.ArrayExpression) {
       const packageJsonPath = resolve(packageJsonLocation || `./package.json`)
-      let packageJsonObject: Record<string, any>
+      let packageJsonObject: PackageJsonDependencies
       try {
         packageJsonObject = getPackageJson(packageJsonPath)
       } catch (e) {

lib/rules/prefer-pascal-case.ts

@@ -3,7 +3,7 @@
  * @author Yann Braga
  */
 
-import { ASTUtils, TSESTree } from "@typescript-eslint/utils";
+import { ASTUtils, TSESTree } from '@typescript-eslint/utils'
 import { IncludeExcludeOptions, isExportStory } from '@storybook/csf'
 
 import { getDescriptor, getMetaObjectExpression } from '../utils'
@@ -83,7 +83,7 @@ export = createStorybookRule({
                   const referenceCount = variable?.references?.length || 0
 
                   for (let i = 0; i < referenceCount; i++) {
-                    const ref = variable!.references[i]
+                    const ref = variable?.references[i]
                     if (ref && !ref.init) {
                       yield fixer.replaceTextRange(ref.identifier.range, pascal)
                     }
@@ -102,7 +102,7 @@ export = createStorybookRule({
 
     let meta
     let nonStoryExportsConfig: IncludeExcludeOptions
-    let namedExports: TSESTree.Identifier[] = []
+    const namedExports: TSESTree.Identifier[] = []
     let hasStoriesOfImport = false
 
     return {
@@ -119,7 +119,9 @@ export = createStorybookRule({
               excludeStories: getDescriptor(meta, 'excludeStories'),
               includeStories: getDescriptor(meta, 'includeStories'),
             }
-          } catch (err) {}
+          } catch (err) {
+            //
+          }
         }
       },
       ExportNamedDeclaration: function (node: TSESTree.ExportNamedDeclaration) {

lib/rules/story-exports.ts

@@ -3,7 +3,6 @@
  * @author Yann Braga
  */
 
-
 import { createStorybookRule } from '../utils/create-storybook-rule'
 import { CategoryId } from '../utils/constants'
 import {
@@ -14,7 +13,7 @@ import {
 } from '../utils'
 import { isImportDeclaration } from '../utils/ast'
 import { IncludeExcludeOptions } from '@storybook/csf'
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -54,7 +53,7 @@ export = createStorybookRule({
     let hasStoriesOfImport = false
     let nonStoryExportsConfig: IncludeExcludeOptions = {}
     let meta: TSESTree.ObjectExpression | null
-    let namedExports: TSESTree.Identifier[] = []
+    const namedExports: TSESTree.Identifier[] = []
 
     return {
       ImportSpecifier(node) {
@@ -70,7 +69,9 @@ export = createStorybookRule({
               excludeStories: getDescriptor(meta, 'excludeStories'),
               includeStories: getDescriptor(meta, 'includeStories'),
             }
-          } catch (err) {}
+          } catch (err) {
+            //
+          }
         }
       },
       ExportNamedDeclaration: function (node) {

lib/rules/use-storybook-expect.ts

@@ -7,7 +7,7 @@ import { CategoryId } from '../utils/constants'
 import { isIdentifier, isImportSpecifier } from '../utils/ast'
 
 import { createStorybookRule } from '../utils/create-storybook-rule'
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -56,7 +56,7 @@ export = createStorybookRule<TDefaultOptions, string>({
     //----------------------------------------------------------------------
 
     let isImportingFromStorybookExpect = false
-    let expectInvocations: TSESTree.Identifier[] = []
+    const expectInvocations: TSESTree.Identifier[] = []
 
     return {
       ImportDeclaration(node) {

lib/rules/use-storybook-testing-library.ts

@@ -6,7 +6,7 @@
 import { isImportDefaultSpecifier } from '../utils/ast'
 import { CategoryId } from '../utils/constants'
 import { createStorybookRule } from '../utils/create-storybook-rule'
-import { TSESTree } from "@typescript-eslint/utils";
+import { TSESTree } from '@typescript-eslint/utils'
 
 //------------------------------------------------------------------------------
 // Rule Definition

lib/types/index.ts

@@ -5,16 +5,9 @@ export type RuleModule = TSESLint.RuleModule<'', []> & {
   meta: { hasSuggestions?: boolean; docs: { recommendedConfig?: 'error' | 'warn' } }
 }
 
-type RecommendedConfig<TOptions extends readonly unknown[]> =
-  | TSESLint.RuleMetaDataDocs['recommended']
-  | [TSESLint.RuleMetaDataDocs['recommended'], ...TOptions]
-
 // These 2 types are copied from @typescript-eslint/experimental-utils' CreateRuleMeta
 // and modified to our needs
-export type StorybookRuleMetaDocs<TOptions extends readonly unknown[]> = Omit<
-  TSESLint.RuleMetaDataDocs,
-  'url'
-> & {
+export type StorybookRuleMetaDocs = Omit<TSESLint.RuleMetaDataDocs, 'url'> & {
   /**
    * Whether or not this rule should be excluded from linter config
    */
@@ -24,20 +17,21 @@ export type StorybookRuleMetaDocs<TOptions extends readonly unknown[]> = Omit<
    */
   categories?: CategoryId[]
 }
-export type StorybookRuleMeta<
-  TMessageIds extends string,
-  TOptions extends readonly unknown[]
-> = Omit<TSESLint.RuleMetaData<TMessageIds>, 'docs'> & {
-  docs: StorybookRuleMetaDocs<TOptions>
+
+export type StorybookRuleMeta<TMessageIds extends string> = Omit<
+  TSESLint.RuleMetaData<TMessageIds>,
+  'docs'
+> & {
+  docs: StorybookRuleMetaDocs
 }
 
-// const docs: StorybookRuleMetaDocs<any> = {
-//   recommended: true,
+// Comment out for testing purposes:
+// const docs: StorybookRuleMetaDocs = {
 //   description: 'bla',
 //   recommended: 'error',
 // }
 
-// const meta: StorybookRuleMeta<'someId', any> = {
+// const meta: StorybookRuleMeta<'someId'> = {
 //   messages: {
 //     someId: 'yea',
 //   },

lib/utils/create-storybook-rule.ts

@@ -13,7 +13,7 @@ export function createStorybookRule<
   ...remainingConfig
 }: Readonly<{
   name: string
-  meta: StorybookRuleMeta<TMessageIds, TOptions>
+  meta: StorybookRuleMeta<TMessageIds>
   defaultOptions: Readonly<TOptions>
   create: (
     context: Readonly<TSESLint.RuleContext<TMessageIds, TOptions>>,

lib/utils/index.ts

@@ -57,12 +57,11 @@ export const getDescriptor = (
         if (!['StringLiteral', 'Literal'].includes(t.type)) {
           throw new Error(`Unexpected descriptor element: ${t.type}`)
         }
-        // @ts-ignore
+        // @ts-expect-error TODO: t should be only StringLiteral or Literal, and the type is not resolving correctly
         return t.value
       })
     case 'Literal':
-    // TODO: Investigation needed. Type systems says, that "RegExpLiteral" does not exist
-    // @ts-ignore
+    // @ts-expect-error TODO: Investigation needed. Type systems says, that "RegExpLiteral" does not exist
     case 'RegExpLiteral':
       // @ts-ignore
       return property.value.value

package.json

@@ -56,6 +56,7 @@
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.6",
     "@types/requireindex": "^1.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.3.0",
     "auto": "^10.32.2",
     "eslint": "^7.1.0",

tools/update-rules-list.ts

@@ -30,7 +30,9 @@ const rulesList: TRulesList[] = Object.entries(rules)
       createRuleLink(rule.name),
       rule.meta.docs.description,
       rule.meta.fixable ? emojiKey.fixable : '',
-      `<ul>${rule.meta.docs.categories.map((c) => `<li>${c}</li>`).join('')}</ul>`,
+      rule.meta.docs.categories
+        ? `<ul>${rule.meta.docs.categories.map((c) => `<li>${c}</li>`).join('')}</ul>`
+        : '',
     ]
   })
 

tools/utils/categories.ts

@@ -18,27 +18,27 @@ const categoriesConfig: TCategoriesConfig = {
   },
 }
 
-export const categoryIds = Object.keys(categoriesConfig)
+export const categoryIds = Object.keys(categoriesConfig) as CategoryId[]
 
 for (const categoryId of categoryIds) {
   categoriesConfig[categoryId].rules = []
 
   for (const rule of rules) {
     const ruleCategories = rule.meta.docs.categories
     // Throw if rule does not have a category
-    if (!ruleCategories.length) {
+    if (!ruleCategories?.length) {
       throw new Error(`Rule "${rule.ruleId}" does not have any category.`)
     }
 
     if (ruleCategories.includes(categoryId)) {
-      categoriesConfig[categoryId].rules.push(rule)
+      categoriesConfig[categoryId].rules?.push(rule)
     }
   }
 }
 
 export const categories = categoryIds
   .map((categoryId) => {
-    if (!categoriesConfig[categoryId].rules.length) {
+    if (!categoriesConfig[categoryId].rules?.length) {
       throw new Error(
         `Category "${categoryId}" has no rules. Make sure that at least one rule is linked to this category.`
       )
@@ -47,11 +47,11 @@ export const categories = categoryIds
     return {
       categoryId,
       title: categoriesConfig[categoryId],
-      rules: categoriesConfig[categoryId].rules.filter((rule) => !rule.meta.deprecated),
+      rules: categoriesConfig[categoryId].rules?.filter((rule) => !rule.meta.deprecated) ?? [],
     }
   })
   .filter((category) => {
-    return category.rules.length >= 1
+    return (category.rules?.length ?? 0) >= 1
   })
 
 export type TCategory = typeof categories extends (infer TCat)[] ? TCat : never