@toptal/eslint-plugin-davinci

Davinci eslint rules

Installation

Do not install this plugin directly. To configure your linter rules, use @toptal/davinci-syntax where all rules in this plugin are included.

Usage

Use it by installing pnpm add @toptal/davinci in your project.

Supported Rules

• @toptal/davinci/consistent-component-props-types
• @toptal/davinci/consistent-data-testid
• @toptal/davinci/no-inline-css
• @toptal/davinci/no-mock-export-from-index
• @toptal/davinci/no-restricted-imports-monorepo
• @toptal/davinci/no-restricted-imports-private
• @toptal/davinci/no-denied-imports
• @toptal/davinci/no-full-module-mock
• @toptal/davinci/no-implicit-expectations
• @toptal/davinci/no-jest-snapshot
• @toptal/davinci/no-query-by-for-existence-assertions
• @toptal/davinci/no-as-prop-for-css-styled-components
• @toptal/davinci/no-forwarded-as-prop-for-non-styled-components
• @toptal/davinci/no-deprecated-props
• @toptal/davinci/no-package-self-imports
• @toptal/davinci/consistent-template-literals-file
• @toptal/davinci/consistent-changesets
• @toptal/davinci/no-nested-typography-p

@toptal/davinci/no-restricted-imports-monorepo

The rule restricts the cross package imports in monorepos. This package uses micromatch lib to resolve glob expressions.

Usage:

{
  "extends": "./node_modules/@toptal/davinci-syntax/src/configs/.eslintrc",
  "rules": {
    "@toptal/davinci/no-restricted-imports-monorepo": [
      "error",
      [
        // lib can't depend on app
        {
          "from": "libs/**",
          "to": "namespaces/*/apps/**"
        },
        {
          "from": "apps/**",
          "to": "apps/**",
          "except": ["apps/app/**"]
        },
        {
          "from": "namespaces/*/libs/**",
          "to": "namespaces/*/apps/**"
        },
        // root-level lib can't depend on lib from the namespace
        {
          "from": "libs/**",
          "to": "namespaces/*/libs/**"
        },
        // app can't depend on app
        {
          "from": "namespaces/*/apps/**",
          "to": "namespaces/*/apps/**"
        },
        // host can't be imported anywhere
        {
          "from": "!hosts/**",
          "to": "hosts/**"
        },
        // namespaces/facilities/libs may depends only on namespaces/facilities/libs/ or libs/
        {
          "from": "namespaces/facilities/libs/**",
          "to": "namespaces/!(facilities)/libs/**"
        }
      ]
    ]
  }
}

@toptal/davinci/no-as-prop-for-css-styled-components

According to https://styled-components.com/docs/api#forwardedas-prop styled-components should use forwardedAs prop instead of as prop to proxy as prop value to the component.

Example:

import { Container } from '@toptal/picasso'

<Container css={S.style} forwardedAs='span'>
  ...
</Container>

@toptal/davinci/no-forwarded-as-prop-for-non-styled-components

Opposite to @toptal/davinci/no-as-prop-for-css-styled-components rule - for non styled components we should not use forwardedAs prop, because it will not make any effect on them. as prop should be used instead.

@toptal/davinci/no-deprecated-props

The rule restricts the usage of deprecated props from components.

Usage:

{
  "rules": {
    "@toptal/davinci/no-deprecated-props": [
      "error",
      [
        {
          "componentName": "Comp1",
          "deprecatedProps": [
            {
              "name": "propA",
              "message": "propA is deprecated."
            }
          ]
        }
      ]
    ]
  }
}

@toptal/davinci/no-package-self-imports

The rule disallow self-imports of the package in order to use relative import paths inside a module.

The rule accepts two options:

• excludeFiles - array of glob whose files should skip validation
• excludePaths - array of glob whose import paths should skip validation

This package uses micromatch lib to resolve glob expressions.

Usage:

{
  "extends": "./node_modules/@toptal/davinci-syntax/src/configs/.eslintrc",
  "rules": {
    "@toptal/davinci/no-package-self-imports": [
      "error",
      {
        "excludeFiles": ["**/*.test.tsx", "**/*.example.tsx"],
        "excludePaths": ["@toptal/picasso/test-utils", "@toptal/picasso/**"]
      }
    ]
  }
}

@toptal/davinci/consistent-template-literals-file

The rule validates the filename based in the expressions set for template literals.

The rule accepts two options:

• templateMatchers - array of regex expressions whose will perform over all template literals in the file.
• filenameMatcher - the regex that will validate the name of the file.

Usage:

{
  "extends": "./node_modules/@toptal/davinci-syntax/src/configs/.eslintrc",
  "rules": {
    "@toptal/davinci/consistent-template-literals-file": [
      "error",
      {
        "templateMatchers": ["@rest"],
        "filenameMatcher": "\.rest\.tsx?"
      }
    ]
  }
}

@toptal/davinci/consistent-changesets

This rule validates markdown files generated by Changeset.

The validation ensures files comply to FX's changeset guidelines

Usage:

{
  "overrides": [
    {
      "files": [".changeset/*.md"],
      "parser": "eslint-plugin-markdownlint/parser",
      "rules": {
        "@toptal/davinci/consistent-changesets": "error"
      }
    }
  ]
}

Dot-folder folders are ignored by default, so we need to update .eslintignore as well.

!.changeset
.changeset/README.md

@toptal/davinci/no-nested-typography-p

This rule prevents nesting Typography components in a way that would result in a <p> HTML element inside another <p> HTML element, which is invalid HTML. The Typography component defaults to rendering a <p> tag. This can be changed using the as or forwardedAs props. The rule checks the effective tag rendered by nested Typography components.

Example of incorrect code:

import { Typography } from '@toptal/picasso'

// Both Typography components will render as <p>
<Typography>
  <Typography>This is a nested paragraph, which is not allowed.</Typography>
</Typography>

// Explicitly setting 'as' or 'forwardedAs' to "p"
<Typography as="p">
  <Typography forwardedAs="p">Nested paragraph.</Typography>
</Typography>

Example of correct code:

import { Typography } from '@toptal/picasso'

// Inner Typography is changed to a <span>
<Typography>
  <Typography as="span">This is a nested span, which is allowed.</Typography>
</Typography>

// Outer Typography is changed to a <div>
<Typography as="div">
  <Typography>This is a paragraph inside a div.</Typography>
</Typography>

<Typography forwardedAs="div">
  <Typography as="span">Nested content.</Typography>
</Typography>