eslint-plugin-storybook 0.5.13 → 0.6.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v0.6.0 (Sun Jul 10 2022)
+
+#### 🚀 Enhancement
+
+- feat(no-uninstalled-addons): add uninstalled plugin rule [#96](https://github.com/storybookjs/eslint-plugin-storybook/pull/96) ([@andrelas1](https://github.com/andrelas1) [@yannbf](https://github.com/yannbf))
+
+#### Authors: 2
+
+- Andre Luis Araujo Santos ([@andrelas1](https://github.com/andrelas1))
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
 # v0.5.13 (Fri Jun 24 2022)
 
 #### ⚠️ Pushed to `main`

package/README.md

@@ -48,6 +48,17 @@ npm install eslint-plugin-storybook --save-dev
 yarn add eslint-plugin-storybook --dev
 ```
 
+And finally, add this to your `.eslintignore` file:
+
+```
+// Inside your .eslintignore file
+!.storybook
+```
+
+This allows for this plugin to also lint your configuration files inside the .storybook folder, so that you always have a correct configuration and don't face any issues regarding mistyped addon names, for instance.
+
+> For more info on why this line is required in the .eslintignore file, check this [ESLint documentation](https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#:~:text=In%20addition%20to,contents%2C%20are%20ignored).
+
 ## Usage
 
 Use `.eslintrc.*` file to configure rules. See also: https://eslint.org/docs/user-guide/configuring
@@ -96,20 +107,21 @@ This plugin does not support MDX files.
 
 **Configurations**: csf, csf-strict, addon-interactions, recommended
 
-| Name                                                                                       | Description                                                 | 🔧  | Included in configurations                               |
-| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | --- | -------------------------------------------------------- |
-| [`storybook/await-interactions`](./docs/rules/await-interactions.md)                       | Interactions should be awaited                              | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
-| [`storybook/context-in-play-function`](./docs/rules/context-in-play-function.md)           | Pass a context when invoking play function of another story |     | <ul><li>recommended</li><li>addon-interactions</li></ul> |
-| [`storybook/csf-component`](./docs/rules/csf-component.md)                                 | The component property should be set                        |     | <ul><li>csf</li></ul>                                    |
-| [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                    | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property            | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/no-redundant-story-name`](./docs/rules/no-redundant-story-name.md)             | A story should not have a redundant name property           | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used              |     | <ul><li>csf-strict</li></ul>                             |
-| [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                               | 🔧  | <ul><li>csf-strict</li></ul>                             |
-| [`storybook/prefer-pascal-case`](./docs/rules/prefer-pascal-case.md)                       | Stories should use PascalCase                               | 🔧  | <ul><li>recommended</li></ul>                            |
-| [`storybook/story-exports`](./docs/rules/story-exports.md)                                 | A story file must contain at least one story export         |     | <ul><li>recommended</li><li>csf</li></ul>                |
-| [`storybook/use-storybook-expect`](./docs/rules/use-storybook-expect.md)                   | Use expect from `@storybook/jest`                           | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
-| [`storybook/use-storybook-testing-library`](./docs/rules/use-storybook-testing-library.md) | Do not use testing-library directly on stories              | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
+| Name                                                                                       | Description                                                                                                                   | 🔧  | Included in configurations                               |
+| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------- |
+| [`storybook/await-interactions`](./docs/rules/await-interactions.md)                       | Interactions should be awaited                                                                                                | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
+| [`storybook/context-in-play-function`](./docs/rules/context-in-play-function.md)           | Pass a context when invoking play function of another story                                                                   |     | <ul><li>recommended</li><li>addon-interactions</li></ul> |
+| [`storybook/csf-component`](./docs/rules/csf-component.md)                                 | The component property should be set                                                                                          |     | <ul><li>csf</li></ul>                                    |
+| [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
+| [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
+| [`storybook/no-redundant-story-name`](./docs/rules/no-redundant-story-name.md)             | A story should not have a redundant name property                                                                             | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
+| [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used                                                                                |     | <ul><li>csf-strict</li></ul>                             |
+| [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                                                                                                 | 🔧  | <ul><li>csf-strict</li></ul>                             |
+| [`storybook/no-uninstalled-addons`](./docs/rules/no-uninstalled-addons.md)                 | This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. |     | <ul><li>recommended</li></ul>                            |
+| [`storybook/prefer-pascal-case`](./docs/rules/prefer-pascal-case.md)                       | Stories should use PascalCase                                                                                                 | 🔧  | <ul><li>recommended</li></ul>                            |
+| [`storybook/story-exports`](./docs/rules/story-exports.md)                                 | A story file must contain at least one story export                                                                           |     | <ul><li>recommended</li><li>csf</li></ul>                |
+| [`storybook/use-storybook-expect`](./docs/rules/use-storybook-expect.md)                   | Use expect from `@storybook/jest`                                                                                             | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
+| [`storybook/use-storybook-testing-library`](./docs/rules/use-storybook-testing-library.md) | Do not use testing-library directly on stories                                                                                | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
 
 <!-- RULES-LIST:END -->
 

package/dist/configs/addon-interactions.js

@@ -12,5 +12,11 @@ module.exports = {
                 'storybook/use-storybook-testing-library': 'error',
             },
         },
+        {
+            files: ['main.@(js|cjs|mjs|ts)'],
+            rules: {
+                'storybook/no-uninstalled-addons': 'error',
+            },
+        },
     ],
 };

package/dist/configs/csf.js

@@ -13,5 +13,11 @@ module.exports = {
                 'storybook/story-exports': 'error',
             },
         },
+        {
+            files: ['main.@(js|cjs|mjs|ts)'],
+            rules: {
+                'storybook/no-uninstalled-addons': 'error',
+            },
+        },
     ],
 };

package/dist/configs/recommended.js

@@ -17,5 +17,11 @@ module.exports = {
                 'storybook/use-storybook-testing-library': 'error',
             },
         },
