From b8d5edb10f70bc4a13649c0d7f08c717fd309d2c Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Sat, 30 Mar 2024 12:24:55 -0400 Subject: [PATCH] Updated readme, sample.json, and devcontainer --- .../.devcontainer/devcontainer.json | 38 ++ .../.devcontainer/spfx-startup.sh | 33 ++ samples/react-modern-carousel/README.md | 10 +- .../assets/AwardRecognition.png | Bin .../react-modern-carousel/assets/sample.json | 51 +++ .../react-modern-carousel/package-lock.json | 2 +- samples/react-modern-carousel/spfx.upgrade.md | 408 ------------------ .../src/components/Carousel.tsx | 11 +- .../src/components/Content.tsx | 2 +- .../src/types/ContentProps.ts | 2 +- .../components/AwardRecognition.tsx | 2 +- 11 files changed, 137 insertions(+), 422 deletions(-) create mode 100644 samples/react-modern-carousel/.devcontainer/devcontainer.json create mode 100644 samples/react-modern-carousel/.devcontainer/spfx-startup.sh rename samples/react-modern-carousel/{src/webparts/awardRecognition => }/assets/AwardRecognition.png (100%) create mode 100644 samples/react-modern-carousel/assets/sample.json delete mode 100644 samples/react-modern-carousel/spfx.upgrade.md diff --git a/samples/react-modern-carousel/.devcontainer/devcontainer.json b/samples/react-modern-carousel/.devcontainer/devcontainer.json new file mode 100644 index 000000000..142906b55 --- /dev/null +++ b/samples/react-modern-carousel/.devcontainer/devcontainer.json @@ -0,0 +1,38 @@ +{ + "name": "SPFx 1.18.2", + "image": "docker.io/m365pnp/spfx:1.18.2", + "customizations": { + "vscode": { + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ] + } + }, + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/react-modern-carousel/.devcontainer/spfx-startup.sh b/samples/react-modern-carousel/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..456d6aea8 --- /dev/null +++ b/samples/react-modern-carousel/.devcontainer/spfx-startup.sh @@ -0,0 +1,33 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer + +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +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**********" \ No newline at end of file diff --git a/samples/react-modern-carousel/README.md b/samples/react-modern-carousel/README.md index 60d0230eb..a83447516 100644 --- a/samples/react-modern-carousel/README.md +++ b/samples/react-modern-carousel/README.md @@ -1,10 +1,10 @@ -# React Modern Carousel Web Part +# Modern Carousel ## Summary -This SharePoint Framework (SPFx) webpart introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment. +This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment. -![Award Recognition](src/webparts/awardRecognition/assets/AwardRecognition.png) +![Award Recognition](./assets/AwardRecognition.png) ## Compatibility @@ -49,7 +49,7 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c | Solution | Author(s) | | ----------- | ------------------------------------------------------- | -| react-modern-carousel| Sandeep P S ( [Linkedin](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [Linkedin](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) | +| react-modern-carousel| Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) | ## Contributors🧑‍💻 @@ -91,7 +91,7 @@ Key features demonstrated by this solution: - [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) - [PnP JS](https://pnp.github.io/pnpjs/) -- [Pnp React Hooks](https://superioone.github.io/pnp-react-hooks/) +- [PnP React Hooks](https://superioone.github.io/pnp-react-hooks/) - [SwiperJS](https://swiperjs.com) - [React Docs](https://react.dev/learn) diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/assets/AwardRecognition.png b/samples/react-modern-carousel/assets/AwardRecognition.png similarity index 100% rename from samples/react-modern-carousel/src/webparts/awardRecognition/assets/AwardRecognition.png rename to samples/react-modern-carousel/assets/AwardRecognition.png diff --git a/samples/react-modern-carousel/assets/sample.json b/samples/react-modern-carousel/assets/sample.json new file mode 100644 index 000000000..5f9413561 --- /dev/null +++ b/samples/react-modern-carousel/assets/sample.json @@ -0,0 +1,51 @@ +[ + { + "name": "pnp-sp-dev-spfx-web-parts-react-modern-carousel", + "source": "pnp", + "title": "Modern Carousel", + "shortDescription": "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site.", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel", + "longDescription": [ + "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment." + ], + "creationDateTime": "2024-12-25", + "updateDateTime": "2024-12-31", + "products": [ + "SharePoint" + ], + "metadata": [ + { + "key": "CLIENT-SIDE-DEV", + "value": "React" + }, + { + "key": "SPFX-VERSION", + "value": "1.18.2" + } + ], + "thumbnails": [ + { + "name": "AwardRecognition.png", + "type": "image", + "order": 100, + "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-carousel/assets/AwardRecognition.png", + "alt": "Web Part Preview" + } + ], + "authors": [ + { + "gitHubAccount": "Sandeep-FED", + "pictureUrl": "https://github.com/Sandeep-FED.png", + "name": "Sandeep P S" + } + ], + "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://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" + } + ] + } +] \ No newline at end of file diff --git a/samples/react-modern-carousel/package-lock.json b/samples/react-modern-carousel/package-lock.json index 0b8cdeb5a..05f6e1773 100644 --- a/samples/react-modern-carousel/package-lock.json +++ b/samples/react-modern-carousel/package-lock.json @@ -41,7 +41,7 @@ "typescript": "4.7.4" }, "engines": { - "node": ">=16.13.0 <17.0.0" + "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/samples/react-modern-carousel/spfx.upgrade.md b/samples/react-modern-carousel/spfx.upgrade.md deleted file mode 100644 index 1370f9f05..000000000 --- a/samples/react-modern-carousel/spfx.upgrade.md +++ /dev/null @@ -1,408 +0,0 @@ -# Upgrade project award-recognition-client-side-solution to v1.18.2 - -Date: 16/03/2024 - -## Findings - -Following is the list of steps required to upgrade your project to SharePoint Framework version 1.18.2. [Summary](#Summary) of the modifications is included at the end of the report. - -### FN001001 @microsoft/sp-core-library | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-core-library - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-core-library@1.18.2 -``` - -File: [./package.json:16:5](./package.json) - -### FN001002 @microsoft/sp-lodash-subset | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-lodash-subset@1.18.2 -``` - -File: [./package.json:17:5](./package.json) - -### FN001003 @microsoft/sp-office-ui-fabric-core | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-office-ui-fabric-core@1.18.2 -``` - -File: [./package.json:18:5](./package.json) - -### FN001004 @microsoft/sp-webpart-base | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-webpart-base@1.18.2 -``` - -File: [./package.json:20:5](./package.json) - -### FN001021 @microsoft/sp-property-pane | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-property-pane@1.18.2 -``` - -File: [./package.json:19:5](./package.json) - -### FN001034 @microsoft/sp-adaptive-card-extension-base | Optional - -Install SharePoint Framework dependency package @microsoft/sp-adaptive-card-extension-base - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-adaptive-card-extension-base@1.18.2 -``` - -File: [./package.json:14:3](./package.json) - -### FN002001 @microsoft/sp-build-web | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-build-web@1.18.2 -``` - -File: [./package.json:33:5](./package.json) - -### FN002002 @microsoft/sp-module-interfaces | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-module-interfaces@1.18.2 -``` - -File: [./package.json:34:5](./package.json) - -### FN002022 @microsoft/eslint-plugin-spfx | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx - -Execute the following command: - -```sh -npm i -DE @microsoft/eslint-plugin-spfx@1.18.2 -``` - -File: [./package.json:31:5](./package.json) - -### FN002023 @microsoft/eslint-config-spfx | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/eslint-config-spfx - -Execute the following command: - -```sh -npm i -DE @microsoft/eslint-config-spfx@1.18.2 -``` - -File: [./package.json:30:5](./package.json) - -### FN010001 .yo-rc.json version | Recommended - -Update version in .yo-rc.json - -```json -{ - "@microsoft/generator-sharepoint": { - "version": "1.18.2" - } -} -``` - -File: [./.yo-rc.json:15:5](./.yo-rc.json) - -### FN001022 office-ui-fabric-react | Required - -Remove SharePoint Framework dependency package office-ui-fabric-react - -Execute the following command: - -```sh -npm un -S office-ui-fabric-react -``` - -File: [./package.json:22:5](./package.json) - -### FN014010 Exclude Jest output files in .vscode/settings.json | Required - -Add excluding Jest output files in .vscode/settings.json - -```json -{ - "files.exclude": { - "**/jest-output": true - } -} -``` - -File: [.vscode/settings.json:4:3](.vscode/settings.json) - -### FN001035 @fluentui/react | Required - -Install SharePoint Framework dependency package @fluentui/react - -Execute the following command: - -```sh -npm i -SE @fluentui/react@8.106.4 -``` - -File: [./package.json:14:3](./package.json) - -### FN002026 typescript | Required - -Upgrade SharePoint Framework dev dependency package typescript - -Execute the following command: - -```sh -npm i -DE typescript@4.7.4 -``` - -File: [./package.json:43:5](./package.json) - -### FN002028 @microsoft/rush-stack-compiler-4.7 | Required - -Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.7 - -Execute the following command: - -```sh -npm i -DE @microsoft/rush-stack-compiler-4.7@0.1.0 -``` - -File: [./package.json:29:3](./package.json) - -### FN010010 .yo-rc.json @microsoft/teams-js SDK version | Recommended - -Update @microsoft/teams-js SDK version in .yo-rc.json - -```json -{ - "@microsoft/generator-sharepoint": { - "sdkVersions": { - "@microsoft/teams-js": "2.12.0" - } - } -} -``` - -File: [./.yo-rc.json:2:3](./.yo-rc.json) - -### FN012017 tsconfig.json extends property | Required - -Update tsconfig.json extends property - -```json -{ - "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json" -} -``` - -File: [./tsconfig.json:2:3](./tsconfig.json) - -### FN021003 package.json engines.node | Required - -Update package.json engines.node property - -```json -{ - "engines": { - "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0" - } -} -``` - -File: [./package.json:6:5](./package.json) - -### FN014008 Hosted workbench type in .vscode/launch.json | Recommended - -In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration - -```json -{ - "configurations": [ - { - "type": "msedge" - } - ] -} -``` - -File: [.vscode/launch.json:8:7](.vscode/launch.json) - -### FN007002 serve.json initialPage | Required - -Update serve.json initialPage URL - -```json -{ - "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx" -} -``` - -File: [./config/serve.json:5:3](./config/serve.json) - -### FN014009 Hosted workbench URL in .vscode/launch.json | Recommended - -In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration - -```json -{ - "configurations": [ - { - "url": "https://{tenantDomain}/_layouts/workbench.aspx" - } - ] -} -``` - -File: [.vscode/launch.json:8:7](.vscode/launch.json) - -### FN017001 Run npm dedupe | Optional - -If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages. - -Execute the following command: - -```sh -npm dedupe -``` - -File: [./package.json](./package.json) - -## Summary - -### Execute script - -```sh -npm un -S office-ui-fabric-react -npm i -SE @microsoft/sp-core-library@1.18.2 @microsoft/sp-lodash-subset@1.18.2 @microsoft/sp-office-ui-fabric-core@1.18.2 @microsoft/sp-webpart-base@1.18.2 @microsoft/sp-property-pane@1.18.2 @microsoft/sp-adaptive-card-extension-base@1.18.2 @fluentui/react@8.106.4 -npm i -DE @microsoft/sp-build-web@1.18.2 @microsoft/sp-module-interfaces@1.18.2 @microsoft/eslint-plugin-spfx@1.18.2 @microsoft/eslint-config-spfx@1.18.2 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0 -npm dedupe -``` - -### Modify files - -#### [./.yo-rc.json](./.yo-rc.json) - -Update version in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "version": "1.18.2" - } -} -``` - -Update @microsoft/teams-js SDK version in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "sdkVersions": { - "@microsoft/teams-js": "2.12.0" - } - } -} -``` - -#### [.vscode/settings.json](.vscode/settings.json) - -Add excluding Jest output files in .vscode/settings.json: - -```json -{ - "files.exclude": { - "**/jest-output": true - } -} -``` - -#### [./tsconfig.json](./tsconfig.json) - -Update tsconfig.json extends property: - -```json -{ - "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json" -} -``` - -#### [./package.json](./package.json) - -Update package.json engines.node property: - -```json -{ - "engines": { - "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0" - } -} -``` - -#### [.vscode/launch.json](.vscode/launch.json) - -In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration: - -```json -{ - "configurations": [ - { - "type": "msedge" - } - ] -} -``` - -In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration: - -```json -{ - "configurations": [ - { - "url": "https://{tenantDomain}/_layouts/workbench.aspx" - } - ] -} -``` - -#### [./config/serve.json](./config/serve.json) - -Update serve.json initialPage URL: - -```json -{ - "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx" -} -``` \ No newline at end of file diff --git a/samples/react-modern-carousel/src/components/Carousel.tsx b/samples/react-modern-carousel/src/components/Carousel.tsx index a35acb15d..84809ebf5 100644 --- a/samples/react-modern-carousel/src/components/Carousel.tsx +++ b/samples/react-modern-carousel/src/components/Carousel.tsx @@ -17,7 +17,7 @@ import { AwardItems } from "../types/AwardItems" import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss" import { Content } from "./Content" -export const Carousel = () => { +export const Carousel = (): JSX.Element => { const [awardList, setAwardList] = useState([]) const [selectedUser, setSelectedUser] = useState(null) @@ -44,7 +44,8 @@ export const Carousel = () => { } }, [listItems, selectedUser, siteInfo]) - const handleSlideChange = (swiper: any) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const handleSlideChange = (swiper: any): void => { const activeIndex = swiper.activeIndex setSelectedUser(awardList[activeIndex]) } @@ -83,8 +84,8 @@ export const Carousel = () => { loop={false} onSlideChange={(swiper) => handleSlideChange(swiper)} > - {awardList?.map((user) => ( - + {awardList?.map((user, index) => ( + { }} > - + {user.Title}/ diff --git a/samples/react-modern-carousel/src/components/Content.tsx b/samples/react-modern-carousel/src/components/Content.tsx index 7da525498..356609bd1 100644 --- a/samples/react-modern-carousel/src/components/Content.tsx +++ b/samples/react-modern-carousel/src/components/Content.tsx @@ -5,7 +5,7 @@ import { ContentProps } from "../types/ContentProps" import { useContext } from "react"; import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition"; -export const Content = ({ user }: ContentProps) => { +export const Content = ({ user }: ContentProps): JSX.Element => { const contextInfo = useContext(WebpartContext); return ( diff --git a/samples/react-modern-carousel/src/types/ContentProps.ts b/samples/react-modern-carousel/src/types/ContentProps.ts index 1647a5a8d..754ce1032 100644 --- a/samples/react-modern-carousel/src/types/ContentProps.ts +++ b/samples/react-modern-carousel/src/types/ContentProps.ts @@ -1,5 +1,5 @@ import { AwardItems } from "./AwardItems"; export interface ContentProps { - user: AwardItems | null; + user: AwardItems | undefined; } diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx b/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx index 628fb3746..9aa04aeff 100644 --- a/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx +++ b/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx @@ -6,7 +6,7 @@ import { createContext } from "react"; export const WebpartContext = createContext(null); -export const AwardRecognition = (props: IAwardRecognitionProps) => { +export const AwardRecognition = (props: IAwardRecognitionProps): JSX.Element => { return (