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,31 @@
+---
+"@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-cookie-banner": patch
+"@justeattakeaway/pie-css": patch
+"@justeattakeaway/pie-divider": patch
+"@justeattakeaway/pie-form-label": patch
+"@justeattakeaway/pie-icon-button": patch
+"@justeattakeaway/pie-icons-react": patch
+"@justeattakeaway/pie-icons-vue": patch
+"@justeattakeaway/pie-link": patch
+"@justeattakeaway/pie-modal": patch
+"@justeattakeaway/pie-notification": patch
+"@justeattakeaway/pie-spinner": patch
+"@justeattakeaway/pie-switch": patch
+"@justeattakeaway/pie-tag": patch
+"@justeattakeaway/pie-text-input": 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-storybook": patch
+---
+
+[Fixed] - Imports to align with new linting rule

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-assistive-text.stories.ts

@@ -2,10 +2,10 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-assistive-text';
-import { AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text';
+import { type AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text';
 /* eslint-enable import/no-duplicates */
 
-import { type StoryMeta, SlottedComponentProps } from '../types';
+import { type StoryMeta, type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type AssistiveTextProps = SlottedComponentProps<AssistiveTextBaseProps>;

apps/pie-storybook/stories/pie-button.stories.ts

@@ -4,13 +4,13 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-button';
 import {
-    ButtonProps as ButtonPropsBase, iconPlacements, sizes, types, variants, responsiveSizes, defaultProps,
+    type ButtonProps as ButtonPropsBase, iconPlacements, sizes, types, variants, responsiveSizes, defaultProps,
 } from '@justeattakeaway/pie-button';
 /* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js';
 
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
-import { StoryMeta, SlottedComponentProps } from '../types';
+import { type StoryMeta, type SlottedComponentProps } from '../types';
 
 type ButtonProps = SlottedComponentProps<ButtonPropsBase>;
 type ButtonStoryMeta = StoryMeta<ButtonProps>;

apps/pie-storybook/stories/pie-card.stories.ts

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-card';
 import {
-    CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps,
+    type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps,
 } from '@justeattakeaway/pie-card';
 /* eslint-enable import/no-duplicates */
 

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

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-checkbox-group';
-import { CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
+import { type CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
 /* eslint-enable import/no-duplicates */
 
 import { type StoryMeta } from '../types';

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

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-checkbox';
-import { CheckboxProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox';
+import { type CheckboxProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox';
 /* eslint-enable import/no-duplicates */
 
 import { action } from '@storybook/addon-actions';

apps/pie-storybook/stories/pie-chip.stories.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-chip';
-import { ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
+import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
 /* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
 

apps/pie-storybook/stories/pie-cookie-banner.stories.ts

@@ -1,9 +1,9 @@
-import { html, TemplateResult } from 'lit';
+import { html, type TemplateResult } from 'lit';
 import { action } from '@storybook/addon-actions';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-cookie-banner';
-import { CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner';
+import { type CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner';
 import pieCookieBannerLocales from '@justeattakeaway/pie-cookie-banner/locales';
 /* eslint-enable import/no-duplicates */
 

apps/pie-storybook/stories/pie-divider.stories.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-divider';
 import {
-    DividerProps, variants, orientations, defaultProps,
+    type DividerProps, variants, orientations, defaultProps,
 } from '@justeattakeaway/pie-divider';
 /* eslint-enable import/no-duplicates */
 

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

@@ -1,11 +1,12 @@
 import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-form-label';
-import { FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label';
+import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label';
 /* eslint-enable import/no-duplicates */
 
-import { SlottedComponentProps, type StoryMeta } from '../types';
+import { type SlottedComponentProps, type StoryMeta } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type FormLabelProps = SlottedComponentProps<FormLabelPropsBase>;
@@ -66,9 +67,9 @@
     ...props
 }) => html`
         <pie-form-label
-            for="${props.for}"
-            optional="${optional || nothing}"
-            trailing="${trailing || nothing}">
+            for="${ifDefined(props.for)}"
+            optional="${ifDefined(optional)}"
+            trailing="${ifDefined(trailing)}">
             ${sanitizeAndRenderHTML(slot)}
         </pie-form-label>`;
 

apps/pie-storybook/stories/pie-icon-button.stories.ts

@@ -4,12 +4,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-icon-button';
 import {
-    IconButtonProps, sizes, variants, defaultProps,
+    type IconButtonProps, sizes, variants, defaultProps,
 } from '@justeattakeaway/pie-icon-button';
 /* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
 
-import { StoryMeta } from '../types';
+import { type StoryMeta } from '../types';
 import { createStory, type TemplateFunction } from '../utilities';
 
 type IconButtonStoryMeta = StoryMeta<IconButtonProps>;

apps/pie-storybook/stories/pie-link.stories.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-link';
 import {
-    LinkProps as LinkBaseProps, sizes, variants,
+    type LinkProps as LinkBaseProps, sizes, variants,
     iconPlacements, tags, buttonTypes, underlineTypes, defaultProps,
 } from '@justeattakeaway/pie-link';
 /* eslint-enable import/no-duplicates */

apps/pie-storybook/stories/pie-modal.stories.ts

@@ -1,21 +1,21 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-modal';
 import {
-    PieModal,
-    ModalProps as ModalPropsBase,
+    type PieModal,
+    type ModalProps as ModalPropsBase,
     headingLevels,
     sizes,
     positions,
     defaultProps,
 } from '@justeattakeaway/pie-modal';
 /* eslint-enable import/no-duplicates */
 
-import { StoryMeta, SlottedComponentProps } from '../types';
+import { type StoryMeta, type SlottedComponentProps } from '../types';
 import { createStory, sanitizeAndRenderHTML } from '../utilities';
 
 type ModalProps = SlottedComponentProps<ModalPropsBase>;

apps/pie-storybook/stories/pie-notification.stories.ts

@@ -5,13 +5,13 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import '@justeattakeaway/pie-notification';
 import { action } from '@storybook/addon-actions';
 import {
-    NotificationProps as NotificationBaseProps, variants, headingLevels, positions, defaultProps,
+    type NotificationProps as NotificationBaseProps, variants, headingLevels, positions, defaultProps,
 } from '@justeattakeaway/pie-notification';
 /* eslint-enable import/no-duplicates */
 
 import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
 
-import { type StoryMeta, SlottedComponentProps } from '../types';
+import { type StoryMeta, type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction } from '../utilities';
 
 type NotificationProps = SlottedComponentProps<NotificationBaseProps>;

apps/pie-storybook/stories/pie-spinner.stories.ts

@@ -4,12 +4,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-spinner';
 import {
-    SpinnerProps, sizes, variants, defaultProps,
+    type SpinnerProps, sizes, variants, defaultProps,
 } from '@justeattakeaway/pie-spinner';
 /* eslint-enable import/no-duplicates */
 
 import { type StoryMeta } from '../types';
-import { TemplateFunction, createStory } from '../utilities';
+import { type TemplateFunction, createStory } from '../utilities';
 
 type SpinnerStoryMeta = StoryMeta<SpinnerProps>;
 

apps/pie-storybook/stories/pie-switch.stories.ts

@@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-switch';
-import { SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch';
+import { type SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch';
 /* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
-import { StoryMeta } from '../types';
+import { type StoryMeta } from '../types';
 import { createStory, type TemplateFunction } from '../utilities';
 
 type SwitchStoryMeta = StoryMeta<SwitchProps>;

apps/pie-storybook/stories/pie-tag.stories.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-tag';
 import {
-    TagProps as TagBaseProps, variants, sizes, defaultProps,
+    type TagProps as TagBaseProps, variants, sizes, defaultProps,
 } from '@justeattakeaway/pie-tag';
 /* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';

apps/pie-storybook/stories/pie-text-input.stories.ts

@@ -6,7 +6,7 @@ import { useArgs as UseArgs } from '@storybook/preview-api';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-text-input';
 import {
-    types, inputModes, statusTypes, TextInputProps as TextInputPropsBase, sizes, defaultProps,
+    types, inputModes, statusTypes, type TextInputProps as TextInputPropsBase, sizes, defaultProps,
 } from '@justeattakeaway/pie-text-input';
 /* eslint-enable import/no-duplicates */
 

apps/pie-storybook/stories/pie-textarea.stories.ts

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-textarea';
 import {
-    TextareaProps, defaultProps, resizeModes, sizes,
+    type TextareaProps, defaultProps, resizeModes, sizes,
 } from '@justeattakeaway/pie-textarea';
 /* eslint-enable import/no-duplicates */
 

apps/pie-storybook/stories/pie-toast.stories.ts

@@ -2,7 +2,7 @@ import { html } from 'lit';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-toast';
-import { ToastProps } from '@justeattakeaway/pie-toast';
+import { type ToastProps } from '@justeattakeaway/pie-toast';
 /* eslint-enable import/no-duplicates */
 
 import { type StoryMeta } from '../types';

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

@@ -86,8 +86,8 @@
     "@sand4rt/experimental-ct-web": "1.0.8",
     "@types/node": "20.4.8",
     "@types/react": "18.3.3",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitest/coverage-c8": "0.29.8",
     "autoprefixer": "10.4.19",
     "babel-loader": "8.3.0",
@@ -97,7 +97,7 @@
     "cz-customizable": "7.2.1",
     "danger": "11.3.0",
     "dree": "3.4.5",
-    "eslint": "8.37.0",
+    "eslint": "8.56.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/src/index.ts

@@ -1,11 +1,11 @@
 import {
-    LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
+    LitElement, html, unsafeCSS, nothing, type PropertyValues, type TemplateResult,
 } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
-    ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
+    type ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
 } from './defs';
 import styles from './button.scss?inline';
 import 'element-internals-polyfill';