eslint-plugin-atomic-redesign

ESLint rules for Atomic ReDesigned projects.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-atomic-redesign:

$ npm install eslint-plugin-atomic-redesign --save-dev

Usage

Add atomic-redesign to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["atomic-redesign"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "atomic-redesign/import-dependencies": 2,
    "atomic-redesign/deny-local-state": 2,
    "atomic-redesign/deny-global-state": 2,
    "atomic-redesign/must-use-local-state": 2,
    "atomic-redesign/must-use-global-state": 2
  }
}

Supported Rules

This plugin currently supports 5 rules. Each rule receives one object as options.

Example:

"atomic-redesign/rule-name": [
  2,
  {
    PropertyName: "value",
    PropertyName: "value",
    ...
  },
]

Rule: import-dependencies

Detects each component importing a higher level component than itself.

Examples of incorrect code for this rule:

// at src/components/atoms/foo/index.tsx
import Bar from '../../molecules/bar/index.tsx';

Examples of correct code for this rule:

// at src/components/molecules/bar/index.tsx
import Foo from '../../atoms/foo/index.tsx';

Options

Example:

"atomic-redesign/import-dependencies": [
  2,
  {
    includeSourceFilePatterns: {
      atoms: ".*\\/atoms\\/.*index.tsx" // Atoms components is written in `*atoms/*index.tsx`.
      // Other properties have default values.
    },
    excludeSourceFilePatterns: [
      ".*\\.foo.*", // Ignore filenames containing `.foo`
    ],
    // Other properties have default values.
  },

| Property Name | Description | Default Value | | :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- | | includeSourceFilePatterns | A set of each component type (atoms and molecules) and a RegExp pattern. If the file path matches each pattern, the rule determines that the file contains components of that type and checks the import statement. | here | | excludeSourceFilePatterns | An array of RegExp patterns. File paths that match any pattern are excluded from the check. | here | | importPatterns | A set of each component type (atoms and molecules) and a RegExp pattern. If the path portion of the import statement matches these patterns, the rule determines that it is loading the corresponding type of component. | here |

Rule: deny-local-state

Detects that Atoms have Local States (setState, useState, useReducer, etc.).

Examples of incorrect code for this rule:

// at src/components/atoms/foo/index.tsx
const [val, setVal] = useState(0);

Examples of correct code for this rule:

// at src/components/molecules/bar/index.tsx
const [val, setVal] = useState(0);

Options

| Property Name | Description | Default Value | | :------------------------ | :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | | includeSourceFilePatterns | An array of RegExp patterns that match the name of the file that must not contain local state. | here | | excludeSourceFilePatterns | An array of RegExp patterns. File paths that match any pattern are excluded from the check. | here | | denyFunctionNames | An array of function names that are considered to be using the local state. | here |

Rule: deny-global-state

Detects that atoms and molecules have Global States (fetch, useContext, useSWR, useSelector, etc.).

Examples of incorrect code for this rule:

// at src/components/molecules/foo/index.tsx
const [val, setVal] = useContext(0);

Examples of correct code for this rule:

// at src/components/Organisms/bar/index.tsx
const [val, setVal] = useContext(0);

Options

| Property Name | Description | Default Value | | :------------------------ | :---------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------- | | includeSourceFilePatterns | An array of RegExp patterns that match the name of the file that must not contain global state. | here | | excludeSourceFilePatterns | An array of RegExp patterns. File paths that match any pattern are excluded from the check. | here | | denyFunctionNames | An array of function names that are considered to be using the local state. | here |

Rule: must-use-local-state

Detects that Local State (setState, useState, useReducer, etc.) is not used in Molecules.

The plugin will check if source codes in each Molecules directory contain the Local State keywords, and if it doesn't contain any keywords, the plugin will throw an error in all source codes in the directory.

Do not use eslint's --cache option with this plugin. This is because the errors in each file may be resolved by other files.

Examples of incorrect code for this rule:

// at src/components/molecules/foo/index.tsx
// no Local State keywords.

Examples of correct code for this rule:

// at src/components/molecules/bar/index.tsx
const [val, setVal] = useState(0);

Options

| Property Name | Description | Default Value | | :-------------------- | :------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- | | checkDirectorys | An array of Glob patterns. The rule treats each directory that matches this pattern as a Molecules component. | here | | checkFilesInDirectory | An array of Glob patterns. The rule only checks files that match this pattern. | here | | excludeFilePatterns | An array of RegExp patterns. Files with paths that match this pattern are excluded from the check. | here | | keywords | An array of strings that are considered to be using Local State. | here |

Rule: must-use-global-state

Detects that Global State（fetch, useContext, useSWR, useSelector, etc.) is not used in Organisms.

The plugin will check if source codes in each Organisms directory contain the Global State keywords, and if it doesn't contain any keywords, the plugin will throw an error in all source codes in the directory.

Do not use eslint's --cache option with this plugin. This is because the errors in each file may be resolved by other files.

Examples of incorrect code for this rule:

// at src/components/organisms/foo/index.tsx
// no Global State keywords.

Examples of correct code for this rule:

// at src/components/organisms/bar/index.tsx
const [val, setVal] = useContext(0);

Options

| Property Name | Description | Default Value | | :-------------------- | :------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------- | | checkDirectorys | An array of Glob patterns. The rule treats each directory that matches this pattern as a Organisms component. | here | | checkFilesInDirectory | An array of Glob patterns. The rule only checks files that match this pattern. | here | | excludeFilePatterns | An array of RegExp patterns. Files with paths that match this pattern are excluded from the check. | here | | keywords | An array of strings that are considered to be using Global State. | here |

Licence

MIT