Adds SVG to Json for SharePoint List Web Part

samples/react-svg-to-json-converter/.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-svg-to-json-converter/.npmignore

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

samples/react-svg-to-json-converter/.nvmrc

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

samples/react-svg-to-json-converter/.tours/svgtojsonwebpart.tour

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "SVGtoJsonWEbPart",
+  "steps": [
+    {
+      "file": "README.md",
+      "description": "Start in the ReadMe and get an overview of the architecture of the Web  Part. It consists of a Parent component, several child components and some React hooks. ",
+      "line": 1
+    },
+    {
+      "file": "src/webparts/svgToJson/SvgToJsonWebPart.ts",
+      "description": "We first take care of the Property pane by letting our user define on which Site URL and Library Name we can find the SVGs",
+      "line": 59
+    },
+    {
+      "file": "src/webparts/svgToJson/components/SvgToJson.tsx",
+      "description": "When in SharePoint, we now use the Parent component as an orchestrator for all other child components. ",
+      "line": 98
+    },
+    {
+      "file": "src/webparts/svgToJson/components/SVGInput.tsx",
+      "description": "The SVG Input will take care of displaying the dropdown menu with our SVGs - it does so by calling the useSVGFiles hook",
+      "line": 16
+    },
+    {
+      "file": "src/webparts/svgToJson/components/useSvgFiles.ts",
+      "description": "we fetch the Files from the specified SiteUrl and library",
+      "line": 9
+    },
+    {
+      "file": "src/webparts/svgToJson/components/ConvertButton.tsx",
+      "description": "with the convert button, we extract all the 'd' and 'fill' attributes from the SVG code and wrap it into the json format that will be accepted by a SharePoint List column.",
+      "line": 23
+    },
+    {
+      "file": "src/webparts/svgToJson/components/SiteSelector.tsx",
+      "description": "We will now in the SiteSelector call the useFetchSites hook",
+      "line": 15
+    },
+    {
+      "file": "src/webparts/svgToJson/components/useFetchSites.ts",
+      "description": "to populate the dropdown menu with all Site Collections",
+      "line": 13
+    },
+    {
+      "file": "src/webparts/svgToJson/components/ListSelector.tsx",
+      "description": "then we will use the ListSelector and call the useFetchLists hook...",
+      "line": 13
+    },
+    {
+      "file": "src/webparts/svgToJson/components/useFetchLists.ts",
+      "description": "to populate the Lists dropdown menue (while excluding all the lists that shouldn't show up)",
+      "line": 12
+    },
+    {
+      "file": "src/webparts/svgToJson/components/ColumnSelector.tsx",
+      "description": "In the ColumnSelector finally, we show the columns in the selected List by calling the useFetchFields hook...",
+      "line": 14
+    },
+    {
+      "file": "src/webparts/svgToJson/components/useFetchFields.ts",
+      "description": "so that all the fields get populated in the ColumnSelector",
+      "line": 17
+    },
+    {
+      "file": "src/webparts/svgToJson/components/ApplyButton.tsx",
+      "description": "as a last step, we will apply the format we created previously to the selected column in the selected list on the selected site and open the spedcified list in a new tab so that we can verify the format has been applied correctly",
+      "line": 43
+    }
+  ],
+  "ref": "main"
+}

samples/react-svg-to-json-converter/.yo-rc.json

@@ -0,0 +1,24 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "whichFolder": "subdir",
+    "solutionName": "svg-converter-solution",
+    "componentType": "webpart",
+    "template": "react",
+    "componentName": "SVG to JSON for SharePoint List formatter",
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.20.4",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "libraryName": "svg-converter-solution",
+    "libraryId": "42e52dfa-95dd-4cbd-8ba3-9cfb4ba4a644",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionShortDescription": "svg-converter-solution description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false
+  }
+}

samples/react-svg-to-json-converter/README.md

