feat(draggable-core): Create package

README.md

@@ -14,6 +14,7 @@
 |---------|-------------|---------|--------------|
 | 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) |
 | 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) |
+| 📦 [`@rocket.chat/draggable-core`](/packages/draggable-core) | Core API for managing draggable elements | [![npm](https://img.shields.io/npm/v/@rocket.chat/draggable-core?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/draggable-core) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/draggable-core?style=flat-square) |
 | 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |

packages/draggable-core/.gitignore

@@ -0,0 +1 @@
+/dist

packages/draggable-core/.prettierignore

@@ -0,0 +1 @@
+/dist

packages/draggable-core/README.md

@@ -0,0 +1,139 @@
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
+</p>
+
+# `@rocket.chat/draggable-core`
+
+> Core API for managing draggable elements
+
+---
+
+[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/draggable-core/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/draggable-core/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/draggable-core/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/draggable-core/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/draggable-core?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/draggable-core?style=flat-square)
+
+![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/draggable-core?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/draggable-core?style=flat-square)
+
+<!--/header-->
+
+## Install
+
+<!--install-->
+
+Add `@rocket.chat/draggable-core` as a dependency:
+
+```sh
+npm i @rocket.chat/draggable-core
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/draggable-core
+```
+
+<!--/install-->
+
+## Contributing
+
+<!--contributing(msg)-->
+
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).
+
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
+```sh
+yarn lint
+```
+
+<!--/yarn(lint)-->
+
+Some linter warnings and errors can be automatically fixed:
+
+<!--yarn(lint-and-fix)-->
+
+```sh
+yarn lint-and-fix
+```
+
+<!--/yarn(lint-and-fix)-->
+
+### Running tests
+
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->
+
+## Development with Vite
+
+This package now includes Vite configuration for a better development experience.
+
+### Running the Development Server
+
+To start the Vite development server:
+
+```bash
+yarn vite:dev
+```
+
+This will start a development server at http://localhost:3000 with hot module replacement.
+
+### Building for Production
+
+To build the package for production:
+
+```bash
+yarn vite:build
+```
+
+This will generate optimized production files in the `dist/vite` directory.
+
+### Previewing the Production Build
+
+To preview the production build locally:
+
+```bash
+yarn vite:preview
+```
+
+This will serve the production build at http://localhost:3000.
+
+## Example Usage
+
+The package includes a simple demo that demonstrates the draggable functionality. When you run the development server, you'll see a blue box that you can drag around the screen.
+
+To use the `DraggableElement` class in your own project:
+
+```typescript
+import { DraggableElement } from '@rocket.chat/draggable-core';
+
+// Create a draggable element
+const element = document.getElementById('my-element');
+const draggable = new DraggableElement(element);
+```

packages/draggable-core/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@rocket.chat/draggable-core",
+  "version": "0.0.1",
+  "description": "Core API for managing draggable elements",
+  "homepage": "https://github.com/RocketChat/fuselage#readme",
+  "bugs": {
+    "url": "https://github.com/RocketChat/fuselage/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/fuselage.git",
+    "directory": "packages/draggable-core"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "dev": "run vite:dev",
+    ".:build:cjs": "tsc -p tsconfig.cjs.json",
+    ".:build:esm": "tsc -p tsconfig.esm.json",
+    "build": "run clean && run .:build:esm && run .:build:cjs && cp ./src/index.html ./dist/esm/index.html",
+    "clean": "rimraf dist",
+    "docs": "typedoc",
+    "lint": "lint",
+    "lint-and-fix": "lint-and-fix",
+    "test": "jest --runInBand",
+    "vite:dev": "vite",
+    "vite:build": "vite build",
+    "vite:preview": "vite preview"
+  },
+  "jest": {
+    "errorOnDeprecated": true,
+    "preset": "ts-jest",
+    "testMatch": [
+      "<rootDir>/src/**/*.spec.[jt]s?(x)"
+    ]
+  },
+  "devDependencies": {
+    "@types/jest": "~27.4.0",
+    "eslint": "~8.8.0",
+    "jest": "~27.5.1",
+    "lint-all": "workspace:~",
+    "prettier": "~3.3.3",
+    "rimraf": "~6.0.1",
+    "ts-jest": "~27.1.3",
+    "typedoc": "~0.24.1",
+    "typescript": "~5.5.4",
+    "vite": "~6.2.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rocket.chat/emitter": "workspace:~"
+  }
+}

packages/draggable-core/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Draggable Core Demo</title>
+</head>
+<body style="width: 300px; height: 300px; border: 1px solid red;">
+    <div id="app"></div>
+    <script type="module" src="./index.ts"></script>
+</body>
+</html>