Fix/5157 react kanban board

samples/react-kanban-board/.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
 {
-	"name": "SPFx 1.13.0",
-	"image": "docker.io/m365pnp/spfx:1.13.0",
+	"name": "SPFx 1.19.0",
+	"image": "docker.io/m365pnp/spfx:1.19.0",
 	// Set *default* container specific settings.json values on container create.
 	"settings": {},
 	// Add the IDs of extensions you want installed when the container is created.

samples/react-kanban-board/.gitignore

@@ -35,3 +35,5 @@ obj
 *.cer
 # .PEM Certificates
 *.pem
+
+.heft

samples/react-kanban-board/.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

samples/react-kanban-board/.nvmrc

@@ -0,0 +1 @@
+v18.17.1

samples/react-kanban-board/.vscode/launch.json

@@ -1,15 +1,11 @@
 {
-  /**
-   * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
-   * Chrome browser: https://aka.ms/spfx-debugger-extensions
-   */
   "version": "0.2.0",
   "configurations": [
     {
       "name": "Hosted workbench",
-      "type": "chrome",
+      "type": "msedge",
       "request": "launch",
-      "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx",
       "webRoot": "${workspaceRoot}",
       "sourceMaps": true,
       "sourceMapPathOverrides": {

samples/react-kanban-board/.vscode/settings.json

@@ -7,7 +7,8 @@
     "**/bower_components": true,
     "**/coverage": true,
     "**/lib-amd": true,
-    "src/**/*.scss.ts": true
+    "src/**/*.scss.ts": true,
+    "**/jest-output": true
   },
   "typescript.tsdk": ".\\node_modules\\typescript\\lib"
 }

samples/react-kanban-board/.yo-rc.json

@@ -1,12 +1,19 @@
 {
   "@microsoft/generator-sharepoint": {
+    "nodeVersion": "18.17.1",
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.13.0",
+    "version": "1.19.0",
     "libraryName": "react-kanban-board",
     "libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
     "packageManager": "npm",
+    "skipFeatureDeployment": true,
     "isDomainIsolated": false,
-    "componentType": "webpart"
+    "plusBeta": false,
+    "componentType": "webpart",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.12.0",
+      "@microsoft/microsoft-graph-client": "3.0.2"
+    }
   }
 }

samples/react-kanban-board/README.md

@@ -1,19 +1,3 @@
----
-page_type: sample
-products:
-- office-sp
-languages:
-- javascript
-- typescript
-extensions:
-  contentType: samples
-  technologies:
-  - SharePoint Framework
-  platforms:
-  - React
-  createdDate: 7/17/2019 12:00:00 AM
----
-
 # Kanban Board
 
 ## Summary
@@ -24,6 +8,10 @@ The web part uses the default columns of the SharePoint Tasks list for showing t
 
 ![picture of the web part in action](assets/kanbanofficeUI.gif)
 
+![Kanban Board Settings: bucket Layout](assets/kanbanimg1.png)
+![Kanban Board View Items](assets/kanbanimg2.png)
+![Kanban Board Settings: list selection and status column order as bucket](assets/kanbanimg3.png)
+
 
 ## Compatibility
 
@@ -32,8 +20,8 @@ The web part uses the default columns of the SharePoint Tasks list for showing t
 | Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
 |Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
 
-![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg)
-![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg) 
+![SPFx 1.19.0](https://img.shields.io/badge/SPFx-1.19.0-green.svg)
+![Node.js v18 ](https://img.shields.io/badge/Node.js-v18-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@@ -50,6 +38,7 @@ The web part uses the default columns of the SharePoint Tasks list for showing t
 ## Prerequisites
 
 This web part reads the information from a Tasks list and uses the following OOB columns
+
 * Task Name
 * Assigned To
 * % Complete
@@ -74,6 +63,7 @@ Version|Date|Comments
 1.0.1.0|April 21, 2020|Added support for Teams hosts
 2.0.0.0|July 10, 2020| jqwidgets replaced with a custom Kanban Board based on Office UI Component and IE11 Support
 3.0.0.0|October 29, 2021| SPFx 1.13, PnPJS v2, PnP Controls v3
+4.0.0.0|Jun 1, 2024| SPFx 1.19, PnPJS v4, Node 18 (Property-ListPicker and Property-Order not used from @pnp/spfx-property-controls because of an issue )
 
 [Read More about the implementation of this Board](./src/kanban/README.md)
 

samples/react-kanban-board/assets/sample.json

@@ -6,10 +6,10 @@
     "shortDescription": "This solution contains an SPFx web part which shows a Kanban board using jqxKanban ReactJS component (from JQWidgets). The web part uses the default columns of the SharePoint Tasks list for showing the board\u0027s columns and the tasks.",
     "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kanban-board",
     "longDescription": [
-      "This solution contains an SPFx web part which shows a Kanban board using jqxKanban ReactJS component (from JQWidgets). The web part uses the default columns of the SharePoint Tasks list for showing the board\u0027s columns and the tasks."
+      "This solution contains an SPFx web part which shows a Kanban board. The web part uses the default columns of the SharePoint Tasks list for showing the board\u0027s columns and the tasks."
     ],
     "creationDateTime": "2020-07-02",
-    "updateDateTime": "2020-07-02",
+    "updateDateTime": "2024-05-26",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.13.0"
+        "value": "1.19.0"
       },
       {
         "key": "SPFX-TEAMSTAB",
@@ -36,7 +36,25 @@
         "type": "image",
         "order": 100,
         "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanofficeUI.gif",
-        "alt": "Kanban Board Web part"
+        "alt": "Kanban Board Web part in action"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg1.png",
+        "alt": "Kanban Board Web part configuration of a bucket"
+      },
+      {
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg2.png",
+        "alt": "Kanban Board Web part item View"
+      },
+      {
+        "type": "image",
+        "order": 103,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg3.png",
+        "alt": "Kanban Board Web part task list selection and status column order as bucket"
       }
     ],
     "authors": [
@@ -56,7 +74,7 @@
       },
       {
         "gitHubAccount": "petkir",
-        "company": "Cubido Business Solutions GmbH",
+        "company": "ACP CUBIDO Digital Solutions GmbH",
         "pictureUrl": "https://github.com/petkir.png",
         "name": "Peter Paul Kirschner",
         "twitter": "petkir_at"

samples/react-kanban-board/config/package-solution.json

@@ -3,7 +3,7 @@
     "solution": {
         "name": "react-kanban-board-client-side-solution",
         "id": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
-        "version": "3.0.0.0",
+        "version": "4.0.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
         "isDomainIsolated": false,
@@ -12,8 +12,28 @@
             "privacyUrl": "",
             "termsOfUseUrl": "",
             "websiteUrl": "",
-            "mpnId": ""
-          }
+            "mpnId": "Undefined-1.19.0"
+          },
+          "metadata": {
+            "shortDescription": {
+              "default": "react-kanban-board description"
+            },
+            "longDescription": {
+              "default": "react-kanban-board description"
+            },
+            "screenshotPaths": [],
+            "videoUrl": "",
+            "categories": []
+          },
+          "features": [
+            {
+              "title": "react-kanban-board KanbanBoardWebPart Feature",
+              "description": "The feature that activates KanbanBoardWebPart from the react-kanban-board solution.",
+              "id": "67cd5938-806b-4c79-b589-501f7f26998e",
+              "version": "4.0.0.0"
+            }
+          ]
+
     },
     "paths": {
         "zippedPackage": "solution/react-kanban-board.sppkg"

samples/react-kanban-board/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-kanban-board/config/serve.json

@@ -1,6 +1,6 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
 }

samples/react-kanban-board/gulpfile.js

@@ -1,9 +1,7 @@
 'use strict';
 
-
-
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
 var getTasks = build.rig.getTasks;
@@ -15,4 +13,4 @@ build.rig.getTasks = function () {
   return result;
 };
 
-build.initialize(gulp);
+build.initialize(require('gulp'));