chore(documentation): add linting for documentation package (#3128)

swisspost · Jun 12, 2024 · cedbd9f · cedbd9f
1 parent 7c69f84
commit cedbd9f
Show file tree

Hide file tree

Showing 59 changed files with 1,364 additions and 260 deletions.
diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -19,7 +19,8 @@ import { version } from '@root/package.json';
 import scss from './post-card-control.module.scss';
 import { parse } from '@/utils/sass-export';
 
-const SCSS_VARIABLES = parse(scss);
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+const SCSS_VARIABLES: any = parse(scss);
 
 let cardControlIds = 0;
 

diff --git a/packages/documentation/.eslintrc.js b/packages/documentation/.eslintrc.js
@@ -0,0 +1,55 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    project: 'tsconfig.eslint.json',
+    extraFileExtensions: ['.mdx'],
+  },
+  ignorePatterns: [
+    'src/**/*.sample.*',
+    '.eslintrc.js',
+    'cypress',
+    'cypress.config.js',
+    'cypress.snapshot.config.js',
+    'public',
+    'storybook-static',
+    'vite.config.js',
+  ],
+  overrides: [
+    {
+      files: ['*.{js,ts,tsx}'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:storybook/recommended',
+        'prettier',
+      ],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            caughtErrors: 'none',
+            destructuredArrayIgnorePattern: '^_',
+            ignoreRestSiblings: true,
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.mdx'],
+      extends: ['plugin:mdx/recommended'],
+      parser: 'eslint-mdx',
+      settings: {
+        'mdx/code-blocks': true,
+      },
+    },
+  ],
+};
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -23,7 +23,8 @@
     "e2e": "cypress run",
     "e2e:ci": "xvfb-run -a cypress run",
     "e2e:watch": "cypress open",
-    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9"
+    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9",
+    "lint": "eslint **/*.{js,ts,tsx,mdx}"
   },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:7.1.0",
@@ -60,8 +61,14 @@
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.2",
     "@types/react-syntax-highlighter": "15.5.13",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "cypress": "13.9.0",
     "cypress-axe": "1.5.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-mdx": "3.1.5",
+    "eslint-plugin-storybook": "0.8.0",
     "lit": "3.1.3",
     "lit-html": "3.1.3",
     "prettier": "2.8.8",

