Release v3.0.0 (#205)

## 🎯 Aim

Create new major release

## 📷 Result

![walkthrough2](https://github.com/pnp/vscode-viva/assets/58668583/f2c6510c-aa09-49cc-ba63-752563d9d8d3)

## ✅ What was done

- [X] Added VS Code extension walkthrough
- [X] Rebrand the extension to SharePoint Framework Toolkit
- [X] Added support for picking either nvm or nvs for Node.js version
management

---------

Co-authored-by: Hugo Bernier <[email protected]>

Author: Adam-it

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [3.0.0] - 2024-03-31
+
+- Added VS Code extension walkthrough
+- Rebrand the extension to SharePoint Framework Toolkit
+- Added support for picking either nvm or nvs for Node.js version management
+
 ## [2.6.0] - 2024-03-18
 
 - Refactored and rebuilt the scaffolding process

README.md

@@ -1,9 +1,9 @@
 <h1 align="center">
-  <img alt="Viva Connections Toolkit for Visual Studio Code" src="./assets/logo-large.png" width="150px" />
+  <img alt="SharePoint Framework Toolkit for Visual Studio Code" src="./assets/logo-large.png" width="150px" />
 </h1>
 
 <h1 align="center">
-  Viva Connections Toolkit for Visual Studio Code
+  SharePoint Framework Toolkit for Visual Studio Code
 </h1>
 
 <p align="center">
@@ -18,7 +18,7 @@
   </a>
 </p>
 
-<p align="center">Viva Connections Toolkit (SPFx Toolkit) is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.</p>
+<p align="center">SharePoint Framework Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.</p>
 
 <p align="center">
   <a href="#-capabilities">Capabilities</a> |
@@ -210,7 +210,7 @@ And for Azure DevOps👇
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
 
-- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - Viva Connections Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. 
+- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - SharePoint Framework Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. 
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)
 
@@ -224,7 +224,7 @@ The help and feedback section is a group of links that will direct you to the ri
 
 ### 1️⃣0️⃣ Coding Snippets
 
-The Viva Connections Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/). 
+The SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/). 
 
 It contains snippets for working in:
 
@@ -246,15 +246,21 @@ Check it out in action 👇
 
 ### 1️⃣1️⃣ Teams Toolkit Integration
 