@@ -0,0 +1,111 @@
+# svg-converter-solution
+
+## Summary
+
+This web part allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting. Users can both copy the JSON format to their clipboard (for further manipulation) or select a site, a list, and a column and then directly apply the format to this column.
+
+For usage in SharePoint, the Property Pane is used to define the Site URL and the library Name where the SVGs come from, for usage in Microsoft Teams there is a basic form to save the configuration.
+
+Web Part works in both english and german and can easily be extended to work in more languages.
+
+![svg converter in action](../react-svg-to-json-converter/assets/webpart-sp.png)
+
+## Overview of the Web Part
+
+This Web Part is designed to allow users to select an SVG file from a SharePoint library, convert it to JSON format, and apply that JSON format to a SharePoint List column. The Web Part is built using React and leverages the PnPjs library.
+
+```mermaid
+graph TD
+    A[SvgToJson.tsx] --> B[SVGInput.tsx]
+    A --> C[SVGOutput.tsx]
+    A --> D[ConvertButton.tsx]
+    A --> E[SiteSelector.tsx]
+    A --> F[ListColumnSelector.tsx]
+    A --> G[ColumnSelector.tsx]
+    A --> H[ApplyButton.tsx]
+
+    B --> I[Fetch SVG files from SharePoint library]
+    D --> J[Convert SVG to JSON]
+    D --> K[Copy JSON to clipboard]
+    E --> L[Fetch available sites]
+    F --> M[Fetch available lists from site]
+    G --> N[Fetch available columns from selected list]
+    H --> O[Apply JSON to SharePoint list column]
+```
+
+## Key Components
+
+* SvgToJson.tsx: This is the main component of the web part. It orchestrates the overall functionality by integrating other components like SVGInput, SVGOutput, ConvertButton, ApplyButton, and ListColumnSelector.
+
+* SVGInput.tsx: This component is responsible for fetching and displaying the list of SVG files from the specified SharePoint library. It uses a dropdown to allow users to select an SVG file.
+* SVGOutput.tsx: This component displays the content of the selected SVG file. It provides a visual preview of the SVG.
+* ConvertButton.tsx: This component provides a button to convert the selected SVG content to JSON format. It also copies the JSON to the clipboard.
+* SiteSelector.tsx: This component allows users to select a SharePoint Site. It fetches all Site Collections in the tenant.
+* ListSelector.tsx: This component allows users to select a SharePoint List. It fetches the available lists from the specified site.
+* ColumnSelector.tsx: This component allows users to select a Column. It fetches the available columns from the specified site.
+* ApplyButton.tsx: This component provides a button to apply the JSON format to the specified SharePoint List column. It handles the logic for updating the column formatting.
+
+## Example Workflow
+
+* Select Site and Library: The user selects a **SharePoint Site** and **library** from which to fetch SVG files.
+* Select SVG File: The user selects an **SVG file** from the dropdown in the SVGInput component.
+* Display SVG Content: The selected SVG content is displayed in the SVGOutput component.
+* Convert SVG to JSON: The user selects the **ConvertButton** to convert the SVG content to JSON format. The JSON is copied to the clipboard.
+* Select List and Column: The user selects a **SharePoint List** and **column** using the ListColumnSelector component.
+* Apply JSON Format: The user selects the **ApplyButton** to apply the JSON format to the selected column.
+
+## Conclusion
+
+This web part provides a user-friendly interface for selecting, converting, and applying SVG files to SharePoint list columns. It leverages React for the UI and PnPjs for SharePoint operations, to ensure a seamless integration with SharePoint. By breaking down the functionality into modular components, the web part is easy to maintain and extend.
+
+If you want to read more about this Web Part, [this blog post series is for you](https://m365princess.com/blogs/spfx-1)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.20.0-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
+
+## Prerequisites
+
+In the property pane, you can enter a SharePoint Site URL and a library name on that SharePoint Site where SVGs can be selected from.
+
+## Solution
+
+| Solution    | Author(s)                                               |
+| ----------- | ------------------------------------------------------- |
+| react-svg-to-json-converter | [Luise Freese](https://github.com/LuiseFreese) | @LuiseFreese |
+
+## Version history
+
+| Version | Date             | Comments        |
+| ------- | ---------------- | --------------- |
+| 1.0     | November 1 | Initial release |
+
+## 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.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Ensure that you are at the solution folder
+- in the command-line run:
+  - **npm install**
+  - **gulp serve**
+> Include any additional steps as needed.
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development