[REFACTOR] [CORE] Replace tsdx to tsup and tsc

package.json

@@ -25,9 +25,17 @@
   },
   "version": "5.0.4",
   "license": "BSD-3",
-  "module": "dist/esm/index.js",
-  "main": "src/index.tsx",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "module": "./dist/index.js",
+      "main": "./dist/index.cjs"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -42,15 +50,13 @@
   },
   "scripts": {
     "start": "NODE_OPTIONS=--max_old_space_size=16384 npm run storybook:serve",
-    "build": "tsdx build --format cjs,esm",
+    "build": "tsup && tsc",
     "test": "jest ./src ./test --passWithNoTests",
     "test:ci": "jest ./src ./test --passWithNoTests --runInBand --ci",
     "lint": "npx eslint src stories test --ext js,ts,tsx,jsx",
     "lint:staged": "npx eslint --ext js,ts,tsx,jsx",
-    "prepare": "tsdx build --format cjs,esm && husky install",
+    "prepare": "tsup && tsc && husky install",
     "format-code": "npx prettier . --write",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
     "storybook:serve": "storybook dev -p 9001",
     "storybook:build": "storybook build --docs",
     "storybook:build:base": "storybook build",
@@ -65,16 +71,6 @@
   "browserslist": [
     "extends browserslist-config-design-italia"
   ],
-  "size-limit": [
-    {
-      "path": "dist/cjs/index.js",
-      "limit": "200 KB"
-    },
-    {
-      "path": "dist/esm/index.js",
-      "limit": "200 KB"
-    }
-  ],
   "lint-staged": {
     "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged"
   },
@@ -120,18 +116,19 @@
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.0.3",
     "prettier": "^3.2.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.75.0",
     "storybook": "^8.0.5",
     "ts-jest": "^29.1.2",
-    "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
+    "tsup": "^8.0.2",
     "typeface-lora": "^1.1.13",
     "typeface-roboto-mono": "^1.1.13",
-    "typescript": "^4.8.2",
+    "typescript": "^5.4.5",
     "vite": "^5.2.7"
   },
   "dependencies": {
@@ -146,7 +143,6 @@
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
-    "jest-environment-jsdom": "29.7.0"
+    "@types/react-dom": "17.0.2"
   }
 }

src/Header/HeaderContext.tsx

@@ -4,7 +4,7 @@ export const SLIM = 'slim';
 export const CENTER = 'center';
 export const NAVBAR = 'navbar';
 
