[WEB-5048] chore: implements esm exports for all packages (#7816)

* fix: esm module imports for live and editor

* fix: convert all pacakges to export esm and cjs build

* fix: auto export

* fix: translation files formatting

* fix: convert eslint files to cjs files for supporting current config

* fix: code uuid package upgrade

---------

Co-authored-by: Aaron Reisman <aaron.reisman@plane.so>

packages/ui/package.json

@@ -5,12 +5,17 @@
   "version": "1.0.0",
   "sideEffects": false,
   "license": "AGPL-3.0",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
@@ -29,8 +34,8 @@
     "react-dom": "catalog:"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.1.10",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop": "catalog:",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",

packages/ui/src/form-fields/input-color-picker.tsx

@@ -1,6 +1,7 @@
 import { Popover, Transition } from "@headlessui/react";
 import * as React from "react";
-import { ColorResult, SketchPicker } from "react-color";
+import * as ColorPicker from "react-color";
+import type { ColorResult } from "react-color";
 import { usePopper } from "react-popper";
 // helpers
 import { Button } from "../button";
@@ -100,7 +101,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
                     style={styles.popper}
                     {...attributes.popper}
                   >
-                    <SketchPicker color={value} onChange={handleColorChange} />
+                    <ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
                   </div>
                 </Popover.Panel>
               </Transition>

packages/ui/src/sortable/draggable.tsx

@@ -1,6 +1,12 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
 import { isEqual } from "lodash-es";
 import React, { useEffect, useRef, useState } from "react";
 import { DropIndicator } from "../drop-indicator";

packages/ui/src/sortable/sortable.tsx

@@ -1,4 +1,4 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
 import React, { Fragment, useEffect, useMemo } from "react";
 import { Draggable } from "./draggable";
 

packages/ui/tsconfig.json

@@ -1,9 +1,8 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+    "esModuleInterop": true
+  }
 }

packages/ui/tsdown.config.ts

@@ -4,4 +4,8 @@ export default defineConfig({
   entry: ["src/index.ts"],
   outDir: "dist",
   format: ["esm", "cjs"],
+  exports: true,
+  dts: true,
+  clean: true,
+  sourcemap: true,
 });