eslint-plugin-storybook 0.4.1 → 0.5.2

package/CHANGELOG.md

@@ -1,3 +1,54 @@
+# v0.5.2 (Thu Dec 02 2021)
+
+#### 🐛 Bug Fix
+
+- fix: support jsx extension [#60](https://github.com/storybookjs/eslint-plugin-storybook/pull/60) ([@yannbf](https://github.com/yannbf))
+- Update README.md spelling error, one letter. [#50](https://github.com/storybookjs/eslint-plugin-storybook/pull/50) ([@daylennguyen](https://github.com/daylennguyen))
+
+#### Authors: 2
+
+- Daylen Nguyen ([@daylennguyen](https://github.com/daylennguyen))
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
+# v0.5.1 (Mon Nov 29 2021)
+
+#### 🐛 Bug Fix
+
+- Fix: define hasSuggestions to all fixable rules [#55](https://github.com/storybookjs/eslint-plugin-storybook/pull/55) ([@yannbf](https://github.com/yannbf))
+
+#### Authors: 1
+
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
+# v0.5.0 (Tue Nov 23 2021)
+
+#### 🚀 Enhancement
+
+- Rule: pass context when invoking play [#53](https://github.com/storybookjs/eslint-plugin-storybook/pull/53) ([@yannbf](https://github.com/yannbf))
+
+#### Authors: 1
+
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
+# v0.4.2 (Fri Nov 19 2021)
+
+#### 🐛 Bug Fix
+
+- Fix await interactions use cases [#51](https://github.com/storybookjs/eslint-plugin-storybook/pull/51) ([@yannbf](https://github.com/yannbf) [@shilman](https://github.com/shilman))
+
+#### Authors: 2
+
+- Michael Shilman ([@shilman](https://github.com/shilman))
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
 # v0.4.1 (Sat Nov 13 2021)
 
 #### 🐛 Bug Fix

package/README.md

@@ -72,12 +72,12 @@ Optionally, you can override, add or disable rules settings. You likely don't wa
   "overrides": [
     {
       // or whatever matches stories specified in .storybook/main.js
-      "files": ['*.stories.@(ts|tsx|js|mjs|cjs)'],
+      "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
       "rules": {
         // example of overriding a rule
         'storybook/hierarchy-separator': 'error',
         // example of disabling a rule
-        'storybook/defaul-exports': 'off',
+        'storybook/default-exports': 'off',
       }
     }
   ]
@@ -96,19 +96,20 @@ 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/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 hierachy 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 hierachy 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> |
 
 <!-- RULES-LIST:END -->
 

package/dist/configs/addon-interactions.js

@@ -3,10 +3,11 @@ module.exports = {
     plugins: ['storybook'],
     overrides: [
         {
-            files: ['*.stories.@(ts|tsx|js|mjs|cjs)', '*.story.@(ts|tsx|js|mjs|cjs)'],
+            files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
             rules: {
                 'import/no-anonymous-default-export': 'off',
                 'storybook/await-interactions': 'error',
+                'storybook/context-in-play-function': 'error',
                 'storybook/use-storybook-expect': 'error',
                 'storybook/use-storybook-testing-library': 'error',
             },

package/dist/configs/csf.js

@@ -3,7 +3,7 @@ module.exports = {
     plugins: ['storybook'],
     overrides: [
         {
-            files: ['*.stories.@(ts|tsx|js|mjs|cjs)', '*.story.@(ts|tsx|js|mjs|cjs)'],
+            files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
             rules: {
                 'import/no-anonymous-default-export': 'off',
                 'storybook/csf-component': 'warn',

package/dist/configs/recommended.js

@@ -3,10 +3,11 @@ module.exports = {
     plugins: ['storybook'],
     overrides: [
         {
-            files: ['*.stories.@(ts|tsx|js|mjs|cjs)', '*.story.@(ts|tsx|js|mjs|cjs)'],
+            files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
             rules: {
                 'import/no-anonymous-default-export': 'off',
                 'storybook/await-interactions': 'error',
+                'storybook/context-in-play-function': 'error',
                 'storybook/default-exports': 'error',
                 'storybook/hierarchy-separator': 'warn',
                 'storybook/no-redundant-story-name': 'warn',

package/dist/rules/await-interactions.js

@@ -21,6 +21,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
         },
         type: 'problem',
         fixable: 'code',
+        hasSuggestions: true,
         schema: [],
     },
     create(context) {
@@ -36,16 +37,27 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
             'waitForElement',
             'waitForDomChange',
             'userEvent',
+            'play',
         ];
         const getMethodThatShouldBeAwaited = (expr) => {
             const shouldAwait = (name) => {
                 return FUNCTIONS_TO_BE_AWAITED.includes(name) || name.startsWith('findBy');
             };
+            // When an expression is a return value it doesn't need to be awaited
+            if ((0, ast_1.isArrowFunctionExpression)(expr.parent) || (0, ast_1.isReturnStatement)(expr.parent)) {
+                return null;
+            }
             if ((0, ast_1.isMemberExpression)(expr.callee) &&
                 (0, ast_1.isIdentifier)(expr.callee.object) &&
                 shouldAwait(expr.callee.object.name)) {
                 return expr.callee.object;
             }
+            if ((0, ast_1.isTSNonNullExpression)(expr.callee) &&
+                (0, ast_1.isMemberExpression)(expr.callee.expression) &&
+                (0, ast_1.isIdentifier)(expr.callee.expression.property) &&
+                shouldAwait(expr.callee.expression.property.name)) {
+                return expr.callee.expression.property;
+            }
             if ((0, ast_1.isMemberExpression)(expr.callee) &&
                 (0, ast_1.isIdentifier)(expr.callee.property) &&
                 shouldAwait(expr.callee.property.name)) {

package/dist/rules/context-in-play-function.js

@@ -0,0 +1,84 @@
+"use strict";
+/**
+ * @fileoverview Pass a context object when invoking a play function
+ * @author Yann Braga
+ */
+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: 'context-in-play-function',
+    defaultOptions: [],
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Pass a context when invoking play function of another story',
+            categories: [constants_1.CategoryId.RECOMMENDED, constants_1.CategoryId.ADDON_INTERACTIONS],
+            recommended: 'error',
+        },
+        messages: {
+            passContextToPlayFunction: 'Pass a context when invoking play function of another story',
+        },
+        fixable: null,
+        schema: [],
+    },
+    create(context) {
+        // variables should be defined here
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        // any helper functions should go here or else delete this section
+        const isPlayFunctionFromAnotherStory = (expr) => {
+            if ((0, ast_1.isTSNonNullExpression)(expr.callee) &&
+                (0, ast_1.isMemberExpression)(expr.callee.expression) &&
+                (0, ast_1.isIdentifier)(expr.callee.expression.property) &&
+                expr.callee.expression.property.name === 'play') {
+                return true;
+            }
+            if ((0, ast_1.isMemberExpression)(expr.callee) &&
+                (0, ast_1.isIdentifier)(expr.callee.property) &&
+                expr.callee.property.name === 'play') {
+                return true;
+            }
+            return false;
+        };
+        // Expression passing an argument called context OR spreading a variable called context
+        const isNotPassingContextCorrectly = (expr) => {
+            const firstExpressionArgument = expr.arguments[0];
+            if (!firstExpressionArgument) {
+                return true;
+            }
+            if (expr.arguments.length === 1 &&
+                (0, ast_1.isIdentifier)(firstExpressionArgument) &&
+                firstExpressionArgument.name === 'context') {
+                return false;
+            }
+            if ((0, ast_1.isObjectExpression)(firstExpressionArgument) &&
+                firstExpressionArgument.properties.some((prop) => {
+                    return ((0, ast_1.isSpreadElement)(prop) && (0, ast_1.isIdentifier)(prop.argument) && prop.argument.name === 'context');
+                })) {
+                return false;
+            }
+            return true;
+        };
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+        let invocationsWithoutProperContext = [];
+        return {
+            CallExpression(node) {
+                if (isPlayFunctionFromAnotherStory(node) && isNotPassingContextCorrectly(node)) {
+                    invocationsWithoutProperContext.push(node);
+                }
+            },
+            'Program:exit': function () {
+                invocationsWithoutProperContext.forEach((node) => {
+                    context.report({
+                        node,
+                        messageId: 'passContextToPlayFunction',
+                    });
+                });
+            },
+        };
+    },
+});

package/dist/rules/default-exports.js

@@ -25,6 +25,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
             fixSuggestion: 'Add default export',
         },
         fixable: 'code',
+        hasSuggestions: true,
         schema: [],
     },
     create(context) {

package/dist/rules/hierarchy-separator.js

@@ -13,6 +13,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
     meta: {
         type: 'problem',
         fixable: 'code',
+        hasSuggestions: true,
         docs: {
             description: 'Deprecated hierachy separator in title property',
             categories: [constants_1.CategoryId.CSF, constants_1.CategoryId.RECOMMENDED],

package/dist/rules/no-redundant-story-name.js

@@ -12,6 +12,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
     meta: {
         type: 'suggestion',
         fixable: 'code',
+        hasSuggestions: true,
         docs: {
             description: 'A story should not have a redundant name property',
             categories: [constants_1.CategoryId.CSF, constants_1.CategoryId.RECOMMENDED],

package/dist/rules/no-title-property-in-meta.js

@@ -12,6 +12,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
     meta: {
         type: 'problem',
         fixable: 'code',
+        hasSuggestions: true,
         docs: {
             description: 'Do not define a title in meta',
             categories: [constants_1.CategoryId.CSF_STRICT],

package/dist/rules/prefer-pascal-case.js

@@ -15,6 +15,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
     meta: {
         type: 'suggestion',
         fixable: 'code',
+        hasSuggestions: true,
         docs: {
             description: 'Stories should use PascalCase',
             categories: [constants_1.CategoryId.RECOMMENDED],

package/dist/rules/story-exports.js

@@ -22,7 +22,7 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
             shouldHaveStoryExport: 'The file should have at least one story export',
             addStoryExport: 'Add a story export',
         },
-        fixable: 'code',
+        fixable: null,
         schema: [],
     },
     create(context) {

package/dist/utils/ast.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTSAsExpression = exports.isTSInterfaceDeclaration = exports.isTSTypeAliasDeclaration = exports.isProgram = exports.isFunctionExpression = exports.isReturnStatement = exports.isProperty = exports.isObjectPattern = exports.isObjectExpression = exports.isNewExpression = exports.isMemberExpression = exports.isLiteral = exports.isJSXAttribute = exports.isImportSpecifier = exports.isImportNamespaceSpecifier = exports.isImportDefaultSpecifier = exports.isImportDeclaration = exports.isSequenceExpression = exports.isAssignmentExpression = exports.isVariableDeclaration = exports.isExpressionStatement = exports.isCallExpression = exports.isBlockStatement = exports.isArrowFunctionExpression = exports.isArrayExpression = exports.isVariableDeclarator = exports.isIdentifier = exports.isAwaitExpression = exports.ASTUtils = void 0;
+exports.isTSNonNullExpression = exports.isTSAsExpression = exports.isTSInterfaceDeclaration = exports.isTSTypeAliasDeclaration = exports.isProgram = exports.isFunctionExpression = exports.isReturnStatement = exports.isSpreadElement = exports.isProperty = exports.isObjectPattern = exports.isObjectExpression = exports.isNewExpression = exports.isMemberExpression = exports.isLiteral = exports.isJSXAttribute = exports.isImportSpecifier = exports.isImportNamespaceSpecifier = exports.isImportDefaultSpecifier = exports.isImportDeclaration = exports.isSequenceExpression = exports.isAssignmentExpression = exports.isVariableDeclaration = exports.isExpressionStatement = exports.isCallExpression = exports.isBlockStatement = exports.isArrowFunctionExpression = exports.isArrayExpression = exports.isVariableDeclarator = exports.isIdentifier = exports.isAwaitExpression = exports.ASTUtils = void 0;
 const experimental_utils_1 = require("@typescript-eslint/experimental-utils");
 var experimental_utils_2 = require("@typescript-eslint/experimental-utils");
 Object.defineProperty(exports, "ASTUtils", { enumerable: true, get: function () { return experimental_utils_2.ASTUtils; } });
@@ -27,9 +27,11 @@ exports.isNewExpression = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.NewEx
 exports.isObjectExpression = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.ObjectExpression);
 exports.isObjectPattern = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.ObjectPattern);
 exports.isProperty = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.Property);
+exports.isSpreadElement = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.SpreadElement);
 exports.isReturnStatement = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.ReturnStatement);
 exports.isFunctionExpression = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.FunctionExpression);
 exports.isProgram = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.Program);
 exports.isTSTypeAliasDeclaration = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.TSTypeAliasDeclaration);
 exports.isTSInterfaceDeclaration = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.TSInterfaceDeclaration);
 exports.isTSAsExpression = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.TSAsExpression);
+exports.isTSNonNullExpression = isNodeOfType(experimental_utils_1.AST_NODE_TYPES.TSNonNullExpression);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "0.4.1",
+  "version": "0.5.2",
   "description": "Best practice rules for Storybook",
   "keywords": [
     "eslint",
@@ -71,7 +71,6 @@
     "ts-jest": "^27.0.7",
     "ts-migrate": "^0.1.26",
     "ts-node": "^10.4.0",
-    "tsc": "^2.0.3",
     "typescript": "^4.4.4"
   },
   "engines": {