Approve React Quickview

samples/BasicCard-HTML-React-QuickView/README.md

@@ -27,7 +27,6 @@ For a detailed step-by-step guide, visit the author's [Step-by-Step Guide to Bui
 | ------------------------- | --------------- |
 | BasicCard-React-QuickView | Ahmad Jad Alhak  [GitHub](https://github.com/ahmad-jad-alhak), [Blog - Hashnode](https://ahmadjadalhak.hashnode.dev)|
 
-
 ## Version history
 
 | Version | Date             | Comments        |
@@ -68,16 +67,19 @@ For a detailed step-by-step guide, visit the author's [Step-by-Step Guide to Bui
 
 4. **Run the Project in Workbench:**:
   To run the web part locally in the SharePoint Workbench, use:
+
    ```bash
    gulp serve
    ```
 
 5. **Bundle and Deploy:**:
   If you’re ready to deploy the solution to a SharePoint site, follow these steps:
+
    ```bash
    gulp bundle --ship
    gulp package-solution --ship
    ```
+
 Then upload the generated `.sppkg` file to your SharePoint App Catalog and install the solution on your site.
 
 ## How It Works
@@ -99,27 +101,25 @@ This project focuses on creating an **Adaptive Card Extension (ACE)** where the
 
 - **Modify List Name**: The list name used in the Quick View can be customized to fetch data from any SharePoint list of your choosing. Simply update the `listName` prop passed to the `QuickViewComponent`.
 
-
 ## Technologies Used
 
 - **SPFx 1.20**: Latest version of SharePoint Framework, which introduces support for React in Quick View.
 - **React**: JavaScript library used to build dynamic, interactive user interfaces.
 - **PnPjs**: Simplified API wrapper for interacting with SharePoint data.
 - **TypeScript**: Strongly typed programming language used throughout the project.
 
-This project is licensed under the MIT Licens
-
+This project is licensed under the MIT License
 
 ## 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.**
 
-
 ## 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
-````
+
+<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-aces/samples/BasicCard-HTML-React-QuickView" />

samples/BasicCard-HTML-React-QuickView/assets/sample.json

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "pnp-sp-fx-aces-react-html-quickview",
+    "source": "pnp",
+    "title": "React HTML Quickview",
+    "shortDescription": "TThis project demonstrates how to leverage the new features introduced in SPFx 1.20, which allow developers to utilize React components within the **Quick View** of an Adaptive Card Extension (ACE).",
+    "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-HTML-React-QuickView",
+    "longDescription": [
+      "This project demonstrates how to leverage the new features introduced in SPFx 1.20, which allow developers to utilize React components within the Quick View of an Adaptive Card Extension (ACE). The main purpose of this web part is to showcase how to create dynamic, interactive, and reusable components in Quick View using React, enhancing the capabilities of SPFx Adaptive Card Extensions."
+    ],
+    "creationDateTime": "2024-10-05",
+    "updateDateTime": "2024-10-05",
+    "products": [
+      "SharePoint",
+      "Viva"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/BasicCard-HTML-React-QuickView/assets/preview.png",
+        "alt": "Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "ahmad-jad-alhak",
+        "company": "",
+        "pictureUrl": "https://github.com/ahmad-jad-alhak.png",
+        "name": "Ahmad Jad Alhak",
+        "twitter": ""
+      }
+    ],
+    "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"
+      }
+    ]
+  }
+]

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/ReactQuickViewAdaptiveCardExtension.d.ts

@@ -0,0 +1,17 @@
+import type { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
+import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';
+export interface IReactQuickViewAdaptiveCardExtensionProps {
+    title: string;
+    listName: string;
+}
+export interface IReactQuickViewAdaptiveCardExtensionState {
+}
+export declare const QUICK_VIEW_REGISTRY_ID: string;
+export default class ReactQuickViewAdaptiveCardExtension extends BaseAdaptiveCardExtension<IReactQuickViewAdaptiveCardExtensionProps, IReactQuickViewAdaptiveCardExtensionState> {
+    private _deferredPropertyPane;
+    onInit(): Promise<void>;
+    protected loadPropertyPaneResources(): Promise<void>;
+    protected renderCard(): string | undefined;
+    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration;
+}
+//# sourceMappingURL=ReactQuickViewAdaptiveCardExtension.d.ts.map

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/ReactQuickViewAdaptiveCardExtension.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/adaptive-card-extension-manifest.schema.json",
+  "id": "9de5431e-069e-4a2b-bd66-6dc732349d9f",
+  "alias": "ReactQuickViewAdaptiveCardExtension",
+  "componentType": "AdaptiveCardExtension",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["Dashboard"],
+  "preconfiguredEntries": [{
+    "groupId": "bd067b1e-3ad5-4d5d-a5fe-505f07d7f59c", // Dashboard
+    "group": { "default": "Dashboard" },
+    "title": { "default": "ReactQuickView" },
+    "description": { "default": "ReactQuickView description" },
+    "iconImageUrl": "https://res.cdn.office.net/files/fabric-cdn-prod_20240610.001/assets/brand-icons/product-monoline/svg/vivaconnections_32x1.svg",
+    "properties": {
+      "title": "React Quick View",
+      "listName": ""
+    },
+    "cardSize": "Large"
+  }]
+}

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/ReactQuickViewPropertyPane.d.ts

@@ -0,0 +1,5 @@
+import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
+export declare class ReactQuickViewPropertyPane {
+    getPropertyPaneConfiguration(): IPropertyPaneConfiguration;
+}
+//# sourceMappingURL=ReactQuickViewPropertyPane.d.ts.map

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/cardView/CardView.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponentsCardView, ComponentsCardViewParameters, IExternalLinkCardAction, IQuickViewCardAction } from '@microsoft/sp-adaptive-card-extension-base';
+import { IReactQuickViewAdaptiveCardExtensionProps, IReactQuickViewAdaptiveCardExtensionState } from '../ReactQuickViewAdaptiveCardExtension';
+export declare class CardView extends BaseComponentsCardView<IReactQuickViewAdaptiveCardExtensionProps, IReactQuickViewAdaptiveCardExtensionState, ComponentsCardViewParameters> {
+    get cardViewParameters(): ComponentsCardViewParameters;
+    get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined;
+}
+//# sourceMappingURL=CardView.d.ts.map

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/loc/en-us.js

@@ -0,0 +1,12 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "The main purpose of this web part is to showcase how to create dynamic, interactive, and reusable components in Quick View using React, enhancing the capabilities of SPFx Adaptive Card Extensions.",
+    "TitleFieldLabel": "Card title",
+    "ListNameFieldLabel": "List Name",
+    "Title": "Adaptive Card Extension",
+    "SubTitle": "Quick view",
+    "PrimaryText": "SPFx Adaptive Card Extension usign React Quick View",
+    "Description": "Create your SPFx Adaptive Card Extension solution!",
+    "QuickViewButton": "Quick view"
+  }
+});

samples/BasicCard-HTML-React-QuickView/lib/adaptiveCardExtensions/reactQuickView/quickView/QuickView.d.ts

@@ -0,0 +1,6 @@
+import { BaseWebQuickView } from "@microsoft/sp-adaptive-card-extension-base";
+import { IReactQuickViewAdaptiveCardExtensionProps, IReactQuickViewAdaptiveCardExtensionState } from "../ReactQuickViewAdaptiveCardExtension";
+export declare class QuickView extends BaseWebQuickView<IReactQuickViewAdaptiveCardExtensionProps, IReactQuickViewAdaptiveCardExtensionState> {
+    render(): void;
+}
+//# sourceMappingURL=QuickView.d.ts.map