Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(no-uninstalled-addons): add uninstalled plugin rule
- Loading branch information
Showing
8 changed files
with
508 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| # no-uninstalled-addons | ||
|
|
||
| <!-- RULE-CATEGORIES:START --> | ||
|
|
||
| **Included in these configurations**: <ul><li>recommended</li></ul> | ||
|
|
||
| <!-- RULE-CATEGORIES:END --> | ||
|
|
||
| ## Rule Details | ||
|
|
||
| This rule checks if all addons in the storybook main.js file are properly listed in the root package.json of the npm project. | ||
|
|
||
| For instance, if the `@storybook/addon-links` is in the `.storybook/main.js` but is not listed in the `package.json` of the project, this rule will notify the user to add the addon to the package.json and install it. | ||
|
|
||
| As an important side note, this rule will check for the package.json in the same level of the .storybook folder. | ||
|
|
||
| Examples of **incorrect** code for this rule: | ||
|
|
||
| ```js | ||
| // in .storybook/main.js | ||
| module.exports = { | ||
| addons: [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/addon-interactions', | ||
| ], | ||
| } | ||
|
|
||
| // package.json | ||
| { | ||
| "devDependencies": { | ||
| "@storybook/addon-links": "0.0.1", | ||
| "@storybook/addon-essentials": "0.0.1", | ||
| ' | ||
| } | ||
| } | ||
| ``` | ||
| Examples of **correct** code for this rule: | ||
| ```js | ||
| // in .storybook/main.js | ||
| module.exports = { | ||
| addons: [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/addon-interactions', | ||
| ], | ||
| } | ||
| // package.json | ||
| { | ||
| "devDependencies": { | ||
| "@storybook/addon-links": "0.0.1", | ||
| "@storybook/addon-essentials": "0.0.1", | ||
| "@storybook/addon-interactions": "0.0.1" | ||
| } | ||
| } | ||
| ``` | ||
| ### Options | ||
| TODO: check if the package.json location should be an option. | ||
| ## When Not To Use It | ||
| This rule is very handy to be used because if the user tries to start storybook but has forgotten to install the plugin, storybook will throw very weird errors that will give no clue to the user to what's going wrong. To prevent that, this rule should be always on. | ||
|
|
||
| ## Further Reading | ||
|
|
||
| Check the issue in GitHub: https://github.com/storybookjs/eslint-plugin-storybook/issues/95 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| /** | ||
| * @fileoverview This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. | ||
| * @author Andre Santos | ||
| */ | ||
|
|
||
| import { readFileSync } from 'fs' | ||
| import { resolve } from 'path' | ||
|
|
||
| import { createStorybookRule } from '../utils/create-storybook-rule' | ||
| import { CategoryId } from '../utils/constants' | ||
| import { | ||
| isObjectExpression, | ||
| isProperty, | ||
| isIdentifier, | ||
| isArrayExpression, | ||
| isLiteral, | ||
| } from '../utils/ast' | ||
| import { Property } from '@typescript-eslint/types/dist/ast-spec' | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| export = createStorybookRule({ | ||
| name: 'no-uninstalled-addons', | ||
| defaultOptions: [], | ||
| meta: { | ||
| type: 'problem', // `problem`, `suggestion`, or `layout` | ||
| docs: { | ||
| description: | ||
| 'This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.', | ||
| // Add the categories that suit this rule. | ||
| categories: [CategoryId.RECOMMENDED], | ||
| recommended: 'error', // or 'error' | ||
| }, | ||
| messages: { | ||
| // find out how to make this message dynamic | ||
| addonIsNotInstalled: `The {{ addonName }} is not installed. Did you forget to install it?`, | ||
| }, | ||
|
|
||
| schema: [], // Add a schema if the rule has options. Otherwise remove this | ||
| }, | ||
|
|
||
| create(context) { | ||
| // variables should be defined here | ||
|
|
||
| //---------------------------------------------------------------------- | ||
| // Helpers | ||
| //---------------------------------------------------------------------- | ||
|
|
||
| type MergeDepsWithDevDeps = (packageJson: Record<string, string>) => string[] | ||
| const mergeDepsWithDevDeps: MergeDepsWithDevDeps = (packageJson) => { | ||
| const deps = Object.keys(packageJson.dependencies || {}) | ||
| const devDeps = Object.keys(packageJson.devDependencies || {}) | ||
| return [...deps, ...devDeps] | ||
| } | ||
|
|
||
| type IsAddonInstalled = (addon: string, installedAddons: string[]) => boolean | ||
| const isAddonInstalled: IsAddonInstalled = (addon, installedAddons) => { | ||
| return installedAddons.includes(addon) | ||
| } | ||
|
|
||
| type AreThereAddonsNotInstalled = ( | ||
| addons: string[], | ||
| installedSbAddons: string[] | ||
| ) => false | { name: string }[] | ||
| const areThereAddonsNotInstalled: AreThereAddonsNotInstalled = (addons, installedSbAddons) => { | ||
| const result = addons | ||
| .filter((addon) => !isAddonInstalled(addon, installedSbAddons)) | ||
| .map((addon) => ({ name: addon })) | ||
| return result.length ? result : false | ||
| } | ||
|
|
||
| type GetPackageJson = (path: string) => Record<string, any> | ||
|
|
||
| const getPackageJson: GetPackageJson = (path) => { | ||
| const packageJson = { | ||
| devDependencies: {}, | ||
| dependencies: {}, | ||
| } | ||
| try { | ||
| const file = readFileSync(path, 'utf8') | ||
| const parsedFile = JSON.parse(file) | ||
| packageJson.dependencies = parsedFile.dependencies || {} | ||
| packageJson.devDependencies = parsedFile.devDependencies || {} | ||
| } catch (e) { | ||
| console.error( | ||
| 'Could not fetch package.json - it is probably not in the same directory as the .storybook folder' | ||
| ) | ||
| } | ||
|
|
||
| return packageJson | ||
| } | ||
|
|
||
| //---------------------------------------------------------------------- | ||
| // Public | ||
| //---------------------------------------------------------------------- | ||
|
|
||
| return { | ||
| AssignmentExpression: function (node) { | ||
| // when this is running for .storybook/main.js, we get the path to the folder which contains the package.json of the | ||
| // project. This will be handy for monorepos that may be running ESLint in a node process in another folder. | ||
| const projectRoot = context.getPhysicalFilename | ||
| ? resolve(context.getPhysicalFilename(), '../../') | ||
| : './' | ||
|
|
||
| try { | ||
| } catch (e) {} | ||
| const packageJsonObject = getPackageJson(`${projectRoot}/package.json`) | ||
| const depsAndDevDeps = mergeDepsWithDevDeps(packageJsonObject) | ||
|
|
||
| if (isObjectExpression(node.right)) { | ||
| const addonsProp = node.right.properties.find( | ||
| (prop) => isProperty(prop) && isIdentifier(prop.key) && prop.key.name === 'addons' | ||
| ) as Property | undefined | ||
|
|
||
| if (addonsProp) { | ||
| if (isArrayExpression(addonsProp.value)) { | ||
| // extract all nodes taht are a string inside the addons array | ||
| const listOfAddonsInString: string[] = addonsProp.value.elements | ||
| .map((elem) => (isLiteral(elem) ? elem.value : undefined)) | ||
| .filter((elem) => !!elem) as string[] | ||
|
|
||
| // extract all nodes that are an object inside the addons array | ||
| const listOfAddonsInObj = addonsProp.value.elements | ||
| .map((elem) => (isObjectExpression(elem) ? elem : { properties: [] })) | ||
| .map((elem) => { | ||
| const property: Property = elem.properties.find( | ||
| (prop) => isProperty(prop) && isIdentifier(prop.key) && prop.key.name === 'name' | ||
| ) as Property | ||
| return isLiteral(property?.value) ? property.value.value : '' | ||
| }) | ||
| .filter((elem) => !!elem) as string[] | ||
|
|
||
| const listOfAddons = [...listOfAddonsInString, ...listOfAddonsInObj] | ||
|
|
||
| const result = areThereAddonsNotInstalled(listOfAddons, depsAndDevDeps) | ||
|
|
||
| result | ||
| ? context.report({ | ||
| node, | ||
| messageId: 'addonIsNotInstalled', | ||
| data: { addonName: result[0].name }, | ||
| }) | ||
| : null | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| } | ||
| }, | ||
| }) | ||
|
|
||
| /** | ||
| * Notes about this new feature | ||
| * | ||
| * | ||
| * The issues that this rule is trying to solve are: | ||
| * 1 - Addon is listed in the main.js file of Storybook, but is not installed | ||
| * 2 - Addon is listed in the main.js file of Storybook, but it contains a typo in its name | ||
| * | ||
| * Obs: | ||
| * | ||
| * addons: [ | ||
| * // usual way to register addons | ||
| * '@storybook/addon-actions', | ||
| * { | ||
| * | ||
| * // alternative way to register addons | ||
| * name: '@storybook/addon-actions', | ||
| * options: { | ||
| * docs: false | ||
| * } | ||
| * ] | ||
| * | ||
| * Not every addon is starts with @storybook/addon or storybook-addon. But most of them do and this is a recommended way to register them. | ||
| * | ||
| * The solution: | ||
| * | ||
| * - When the addon is listed but not installed or there is a typo but it is not prefixed in the recommended way: | ||
| * The addon ${addonName} is not installed. Did you forget to install it? | ||
| * | ||
| * - When the addon is listed but has a typo and it is prefixed in the recommended way: | ||
| * The addon ${addonName} is not installed. Did you mean CORRECT_NAME instead of NAME_WITH_TYPO? | ||
| */ |
Oops, something went wrong.