test

Author: goanpeca

.github/workflows/build.yml

@@ -64,8 +64,8 @@ jobs:
       - name: Serve Storybook and run all tests
         run: |
           npx serve -l 6006 storybook-static &
-          sleep 5
-          npm run test:all
+          npx wait-on http://localhost:6006 --timeout 30000
+          npm run test:all:ci
         working-directory: storybook
 
       - name: Upload test results

CLAUDE.md

@@ -2,203 +2,63 @@
 
 ## Quick Overview
 
-React component library for building Jupyter-compatible applications. Monorepo with Lerna managing 4 main packages and multiple examples.
+React component library for Jupyter notebooks. Monorepo with 4 packages managed by Lerna.
 
 ## Core Packages
 
-- `@datalayer/jupyter-react` - Main React components for notebooks, cells, terminals
-- `@datalayer/jupyter-lexical` - Rich text editor with Lexical framework integration
-- `@datalayer/jupyter-docusaurus-plugin` - Plugin for Docusaurus sites
-- `datalayer-jupyter-vscode` - VS Code extension for notebooks
+- `@datalayer/jupyter-react` - 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
 
-## Key Commands
+## Essential Commands
 
 ```bash
-# Install dependencies
-npm install
-
-# Build all packages
-npm run build
-
-# Start Jupyter server (required for development)
-npm run jupyter:server
-
-# Run specific examples
-npm run jupyter:ui:vite       # Vite example
-npm run jupyter:ui:nextjs     # Next.js example
-npm run jupyter:ui:lexical    # Lexical editor example
-npm run jupyter:ui:docusaurus # Docusaurus example
-
-# Run tests
-npm test
-npm run test:storybook        # Test Storybook stories
-npm run test:mdx              # Test MDX documentation
-npm run test:all              # Run all tests
-
-# Code quality
-npm run lint                  # Check for linting errors (quiet mode - errors only)
-npm run lint:fix              # Auto-fix linting issues
-npm run format                # Format code with Prettier
-npm run format:check          # Check code formatting
-npm run type-check            # TypeScript type checking
-
-# Storybook
-npm run storybook
+npm install                   # Install dependencies
+npm run build                 # Build all packages
+npm run jupyter:server        # Start Jupyter server (port 8686)
+npm run storybook            # Start Storybook (port 6006)
+npm run lint                 # Check errors only (--quiet)
+npm run lint:fix             # Auto-fix issues
+npm run format               # Format code
+npm run type-check           # TypeScript checking
+npm test                     # Run tests
 ```
 
-## Development Setup
+## Requirements
 
-1. **Requirements**:
-   - Node.js >= 20.0.0
-   - npm (not yarn - the project uses npm workspaces)
-2. **Ports**:
-   - Jupyter server: 8686
-   - Frontend: 3208 (varies by example)
-   - Storybook: 6006
+- Node.js >= 20.0.0 (use .nvmrc)
+- npm (not yarn)
+- Server token: `60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6`
 
-3. **Server token**: `60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6`
+## Key Files
 
-## Architecture Notes
+- `eslint.config.js` - ESLint v9 flat config
+- `.prettierrc.json` - Formatter config
+- `.prettierignore` - Excludes MDX files
+- `patches/` - Third-party fixes (auto-applied)
+- `packages/react/webpack.config.js` - Build config
 
-- Components wrap JupyterLab functionality in React declarative API
-- Supports IPyWidgets, kernels, outputs, file browser
-- Server communication via ServiceManager
-- Uses Lumino widgets under the hood but exposes React interface
-- State management with Zustand
-- Real-time collaboration with Y.js
+## Recent Fixes (2024)
 
-## Common Tasks
+- MDX comments: `{/_` → `{/** **/}` in 13 files
+- Node requirement: 18 → 20+
+- Webpack warnings: 7 → 2 (source-map exclusions)
+- @jupyterlite patch for missing logos
+- ESLint v9 flat config migration
+- React 18 deprecations fixed
 
-### Adding Components
+## Common Issues
 
-Create in `packages/react/src/components/`
+1. **Storybook errors**: Check MDX syntax, run `npx patch-package`
+2. **Node version**: Use Node 20+ (`nvm use`)
+3. **Lint errors**: Run `npm run lint:fix`
+4. **Build fails**: Run `npm run type-check`
 
-### Testing Examples
+## AI Assistant Notes
 