-[Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. Viva Connection Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.
+[Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. SharePoint Framework Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Teams Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.
 
 ![Teams Toolkit integration](./assets/images/better-together.png)
 
 [Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/6-Teams-Toolkit-Integration)
 
+### 1️⃣2️⃣ Node.js Version Manager Support
+
+By default, the SharePoint Framework Toolkit will use the Node.js version that is installed on your machine. If you want to use a different version, you can use a Node.js Version Manager such as [nvm](https://github.com/nvm-sh/nvm) or [nvs](https://github.com/jasongin/nvs). The SharePoint Framework Toolkit will detect the preferred version of Node.js if a `.nvmrc` file is present in the root of your project, and will use that version for all the actions.
+
+You can use the settings to change which Node.js version manager you want to use. You may choose between `nvm` and `nvs`. If you wish to avoid using a Node.js version manager, you can set the value to `none`
+
 ## ⚙️ Architecture
 
-Viva Connections Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/). 
+SharePoint Framework Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/). 
 
 This means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx.
 

assets/images/better-together.png

@@ -0,0 +1,17 @@
+##  CI/CD Workflow
+
+SharePoint Framework Toolkit extends VS Code with additional UI to present you with a scaffolding form that will allow you to create a CI/CD Workflow in 3 easy steps.
+
+It's important to know that many fields are already prefield and it is possible to hit create without changing any value to get a basic and default YAML workflow file.
+
+![CI CD pipeline](../images/CICD-pipeline.png)
+
+Check it out in action for GitHub👇
+
+![GitHub CI CD workflow](../images/gh-ci-cd.gif)
+
+And for Azure DevOps👇
+
+![Azure DevOps CI CD pipeline](../images/azdo-ci-cd.gif)
+
+[Check out our docs for more details and a step by step guide](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)

assets/logo-large.png

@@ -0,0 +1,21 @@
+## Coding Snippets
+
+The SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/). 
+
+It contains snippets for working in:
+
+- JavaScript (resource files)
+- React
+- SASS (SCSS)
+- TypeScript
+- JSON
+
+In order to start using it simply start typing from `spfx-` and you should see a full list of snippets that will inject code into the current file.
+
+![code snippets](../images/code-snippets.png)
+
+Check out the extension [details to find out more](https://github.com/estruyf/vscode-spfx-snippets#usage) 
+
+Check it out in action 👇
+
+![code snippets](../images/code-snippets.gif)

assets/walkthrough/cicd-workflow.md

@@ -0,0 +1,37 @@
+## Create a new project
+
+Creating a new project was never easier. Just use the **create a new project** action, and the extension will guide you through the process with a dedicated scaffolding form.
+
+![Create new project](../images/scaffolding.png)
+
+Check it out in action 👇.
+
+![Create new project](../images/scaffolding-form.gif)
+
+It's possible to scaffold any kind of SPFx project.
+
+![All SPFx project support](../images/scaffolding-support.png)
+
+Install additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), and [PnPjs](https://pnp.github.io/pnpjs/).
+
+![Additional dependency step](../images/scaffolding-additional-step.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#1-scaffold-a-new-spfx-project)
+
+## Don't Start from scratch. Reuse an SPFx (web part or extension) or ACE sample
+
+You may kick-start your development with a new project based on an existing ACE or SPFx web part or extension with a click of a button. All of the provided samples are powered by [PnP Samples repositories](https://pnp.github.io/sp-dev-fx-webparts/samples/type/).
+
+![Sample gallery](../images/samples.png)
+
+The extension provides a set of filters to help you find the right sample for your needs. You may search by: author, title, description, SPFx version, and component type. It is also possible browse sample details view directly from VS Code checking all sample details before you create a new project.
+
+Switch between the list and grid view and don't worry about the size of your VS Code as it is fully responsive.
+
+![Sample gallery is responsive](../images/samples-responsive.png)
+
+Check out how easy it is to create a new project based on a existing sample 👇. 
+
+![Create project based on web part sample](../images/sample-gallery.gif)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.2-Scaffolding#2-dont-start-from-scratch---sample-galleries)

assets/walkthrough/coding-snippets.md

@@ -0,0 +1,12 @@
+
+## SharePoint Framework
+
+With SharePoint Framework (SPFx), you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.
+
+Go over the [overview of the SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview) to find out more.
+
+## Set up your Microsoft 365 tenant
+
+To build and deploy client-side web parts, extensions or adaptive cards using the SharePoint Framework, you need a Microsoft 365 tenant. You may join the [developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) to get a free Microsoft 365 developer tenant.
+
+Go over the [set up instructions](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) to find out more.

assets/walkthrough/create-new-project.md

@@ -0,0 +1,69 @@
+##  Gulp tasks
+
+The extension shows all possible Gulp tasks one may run on an SPFx project. The tasks allow you to clean, bundle, package, serve the project with a single click.
+
+![Gulp Tasks](../images/tasks.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.4-Gulp-tasks)
+
+##  Actions
+
+The actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.
+
+![Actions](../images/actions.png)
+
+Currently the extension allows you to:
+
+- **CI/CD Workflow** - This action will allow you to generate yaml CI/CD GitHub Workflow or Azure DevOps Pipeline to bundle, package, and deploy your project to any app catalog on every code push. 
+
+![CI CD pipeline](../images/CICD-pipeline.png)
+
+Check it out in action for GitHub👇
+
+![GitHub CI CD workflow](../images/gh-ci-cd.gif)
+
+And for Azure DevOps👇
+
+![Azure DevOps CI CD pipeline](../images/azdo-ci-cd.gif)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#cicd-github-workflow)
+
+- **Upgrade project** - Uses CLI for Microsoft 365 to create a .md report with upgrade guidance to the latest supported SPFx version by the extension. 
+
+![Upgrade project](../images/upgrade-project.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#upgrade-project)
+
+- **Validate current project** - Creates a validation .md report against the currently used SPFx version in the project. The action will automatically detect the SPFx version used and will validate if the project is properly set up. 
+
+![Upgrade project](../images/validate-project.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#validate-current-project)
+
+- **Rename current project** - Forget about manual work and let the extension rename your project and generate a new solution ID. 
+
+![Rename](../images/rename.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#rename-current-project)
+
+- **Grant API permissions** - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click. 
+
+![Grant permissions](../images/grant-permissions.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Deploy project** - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog. 
+
+![Deploy](../images/deploy.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#grant-api-permissions)
+
+- **Add new component** - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer. 
+
+![Add component](../images/add-component.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#add-new-component)
+
+- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - SharePoint Framework Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. 
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.5-Actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)

assets/walkthrough/spfx-intro.md

@@ -0,0 +1,29 @@
+## Login to your tenant & retrieve environment details
+
+![tenant info](../images/tenant-info.png)
+
+The extension allows you to login to your Microsoft 365 tenant using CLI for Microsoft 365.
+
+![login](../images/login.png)
+
+Thanks to that the extension will retrieve helpful URLs from your tenant like: 
+
+- link to SharePoint main site 
+- link to SharePoint admin site
+- link to SharePoint web API permission management page
+
+Additionally, the extension will check and retrieve tenant service health incidents that are currently happening in your tenant so that you gain quick insights on your tenant health.
+
+![tenant details](../images/tenant-links.png)
+
+After successful login an additional view is presented that shows list links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. Additionally it will show you all tenant-wide extensions installed on your tenant with.
+
+![tenant details](../images/app-catalog-list.png)
+
+Login-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.
+
+Additionally, when an SPFx project is opened the extension will check serve.json file and suggest updating it to set the properties based on the currently logged-in tenant.
+
+![validate serve](../images/validate-serve-config.png)
+
+[Check out our docs for more details](https://github.com/pnp/vscode-viva/wiki/5.3-Login-to-your-tenant-&-retrieve-environment-details)