From 34ed3714b638f3d3465598d90f0a099c51b1617c Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Thu, 26 Aug 2021 00:08:31 -0400 Subject: [PATCH] Updated readme and sample json --- .../react-graph-telephonedirectory/README.md | 32 ++++- .../assets/sample.json | 7 +- .../react-htm-templating.json | 104 +++++++++++++++ ...-8202-4d11-817e-482586feeb6f.manifest.json | 119 ++++++++++++++++++ 4 files changed, 255 insertions(+), 7 deletions(-) create mode 100644 samples/react-htm-templating/release/component-dependency-audit/react-htm-templating.json create mode 100644 samples/react-htm-templating/release/manifests/3c0443ba-8202-4d11-817e-482586feeb6f.manifest.json diff --git a/samples/react-graph-telephonedirectory/README.md b/samples/react-graph-telephonedirectory/README.md index 9d351e88f..14079ff71 100644 --- a/samples/react-graph-telephonedirectory/README.md +++ b/samples/react-graph-telephonedirectory/README.md @@ -9,7 +9,14 @@ The web part will fetch data from directory using Graph API and display in detai ## Used SharePoint Framework Version -![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg) +## Compatibility + +![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) +![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.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 Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") + ## Applies to @@ -31,6 +38,7 @@ Solution|Author(s) --------|--------- react-graph-telephonedirectory | [Dipen Shah](https://github.com/Dips365) ([@Dips_365](https://twitter.com/Dips_365)) react-graph-telephonedirectory | [Aimery Thomas](https://github.com/a1mery) ([@aimery_thomas](https://twitter.com/aimery_thomas)) +react-graph-telephonedirectory | [mrkhandev](https://github.com/mrkhandev) ## Version history @@ -39,12 +47,8 @@ Version|Date|Comments -------|----|-------- 1.0|July 14,2020 | Initial Release 1.1|November 7,2020 | Upgraded to SPFx 1.11 +1.2|August 7, 2021|Adding the Title from the Property Pane into the Web Part -## 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 @@ -71,4 +75,20 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew * Microsoft Graph API * External API Integration with SharePoint Framework + +## 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.** + +## Help + +We do not support samples, but we 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. + +If you encounter any issues while 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&template=bug-report.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20). + +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%3Abug-suspected&template=question.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20). + +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%3Abug-suspected&template=suggestion.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20). + + diff --git a/samples/react-graph-telephonedirectory/assets/sample.json b/samples/react-graph-telephonedirectory/assets/sample.json index eebd7f98e..7f3e78de0 100644 --- a/samples/react-graph-telephonedirectory/assets/sample.json +++ b/samples/react-graph-telephonedirectory/assets/sample.json @@ -9,7 +9,7 @@ "This is sample web part using SPFx and MSGraph to fetch the users information based on First Name, Last Name and Email Address. web part will fetch data from directory using Graph API and display in details list." ], "creationDateTime": "2020-11-07", - "updateDateTime": "2020-11-07", + "updateDateTime": "2021-08-07", "products": [ "SharePoint", "Office" @@ -52,6 +52,11 @@ "pictureUrl": "https://avatars.githubusercontent.com/u/7100077?s=460\u0026v=4", "name": "Aimery Thomas", "twitter": "aimery_thomas" + }, + { + "gitHubAccount": "mrkhandev", + "pictureUrl": "https://github.com/mrkhandev.png", + "name": "mrkhandev" } ], "references": [ diff --git a/samples/react-htm-templating/release/component-dependency-audit/react-htm-templating.json b/samples/react-htm-templating/release/component-dependency-audit/react-htm-templating.json new file mode 100644 index 000000000..38851fc9a --- /dev/null +++ b/samples/react-htm-templating/release/component-dependency-audit/react-htm-templating.json @@ -0,0 +1,104 @@ +{ + "bundles": { + "react-htm-web-part": { + "dependencies": [ + { + "componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db", + "componentName": "@microsoft/sp-property-pane", + "componentVersion": "1.12.1", + "isDirectDependency": true + }, + { + "componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f", + "componentName": "@microsoft/sp-loader", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "8217e442-8ed3-41fd-957d-b112e841286a", + "componentName": "@ms/sp-telemetry", + "componentVersion": "0.19.2", + "isDirectDependency": false + }, + { + "componentId": "e40f8203-b39d-425a-a957-714852e33b79", + "componentName": "@microsoft/sp-dynamic-data", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a", + "componentName": "@microsoft/sp-lodash-subset", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b", + "componentName": "@microsoft/sp-core-library", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "01c4df03-e775-48cb-aa14-171ee5199a15", + "componentName": "tslib", + "componentVersion": "1.10.0", + "isDirectDependency": false + }, + { + "componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176", + "componentName": "@ms/odsp-core-bundle", + "componentVersion": "1.1.13", + "isDirectDependency": false + }, + { + "componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8", + "componentName": "@microsoft/sp-diagnostics", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8", + "componentName": "@microsoft/sp-page-context", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "229b8d08-79f3-438b-8c21-4613fc877abd", + "componentName": "@microsoft/load-themed-styles", + "componentVersion": "0.1.2", + "isDirectDependency": false + }, + { + "componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6", + "componentName": "@microsoft/sp-http", + "componentVersion": "1.12.1", + "isDirectDependency": false + }, + { + "componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d", + "componentName": "react", + "componentVersion": "16.9.0", + "isDirectDependency": false + }, + { + "componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a", + "componentName": "react-dom", + "componentVersion": "16.9.0", + "isDirectDependency": false + }, + { + "componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6", + "componentName": "@microsoft/sp-component-base", + "componentVersion": "1.12.1", + "isDirectDependency": true + }, + { + "componentId": "974a7777-0990-4136-8fa6-95d80114c2e0", + "componentName": "@microsoft/sp-webpart-base", + "componentVersion": "1.12.1", + "isDirectDependency": true + } + ] + } + } +} diff --git a/samples/react-htm-templating/release/manifests/3c0443ba-8202-4d11-817e-482586feeb6f.manifest.json b/samples/react-htm-templating/release/manifests/3c0443ba-8202-4d11-817e-482586feeb6f.manifest.json new file mode 100644 index 000000000..2095602d4 --- /dev/null +++ b/samples/react-htm-templating/release/manifests/3c0443ba-8202-4d11-817e-482586feeb6f.manifest.json @@ -0,0 +1,119 @@ +{ + "id": "3c0443ba-8202-4d11-817e-482586feeb6f", + "alias": "ReactHtmWebPart", + "componentType": "WebPart", + "version": "0.0.1", + "manifestVersion": 2, + "requiresCustomScript": false, + "supportedHosts": [ + "SharePointWebPart", + "SharePointFullPage" + ], + "supportsThemeVariants": true, + "supportsFullBleed": true, + "preconfiguredEntries": [ + { + "groupId": "5c03119e-3074-46fd-976b-c60198311f70", + "group": { + "default": "Other" + }, + "title": { + "default": "React HTM (Hyperscript Tagged Markup)" + }, + "description": { + "default": "Use HTM (Hyperscript Tagged Markup) as Template Engine for React components like 'Fluent UI React'" + }, + "officeFabricIconFontName": "CodeEdit", + "properties": { + "template": "let [count, setCount] = this.react.useState(0);\r\nconst originalItems = this.fuiHooks.useConst(() => this.fuiSampleData.createListItems(10));\r\nconst classNames = this.fui.mergeStyleSets({\r\n itemCell: [\r\n this.fui.getFocusStyle(this.theme, { inset: -1 }),\r\n {\r\n minHeight: 54,\r\n padding: 10,\r\n boxSizing: 'border-box',\r\n borderBottom: `1px solid ${this.themeVariant.semanticColors.bodyDivider}`,\r\n display: 'flex',\r\n selectors: {\r\n '&:hover': { background: this.themeVariant.palette.neutralLight },\r\n }\r\n },\r\n ],\r\n itemImage: {\r\n flexShrink: 0,\r\n },\r\n itemContent: {\r\n marginLeft: 10,\r\n overflow: 'hidden',\r\n flexGrow: 1,\r\n },\r\n itemName: [\r\n this.themeVariant.fonts.xLarge,\r\n {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n ],\r\n itemIndex: {\r\n fontSize: this.themeVariant.fonts.small.fontSize,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n marginBottom: 10,\r\n },\r\n chevron: {\r\n alignSelf: 'center',\r\n marginLeft: 10,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n fontSize: this.themeVariant.fonts.large.fontSize,\r\n flexShrink: 0,\r\n },\r\n});\r\n\r\nconst onRenderCell = (item, index) => {\r\n return this.html`\r\n
\r\n <${this.fui.Image} className=${classNames.itemImage} src=${item.thumbnail} width=${50} height=${50} imageFit=${this.fui.ImageFit.cover} />\r\n
\r\n
${item.name}
\r\n
${`Item ${index}`}
\r\n
${item.description}
\r\n
\r\n <${this.fui.Icon} className=${classNames.chevron} iconName=${this.fui.getRTL() ? 'ChevronLeft' : 'ChevronRight'} />\r\n
`;\r\n};\r\n\r\nreturn this.html`\r\n <${this.fui.ThemeProvider} theme=${this.themeVariant}>\r\n <${this.fui.Stack} tokens=${{ childrenGap: 10 }}>\r\n <${this.fui.Label}>Clicked ${count} times\r\n <${this.fui.PrimaryButton} text=\"Click here!\" onClick=${() => setCount(count + 1)} />\r\n <${this.fui.List} items=${originalItems} onRenderCell=${onRenderCell} />\r\n \r\n `;", + "loadFluentUI": true, + "loadFluentUISampleData": true + } + } + ], + "loaderConfig": { + "internalModuleBaseUrls": [ + "" + ], + "entryModuleId": "react-htm-web-part", + "scriptResources": { + "react-htm-web-part": { + "type": "path", + "path": "react-htm-web-part.js" + }, + "@microsoft/sp-property-pane": { + "type": "component", + "id": "f9e737b7-f0df-4597-ba8c-3060f82380db", + "version": "1.12.1" + }, + "@microsoft/sp-component-base": { + "type": "component", + "id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6", + "version": "1.12.1" + }, + "@microsoft/sp-lodash-subset": { + "type": "component", + "id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a", + "version": "1.12.1" + }, + "@microsoft/sp-core-library": { + "type": "component", + "id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b", + "version": "1.12.1" + }, + "@microsoft/sp-webpart-base": { + "type": "component", + "id": "974a7777-0990-4136-8fa6-95d80114c2e0", + "version": "1.12.1" + }, + "react": { + "type": "component", + "id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d", + "version": "16.9.0" + }, + "ReactHtmWebPartStrings": { + "type": "path", + "path": "ReactHtmWebPartStrings_en-us.js" + }, + "react-dom": { + "type": "component", + "id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a", + "version": "16.9.0" + }, + "PropertyControlStrings": { + "type": "localizedPath", + "paths": { + "bg-BG": "PropertyControlStrings_bg-bg.js", + "ca-ES": "PropertyControlStrings_ca-es.js", + "da-DK": "PropertyControlStrings_da-dk.js", + "de-DE": "PropertyControlStrings_de-de.js", + "el-GR": "PropertyControlStrings_el-gr.js", + "en-US": "PropertyControlStrings_en-us.js", + "es-ES": "PropertyControlStrings_es-es.js", + "et-EE": "PropertyControlStrings_et-ee.js", + "fi-FI": "PropertyControlStrings_fi-fi.js", + "fr-FR": "PropertyControlStrings_fr-fr.js", + "it-IT": "PropertyControlStrings_it-it.js", + "ja-JP": "PropertyControlStrings_ja-jp.js", + "lt-LT": "PropertyControlStrings_lt-lt.js", + "lv-LV": "PropertyControlStrings_lv-lv.js", + "nb-NO": "PropertyControlStrings_nb-no.js", + "nl-NL": "PropertyControlStrings_nl-nl.js", + "no": "PropertyControlStrings_no.js", + "pl-PL": "PropertyControlStrings_pl-pl.js", + "pt-PT": "PropertyControlStrings_pt-pt.js", + "ro-RO": "PropertyControlStrings_ro-ro.js", + "ru-RU": "PropertyControlStrings_ru-ru.js", + "sk-SK": "PropertyControlStrings_sk-sk.js", + "sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js", + "sv-SE": "PropertyControlStrings_sv-se.js", + "tr-TR": "PropertyControlStrings_tr-tr.js", + "vi-VN": "PropertyControlStrings_vi-vn.js", + "zh-CN": "PropertyControlStrings_zh-cn.js", + "zh-TW": "PropertyControlStrings_zh-tw.js" + }, + "defaultPath": "PropertyControlStrings_en-us.js" + } + } + } +} \ No newline at end of file