Components: use full import paths with JS extensions

projects/js-packages/components/changelog/add-components-js-import-paths

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Use full import paths with JS extensions.

projects/js-packages/components/components/action-button/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import React from 'react';
-import Button from '../button';
+import Button from '../button/index.js';
 import styles from './style.module.scss';
 
 /**

projects/js-packages/components/components/action-button/test/component.jsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import ActionButton from '../index';
+import ActionButton from '../index.js';
 
 describe( 'ActionButton', () => {
 	const testProps = {

projects/js-packages/components/components/action-popover/index.tsx

@@ -4,9 +4,9 @@
 import { Popover } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
-import Button from '../button';
-import useBreakpointMatch from '../layout/use-breakpoint-match';
-import Text from '../text';
+import Button from '../button/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Text from '../text/index.js';
 /**
  * Internal dependencies
  */
@@ -15,7 +15,7 @@ import styles from './styles.module.scss';
 /**
  * Types
  */
-import { ActionPopoverProps } from './types';
+import { ActionPopoverProps } from './types.js';
 import type React from 'react';
 
 const ActionPopover = ( {

projects/js-packages/components/components/action-popover/stories/index.stories.jsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import ActionPopover from '../index';
+import ActionPopover from '../index.js';
 import styles from './styles.module.scss';
 
 export default {

projects/js-packages/components/components/admin-page/index.tsx

@@ -2,12 +2,12 @@ import restApi from '@automattic/jetpack-api';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
-import JetpackFooter from '../jetpack-footer';
-import JetpackLogo from '../jetpack-logo';
-import Col from '../layout/col';
-import Container from '../layout/container';
+import JetpackFooter from '../jetpack-footer/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
 import styles from './style.module.scss';
-import type { AdminPageProps } from './types';
+import type { AdminPageProps } from './types.js';
 import type React from 'react';
 
 /**

projects/js-packages/components/components/admin-page/stories/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import JetpackLogo from '../../jetpack-logo/index';
-import Text from '../../text/index';
-import AdminPage from '../index';
+import JetpackLogo from '../../jetpack-logo/index.js';
+import Text from '../../text/index.js';
+import AdminPage from '../index.js';
 import styles from './style.module.scss';
 import type { StoryFn, Meta } from '@storybook/react';
 

projects/js-packages/components/components/admin-page/types.ts

@@ -1,4 +1,4 @@
-import type { JetpackFooterMenuItem } from '../jetpack-footer/types';
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
 
 export type AdminPageProps = {
 	/**

projects/js-packages/components/components/admin-section/basic/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types';
+import type { AdminSectionBaseProps } from '../types.js';
 
 /**
  * This is the wrapper component to build sections within your admin page.

projects/js-packages/components/components/admin-section/hero/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types';
+import type { AdminSectionBaseProps } from '../types.js';
 
 /**
  * The wrapper component for a Hero Section to be used in admin pages.

projects/js-packages/components/components/admin-section/stories/index.stories.tsx

@@ -1,8 +1,8 @@
-import AdminPage from '../../admin-page';
-import Col from '../../layout/col';
-import Container from '../../layout/container';
-import AdminSection from '../basic';
-import AdminSectionHero from '../hero';
+import AdminPage from '../../admin-page/index.js';
+import Col from '../../layout/col/index.js';
+import Container from '../../layout/container/index.js';
+import AdminSection from '../basic/index.js';
+import AdminSectionHero from '../hero/index.js';
 import type { StoryFn, Meta } from '@storybook/react';
 
 export default {

projects/js-packages/components/components/alert/stories/index.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Alert from '../index';
+import Alert from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Alert',

projects/js-packages/components/components/automattic-byline-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { AutomatticBylineLogoProps } from './types';
+import { AutomatticBylineLogoProps } from './types.js';
 
 /**
  * Automattic "By line" Logo component.

projects/js-packages/components/components/automattic-byline-logo/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import AutomatticBylineLogo from '../index';
+import AutomatticBylineLogo from '../index.js';
 import type { StoryFn, Meta } from '@storybook/react';
 
 export default {

projects/js-packages/components/components/automattic-byline-logo/test/component.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import AutomatticBylineLogo from '../index';
+import AutomatticBylineLogo from '../index.js';
 
 describe( 'AutomatticBylineLogo', () => {
 	const testProps = {

projects/js-packages/components/components/badge/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import Badge from '../index';
+import Badge from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Badge',

projects/js-packages/components/components/boost-score-bar/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import BoostScoreBar from '../index';
+import BoostScoreBar from '../index.js';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta< typeof BoostScoreBar > = {

projects/js-packages/components/components/boost-score-bar/test/component.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable testing-library/no-container */
 /* eslint-disable testing-library/no-node-access */
 import { render, screen } from '@testing-library/react';
-import BoostScoreBar from '..';
-import type { BoostScoreBarProps } from '../types';
+import BoostScoreBar from '../index.js';
+import type { BoostScoreBarProps } from '../types.js';
 
 describe( 'BoostScrollBar', () => {
 	const defaultProps: BoostScoreBarProps = {

projects/js-packages/components/components/boost-score-graph/annotations-plugin.ts

@@ -1,5 +1,5 @@
 import uPlot from 'uplot';
-import { Annotation } from '.';
+import { Annotation } from './index.js';
 
 import './style-annotation.scss';
 

projects/js-packages/components/components/boost-score-graph/index.tsx

@@ -1,7 +1,7 @@
 import React, { type FunctionComponent } from 'react';
-import Text from '../text';
-import Background from './background';
-import UplotLineChart from './uplot-line-chart';
+import Text from '../text/index.js';
+import Background from './background.js';
+import UplotLineChart from './uplot-line-chart.js';
 import './style.scss';
 
 export interface Period {

projects/js-packages/components/components/boost-score-graph/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import { BoostScoreGraph } from '..';
+import { BoostScoreGraph } from '../index.js';
 import type { Meta } from '@storybook/react';
 
 const exampleRawResponse = {

projects/js-packages/components/components/boost-score-graph/tooltip.tsx

@@ -3,7 +3,7 @@ import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { type FunctionComponent } from 'react';
 import './style-tooltip.scss';
-import { Period } from '.';
+import { Period } from './index.js';
 
 export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
 	if ( ! period || ! period.dimensions || ! period.timestamp ) {

projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import uPlot from 'uplot';
-import { Tooltip } from './tooltip';
-import { Period } from '.';
+import { Tooltip } from './tooltip.js';
+import { Period } from './index.js';
 
 /**
  * Custom tooltips plugin for uPlot.

projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx

@@ -2,15 +2,15 @@ import { __ } from '@wordpress/i18n';
 import React, { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
-import { getUserLocale } from '../../lib/locale';
-import numberFormat from '../number-format';
-import { annotationsPlugin } from './annotations-plugin';
-import { dayHighlightPlugin } from './day-highlight-plugin';
-import getDateFormat from './get-date-format';
-import { tooltipsPlugin } from './tooltips-plugin';
-import { useBoostScoreTransform } from './use-boost-score-transform';
-import useResize from './use-resize';
-import { type Annotation, Period } from '.';
+import { getUserLocale } from '../../lib/locale/index.js';
+import numberFormat from '../number-format/index.js';
+import { annotationsPlugin } from './annotations-plugin.js';
+import { dayHighlightPlugin } from './day-highlight-plugin.js';
+import getDateFormat from './get-date-format.js';
+import { tooltipsPlugin } from './tooltips-plugin.js';
+import { useBoostScoreTransform } from './use-boost-score-transform.js';
+import useResize from './use-resize.js';
+import { type Annotation, Period } from './index.js';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {

projects/js-packages/components/components/boost-score-graph/use-boost-score-transform.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Period } from './index';
+import { Period } from './index.js';
 
 type ScoreGraphAlignedData = [
 	number[], // timestamps

projects/js-packages/components/components/button/index.tsx

@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import type { ButtonProps } from './types';
+import type { ButtonProps } from './types.js';
 
 /**
  * Button component
@@ -88,6 +88,6 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 		</WPButton>
 	);
 } );
-Button.displayName = 'Button';
+Button.displayName = 'button';
 
 export default Button;

projects/js-packages/components/components/button/stories/index.stories.tsx

@@ -1,8 +1,8 @@
 import * as allIcons from '@wordpress/icons';
-import Col from '../../layout/col';
-import Container from '../../layout/container';
-import Text, { H3 } from '../../text';
-import Button from '../index';
+import Col from '../../layout/col/index.js';
+import Container from '../../layout/container/index.js';
+import Text, { H3 } from '../../text/index.js';
+import Button from '../index.js';
 import styles from './style.module.scss';
 
 const { Icon: WPIcon, ...icons } = allIcons;

projects/js-packages/components/components/chip/stories/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Chip from '../index';
+import Chip from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Chip',

projects/js-packages/components/components/contextual-upgrade-trigger/index.tsx

@@ -1,9 +1,9 @@
 import { Icon, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
-import IconTooltip from '../icon-tooltip';
-import Text from '../text';
+import IconTooltip from '../icon-tooltip/index.js';
+import Text from '../text/index.js';
 import styles from './style.module.scss';
-import { CutBaseProps } from './types';
+import { CutBaseProps } from './types.js';
 import type React from 'react';
 
 const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {

projects/js-packages/components/components/contextual-upgrade-trigger/stories/index.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import ContextualUpgradeTrigger from '../index';
+import ContextualUpgradeTrigger from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Contextual Upgrade Trigger',

projects/js-packages/components/components/copy-to-clipboard/index.tsx

@@ -1,9 +1,9 @@
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Button from '../button';
-import { ClipboardIcon, CheckmarkIcon } from '../icons';
-import { CopyToClipboardProps } from './types';
+import Button from '../button/index.js';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
+import { CopyToClipboardProps } from './types.js';
 import type React from 'react';
 
 export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {

projects/js-packages/components/components/copy-to-clipboard/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import CopyToClipboard from '../index';
+import CopyToClipboard from '../index.js';
 import type { StoryFn, Meta } from '@storybook/react';
 
 export default {

projects/js-packages/components/components/copy-to-clipboard/types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../button/types';
+import { ButtonProps } from '../button/types.js';
 
 export type CopyToClipboardProps = ButtonProps & {
 	buttonStyle?: 'icon' | 'text' | 'icon-text';

projects/js-packages/components/components/decorative-card/index.tsx

@@ -1,4 +1,4 @@
-import type { DecorativeCardProps } from './types';
+import type { DecorativeCardProps } from './types.js';
 import type React from 'react';
 import './style.scss';
 

projects/js-packages/components/components/decorative-card/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import DecorativeCard from '../index';
+import DecorativeCard from '../index.js';
 import type { StoryFn, Meta } from '@storybook/react';
 
 export default {

projects/js-packages/components/components/dialog/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import Col from '../layout/col';
-import Container from '../layout/container';
-import useBreakpointMatch from '../layout/use-breakpoint-match';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import styles from './style.module.scss';
 
 type DialogProps = {

projects/js-packages/components/components/dialog/stories/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Dialog from '..';
 import ProductOffer from '../../product-offer';
+import Dialog from '../index.js';
 import BoostImage from './boost.png';
 
 export default {

projects/js-packages/components/components/dialog/stories/js-components.components.dialog.stories.js

@@ -1,4 +1,4 @@
-import Dialog from '../index';
+import Dialog from '../index.js';
 import styles from './style.module.scss';
 
 const Template = ( { isTwoSections } ) => (

projects/js-packages/components/components/diff-viewer/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
-import parseFilename from './parse-filename';
-import parsePatch from './parse-patch';
+import parseFilename from './parse-filename.js';
+import parsePatch from './parse-patch.js';
 import styles from './styles.module.scss';
 
 const filename = ( {

projects/js-packages/components/components/diff-viewer/stories/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DiffViewer from '..';
+import DiffViewer from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Diff Viewer',

projects/js-packages/components/components/donut-meter/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import DonutMeter, { DonutMeterProps } from '../index';
+import DonutMeter, { DonutMeterProps } from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/DonutMeter',

projects/js-packages/components/components/donut-meter/test/component.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import DonutMeter, { DonutMeterProps } from '../index';
+import DonutMeter, { DonutMeterProps } from '../index.js';
 
 describe( 'DonutMeter', () => {
 	const testProps: DonutMeterProps = {