Use .js imports in src (#727)

* Use .js in src imports

* Bump dev

packages/react-identicon/src/Identicon.tsx

@@ -6,22 +6,22 @@ import type { IdentityProps as Props, Props as ComponentProps } from './types';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
 import { ICON_DEFAULT_HOST, settings } from '@polkadot/ui-settings';
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
 
-import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons';
+import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
 
 // In styled-components v6, there is a named export which can be used
 // directly, i.e. "import { styled } from ..." with no more magic. Until
 // such time the cjs vs esm import here is problematic, so we hack around
 // the various shapes below
 const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 const Fallback = Beachball;

packages/react-identicon/src/bundle.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
+export * from './icons/index.js';
 
-export { Identicon } from './Identicon';
-export { packageInfo } from './packageInfo';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

packages/react-identicon/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/react-identicon/src/icons/Ethereum.tsx

@@ -5,16 +5,16 @@ import type { Props } from '../types';
 
 import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
-import styledComponents from 'styled-components';
+import styledComponents, { StyledInterface } from 'styled-components';
 
 // In styled-components v6, there is a named export which can be used
 // directly, i.e. "import { styled } from ..." with no more magic. Until
 // such time the cjs vs esm import here is problematic, so we hack around
 // the various shapes below
 const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
 );
 
 interface ImgProps {

packages/react-identicon/src/icons/index.ts

@@ -1,8 +1,8 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { Beachball } from './Beachball';
-export { Empty } from './Empty';
-export { Ethereum } from './Ethereum';
-export { Jdenticon } from './Jdenticon';
-export { Polkadot } from './Polkadot';
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';

packages/react-identicon/src/index.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import { Identicon } from './bundle';
+import { Identicon } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;