Skip to content

Commit d261924

Browse files
hugoabernierhugoabernier
authored
Merge pull request #5473 from jtlivio/feature/react-carbon-footprint-calculator
2 parents 1cff1ec + 2da9bda commit d261924

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+34321
-0
lines changed

‎samples/react-carbon-footprint-calculator/.devcontainer/devcontainer.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "SPFx 1.21.1",
3+
"image": "docker.io/m365pnp/spfx:1.21.1",
4+
"customizations": {
5+
"vscode": {
6+
"extensions": [
7+
"editorconfig.editorconfig",
8+
"dbaeumer.vscode-eslint"
9+
]
10+
}
11+
},
12+
"forwardPorts": [
13+
4321,
14+
35729,
15+
5432
16+
],
17+
"portsAttributes": {
18+
"4321": {
19+
"protocol": "https",
20+
"label": "Manifest",
21+
"onAutoForward": "silent",
22+
"requireLocalPort": true
23+
},
24+
"5432": {
25+
"protocol": "https",
26+
"label": "Workbench",
27+
"onAutoForward": "silent"
28+
},
29+
"35729": {
30+
"protocol": "https",
31+
"label": "LiveReload",
32+
"onAutoForward": "silent",
33+
"requireLocalPort": true
34+
}
35+
},
36+
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
37+
"remoteUser": "node"
38+
}

‎samples/react-carbon-footprint-calculator/.devcontainer/spfx-startup.sh

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
echo
2+
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
3+
npm install
4+
5+
## commands to create dev certificate and copy it to the root folder of the project
6+
echo
7+
echo -e "\e[1;94mGenerating dev certificate\e[0m"
8+
gulp trust-dev-cert
9+
10+
# Convert the generated PEM certificate to a CER certificate
11+
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
12+
13+
# Copy the PEM ecrtificate for non-Windows hosts
14+
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
15+
16+
## add *.cer to .gitignore to prevent certificates from being saved in repo
17+
if ! grep -Fxq '*.cer' ./.gitignore
18+
then
19+
echo "# .CER Certificates" >> .gitignore
20+
echo "*.cer" >> .gitignore
21+
fi
22+
23+
## add *.pem to .gitignore to prevent certificates from being saved in repo
24+
if ! grep -Fxq '*.pem' ./.gitignore
25+
then
26+
echo "# .PEM Certificates" >> .gitignore
27+
echo "*.pem" >> .gitignore
28+
fi
29+
30+
echo
31+
echo -e "\e[1;92mReady!\e[0m"
32+
33+
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

‎samples/react-carbon-footprint-calculator/.eslintrc.js

Lines changed: 319 additions & 0 deletions
Large diffs are not rendered by default.

‎samples/react-carbon-footprint-calculator/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
release
13+
solution
14+
temp
15+
*.sppkg
16+
.heft
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# OSX
22+
.DS_Store
23+
24+
# Visual Studio files
25+
.ntvs_analysis.dat
26+
.vs
27+
bin
28+
obj
29+
30+
# Resx Generated Code
31+
*.resx.ts
32+
33+
# Styles Generated Code
34+
*.scss.ts

‎samples/react-carbon-footprint-calculator/.npmignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
!dist
2+
config
3+
4+
gulpfile.js
5+
6+
release
7+
src
8+
temp
9+
10+
tsconfig.json
11+
tslint.json
12+
13+
*.log
14+
15+
.yo-rc.json
16+
.vscode

‎samples/react-carbon-footprint-calculator/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18.20.2

‎samples/react-carbon-footprint-calculator/.yo-rc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"@microsoft/generator-sharepoint": {
3+
"plusBeta": false,
4+
"isCreatingSolution": true,
5+
"nodeVersion": "22.15.0",
6+
"sdksVersions": {},
7+
"version": "1.21.1",
8+
"libraryName": "react-carbon-footprint-calculator",
9+
"libraryId": "b393780f-53b0-429c-8123-44bf7a1dd515",
10+
"environment": "spo",
11+
"packageManager": "npm",
12+
"solutionName": "react-carbon-footprint-calculator",
13+
"solutionShortDescription": "react-carbon-footprint-calculator description",
14+
"skipFeatureDeployment": true,
15+
"isDomainIsolated": false,
16+
"componentType": "webpart"
17+
}
18+
}