+        {
+            files: ['main.@(js|cjs|mjs|ts)'],
+            rules: {
+                'storybook/no-uninstalled-addons': 'error',
+            },
+        },
     ],
 };

package/dist/rules/no-uninstalled-addons.js

@@ -0,0 +1,149 @@
+"use strict";
+/**
+ * @fileoverview This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.
+ * @author Andre "andrelas1" Santos
+ */
+const fs_1 = require("fs");
+const path_1 = require("path");
+const create_storybook_rule_1 = require("../utils/create-storybook-rule");
+const constants_1 = require("../utils/constants");
+const ast_1 = require("../utils/ast");
+module.exports = (0, create_storybook_rule_1.createStorybookRule)({
+    name: 'no-uninstalled-addons',
+    defaultOptions: [],
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.',
+            categories: [constants_1.CategoryId.RECOMMENDED],
+            recommended: 'error', // or 'error'
+        },
+        messages: {
+            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
+        //----------------------------------------------------------------------
+        // this will not only exclude the nullables but it will also exclude the type undefined from them, so that TS does not complain
+        function excludeNullable(item) {
+            return !!item;
+        }
+        const mergeDepsWithDevDeps = (packageJson) => {
+            const deps = Object.keys(packageJson.dependencies || {});
+            const devDeps = Object.keys(packageJson.devDependencies || {});
+            return [...deps, ...devDeps];
+        };
+        const isAddonInstalled = (addon, installedAddons) => {
+            // cleanup /register or /preset from registered addon
+            const addonName = addon.replace(/\/register$/, '').replace(/\/preset$/, '');
+            return installedAddons.includes(addonName);
+        };
+        const areThereAddonsNotInstalled = (addons, installedSbAddons) => {
+            const result = addons
+                .filter((addon) => !isAddonInstalled(addon, installedSbAddons))
+                .map((addon) => ({ name: addon }));
+            return result.length ? result : false;
+        };
+        const getPackageJson = (path) => {
+            const packageJson = {
+                devDependencies: {},
+                dependencies: {},
+            };
+            try {
+                const file = (0, fs_1.readFileSync)(path, 'utf8');
+                const parsedFile = JSON.parse(file);
+                packageJson.dependencies = parsedFile.dependencies || {};
+                packageJson.devDependencies = parsedFile.devDependencies || {};
+            }
+            catch (e) {
+                throw new Error('Could not fetch package.json - it is probably not in the same directory as the .storybook folder');
+            }
+            return packageJson;
+        };
+        const extractAllAddonsFromTheStorybookConfig = (addonsExpression) => {
+            if (addonsExpression === null || addonsExpression === void 0 ? void 0 : addonsExpression.elements) {
+                // extract all nodes taht are a string inside the addons array
+                const nodesWithAddons = addonsExpression.elements
+                    .map((elem) => ((0, ast_1.isLiteral)(elem) ? { value: elem.value, node: elem } : undefined))
+                    .filter(excludeNullable);
+                const listOfAddonsInString = nodesWithAddons.map((elem) => elem.value);
+                // extract all nodes that are an object inside the addons array
+                const nodesWithAddonsInObj = addonsExpression.elements
+                    .map((elem) => ((0, ast_1.isObjectExpression)(elem) ? elem : { properties: [] }))
+                    .map((elem) => {
+                    const property = elem.properties.find((prop) => (0, ast_1.isProperty)(prop) && (0, ast_1.isIdentifier)(prop.key) && prop.key.name === 'name');
+                    return (0, ast_1.isLiteral)(property === null || property === void 0 ? void 0 : property.value)
+                        ? { value: property.value.value, node: property.value }
+                        : undefined;
+                })
+                    .filter(excludeNullable);
+                const listOfAddonsInObj = nodesWithAddonsInObj.map((elem) => elem.value);
+                const listOfAddons = [...listOfAddonsInString, ...listOfAddonsInObj];
+                const listOfAddonElements = [...nodesWithAddons, ...nodesWithAddonsInObj];
+                return { listOfAddons, listOfAddonElements };
+            }
+            return { listOfAddons: [], listOfAddonElements: [] };
+        };
+        function reportUninstalledAddons(addonsProp) {
+            // 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
+                ? (0, path_1.resolve)(context.getPhysicalFilename(), '../../')
+                : './';
+            let packageJsonObject;
+            try {
+                packageJsonObject = getPackageJson(`${projectRoot}/package.json`);
+            }
+            catch (e) {
+                // if we cannot find the package.json, we cannot check if the addons are installed
+                console.error(e);
+                return;
+            }
+            const depsAndDevDeps = mergeDepsWithDevDeps(packageJsonObject);
+            const { listOfAddons, listOfAddonElements } = extractAllAddonsFromTheStorybookConfig(addonsProp);
+            const result = areThereAddonsNotInstalled(listOfAddons, depsAndDevDeps);
+            if (result) {
+                const elemsWithErrors = listOfAddonElements.filter((elem) => !!result.find((addon) => addon.name === elem.value));
+                elemsWithErrors.forEach((elem) => {
+                    context.report({
+                        node: elem.node,
+                        messageId: 'addonIsNotInstalled',
+                        data: { addonName: elem.value },
+                    });
+                });
+            }
+        }
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        return {
+            AssignmentExpression: function (node) {
+                if ((0, ast_1.isObjectExpression)(node.right)) {
+                    const addonsProp = node.right.properties.find((prop) => (0, ast_1.isProperty)(prop) && (0, ast_1.isIdentifier)(prop.key) && prop.key.name === 'addons');
+                    if (addonsProp && addonsProp.value && (0, ast_1.isArrayExpression)(addonsProp.value)) {
+                        reportUninstalledAddons(addonsProp.value);
+                    }
+                }
+            },
+            ExportDefaultDeclaration: function (node) {
+                if ((0, ast_1.isObjectExpression)(node.declaration)) {
+                    const addonsProp = node.declaration.properties.find((prop) => (0, ast_1.isProperty)(prop) && (0, ast_1.isIdentifier)(prop.key) && prop.key.name === 'addons');
+                    if (addonsProp && addonsProp.value && (0, ast_1.isArrayExpression)(addonsProp.value)) {
+                        reportUninstalledAddons(addonsProp.value);
+                    }
+                }
+            },
+            ExportNamedDeclaration: function (node) {
+                const addonsProp = (0, ast_1.isVariableDeclaration)(node.declaration) &&
+                    node.declaration.declarations.find((decl) => (0, ast_1.isVariableDeclarator)(decl) && (0, ast_1.isIdentifier)(decl.id) && decl.id.name === 'addons');
+                if (addonsProp && (0, ast_1.isArrayExpression)(addonsProp.init)) {
+                    reportUninstalledAddons(addonsProp.init);
+                }
+            },
+        };
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "0.5.13",
+  "version": "0.6.0",
   "description": "Best practice rules for Storybook",
   "keywords": [
     "eslint",