chore(eslint-config-pie): DSW-000 add rule for consistent type imports

.changeset/blue-readers-decide.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/eslint-config-pie": minor
+---
+
+[Added] - `@typescript-eslint/consistent-type-imports` rule

.changeset/heavy-phones-talk.md

@@ -0,0 +1,27 @@
+---
+"@justeattakeaway/generator-pie-component": patch
+"@justeattakeaway/pie-assistive-text": patch
+"@justeattakeaway/pie-button": patch
+"@justeattakeaway/pie-card": patch
+"@justeattakeaway/pie-checkbox": patch
+"@justeattakeaway/pie-checkbox-group": patch
+"@justeattakeaway/pie-chip": patch
+"@justeattakeaway/pie-css": patch
+"@justeattakeaway/pie-form-label": patch
+"@justeattakeaway/pie-icon-button": patch
+"@justeattakeaway/pie-icons-react": patch
+"@justeattakeaway/pie-lottie-player": patch
+"@justeattakeaway/pie-modal": patch
+"@justeattakeaway/pie-notification": patch
+"@justeattakeaway/pie-switch": patch
+"@justeattakeaway/pie-textarea": patch
+"@justeattakeaway/pie-toast": patch
+"@justeattakeaway/pie-webc-core": patch
+"@justeattakeaway/pie-webc-testing": patch
+"@justeattakeaway/pie-wrapper-react": patch
+"pie-docs": patch
+"pie-storybook": patch
+---
+
+[Fixed] - Imports to align with new linting rule
+[Removed] - Empty lines at the start of some files

apps/examples/wc-next10/package.json

@@ -24,7 +24,7 @@
     "@babel/preset-env": "7.24.5",
     "@babel/preset-react": "7.24.1",
     "babel-loader": "8",
