More collaborative work

Author: goanpeca

CLAUDE.md

@@ -2,11 +2,11 @@
 
 ## Quick Overview
 
-React component library for Jupyter notebooks. Monorepo with 4 packages managed by Lerna.
+React component library for Jupyter notebooks. Monorepo with 5 packages managed by Lerna.
 
 ## Core Packages
 
-- `@datalayer/jupyter-react` - React components for notebooks, cells, terminals
+- `@datalayer/jupyter-react` - Generic React components for notebooks, cells, terminals
 - `@datalayer/jupyter-lexical` - Rich text editor integration
 - `@datalayer/jupyter-docusaurus-plugin` - Docusaurus plugin
 - `datalayer-jupyter-vscode` - VS Code extension
@@ -50,7 +50,7 @@ npm run start-local:webpack  # Start only webpack with local config
 - `packages/react/public/index-local.html` - Local server config
 - `dev/config/jupyter_server_config.py` - Jupyter server settings
 
-## Recent Fixes (2024-2025)
+## Recent Changes (2024-2025)
 
 - MDX comments: `{/_` → `{/** **/}` in 13 files
 - Node requirement: 18 → 20+
@@ -61,6 +61,14 @@ npm run start-local:webpack  # Start only webpack with local config
 - Storybook CI: Added wait-on and --url for test reliability
 - Terminal component: Fixed BoxPanel initialization issue
 - **Collaboration fix**: Updated WebSocket room path from `api/collaboration/document` to `api/collaboration/room` for jupyter-collaboration v4.x compatibility
+- **Architecture refactor**: Cleaned up to maintain generic, reusable components only
+- **Provider system**: Implemented pluggable collaboration provider architecture
+- **Clean API**: Removed deprecated `collaborative` prop in favor of `collaborationProvider`
+- **Notebook2 support**: Added collaboration provider support to Notebook2 component
+- **Simplified provider API**: JupyterCollaborationProvider no longer requires `type` in config
+- **Path flexibility**: Notebook path prop takes precedence over provider config
+- **Factory pattern removed**: Simplified collaboration API - components now only accept provider instances, not configurations
+- **Direct instantiation**: Providers are now instantiated directly by users (e.g., `new JupyterCollaborationProvider()`)
 
 ## Common Issues
 
@@ -107,11 +115,47 @@ const ENTRY = './src/examples/NotebookCollaborative'; // Change this line
 
 Then restart webpack.
 
+## Architecture
+
+### Package Structure
+
+- `@datalayer/jupyter-react` - Generic, reusable Jupyter components
+- Designed to be extended by external packages for platform-specific implementations
+
+### Collaboration Provider System
+
+- Interface: `ICollaborationProvider` in `packages/react/src/jupyter/collaboration/`
+- Built-in providers:
+  - `JupyterCollaborationProvider` - WebSocket-based with Y.js for Jupyter servers
+  - `NoOpCollaborationProvider` - No-op provider for non-collaborative mode
+- Direct instantiation pattern (factory pattern removed for simplicity)
+- Usage:
+
+  ```tsx
+  // Generic Jupyter collaboration
+  const provider = new JupyterCollaborationProvider();
+  <Notebook collaborationProvider={provider} path="notebook.ipynb" />;
+
+  // Or with configuration
+  const provider = new JupyterCollaborationProvider({
+    path: 'my-notebook.ipynb',
+    serverSettings: myServerSettings,
+  });
+  <Notebook collaborationProvider={provider} />;
+  ```
+
+### Key Components
+
+- `Notebook` - Base notebook component (accepts `collaborationProvider` prop)
+- `Notebook2` - Alternative notebook implementation with collaboration support
+- Extensible through `ICollaborationProvider` interface
+
 ## AI Assistant Notes
 
 - Always use npm, not yarn
 - Prefer editing over creating files
-- Run lint/type checks before committing
+- Run lint/format/type-check checks after finishing a round of changes
 - Comment out old code instead of deleting when making changes
-
-- Use the playwright MCP server when you need to actually see how the frendered pages look
+- Use the playwright MCP server when you need to actually see how the rendered pages look
+- Follow composition over inheritance pattern
+- Maintain clean separation between generic and platform-specific code

README.md

