React webpart to manage bookmarks

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "gulp": "^5.0.0",
     "url": "^0.11.4"
   }
 }

samples/react-sp-bookmarks/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-sp-bookmarks/.hintrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "disown-opener": "off",
+    "typescript-config/strict": "off"
+  }
+}

samples/react-sp-bookmarks/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-sp-bookmarks/.nvmrc

@@ -0,0 +1 @@
+18.20.6

samples/react-sp-bookmarks/.yo-rc.json

@@ -0,0 +1,21 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.20.6",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "libraryName": "react-sp-bookmarks",
+    "libraryId": "e4cd35b5-7269-45f8-a471-177c7f8fd1f1",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "react-sp-bookmarks",
+    "solutionShortDescription": "react-sp-bookmarks description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/react-sp-bookmarks/README.md

@@ -0,0 +1,120 @@
+# Using React Accordion plugin with SPFx
+
+## Summary
+
+The **Bookmarks Manager** web part allows users to manage and organize bookmarks in a SharePoint list. Users can add, edit, and delete bookmarks, which are displayed in a grid layout. The web part supports both **light** and **dark** themes and integrates seamlessly with SharePoint.
+
+---
+
+
+![Bookmarks Manager](./assets/BookmarksManager.gif)
+
+## Prerequisites
+
+A SharePoint list to store the bookmarks. The list must have the following columns:
+- Title (Single line of text)
+- URL (Single line of text)
+- Icon (Single line of text)
+
+## Compatibility
+
+| :warning: Important          |
+|:---------------------------|
+| 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.20.0](https://img.shields.io/badge/SPFx-1.20.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")
+![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg)
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
+
+## Applies to
+
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+## Contributors
+
+* [Sudeep Ghatak](https://github.com/sudeepghatak)
+
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|January 27, 2025|Initial release
+
+
+## Minimal Path to Awesome
+
+### Build and Test
+
+>  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
+
+1. Clone this repo
+2. In the command line run
+    - `npm i`
+    - `gulp build`
+    - `gulp serve --nobrowser`
+3. Create a custom list (e.g. Bookmarks) 
+5. Navigate to the hosted version of SharePoint workbench, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>/_layouts/15/workbench.aspx**
+6. Add the Web Part to the canvas and configure it.
+
+### Package and deploy
+
+1. In the command line run
+    - `gulp bundle --ship`
+    - `gulp package-solution --ship`
+2. Install into your SharePoint app catalog and add it to a SharePoint site.
+3. Navigate to your site, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>**
+4. Create a custom list with Title and Description(internal name) of type Enhanced rich text. 
+5. Populate the list with some items
+6. Navigate to a page on your site where the custom list is created
+7. Add the Web Part to the page and configure it.
+
+## Features
+
+1. **Bookmark Management**:
+   - Add new bookmarks with a title, URL, and icon.
+   - The webpart supports FluentUI icon names (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)
+   - Edit existing bookmarks to update their details.
+   - Delete bookmarks from the list.
+
+2. **Grid Layout**:
+   - Displays bookmarks in a responsive grid layout.
+   - Each bookmark includes a title, icon, and link.
+
+3. **Theming**:
+   - Supports **light** and **dark** themes for better user experience.
+   - Automatically adapts to the SharePoint site's theme.
+
+4. **SharePoint Integration**:
+   - Stores bookmarks in a SharePoint list.
+   - Uses PnP JS for seamless interaction with SharePoint APIs.
+
+5. **User-Friendly UI**:
+   - Intuitive interface with a modal dialog for adding/editing bookmarks.
+
+
+## Help
+
+We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20REACT-SP-BOOKMARKS&template=bug-report.yml&sample=REACT-SP-BOOKMARKS&authors=@SudeepGhatakh&title=REACT-SP-BOOKMARKS).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20REACT-SP-BOOKMARKS&template=bug-report.yml&sample=REACT-SP-BOOKMARKS&authors=@SudeepGhatakh&title=REACT-SP-BOOKMARKS).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20REACT-SP-BOOKMARKS&template=bug-report.yml&sample=REACT-SP-BOOKMARKS&authors=@SudeepGhatakh&title=REACT-SP-BOOKMARKS).
+
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+

samples/react-sp-bookmarks/api/index.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const app = express();
+
+app.use(bodyParser.json()); // For parsing application/json
+app.use(cors()); // For handling CORS
+
+// Import and use routes
+const bookmarksRoute = require('./routes/bookmarks');
+app.use('/api/bookmarks', bookmarksRoute);
+
+// Default route
+app.get('/', (req, res) => {
+    res.send('Welcome to the Bookmark API');
+});
+
+// Start the server
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
+});

samples/react-sp-bookmarks/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "react-sp-bookmarks-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/reactSpBookmarks/ReactSpBookmarksWebPart.js",
+          "manifest": "./src/webparts/reactSpBookmarks/ReactSpBookmarksWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "ReactSpBookmarksWebPartStrings": "lib/webparts/reactSpBookmarks/loc/{locale}.js"
+  }
+}

samples/react-sp-bookmarks/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-sp-bookmarks",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-sp-bookmarks/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-sp-bookmarks-client-side-solution",
+    "id": "e4cd35b5-7269-45f8-a471-177c7f8fd1f1",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "react-sp-bookmarks description"
+      },
+      "longDescription": {
+        "default": "react-sp-bookmarks description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "react-sp-bookmarks Feature",
+        "description": "The feature that activates elements of the react-sp-bookmarks solution.",
+        "id": "2e4577df-5446-4417-87e1-81d9d433f7d3",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-sp-bookmarks.sppkg"
+  }
+}

samples/react-sp-bookmarks/config/sass.json

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

samples/react-sp-bookmarks/config/serve.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://sudeepghatakdemos.sharepoint.com/sites/AshishGhatak/_layouts/workbench.aspx"
+}

samples/react-sp-bookmarks/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-sp-bookmarks/gulpfile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+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;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));