Merge pull request #447 from sugarlabs/gsoc-dmp-2025/week-6/justin

GSoC/DMP Week 6: feat(masonry): add drag and drop, collision detection, and reverse mapping

Author: meganindya

modules/masonry/package.json

@@ -13,6 +13,9 @@
     "playground": "vite playground --host --port 5601"
   },
   "dependencies": {
+    "@react-aria/dnd": "^3.10.1",
+    "@react-stately/dnd": "^3.6.0",
+    "recoil": "^0.7.7",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

modules/masonry/playground/App.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import WorkspaceApp from './pages/Workspace/index';
+import CollisionDetection from '../src/collision-detection/CollisionDetection';
+
+export default function App() {
+  const [tab, setTab] = useState<'workspace' | 'collision' | 'collision-detection'>('workspace');
+
+  return (
+    <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'column' }}>
+      {/* Top-right tab bar */}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          zIndex: 1000,
+          display: 'flex',
+          background: '#f8f9fa',
+          borderBottom: '1px solid #ddd',
+          borderLeft: '1px solid #ddd',
+          borderRadius: '0 0 0 12px',
+          boxShadow: '0 2px 8px #dfe6e9',
+        }}
+      >
+        <button
+          onClick={() => setTab('workspace')}
+          style={{
+            padding: '12px 24px',
+            border: 'none',
+            background: tab === 'workspace' ? '#3498db' : 'transparent',
+            color: tab === 'workspace' ? 'white' : '#2c3e50',
+            fontWeight: 600,
+            cursor: 'pointer',
+            borderBottom: tab === 'workspace' ? '2px solid #2980b9' : 'none',
+            outline: 'none',
+            borderRadius: '0 0 0 12px',
+          }}
+        >
+          Workspace
+        </button>
+        <button
+          onClick={() => setTab('collision-detection')}
+          style={{
+            padding: '12px 24px',
+            border: 'none',
+            background: tab === 'collision-detection' ? '#e17055' : 'transparent',
+            color: tab === 'collision-detection' ? 'white' : '#2c3e50',
+            fontWeight: 600,
+            cursor: 'pointer',
+            borderBottom: tab === 'collision-detection' ? '2px solid #d35400' : 'none',
+            outline: 'none',
+          }}
+        >
+          Collision Detection
+        </button>
+      </div>
+
+      {/* Main Content */}
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          marginTop: 48,
+        }}
+      >
+        {tab === 'workspace' && <WorkspaceApp />}
+        {tab === 'collision-detection' && <CollisionDetection />}
+      </div>
+    </div>
+  );
+}

modules/masonry/playground/index.tsx

@@ -1,18 +1,13 @@
-import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '../src/palette/palette.css';
+import App from './App';
+import { RecoilRoot } from 'recoil';
 
-import WorkSpace from './pages/workspace';
-
-const router = createBrowserRouter([
-  {
-    path: '/workspace',
-    element: <WorkSpace />,
-  },
-  {
-    path: '/',
-    element: <Navigate to="/workspace" />,
-  },
-]);
-
-const root = createRoot(document.getElementById('playground-root') as HTMLElement);
-root.render(<RouterProvider router={router} />);
+ReactDOM.createRoot(document.getElementById('playground-root')!).render(
+  <React.StrictMode>
+    <RecoilRoot>
+      <App />
+    </RecoilRoot>
+  </React.StrictMode>,
+);