fix(react): update react import paths to include extension

fixes: Creat React App / Webpack 5 #6622

Signed-off-by: Ashley Ryan <asryan@vmware.com>

.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
     sourceType: 'module',
   },
   ignorePatterns: ['**/*.css.ts', 'tools/**'],
-  plugins: ['@typescript-eslint', 'jasmine', 'clarity'],
+  plugins: ['@typescript-eslint', 'import', 'jasmine', 'clarity'],
   rules: {
     'accessor-pairs': 'error',
     curly: 'error',

package.json

@@ -99,11 +99,11 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@commitlint/prompt": "^15.0.0",
-    "commitizen": "^4.2.4",
     "@types/node": "^16.11.11",
     "@typescript-eslint/eslint-plugin": "5.5.0",
     "@typescript-eslint/parser": "5.5.0",
     "cheerio": "1.0.0-rc.10",
+    "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
     "cpy-cli": "^3.1.1",
     "cross-env": "5.2.0",
@@ -113,6 +113,7 @@
     "dotenv": "8.1.0",
     "eslint": "8.3.0",
     "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jasmine": "4.1.3",
     "fs-extra": "8.1.0",
     "glob": "7.1.6",

packages/core/.eslintrc.js

@@ -24,6 +24,7 @@ const rules = {
   '@typescript-eslint/no-use-before-define': OFF,
   '@typescript-eslint/ban-types': [ERROR, { types: bannedTSTypes }],
   '@typescript-eslint/explicit-member-accessibility': [ERROR, { accessibility: 'no-public' }],
+  'import/extensions': [ERROR, 'ignorePackages'],
   'no-restricted-imports': [
     ERROR,
     {

packages/core/src/internal/controllers/controller.stories.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -15,7 +15,7 @@ import {
 } from '@cds/core/internal';
 import '@cds/core/badge/register.js';
 import { InlineFocusTrapController } from './inline-focus-trap.controller.js';
-import { querySlotAll } from '../decorators/query-slot';
+import { querySlotAll } from '../decorators/query-slot.js';
 
 export default {
   title: 'Internal Stories/Controllers',

packages/core/src/internal/motion/interfaces.ts

@@ -1,11 +1,11 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 import { ReactiveElement } from 'lit';
-import { EventEmitter } from '../decorators/event';
+import { EventEmitter } from '../decorators/event.js';
 
 /* GLOBALS */
 

packages/core/src/internal/motion/utils.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -15,7 +15,7 @@ import {
   CLARITY_MOTION_FALLBACK_DURATION_IN_MS,
   CLARITY_MOTION_REVERSE_ANIMATION_SUFFIX,
   PropertyDrivenAnimation,
-} from './interfaces';
+} from './interfaces.js';
 import {
   filterAnimationsByUpdatedProperties,
   flattenAndSortAnimations,

packages/react/.eslintrc.js

@@ -23,6 +23,7 @@ const rules = {
       varsIgnorePattern: 'React|Cds',
     },
   ],
+  'import/extensions': [ERROR, 'ignorePackages'],
 };
 
 const parserOptions = {
@@ -31,10 +32,20 @@ const parserOptions = {
   sourceType: 'module',
 };
 
+const overrides = [
+  {
+    files: ['*.test.tsx'],
+    rules: {
+      'import/extensions': OFF,
+    },
+  },
+];
+
 const config = {
   extends: '../../.eslintrc.js',
   parserOptions,
   rules,
+  overrides,
 };
 
 module.exports = config;

packages/react/jest.config.js

@@ -9,6 +9,7 @@ module.exports = {
   moduleNameMapper: {
     '@cds/(.*)': '<rootDir>/../core/dist/$1',
     '../converter/react-wrapper.js': '<rootDir>/dist/react/converter/react-wrapper.js',
+    '.*(utils/index.js)$': '<rootDir>/dist/react/utils/index.js',
   },
   setupFilesAfterEnv: ['./jest.setup.ts'],
   snapshotSerializers: ['enzyme-to-json/serializer'],

packages/react/src/accordion/index.tsx

@@ -5,7 +5,7 @@ import { CdsAccordionPanel as AccordionPanel } from '@cds/core/accordion';
 import '@cds/core/accordion/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 // add react util here in all components.
 // Document that it needs to be part of each component in React.

packages/react/src/alert/index.tsx

@@ -2,7 +2,7 @@ import { CdsAlert as Alert, CdsAlertActions as AlertActions, CdsAlertGroup as Al
 import '@cds/core/alert/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsAlert = createComponent(React, 'cds-alert', Alert, { onCloseChange: 'closeChange' }, 'CdsAlert');
 export const CdsAlertActions = createComponent(React, 'cds-alert-actions', AlertActions, {}, 'CdsAlertActions');

packages/react/src/badge/index.tsx

@@ -2,7 +2,7 @@ import { CdsBadge as Badge } from '@cds/core/badge';
 import '@cds/core/badge/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsBadge = createComponent(React, 'cds-badge', Badge, {}, 'CdsBadge');
 

packages/react/src/breadcrumb/index.tsx

@@ -2,7 +2,7 @@ import { CdsBreadcrumb as Breadcrumb } from '@cds/core/breadcrumb';
 import '@cds/core/breadcrumb/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsBreadcrumb = createComponent(React, 'cds-breadcrumb', Breadcrumb, {}, 'CdsBreadcrumb');
 

packages/react/src/button-action/index.tsx

@@ -2,7 +2,7 @@ import { CdsButtonAction as ButtonAction } from '@cds/core/button-action';
 import '@cds/core/button-action/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButtonAction = createComponent(React, 'cds-button-action', ButtonAction, {}, 'CdsButtonAction');
 

packages/react/src/button-expand/index.tsx

@@ -2,7 +2,7 @@ import { CdsButtonExpand as ButtonExpand } from '@cds/core/button-expand';
 import '@cds/core/button-expand/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButtonExpand = createComponent(React, 'cds-button-expand', ButtonExpand, {}, 'CdsButtonExpand');
 

packages/react/src/button-handle/index.tsx

@@ -2,7 +2,7 @@ import { CdsButtonHandle as ButtonHandle } from '@cds/core/button-handle';
 import '@cds/core/button-handle/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButtonHandle = createComponent(React, 'cds-button-handle', ButtonHandle, {}, 'CdsButtonHandle');
 

packages/react/src/button-inline/index.tsx

@@ -2,7 +2,7 @@ import { CdsButtonInline as ButtonInline } from '@cds/core/button-inline';
 import '@cds/core/button-inline/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButtonInline = createComponent(React, 'cds-button-inline', ButtonInline, {}, 'CdsButtonInline');
 

packages/react/src/button-sort/index.tsx

@@ -2,7 +2,7 @@ import { CdsButtonSort as ButtonSort } from '@cds/core/button-sort';
 import '@cds/core/button-sort/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButtonSort = createComponent(React, 'cds-button-sort', ButtonSort, {}, 'CdsButtonSort');
 

packages/react/src/button/index.tsx

@@ -3,7 +3,7 @@ import '@cds/core/button/register';
 import { CdsButtonInline as InlineButton } from '@cds/core/button-inline';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsButton = createComponent(React, 'cds-button', Button, {}, 'CdsButton');
 export const CdsIconButton = createComponent(React, 'cds-icon-button', IconButton, {}, 'CdsIconButton');

packages/react/src/card/index.tsx

@@ -2,7 +2,7 @@ import { CdsCard as Card } from '@cds/core/card';
 import '@cds/core/card/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsCard = createComponent(React, 'cds-card', Card, {}, 'CdsCard');
 

packages/react/src/checkbox/index.tsx

@@ -2,7 +2,7 @@ import { CdsCheckbox as Checkbox, CdsCheckboxGroup as CheckboxGroup } from '@cds
 import '@cds/core/checkbox/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsCheckbox = createComponent(React, 'cds-checkbox', Checkbox, {}, 'CdsCheckbox');
 export const CdsCheckboxGroup = createComponent(React, 'cds-checkbox-group', CheckboxGroup, {}, 'CdsCheckboxGroup');

packages/react/src/datalist/index.tsx

@@ -2,7 +2,7 @@ import { CdsDatalist as Datalist } from '@cds/core/datalist';
 import '@cds/core/datalist/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsDatalist = createComponent(React, 'cds-datalist', Datalist, {}, 'CdsDatalist');
 

packages/react/src/date/index.tsx

@@ -2,7 +2,7 @@ import { CdsDate as DateInput } from '@cds/core/date';
 import '@cds/core/date/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsDate = createComponent(React, 'cds-date', DateInput, {}, 'CdsDate');
 

packages/react/src/divider/index.tsx

@@ -2,7 +2,7 @@ import { CdsDivider as Divider } from '@cds/core/divider';
 import '@cds/core/divider/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsDivider = createComponent(React, 'cds-divider', Divider, {}, 'CdsDivider');
 

packages/react/src/dropdown/index.tsx

@@ -2,7 +2,7 @@ import { CdsDropdown as Dropdown } from '@cds/core/dropdown';
 import '@cds/core/dropdown/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsDropdown = createComponent(
   React,

packages/react/src/file/index.tsx

@@ -2,7 +2,7 @@ import { CdsFile as File } from '@cds/core/file';
 import '@cds/core/file/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsFile = createComponent(React, 'cds-file', File, {}, 'CdsFile');
 

packages/react/src/forms/index.tsx

@@ -8,7 +8,7 @@ import {
 import '@cds/core/forms/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsControlMessage = createComponent(React, 'cds-control-message', ControlMessage);
 export const CdsControlAction = createComponent(React, 'cds-control-action', ControlAction);

packages/react/src/icon/index.tsx

@@ -2,7 +2,7 @@ import { CdsIcon as Icon } from '@cds/core/icon';
 import '@cds/core/icon/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 /**
  * If using JSX or TSX, import the icon name from `@cds/core/icon` and include it in the `shape` prop to improve type safety:

packages/react/src/input/index.tsx

@@ -2,7 +2,7 @@ import { CdsInput as Input, CdsInputGroup as InputGroup } from '@cds/core/input'
 import '@cds/core/input/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsInput = createComponent(React, 'cds-input', Input, {}, 'CdsInput');
 export const CdsInputGroup = createComponent(React, 'cds-input-group', InputGroup, {}, 'CdsInputGroup');

packages/react/src/internal-components/close-button/index.tsx

@@ -1,7 +1,7 @@
 import { CdsInternalCloseButton as CloseButton } from '@cds/core/internal-components/close-button';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../../utils/index';
+import { logReactVersion } from '../../utils/index.js';
 
 export const CdsInternalCloseButton = createComponent(
   React,

packages/react/src/internal-components/overlay/index.tsx

@@ -2,7 +2,7 @@ import { CdsInternalOverlay as Overlay } from '@cds/core/internal-components/ove
 import '@cds/core/internal-components/overlay/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../../utils';
+import { logReactVersion } from '../../utils/index.js';
 
 export const CdsInternalOverlay = createComponent(
   React,

packages/react/src/internal-components/panel/index.tsx

@@ -2,7 +2,7 @@ import { CdsInternalPanel as Panel } from '@cds/core/internal-components/panel';
 import '@cds/core/internal-components/panel/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../../utils/index';
+import { logReactVersion } from '../../utils/index.js';
 
 export const CdsInternalPanel = createComponent(React, 'cds-internal-panel', Panel, {}, 'CdsInternalPanel');
 

packages/react/src/internal-components/popup/index.tsx

@@ -2,7 +2,7 @@ import { CdsInternalPopup as Popup, CdsInternalPointer as Pointer } from '@cds/c
 import '@cds/core/internal-components/popup/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../../utils';
+import { logReactVersion } from '../../utils/index.js';
 
 export const CdsInternalPopup = createComponent(
   React,

packages/react/src/internal-components/visual-checkbox/index.tsx

@@ -2,7 +2,7 @@ import { CdsInternalVisualCheckbox as VisualCheckbox } from '@cds/core/internal-
 import '@cds/core/internal-components/visual-checkbox/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../../utils/index';
+import { logReactVersion } from '../../utils/index.js';
 
 export const CdsInternalVisualCheckbox = createComponent(
   React,

packages/react/src/modal/index.tsx

@@ -8,7 +8,7 @@ import {
 import '@cds/core/modal/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsModal = createComponent(
   React,

packages/react/src/navigation/index.tsx

@@ -13,7 +13,7 @@ import {
 import '@cds/core/navigation/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsNavigation = createComponent(
   React,

packages/react/src/pagination/index.tsx

@@ -2,7 +2,7 @@ import { CdsPagination as Pagination, CdsPaginationButton as PaginationButton }
 import '@cds/core/pagination/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsPagination = createComponent(React, 'cds-pagination', Pagination, {}, 'CdsPagination');
 export const CdsPaginationButton = createComponent(

packages/react/src/password/index.tsx

@@ -2,7 +2,7 @@ import { CdsPassword as Password } from '@cds/core/password';
 import '@cds/core/password/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsPassword = createComponent(React, 'cds-password', Password, {}, 'CdsPassword');
 

packages/react/src/progress-circle/index.tsx

@@ -2,7 +2,7 @@ import { CdsProgressCircle as ProgressCircle } from '@cds/core/progress-circle';
 import '@cds/core/progress-circle/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsProgressCircle = createComponent(React, 'cds-progress-circle', ProgressCircle, {}, 'CdsProgressCircle');
 

packages/react/src/radio/index.tsx

@@ -2,7 +2,7 @@ import { CdsRadio as Radio, CdsRadioGroup as RadioGroup } from '@cds/core/radio'
 import '@cds/core/radio/register';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { logReactVersion } from '../utils/index';
+import { logReactVersion } from '../utils/index.js';
 
 export const CdsRadio = createComponent(React, 'cds-radio', Radio, {}, 'CdsRadio');
 export const CdsRadioGroup = createComponent(React, 'cds-radio-group', RadioGroup, {}, 'CdsRadioGroup');