feat: convert the package to proper ES module

.eslintrc.json

@@ -82,7 +82,8 @@
         "@typescript-eslint/no-inferrable-types": 0,
         "@typescript-eslint/explicit-member-accessibility": 0,
         "@typescript-eslint/explicit-function-return-type": 0,
-        "@typescript-eslint/ban-ts-comment": "warn"
+        "@typescript-eslint/ban-ts-comment": "warn",
+        "@typescript-eslint/no-explicit-any": "warn"
       }
     }
   ],

jest.config.js → jest.config.cjs

@@ -11,6 +11,8 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '\\.svg$': '<rootDir>/__mocks__/fileMock.tsx',
+    '~/(.*)': '<rootDir>/src/$1',
+    '__mocks__/(.*)': '<rootDir>/__mocks__/$1',
   },
   setupFilesAfterEnv: [`<rootDir>/setup-jest.ts`],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx,js,jsx,mdx,md}'],

package.json

@@ -1,14 +1,22 @@
 {
   "name": "@orfium/toolbox",
   "version": "0.0.0",
+  "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
-    "types": "./dist/types/index.d.ts",
-    "import": "./dist/esm/index.js",
-    "require": "./dist/cjs/index.js",
-    "default": "./dist/cjs/index.js"
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "default": "./dist/cjs/index.js"
+    }
   },
   "files": [
     "dist"
@@ -32,7 +40,6 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@orfium/ictinus": "^4.80.0-alpha.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
@@ -46,16 +53,13 @@
     "@types/jwt-encode": "^1.0.0",
     "@types/react": "^17.0.44",
     "@types/react-router-dom": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "eslint": "8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-sonar-reporter": "^2.0.0",
     "jwt-encode": "^1.0.1",
@@ -66,12 +70,13 @@
     "react-dom": "^18.1.0",
     "react-router-dom": "^5.3.1",
     "rimraf": "^3.0.2",
+    "rollup": "^4.12.0",
     "ts-jest": "^27.1.4",
     "ts-lib": "^0.0.5",
     "tsc-watch": "^5.0.3",
     "tslib": "^2.3.1",
     "typedoc": "^0.22.13",
-    "typescript": "^4.6.3"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -87,9 +92,7 @@
     "prepublishOnly": "yarn build",
     "documentation": "cd documentation && yarn start",
     "documentation:build": "cd documentation && yarn install && yarn build",
-    "build": "rimraf ./dist/types && npm run build:esm && npm run build:cjs",
-    "build:esm": "rimraf ./dist/esm && tsc -p tsconfig.prod.json --module esnext --outDir dist/esm && copyfiles -u 1 ./src/assets/* ./src/assets/products/* ./dist/esm/",
-    "build:cjs": "rimraf ./dist/cjs && tsc -p tsconfig.prod.json --module commonjs --outDir dist/cjs && copyfiles -u 1 ./src/assets/* ./src/assets/products/* ./dist/cjs/",
+    "build": "rimraf ./dist && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript && tsc -p tsconfig.build.types.json",
     "yalc:push": "yalc publish --push",
     "watch": "tsc-watch --noClear -p ./tsconfig.json --onSuccess \"yarn yalc:push\"",
     "lint": "eslint './src/**/*.{ts,tsx}'",

rollup.config.ts

@@ -0,0 +1,39 @@
+import typescript from '@rollup/plugin-typescript';
+import svgr from '@svgr/rollup';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'dist/cjs',
+        format: 'cjs',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    ],
+    plugins: [
+      svgr(),
+      typescript({
+        tsconfig: 'tsconfig.build.cjs.json',
+      }),
+    ],
+  },
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'dist/esm',
+        format: 'esm',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    ],
+    plugins: [
+      svgr(),
+      typescript({
+        tsconfig: 'tsconfig.build.esm.json',
+      }),
+    ],
+  },
+];

sonar-project.properties

@@ -1,7 +1,7 @@
 sonar.projectKey=Orfium_toolbox
 sonar.language=ts
 sonar.sourceEncoding=UTF-8