-Use `examples/` folders with various frameworks
-
-### Documentation
-
-Update in `docs/` (Docusaurus site)
-
-### Storybook
-
-Components showcased in `storybook/`
-
-## Code Quality Configuration
-
-### ESLint
-
-- Uses ESLint v9 flat config (`eslint.config.js`)
-- TypeScript support with @typescript-eslint
-- React and React Hooks plugins
-- Ignores: `attic/`, `.docusaurus/`, `ipyreactive/`, `ipyscript/`
-
-### Prettier
-
-- Config: `.prettierrc.json`
-- Single quotes, trailing commas (all)
-- 80 character line width
-- LF line endings
-- Ignores `attic/` folder and `*.mdx` files (to prevent MDX comment corruption)
-
-### Pre-commit Hooks
-
-- Husky + lint-staged
-- Runs ESLint, Prettier, and TypeScript checks
-- Conventional commits with commitlint
-
-## Important Files
-
-- `lerna.json` - Monorepo configuration
-- `eslint.config.js` - ESLint flat config
-- `.prettierrc.json` - Prettier configuration
-- `.prettierignore` - Prettier exclusions (includes MDX files)
-- `.nvmrc` - Node version specification
-- `dev/config/jupyter_server_config.py` - Server settings
-- `packages/react/src/jupyter/JupyterContext.tsx` - Core context provider
-- `packages/react/src/state/JupyterReactState.ts` - Zustand store
-- `patches/` - Third-party module patches (applied via patch-package)
-
-## CI/CD
-
-### GitHub Actions Workflows
-
-- `build.yml` - Main CI pipeline (build, test, visual tests)
-- `fix-license-header.yml` - Auto-fix license headers
-- `publish-dev.yml` - Publish dev versions
-
-### Testing in CI
-
-- Build verification
-- Storybook story testing
-- MDX documentation testing
-- Visual regression with Playwright
-- Docker container builds
-
-## Recent Updates (2024)
-
-### Configuration Modernization
-
-- Migrated from `prettier.config.js` to `.prettierrc.json`
-- Updated ESLint to v9 flat config format
-- Removed deprecated `.eslintignore` in favor of ignores in config
-- Added `--quiet` flag to lint command (show errors only)
-- Updated Node.js requirement from 18 to 20+
-- Added .nvmrc file for Node version management
-
-### Code Quality Fixes
-
-- Fixed all React 18 deprecations (ReactDOM.render → createRoot)
-- Added missing key props in list iterations
-- Fixed optional chain assertions with proper null checks
-- Replaced `@ts-ignore` with `@ts-expect-error`
-- Fixed React Hook rules violations
-- Replaced `Function` types with proper signatures
-- Added security attributes to external links (`rel="noreferrer"`)
-
-### Storybook MDX Fixes
-
-- Fixed malformed MDX comments from `{/_` to `{/**`
-- Updated all 13 MDX story files to use proper JSX comment syntax
-- Added MDX files to .prettierignore to prevent comment corruption
-
-### Build & CI Improvements
-
-- Fixed webpack source map warnings by excluding problematic packages
-- Created patch for @jupyterlite/javascript-kernel-extension missing logo files
-- Updated GitHub Actions workflows to use Node 20
-- Added patch-package for third-party module fixes
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Build fails with TypeScript errors**
-   - Run `npm run type-check` to identify issues
-   - Check for unused `@ts-expect-error` directives
-
-2. **Lint errors**
-   - Run `npm run lint` to see only errors (not warnings)
-   - Use `npm run lint:fix` for auto-fixable issues
-
-3. **Server connection issues**
-   - Ensure Jupyter server is running on port 8686
-   - Check token in server config
-
-4. **Storybook build errors**
-   - Check MDX comment syntax (must be `{/** **/}`)
-   - Verify patches are applied: `npx patch-package`
-   - Missing logo files error fixed by @jupyterlite patch
-
-5. **Node version issues**
-   - Use Node 20+ (check with `node --version`)
-   - Use .nvmrc file: `nvm use`
-
-## Notes for AI Assistants
-
-- The `attic/` folder contains archived/experimental code - do not modify
+- Never modify `attic/` folder
 - Always use npm, not yarn
-- Prefer editing existing files over creating new ones
-- Run lint and type checks before committing
-- Use conventional commit messages
+- Prefer editing over creating files
+- Run lint/type checks before committing
+- MDX files excluded from Prettier (comment corruption)

SUMMARY.md

@@ -362,6 +362,8 @@ The Lexical package supports plugins for:
 - **Prettier JSON Config**: Replaced CommonJS config with .prettierrc.json
 - **Line Endings**: Enforced LF line endings for cross-platform consistency
 - **Trailing Commas**: Added support for better TypeScript compatibility
+- **Node.js 20+**: Updated minimum requirement from Node 18 to Node 20
+- **NVM Support**: Added .nvmrc file for consistent Node version management
 
 ### Code Quality Fixes
 
@@ -371,6 +373,19 @@ The Lexical package supports plugins for:
 - **Security**: Added rel="noreferrer" to external links
 - **Hook Rules**: Fixed conditional hook calls
 
+### Storybook Fixes
+
+- **MDX Comment Syntax**: Fixed malformed comments in 13 MDX files from `{/_` to `{/** **/}`
+- **Prettier Exclusion**: Added MDX files to .prettierignore to prevent comment corruption
+- **Missing Logo Files**: Created patch for @jupyterlite/javascript-kernel-extension to fix missing logo references
+
+### Build & CI Improvements
+
+- **Webpack Warnings**: Reduced source map warnings from 7 to 2 by excluding problematic packages
+- **Patch-Package**: Added automatic patching of third-party modules during npm install
+- **GitHub Actions**: Updated all workflows to use Node 20
+- **Build Stability**: Fixed CI build failures in Storybook
+
 ### Testing Infrastructure
 
 - **Storybook Test Runner**: Automated testing for all component stories

storybook/package.json

@@ -27,7 +27,8 @@
     "test:storybook": "test-storybook",
     "test:storybook:ci": "test-storybook --ci --maxWorkers=2",
     "test:mdx": "node test-storybook.js",
-    "test:all": "test-storybook --ci --maxWorkers=2 && node test-storybook.js"
+    "test:all": "test-storybook --ci --maxWorkers=2 && node test-storybook.js",
+    "test:all:ci": "test-storybook --ci --maxWorkers=2 --url http://localhost:6006 && node test-storybook.js"
   },
   "dependencies": {
     "@datalayer/jupyter-lexical": "^1.0.0",