justeattakeaway · xander-marjoram · Oct 2, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/eslint-config-pie": minor
+---
+
+[Added] - `@typescript-eslint/consistent-type-imports` rule
@@ -0,0 +1,20 @@
+---
+"@justeattakeaway/pie-assistive-text": patch
+"@justeattakeaway/pie-checkbox-group": patch
+"@justeattakeaway/generator-pie-component": patch
+"@justeattakeaway/pie-notification": patch
+"@justeattakeaway/pie-form-label": patch
+"@justeattakeaway/pie-webc-core": patch
+"@justeattakeaway/pie-checkbox": patch
+"@justeattakeaway/pie-divider": patch
+"@justeattakeaway/pie-spinner": patch
+"@justeattakeaway/pie-button": patch
+"@justeattakeaway/pie-switch": patch
+"@justeattakeaway/pie-modal": patch
+"@justeattakeaway/pie-card": patch
+"@justeattakeaway/pie-chip": patch
+"@justeattakeaway/pie-tag": patch
+"pie-storybook": patch
+---
+
+[Fixed] - Imports to align with new linting rule
diff --git a/apps/pie-storybook/stories/pie-assistive-text.stories.ts b/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>;

@@ -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

@@ -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';

@@ -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', () => {

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.ButtonHTMLAttributes<HTMLButtonElement>
diff --git a/packages/components/pie-button/src/index.ts b/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 { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.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';

diff --git a/packages/components/pie-button/test/accessibility/pie-button.spec.ts b/packages/components/pie-button/test/accessibility/pie-button.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
 import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
-import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
+import { type PropObject, type WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import { PieButton } from '../../src/index.ts';
 import { sizes, variants } from '../../src/defs.ts';
 

diff --git a/packages/components/pie-button/test/component/pie-button.spec.ts b/packages/components/pie-button/test/component/pie-button.spec.ts
@@ -1,6 +1,6 @@
 import { getShadowElementStylePropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/get-shadow-element-style-prop-values.ts';
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieButton, ButtonProps } from '../../src/index.ts';
+import { PieButton, type ButtonProps } from '../../src/index.ts';
 
 const props: Partial<ButtonProps> = {
     size: 'large',

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -1,5 +1,5 @@
 import {
-    html, LitElement, unsafeCSS, nothing, TemplateResult,
+    html, LitElement, unsafeCSS, nothing, type TemplateResult,
 } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
@@ -8,7 +8,7 @@ import styles from './card.scss?inline';
 import {
     variants,
     tags,
-    CardProps,
+    type CardProps,
     defaultProps,
     paddingValues,
 } from './defs';

@@ -1,6 +1,6 @@
 
 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', () => {

@@ -1,6 +1,6 @@
 
 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"]';

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues,
+    LitElement, html, unsafeCSS, type PropertyValues,
 } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import {
@@ -12,7 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './checkbox-group.scss?inline';
 import {
     ON_CHECKBOX_GROUP_DISABLED,
-    CheckboxGroupProps,
+    type CheckboxGroupProps,
     defaultProps,
     statusTypes,
 } from './defs';

@@ -1,6 +1,6 @@
 
 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 }) => {

@@ -2,7 +2,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"]';

@@ -1,7 +1,7 @@
 
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import { PieCheckboxGroup, CheckboxGroupProps } from '../../src/index.ts';
+import { PieCheckboxGroup, type CheckboxGroupProps } from '../../src/index.ts';
 
 test.describe('PieCheckboxGroup - Visual tests`', () => {
     test('should display the PieCheckboxGroup component successfully', async ({ page, mount }) => {

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues, nothing,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -15,7 +15,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';

diff --git a/packages/components/pie-checkbox/test/accessibility/pie-checkbox.spec.ts b/packages/components/pie-checkbox/test/accessibility/pie-checkbox.spec.ts
@@ -1,6 +1,6 @@
 
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieCheckbox, CheckboxProps } from '../../src/index.ts';
+import { PieCheckbox, type CheckboxProps } from '../../src/index.ts';
 
 test.describe('PieCheckbox - Accessibility tests', () => {
     test('a11y - should test the PieCheckbox component WCAG compliance', async ({ makeAxeBuilder, mount }) => {

diff --git a/packages/components/pie-checkbox/test/component/pie-checkbox.spec.ts b/packages/components/pie-checkbox/test/component/pie-checkbox.spec.ts
@@ -2,7 +2,7 @@
 import { setupFormDataExtraction, getFormDataObject } from '@justeattakeaway/pie-webc-testing/src/helpers/form-helpers.ts';
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text';
-import { PieCheckbox, CheckboxProps } from '../../src/index.ts';
+import { PieCheckbox, type CheckboxProps } from '../../src/index.ts';
 import { statusTypes } from '../../src/defs.ts';
 
 const inputSelector = '[data-test-id="checkbox-input"]';

@@ -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

@@ -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';
@@ -9,7 +9,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';

@@ -1,6 +1,6 @@
 
 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 }) => {

@@ -1,6 +1,6 @@
 
 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"]';

diff --git a/packages/components/pie-divider/src/defs-react.ts b/packages/components/pie-divider/src/defs-react.ts
@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.HTMLAttributes<HTMLHRElement>
diff --git a/packages/components/pie-divider/src/index.ts b/packages/components/pie-divider/src/index.ts
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
 import {
-    DividerProps, variants, orientations, defaultProps,
+    type DividerProps, variants, orientations, defaultProps,
 } from './defs';
 
 // Valid values available to consumers

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

@@ -1,6 +1,6 @@
 
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieDivider, DividerProps } from '../../src/index.ts';
+import { PieDivider, type DividerProps } from '../../src/index.ts';
 
 const componentSelector = '[data-test-id="pie-divider"]';
 

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.LabelHTMLAttributes<HTMLLabelElement>
@@ -1,11 +1,11 @@
 import {
-    LitElement, TemplateResult, html, nothing, unsafeCSS,
+    LitElement, type TemplateResult, html, nothing, unsafeCSS,
 } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin, defineCustomElement, PIEInputElement } from '@justeattakeaway/pie-webc-core';
+import { RtlMixin, defineCustomElement, type PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
-import { FormLabelProps } from './defs';
+import { type FormLabelProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';

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

@@ -1,7 +1,7 @@
-import { test, expect, MountOptions } from '@sand4rt/experimental-ct-web';
+import { test, expect, type MountOptions } from '@sand4rt/experimental-ct-web';
 import { PieTextInput } from '@justeattakeaway/pie-text-input';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
-import { PieFormLabel, FormLabelProps } from '../../src/index.ts';
+import { PieFormLabel, type FormLabelProps } from '../../src/index.ts';
 
 const componentSelector = '[data-test-id="pie-form-label"]';
 

@@ -12,7 +12,7 @@ import {
     createTestWebComponent,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
 import { PieFormLabel } from '../../src/index.ts';
-import { FormLabelProps } from '../../src/defs.ts';
+import { type FormLabelProps } from '../../src/defs.ts';
 
 const renderTestPieDivider = (propVals: WebComponentPropValues) => `<pie-form-label optional="${propVals.optional}" trailing="${propVals.trailing}">Label</pie-form-label>`;
 

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.DialogHTMLAttributes<HTMLDialogElement>
diff --git a/packages/components/pie-modal/src/defs.ts b/packages/components/pie-modal/src/defs.ts
@@ -1,6 +1,6 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+import { type Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;

diff --git a/packages/components/pie-modal/src/index.ts b/packages/components/pie-modal/src/index.ts
@@ -1,5 +1,5 @@
 import {
-    LitElement, nothing, TemplateResult, unsafeCSS, PropertyValues,
+    LitElement, nothing, type TemplateResult, unsafeCSS, type PropertyValues,
 } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';

@@ -1,4 +1,4 @@
-import { ModalProps } from '../../src/defs.ts';
+import { type ModalProps } from '../../src/defs.ts';
 
 // Renders a <pie-modal> HTML string with the given prop values
 export const renderTestPieModal = ({

@@ -2,7 +2,7 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
 import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts';
 import percySnapshot from '@percy/playwright';
 import { PieModal } from '../../src/index.ts';
-import { ModalProps, sizes, positions } from '../../src/defs.ts';
+import { type ModalProps, sizes, positions } from '../../src/defs.ts';
 
 const componentSelector = '[data-test-id="pie-modal"]';
 const componentFooterSelector = '[data-test-id="pie-modal-footer"]';

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 /**
  * TODO: Update the React base type as soon as the notification component markup is defined
  * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces

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

diff --git a/packages/components/pie-spinner/src/defs-react.ts b/packages/components/pie-spinner/src/defs-react.ts
@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.HTMLAttributes<HTMLDivElement>