Merge branch 'main' into dependabot/npm_and_yarn/samples/react-rhythm…

…-of-business-calendar/nanoid-3.3.8
pnp · Jan 13, 2025 · c35c32e · c35c32e
2 parents 0c258d7 + 6f75d1f
commit c35c32e
Show file tree

Hide file tree

Showing 71 changed files with 30,707 additions and 58 deletions.
diff --git a/.metadata/extension-samples.json b/.metadata/extension-samples.json
@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],

diff --git a/.metadata/samples.json b/.metadata/samples.json
@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],
@@ -27685,6 +27685,83 @@
       }
     ]
   },
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-svg-to-json-converter",
+    "source": "pnp",
+    "title": "SVG to JSON Converter",
+    "shortDescription": "Allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "longDescription": [
+      "This web part allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting. Users can both copy the JSON format to their clipboard (for further manipulation) or select a site, a list, and a column and then directly apply the format to this column."
+    ],
+    "creationDateTime": "2024-11-01",
+    "updateDateTime": "2024-11-01",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "name": "webpart-german.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-german.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-sp.png",
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-sp.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-reset.png",
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-reset.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-site-selector.png",
+        "type": "image",
+        "order": 103,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-site-selector.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart.png",
+        "type": "image",
+        "order": 104,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart.png",
+        "alt": "Web Part Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "LuiseFreese",
+        "pictureUrl": "https://github.com/LuiseFreese.png",
+        "name": "Luise Freese"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "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.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  },
   {
     "name": "pnp-sp-dev-spfx-web-parts-react-tabacordion",
     "source": "pnp",

diff --git a/samples/react-modern-carousel/README.md b/samples/react-modern-carousel/README.md
@@ -54,7 +54,7 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
 | Version | Date             | Comments                            |
 | ------- | ---------------- | ----------------------------------- |
 | 1.0     | March 16, 2024   | Initial release                     |
-| 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc changes |
+| 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc. changes |
 | 2.0     | November 1, 2024 | New feature: card styles & animations |
 
 ## Minimal Path to Awesome⚡
@@ -85,7 +85,7 @@ Key features demonstrated by this solution:
 ## References
 
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development.
-- [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 - [PnP JS](https://pnp.github.io/pnpjs/)
 - [PnP React Hooks](https://superioone.github.io/pnp-react-hooks/)
 - [SwiperJS](https://swiperjs.com)

diff --git a/samples/react-modern-carousel/src/components/Carousel.tsx b/samples/react-modern-carousel/src/components/Carousel.tsx
@@ -57,7 +57,20 @@ export const Carousel = (): JSX.Element => {
   const moduleType =
     contextInfo.cardType === "coverEffect" ? EffectCoverflow : EffectCards
 
-  console.log("module type", moduleType)
+  console.log("card style", contextInfo.cardStyle)
+
+  const cardStyles =
+    contextInfo.cardStyle === "rounded"
+      ? {
+          width: "400px",
+          height: "400px",
+          borderRadius: "100%",
+        }
+      : {
+          width: "300px",
+          height: "400px",
+          borderRadius: "9px",
+        }
 
   return (
     <div className={styles.container}>
@@ -76,8 +89,8 @@ export const Carousel = (): JSX.Element => {
           coverflowEffect={{
             rotate: 0,
             stretch: 0,
-            depth: 100,
-            modifier: 2.5,
+            depth: 120,
+            modifier: 3.5,
           }}
           keyboard={{ enabled: true }}
           mousewheel={{
@@ -100,13 +113,7 @@ export const Carousel = (): JSX.Element => {
         >
           {awardList?.map((user, index) => (
             <SwiperSlide key={index}>
-              <Card
-                style={{
-                  width: "300px",
-                  height: "400px",
-                  borderRadius: "8px",
-                }}
-              >
+              <Card style={cardStyles}>
                 <CardPreview style={{ height: "inherit" }}>
                   <img src={user.ImageUrl} alt={user.Title} />
                 </CardPreview>

diff --git a/samples/react-modern-carousel/src/components/Content.tsx b/samples/react-modern-carousel/src/components/Content.tsx
@@ -1,31 +1,35 @@
-import * as React from "react";
-import { Text } from "@fluentui/react-components";
-import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
+import * as React from "react"
+import { Text } from "@fluentui/react-components"
+import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
 import { ContentProps } from "../types/ContentProps"
-import { useContext } from "react";
-import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition";
+import { useContext } from "react"
+import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition"
 
 export const Content = ({ user }: ContentProps): JSX.Element => {
-  const contextInfo = useContext(WebpartContext);
+  const contextInfo = useContext(WebpartContext)
 
   return (
     <section className={styles.contentWrapper}>
-      <Text size={600} weight="semibold">
+      <Text size={600} weight='semibold' className={styles.webpartTitle}>
         {contextInfo.webpartTitle}
       </Text>
       <div className={styles.contentDescriptionWrapper}>
-        <Text size={400} weight="semibold" className={styles.contentTitle}>
+        <Text size={400} weight='semibold' className={styles.contentTitle}>
           {contextInfo.contentTitle}
         </Text>
-        <Text size={300}>{contextInfo.contentDescription}</Text>
+        <Text size={300} className={styles.contentDescription}>
+          {contextInfo.contentDescription}
+        </Text>
       </div>
 
       <div className={styles.userInfo}>
-        <Text size={800} weight="semibold" className={styles.userName}>
+        <Text size={800} weight='semibold' className={styles.userName}>
           {user?.Title}
         </Text>
-        <Text size={400}>{user?.Designation}</Text>
+        <Text size={400} className={styles.designation}>
+          {user?.Designation}
+        </Text>
       </div>
     </section>
-  );
-};
+  )
+}
diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/AwardRecognitionWebPart.ts b/samples/react-modern-carousel/src/webparts/awardRecognition/AwardRecognitionWebPart.ts
@@ -24,6 +24,7 @@ export interface IAwardRecognitionWebPartProps {
   hookOptions: PnpHookGlobalOptions
   animationChoice: string
   cardType: string
+  cardStyle: string
 }
 
 export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwardRecognitionWebPartProps> {
@@ -42,6 +43,7 @@ export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwar
         userDisplayName: this.context.pageContext.user.displayName,
         animationChoice: this.properties.animationChoice,
         cardType: this.properties.cardType,
+        cardStyle: this.properties.cardStyle,
       })
 
     // Use helper function to create React elements.
@@ -177,6 +179,18 @@ export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwar
                 }),
               ],
             },
+            {
+              groupName: strings.CardsStyleGroupName,
+              groupFields: [
+                PropertyPaneChoiceGroup("cardStyle", {
+                  label: "Choose card styles",
+                  options: [
+                    { key: "rounded", text: "Rounded" },
+                    { key: "roundedSquare", text: "Rounded Square" },
+                  ],
+                }),
+              ],
+            },
           ],
         },
       ],

diff --git a/...act-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss b/...act-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss
@@ -12,14 +12,21 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
 .container {
   display: flex;
 }
-
+.webpartTitle {
+  font-family: var(--fontFamilyCustomFont1500, var(--fontFamilyBase));
+}
 .contentWrapper {
   display: grid;
   gap: 3rem;
 }
 .contentTitle,
 .userName {
   color: $primaryColor;
+  font-family: var(--fontFamilyCustomFont1500, var(--fontFamilyBase));
+}
+.contentDescription,
+.designation {
+  font-family: var(--fontFamilyCustomFont800, var(--fontFamilyBase));
 }
 .asideWrapper {
   width: 30%;

diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx b/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx
@@ -13,7 +13,7 @@ export const AwardRecognition = (
     <WebpartContext.Provider value={props}>
       <FluentProvider
         theme={webLightTheme}
-        style={{ width: "100%", background: "none" }}
+        style={{ width: "100%", background: "none", margin: "0 2rem" }}
       >
         <Carousel />
       </FluentProvider>

diff --git a/.../react-modern-carousel/src/webparts/awardRecognition/components/IAwardRecognitionProps.ts b/.../react-modern-carousel/src/webparts/awardRecognition/components/IAwardRecognitionProps.ts
@@ -8,4 +8,5 @@ export interface IAwardRecognitionProps {
   userDisplayName: string
   animationChoice: string
   cardType: string
+  cardStyle: string
 }
diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js b/samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js
@@ -3,6 +3,7 @@ define([], function () {
     PropertyPaneDescription: "Configure this webpart",
     BasicGroupName: "Basic settings",
     CarouselControlsGroupName: "Control carousel settings",
+    CardsStyleGroupName: "Card styles",
     WebpartFieldLabel: "Heading",
     ContentTitleFieldLabel: "Sub heading",
     ContentDescriptionFieldLabel: "Sub heading description",

diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/loc/mystrings.d.ts b/samples/react-modern-carousel/src/webparts/awardRecognition/loc/mystrings.d.ts
@@ -2,6 +2,7 @@ declare interface IAwardRecognitionWebPartStrings {
   PropertyPaneDescription: string
   BasicGroupName: string
   CarouselControlsGroupName: string
+  CardsStyleGroupName: string
   ContentDescriptionFieldLabel: string
   ContentTitleFieldLabel: string
   WebpartFieldLabel: string

diff --git a/samples/react-securitygrid/README.md b/samples/react-securitygrid/README.md
@@ -97,6 +97,7 @@ This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/rus
 
 Version|Date|Comments
 -------|----|--------
+1.0.7.0|Nov 28, 2024 | Property pane didn't refresh fixed, added multiple permissions display
 1.0.6.0|Oct 20, 2024 | Upgrade to SPFx 1.20
 1.0.5.0|March 6, 2021 | Added webApiPermission request
 1.0.0.4|February 22, 2021 | Added support for AD groups

diff --git a/samples/react-securitygrid/package.json b/samples/react-securitygrid/package.json
@@ -1,7 +1,7 @@
 {
     "main": "lib/index.js",
     "name": "spsecurity-webpart-3",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "private": true,
     "engines": {
         "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"

diff --git a/samples/react-securitygrid/src/webparts/spSecurity/SpSecurityWebPart.ts b/samples/react-securitygrid/src/webparts/spSecurity/SpSecurityWebPart.ts
@@ -12,7 +12,7 @@ import * as ReactDom from "react-dom";
 import { ISpSecurityProps } from "./components/ISpSecurityProps";
 import SpSecurity from "./components/SpSecurity";
 import { PropertyFieldSelectedPermissions } from "./containers/PropertyFieldSelectedPermissions";
-import { ISpSecurityWebPartProps } from "./ISpSecurityWebPartProps";
+import { ISelectedPermission, ISpSecurityWebPartProps } from "./ISpSecurityWebPartProps";
 
 export default class SpSecurityWebPart extends BaseClientSideWebPart<ISpSecurityWebPartProps> {
   private _sp: SPFI = null;
@@ -70,18 +70,22 @@ export default class SpSecurityWebPart extends BaseClientSideWebPart<ISpSecurity
     return perms;
   }
 
-  private onPropertyChange(propertyPath: string, newValue: unknown): void {
+  private onPropertyChange(propertyPath: string, oldValue: ISelectedPermission[], newValue: ISelectedPermission[]): void {
     switch (propertyPath) {
-      case "SelectedPermissions":
-        this.properties.selectedPermissions = newValue as ISpSecurityWebPartProps['selectedPermissions'];
+      case "SelectedPermissions": {
+        const updatedPermissions = newValue.map(newPerm => {
+          const existingPermission = this.properties.selectedPermissions.find(permission => permission.permission === newPerm.permission);
+          return existingPermission ? { ...existingPermission, ...newPerm } : newPerm;
+        });
+        this.properties.selectedPermissions = updatedPermissions;
         this.context.propertyPane.refresh();
         this.render();
         break;
+      }
       default:
         break;
     }
   }
-
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [