Storybook: add eslint-plugin-storybook and fix issues (#446)

* feat(storybook): add eslint-plugin-storybook and fix issues * fix(storybook): remove unused args from story signatures * fix(storybook): remove previously ignored linting issues * fix(storybook): fix missing and erroring React stories - Fix style attributes that were strings instead of objects - Fix misconfigured `docs` meta property
ithaka · Nov 10, 2022 · ba80a3c · ba80a3c
1 parent 92e7175
commit ba80a3c
Show file tree

Hide file tree

Showing 69 changed files with 328 additions and 251 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,21 @@
 module.exports = {
   ignorePatterns: ['**/*.css.ts'],
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
   parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
   },
   plugins: ['react', '@typescript-eslint', 'no-smart-quotes'],
   settings: {
@@ -21,6 +29,7 @@ module.exports = {
   },
   rules: {
     'no-smart-quotes/no-smart-quotes': 'error',
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {

diff --git a/.storybook/react/preview.js b/.storybook/react/preview.js
@@ -9,6 +9,7 @@ export const parameters = {
   a11y: a11yConfig,
   controls: { expanded: true },
   docs: {
+    source: { type: 'dynamic' },
     inlineStories: true,
     theme: theme,
     components: {

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "analyze": "yarn workspace @ithaka/pharos analyze",
     "format": "prettier packages/* --write",
     "lint": "yarn lint:lit-analyzer && yarn lint:eslint && yarn lint:styles",
-    "lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,mjs}'",
+    "lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,jsx,mjs}'",
     "lint:lit-analyzer": "lit-analyzer 'packages/*/src/**/!(*.css|*.test).ts' --strict --rules.no-missing-import off --rules.no-unknown-tag-name off",
     "lint:styles": "stylelint 'packages/**/*.{scss,css}'",
     "test": "yarn workspace @ithaka/pharos test",
@@ -60,6 +60,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.14.5",
     "@babel/plugin-syntax-import-assertions": "^7.16.7",
     "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.18.6",
     "@changesets/changelog-github": "^0.4.1",
     "@changesets/cli": "^2.18.0",
     "@commitlint/cli": "^15.0.0",
@@ -99,6 +100,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
     "eslint-plugin-wc": "^1.3.2",
     "husky": "^7.0.0",
     "lint-staged": "^12.0.2",

diff --git a/packages/pharos/src/components/button/PharosButton.react.stories.jsx b/packages/pharos/src/components/button/PharosButton.react.stories.jsx
@@ -54,7 +54,7 @@ export const Base = {
 };
 
 export const Variants = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -114,7 +114,7 @@ export const Variants = {
 };
 
 export const Large = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -176,7 +176,7 @@ export const Large = {
 };
 
 export const WithIcons = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -268,7 +268,7 @@ export const Link = {
 };
 
 export const Forms = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',

diff --git a/packages/pharos/src/components/checkbox-group/PharosCheckboxGroup.react.stories.jsx b/packages/pharos/src/components/checkbox-group/PharosCheckboxGroup.react.stories.jsx
@@ -3,12 +3,16 @@ import { action } from '@storybook/addon-actions';
 import { PharosButton, PharosCheckbox, PharosCheckboxGroup } from '../../react-components';
 import createFormData from '../../utils/createFormData';
 import { defaultArgs } from './storyArgs';
+import { configureDocsPage } from '@config/docsPageConfig';
 
 export default {
   title: 'Forms/Checkbox Group',
   component: PharosCheckboxGroup,
   subcomponents: { PharosCheckbox },
-  options: { selectedPanel: 'addon-controls' },
+  parameters: {
+    docs: { page: configureDocsPage('checkbox') },
+    options: { selectedPanel: 'addon-controls' },
+  },
 };
 
 export const Base = {
@@ -35,7 +39,7 @@ export const Base = {
 };
 
 export const Events = {
-  render: (_) => (
+  render: () => (
     <PharosCheckboxGroup
       onChange={(e) => action('Change')(JSON.stringify(e.target.value))}
       name="group2"
@@ -65,7 +69,7 @@ export const Validity = {
 };
 
 export const FormData = {
-  render: (_) => (
+  render: () => (
     <form name="my-form" action="https://httpbin.org/post" method="POST">
       <PharosCheckboxGroup
         style={{ marginBottom: '0.5rem' }}

diff --git a/packages/pharos/src/components/checkbox-group/pharos-checkbox-group.wc.stories.jsx b/packages/pharos/src/components/checkbox-group/pharos-checkbox-group.wc.stories.jsx
@@ -36,7 +36,7 @@ export const Base = {
 };
 
 export const Events = {
-  render: (_) =>
+  render: () =>
     html` <pharos-checkbox-group
       @change="${(e) => action('Change')(JSON.stringify(e.target.value))}"
       name="checkbox-group2"
@@ -61,7 +61,7 @@ export const Validity = {
 };
 
 export const FormData = {
-  render: (_) =>
+  render: () =>
     html` <form name="my-form" action="https://httpbin.org/post" method="POST">
       <pharos-checkbox-group
         @change="${(e) => action('Change')(e.target.value)}"

diff --git a/packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx b/packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx
@@ -8,7 +8,7 @@ export default {
   title: 'Forms/Checkbox',
   component: PharosCheckbox,
   parameters: {
-    docs: configureDocsPage('checkbox'),
+    docs: { page: configureDocsPage('checkbox') },
     options: {
       selectedPanel: 'addon-controls',
     },

diff --git a/packages/pharos/src/components/checkbox/pharos-checkbox.wc.stories.jsx b/packages/pharos/src/components/checkbox/pharos-checkbox.wc.stories.jsx
@@ -30,7 +30,7 @@ export const Base = {
 };
 
 export const States = {
-  render: (_) =>
+  render: () =>
     html`
       <div>
         <pharos-checkbox name="one"><span slot="label">Normal Checkbox</span></pharos-checkbox>
@@ -77,7 +77,7 @@ export const States = {
 };
 
 export const Events = {
-  render: (_) =>
+  render: () =>
     html` <pharos-checkbox
       value="My value"
       @change="${(e) => action('Change')(e.target.checked)}"
@@ -103,7 +103,7 @@ export const Validity = {
 
 export const OnBackground = {
   name: 'On background',
-  render: (_) =>
+  render: () =>
     html`
       <div style="background-color: #000000; padding: 1rem;">
         <pharos-checkbox name="on-background" on-background>

diff --git a/packages/pharos/src/components/combobox/PharosCombobox.react.stories.jsx b/packages/pharos/src/components/combobox/PharosCombobox.react.stories.jsx
@@ -76,7 +76,7 @@ export const States = {
 };
 
 export const Events = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -111,13 +111,13 @@ export const Events = {
 };
 
 export const SearchMode = {
-  render: (_) => (
+  render: () => (
     <PharosCombobox
       placeholder="Search..."
       searchMode
       style={{ display: 'grid', gridTemplateColumns: '300px' }}
     >
-      <span slot="label">I'm searching for</span>
+      <span slot="label">I&apos;m searching for</span>
       <option value="1">Bulbasaur</option>
       <option value="2">Charmander</option>
       <option value="3">Squirtle</option>
@@ -136,7 +136,7 @@ export const SearchMode = {
 
 export const Validity = {
   render: (args) => (
-    <div style="display: grid; grid-template-columns: 300px;">
+    <div style={{ display: 'grid', gridTemplateColumns: '300px' }}>
       <PharosCombobox
         name="my-combobox"
         placeholder="Enter some text"
@@ -163,7 +163,7 @@ export const Validity = {
 };
 
 export const FormData = {
-  render: (_) => (
+  render: () => (
     <div style={{ display: 'grid', gridTemplateColumns: '300px' }}>
       <form name="my-form" action="https://httpbin.org/post" method="POST">
         <PharosCombobox

diff --git a/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.jsx b/packages/pharos/src/components/combobox/pharos-combobox.wc.stories.jsx
@@ -54,7 +54,7 @@ export const Base = {
 };
 
 export const States = {
-  render: (_) =>
+  render: () =>
     html`
       <div style="display: grid; grid-gap: 7rem; grid-template-columns: repeat(2, 300px);">
         <pharos-combobox name="default">
@@ -92,7 +92,7 @@ export const States = {
 };
 
 export const Events = {
-  render: (_) =>
+  render: () =>
     html`
       <div style="display: grid; grid-template-columns: 300px;">
         <pharos-combobox
@@ -123,7 +123,7 @@ export const Events = {
 };
 
 export const SearchMode = {
-  render: (_) =>
+  render: () =>
     html`
       <pharos-combobox
         placeholder="Search..."
@@ -168,7 +168,7 @@ export const Validity = {
 };
 
 export const FormData = {
-  render: (_) =>
+  render: () =>
     html`
       <div style="display: grid; grid-template-columns: 300px;">
         <form name="my-form" action="https://httpbin.org/post" method="POST">

diff --git a/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.jsx b/packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.jsx
@@ -20,7 +20,7 @@ export default {
 };
 
 export const Base = {
-  render: (_) => (
+  render: () => (
     <PharosDropdownMenuNav>
       <PharosDropdownMenuNavLink
         href="#"

diff --git a/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.jsx b/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.jsx
@@ -16,7 +16,7 @@ export default {
 };
 
 export const Base = {
-  render: (_) =>
+  render: () =>
     html`
       <pharos-dropdown-menu-nav>
         <pharos-dropdown-menu-nav-link

diff --git a/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx b/packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx
@@ -22,7 +22,7 @@ export default {
 };
 
 export const Base = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -42,7 +42,7 @@ export const Base = {
 };
 
 export const Events = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -72,7 +72,7 @@ export const Events = {
 };
 
 export const Icons = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -100,7 +100,7 @@ export const Icons = {
 };
 
 export const Descriptions = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -139,7 +139,7 @@ export const Descriptions = {
 };
 
 export const FullWidth = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -171,7 +171,7 @@ export const FullWidth = {
 };
 
 export const Links = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -205,7 +205,7 @@ export const Links = {
 };
 
 export const MultipleTriggers = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -240,7 +240,7 @@ export const MultipleTriggers = {
 };
 
 export const MultipleDynamicTriggers = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -287,7 +287,7 @@ export const MultipleDynamicTriggers = {
 };
 
 export const Composition = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',
@@ -370,7 +370,7 @@ export const Composition = {
 };
 
 export const CoordinatingDropdowns = {
-  render: (_) => (
+  render: () => (
     <div
       style={{
         display: 'grid',