-sonar.exclusions=documentation/**, typeDocs/**, **/__snapshots__/**, __mocks__/**, setup-jest.ts, rollup.config.js, jest.config.js
+sonar.exclusions=documentation/**, typeDocs/**, **/__snapshots__/**, __mocks__/**, setup-jest.ts, rollup.config.ts, jest.config.cjs
 sonar.gitlab.max_critical_issues_gate=4
-sonar.coverage.exclusions=**/test/**, **/tests/**, typeDocs/**, __mocks__/**, documentation/**, docs/**, **/__snapshots__/**, **/*.stories.mdx, **/*.test.{ts,tsx}, **/*.tests.{ts,tsx}, **/*.style.ts,setup-jest.ts, rollup.config.js, jest.config.js
+sonar.coverage.exclusions=**/test/**, **/tests/**, typeDocs/**, __mocks__/**, documentation/**, docs/**, **/__snapshots__/**, **/*.stories.mdx, **/*.test.{ts,tsx}, **/*.tests.{ts,tsx}, **/*.style.ts,setup-jest.ts, rollup.config.ts, jest.config.cjs
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info

src/__tests__/Authentication.test.tsx

@@ -14,24 +14,24 @@ class CustomError extends Error {
 import { ErrorBoundary, useErrorHandler } from 'react-error-boundary';
 
 import {
-  fakeTokenData,
   FAKE_TOKEN,
+  fakeTokenData,
   getNewFakeToken,
-  getTokenSilently as mockedGetTokenSilently,
   getUser,
-  handleRedirectCallback as mockedHandleRedirectCallback,
   isAuthenticated,
   loginWithRedirect,
-} from '../../__mocks__/@auth0/auth0-spa-js';
-import { defaultAuthenticationContextValues } from '../contexts/authentication';
-import { useAuthentication } from '../hooks';
-import { Authentication } from '../providers/Authentication';
-import { Organizations } from '../providers/Organizations';
-import { orfiumIdBaseInstance } from '../request';
-import MockRequest from '../request/mock';
-import useOrganization from '../store/organizations';
-import useRequestToken from '../store/requestToken';
-import { getTokenSilently, logoutAuth, onRedirectCallback } from '../utils/auth';
+  getTokenSilently as mockedGetTokenSilently,
+  handleRedirectCallback as mockedHandleRedirectCallback,
+} from '__mocks__/@auth0/auth0-spa-js';
+import { defaultAuthenticationContextValues } from '~/contexts/authentication';
+import { useAuthentication } from '~/hooks';
+import { Authentication } from '~/providers/Authentication';
+import { Organizations } from '~/providers/Organizations';
+import { orfiumIdBaseInstance } from '~/request';
+import MockRequest from '~/request/mock';
+import useOrganization from '~/store/organizations';
+import useRequestToken from '~/store/requestToken';
+import { getTokenSilently, logoutAuth, onRedirectCallback } from '~/utils/auth';
 
 const TestingComponentSimple = () => {
   const { user, isAuthenticated, isLoading } = useAuthentication();
@@ -78,12 +78,16 @@ const TestingComponent = () => {
 
 describe('Context', () => {
   const apiInstance = orfiumIdBaseInstance.instance;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const mock: MockRequest = new MockRequest(apiInstance);
   // let client;
 
   beforeEach(() => {
     jest.resetModules();
     // client = undefined;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onGet('/products/').reply(200, [
       {
         name: 'string',
@@ -101,6 +105,8 @@ describe('Context', () => {
   afterEach(() => {
     // clear all mocks and mocked values
     jest.clearAllMocks();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.reset();
     mockedGetTokenSilently.mockReset();
     getUser.mockReset();
@@ -224,6 +230,8 @@ describe('Context', () => {
       const { token, decodedToken } = await getTokenSilently();
 
       expect(token).toBe(FAKE_TOKEN);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       expect(decodedToken).toEqual(jwtDecode(token));
     });
 
@@ -253,6 +261,8 @@ describe('Context', () => {
       const { token, decodedToken } = await getTokenSilently();
 
       expect(token).toBe(NEW_FAKE_EXPIRED_TOKEN);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       expect(decodedToken).toEqual(jwtDecode(token));
       expect(decodedToken.org_id).toEqual(fakeTokenData.org_id); // the org_id of the token
     });

src/routing/Routing.test.tsx → src/__tests__/Routing.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 
-import { generateRoutes, RoutingStructure } from './Routing';
+import { generateRoutes, RoutingStructure } from '~/routing/Routing';
 
 import '@testing-library/jest-dom';
 

src/__tests__/Toolbox.test.tsx

@@ -5,10 +5,10 @@ import {
   getTokenSilently,
   isAuthenticated,
   loginWithRedirect,
-} from '../../__mocks__/@auth0/auth0-spa-js';
-import { Authentication } from '../providers/Authentication';
-import { orfiumIdBaseInstance } from '../request';
-import MockRequest from '../request/mock';
+} from '__mocks__/@auth0/auth0-spa-js';
+import { Authentication } from '~/providers/Authentication';
+import { orfiumIdBaseInstance } from '~/request';
+import MockRequest from '~/request/mock';
 const TestComp = () => {
   return <div data-testid={'test'}>Test</div>;
 };
@@ -18,6 +18,8 @@ describe('Authentication: ', () => {
   const apiInstance = orfiumIdBaseInstance.instance;
 
   beforeEach(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock = new MockRequest(apiInstance);
   });
 
@@ -37,6 +39,8 @@ describe('Authentication: ', () => {
   xit('renders the test component', async () => {
     getTokenSilently.mockResolvedValue(getNewFakeToken());
     isAuthenticated.mockResolvedValue(true);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onGet('/memberships/').reply(200, [{ org_id: 'a' }]);
 
     const { findByTestId } = render(
@@ -53,6 +57,8 @@ describe('Authentication: ', () => {
   xit('redirects to login if not authenticated', async () => {
     isAuthenticated.mockResolvedValue(false);
     getTokenSilently.mockResolvedValue(getNewFakeToken());
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onGet('/memberships/').replyOnce(200, []);
 
     render(
@@ -78,6 +84,8 @@ describe('Authentication: ', () => {
   xit('renders the no organization message when it should', async () => {
     getTokenSilently.mockResolvedValue(getNewFakeToken());
     isAuthenticated.mockResolvedValue(true);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onGet('/memberships/').replyOnce(200, []);
 
     const { findByTestId } = render(

src/__tests__/check-that-getAuth0Client-throws-properly.test.tsx

@@ -1,5 +1,5 @@
-import { createAuth0Client as mockedCreateAuth0 } from '../../__mocks__/@auth0/auth0-spa-js';
-import { getAuth0Client, logoutAuth } from '../utils/auth';
+import { createAuth0Client as mockedCreateAuth0 } from '__mocks__/@auth0/auth0-spa-js';
+import { getAuth0Client, logoutAuth } from '~/utils/auth';
 
 test('getAuth0Client failed process', async () => {
   expect.assertions(1);

src/request/request.test.ts → src/__tests__/request.test.ts

@@ -1,10 +1,11 @@
 import { cleanup } from '@testing-library/react';
-import { AxiosInstance } from 'axios';
+import { AxiosInstance, type AxiosRequestConfig } from 'axios';
 
 // @ts-ignore
-import { FAKE_TOKEN, getTokenSilently } from '../../__mocks__/@auth0/auth0-spa-js';
-import { createAPIInstance, CreateAPIInstanceType, METHODS } from './index';
-import MockRequest from './mock';
+import { FAKE_TOKEN, getTokenSilently } from '__mocks__/@auth0/auth0-spa-js';
+import { CreateAPIInstanceType, createAPIInstance } from '~/request/createAPIInstance';
+import MockRequest from '~/request/mock';
+import { METHODS } from '~/request/request';
 
 describe('Request: ', () => {
   let factory: CreateAPIInstanceType;
@@ -16,13 +17,19 @@ describe('Request: ', () => {
   beforeEach(() => {
     factory = createAPIInstance({ baseUrl });
     apiInstance = factory.instance;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock = new MockRequest(apiInstance);
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onGet('/test-api-with-orfium-base/').reply(200, {
       hasBeenCalled: true,
     });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.onPost('/test-post/').reply(
-      (config) => {
+      (config: AxiosRequestConfig) => {
         return new Promise(function (resolve) {
           setTimeout(function () {
             const data = JSON.parse(config.data);
@@ -37,7 +44,11 @@ describe('Request: ', () => {
   });
 
   afterEach(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.restore();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     mock.restore();
     cleanup();
   });

src/contexts/organizations.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import { type SwitchOrganization, type _SwitchOrganization } from '../providers/Organizations';
-import { type Organization } from '../store/organizations';
+import { type SwitchOrganization, type _SwitchOrganization } from '~/providers/Organizations';
+import { type Organization } from '~/store/organizations';
 
 export type OrganizationsContextValue = {
   organizations: Organization[];

src/hooks/useAuthentication.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { AuthenticationContext } from '../contexts/authentication';
+import { AuthenticationContext } from '~/contexts/authentication';
 
 export const useAuthentication = () => useContext(AuthenticationContext);