chore: Add file extension to imports, add eslint-plugin-require-exten…

…sions eslint plugin

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:prettier/recommended',
     'plugin:no-unsanitized/DOM',
+    'plugin:require-extensions/recommended',
   ],
   parserOptions: {
     ecmaVersion: 2018,
@@ -24,6 +25,7 @@ module.exports = {
     'no-unsanitized',
     'header',
     'simple-import-sort',
+    'require-extensions',
   ],
   rules: {
     '@typescript-eslint/no-empty-function': 'off',
@@ -142,12 +144,19 @@ module.exports = {
         '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },
+    {
+      files: ['src-themeable/**'],
+      rules: {
+        'require-extensions/require-extensions': 'off',
+      },
+    },
     {
       files: ['pages/**'],
       globals: {
         Promise: true,
       },
       rules: {
+        'require-extensions/require-extensions': 'off',
         '@cloudscape-design/ban-files': [
           'error',
           [

build-tools/tasks/generate-i18n-messages.js

@@ -52,8 +52,8 @@ module.exports = function generateI18nMessages() {
   // Generate a dynamic provider function for automatic bundler splitting and imports.
   const dynamicFile = [
     `import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
-import { isDevelopment } from '../internal/is-development';
-import { getMatchableLocales } from './get-matchable-locales';
+import { isDevelopment } from '../internal/is-development.js';
+import { getMatchableLocales } from './get-matchable-locales.js';
 
 export function importMessages(locale) {
   for (const matchableLocale of getMatchableLocales(locale)) {

package.json

@@ -98,6 +98,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^45.0.1",
     "execa": "^4.1.0",

src/__a11y__/a11y-app-layout-toolbar.test.ts

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import { findAllPages } from '../__integ__/utils';
-import { getUrlParams } from '../app-layout/__integ__/utils';
-import A11yPageObject from './a11y-page-object';
+import { findAllPages } from '../__integ__/utils.js';
+import { getUrlParams } from '../app-layout/__integ__/utils.js';
+import A11yPageObject from './a11y-page-object.js';
 
 const EXCLUDED_PAGES = [
   // Test page for an app layout nested inside another through an iframe.

src/__a11y__/a11y-dark.test.ts

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import runA11yTests from './run-a11y-tests';
+import runA11yTests from './run-a11y-tests.js';
 
 runA11yTests('default', 'dark');

src/__a11y__/a11y-light.test.ts

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import runA11yTests from './run-a11y-tests';
+import runA11yTests from './run-a11y-tests.js';
 
 runA11yTests('default', 'light');

src/__a11y__/a11y-page-object.ts

@@ -5,7 +5,7 @@ import fs from 'fs';
 
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 
-import { runOptions, spec } from './axe';
+import { runOptions, spec } from './axe.js';
 
 import tableStyles from '../../lib/components/table/styles.selectors.js';
 

src/__a11y__/a11y-refresh-dark.test.ts

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import runA11yTests from './run-a11y-tests';
+import runA11yTests from './run-a11y-tests.js';
 
 runA11yTests('visual-refresh', 'dark');

src/__a11y__/a11y-refresh-light.test.ts

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import runA11yTests from './run-a11y-tests';
+import runA11yTests from './run-a11y-tests.js';
 
 runA11yTests('visual-refresh', 'light');

src/__a11y__/misc.test.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import A11yPageObject from './a11y-page-object';
+import A11yPageObject from './a11y-page-object.js';
 
 test(
   'undefined texts finder works',

src/__a11y__/run-a11y-tests.ts

@@ -3,8 +3,8 @@
 
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import { findAllPages } from '../__integ__/utils';
-import A11yPageObject from './a11y-page-object';
+import { findAllPages } from '../__integ__/utils.js';
+import A11yPageObject from './a11y-page-object.js';
 
 type Theme = 'default' | 'visual-refresh';
 type Mode = 'light' | 'dark';

src/__a11y__/to-validate-a11y.ts

@@ -5,7 +5,7 @@ import Axe from 'axe-core';
 import { HtmlValidate } from 'html-validate';
 import { compact, uniq } from 'lodash';
 
-import { runOptions, spec } from './axe';
+import { runOptions, spec } from './axe.js';
 
 declare global {
   namespace jest {

src/__integ__/page-objects/async-dropdown-page.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 
-import AutosuggestWrapper from '../../../lib/components/test-utils/selectors/autosuggest';
-import SelectWrapper from '../../../lib/components/test-utils/selectors/select';
+import AutosuggestWrapper from '../../../lib/components/test-utils/selectors/autosuggest/index.js';
+import SelectWrapper from '../../../lib/components/test-utils/selectors/select/index.js';
 
 interface APIResponse {
   items: NonNullable<Array<any>>;

src/__integ__/page-objects/button-dropdown-page.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 
-import createWrapper from '../../../lib/components/test-utils/selectors';
-import ButtonDropdownWrapper from '../../../lib/components/test-utils/selectors/button-dropdown';
+import ButtonDropdownWrapper from '../../../lib/components/test-utils/selectors/button-dropdown/index.js';
+import createWrapper from '../../../lib/components/test-utils/selectors/index.js';
 
 const wrapper = createWrapper();
 export default class ButtonDropdownPage extends BasePageObject {

src/__integ__/toggles.test.ts

@@ -3,7 +3,7 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import createWrapper from '../../lib/components/test-utils/selectors';
+import createWrapper from '../../lib/components/test-utils/selectors/index.js';
 
 const wrappers = {
   checkbox: createWrapper().findCheckbox(),

src/__tests__/functional-tests/base-props-support.test.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent, supportsDOMProperties } from '../utils';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent, supportsDOMProperties } from '../utils.js';
 
 describe('Base props support', () => {
   const componentRoot = document.createElement('div');

src/__tests__/functional-tests/form-field-controls-integration.test.tsx

@@ -3,11 +3,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import FormField, { FormFieldProps } from '../../../lib/components/form-field';
-import { FormFieldValidationControlProps } from '../../../lib/components/internal/context/form-field-context';
-import createWrapper, { ElementWrapper } from '../../../lib/components/test-utils/dom';
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { requireComponent } from '../utils';
+import FormField, { FormFieldProps } from '../../../lib/components/form-field/index.js';
+import { FormFieldValidationControlProps } from '../../../lib/components/internal/context/form-field-context.js';
+import createWrapper, { ElementWrapper } from '../../../lib/components/test-utils/dom/index.js';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { requireComponent } from '../utils.js';
 
 const formFieldControlComponents = [
   {

src/__tests__/functional-tests/naming-convention.test.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { pascalCase } from 'change-case';
 
-import { getAllComponents, requireComponent } from '../utils';
+import { getAllComponents, requireComponent } from '../utils.js';
 
 describe('component displayName matches import directory name', () => {
   getAllComponents().forEach(componentName => {

src/__tests__/functional-tests/outer-form-submit.test.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent } from '../utils';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent } from '../utils.js';
 
 const skippedComponents = ['button'];
 

src/__tests__/functional-tests/ssr.test.ts

@@ -7,8 +7,8 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent } from '../utils';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent } from '../utils.js';
 
 test('ensure is it not DOM', () => {
   expect(typeof window).toBe('undefined');

src/__tests__/functional-tests/test-a11y-validator.test.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
-import '../../__a11y__/to-validate-a11y';
+import '../../__a11y__/to-validate-a11y.js';
 
 describe('a11y validator', () => {
   test('valid', async () => {

src/__tests__/functional-tests/test-utils.test.tsx

@@ -9,12 +9,12 @@ import { render } from 'react-dom';
 import { render as renderTestingLibrary } from '@testing-library/react';
 import { pascalCase } from 'change-case';
 
-import { Modal } from '../../../lib/components';
-import Button from '../../../lib/components/button';
-import createWrapperDom, { ElementWrapper as DomElementWrapper } from '../../../lib/components/test-utils/dom';
-import createWrapperSelectors from '../../../lib/components/test-utils/selectors';
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent } from '../utils';
+import Button from '../../../lib/components/button/index.js';
+import { Modal } from '../../../lib/components/index.js';
+import createWrapperDom, { ElementWrapper as DomElementWrapper } from '../../../lib/components/test-utils/dom/index.js';
+import createWrapperSelectors from '../../../lib/components/test-utils/selectors/index.js';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent } from '../utils.js';
 
 const componentWithMultipleRootElements = ['top-navigation', 'app-layout'];
 const componentsWithExceptions = ['annotation-context', ...componentWithMultipleRootElements];

src/__tests__/functional-tests/use-base-component.test.tsx

@@ -6,9 +6,9 @@ import { pascalCase } from 'change-case';
 
 import { COMPONENT_METADATA_KEY } from '@cloudscape-design/component-toolkit/internal';
 
-import { PACKAGE_VERSION } from '../../../lib/components/internal/environment';
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent, supportsDOMProperties } from '../utils';
+import { PACKAGE_VERSION } from '../../../lib/components/internal/environment.js';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent, supportsDOMProperties } from '../utils.js';
 
 describe('useBaseComponent hook is used in all allowlisted public components', () => {
   const componentRoot = document.createElement('div');

src/__tests__/functional-tests/use-telemetry-usage.test.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { getRequiredPropsForComponent } from '../required-props-for-components';
-import { getAllComponents, requireComponent } from '../utils';
+import { getRequiredPropsForComponent } from '../required-props-for-components.js';
+import { getAllComponents, requireComponent } from '../utils.js';
 
 declare global {
   interface Window {

src/__tests__/required-props-for-components.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { i18nStrings } from '../code-editor/__tests__/common';
-export { defaultSplitPanelContextProps } from '../split-panel/__tests__/helpers';
+import { i18nStrings } from '../code-editor/__tests__/common.js';
+export { defaultSplitPanelContextProps } from '../split-panel/__tests__/helpers.js';
 
 const defaultProps: Record<string, Record<string, any>> = {
   tabs: { tabs: [] },

src/__tests__/snapshot-tests/design-tokens.test.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { requireDesignTokensFile } from '../utils';
+import { requireDesignTokensFile } from '../utils.js';
 
 const themeNames = ['classic', 'visual-refresh'];
 

src/__tests__/snapshot-tests/documenter.test.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { getAllComponents, requireComponentDefinition } from '../utils';
+import { getAllComponents, requireComponentDefinition } from '../utils.js';
 
 describe('Documenter', () => {
   test.each<string>(getAllComponents())(`definition for %s matches the snapshot`, (componentName: string) => {

src/__tests__/utils.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import fs from 'fs';
 import path from 'path';
 
-import { SplitPanelContextProvider } from '../../lib/components/internal/context/split-panel-context';
-import { defaultSplitPanelContextProps } from './required-props-for-components';
+import { SplitPanelContextProvider } from '../../lib/components/internal/context/split-panel-context.js';
+import { defaultSplitPanelContextProps } from './required-props-for-components.js';
 
 const componentsDir = path.resolve(__dirname, '../../lib/components');
 const definitionsDir = path.resolve(__dirname, '../../lib/components-definitions/components');

src/alert/__integ__/runtime-content.test.ts

@@ -3,7 +3,7 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import createWrapper from '../../../lib/components/test-utils/selectors';
+import createWrapper from '../../../lib/components/test-utils/selectors/index.js';
 
 class RuntimeContentPage extends BasePageObject {
   async rerenderAlerts() {

src/alert/__tests__/alert-analytics.test.tsx

@@ -3,15 +3,15 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
 
-import Alert from '../../../lib/components/alert';
-import { FunnelMetrics } from '../../../lib/components/internal/analytics';
+import Alert from '../../../lib/components/alert/index.js';
 import {
   AnalyticsFunnel,
   AnalyticsFunnelStep,
   AnalyticsFunnelSubStep,
-} from '../../../lib/components/internal/analytics/components/analytics-funnel';
-import { useFunnel } from '../../../lib/components/internal/analytics/hooks/use-funnel';
-import { mockFunnelMetrics, mockGetBoundingClientRect } from '../../internal/analytics/__tests__/mocks';
+} from '../../../lib/components/internal/analytics/components/analytics-funnel.js';
+import { useFunnel } from '../../../lib/components/internal/analytics/hooks/use-funnel.js';
+import { FunnelMetrics } from '../../../lib/components/internal/analytics/index.js';
+import { mockFunnelMetrics, mockGetBoundingClientRect } from '../../internal/analytics/__tests__/mocks.js';
 
 mockGetBoundingClientRect();
 

src/alert/__tests__/alert.test.tsx

@@ -3,15 +3,15 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import '../../__a11y__/to-validate-a11y';
-import Alert, { AlertProps } from '../../../lib/components/alert';
-import Button from '../../../lib/components/button';
-import TestI18nProvider from '../../../lib/components/i18n/testing';
-import { DATA_ATTR_ANALYTICS_ALERT } from '../../../lib/components/internal/analytics/selectors';
-import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';
-import createWrapper from '../../../lib/components/test-utils/dom';
+import '../../__a11y__/to-validate-a11y.js';
+import Alert, { AlertProps } from '../../../lib/components/alert/index.js';
+import Button from '../../../lib/components/button/index.js';
+import TestI18nProvider from '../../../lib/components/i18n/testing.js';
+import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode/index.js';
+import createWrapper from '../../../lib/components/test-utils/dom/index.js';
 
 import styles from '../../../lib/components/alert/styles.css.js';
+import { DATA_ATTR_ANALYTICS_ALERT } from '../../../lib/components/internal/analytics/selectors.js';
 
 jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
   ...jest.requireActual('../../../lib/components/internal/hooks/use-visual-mode'),