eslint-plugin-storybook 0.4.2 → 0.5.3

package/CHANGELOG.md

@@ -1,3 +1,54 @@
+# v0.5.3 (Fri Dec 03 2021)
+
+#### 🐛 Bug Fix
+
+- extend story-exports rule to support export lists, fixes #57 [#58](https://github.com/storybookjs/eslint-plugin-storybook/pull/58) (stephen@Stephens-MacBook-Air.local [@yannbf](https://github.com/yannbf))
+
+#### Authors: 2
+
+- Stephen Marsh ([@stephenhmarsh](https://github.com/stephenhmarsh))
+- Yann Braga ([@yannbf](https://github.com/yannbf))
+
+---
+
+# 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

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) {

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

@@ -3,11 +3,9 @@
  * @fileoverview A story file must contain at least one story export
  * @author Yann Braga
  */
-const csf_1 = require("@storybook/csf");
 const create_storybook_rule_1 = require("../utils/create-storybook-rule");
 const constants_1 = require("../utils/constants");
 const utils_1 = require("../utils");
-const ast_1 = require("../utils/ast");
 module.exports = (0, create_storybook_rule_1.createStorybookRule)({
     name: 'story-exports',
     defaultOptions: [],
@@ -22,7 +20,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) {
@@ -30,7 +28,6 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
         //----------------------------------------------------------------------
         // Helpers
         //----------------------------------------------------------------------
-        const isValidStoryExport = (node) => (0, csf_1.isExportStory)(node.name, nonStoryExportsConfig) && node.name !== '__namedExportsOrder';
         //----------------------------------------------------------------------
         // Public
         //----------------------------------------------------------------------
@@ -54,22 +51,13 @@ module.exports = (0, create_storybook_rule_1.createStorybookRule)({
                 }
             },
             ExportNamedDeclaration: function (node) {
-                // if there are specifiers, node.declaration should be null
-                if (!node.declaration)
-                    return;
-                const decl = node.declaration;
-                if ((0, ast_1.isVariableDeclaration)(decl)) {
-                    const { id } = decl.declarations[0];
-                    if ((0, ast_1.isIdentifier)(id)) {
-                        namedExports.push(id);
-                    }
-                }
+                namedExports.push(...(0, utils_1.getAllNamedExports)(node));
             },
             'Program:exit': function (node) {
                 if (hasStoriesOfImport || !meta) {
                     return;
                 }
-                const storyExports = namedExports.filter(isValidStoryExport);
+                const storyExports = namedExports.filter((exp) => (0, utils_1.isValidStoryExport)(exp, nonStoryExportsConfig));
                 if (storyExports.length) {
                     return;
                 }

package/dist/utils/ast.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTSNonNullExpression = 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,6 +27,7 @@ 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);

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDescriptor = exports.getMetaObjectExpression = exports.isPlayFunction = exports.docsUrl = void 0;
+exports.getAllNamedExports = exports.isValidStoryExport = exports.getDescriptor = exports.getMetaObjectExpression = exports.isPlayFunction = exports.docsUrl = void 0;
+const csf_1 = require("@storybook/csf");
 const ast_utils_1 = require("@typescript-eslint/experimental-utils/dist/ast-utils");
 const ast_1 = require("./ast");
 const docsUrl = (ruleName) => `https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/${ruleName}.md`;
@@ -47,3 +48,26 @@ const getDescriptor = (metaDeclaration, propertyName) => {
     }
 };
 exports.getDescriptor = getDescriptor;
+const isValidStoryExport = (node, nonStoryExportsConfig) => (0, csf_1.isExportStory)(node.name, nonStoryExportsConfig) && node.name !== '__namedExportsOrder';
+exports.isValidStoryExport = isValidStoryExport;
+const getAllNamedExports = (node) => {
+    // e.g. export { MyStory }
+    if (!node.declaration && node.specifiers) {
+        return node.specifiers.reduce((acc, specifier) => {
+            if ((0, ast_1.isIdentifier)(specifier.exported)) {
+                acc.push(specifier.exported);
+            }
+            return acc;
+        }, []);
+    }
+    const decl = node.declaration;
+    if ((0, ast_1.isVariableDeclaration)(decl)) {
+        const { id } = decl.declarations[0];
+        // e.g. export const MyStory
+        if ((0, ast_1.isIdentifier)(id)) {
+            return [id];
+        }
+    }
+    return [];
+};
+exports.getAllNamedExports = getAllNamedExports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "0.4.2",
+  "version": "0.5.3",
   "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": {