‎samples/react-carbon-footprint-calculator/README.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Carbon Footprint Calculator
2+
3+
## Summary
4+
5+
This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint.
6+
7+
It helps users visualize their CO₂ emissions through intuitive inputs such as electricity usage, transportation habits, and more.
8+
9+
The solution uses **React**, **Fluent UI**, and **Chart.js** for dynamic charts, and supports exporting results to **PDF**.
10+
11+
![Solution in Action](./assets/sample.png)
12+
13+
## Compatibility
14+
15+
| :warning: Important |
16+
|:---------------------------|
17+
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to 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.|
18+
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
19+
20+
This sample is optimally compatible with the following environment configuration:
21+
22+
![SPFx 1.21.1](https://img.shields.io/badge/SPFx-1.21.1-green.svg)
23+
![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
24+
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
25+
![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")
26+
![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")
27+
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
28+
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
29+
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
30+
31+
32+
## Applies to
33+
34+
* [SharePoint Framework](https://aka.ms/spfx)
35+
* [Microsoft 365 tenant](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
36+
37+
> Get your own free development tenant by subscribing to the [Microsoft 365 developer program](https://aka.ms/o365devprogram)
38+
39+
## Prerequisites
40+
41+
* Node.js LTS (v18.x recommended)
42+
* npm package manager
43+
* SharePoint Online tenant for testing
44+
45+
## Contributors
46+
47+
* [João LIVIO](https://github.com/jtlivio)
48+
49+
## Version History
50+
51+
| Version | Date | Comments |
52+
| ------- | ----------- | ------------------------------ |
53+
| 1.1 | May 8, 2025 | Added PDF export functionality |
54+
| 1.0 | May 8, 2025 | Initial release |
55+
56+
57+
58+
## Minimal Path to Awesome
59+
60+
To test this solution in your environment:
61+
62+
```bash
63+
npm install
64+
gulp serve
65+
```
66+
67+
> Open SharePoint Online Workbench to load the web part.
68+
69+
## Features
70+
71+
This SPFx web part demonstrates the following features:
72+
73+
* Interactive sliders for real-time emissions calculation
74+
* Dynamic chart visualization of carbon footprint
75+
* Sustainable threshold indicators (green, yellow, red)
76+
* PDF export capability for sharing results
77+
* Tips for reducing carbon footprint
78+
79+
## References
80+
81+
* [Getting started with SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
82+
* [Building solutions for Microsoft Teams](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
83+
* [Using Microsoft Graph in SPFx solutions](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
84+
* [Publishing SPFx applications to Marketplace](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
85+
* [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) – Community-driven guidance, samples, and open-source tools
86+
87+
## Help
88+
89+
We do not support samples, but 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.
90+
91+
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.
92+
93+
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-carbon-footprint-calculator%22) to see if anybody else is having the same issues.
94+
95+
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-carbon-footprint-calculator) and see what the community is saying.
96+
97+
If you encounter any issues 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-carbon-footprint-calculator&template=bug-report.yml&sample=react-carbon-footprint-calculator&authors=@jtlivio&title=react-carbon-footprint-calculator%20-%20).
98+
99+
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-carbon-footprint-calculator&template=question.yml&sample=react-carbon-footprint-calculator&authors=@jtlivio&title=react-carbon-footprint-calculator%20-%20).
100+
101+
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-carbon-footprint-calculator&template=suggestion.yml&sample=react-carbon-footprint-calculator&authors=@jtlivio&title=react-carbon-footprint-calculator%20-%20).
102+
103+
## Disclaimer
104+
105+
**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.**
106+
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-carbon-footprint-calculator" />
107+

‎samples/react-carbon-footprint-calculator/assets/sample.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
[
2+
{
3+
"name": "pnp-sp-dev-spfx-web-parts-react-carbon-footprint-calculator",
4+
"source": "pnp",
5+
"title": "Carbon Footprint Calculator",
6+
"shortDescription": "This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint.",
7+
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-carbon-footprint-calculator",
8+
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-carbon-footprint-calculator",
9+
"longDescription": [
10+
"This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint."
11+
],
12+
"creationDateTime": "2025-05-08",
13+
"updateDateTime": "2025-05-08",
14+
"products": [
15+
"SharePoint"
16+
],
17+
"metadata": [
18+
{
19+
"key": "CLIENT-SIDE-DEV",
20+
"value": "React"
21+
},
22+
{
23+
"key": "SPFX-VERSION",
24+
"value": "1.21.1"
25+
}
26+
],
27+
"thumbnails": [
28+
{
29+
"name": "sample.png",
30+
"type": "image",
31+
"order": 100,
32+
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-carbon-footprint-calculator/assets/sample.png",
33+
"alt": "Web Part Preview"
34+
}
35+
],
36+
"authors": [
37+
{
38+
"gitHubAccount": "https://github.com/jtlivio",
39+
"pictureUrl": "https://github.com/jtlivio.png",
40+
"name": "João LIVIO"
41+
}
42+
],
43+
"references": [
44+
{
45+
"name": "Build your first SharePoint client-side web part",
46+
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
47+
"url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
48+
}
49+
]
50+
}
51+
]

‎samples/react-carbon-footprint-calculator/assets/sample.png

267 KB
Loading

‎samples/react-carbon-footprint-calculator/config/config.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"carbon-footprint-calculator-web-part": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/webparts/carbonFootprintCalculator/CarbonFootprintCalculatorWebPart.js",
9+
"manifest": "./src/webparts/carbonFootprintCalculator/CarbonFootprintCalculatorWebPart.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"CarbonFootprintCalculatorWebPartStrings": "lib/webparts/carbonFootprintCalculator/loc/{locale}.js"
17+
}
18+
}

‎samples/react-carbon-footprint-calculator/config/deploy-azure-storage.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "react-carbon-footprint-calculator",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎samples/react-carbon-footprint-calculator/config/package-solution.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "react-carbon-footprint-calculator-client-side-solution",
5+
"id": "b393780f-53b0-429c-8123-44bf7a1dd515",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.21.1"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "react-carbon-footprint-calculator description"
20+
},
21+
"longDescription": {
22+
"default": "react-carbon-footprint-calculator description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "react-carbon-footprint-calculator Feature",
31+
"description": "The feature that activates elements of the react-carbon-footprint-calculator solution.",
32+
"id": "916bbadc-41d4-443c-9b22-6bfc0a61608a",
33+
"version": "1.0.0.0"
34+
}
35+
]
36+
},
37+
"paths": {
38+
"zippedPackage": "solution/react-carbon-footprint-calculator.sppkg"
39+
}
40+
}

‎samples/react-carbon-footprint-calculator/config/sass.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
3+
}

‎samples/react-carbon-footprint-calculator/config/serve.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
3+
"port": 4321,
4+
"https": true,
5+
"initialPage": "https://joaolivio.sharepoint.com/sites/Ph7xhome/_layouts/15/workbench.aspx"
6+
}

‎samples/react-carbon-footprint-calculator/config/write-manifests.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
3+
"cdnBasePath": "<!-- PATH TO CDN -->"
4+
}

0 commit comments

Comments
 (0)