-export const HeaderContext = createContext<{
+export const HeaderContext = /* @__PURE__ */ createContext<{
   type?: typeof SLIM | typeof CENTER | typeof NAVBAR;
 }>({});
 

src/Icon/Icon.tsx

@@ -1,7 +1,7 @@
-import React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { isBundledIcon, loadIcon, allIcons, IconName } from './assets';
+import React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react';
 import { EmptyIcon } from './EmptyIcon';
+import { IconName, allIcons, isBundledIcon, loadIcon } from './assets/index';
 export type { IconName } from './assets';
 
 export const iconsList = allIcons;
@@ -13,13 +13,12 @@ let iconsCache: Record<IconName, FC<SVGProps<SVGSVGElement>>> = {};
  * @param icons - the list of icons to preload
  * @returns true if the icons have been preloaded
  */
-export function preloadIcons(icons: IconName[]) {
-  return Promise.all(icons.map((icon) => loadIcon(icon))).then((preloadedIcons) => {
-    preloadedIcons.forEach(({ component }, i) => {
-      iconsCache[icons[i]] = (() => component) as unknown as FC<SVGProps<SVGSVGElement>>;
-    });
-    return true;
+export async function preloadIcons(icons: IconName[]) {
+  const preloadedIcons = await Promise.all(icons.map((icon) => loadIcon(icon)));
+  preloadedIcons.forEach(({ component }, i) => {
+    iconsCache[icons[i]] = (() => component) as unknown as FC<SVGProps<SVGSVGElement>>;
   });
+  return true;
 }
 
 /**

src/NavScroll/index.tsx → src/NavScroll/index.ts

@@ -3,7 +3,7 @@
  * Released under the MIT license by Marco Liberati
  * Code: https://github.com/dej611/react-use-navscroll
  */
-
+/* @internal */
 export type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './types';
 
 export { useNavScroll } from './useNavScroll';

src/Notification/Notification.tsx

@@ -1,11 +1,11 @@
 import React, { CSSProperties, FC, useEffect } from 'react';
-import { ToastProps, useToast, cssTransition } from 'react-toastify';
+import { ToastProps, cssTransition, useToast } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
 export type NotificationProps = Omit<ToastProps, 'transition'> & NotificationCommonProps & NotificationToastProps;
 
-const dummyTransition = cssTransition({ enter: '', exit: '' });
+const dummyTransition = /* @__PURE__ */ cssTransition({ enter: '', exit: '' });
 
 export const Notification: FC<NotificationProps> = (props) => {
   const { toastRef, eventHandlers } = useToast({

src/Notification/NotificationManager.tsx

@@ -5,7 +5,7 @@ import { getBorderStyleFix } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 import { PositionContext } from './usePosition';
 
-const KitTransition = cssTransition({
+const KitTransition = /* @__PURE__ */ cssTransition({
   enter: `d-block`,
   exit: `d-none`,
   appendPosition: false

src/Notification/usePosition.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 import { NotificationCommonProps } from './types';
 
-export const PositionContext = createContext<NotificationCommonProps['fix']>(undefined);
+export const PositionContext = /* @__PURE__ */ createContext<NotificationCommonProps['fix']>(undefined);
 
 export function usePosition() {
   const context = useContext(PositionContext);

src/Toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
-import React, { ElementType, FC, HTMLAttributes, createContext } from 'react';
 import classnames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes, createContext } from 'react';
 
-export const SizeContext = createContext<ToolbarProps['size']>(undefined);
+export const SizeContext = /* @__PURE__ */ createContext<ToolbarProps['size']>(undefined);
 
 export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
   tag?: ElementType;

src/index.tsx → src/index.ts

@@ -115,8 +115,8 @@ export { ModalBody } from './Modal/ModalBody';
 export { ModalFooter } from './Modal/ModalFooter';
 export { ModalHeader } from './Modal/ModalHeader';
 export { Nav } from './Nav/Nav';
-export { useNavScroll } from './NavScroll';
-export { NotificationManager, createNotification, notify } from './Notification';
+export { useNavScroll } from './NavScroll/index';
+export { NotificationManager, createNotification, notify } from './Notification/index';
 export { Pager } from './Pager/Pager';
 export { Progress } from './Progress/Progress';
 export { Rating } from './Rating/Rating';
@@ -219,6 +219,7 @@ export type { ModalBodyProps } from './Modal/ModalBody';
 export type { ModalFooterProps } from './Modal/ModalFooter';
 export type { ModalHeaderProps } from './Modal/ModalHeader';
 export type { NavProps } from './Nav/Nav';
+export type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './NavScroll';
 export type { NotificationId, NotificationManagerProps, NotificationOptions, NotificationProps } from './Notification';
 export type { PagerProps } from './Pager/Pager';
 export type { ProgressProps } from './Progress/Progress';
@@ -292,4 +293,3 @@ export type {
   UncontrolledCollapseProps,
   UncontrolledTooltipProps
 } from 'reactstrap';
-export type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './NavScroll';

test/Storybook.test.tsx

@@ -3,7 +3,7 @@ import { composeStories, type Meta, type StoryFn } from '@storybook/react';
 import { act, render } from '@testing-library/react';
 import * as glob from 'glob';
 import path from 'path';
-import './__mocks__/IntersectionObserverMock.ts';
+import './__mocks__/IntersectionObserverMock';
 
 type StoryFile = {
   default: Meta;
@@ -14,17 +14,13 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
   try {
     return composeStories(entry);
   } catch (e) {
-    throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
-    );
+    throw new Error(`There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`);
   }
 };
 
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
-  const storyFiles = glob.sync(
-    path.join(__dirname, '..', 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
-  );
+  const storyFiles = glob.sync(path.join(__dirname, '..', 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'));
 
   return storyFiles.map((filePath) => {
     const storyFile = require(filePath);
@@ -45,7 +41,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
         );
       }
 
@@ -55,10 +51,10 @@ describe('Stories Snapshots', () => {
           await act(async () => {
             // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
             await new Promise((resolve) => setTimeout(resolve, 1));
-          })
+          });
           expect(mounted.container).toMatchSnapshot();
         });
       });
     });
   });
-});
+});

src/utils.test.tsx → test/utils.test.tsx

@@ -1,15 +1,15 @@
 jest.spyOn(console, 'error').mockImplementation();
 
 // eslint-disable-next-line import/first
-import { flushMessageCache, logError, mapToCssModules, notifyDeprecation, omit, pick } from './utils';
+import { flushMessageCache, logError, mapToCssModules, notifyDeprecation, omit, pick } from '../src/utils';
 
 describe('Kit utils', () => {
   describe('mapToCssModules', () => {
     it('should return empty string for undefined or null', () => {
       expect(mapToCssModules(null)).toBe('');
       expect(mapToCssModules(null, {})).toBe('');
       expect(mapToCssModules(null, { null: 'nil' })).toBe('');
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       expect(mapToCssModules(undefined)).toBe('');
     });
 
@@ -45,9 +45,9 @@ describe('Kit utils', () => {
     });
 
     it("should return an empty object if there's no key overlapping", () => {
-      // @ts-expect-error
+      // @ts-expect-error descrizione 
       expect(pick({ a: 'value', b: 'value', c: 'value' }, ['e'])).toEqual({});
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       expect(pick({ a: 'value', b: 'value', c: 'value' }, 'e')).toEqual({});
     });
   });
@@ -72,13 +72,13 @@ describe('Kit utils', () => {
     });
 
     it("should return the same object if there's no key overlapping", () => {
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       expect(omit({ a: 'value', b: 'value', c: 'value' }, ['e'])).toEqual({
         a: 'value',
         b: 'value',
         c: 'value'
       });
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       expect(omit({ a: 'value', b: 'value', c: 'value' }, 'e')).toEqual({
         a: 'value',
         b: 'value',
@@ -90,7 +90,7 @@ describe('Kit utils', () => {
   describe('logError', () => {
     beforeEach(() => {
       flushMessageCache();
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       console.error.mockClear();
     });
     it('should basically work', () => {
@@ -102,7 +102,7 @@ describe('Kit utils', () => {
   describe('notifyDeprecation', () => {
     beforeEach(() => {
       flushMessageCache();
-      // @ts-expect-error
+      // @ts-expect-error descrizione
       console.error.mockClear();
     });
     it('should propagate the error message', () => {