-    "eslint": "8.37.0",
+    "eslint": "8.57.0",
     "eslint-config-next": "13.2.4"
   },
   "engines": {

apps/examples/wc-vue3/tsconfig.json

@@ -4,7 +4,11 @@
   "compilerOptions": {
     "allowJs": true, // allow JavaScript files to be imported
     "baseUrl": ".",
-    "ignoreDeprecations": "5.0",
+    // workaround for https://github.com/vuejs/tsconfig/issues/6
+    "preserveValueImports": false,
+    "importsNotUsedAsValues": "remove",
+    "verbatimModuleSyntax": true,
+    // end workaround
     "paths": {
       "@/*": ["./src/*"]
     }

apps/pie-docs/src/_11ty/shortcodes/componentStatusTable.js

@@ -13,9 +13,7 @@ const buildRow = (cells, headings) => cells.map((cell) => {
     headings.map((heading) => {
         if ('componentName' in cell) {
             content = `<a class="c-componentStatus-link" href="/components/${cell.componentName.toLowerCase().replace(' ', '-')}">${cell.componentName}</a>`;
-        } else
-
-        if (heading.title === cell.resource) {
+        } else if (heading.title === cell.resource) {
             const { bgColor, status } = statusSettings[cell.status];
             content = `<span class="c-componentStatus-status" style="--bg-colour: ${bgColor}; margin-inline-start: 30px;">${status}</span>`;
         }

apps/pie-storybook/data/tag-variants-to-statuses-map.ts

@@ -1,4 +1,4 @@
-import { TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map';
+import { type TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map';
 
 export const tagVariantToStatusMap: TagVariantToStatusMap = {
     alpha: 'yellow',

apps/pie-storybook/decorators/component-status.ts

@@ -1,9 +1,9 @@
-import { TemplateResult, html } from 'lit';
+import { type TemplateResult, html } from 'lit';
 import '@justeattakeaway/pie-tag';
 import '@justeattakeaway/pie-icons-webc/dist/IconHelpCircle.js';
 import componentStatusesJson from '../component-statuses.json';
-import { StorybookContext } from '../interfaces/storybook-context';
-import { ComponentStatuses } from '../interfaces/component-status';
+import { type StorybookContext } from '../interfaces/storybook-context';
+import { type ComponentStatuses } from '../interfaces/component-status';
 import { tagVariantToStatusMap } from '../data/tag-variants-to-statuses-map';
 
 const componentStatuses: ComponentStatuses = componentStatusesJson;

apps/pie-storybook/decorators/writing-direction.ts

@@ -1,5 +1,5 @@
-import { TemplateResult } from 'lit';
-import { StorybookContext } from '../interfaces/storybook-context';
+import { type TemplateResult } from 'lit';
+import { type StorybookContext } from '../interfaces/storybook-context';
 
 export const WritingDirection = (story: () => TemplateResult, storybookContext: StorybookContext) => {
     const { globals } = storybookContext;

apps/pie-storybook/stories/pie-checkbox-group.stories.ts

@@ -3,15 +3,15 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-checkbox-group';
-import { type CheckboxGroupProps as CheckboxGroupBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
+import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
 import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-checkbox';
 import '@justeattakeaway/pie-form-label';
 
 import { createStory } from '../utilities';
 
 // Extending the props type definition to include storybook specific properties for controls
-type CheckboxGroupProps = CheckboxGroupBase & {
+type CheckboxGroupProps = CheckboxGroupPropsBase & {
     labelSlot: keyof typeof labelSlotOptions;
 };
 

apps/pie-storybook/stories/pie-form-label.stories.ts

@@ -65,7 +65,7 @@ const Template: TemplateFunction<FormLabelProps> = ({
     ...props
 }) => html`
         <pie-form-label
-            for="${props.for}"
+            for="${props.for || nothing}"
             optional="${optional || nothing}"
             trailing="${trailing || nothing}">
             ${sanitizeAndRenderHTML(slot)}

apps/pie-storybook/stories/pie-lottie-player.stories.ts

@@ -3,7 +3,7 @@ import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-lottie-player';
 import {
-    type LottiePlayerProps as LottiePlayerBaseProps, PieLottiePlayer, defaultProps, directions,
+    type LottiePlayerProps as LottiePlayerBaseProps, type PieLottiePlayer, defaultProps, directions,
 } from '@justeattakeaway/pie-lottie-player';
 
 import { createStory } from '../utilities';

apps/pie-storybook/utilities/index.ts

@@ -1,7 +1,7 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import DOMPurify from 'dompurify';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { StoryOptions } from '../types/StoryOptions';
+import { type StoryOptions } from '../types/StoryOptions';
 
 export type TemplateFunction<T> = (props: T) => TemplateResult;
 

package.json

@@ -99,7 +99,7 @@
     "cz-customizable": "7.2.1",
     "danger": "11.3.0",
     "dree": "3.4.5",
-    "eslint": "8.37.0",
+    "eslint": "8.57.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-json-format": "2.0.1",
     "eslint-plugin-vitest": "0.3.22",

packages/components/pie-assistive-text/src/defs-react.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 /**
  * TODO: Verify if ReactBaseType can be set as a more specific React interface
  * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces

packages/components/pie-assistive-text/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, nothing, TemplateResult,
+    LitElement, html, unsafeCSS, nothing, type TemplateResult,
 } from 'lit';
 
 import { property } from 'lit/decorators.js';
@@ -9,7 +9,7 @@ import '@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js';
 
 import styles from './assistive-text.scss?inline';
-import { AssistiveTextProps, variants, defaultProps } from './defs';
+import { type AssistiveTextProps, variants, defaultProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';

packages/components/pie-assistive-text/test/accessibility/pie-assistive-text.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieAssistiveText, AssistiveTextProps } from '../../src/index.ts';
+import { PieAssistiveText, type AssistiveTextProps } from '../../src/index.ts';
 import { variants } from '../../src/defs.ts';
 
 test.describe('PieAssistiveText - Accessibility tests', () => {

packages/components/pie-button/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.ButtonHTMLAttributes<HTMLButtonElement>

packages/components/pie-button/test/visual/pie-button.spec.ts

@@ -1,7 +1,7 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
 import {
-    type PropObject, WebComponentPropValues, WebComponentTestInput,
+    type PropObject, type WebComponentPropValues, type WebComponentTestInput,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,

packages/components/pie-card/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>

packages/components/pie-card/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    html, LitElement, unsafeCSS, nothing, TemplateResult, type PropertyValues,
+    html, LitElement, unsafeCSS, nothing, type TemplateResult, type PropertyValues,
 } from 'lit';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -9,7 +9,7 @@ import styles from './card.scss?inline';
 import {
     variants,
     tags,
-    CardProps,
+    type CardProps,
     defaultProps,
     paddingValues,
 } from './defs';

packages/components/pie-card/test/accessibility/pie-card.spec.ts

@@ -1,6 +1,5 @@
-
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieCard, CardProps } from '../../src/index.ts';
+import { PieCard, type CardProps } from '../../src/index.ts';
 import { tags } from '../../src/defs.ts';
 
 test.describe('PieCard - Accessibility tests', () => {

packages/components/pie-card/test/component/pie-card.spec.ts

@@ -1,6 +1,5 @@
-
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieCard, CardProps } from '../../src/index.ts';
+import { PieCard, type CardProps } from '../../src/index.ts';
 import { tags, paddingValues } from '../../src/defs.ts';
 
 const componentSelector = '[data-test-id="pie-card"]';

packages/components/pie-checkbox-group/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>

packages/components/pie-checkbox-group/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues, nothing, type TemplateResult,
+    LitElement, html, unsafeCSS, type PropertyValues, type nothing, type TemplateResult,
 } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import {
@@ -14,7 +14,7 @@ import styles from './checkbox-group.scss?inline';
 import {
     ON_CHECKBOX_GROUP_DISABLED,
     ON_CHECKBOX_GROUP_ERROR,
-    CheckboxGroupProps,
+    type CheckboxGroupProps,
     defaultProps,
     statusTypes,
 } from './defs';

packages/components/pie-checkbox-group/test/accessibility/pie-checkbox-group.spec.ts

@@ -1,6 +1,5 @@
-
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieCheckboxGroup, CheckboxGroupProps } from '../../src/index.ts';
+import { PieCheckboxGroup, type CheckboxGroupProps } from '../../src/index.ts';
 
 test.describe('PieCheckboxGroup - Accessibility tests', () => {
     test('a11y - should test the PieCheckboxGroup component WCAG compliance', async ({ makeAxeBuilder, mount }) => {

packages/components/pie-checkbox-group/test/component/pie-checkbox-group.spec.ts

@@ -1,8 +1,7 @@
-
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text';
 import { PieCheckbox } from '@justeattakeaway/pie-checkbox';
-import { PieCheckboxGroup, CheckboxGroupProps } from '../../src/index.ts';
+import { PieCheckboxGroup, type CheckboxGroupProps } from '../../src/index.ts';
 import { statusTypes } from '../../src/defs.ts';
 
 const componentSelector = '[data-test-id="pie-checkbox-group"]';

packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts

@@ -1,8 +1,7 @@
-
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import type {
-    PropObject, WebComponentPropValues, WebComponentTestInput,
+import {
+    type PropObject, type WebComponentPropValues, type WebComponentTestInput,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,

packages/components/pie-checkbox/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

packages/components/pie-checkbox/src/index.ts

@@ -16,7 +16,7 @@ import {
 import '@justeattakeaway/pie-assistive-text';
 
 import styles from './checkbox.scss?inline';
-import { CheckboxProps, defaultProps, statusTypes } from './defs';
+import { type CheckboxProps, defaultProps, statusTypes } from './defs';
 
 // Valid values available to consumers
 export * from './defs';

packages/components/pie-checkbox/test/visual/pie-checkbox.spec.ts

@@ -1,7 +1,7 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import type {
-    PropObject, WebComponentPropValues, WebComponentTestInput,
+import {
+    type PropObject, type WebComponentPropValues, type WebComponentTestInput,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,
@@ -18,11 +18,11 @@ import { setRTL } from '@justeattakeaway/pie-webc-testing/src/helpers/set-rtl-di
 
 import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text';
 import { PieCheckbox } from '../../src/index.ts';
-import { statusTypes } from '../../src/defs.ts';
+import { type CheckboxProps, statusTypes } from '../../src/defs.ts';
 
 const readingDirections = ['LTR', 'RTL'];
 
-const props: PropObject = {
+const props: PropObject<CheckboxProps> = {
     status: statusTypes,
     checked: [true, false],
     disabled: [true, false],

packages/components/pie-chip/src/defs-react.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 /**
  * TODO: Verify if ReactBaseType can be set as a more specific React interface
  * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces

packages/components/pie-chip/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, TemplateResult, nothing,
+    LitElement, html, unsafeCSS, type TemplateResult, nothing,
 } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -10,7 +10,7 @@ import {
 } from '@justeattakeaway/pie-webc-core';
 import styles from './chip.scss?inline';
 import {
-    ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
+    type ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
 } from './defs';
 import '@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js';
 import '@justeattakeaway/pie-spinner';

packages/components/pie-chip/test/accessibility/pie-chip.spec.ts

@@ -1,6 +1,5 @@
-
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieChip, ChipProps } from '../../src/index.ts';
+import { PieChip, type ChipProps } from '../../src/index.ts';
 
 test.describe('PieChip - Accessibility tests', () => {
     test('a11y - should test the PieChip component WCAG compliance', async ({ makeAxeBuilder, mount }) => {

packages/components/pie-chip/test/component/pie-chip.spec.ts

@@ -1,6 +1,5 @@
-
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieChip, ChipProps } from '../../src/index.ts';
+import { PieChip, type ChipProps } from '../../src/index.ts';
 import { ON_CHIP_CLOSE_EVENT } from '../../src/defs.ts';
 
 const componentSelector = '[data-test-id="pie-chip"]';

packages/components/pie-cookie-banner/test/helpers/page-object/pie-cookie-banner.page.ts

@@ -1,6 +1,5 @@
 import { type Locator, type Page } from '@playwright/test';
 import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
-
 import { cookieBanner } from './selectors.ts';
 import { type PreferenceIds } from '../../../src/defs.ts';
 

packages/components/pie-divider/test/accessibility/pie-divider.spec.ts

@@ -1,4 +1,3 @@
-
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
 import { PieDivider } from '../../src/index.ts';
 

packages/components/pie-divider/test/component/pie-divider.spec.ts

@@ -1,4 +1,3 @@
-
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieDivider, type DividerProps } from '../../src/index.ts';
 
@@ -48,4 +47,3 @@ test.describe('PieDivider - Component tests', () => {
         expect(label).not.toBeVisible();
     });
 });
-

packages/components/pie-divider/test/visual/pie-divider.spec.ts

@@ -1,4 +1,3 @@
-
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
 import {

packages/components/pie-form-label/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.LabelHTMLAttributes<HTMLLabelElement>