Angular 21 support

.eslintrc.yaml

@@ -5,6 +5,8 @@ extends:
 overrides:
   - files:
       - '*.ts'
+      - '!projects/swimlane/ngx-dnd/src/**/*.stories.ts'
+      - '!projects/swimlane/ngx-dnd/.storybook/**/*.ts'
     parser: '@typescript-eslint/parser'
     parserOptions:
       project:
@@ -16,8 +18,35 @@ overrides:
       - plugin:@angular-eslint/template/process-inline-templates
       - prettier
     rules:
+      '@angular-eslint/prefer-standalone': off
+      '@angular-eslint/prefer-inject': off
       '@typescript-eslint/no-explicit-any': off
       '@typescript-eslint/no-var-requires': off
+      '@typescript-eslint/no-require-imports': off
+      '@angular-eslint/no-output-native': off
+      '@angular-eslint/no-input-rename': off
+  - files:
+      - 'projects/swimlane/ngx-dnd/src/lib/declarations.d.ts'
+    rules:
+      no-var: off
+  - files:
+      - 'projects/swimlane/ngx-dnd/src/**/*.stories.ts'
+      - 'projects/swimlane/ngx-dnd/.storybook/**/*.ts'
+    parser: '@typescript-eslint/parser'
+    parserOptions:
+      project:
+        - projects/swimlane/ngx-dnd/tsconfig.storybook.json
+      createDefaultProgram: true
+    extends:
+      - '@swimlane/eslint-config/typescript'
+      - plugin:@angular-eslint/recommended
+      - prettier
+    rules:
+      '@angular-eslint/prefer-standalone': off
+      '@angular-eslint/prefer-inject': off
+      '@typescript-eslint/no-explicit-any': off
+      '@typescript-eslint/no-var-requires': off
+      '@typescript-eslint/no-require-imports': off
   - files:
       - '*.html'
     extends:

.github/workflows/test_and_deploy.yml

@@ -8,8 +8,12 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 12.x
+          node-version: '22.16'
+          cache: npm
 
       - name: Install
         uses: bahmutov/npm-install@v1
@@ -22,16 +26,25 @@ jobs:
         env:
           CI: true
 
+      - name: Build Storybook
+        run: |
+          npm run build:storybook
+        env:
+          CI: true
+
       - name: Test
         run: |
           npm run ci --if-present
         env:
           CI: true
 
       - name: Prepare and deploy
-        run: |
-          npm run deploy --if-present -- --name="Swimlane" --email="swimlane-devops@swimlane.com"
         if: ${{ github.ref == 'refs/heads/master' }}
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+          folder: ./dist/storybook/ngx-dnd
+          clean: true
         env:
           CI: true
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -31,6 +31,7 @@ node_modules/
 /coverage
 /libpeerconnection.log
 npm-debug.log
+/.yarn
 yarn-error.log
 testem.log
 /typings
@@ -42,6 +43,5 @@ Thumbs.db
 
 # Cypress
 cypress/videos
-cypress/support
 cypress/plugins
 cypress/screenshots

CHANGELOG.md

@@ -2,7 +2,17 @@
 
 ## HEAD (Unreleased)
 
-- Bump to Cypress version 10.6.0
+## 12.0.0-alpha.0 (2026-04-30)
+
+- Added support for Angular 21
+- Replaced docSpa with storybook
+- Removed support for Angular 18
+- Updated cypress tests to run against storybook
+
+## 11.0.0 (2025-08-20)
+
+- Added support for Angular 20
+- Removed support for Angular 17 and earlier versions
 
 ## 9.0.0 (2021-03-30)
 

README.md

@@ -187,7 +187,7 @@ This project uses [heff/chg](https://github.com/heff/chg), a simple changelog/re
 - Clean and test (Optional)
   - Run `rm -rf node_modules`
   - Run `npm i`
-  - Run tests (`npm run test:ci`)
+  - Run tests (`npm run test:release`)
 - Examine CHANGELOG.md to determine next version (X.Y.Z)
 - Run `git checkout -b release/X.Y.Z`
 - Update version using `npm version [<newversion> | major | minor | patch]`

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "analytics": false
   },
   "projects": {
     "ngx-dnd": {
@@ -14,9 +14,11 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "aot": false,
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            },
             "outputPath": "dist/ngx-dnd",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -99,29 +101,23 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngx-dnd:build"
+            "buildTarget": "ngx-dnd:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-dnd:build:production"
+              "buildTarget": "ngx-dnd:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngx-dnd:build"
+            "buildTarget": "ngx-dnd:build"
           }
         },
         "deploy": {
           "builder": "angular-cli-ghpages:deploy",
           "options": {}
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
         }
       }
     },
@@ -143,9 +139,36 @@
               "tsConfig": "projects/swimlane/ngx-dnd/tsconfig.lib.prod.json"
             }
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": "projects/swimlane/ngx-dnd/.storybook",
+            "browserTarget": "@swimlane/ngx-dnd:build",
+            "tsConfig": "projects/swimlane/ngx-dnd/tsconfig.storybook.json",
+            "compodoc": false,
+            "port": 6006,
+            "styles": ["projects/swimlane/ngx-dnd/src/lib/ngx-dnd.scss"]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": "projects/swimlane/ngx-dnd/.storybook",
+            "browserTarget": "@swimlane/ngx-dnd:build",
+            "tsConfig": "projects/swimlane/ngx-dnd/tsconfig.storybook.json",
+            "compodoc": false,
+            "outputDir": "dist/storybook/ngx-dnd",
+            "styles": ["projects/swimlane/ngx-dnd/src/lib/ngx-dnd.scss"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["projects/swimlane/ngx-dnd/**/*.ts"]
+          }
         }
       }
     }
-  },
-  "defaultProject": "ngx-dnd"
+  }
 }

cypress.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from 'cypress';
 
+/**
+ * E2E tests run against Storybook’s preview iframe
+ */
 export default defineConfig({
   e2e: {
-    supportFile: false,
-    setupNodeEvents(on, config) {}
+    baseUrl: 'http://localhost:6006',
+    supportFile: 'cypress/support/e2e.ts',
+    setupNodeEvents(on) {}
   }
 });