Update storybook to use latest version, update stories and add tests (#391)

* Update storybook to use latest version, update stories and add basic tests

* test

* test

* test

* Automatic application of license header

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: goanpeca

.github/workflows/build.yml

@@ -25,7 +25,7 @@ jobs:
         shell: bash -l {0}
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
     - name: Setup conda
       uses: conda-incubator/setup-miniconda@v3
       with:
@@ -34,23 +34,19 @@ jobs:
         channel-priority: true
         environment-file: environment.yml
         activate-environment: datalayer
-    - name: Get yarn cache directory path
-      id: yarn-cache-dir-path
-      run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-    
-    - uses: actions/cache@v3
-      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+    - name: Setup npm cache
+      uses: actions/cache@v4
       with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+        path: ~/.npm
+        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json', '**/package.json') }}
         restore-keys: |
-          ${{ runner.os }}-yarn-
+          ${{ runner.os }}-npm-
     - name: Install the npm dependencies
       run: |
-        yarn install
+        npm install
     - name: Run the build
       run: |
-        yarn build
+        npm run build
 
   visual-test:
     runs-on: ubuntu-latest
@@ -65,7 +61,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
       -
@@ -75,7 +71,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -89,7 +85,7 @@ jobs:
         run: yarn install
 
       - name: Set up browser cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ${{ github.workspace }}/pw-browsers
@@ -110,14 +106,66 @@ jobs:
           yarn run test:visual -u
         working-directory: packages/react
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: ${{ failure() }}
         with:
           name: jupyter-react-test
           path: |
             packages/react/test-assets/
             packages/react/stories/**/*-snapshots/*
 
+  storybook-test:
+    name: Test Storybook Stories and Docs
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      
+      - name: Setup npm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: npm-${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
+          restore-keys: |
+            npm-${{ runner.os }}-
+      
+      - name: Install Dependencies
+        run: npm install
+      
+      - name: Build all packages
+        run: npm run build
+      
+      - name: Install Playwright
+        run: npx playwright install chromium --with-deps
+        working-directory: storybook
+      
+      - name: Build Storybook
+        run: npm run build:storybook
+        working-directory: storybook
+      
+      - name: Serve Storybook and run all tests
+        run: |
+          npx serve -l 6006 storybook-static &
+          sleep 5
+          npm run test:all
+        working-directory: storybook
+      
+      - name: Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-test-results
+          path: |
+            storybook/test-results/
+            storybook/html-report/
+
   docker-dev:
     # Don't run if the previous case fails
     needs: build
@@ -158,7 +206,7 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
       -
         name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ".devcontainer/Dockerfile"

.github/workflows/publish-dev.yml

@@ -27,7 +27,7 @@ jobs:
         uses: actions/checkout@v4
       -
         # Setup .npmrc file to publish to GitHub Packages
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://npm.pkg.github.com'
@@ -41,7 +41,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       # Keep only the 3 latest pre releases
-      - uses: actions/delete-package-versions@v4
+      - uses: actions/delete-package-versions@v5
         with:
           package-name: 'jupyter-react'
           package-type: 'npm'

.licenserc.yaml

@@ -38,5 +38,6 @@ header:
     - 'packages/lexical/src/ui/PrettierButton.tsx_tmp'
     - 'packages/react/third-party-license.txt'
     - 'patches/'
+    - '**/robots.txt'
 
   comment: on-failure

CLAUDE.md

@@ -0,0 +1,58 @@
+# Jupyter UI - AI Assistant Guide
+
+## Quick Overview
+React component library for building Jupyter-compatible applications. Monorepo with Lerna managing 4 main packages and multiple examples.
+
+## 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
+
+## Key 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
+
+# Run tests
+npm test
+
+# Lint and format
+npm run lint
+
+# Storybook
+npm run storybook
+```
+
+## Development Setup
+1. Requires Node.js >= 18.0.0
+2. Uses port 8686 for Jupyter server, 3208 for frontend
+3. Server token: `60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6`
+
+## Architecture Notes
+- 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
+
+## Common Tasks
+- Adding components: Create in `packages/react/src/components/`
+- Testing examples: Use `examples/` folders with various frameworks
+- Documentation: Update in `docs/` (Docusaurus site)
+- Storybook: Components showcased in `storybook/`
+
+## Important Files
+- `lerna.json` - Monorepo configuration
+- `dev/config/jupyter_server_config.py` - Server settings
+- `packages/react/src/jupyter/JupyterContext.tsx` - Core context provider