feat(icon): apply lint rules

ovh · Nov 2, 2023 · bdfc2c3 · bdfc2c3
1 parent f8cf480
commit bdfc2c3
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 51 deletions.
diff --git a/packages/components/icon/package.json b/packages/components/icon/package.json
@@ -22,6 +22,7 @@
     "doc:api": "typedoc",
     "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
+    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
     "start": "stencil build --docs --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",

diff --git a/packages/components/icon/src/components/osds-icon/constants/default-attributes.ts b/packages/components/icon/src/components/osds-icon/constants/default-attributes.ts
@@ -1,7 +1,5 @@
 import type { OdsIconAttribute } from '../interfaces/attributes';
-
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-
 import { ODS_ICON_SIZE } from './icon-size';
 
 const DEFAULT_ATTRIBUTE: OdsIconAttribute = Object.freeze({

diff --git a/packages/components/icon/src/components/osds-icon/core/controller.spec.ts b/packages/components/icon/src/components/osds-icon/core/controller.spec.ts
@@ -1,9 +1,7 @@
 import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing/src';
-
 import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
 import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing/src';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-
 import { OdsIconController } from './controller';
 import { ODS_ICON_SIZE } from '../constants/icon-size';
 import { OsdsIcon } from '../osds-icon';
@@ -22,7 +20,7 @@ describe('spec:ods-icon-controller', () => {
 
   Ods.instance().logging(false);
 
-  function setup(attributes: Partial<OsdsIcon> = {}) {
+  function setup(attributes: Partial<OsdsIcon> = {}): void {
     component = new OsdsIconMock(attributes);
     controller = new OdsIconController(component);
   }

diff --git a/packages/components/icon/src/components/osds-icon/core/controller.ts b/packages/components/icon/src/components/osds-icon/core/controller.ts
@@ -1,8 +1,6 @@
 import type { OsdsIcon } from '../osds-icon';
-
 import { OdsLogger, OdsWarnComponentAttribute } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-
 import { ODS_ICON_SIZE } from '../constants/icon-size';
 
 /**
@@ -31,16 +29,16 @@ class OdsIconController {
     const logger = this.logger;
 
     OdsWarnComponentAttribute<ODS_THEME_COLOR_INTENT, OsdsIcon>({
-      logger,
-      attributeValues: ODS_THEME_COLOR_INTENT,
-      attributeName: 'color',
       attribute: this.component.color,
+      attributeName: 'color',
+      attributeValues: ODS_THEME_COLOR_INTENT,
+      logger,
     });
     OdsWarnComponentAttribute<ODS_ICON_SIZE, OsdsIcon>({
-      logger,
-      attributeValues: ODS_ICON_SIZE,
-      attributeName: 'size',
       attribute: this.component.size,
+      attributeName: 'size',
+      attributeValues: ODS_ICON_SIZE,
+      logger,
     });
   }
 }

diff --git a/packages/components/icon/src/components/osds-icon/interfaces/attributes.ts b/packages/components/icon/src/components/osds-icon/interfaces/attributes.ts
@@ -30,6 +30,6 @@ interface OdsIconAttribute {
   size?: ODS_ICON_SIZE
 }
 
-export {
+export type {
   OdsIconAttribute,
 };
diff --git a/packages/components/icon/src/components/osds-icon/osds-icon.e2e.screenshot.ts b/packages/components/icon/src/components/osds-icon/osds-icon.e2e.screenshot.ts
@@ -1,22 +1,19 @@
 import type { OdsIconAttribute } from './interfaces/attributes';
 import type { E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { ODS_ICON_NAMES } from './constants/icon-name';
 import { ODS_ICON_SIZES } from './constants/icon-size';
 
-
 const TIMEOUT = 50000;
 
 describe('e2e:osds-icon', () => {
   let page: E2EPage;
   let variations: string[] = [];
 
-  async function setup(content: string) {
+  async function setup(content: string): Promise<void> {
     page = await newE2EPage();
 
     await page.setContent(content);
@@ -35,7 +32,7 @@ describe('e2e:osds-icon', () => {
             variations.push(`
               <osds-icon ${odsStringAttributes2Str(
     odsComponentAttributes2StringAttributes<OdsIconAttribute>(
-      { color, name, size, ariaName: '' },
+      { ariaName: '', color, name, size },
       DEFAULT_ATTRIBUTE,
     ),
   )}>
@@ -57,7 +54,7 @@ describe('e2e:osds-icon', () => {
             variations.push(`
             <osds-icon ${odsStringAttributes2Str(
     odsComponentAttributes2StringAttributes<OdsIconAttribute>(
-      { contrasted: true, color, name, size, ariaName: '' },
+      { ariaName: '', color, contrasted: true, name, size },
       DEFAULT_ATTRIBUTE,
     ),
   )}>

diff --git a/packages/components/icon/src/components/osds-icon/osds-icon.e2e.ts b/packages/components/icon/src/components/osds-icon/osds-icon.e2e.ts
@@ -1,19 +1,16 @@
 import type { OdsIconAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-icon', () => {
   const baseAttribute = { ariaName: '' };
   let page: E2EPage;
   let el: E2EElement;
 
-  async function setup({ attributes = {} }: { attributes: Partial<OdsIconAttribute> }) {
+  async function setup({ attributes = {} }: { attributes: Partial<OdsIconAttribute> }): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsIconAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();

diff --git a/packages/components/icon/src/components/osds-icon/osds-icon.spec.ts b/packages/components/icon/src/components/osds-icon/osds-icon.spec.ts
@@ -2,11 +2,9 @@ jest.mock('./core/controller'); // keep jest.mock before any
 
 import type { OdsIconAttribute } from './interfaces/attributes';
 import type { SpecPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT, ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
 import { newSpecPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { ODS_ICON_NAME } from './constants/icon-name';
 import { ODS_ICON_SIZE, ODS_ICON_SIZES } from './constants/icon-size';
@@ -20,7 +18,7 @@ describe('spec:osds-icon', () => {
   let instance: OsdsIcon;
   let controller: OdsIconController;
 
-  async function setup({ attributes = {} }: { attributes?: Partial<OdsIconAttribute> } = {}) {
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsIconAttribute> } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsIconAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newSpecPage({
@@ -41,19 +39,19 @@ describe('spec:osds-icon', () => {
 
   describe('attributes', () => {
     const config = {
-      instance: () => instance,
-      page: () => page,
-      root: () => page.root,
-      wait: () => page.waitForChanges(),
+      instance: (): OsdsIcon => instance,
+      page: (): SpecPage => page,
+      root: (): SpecPage['root'] => page.root,
+      wait: (): Promise<void> => page.waitForChanges(),
     };
 
     describe('aria-name', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'ariaName'>({
-        name: 'ariaName',
         defaultValue: DEFAULT_ATTRIBUTE.ariaName,
+        name: 'ariaName',
         newValue: 'An Icon',
-        value: 'Oles ipsum',
         setup: (value) => setup({ attributes: { ['ariaName']: value } }),
+        value: 'Oles ipsum',
         ...config,
       });
 
@@ -65,11 +63,11 @@ describe('spec:osds-icon', () => {
 
     describe('color', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'color'>({
-        name: 'color',
         defaultValue: DEFAULT_ATTRIBUTE.color,
+        name: 'color',
         newValue: ODS_THEME_COLOR_INTENT.error,
-        value: ODS_THEME_COLOR_INTENT.success,
         setup: (value) => setup({ attributes: { ['color']: value } }),
+        value: ODS_THEME_COLOR_INTENT.success,
         ...config,
       });
 
@@ -82,11 +80,11 @@ describe('spec:osds-icon', () => {
 
     describe('contrasted', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'contrasted'>({
-        name: 'contrasted',
         defaultValue: DEFAULT_ATTRIBUTE.contrasted,
+        name: 'contrasted',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['contrasted']: value } }),
+        value: true,
         ...config,
       });
 
@@ -105,11 +103,11 @@ describe('spec:osds-icon', () => {
 
     describe('name', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'name'>({
-        name: 'name',
         defaultValue: DEFAULT_ATTRIBUTE.name,
+        name: 'name',
         newValue: ODS_ICON_NAME.ARROW_DOWN,
-        value: ODS_ICON_NAME.ARROW_UP,
         setup: (value) => setup({ attributes: { ['name']: value } }),
+        value: ODS_ICON_NAME.ARROW_UP,
         ...config,
       });
 
@@ -122,11 +120,11 @@ describe('spec:osds-icon', () => {
 
     describe('size', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'size'>({
-        name: 'size',
         defaultValue: DEFAULT_ATTRIBUTE.size,
+        name: 'size',
         newValue: ODS_ICON_SIZE.md,
-        value: ODS_ICON_SIZE.sm,
         setup: (value) => setup({ attributes: { ['size']: value } }),
+        value: ODS_ICON_SIZE.sm,
         ...config,
       });
 
@@ -139,11 +137,11 @@ describe('spec:osds-icon', () => {
 
     describe('hoverable', () => {
       odsUnitTestAttribute<OdsIconAttribute, 'hoverable'>({
-        name: 'hoverable',
         defaultValue: DEFAULT_ATTRIBUTE.hoverable,
+        name: 'hoverable',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['hoverable']: value } }),
+        value: true,
         ...config,
       });
 

diff --git a/packages/components/icon/src/components/osds-icon/osds-icon.tsx b/packages/components/icon/src/components/osds-icon/osds-icon.tsx
@@ -1,18 +1,17 @@
+import type { ODS_ICON_NAME } from './constants/icon-name';
+import type { ODS_ICON_SIZE } from './constants/icon-size';
 import type { OdsIconAttribute } from './interfaces/attributes';
-
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import type { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import type { FunctionalComponent } from '@stencil/core';
 import icons from '@ovhcloud/ods-common-theming/icons/icons.data.json';
 import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
-import { ODS_ICON_NAME } from './constants/icon-name';
-import { ODS_ICON_SIZE } from './constants/icon-size';
 import { OdsIconController } from './core/controller';
 
 @Component({
-  tag: 'osds-icon',
-  styleUrl: 'osds-icon.scss',
   shadow: true,
+  styleUrl: 'osds-icon.scss',
+  tag: 'osds-icon',
 })
 export class OsdsIcon implements OdsIconAttribute {
   controller: OdsIconController = new OdsIconController(this);
@@ -43,7 +42,7 @@ export class OsdsIcon implements OdsIconAttribute {
     this.beforeRender();
   }
 
-  render() {
+  render(): FunctionalComponent {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const base64Icon = icons[this.name];