feat(eslint-config-carbon): add storybook config (#10335)

* feat(eslint-config-carbon): add storybook config

* chore(config): disable title rule

* chore(storybook): enable CSF3 preview

* feat(eslint-config): set no-redundant-names rule to error

* chore(react): update stories based on lint rules pt 1

* chore(react): update stories based on lint rules pt 2

* chore(react): update stories based on lint rules pt 3

* chore(react): update stories based on lint rules pt 4

* chore(react): add eslint-ignore for v11 story

config/eslint-config-carbon/internal.js

@@ -12,5 +12,6 @@ module.exports = {
     require.resolve('./base'),
     require.resolve('./plugins/jest'),
     require.resolve('./plugins/react'),
+    require.resolve('./plugins/storybook'),
   ],
 };

config/eslint-config-carbon/package.json

@@ -44,6 +44,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.5",
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {

config/eslint-config-carbon/plugins/storybook.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * ESLint configuration for eslint-plugin-storybook
+ *
+ * @see https://github.com/storybookjs/eslint-plugin-storybook
+ */
+module.exports = {
+  plugins: ['storybook'],
+  overrides: [
+    {
+      files: ['*.stories.js', '*-story.js'],
+      extends: ['plugin:storybook/recommended'],
+      rules: {
+        // Interactions should be awaited
+        'storybook/await-interactions': 'error',
+
+        // Pass a context when invoking play function of another story
+        'storybook/context-in-play-function': 'error',
+
+        // The component property should be set
+        'storybook/csf-component': 'error',
+
+        // Story files should have a default export
+        'storybook/default-exports': 'error',
+
+        // Deprecated hierachy separator in title property
+        'storybook/hierarchy-separator': 'error',
+
+        'storybook/no-redundant-story-name': 'error',
+
+        // storiesOf is deprecated and should not be used
+        'storybook/no-stories-of': 'error',
+
+        // Do not define a title in meta
+        'storybook/no-title-property-in-meta': 'off',
+
+        // Stories should use PascalCase
+        'storybook/prefer-pascal-case': 'error',
+
+        // A story file must contain at least one story export
+        'storybook/story-exports': 'error',
+
+        // Use expect from @storybook/jest
+        'storybook/use-storybook-expect': 'error',
+
+        // Do not use testing-library directly on stories
+        'storybook/use-storybook-testing-library': 'error',
+      },
+    },
+  ],
+};

packages/carbon-react/.storybook/main.js

@@ -29,6 +29,9 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  features: {
+    previewCsfV3: true,
+  },
   stories: [
     './Welcome/Welcome.stories.js',
     '../src/**/*.stories.js',

packages/carbon-react/src/components/Grid/Grid.stories.js

@@ -71,7 +71,7 @@ export const Condensed = () => {
   );
 };
 
-export const fullWidth = () => (
+export const FullWidth = () => (
   <Grid fullWidth>
     <Column sm={4} />
     <Column sm={4} />

packages/carbon-react/src/components/Icons/Icons.stories.js

@@ -9,6 +9,7 @@ import './Icons.stories.scss';
 import React from 'react';
 import { Bee, Bicycle, ChevronUp } from '../../../icons';
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Elements/Icons',
 };

packages/carbon-react/src/components/Plex/Plex.stories.js

@@ -9,6 +9,7 @@ import './story.scss';
 
 import React from 'react';
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Elements/IBM Plex',
   argTypes: {

packages/react/.storybook/main.js

@@ -40,6 +40,10 @@ module.exports = {
     builder: 'webpack5',
   },
 
+  features: {
+    previewCsfV3: true,
+  },
+
   staticDirs: [path.join(__dirname, 'assets')],
 
   stories: glob.sync(

packages/react/src/components/Accordion/Accordion-story.js

@@ -39,7 +39,7 @@ export default {
   },
 };
 
-export const accordion = () => (
+export const AccordionStory = () => (
   <Accordion>
     <AccordionItem title="Section 1 title">
       <p>
@@ -76,9 +76,11 @@ export const accordion = () => (
   </Accordion>
 );
 
-export const skeleton = () => <AccordionSkeleton open count={4} />;
+AccordionStory.storyName = 'Accordion';
 
-skeleton.decorators = [
+export const Skeleton = () => <AccordionSkeleton open count={4} />;
+
+Skeleton.decorators = [
   (story) => <div style={{ width: '500px' }}>{story()}</div>,
 ];
 
@@ -93,7 +95,7 @@ const sizes = {
   'Large  (lg)': 'lg',
 };
 
-export const playground = () => (
+export const Playground = () => (
   <Accordion
     disabled={boolean('Disable entire Accordion (disabled)', false)}
     size={
@@ -146,7 +148,7 @@ export const playground = () => (
   </Accordion>
 );
 
-export const skeletonPlayground = () => (
+export const SkeletonPlayground = () => (
   <div style={{ width: '500px' }}>
     <AccordionSkeleton
       align={select(

packages/react/src/components/AspectRatio/AspectRatio-story.js

@@ -27,7 +27,7 @@ export default {
   },
 };
 
-export const aspectRatio = () => {
+export const AspectRatioStory = () => {
   return (
     <Grid>
       <Row>
@@ -48,7 +48,9 @@ export const aspectRatio = () => {
   );
 };
 
-export const playground = () => {
+AspectRatioStory.storyName = 'AspectRatio';
+
+export const Playground = () => {
   const ratio = select(
     'ratio',
     ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],

packages/react/src/components/Breadcrumb/Breadcrumb-story.js

@@ -30,7 +30,7 @@ export default {
   },
 };
 
-export const breadcrumb = () => (
+export const BreadcrumbStory = () => (
   <Breadcrumb>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
@@ -41,7 +41,9 @@ export const breadcrumb = () => (
   </Breadcrumb>
 );
 
-export const breadcrumbWithOverflowMenu = () => (
+BreadcrumbStory.storyName = 'Breadcrumb';
+
+export const BreadcrumbWithOverflowMenu = () => (
   <Breadcrumb>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
@@ -58,15 +60,15 @@ export const breadcrumbWithOverflowMenu = () => (
   </Breadcrumb>
 );
 
-export const skeleton = () => <BreadcrumbSkeleton />;
+export const Skeleton = () => <BreadcrumbSkeleton />;
 
 const props = () => ({
   className: 'some-class',
   noTrailingSlash: boolean('No trailing slash (noTrailingSlash)', false),
   onClick: action('onClick'),
 });
 
-export const playground = () => (
+export const Playground = () => (
   <Breadcrumb {...props()}>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>

packages/react/src/components/Button/Button-story.js

@@ -135,13 +135,13 @@ const props = {
 
 export default {
   title: 'Components/Button',
+  component: Button,
+  subcomponents: {
+    ButtonSet,
+    ButtonSkeleton,
+  },
   decorators: [withKnobs],
   parameters: {
-    component: Button,
-    subcomponents: {
-      ButtonSet,
-      ButtonSkeleton,
-    },
     docs: {
       page: mdx,
     },

packages/react/src/components/Button/next/Button.stories.js

@@ -13,12 +13,10 @@ import ButtonSet from '../../ButtonSet';
 
 export default {
   title: 'Components/Button',
-  parameters: {
-    component: Button,
-    subcomponents: {
-      ButtonSet,
-      ButtonSkeleton,
-    },
+  component: Button,
+  subcomponents: {
+    ButtonSet,
+    ButtonSkeleton,
   },
 };
 

packages/react/src/components/Checkbox/Checkbox-story.js

@@ -32,7 +32,7 @@ export default {
   },
 };
 
-export const checkboxNativeValidation = () => {
+export const CheckboxNativeValidation = () => {
   function onSubmit(e) {
     e.preventDefault();
     var cb = e.target.querySelector('input[type=checkbox]');
@@ -57,7 +57,7 @@ export const checkboxNativeValidation = () => {
   );
 };
 
-export const checkbox = () => {
+export const CheckboxStory = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>
       <legend className={`${prefix}--label`}>Checkbox heading</legend>
@@ -67,7 +67,9 @@ export const checkbox = () => {
   );
 };
 
-export const unstable_Checkbox = () => {
+CheckboxStory.storyName = 'Checkbox';
+
+export const UnstableCheckbox = () => {
   return (
     <FeatureFlags flags={{ 'enable-v11-release': true }}>
       <fieldset className={`${prefix}--fieldset`}>
@@ -87,11 +89,11 @@ export const unstable_Checkbox = () => {
   );
 };
 
-unstable_Checkbox.story = {
+UnstableCheckbox.story = {
   name: 'unstable_Checkbox',
 };
 
-export const skeleton = () => <CheckboxSkeleton />;
+export const Skeleton = () => <CheckboxSkeleton />;
 
 const props = () => ({
   checked: boolean('Checked (checked)', false),
@@ -104,7 +106,7 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-export const playground = () => (
+export const Playground = () => (
   <fieldset className={`${prefix}--fieldset`}>
     <legend
       className={classNames(`${prefix}--label`, {

packages/react/src/components/Checkbox/next/Checkbox.stories.js

@@ -18,7 +18,7 @@ export default {
   },
 };
 
-export const checkbox = () => {
+export const CheckboxStory = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>
       <legend className={`${prefix}--label`}>Checkbox heading</legend>
@@ -28,4 +28,6 @@ export const checkbox = () => {
   );
 };
 
-export const skeleton = () => <CheckboxSkeleton />;
+CheckboxStory.storyName = 'Checkbox';
+
+export const Skeleton = () => <CheckboxSkeleton />;

packages/react/src/components/CodeSnippet/CodeSnippet-story.js

@@ -106,13 +106,13 @@ const props = () => ({
   ),
 });
 
-export const inline = () => (
+export const Inline = () => (
   <CodeSnippet type="inline" feedback="Copied to clipboard">
     {'node -v'}
   </CodeSnippet>
 );
 
-export const multiline = () => (
+export const Multiline = () => (
   <CodeSnippet type="multi" feedback="Copied to clipboard">
     {`  "scripts": {
     "build": "lerna run build --stream --prefix --npm-client yarn",
@@ -146,14 +146,14 @@ export const multiline = () => (
   </CodeSnippet>
 );
 
-export const singleline = () => (
+export const Singleline = () => (
   <CodeSnippet type="single" feedback="Copied to clipboard">
     yarn add carbon-components@latest carbon-components-react@latest
     @carbon/icons-react@latest carbon-icons@latest
   </CodeSnippet>
 );
 
-export const skeleton = () => (
+export const Skeleton = () => (
   <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
     <CodeSnippetSkeleton type="multi" />
@@ -180,7 +180,7 @@ const lightPropMessage = (
   </small>
 );
 
-export const withChildrenNodes = () => (
+export const WithChildrenNodes = () => (
   <CodeSnippet {...props()} type="multi" copyText={snippetText().multi}>
     {snippetText()
       .multi.split('\n')
@@ -193,7 +193,7 @@ export const withChildrenNodes = () => (
   </CodeSnippet>
 );
 
-export const playground = () => (
+export const Playground = () => (
   <div className={props().light ? 'bx--tile' : ''}>
     {props().light && lightPropMessage}
     <br />