fix: Properly setup library exports and fix CJS build (#70)

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Properly export ESM/CJS library depending on current environment and fix CJS build
+
 ## [1.0.10] - 2024-02-05
 
 ### Added

docs/installation.mdx

@@ -52,7 +52,7 @@ library:
 -   Import the Aragon ODS stylesheet bundle in your project entry file (e.g. `src/index.js` or `App.js`):
 
     ```typescript
-    import '@aragon/ods/bundle.css';
+    import '@aragon/ods/build.css';
     ```
 
 # Usage

package.json

@@ -54,8 +54,7 @@
     "classnames": "^2.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-imask": "^7.3.0",
-    "react-merge-refs": "^2.0.0"
+    "react-imask": "^7.3.0"
   },
   "peerDependencies": {
     "@tailwindcss/typography": "^0.5.0",
@@ -121,5 +120,20 @@
   "engines": {
     "node": ">=18",
     "npm": "please-use-yarn"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/src/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/types/src/index.d.ts",
+        "default": "./dist/index.cjs.js"
+      }
+    },
+    "./index.css": "./index.css",
+    "./build.css": "./build.css",
+    "./tailwind.config": "./tailwind.config.js"
   }
 }

src/components/input/inputDate/inputDate.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
-import * as MergeRefs from 'react-merge-refs';
+import * as Utils from '../../../utils';
 import { IconType } from '../../icon';
 import { InputDate, type IInputDateProps } from './inputDate';
 
 describe('<InputDate /> component', () => {
     const useRefMock = jest.spyOn(React, 'useRef');
-    const mergeRefMock = jest.spyOn(MergeRefs, 'mergeRefs');
+    const mergeRefMock = jest.spyOn(Utils, 'mergeRefs');
 
     afterEach(() => {
         useRefMock.mockReset();

src/components/input/inputDate/inputDate.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { forwardRef, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
+import { mergeRefs } from '../../../utils';
 import { Button } from '../../button';
 import { IconType } from '../../icon';
 import { useInputProps } from '../hooks';

src/components/input/inputTime/inputTime.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
-import * as MergeRefs from 'react-merge-refs';
+import * as Utils from '../../../utils';
 import { IconType } from '../../icon';
 import { InputTime, type IInputTimeProps } from './inputTime';
 
 describe('<InputTime /> component', () => {
     const useRefMock = jest.spyOn(React, 'useRef');
-    const mergeRefMock = jest.spyOn(MergeRefs, 'mergeRefs');
+    const mergeRefMock = jest.spyOn(Utils, 'mergeRefs');
 
     afterEach(() => {
         useRefMock.mockReset();

src/components/input/inputTime/inputTime.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { forwardRef, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
+import { mergeRefs } from '../../../utils';
 import { Button } from '../../button';
 import { IconType } from '../../icon';
 import { useInputProps } from '../hooks';

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './formatterUtils';
+export * from './mergeRefs';
 export * from './responsiveUtils';

src/utils/mergeRefs/index.ts

@@ -0,0 +1 @@
+export { mergeRefs } from './mergeRefs';

src/utils/mergeRefs/mergeRefs.test.ts

@@ -0,0 +1,19 @@
+import { mergeRefs } from './mergeRefs';
+
+describe('mergeRefs util', () => {
+    it('correctly set value for function refs', () => {
+        const functionRef = jest.fn();
+        const value = 'test';
+        const refSetter = mergeRefs([functionRef]);
+        refSetter(value);
+        expect(functionRef).toHaveBeenCalledWith(value);
+    });
+
+    it('correctly set value for mutable ref object', () => {
+        const mutableRef = { current: null };
+        const value = 'new-value';
+        const refSetter = mergeRefs<string | null>([mutableRef]);
+        refSetter(value);
+        expect(mutableRef.current).toEqual(value);
+    });
+});

src/utils/mergeRefs/mergeRefs.ts

@@ -0,0 +1,18 @@
+import type { LegacyRef, MutableRefObject, RefCallback } from 'react';
+
+/**
+ * Utility to merge multiple React refs, inspired by https://github.com/gregberge/react-merge-refs
+ */
+export const mergeRefs = <T = unknown>(
+    refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>,
+): RefCallback<T> => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref != null) {
+                (ref as MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+};