diff --git a/packages/documentation/src/shared/tile/tile.component.ts b/packages/documentation/src/shared/tile/tile.component.ts
@@ -6,7 +6,7 @@ import Styles from './tile.component.scss?inline';
 
 @customElement('ti-le')
 export class TileComponent extends LitElement {
-  @property({ type: String }) title: string = '';
+  @property({ type: String }) title = '';
   @property({ type: String }) ariaLabel: string | null = null;
   @property({ type: String }) href: string | null = null;
 

diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/web-components';
 import { html, nothing, TemplateResult } from 'lit';
-import { MetaComponent } from '@root/types';
+import { MetaComponent, HeadingLevel } from '@root/types';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 const meta: MetaComponent<HTMLPostAccordionElement & HTMLPostCollapsibleElementEventMap> = {
@@ -72,7 +72,7 @@ type Story = StoryObj<HTMLPostAccordionElement>;
 
 export const Default: Story = {
   args: {
-    headingLevel: '3' as any, // needs to be a string for the control to properly initialize
+    headingLevel: '3' as HeadingLevel, // needs to be a string for the control to properly initialize
   },
 };
 

diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -1,4 +1,3 @@
-// @ts-ignore
 import { useArgs } from '@storybook/preview-api';
 import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
@@ -111,7 +110,7 @@ export default meta;
 function externalControl(story: StoryFn, { args, context }: StoryContext) {
   const [_, updateArgs] = useArgs();
 
-  const toggleAlert = (e: MouseEvent, args: Args, updateArgs: Function) => {
+  const toggleAlert = (e: MouseEvent, args: Args, updateArgs: (newArgs: Partial<Args>) => void) => {
     e.preventDefault();
     updateArgs({ show: !args.show });
   };

diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -193,7 +193,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
           autocomplete="off"
           ?checked="${isChecked}"
           .checked="${isChecked}"
-          @change="${(e: Event) => {
+          @change="${() => {
             updateArgs({ checked: position });
           }}"
         />

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { spread } from '@open-wc/lit-helpers';
 import { repeat } from 'lit/directives/repeat.js';
@@ -222,7 +222,7 @@ const Template = {
   render: (args: Args) => {
     const tagName = unsafeStatic(args.tag);
     const isAnimated = args.tag !== 'input' && args.animated !== 'none';
-    const props = createProps(args, isAnimated);
+    const props = createProps(args);
 
     if (args.tag === 'input') {
       return html` <${tagName} ${spread(props)} /> `;
@@ -243,7 +243,7 @@ const Template = {
   },
 };
 
-function createProps(args: Args, isAnimated: boolean) {
+function createProps(args: Args) {
   const additionalClasses = args.additionalClasses ?? [];
   return {
     class: [
@@ -269,7 +269,10 @@ export const Default: Story = {
 
 export const Inverted: Story = {
   ...Template,
-  decorators: [(story: Function) => html` <div class="p-3 bg-dark">${story()}</div> `],
+  decorators: [
+    (story: StoryFn, context: StoryContext) =>
+      html` <div class="p-3 bg-dark">${story(context.args, context)}</div> `,
+  ],
 };
 
 const VariantsTemplate = {
@@ -279,7 +282,8 @@ const VariantsTemplate = {
     },
   },
   decorators: [
-    (story: Function) => html` <div class="d-flex gap-small-r flex-wrap">${story()}</div> `,
+    (story: StoryFn, context: StoryContext) =>
+      html` <div class="d-flex gap-small-r flex-wrap">${story(context.args, context)}</div> `,
   ],
   render: (args: Args) =>
     html`

diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -76,7 +76,7 @@ const meta: MetaComponent = {
   },
 };
 export default meta;
-function cardButtonRender(args: Args, count: number = 42) {
+function cardButtonRender(args: Args, count = 42) {
   const [_, updateArgs] = useArgs();
   return html`
     <div class="card card-button ${args.background}" id="${`card-button${count}`}">

diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -206,18 +206,20 @@ const meta: MetaComponent = {
 export default meta;
 
 // DECORATORS
-function clickBlocker(story: any) {
-  return html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `;
+function clickBlocker(story: StoryFn, context: StoryContext) {
+  return html`
+    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
+  `;
 }
 
-function paddedContainer(story: any) {
-  return html` <div class="p-mini">${story()}</div> `;
+function paddedContainer(story: StoryFn, context: StoryContext) {
+  return html` <div class="p-mini">${story(context.args, context)}</div> `;
 }
 
-function gridContainer(story: any) {
+function gridContainer(story: StoryFn, context: StoryContext) {
   return html`
     <div class="row">
-      <div class="col-lg-4 col-rg-6 col-12">${story()}</div>
+      <div class="col-lg-4 col-rg-6 col-12">${story(context.args, context)}</div>
     </div>
   `;
 }

diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { nothing } from 'lit';
 import { MetaComponent } from '@root/types';
@@ -59,18 +59,20 @@ const meta: MetaComponent = {
 export default meta;
 
 // DECORATORS
-function clickBlocker(story: any) {
-  return html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `;
+function clickBlocker(story: StoryFn, context: StoryContext) {
+  return html`
+    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
+  `;
 }
 
-function paddedContainer(story: any) {
-  return html` <div class="p-mini">${story()}</div> `;
+function paddedContainer(story: StoryFn, context: StoryContext) {
+  return html` <div class="p-mini">${story(context.args, context)}</div> `;
 }
 
-function gridContainer(story: any) {
+function gridContainer(story: StoryFn, context: StoryContext) {
   return html`
     <div class="row row-cols-md-2 row-cols-xl-3 border-gutters">
-      <div class="col-12">${story()}</div>
+      <div class="col-12">${story(context.args, context)}</div>
     </div>
   `;
 }
@@ -322,12 +324,12 @@ export const Multipart: Story = {
     </div>
   `,
   decorators: [
-    (story: any) => {
-      let timer;
-
+    (story: StoryFn, context: StoryContext) => {
       return html`
-        ${story()}
+        ${story(context.args, context)}
         <script id="toto">
+          let timer;
+
           function syncHeights() {
             const nodes = document.querySelectorAll('[data-sync-height-with]');
 

diff --git a/packages/documentation/src/stories/components/chip/chip.stories.ts b/packages/documentation/src/stories/components/chip/chip.stories.ts
@@ -1,5 +1,5 @@
 import { useArgs } from '@storybook/preview-api';
-import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
 
@@ -106,7 +106,7 @@ const meta: MetaComponent = {
 export default meta;
 
 // DECORATORS
-function externalControl(story: any, { args }: StoryContext) {
+function externalControl(story: StoryFn, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
   const button = html`
@@ -121,7 +121,7 @@ function externalControl(story: any, { args }: StoryContext) {
     </a>
   `;
 
-  return html` ${args.dismissed ? button : nothing} ${story()} `;
+  return html` ${context.args.dismissed ? button : nothing} ${story(context.args, context)} `;
 }
 
 // RENDERER

diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
@@ -14,7 +14,7 @@ export default {
 
 type Story = StoryObj<HTMLPostCollapsibleElement>;
 
-export const collapsible: Story = {
+export const Collapsible: Story = {
   render: (_args: Args, context: StoryContext<HTMLPostCollapsibleElement>) => {
     const templateVariants = bombArgs({
       collapsed: [false, true],

diff --git a/.../src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts b/.../src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts
@@ -11,8 +11,8 @@ export default {
 };
 
 const bombedArgs = bombArgs({
-  type: meta.argTypes!.type!.options,
-  validation: meta.argTypes!.validation!.options,
+  type: meta.argTypes?.type?.options,
+  validation: meta.argTypes?.validation?.options,
   checked: [false, true],
   disabled: [false, true],
   label: ['Card check text', 'Really long running choice card text that wraps to two lines'],

diff --git a/...mentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts b/...mentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
@@ -9,6 +9,8 @@ import scss from '../card-control.module.scss';
 
 const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
 
+type useStateFn = typeof useState;
+
 const meta: MetaComponent = {
   id: '047501dd-a185-4835-be91-09130fa3dad9',
   title: 'Components/Forms/Card-Control',
@@ -129,7 +131,7 @@ let cardControlId = 0;
 const CONTROL_LABELS = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];
 
 // Firefox fallback for the :has selector
-function inputHandler(e: InputEvent, updateArgs: Function) {
+function inputHandler(e: InputEvent, updateArgs: (newArgs: Partial<Args>) => void) {
   const target = e.target as HTMLInputElement;
   updateArgs({ checked: target.checked });
 
@@ -225,7 +227,7 @@ export const DarkBackground = {
   render: Default.render,
 };
 
-function col(label: string, args: Args, useState: Function) {
+function col(label: string, args: Args, useState: useStateFn) {
   const [id] = useState(cardControlId++);
 
   return html`

diff --git a/...mentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts b/...mentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
@@ -8,7 +8,7 @@ import './card-control.styles.scss';
 import scss from '../card-control.module.scss';
 import { coloredBackground } from '@/shared/decorators/dark-background';
 
-const SCSS_VARIABLES: any = parse(scss);
+const SCSS_VARIABLES: { [key: string]: string | object } = parse(scss);
 
 const meta: MetaComponent = {
   id: '886fabcf-148b-4054-a2ec-4869668294fb',
@@ -273,8 +273,8 @@ export const FormIntegration: Story = {
 
     return html` <form
       id="AssociatedForm"
-      @reset="${(e: any) => formHandler(e, updateArgs)}"
-      @submit="${(e: any) => formHandler(e, updateArgs)}"
+      @reset="${(e: SubmitEvent) => formHandler(e, updateArgs)}"
+      @submit="${(e: SubmitEvent) => formHandler(e, updateArgs)}"
     >
       <fieldset .disabled=${args.checkboxFieldset}>
         <legend>Legend</legend>
@@ -303,15 +303,14 @@ export const FormIntegration: Story = {
   },
 };
 
-function formHandler(e: any, updateArgs: Function) {
+function formHandler(e: SubmitEvent, updateArgs: (newArgs: Partial<Args>) => void) {
   if (e.type === 'submit') e.preventDefault();
 
   setTimeout(() => {
     const formOutput = document.querySelector('#AssociatedFormOutput');
-    const formData: { [key: string]: string } = Array.from(new FormData(e.target).entries()).reduce(
-      (acc, [k, v]) => Object.assign(acc, { [k]: v }),
-      {},
-    );
+    const formData: { [key: string]: string } = Array.from(
+      new FormData(e.target as HTMLFormElement).entries(),
+    ).reduce((acc, [k, v]) => Object.assign(acc, { [k]: v }), {});
 
     if (formOutput) {
       updateArgs({

diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -190,7 +190,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
     ['is-' + args.validation]: args.validation !== 'null',
   });
 
-  const handleChange = (e: Event) => {
+  const handleChange = () => {
     updateArgs({ checked: CHECKED_STATE_TOGGLE_MAP[args.checked] });
   };