@@ -20,12 +20,12 @@ Jupyter UI is a set of [React.js](https://react.dev) components that allow a fro
 
 ## 📦 Packages
 
-| Package                                                              | Version                                                                                                                                                                                         | Description                                   |
-| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
-| [@datalayer/jupyter-react](./packages/react)                         | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-react)](https://www.npmjs.com/package/@datalayer/jupyter-react)                                                                         | Core React components for Jupyter integration |
-| [@datalayer/jupyter-lexical](./packages/lexical)                     | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-lexical)](https://www.npmjs.com/package/@datalayer/jupyter-lexical)                                                                     | Rich text editor with Lexical framework       |
-| [@datalayer/jupyter-docusaurus-plugin](./packages/docusaurus-plugin) | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-docusaurus-plugin)](https://www.npmjs.com/package/@datalayer/jupyter-docusaurus-plugin)                                                 | Docusaurus plugin for Jupyter notebooks       |
-| [datalayer-jupyter-vscode](./packages/vscode)                        | [![marketplace](https://img.shields.io/visual-studio-marketplace/v/datalayer.datalayer-jupyter-vscode)](https://marketplace.visualstudio.com/items?itemName=datalayer.datalayer-jupyter-vscode) | VS Code extension                             |
+| Package                                                              | Version                                                                                                                                                                                         | Description                             |
+| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| [@datalayer/jupyter-react](./packages/react)                         | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-react)](https://www.npmjs.com/package/@datalayer/jupyter-react)                                                                         | Generic React components for Jupyter    |
+| [@datalayer/jupyter-lexical](./packages/lexical)                     | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-lexical)](https://www.npmjs.com/package/@datalayer/jupyter-lexical)                                                                     | Rich text editor with Lexical framework |
+| [@datalayer/jupyter-docusaurus-plugin](./packages/docusaurus-plugin) | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-docusaurus-plugin)](https://www.npmjs.com/package/@datalayer/jupyter-docusaurus-plugin)                                                 | Docusaurus plugin for Jupyter notebooks |
+| [datalayer-jupyter-vscode](./packages/vscode)                        | [![marketplace](https://img.shields.io/visual-studio-marketplace/v/datalayer.datalayer-jupyter-vscode)](https://marketplace.visualstudio.com/items?itemName=datalayer.datalayer-jupyter-vscode) | VS Code extension                       |
 
 ## 🚀 Quick Start
 
@@ -53,6 +53,54 @@ function App() {
 }
 ```
 
+### Collaborative Editing
+
+Jupyter UI supports real-time collaboration through a pluggable provider system:
+
+```tsx
+import {
+  Notebook,
+  JupyterCollaborationProvider,
+} from '@datalayer/jupyter-react';
+
+function CollaborativeNotebook() {
+  const collaborationProvider = new JupyterCollaborationProvider();
+
+  return (
+    <Notebook
+      path="notebook.ipynb"
+      collaborationProvider={collaborationProvider}
+    />
+  );
+}
+```
+
+#### Creating Custom Collaboration Providers
+
+You can create your own collaboration provider by extending `CollaborationProviderBase`:
+
+```tsx
+import { CollaborationProviderBase } from '@datalayer/jupyter-react';
+
+class MyCustomProvider extends CollaborationProviderBase {
+  constructor(config) {
+    super('my-provider-type');
+    // Initialize your provider
+  }
+
+  async connect(sharedModel, documentId, options) {
+    // Implement your connection logic
+    // Set up WebSocket, authenticate, etc.
+  }
+}
+
+// Use it with any Notebook component
+const provider = new MyCustomProvider({
+  /* config */
+});
+<Notebook collaborationProvider={provider} path="notebook.ipynb" />;
+```
+
 ### Development Setup
 
 As a developer start with the [setup of your environment](https://jupyter-ui.datalayer.tech/docs/develop/setup) and try [one of the examples](https://jupyter-ui.datalayer.tech/docs/category/examples). We have [documentation](https://jupyter-ui.datalayer.tech) for more details.
@@ -100,17 +148,26 @@ We host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that show
 ### Advanced Features
 
 - **🔌 IPyWidgets Support** - Full support for interactive widgets
-- **👥 Collaborative Editing** - Real-time collaboration using Y.js
+- **👥 Collaborative Editing** - Pluggable provider system supporting:
+  - Jupyter collaboration (WebSocket-based with Y.js)
+  - Custom providers via `ICollaborationProvider` interface
 - **🎨 Theming** - JupyterLab theme support with dark/light modes
 - **🔧 Extensible** - Plugin system for custom functionality
 - **🚀 Performance** - Virtual scrolling, lazy loading, and optimizations
 - **🔒 Security** - Token authentication, CORS, XSS protection
 
+### Architecture Highlights
+
+- **🏗️ Clean Architecture** - Modular, composable components with clear interfaces
+- **🔄 Composition Pattern** - Components compose rather than inherit for maximum flexibility
+- **🔌 Provider System** - Pluggable collaboration providers for different backends
+- **📦 One-way Dependencies** - Core depends on jupyter-react, not vice versa
+
 <div align="center" style="text-align: center">
   <img alt="Jupyter UI Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
 </div>
 
-The above image shows a gallery of the available React.js components ready to be used in you custom application. These open source components are used to build [Datalayer](https://datalayer.io), a collaborative platform for data analysis.
+The above image shows a gallery of the available React.js components ready to be used in your custom application.
 
 ## Why?
 
@@ -151,7 +208,7 @@ We maintain a plugin for [Docusaurus](https://docusaurus.io) in the [docusaurus-
 
 ## 📋 Requirements
 
-- **Node.js** >= 18.0.0
+- **Node.js** >= 20.0.0
 - **npm** >= 8.0.0
 - **Python** >= 3.8 (for Jupyter server)
 - **JupyterLab** >= 4.0.0

SUMMARY.md

@@ -4,6 +4,15 @@
 
 Jupyter UI is an open-source React.js component library that bridges the gap between the Jupyter ecosystem and modern web development frameworks. It provides React components that are 100% compatible with Jupyter, allowing developers to build custom data products without being constrained by the traditional JupyterLab interface.
 
+## Recent Updates (January 2025)
+
+### Collaboration Provider System
+
+- Implemented plugin-based architecture for extensible collaboration
+- Built-in providers: `JupyterCollaborationProvider`, `NoOpCollaborationProvider`
+- Direct instantiation pattern for simplicity
+- Added collaboration support to `Notebook2` component
+
 ### Core Problem Solved
 
 Traditional JupyterLab uses the Lumino widget toolkit, an imperative UI framework that isn't compatible with modern declarative frameworks like React. This forces developers to either:
@@ -23,7 +32,7 @@ The project uses Lerna to manage a monorepo structure with the following organiz
 ```
 jupyter-ui/
 ├── packages/           # Core library packages
-│   ├── react/         # Main React component library
+│   ├── react/         # Main React component library (generic)
 │   ├── lexical/       # Rich text editor integration
 │   ├── docusaurus-plugin/  # Docusaurus integration
 │   └── vscode/        # VS Code extension
@@ -60,12 +69,15 @@ The main package providing React components for Jupyter functionality.
 - Provides React context providers for state management
 - Supports both local and remote Jupyter servers
 - Implements WebSocket communication for real-time updates
+- Plugin-based collaboration provider system
+- Extensible without platform-specific code
 
 **Key Files:**
 
 - `src/jupyter/JupyterContext.tsx` - Core context provider
-- `src/components/notebook/Notebook.tsx` - Main notebook component
+- `src/components/notebook/Notebook.tsx` - Main notebook component (accepts collaborationProvider)
 - `src/providers/ServiceManagerProvider.tsx` - Service management
+- `src/jupyter/collaboration/ICollaborationProvider.ts` - Provider interface
 
 ### 2. @datalayer/jupyter-lexical (v1.0.3)
 
@@ -454,7 +466,6 @@ The repository includes several example implementations:
 
 ## Community & Ecosystem
 
-- Active development by Datalayer, Inc.
 - MIT licensed
 - Integration with major React frameworks
 - Storybook for component documentation

dev/notebooks/collaboration.ipynb

@@ -10,11 +10,27 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
+   "execution_count": 1,
+   "metadata": {
+    "execution": {
+     "iopub.execute_input": "2025-08-18T03:45:22.030426Z",
+     "iopub.status.busy": "2025-08-18T03:45:22.030160Z",
+     "iopub.status.idle": "2025-08-18T03:45:22.036464Z",
+     "shell.execute_reply": "2025-08-18T03:45:22.036172Z",
+     "shell.execute_reply.started": "2025-08-18T03:45:22.030412Z"
+    }
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Hello from collaboration notebook!\n"
+     ]
+    }
+   ],
    "source": [
-    "print('Hello from collaboration notebook!')"
+    "print('Hello from collaboration notebook!') hola"
    ]
   },
   {
@@ -24,10 +40,17 @@
    "outputs": [],
    "source": [
     "# Test collaboration by editing this cell\n",
-    "x = 10a\n",
+    "x = 10aas test hello\n",
     "y = 20asd\n",
-    "print(f'x + y = {x + y}') asass"
+    "print(f'x + y = {x + y}') asass boo oom"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -46,7 +69,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.13.5"
+   "version": "3.12.7"
   }
  },
  "nbformat": 4,

