Merging PR #171

samples/ImageCard-WorldClock/.gitignore

@@ -0,0 +1,35 @@
+# 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
+*.scss.d.ts

samples/ImageCard-WorldClock/.npmignore

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

samples/ImageCard-WorldClock/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Hosted workbench",
+      "type": "msedge",
+      "request": "launch",
+      "url": "https://{tenantDomain}/_layouts/workbench.aspx",
+      "webRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///.././src/*": "${webRoot}/src/*",
+        "webpack:///../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../../src/*": "${webRoot}/src/*"
+      },
+      "runtimeArgs": [
+        "--remote-debugging-port=9222",
+        "-incognito"
+      ]
+    }
+  ]
+}

samples/ImageCard-WorldClock/.vscode/settings.json

@@ -0,0 +1,14 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  // Configure glob patterns for excluding files and folders in the file explorer.
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/bower_components": true,
+    "**/coverage": true,
+    "**/jest-output": true,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/ImageCard-WorldClock/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.18.0",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.12.0"
+    },
+    "version": "1.18.2",
+    "libraryName": "basic-card-world-clock",
+    "libraryId": "94ece9e2-d130-4c86-b0ec-b9a1c0ca240b",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "basic-card-world-clock",
+    "solutionShortDescription": "basic-card-world-clock description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "adaptiveCardExtension",
+    "aceTemplateType": "Generic"
+  }
+}

samples/ImageCard-WorldClock/README.md

@@ -0,0 +1,54 @@
+# World Clock
+
+## Summary
+
+A simple Adaptive Card Extension that shows the current time for different timezones.
+
+![screen01](./assets/Screen01.png)
+
+![screen02](./assets/Screen02.png)
+
+## Compatibility
+
+![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg)
+![Node.js LTS 18.x](https://img.shields.io/badge/Node.js-LTS%2018.x-green.svg)
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
+![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
+![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+
+## Solution
+
+| Solution   | Author(s)                                 |
+| ---------- | ----------------------------------------- |
+| WorldClock | [Matteo Serpi](https://github.com/srpmtt) |
+
+## Version history
+
+| Version | Date              | Comments        |
+| ------- | ----------------- | --------------- |
+| 1.0     | February 03, 2024 | 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 build --ship`
+    - `gulp bundle --ship`
+    - `gulp package-solution --ship`
+
+- Browse to your SharePoint app catalog and load the SPFx package.
+
+    <img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-aces/samples/ImageCard-WorldClock" />

samples/ImageCard-WorldClock/assets/sample.json

@@ -0,0 +1,66 @@
+[
+    {
+      "name": "pnp-sp-fx-aces-imagecard-worldclock",
+      "source": "pnp",
+      "title": "Image Card World Clock",
+      "shortDescription": "An Adaptive Card Extension that shows the current time for different timezones.",
+      "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-WorldClock",
+      "longDescription": [
+        "This solution shows how to show the current time for different timezones using an Adaptive Card Extension. The ACE shows the local time in the card and shows the current time in different timezones (America, Europe, Asia and Australia) in the quick view."
+      ],
+      "creationDateTime": "2024-02-03",
+      "updateDateTime": "2024-01-21",
+      "products": [
+        "SharePoint",
+        "Viva"
+      ],
+      "metadata": [
+        {
+          "key": "CLIENT-SIDE-DEV",
+          "value": "React"
+        },
+        {
+          "key": "SPFX-VERSION",
+          "value": "1.18"
+        }
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-WorldClock/assets/Screen01.png",
+          "alt": "Preview"
+        },
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-WorldClock/assets/Screen02.png",
+          "alt": "Preview"
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "srpmtt",
+          "pictureUrl": "https://github.com/srpmtt.png",
+          "name": "Matteo Serpi"
+        }
+      ],
+      "references": [
+        {
+          "name": "Viva Connections Extensibility guidance",
+          "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
+          "url": "https://aka.ms/viva/connections/extensibility"
+        },
+        {
+          "name": "Adaptive Card Documentation",
+          "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
+          "url": "https://adaptivecards.io/"
+        },
+        {
+          "name": "Adaptive Card Extension Design Guidance",
+          "description": "Design guidance for laying out Adaptive Card Extensions.",
+          "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
+        }
+      ]
+    }
+  ]

samples/ImageCard-WorldClock/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": {
+    "world-clock-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/worldClock/WorldClockAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/worldClock/WorldClockAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "WorldClockAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/worldClock/loc/{locale}.js"
+  }
+}

samples/ImageCard-WorldClock/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": "image-card-world-clock",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ImageCard-WorldClock/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "WorldClock ACE",
+    "id": "94ece9e2-d130-4c86-b0ec-b9a1c0ca240b",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.18.2"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "WorldClock ACE"
+      },
+      "longDescription": {
+        "default": "WorldClock ACE"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "image-card-world-clock Feature",
+        "description": "The feature that activates elements of the image-card-world-clock solution.",
+        "id": "f244eb1f-fab2-4e48-a0ae-85b68f152200",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/image-card-world-clock.sppkg"
+  }
+}

samples/ImageCard-WorldClock/config/sass.json

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

samples/ImageCard-WorldClock/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://{tenantDomain}/_layouts/workbench.aspx"
+}

samples/ImageCard-WorldClock/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/ImageCard-WorldClock/fast-serve/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
+  "cli": {
+    "isLibraryComponent": false
+  }
+}

samples/ImageCard-WorldClock/fast-serve/webpack.extend.js

@@ -0,0 +1,31 @@
+/*
+* User webpack settings file. You can add your own settings here.
+* Changes from this file will be merged into the base webpack configuration file.
+* This file will not be overwritten by the subsequent spfx-fast-serve calls.
+*/
+
+/**
+ * you can add your project related webpack configuration here, it will be merged using webpack-merge module
+ * i.e. plugins: [new webpack.Plugin()]
+ */
+const webpackConfig = {
+
+}
+
+/**
+ * For even more fine-grained control, you can apply custom webpack settings using below function
+ * @param {object} initialWebpackConfig - initial webpack config object
+ * @param {object} webpack - webpack object, used by SPFx pipeline
+ * @returns webpack config object
+ */
+const transformConfig = function (initialWebpackConfig, webpack) {
+  // transform the initial webpack config here, i.e.
+  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
+
+  return initialWebpackConfig;
+}
+
+module.exports = {
+  webpackConfig,
+  transformConfig
+}

samples/ImageCard-WorldClock/gulpfile.js

@@ -0,0 +1,22 @@
+'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;
+};
+
+/* fast-serve */
+const { addFastServe } = require("spfx-fast-serve-helpers");
+addFastServe(build);
+/* end of fast-serve */
+
+build.initialize(require('gulp'));
+