packages/react/src/components/codemirror/CodeMirrorDatalayerEditor.tsx renamed to packages/react/src/components/codemirror/CodeMirrorEditor.tsx

@@ -16,7 +16,7 @@ import useOutputsStore from '../output/OutputState';
 import codeMirrorTheme from './CodeMirrorTheme';
 import CodeMirrorOutputToolbar from './CodeMirrorOutputToolbar';
 
-export const CodeMirrorDatalayerEditor = (props: {
+export const CodeMirrorEditor = (props: {
   code: string;
   codePre?: string;
   outputAdapter: OutputAdapter;
@@ -147,4 +147,7 @@ export const CodeMirrorDatalayerEditor = (props: {
   );
 };
 
-export default CodeMirrorDatalayerEditor;
+// Deprecated: Use CodeMirrorEditor instead of CodeMirrorDatalayerEditor
+export const CodeMirrorDatalayerEditor = CodeMirrorEditor;
+
+export default CodeMirrorEditor;

packages/react/src/components/codemirror/index.ts

@@ -4,6 +4,8 @@
  * MIT License
  */
 
-export * from './CodeMirrorDatalayerEditor';
+export * from './CodeMirrorEditor';
+// Deprecated: CodeMirrorDatalayerEditor is now CodeMirrorEditor
+export { CodeMirrorDatalayerEditor } from './CodeMirrorEditor';
 export * from './CodeMirrorOutputToolbar';
 export * from './CodeMirrorTheme';

packages/react/src/components/index.ts

@@ -6,7 +6,7 @@
 
 export * from './button';
 export * from './cell';
-// export * from './codemirror';
+export * from './codemirror';
 export * from './commands';
 export * from './console';
 export * from './dialog';