honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/verionupgradeReactBirthday

This commit is contained in:
Hugo Bernier 2024-10-20 20:55:56 -07:00 committed by GitHub
parent 78706e0204 b27b433b7b
commit 70b52159ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
96 changed files with 151992 additions and 130023 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
.metadata/extension-samples.json
View File

@ -9,7 +9,7 @@
"Sample SharePoint Framework application customizer extension that shows toast notifications configured from a SharePoint list. Demonstrates jQuery module loading, barrel configuration, promise chaining, and localStorage caching."
],
"creationDateTime": "2018-02-01",
"updateDateTime": "2018-02-01",
"updateDateTime": "2024-10-05",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.4.0"
"value": "1.20.0"
}
],
"tags": [],
@ -1898,6 +1898,62 @@
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-alert-banner",
"source": "pnp",
"title": "Alert Banner",
"shortDescription": "Designed to display alert notifications prominently in the Banner of Modern SharePoint sites",
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-alert-banner",
"longDescription": [
"The Alert Banner SPFx Extension is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services."
],
"creationDateTime": "2023-12-25",
"updateDateTime": "2024-10-11",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.20.0"
}
],
"tags": [],
"categories": [
"SPFX-APPLICATION-EXTENSION"
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-alert-banner/assets/Screenshot2024-08-17170932.png",
"alt": "Preview"
}
],
"authors": [
{
"gitHubAccount": "nicolasKheirallah",
"pictureUrl": "https://github.com/nicolasKheirallah.png",
"name": "Nicolas Kheirallah"
}
],
"references": [
{
"name": "Overview of SharePoint Framework Extensions",
"description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
},
{
"name": "Use page placeholders from Application Customizer",
"description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-alerts",
"source": "pnp",
@ -1972,7 +2028,7 @@
"SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar."
],
"creationDateTime": "2020-06-18",
"updateDateTime": "2024-03-12",
"updateDateTime": "2024-10-06",
"products": [
"SharePoint"
],
@ -1983,7 +2039,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.0"
}
],
"tags": [],
@ -2644,7 +2700,7 @@
"A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework."
],
"creationDateTime": "2022-11-09",
"updateDateTime": "2024-01-10",
"updateDateTime": "2024-10-06",
"products": [
"SharePoint"
],
@ -2655,7 +2711,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.0"
}
],
"thumbnails": [
@ -3554,6 +3610,62 @@
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-quick-create",
"source": "pnp",
"title": "Application Customizer Quick Create",
"shortDescription": "Injects a button to the command bar which shows all the lists in the site and have the ability to quickly create an item by showing the NewForm.aspx inside a panel.",
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-quick-create",
"longDescription": [
"SharePoint Framework Application Customizer that injects a button to the command bar which shows all the lists in the site and have the ability to quickly create an item by showing the NewForm.aspx inside a panel. Inspired by Quick Create functionality by popular CRMs."
],
"creationDateTime": "2023-12-25",
"updateDateTime": "2024-09-30",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
}
],
"tags": [],
"categories": [
"SPFX-APPLICATION-EXTENSION"
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-quick-create/assets/QuickCreateDemo.gif",
"alt": "Preview"
}
],
"authors": [
{
"gitHubAccount": "alecwantstobattle",
"pictureUrl": "https://github.com/alecwantstobattle.png",
"name": "Alec Tecson"
}
],
"references": [
{
"name": "Overview of SharePoint Framework Extensions",
"description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
},
{
"name": "Use page placeholders from Application Customizer",
"description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-regions-footer",
"source": "pnp",
@ -5715,7 +5827,7 @@
"Custom Command Set that set a Page layout to use the Single App Part page Layout"
],
"creationDateTime": "2019-01-29",
"updateDateTime": "2022-01-12",
"updateDateTime": "2024-10-09",
"products": [
"SharePoint"
],
@ -5726,7 +5838,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.14.0"
"value": "1.20.0"
}
],
"tags": [],

160
.metadata/samples.json
View File

@ -9,7 +9,7 @@
"Sample SharePoint Framework application customizer extension that shows toast notifications configured from a SharePoint list. Demonstrates jQuery module loading, barrel configuration, promise chaining, and localStorage caching."
],
"creationDateTime": "2018-02-01",
"updateDateTime": "2018-02-01",
"updateDateTime": "2024-10-05",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.4.0"
"value": "1.20.0"
}
],
"tags": [],
@ -1898,6 +1898,62 @@
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-alert-banner",
"source": "pnp",
"title": "Alert Banner",
"shortDescription": "Designed to display alert notifications prominently in the Banner of Modern SharePoint sites",
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-alert-banner",
"longDescription": [
"The Alert Banner SPFx Extension is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services."
],
"creationDateTime": "2023-12-25",
"updateDateTime": "2024-10-11",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.20.0"
}
],
"tags": [],
"categories": [
"SPFX-APPLICATION-EXTENSION"
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-alert-banner/assets/Screenshot2024-08-17170932.png",
"alt": "Preview"
}
],
"authors": [
{
"gitHubAccount": "nicolasKheirallah",
"pictureUrl": "https://github.com/nicolasKheirallah.png",
"name": "Nicolas Kheirallah"
}
],
"references": [
{
"name": "Overview of SharePoint Framework Extensions",
"description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
},
{
"name": "Use page placeholders from Application Customizer",
"description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-alerts",
"source": "pnp",
@ -1972,7 +2028,7 @@
"SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar."
],
"creationDateTime": "2020-06-18",
"updateDateTime": "2024-03-12",
"updateDateTime": "2024-10-06",
"products": [
"SharePoint"
],
@ -1983,7 +2039,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.0"
}
],
"tags": [],
@ -2644,7 +2700,7 @@
"A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework."
],
"creationDateTime": "2022-11-09",
"updateDateTime": "2024-01-10",
"updateDateTime": "2024-10-06",
"products": [
"SharePoint"
],
@ -2655,7 +2711,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.0"
}
],
"thumbnails": [
@ -3554,6 +3610,62 @@
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-quick-create",
"source": "pnp",
"title": "Application Customizer Quick Create",
"shortDescription": "Injects a button to the command bar which shows all the lists in the site and have the ability to quickly create an item by showing the NewForm.aspx inside a panel.",
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-quick-create",
"longDescription": [
"SharePoint Framework Application Customizer that injects a button to the command bar which shows all the lists in the site and have the ability to quickly create an item by showing the NewForm.aspx inside a panel. Inspired by Quick Create functionality by popular CRMs."
],
"creationDateTime": "2023-12-25",
"updateDateTime": "2024-09-30",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
}
],
"tags": [],
"categories": [
"SPFX-APPLICATION-EXTENSION"
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-quick-create/assets/QuickCreateDemo.gif",
"alt": "Preview"
}
],
"authors": [
{
"gitHubAccount": "alecwantstobattle",
"pictureUrl": "https://github.com/alecwantstobattle.png",
"name": "Alec Tecson"
}
],
"references": [
{
"name": "Overview of SharePoint Framework Extensions",
"description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
},
{
"name": "Use page placeholders from Application Customizer",
"description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
}
]
},
{
"name": "pnp-sp-dev-spfx-extensions-react-application-regions-footer",
"source": "pnp",
@ -5715,7 +5827,7 @@
"Custom Command Set that set a Page layout to use the Single App Part page Layout"
],
"creationDateTime": "2019-01-29",
"updateDateTime": "2022-01-12",
"updateDateTime": "2024-10-09",
"products": [
"SharePoint"
],
@ -5726,7 +5838,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.14.0"
"value": "1.20.0"
}
],
"tags": [],
@ -9682,7 +9794,7 @@
"This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format."
],
"creationDateTime": "2020-06-22",
"updateDateTime": "2021-09-30",
"updateDateTime": "2024-10-13",
"products": [
"SharePoint"
],
@ -9711,17 +9823,13 @@
"authors": [
{
"gitHubAccount": "gautamdsheth",
"company": "Valo Intranet",
"pictureUrl": "https://github.com/gautamdsheth.png",
"name": "Gautam Sheth",
"twitter": "gautamdsheth"
"name": "Gautam Sheth"
},
{
"gitHubAccount": "AbhishekGarg",
"company": "Atos",
"pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4",
"name": "Abhishek Garg",
"twitter": "abhig89"
"name": "Abhishek Garg"
}
],
"references": [
@ -9742,7 +9850,7 @@
"This sample is based on Erik Benke and Mike Zimmerman Accordion Section FAQ Builder web part. It was extended support single FAQs list based on Category and dynamic properties selection."
],
"creationDateTime": "2021-01-05",
"updateDateTime": "2021-08-08",
"updateDateTime": "2024-10-19",
"products": [
"SharePoint"
],
@ -9753,7 +9861,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.20.0"
},
{
"key": "SPFX-TEAMSTAB",
@ -10529,7 +10637,7 @@
"- Support for Multiline text fields"
],
"creationDateTime": "2021-03-30",
"updateDateTime": "2023-03-06",
"updateDateTime": "2024-10-08",
"products": [
"SharePoint"
],
@ -10540,7 +10648,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.20.0"
}
],
"thumbnails": [
@ -10586,7 +10694,7 @@
},
{
"gitHubAccount": "NishkalankBezawada",
"company": "Tietoevry, Sweden",
"company": "Bravero AB, Sweden",
"pictureUrl": "https://avatars.githubusercontent.com/u/47456098?v=4",
"name": "Nishkalank Bezawada"
}
@ -12416,7 +12524,7 @@
"This web part show images and videos in carousel"
],
"creationDateTime": "2020-10-31",
"updateDateTime": "2020-06-12",
"updateDateTime": "2024-10-15",
"products": [
"SharePoint"
],
@ -12427,7 +12535,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.12.1"
"value": "1.20.0"
},
{
"key": "SPFX-TEAMSTAB",
@ -15996,7 +16104,7 @@
"This web part demonstrates displaying the list of flows in different environments, ability to re-enable flows which are stopped or suspended, and the flow run history of the selected flow."
],
"creationDateTime": "2023-08-03",
"updateDateTime": "2023-08-03",
"updateDateTime": "2024-10-01",
"products": [
"SharePoint"
],
@ -16007,7 +16115,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.17.4"
"value": "1.20.0"
}
],
"thumbnails": [
@ -20702,7 +20810,7 @@
"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-03-16",
"updateDateTime": "2024-03-16",
"updateDateTime": "2024-10-10",
"products": [
"SharePoint"
],
@ -20713,7 +20821,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.2"
}
],
"thumbnails": [

2
samples/react-accordion-dynamic-section/.devcontainer/devcontainer.json
View File

@ -1,6 +1,6 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.16.1",
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.16.1",
// Set *default* container specific settings.json values on container create.
"settings": {},

349
samples/react-accordion-dynamic-section/.eslintrc.js
View File

@ -1,5 +1,352 @@
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
parserOptions: { tsconfigRootDir: __dirname },
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
'parserOptions': {
'project': './tsconfig.json',
'ecmaVersion': 2018,
'sourceType': 'module'
},
rules: {
// Prevent usage of the JavaScript null value, while allowing code to access existing APIs that may require null. https://www.npmjs.com/package/@rushstack/eslint-plugin
'@rushstack/no-new-null': 1,
// Require Jest module mocking APIs to be called before any other statements in their code block. https://www.npmjs.com/package/@rushstack/eslint-plugin
'@rushstack/hoist-jest-mock': 1,
// Require regular expressions to be constructed from string constants rather than dynamically building strings at runtime. https://www.npmjs.com/package/@rushstack/eslint-plugin-security
'@rushstack/security/no-unsafe-regexp': 1,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/adjacent-overload-signatures': 1,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
//
// CONFIGURATION: By default, these are banned: String, Boolean, Number, Object, Symbol
'@typescript-eslint/ban-types': [
0,
{
'extendDefaults': false,
'types': {
'String': {
'message': 'Use \'string\' instead',
'fixWith': 'string'
},
'Boolean': {
'message': 'Use \'boolean\' instead',
'fixWith': 'boolean'
},
'Number': {
'message': 'Use \'number\' instead',
'fixWith': 'number'
},
'Object': {
'message': 'Use \'object\' instead, or else define a proper TypeScript type:'
},
'Symbol': {
'message': 'Use \'symbol\' instead',
'fixWith': 'symbol'
},
'Function': {
'message': 'The \'Function\' type accepts any function-like value.\nIt provides no type safety when calling the function, which can be a common source of bugs.\nIt also accepts things like class declarations, which will throw at runtime as they will not be called with \'new\'.\nIf you are expecting the function to accept certain arguments, you should explicitly define the function shape.'
}
}
}
],
// RATIONALE: Code is more readable when the type of every variable is immediately obvious.
// Even if the compiler may be able to infer a type, this inference will be unavailable
// to a person who is reviewing a GitHub diff. This rule makes writing code harder,
// but writing code is a much less important activity than reading it.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/explicit-function-return-type': [
0,
{
'allowExpressions': true,
'allowTypedFunctionExpressions': true,
'allowHigherOrderFunctions': false
}
],
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
// Rationale to disable: although this is a recommended rule, it is up to dev to select coding style.
// Set to 1 (warning) or 2 (error) to enable.
'@typescript-eslint/explicit-member-accessibility': 0,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-array-constructor': 1,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
//
// RATIONALE: The "any" keyword disables static type checking, the main benefit of using TypeScript.
// This rule should be suppressed only in very special cases such as JSON.stringify()
// where the type really can be anything. Even if the type is flexible, another type
// may be more appropriate such as "unknown", "{}", or "Record<k,V>".
'@typescript-eslint/no-explicit-any': 0,
// RATIONALE: The #1 rule of promises is that every promise chain must be terminated by a catch()
// handler. Thus wherever a Promise arises, the code must either append a catch handler,
// or else return the object to a caller (who assumes this responsibility). Unterminated
// promise chains are a serious issue. Besides causing errors to be silently ignored,
// they can also cause a NodeJS process to terminate unexpectedly.
'@typescript-eslint/no-floating-promises': 0,
// RATIONALE: Catches a common coding mistake.
'@typescript-eslint/no-for-in-array': 2,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-misused-new': 2,
// RATIONALE: The "namespace" keyword is not recommended for organizing code because JavaScript lacks
// a "using" statement to traverse namespaces. Nested namespaces prevent certain bundler
// optimizations. If you are declaring loose functions/variables, it's better to make them
// static members of a class, since classes support property getters and their private
// members are accessible by unit tests. Also, the exercise of choosing a meaningful
// class name tends to produce more discoverable APIs: for example, search+replacing
// the function "reverse()" is likely to return many false matches, whereas if we always
// write "Text.reverse()" is more unique. For large scale organization, it's recommended
// to decompose your code into separate NPM packages, which ensures that component
// dependencies are tracked more conscientiously.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-namespace': [
1,
{
'allowDeclarations': false,
'allowDefinitionFiles': false
}
],
// RATIONALE: Parameter properties provide a shorthand such as "constructor(public title: string)"
// that avoids the effort of declaring "title" as a field. This TypeScript feature makes
// code easier to write, but arguably sacrifices readability: In the notes for
// "@typescript-eslint/member-ordering" we pointed out that fields are central to
// a class's design, so we wouldn't want to bury them in a constructor signature
// just to save some typing.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
// Set to 1 (warning) or 2 (error) to enable the rule
'@typescript-eslint/no-parameter-properties': 0,
// RATIONALE: When left in shipping code, unused variables often indicate a mistake. Dead code
// may impact performance.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-unused-vars': [
0,
{
'vars': 'all',
// Unused function arguments often indicate a mistake in JavaScript code. However in TypeScript code,
// the compiler catches most of those mistakes, and unused arguments are fairly common for type signatures
// that are overriding a base class method or implementing an interface.
'args': 'none'
}
],
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-use-before-define': [
0,
{
'functions': false,
'classes': true,
'variables': true,
'enums': true,
'typedefs': true
}
],
// Disallows require statements except in import statements.
// In other words, the use of forms such as var foo = require("foo") are banned. Instead use ES6 style imports or import foo = require("foo") imports.
'@typescript-eslint/no-var-requires': 0,
// RATIONALE: The "module" keyword is deprecated except when describing legacy libraries.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/prefer-namespace-keyword': 1,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
// Rationale to disable: it's up to developer to decide if he wants to add type annotations
// Set to 1 (warning) or 2 (error) to enable the rule
'@typescript-eslint/no-inferrable-types': 0,
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
// Rationale to disable: declaration of empty interfaces may be helpful for generic types scenarios
'@typescript-eslint/no-empty-interface': 0,
// RATIONALE: This rule warns if setters are defined without getters, which is probably a mistake.
'accessor-pairs': 1,
// RATIONALE: In TypeScript, if you write x["y"] instead of x.y, it disables type checking.
'dot-notation': [
0,
{
'allowPattern': '^_'
}
],
// RATIONALE: Catches code that is likely to be incorrect
'eqeqeq': 0,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'for-direction': 1,
// RATIONALE: Catches a common coding mistake.
'guard-for-in': 2,
// RATIONALE: If you have more than 2,000 lines in a single source file, it's probably time
// to split up your code.
'max-lines': ['warn', { max: 2000 }],
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-async-promise-executor': 2,
// RATIONALE: Deprecated language feature.
'no-caller': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-compare-neg-zero': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-cond-assign': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-constant-condition': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-control-regex': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-debugger': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-delete-var': 2,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-duplicate-case': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-empty': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-empty-character-class': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-empty-pattern': 1,
// RATIONALE: Eval is a security concern and a performance concern.
'no-eval': 1,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-ex-assign': 2,
// RATIONALE: System types are global and should not be tampered with in a scalable code base.
// If two different libraries (or two versions of the same library) both try to modify
// a type, only one of them can win. Polyfills are acceptable because they implement
// a standardized interoperable contract, but polyfills are generally coded in plain
// JavaScript.
'no-extend-native': 1,
// Disallow unnecessary labels
'no-extra-label': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-fallthrough': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-func-assign': 1,
// RATIONALE: Catches a common coding mistake.
'no-implied-eval': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-invalid-regexp': 2,
// RATIONALE: Catches a common coding mistake.
'no-label-var': 2,
// RATIONALE: Eliminates redundant code.
'no-lone-blocks': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-misleading-character-class': 2,
// RATIONALE: Catches a common coding mistake.
'no-multi-str': 2,
// RATIONALE: It's generally a bad practice to call "new Thing()" without assigning the result to
// a variable. Either it's part of an awkward expression like "(new Thing()).doSomething()",
// or else implies that the constructor is doing nontrivial computations, which is often
// a poor class design.
'no-new': 1,
// RATIONALE: Obsolete language feature that is deprecated.
'no-new-func': 2,
// RATIONALE: Obsolete language feature that is deprecated.
'no-new-object': 2,
// RATIONALE: Obsolete notation.
'no-new-wrappers': 1,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-octal': 2,
// RATIONALE: Catches code that is likely to be incorrect
'no-octal-escape': 2,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-regex-spaces': 2,
// RATIONALE: Catches a common coding mistake.
'no-return-assign': 2,
// RATIONALE: Security risk.
'no-script-url': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-self-assign': 2,
// RATIONALE: Catches a common coding mistake.
'no-self-compare': 2,
// RATIONALE: This avoids statements such as "while (a = next(), a && a.length);" that use
// commas to create compound expressions. In general code is more readable if each
// step is split onto a separate line. This also makes it easier to set breakpoints
// in the debugger.
'no-sequences': 0,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-shadow-restricted-names': 2,
// RATIONALE: Obsolete language feature that is deprecated.
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-sparse-arrays': 2,
// RATIONALE: Although in theory JavaScript allows any possible data type to be thrown as an exception,
// such flexibility adds pointless complexity, by requiring every catch block to test
// the type of the object that it receives. Whereas if catch blocks can always assume
// that their object implements the "Error" contract, then the code is simpler, and
// we generally get useful additional information like a call stack.
'no-throw-literal': 2,
// RATIONALE: Catches a common coding mistake.
'no-unmodified-loop-condition': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-unsafe-finally': 2,
// RATIONALE: Catches a common coding mistake.
'no-unused-expressions': 0,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-unused-labels': 1,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-useless-catch': 1,
// RATIONALE: Avoids a potential performance problem.
'no-useless-concat': 1,
// RATIONALE: The "var" keyword is deprecated because of its confusing "hoisting" behavior.
// Always use "let" or "const" instead.
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'no-var': 2,
// RATIONALE: Generally not needed in modern code.
'no-void': 1,
// RATIONALE: Obsolete language feature that is deprecated.
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'no-with': 2,
// RATIONALE: Makes logic easier to understand, since constants always have a known value
// @typescript-eslint\eslint-plugin\dist\configs\eslint-recommended.js
'prefer-const': 0,
// RATIONALE: Catches a common coding mistake where "resolve" and "reject" are confused.
'promise/param-names': 2,
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'require-atomic-updates': 0,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'require-yield': 1,
// "Use strict" is redundant when using the TypeScript compiler.
'strict': [
2,
'never'
],
// RATIONALE: Catches code that is likely to be incorrect
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
'use-isnan': 2,
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
// Set to 1 (warning) or 2 (error) to enable.
// Rationale to disable: !!{}
'no-extra-boolean-cast': 0,
// ====================================================================
// @microsoft/eslint-plugin-spfx
// ====================================================================
'@microsoft/spfx/import-requires-chunk-name': 1,
'@microsoft/spfx/no-require-ensure': 2,
'@microsoft/spfx/pair-react-dom-render-unmount': 1
}
},
{
// For unit tests, we can be a little bit less strict. The settings below revise the
// defaults specified in the extended configurations, as well as above.
files: [
// Test files
'*.test.ts',
'*.test.tsx',
'*.spec.ts',
'*.spec.tsx',
// Facebook convention
'**/__mocks__/*.ts',
'**/__mocks__/*.tsx',
'**/__tests__/*.ts',
'**/__tests__/*.tsx',
// Microsoft convention
'**/test/*.ts',
'**/test/*.tsx'
],
rules: {}
}
]
};

1
samples/react-accordion-dynamic-section/.nvmrc Normal file
View File

@ -0,0 +1 @@
v18.18.0

17
samples/react-accordion-dynamic-section/.yo-rc.json Normal file
View File

@ -0,0 +1,17 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.20.0",
"libraryName": "react-accordion-dynamicsection",
"libraryId": "bf6fa974-fd40-45a3-80e9-e826abe025b9",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart",
"sdkVersions": {
"@microsoft/teams-js": "2.24.0",
"@microsoft/microsoft-graph-client": "3.0.2"
},
"nodeVersion": "18.18.0"
}
}

9
samples/react-accordion-dynamic-section/README.md
View File

@ -38,8 +38,8 @@
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
![Node.js v16](https://img.shields.io/badge/Node.js-v16-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -62,6 +62,7 @@ Please create the list as described above
* [Erik Benke](https://github.com/ejbenke)
* [Ari Gunawan](https://github.com/AriGunawan)
* [Valeras Narbutas](https://github.com/ValerasNarbutas)
* [Ervin Gayle](https://github.com/ErvinGayle)
## Version history
@ -70,8 +71,8 @@ Please create the list as described above
| 1.0 | September 20, 2020 | Reused [Erik Benke] and [Mike Zimmerman] web part |
| 1.1 | September 20, 2020 | Added Support for Dynamic Column selection for reuseability, Dynamic Property Selection for Columns |
| 1.8 | August 8, 2021 | Add configuration for sorting the items |
| 2.0 | April 2, 2023 | Upgarde to SPFX 1.16.1 |
| 2.0 | April 2, 2023 | Upgrade to SPFX 1.16.1 |
| 2.0 | October 10, 2024 | Upgrade to SPFX 1.20.1 |
## Minimal Path to Awesome

4
samples/react-accordion-dynamic-section/assets/sample.json
View File

@ -9,7 +9,7 @@
"This sample is based on Erik Benke and Mike Zimmerman Accordion Section FAQ Builder web part. It was extended support single FAQs list based on Category and dynamic properties selection."
],
"creationDateTime": "2021-01-05",
"updateDateTime": "2021-08-08",
"updateDateTime": "2024-10-19",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.20.0"
},
{
"key": "SPFX-TEAMSTAB",

6
samples/react-accordion-dynamic-section/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "Accordion Section FAQ Builder",
"id": "bf6fa974-fd40-45a3-80e9-e826abe025b9",
"version": "2.0.0.0",
"version": "2.1.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"developer": {
@ -11,7 +11,7 @@
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "Undefined-1.15.0"
"mpnId": "Undefined-1.20.0"
},
"metadata": {
"shortDescription": {
@ -29,7 +29,7 @@
"title": "react-accordion ReactAccordionWebPart Feature",
"description": "The feature that activates ReactAccordionWebPart from the react-accordion solution.",
"id": "061da2cd-f680-4da5-ab30-40a8ba1aafd8",
"version": "2.0.0.0",
"version": "2.1.0.0",
"componentIds": [
"061da2cd-f680-4da5-ab30-40a8ba1aafd8"
]

4
samples/react-accordion-dynamic-section/config/serve.json
View File

@ -2,5 +2,5 @@
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
}
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

50005
samples/react-accordion-dynamic-section/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
samples/react-accordion-dynamic-section/package.json
View File

@ -4,7 +4,7 @@
"version": "1.6.0",
"private": true,
"engines": {
"node": ">=16.13.0 <17.0.0"
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
@ -12,22 +12,21 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-adaptive-card-extension-base": "1.16.1",
"@microsoft/sp-core-library": "1.16.1",
"@microsoft/sp-lodash-subset": "1.16.1",
"@microsoft/sp-office-ui-fabric-core": "1.16.1",
"@microsoft/sp-property-pane": "1.16.1",
"@microsoft/sp-tslint-rules": "^1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@fluentui/react": "8.106.4",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/common": "^2.15.0",
"@pnp/graph": "^1.3.11",
"@pnp/graph": "^2.15.0",
"@pnp/logging": "^3.13.0",
"@pnp/odata": "^2.15.0",
"@pnp/pnpjs": "^2.15.0",
"@pnp/sp": "^3.13.0",
"@pnp/spfx-controls-react": "1.14.0",
"@pnp/spfx-property-controls": "1.19.0",
"office-ui-fabric-react": "7.199.1",
"@pnp/spfx-controls-react": "3.19.0",
"@pnp/spfx-property-controls": "3.18.0",
"react": "17.0.1",
"react-accessible-accordion": "^3.0.0",
"react-dom": "17.0.1",
@ -37,21 +36,22 @@
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.1",
"@microsoft/eslint-plugin-spfx": "1.16.1",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.16.1",
"@microsoft/sp-module-interfaces": "1.16.1",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/sp-tslint-rules": "1.20.2",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "1.15.2",
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"ajv": "6.12.5",
"eslint": "8.7.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5",
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1"
"typescript": "4.7.4"
}
}

2
samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts
View File

@ -319,7 +319,7 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
context: this.context as any,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: "listPickerFieldId",

1
samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.module.scss
View File

@ -1,4 +1,3 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~@fluentui/react/dist/sass/References.scss';
.reactAccordion {

23
samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.module.scss.ts
View File

@ -1,17 +1,16 @@
/* tslint:disable */
require("./ReactAccordion.module.css");
const styles = {
reactAccordion: 'reactAccordion_d9565bf5',
container: 'container_d9565bf5',
row: 'row_d9565bf5',
column: 'column_d9565bf5',
'ms-Grid': 'ms-Grid_d9565bf5',
title: 'title_d9565bf5',
subTitle: 'subTitle_d9565bf5',
description: 'description_d9565bf5',
button: 'button_d9565bf5',
label: 'label_d9565bf5'
reactAccordion: 'reactAccordion_aaf0cf49',
container: 'container_aaf0cf49',
row: 'row_aaf0cf49',
column: 'column_aaf0cf49',
'ms-Grid': 'ms-Grid_aaf0cf49',
title: 'title_aaf0cf49',
subTitle: 'subTitle_aaf0cf49',
description: 'description_aaf0cf49',
button: 'button_aaf0cf49',
label: 'label_aaf0cf49'
};
export default styles;
/* tslint:enable */

4
samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx
View File

@ -33,8 +33,8 @@ export default class ReactAccordion extends React.Component<
super(props);
this.state = {
items: new Array<string>(),
choices: new Array<string>(),
items: [],
choices: [],
allowMultipleExpanded: this.props.allowMultipleExpanded,
allowZeroExpanded: this.props.allowZeroExpanded,
};

4
samples/react-accordion-dynamic-section/tsconfig.json
View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -33,5 +33,5 @@
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
]
}

75
samples/react-accordion/.devcontainer/devcontainer.json
View File

@ -1,39 +1,38 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.10.0",
"image": "docker.io/m365pnp/spfx:1.10.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"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"
}
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.20.0",
"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"
}

6
samples/react-accordion/.devcontainer/spfx-startup.sh
View File

@ -7,9 +7,11 @@ 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
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem
# 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

5
samples/react-accordion/.eslintrc.js Normal file
View File

@ -0,0 +1,5 @@
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};

3
samples/react-accordion/.gitignore vendored
View File

@ -28,6 +28,9 @@ obj
# Resx Generated Code
*.resx.ts
.heft
.release
# Styles Generated Code
*.scss.ts
# .CER Certificates

16
samples/react-accordion/.npmignore Normal file
View File

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

1
samples/react-accordion/.nvmrc Normal file
View File

@ -0,0 +1 @@
v18.18.2

6
samples/react-accordion/.yo-rc.json
View File

@ -1,9 +1,13 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.20.0",
"sdkVersions": {
"@microsoft/teams-js": "2.24.0"
},
"nodeVersion": "18.18.2",
"isCreatingSolution": true,
"isDomainIsolated": false,
"environment": "spo",
"version": "1.10.0",
"libraryName": "react-accordion",
"libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
"packageManager": "npm",

22
samples/react-accordion/README.md
View File

@ -1,19 +1,3 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- React
createdDate: 1/8/2018 12:00:00 AM
---
# Using React Accordion plugin with SPFx
## Summary
@ -29,8 +13,8 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -47,6 +31,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
* [Gautam Sheth](https://github.com/gautamdsheth)
* Abhishek Garg
* [Sandeep P S](https://github.com/Sandeep-FED)
## Version history
@ -57,6 +42,7 @@ Version|Date|Comments
2.1|June 22, 2020|Added pagination (Abhishek Garg)
2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron)
2.3|September 30, 2021 | Added sorting (@fthorild)
3.0|October 13, 2024 | Upgrade to SPFx 1.20.0 & includes bug fixes
## Minimal Path to Awesome

10
samples/react-accordion/assets/sample.json
View File

@ -9,7 +9,7 @@
"This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format."
],
"creationDateTime": "2020-06-22",
"updateDateTime": "2021-09-30",
"updateDateTime": "2024-10-13",
"products": [
"SharePoint"
],
@ -38,17 +38,13 @@
"authors": [
{
"gitHubAccount": "gautamdsheth",
"company": "Valo Intranet",
"pictureUrl": "https://github.com/gautamdsheth.png",
"name": "Gautam Sheth",
"twitter": "gautamdsheth"
"name": "Gautam Sheth"
},
{
"gitHubAccount": "AbhishekGarg",
"company": "Atos",
"pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400\u0026v=4",
"name": "Abhishek Garg",
"twitter": "abhig89"
"name": "Abhishek Garg"
}
],
"references": [

4
samples/react-accordion/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

2
samples/react-accordion/config/deploy-azure-storage.json
View File

@ -1,6 +1,6 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"workingDir": "./release/assets/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-accordion",
"accessKey": "<!-- ACCESS KEY -->"

26
samples/react-accordion/config/package-solution.json
View File

@ -3,9 +3,31 @@
"solution": {
"name": "react-accordion-client-side-solution",
"id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
"version": "2.3.0.0",
"version": "3.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false
"isDomainIsolated": false,
"metadata": {
"shortDescription": {
"default": "react-accordion description"
},
"longDescription": {
"default": "react-accordion description"
},
"screenshotPaths": [],
"videoUrl": "",
"categories": []
},
"features": [
{
"title": "react-accordion ReactAccordionWebPart Feature",
"description": "The feature that activates ReactAccordionWebPart from the react-accordion solution.",
"id": "97a28c00-64ee-4ec7-b373-723e39069a96",
"version": "3.0.0.0",
"componentIds": [
"97a28c00-64ee-4ec7-b373-723e39069a96"
]
}
]
},
"paths": {
"zippedPackage": "solution/react-accordion.sppkg"

3
samples/react-accordion/config/sass.json Normal file
View File

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

8
samples/react-accordion/config/serve.json
View File

@ -1,10 +1,6 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

9
samples/react-accordion/gulpfile.js vendored
View File

@ -4,4 +4,13 @@ const gulp = require('gulp');
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;
};
build.initialize(gulp);

51531
samples/react-accordion/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

53
samples/react-accordion/package.json
View File

@ -1,10 +1,10 @@
{
"name": "react-accordion",
"version": "2.3.0",
"version": "3.0.0",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
@ -12,33 +12,38 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@pnp/spfx-controls-react": "1.7.0",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-accessible-accordion": "1.0.2",
"react-dom": "16.8.5"
"@fluentui/react": "8.106.4",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/spfx-controls-react": "^3.19.0",
"office-ui-fabric-react": "7.199.1",
"react": "17.0.1",
"react-accessible-accordion": "^5.0.0",
"react-dom": "17.0.1",
"tslib": "2.3.1"
},
"resolutions": {
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.18.0",
"@microsoft/sp-module-interfaces": "1.10.0",
"@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.12.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "^4.0.2"
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/es6-promise": "0.0.33",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "1.15.2",
"ajv": "6.12.5",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.7.4"
}
}

1117
samples/react-accordion/spfx.upgrade.md Normal file
View File

File diff suppressed because it is too large Load Diff

2
samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.module.scss
View File

@ -1,4 +1,4 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
@import '~@fluentui/react/dist/sass/References.scss';
.reactAccordion {
.container {

267
samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
View File

@ -1,37 +1,42 @@
import * as React from 'react';
import styles from './ReactAccordion.module.scss';
import { IReactAccordionProps } from './IReactAccordionProps';
import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import * as React from "react";
import styles from "./ReactAccordion.module.scss";
import { IReactAccordionProps } from "./IReactAccordionProps";
import {
Spinner,
SpinnerSize
} from 'office-ui-fabric-react/lib/Spinner';
SPHttpClient,
SPHttpClientResponse,
} from "@microsoft/sp-http";
import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
import { SearchBox } from "office-ui-fabric-react/lib/SearchBox";
import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/react-accessible-accordion.css';
AccordionItemButton,
AccordionItemHeading,
AccordionItemPanel,
} from "react-accessible-accordion";
import "react-accessible-accordion/dist/fancy-example.css";
import { IReactAccordionState } from "./IReactAccordionState";
import IAccordionListItem from "../models/IAccordionListItem";
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import './accordion.css';
export default class ReactAccordion extends React.Component<IReactAccordionProps, IReactAccordionState> {
import "./accordion.css";
export default class ReactAccordion extends React.Component<
IReactAccordionProps,
IReactAccordionState
> {
constructor(props: IReactAccordionProps, state: IReactAccordionState) {
super(props);
this.state = {
status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
status: this.listNotConfigured(this.props)
? "Please configure list in Web Part properties"
: "Ready",
pagedItems: [],
items: [],
listItems: [],
isLoading: false,
loaderMessage: '',
error: ''
loaderMessage: "",
error: "",
};
if (!this.listNotConfigured(this.props)) {
@ -39,97 +44,112 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
}
this.searchTextChange = this.searchTextChange.bind(this);
}
private listNotConfigured(props: IReactAccordionProps): boolean {
return props.listName === undefined ||
return (
props.listName === undefined ||
props.listName === null ||
props.listName.length === 0;
props.listName.length === 0
);
}
private searchTextChange(event) {
if (event === undefined ||
event === null ||
event === "") {
private searchTextChange(event: any, newValue?: string): void {
// If newValue is null, undefined, or an empty string, reset the items
if (!newValue || newValue.trim() === "") {
let listItemsCollection = [...this.state.listItems];
this.setState({
items: listItemsCollection,
pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage)
pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage),
});
}
else {
var updatedList = [...this.state.listItems];
updatedList = updatedList.filter((item) => {
return item.Title.toLowerCase().search(
event.toLowerCase()) !== -1 || item.Description.toLowerCase().search(
event.toLowerCase()) !== -1;
} else {
// Filter list based on search query
const updatedList = this.state.listItems.filter((item) => {
// Ensure item.Title and item.Description exist and are strings
return (
item.Title?.toLowerCase().includes(newValue.toLowerCase()) ||
item.Description?.toLowerCase().includes(newValue.toLowerCase())
);
});
this.setState({
items: updatedList,
pagedItems: updatedList.slice(0, this.props.maxItemsPerPage)
pagedItems: updatedList.slice(0, this.props.maxItemsPerPage),
});
}
}
private readItems(): void {
const orders = [];
if (this.props.customSortField) {
orders.push(this.props.customSortField);
}
if (this.props.sortById) {
orders.push('ID');
orders.push("ID");
}
if (this.props.sortByModified) {
orders.push('Modified');
orders.push("Modified");
}
const selects = `select=Title,Description${this.props.customSortField ? `,${this.props.customSortField}` : ''}`;
const selects = `select=Title,Description${
this.props.customSortField ? `,${this.props.customSortField}` : ""
}`;
const restAPI = this.props.siteUrl + `/_api/web/Lists/GetByTitle('${this.props.listName}')/items?` +
const restAPI =
this.props.siteUrl +
`/_api/web/Lists/GetByTitle('${this.props.listName}')/items?` +
`$${selects}` +
`${orders.length > 0 ? '&$orderby=' + orders.join(',') : ''}` +
`${orders.length > 0 ? "&$orderby=" + orders.join(",") : ""}` +
`&$top=${this.props.totalItems}`;
this.props.spHttpClient.get(restAPI, SPHttpClient.configurations.v1, {
headers: {
'Accept': 'application/json;odata=nometadata',
'odata-version': ''
}
})
.then((response: SPHttpClientResponse): Promise<{ value: IAccordionListItem[] }> => {
return response.json();
this.props.spHttpClient
.get(restAPI, SPHttpClient.configurations.v1, {
headers: {
Accept: "application/json;odata=nometadata",
"odata-version": "",
},
})
.then((response: { value: IAccordionListItem[] }): void => {
if (!response.value) {
.then(
(
response: SPHttpClientResponse
): Promise<{ value: IAccordionListItem[] }> => {
return response.json();
}
)
.then(
(response: { value: IAccordionListItem[] }): void => {
if (!response.value) {
this.setState({
error: `No items were found, check the list Title and/or custom sort order field internal name`,
});
}
let listItemsCollection = [...response.value];
this.setState({
error: `No items were found, check the list Title and/or custom sort order field internal name`
status: "",
pagedItems: listItemsCollection.slice(
0,
this.props.maxItemsPerPage
),
items: response.value,
listItems: response.value,
isLoading: false,
loaderMessage: "",
error: "",
});
},
(error: any): void => {
this.setState({
status: "Loading all items failed with error: " + error,
pagedItems: [],
isLoading: false,
loaderMessage: "",
error: `Loading failed. Validate that you have entered a valid List Title and/or internal field name for the custom sort order ${error}`,
});
}
let listItemsCollection = [...response.value];
this.setState({
status: "",
pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage),
items: response.value,
listItems: response.value,
isLoading: false,
loaderMessage: '',
error: ''
});
}, (error: any): void => {
this.setState({
status: 'Loading all items failed with error: ' + error,
pagedItems: [],
isLoading: false,
loaderMessage: "",
error: `Loading failed. Validate that you have entered a valid List Title and/or internal field name for the custom sort order ${error}`
});
});
);
}
public render(): React.ReactElement<IReactAccordionProps> {
@ -145,33 +165,46 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
let startIndex: number = (pageNumber - 1) * pageCountDivisor;
let endIndex = startIndex + pageCountDivisor;
let listItemsCollection = [...listData];
this.setState({ pagedItems: listItemsCollection.slice(startIndex, endIndex) });
this.setState({
pagedItems: listItemsCollection.slice(startIndex, endIndex),
});
};
const pagedItems: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {
return (
<AccordionItem>
<AccordionItemTitle className="accordion__title">
<h3 className="u-position-relative ms-fontColor-white">{item.Title}</h3>
<div className="accordion__arrow ms-fontColor-white" role="presentation" />
</AccordionItemTitle>
<AccordionItemBody className="accordion__body">
<div className="" dangerouslySetInnerHTML={{ __html: item.Description }}>
</div>
</AccordionItemBody>
</AccordionItem>
);
});
const pagedItems: JSX.Element[] = this.state.pagedItems.map(
(item: IAccordionListItem, i: number): JSX.Element => {
return (
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton >
{item.Title}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel >
<div
className=""
dangerouslySetInnerHTML={{ __html: item.Description }}
></div>
</AccordionItemPanel>
</AccordionItem>
);
}
);
if (this.state.isLoading) {
displayLoader = (<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className='ms-Grid-col ms-u-lg12'>
<Spinner size={SpinnerSize.large} label={this.state.loaderMessage} />
displayLoader = (
<div
className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}
>
<div className="ms-Grid-col ms-u-lg12">
<Spinner
size={SpinnerSize.large}
label={this.state.loaderMessage}
/>
</div>
</div>
</div>);
}
else {
displayLoader = (null);
);
} else {
displayLoader = null;
}
if (this.props.enablePaging) {
@ -179,7 +212,17 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
pageCount = Math.ceil(items.length / pageCountDivisor);
}
for (let i = 0; i < pageCount; i++) {
pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);
pageButtons.push(
<PrimaryButton
style={{ margin: "0 8px" }}
onClick={() => {
_pagedButtonClick(i + 1, items);
}}
>
{" "}
{i + 1}{" "}
</PrimaryButton>
);
}
}
@ -192,32 +235,28 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
<div className={styles.container}>
{faqTitle}
{displayLoader}
<WebPartTitle displayMode={this.props.displayMode}
<WebPartTitle
displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty} />
<div className='ms-Grid-row'>
<div className='ms-Grid-col ms-u-lg12'>
<SearchBox
onChange={this.searchTextChange}
/>
updateProperty={this.props.updateProperty}
/>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-u-lg12">
<SearchBox onChange={this.searchTextChange} />
</div>
</div>
<div className={`ms-Grid-row`}>
<div className='ms-Grid-col ms-u-lg12'>
<div className="ms-Grid-col ms-u-lg12">
{this.state.status}
<Accordion>
{pagedItems}
</Accordion>
<Accordion>{pagedItems}</Accordion>
</div>
</div>
<div className='ms-Grid-row'>
<div className='ms-Grid-col ms-u-lg12'>
{pageButtons}
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-u-lg12">{pageButtons}</div>
</div>
</div>
{errorMessage}
</div>
);
}
}
}

150
samples/react-accordion/src/webparts/reactAccordion/components/accordion.css
View File

@ -1,109 +1,97 @@
.accordion__title > *:last-child,
.accordion__heading > *:last-child,
.accordion__body > *:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
.accordion__arrow {
display: inline-block;
position: relative;
width: 24px;
height: 12px;
right: 10px;
margin-top: -28px;
color: white !important;
float: right;
}
.accordion__arrow::after,
.accordion__arrow::before {
display: block;
position: absolute;
width: 10px;
height: 2px;
background-color: currentColor;
content: '';
}
.accordion__arrow::before {
left: 4px;
transform: rotate(45deg);
}
[aria-expanded="true"] .accordion__arrow::before {
transform: rotate(-45deg);
}
.accordion__arrow::after {
right: 4px;
transform: rotate(-45deg);
}
[aria-expanded="true"] .accordion__arrow::after {
transform: rotate(45deg);
}
.accordion__arrow::before, .accordion__arrow::after {
transition: transform .25s ease, -webkit-transform .25s ease;
}
.accordion__item + .accordion__item {
border: none;
}
.accordion__item {
background-color: "[theme: themePrimary, default: #0078d7]";
margin-bottom: 10px;
background-color: "[theme: themePrimary, default: #0078d7]";
margin-bottom: 10px;
border-radius: 4px;
}
.accordion {
padding-top: 10px;
padding-top: 10px;
}
.accordion__item .accordion__title {
padding: 5px 20px;;
background-color: "[theme: themePrimary, default: #0078d7]";
.accordion__item .accordion__heading {
padding: 5px 20px;
background-color: "[theme: themePrimary, default: #0078d7]";
}
.accordion__item .accordion__title h3 {
font-weight: normal;
width: 88%;
.accordion__item .accordion__heading{
font-weight: normal;
}
.accordion__item .accordion__body {
padding: 15px 20px;
background-color: "[theme: themeLighterAlt, default: #0078d7]";
color: "[theme: bodyText, default: #333333]";
.accordion__item .accordion__panel {
padding: 15px 20px;
background-color: "[theme: themeLighterAlt, default: #0078d7]";
color: "[theme: bodyText, default: #333333]";
}
.accordion__item .accordion__body a {
color: "[theme: themePrimary, default: #0078d7]" !important;
.accordion__item .accordion__panel a {
color: "[theme: themePrimary, default: #0078d7]" !important;
}
.accordion__item .accordion__body p {
color: "[theme: bodyText, default: #333333]";
.accordion__item .accordion__panel p {
color: "[theme: bodyText, default: #333333]";
}
/* -------------------------------------------------- */
/* ---------------- Animation part ------------------ */
/* -------------------------------------------------- */
@keyframes move-down {
0% { transform: translateY(0); }
10% { transform: translateY(0); }
20% { transform: translateY(5px); }
30% { transform: translateY(0); }
100% { transform: translateY(0); }
0% {
transform: translateY(0);
}
10% {
transform: translateY(0);
}
20% {
transform: translateY(5px);
}
30% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes move-up {
0% { transform: translateY(0); }
10% { transform: translateY(0); }
20% { transform: translateY(-5px); }
30% { transform: translateY(0); }
100% { transform: translateY(0); }
0% {
transform: translateY(0);
}
10% {
transform: translateY(0);
}
20% {
transform: translateY(-5px);
}
30% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.accordion__title--animated:hover .accordion__arrow {
animation-name: move-down;
animation-duration: 1.5s;
.accordion__heading--animated:hover .accordion__arrow {
animation-name: move-down;
animation-duration: 1.5s;
}
.accordion__title--animated[aria-expanded="true"]:hover .accordion__arrow {
animation-name: move-up;
animation-duration: 1.5s;
.accordion__heading--animated[aria-expanded="true"]:hover .accordion__arrow {
animation-name: move-up;
animation-duration: 1.5s;
}
.accordion {
margin-bottom: 1rem;
border: none;
padding-top: 0;
margin-top: 1rem;
}
.accordion__item .accordion__button{
width: inherit;
background: transparent;
color: #fff;
}

13
samples/react-accordion/tsconfig.json
View File

@ -1,6 +1,7 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"inlineSources": false,
@ -20,9 +21,11 @@
],
"types": [
"es6-promise",
"webpack-env"
"webpack-env",
],
"lib": [
"es2015",
"es2015.promise",
"es5",
"dom",
"es2015.collection"
@ -31,8 +34,4 @@
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

30
samples/react-accordion/tslint.json
View File

@ -1,30 +0,0 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

8
samples/react-advanced-page-properties/.devcontainer/devcontainer.json
View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.16.1",
"image": "docker.io/m365pnp/spfx:1.16.1",
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.20.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
@ -21,7 +21,7 @@
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
@ -36,4 +36,4 @@
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}
}

1
samples/react-advanced-page-properties/.nvmrc Normal file
View File

@ -0,0 +1 @@
v18.18.2

4
samples/react-advanced-page-properties/.yo-rc.json
View File

@ -2,7 +2,7 @@
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.16.1",
"version": "1.20.0",
"nodeVersion": "14.18.1",
"libraryName": "advanced-page-properties",
"libraryId": "daae06a2-8599-445c-93c0-3bd739305f56",
@ -11,7 +11,7 @@
"componentType": "webpart",
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.4.1"
"@microsoft/teams-js": "2.24.0"
}
}
}

5
samples/react-advanced-page-properties/README.md
View File

@ -23,8 +23,8 @@ Attempts to replicate the functionality of Page Properties with the following im
This sample is optimally compatible with the following environment configuration:
![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18.18.2](https://img.shields.io/badge/Node.js-v18.18.2-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -59,6 +59,7 @@ Version|Date|Comments
1.0.2|December 24, 2021|Fix retrieving fields from SitePages
1.0.3|January 12, 2022|Fix formatting of date, number and currency values
1.0.5|June 05, 2023|Support for Multiline text fields
1.0.6|October 18, 2024|Upgraded to SPFx v1.20.0
## Minimal Path to Awesome

6
samples/react-advanced-page-properties/assets/sample.json
View File

@ -16,7 +16,7 @@
"- Support for Multiline text fields"
],
"creationDateTime": "2021-03-30",
"updateDateTime": "2023-03-06",
"updateDateTime": "2024-10-08",
"products": [
"SharePoint"
],
@ -27,7 +27,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.20.0"
}
],
"thumbnails": [
@ -73,7 +73,7 @@
},
{
"gitHubAccount": "NishkalankBezawada",
"company": "Tietoevry, Sweden",
"company": "Bravero AB, Sweden",
"pictureUrl": "https://avatars.githubusercontent.com/u/47456098?v=4",
"name": "Nishkalank Bezawada"
}

2
samples/react-advanced-page-properties/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "Advanced Page Properties",
"id": "daae06a2-8599-445c-93c0-3bd739305f56",
"version": "1.0.4.0",
"version": "1.0.6.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"developer": {

28957
samples/react-advanced-page-properties/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
samples/react-advanced-page-properties/package.json
View File

@ -4,7 +4,7 @@
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=16.13.0 <17.0.0"
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
@ -12,37 +12,36 @@
"test": "gulp test"
},
"dependencies": {
"@fluentui/react": "^8.7.0",
"@microsoft/sp-adaptive-card-extension-base": "1.16.1",
"@microsoft/sp-core-library": "1.16.1",
"@microsoft/sp-lodash-subset": "1.16.1",
"@microsoft/sp-office-ui-fabric-core": "1.16.1",
"@microsoft/sp-property-pane": "1.16.1",
"@microsoft/sp-tslint-rules": "^1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@fluentui/react": "8.106.4",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-tslint-rules": "^1.20.2",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/logging": "^3.12.1",
"@pnp/sp": "^3.9.0",
"@pnp/spfx-property-controls": "^3.0.0",
"lodash": "^4.17.21",
"office-ui-fabric-react": "7.199.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.1",
"@microsoft/eslint-plugin-spfx": "1.16.1",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.16.1",
"@microsoft/sp-module-interfaces": "1.16.1",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "1.15.2",
"ajv": "6.12.5",
"eslint": "8.7.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5"
"typescript": "4.7.4"
}
}

9
samples/react-advanced-page-properties/tsconfig.json
View File

@ -1,7 +1,8 @@
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
@ -9,7 +10,6 @@
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
@ -27,11 +27,10 @@
"dom",
"es2015.collection",
"es2015.promise"
],
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
]
}

8
samples/react-carousel/.devcontainer/devcontainer.json
View File

@ -1,7 +1,7 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.12.1",
"image": "docker.io/m365pnp/spfx:1.12.1",
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.20.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
@ -21,7 +21,7 @@
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
@ -36,4 +36,4 @@
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}
}

5
samples/react-carousel/.eslintrc.js Normal file
View File

@ -0,0 +1,5 @@
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};

1
samples/react-carousel/.gitignore vendored
View File

@ -13,6 +13,7 @@ solution
temp
*.sppkg
release
.heft
# Coverage directory used by tools like istanbul
coverage

0
samples/react-carousel/.npmignore Normal file
View File

1
samples/react-carousel/.nvmrc Normal file
View File

@ -0,0 +1 @@
20.16.0

9
samples/react-carousel/.yo-rc.json
View File

@ -1,6 +1,13 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.12.1",
"@microsoft/generator-sharepoint": {
"nodeVersion": "20.16.0"
},
"sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.24.0"
},
"version": "1.20.0",
"libraryName": "react-carousel",
"libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"environment": "spo",

26
samples/react-carousel/README.md
View File

@ -1,20 +1,3 @@
---
page_type: sample
products:
- office-sp
- sharepoint
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- React
createdDate: 06/17/2016 12:00:00 AM
---
# Images and Videos in a Carousel
## Summary
@ -32,8 +15,8 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v20 ](https://img.shields.io/badge/Node.js-v20-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -66,10 +49,11 @@ For all available methods, go [here](https://react-slick.neostack.com/docs/api#m
## Contributors
* [João Mendes](https://github.com/joaojmendes)
- [João Mendes](https://github.com/joaojmendes)
- [Rahul Suryawanshi](https://github.com/Rahul)
- [Harsha Vardhini](https://github.com/Harshagracy)
- [Giuliano De Luca](https://github.com/giuleon)
- [Mohammad Amer](https://github.com/mohammadamer)
## Version history
@ -79,7 +63,7 @@ Version|Date|Comments
2.0.0|June 17, 2020|Upgraded to SPFx v1.10.0 (Rahul Suryawanshi)
3.0.0|October 31, 2020|Upgraded to SPFx v1.11.0 (Don Kirkham)
4.0.0|June 10, 2021|Upgraded to SPFx v1.12.1 (Giuliano De Luca)
5.0.0|October 15, 2024|Upgraded to SPFx v1.20.0 (Mohammad Amer)
## Minimal Path to Awesome

4
samples/react-carousel/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part show images and videos in carousel"
],
"creationDateTime": "2020-10-31",
"updateDateTime": "2020-06-12",
"updateDateTime": "2024-10-15",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.12.1"
"value": "1.20.0"
},
{
"key": "SPFX-TEAMSTAB",

4
samples/react-carousel/config/copy-assets.json
View File

@ -1,4 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "./release/assets/"
}

26
samples/react-carousel/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-carousel-client-side-solution",
"id": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
"version": "4.0.0.0",
"version": "5.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
@ -13,7 +13,29 @@
"termsOfUseUrl": "https://contoso.com/terms-of-use",
"websiteUrl": "https://contoso.com/my-app",
"mpnId": "m365pnp"
}
},
"metadata": {
"shortDescription": {
"default": "react-carousel shows images and videos in carousel"
},
"longDescription": {
"default": "react-carousel shows images and videos in carousel"
},
"screenshotPaths": [],
"videoUrl": "",
"categories": []
},
"features": [
{
"title": "react-carousel CarouselWebPart Feature",
"description": "The feature that activates CarouselWebPart from the react-carousel solution.",
"id": "6d2b91a3-2b33-492b-a372-f7d97dfc06cd",
"version": "4.0.0.0",
"componentIds": [
"6d2b91a3-2b33-492b-a372-f7d97dfc06cd"
]
}
]
},
"paths": {
"zippedPackage": "solution/react-carousel.sppkg"

3
samples/react-carousel/config/sass.json Normal file
View File

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

8
samples/react-carousel/config/serve.json
View File

@ -1,10 +1,6 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
"initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx"
}

74526
samples/react-carousel/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

91
samples/react-carousel/package.json
View File

@ -2,7 +2,9 @@
"name": "react-carousel",
"version": "4.0.0",
"private": true,
"engines": "undefined",
"engines": {
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
@ -12,53 +14,56 @@
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
},
"dependencies": {
"@microsoft/sp-core-library": "1.12.1",
"@microsoft/sp-http": "1.12.1",
"@microsoft/sp-lodash-subset": "1.12.1",
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
"@microsoft/sp-property-pane": "1.12.1",
"@microsoft/sp-webpart-base": "1.12.1",
"@microsoft/teams-js": "^1.6.0",
"@pnp/common": "^1.3.11",
"@pnp/graph": "^1.3.11",
"@pnp/pnpjs": "^1.3.3",
"@pnp/sp": "^1.3.11",
"@pnp/spfx-controls-react": "1.13.2",
"@pnp/spfx-property-controls": "1.15.0",
"@types/es6-promise": "0.0.33",
"@types/jquery": "^3.3.30",
"@types/webpack-env": "1.13.1",
"@uifabric/fluent-theme": "^0.16.9",
"@uifabric/styling": "^7.12.1",
"jquery": "^3.4.1",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-dom": "16.8.5",
"react-slick": "^0.24.0",
"slick-carousel": "^1.8.1",
"video-react": "^0.14.0"
},
"resolutions": {
"@types/react": "16.8.8"
"@fluentui/react": "8.121.3",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-http": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@microsoft/teams-js": "2.29.0",
"@pnp/common": "2.15.0",
"@pnp/graph": "2.15.0",
"@pnp/pnpjs": "2.15.0",
"@pnp/sp": "2.15.0",
"@pnp/spfx-controls-react": "3.19.0",
"@pnp/spfx-property-controls": "3.18.0",
"@types/es6-promise": "3.3.0",
"@types/jquery": "3.5.31",
"@uifabric/fluent-theme": "7.7.33",
"@uifabric/styling": "7.25.1",
"jquery": "3.7.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-slick": "0.30.2",
"slick-carousel": "1.8.1",
"tslib": "2.7.0",
"video-react": "0.16.0"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"@microsoft/sp-build-web": "1.18.0",
"@microsoft/sp-module-interfaces": "1.12.1",
"@microsoft/sp-tslint-rules": "1.12.1",
"@microsoft/sp-webpart-workbench": "1.12.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"@types/react": "16.9.36",
"@types/react-dom": "16.9.8",
"@voitanos/jest-preset-spfx-react16": "^1.1.0",
"ajv": "~5.2.2",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/chai": "5.0.0",
"@types/mocha": "10.0.9",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/react-slick": "^0.23.13",
"@types/video-react": "^0.15.8",
"@types/webpack-env": "1.15.2",
"@voitanos/jest-preset-spfx-react16": "1.5.0",
"ajv": "^8.5.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"gulp-sequence": "1.0.0",
"jest": "^23.6.0",
"jest": "26.6.3",
"jest-junit": "^6.3.0",
"typescript": "~3.3.x",
"typescript": "4.7.4",
"webpack-bundle-analyzer": "^4.10.2"
},
"jest-junit": {

27
samples/react-carousel/src/spservices/spservices.ts
View File

@ -1,20 +1,9 @@
// João Mendes
// March 2019
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { sp, Fields, Web, SearchResults, Field, PermissionKind, RegionalSettings, PagedItemCollection } from '@pnp/sp';
import { sp } from "@pnp/sp/presets/all";
import { graph, } from "@pnp/graph";
import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions, HttpClient, MSGraphClient } from '@microsoft/sp-http';
import * as $ from 'jquery';
import { MSGraphClient } from '@microsoft/sp-http';
import { registerDefaultFontFaces } from "@uifabric/styling";
import * as moment from 'moment';
import { SiteUser } from "@pnp/sp/src/siteusers";
import { dateAdd } from "@pnp/common";
import { escape, update } from '@microsoft/sp-lodash-subset';
// Class Services
export default class spservices {
private graphClient: MSGraphClient = null;
@ -22,11 +11,11 @@ export default class spservices {
constructor(private context: WebPartContext) {
// Setuo Context to PnPjs and MSGraph
sp.setup({
spfxContext: this.context
spfxContext: this.context as any
});
graph.setup({
spfxContext: this.context
spfxContext: this.context as any
});
// Init
this.onInit();
@ -44,7 +33,7 @@ export default class spservices {
}
try {
const web = new Web(siteUrl);
const web = sp.web;
results = await web.lists
.select("Title", "ID")
.filter('BaseTemplate eq 109')
@ -57,12 +46,10 @@ export default class spservices {
return results;
}
public async getImages(siteUrl: string, listId: string, numberImages: number): Promise<any[]> {
let results: any[] = [];
try {
const web = new Web(siteUrl);
const web = sp.web;
results = await web.lists
.getById(listId).items
.select('Title','Description','File_x0020_Type', 'FileSystemObjectType','File/Name', 'File/ServerRelativeUrl', 'File/Title', 'File/Id', 'File/TimeLastModified')
@ -75,8 +62,6 @@ export default class spservices {
} catch (error) {
return Promise.reject(error);
}
// sort by name
return results;
}
}

4
samples/react-carousel/src/webparts/carousel/CarouselWebPart.ts
View File

@ -1,4 +1,3 @@
//import '@pnp/polyfill-ie11';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
@ -67,9 +66,8 @@ export default class CarouselWebPart extends BaseClientSideWebPart<ICarouselWebP
this.listsDropdownDisabled = false;
this.context.propertyPane.refresh();
}
} catch (error) {
console.log('error', error);
}
}

2
samples/react-carousel/src/webparts/carousel/components/Carousel.module.scss
View File

@ -1,4 +1,4 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~@fluentui/react/dist/sass/References.scss';
.carousel {
.container {
max-width: 700px;

25
samples/react-carousel/src/webparts/carousel/components/Carousel.tsx
View File

@ -2,18 +2,16 @@ import * as React from 'react';
import styles from './Carousel.module.scss';
import { ICarouselProps } from './ICarouselProps';
import { ICarouselState } from './ICarouselState';
import { escape } from '@microsoft/sp-lodash-subset';
import spservices from '../../../spservices/spservices';
import * as microsoftTeams from '@microsoft/teams-js';
import { ICarouselImages } from './ICarouselmages';
import 'video-react/dist/video-react.css'; // import css
import 'video-react/dist/video-react.css';
import { Player, BigPlayButton } from 'video-react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import * as $ from 'jquery';
import { FontSizes, } from '@uifabric/fluent-theme/lib/fluent/FluentType';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import * as strings from 'CarouselWebPartStrings';
import { DisplayMode } from '@microsoft/sp-core-library';
@ -81,7 +79,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
if (image.FileSystemObjectType == 1) continue; // by pass folder item
const pURL = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/large/content?preferNoRedirect=true `;
const thumbnailUrl = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/c240x240/content?preferNoRedirect=true `;
//const thumbnailUrl = `${tenantUrl}/_api/v2.0/sharePoint:${image.File.ServerRelativeUrl}:/driveItem/thumbnails/0/c240x240/content?preferNoRedirect=true `;
let mediaType: string = '';
switch (image.File_x0020_Type) {
@ -112,20 +110,19 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
);
// Create Carousel Slides from Images
carouselImages = galleryImages.map((galleryImage, i) => {
return (
<div className='slideLoading' >
{galleryImage.mediaType == 'video' ?
<div >
<Player
poster={galleryImage.imageUrl}
style={{ width: '100%', height: '400px' }}>
<BigPlayButton position="center" />
<source src={galleryImage.serverRelativeUrl}
/>
</Player>
<div style={{ width: '100%', height: '400px' }}>
<Player
poster={galleryImage.imageUrl}>
<BigPlayButton position="center" />
<source src={galleryImage.serverRelativeUrl} />
</Player>
</div>
</div>
:
<div>
@ -182,7 +179,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
lazyLoad: 'progressive',
lazyLoad: 'progressive' as 'ondemand' | 'progressive',
autoplaySpeed: 3000,
initialSlide: this.state.photoIndex,
arrows: true,
@ -237,7 +234,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
</div>
{
this.state.loadingImage &&
<Spinner size={SpinnerSize.small} label={'Loading...'} style={{ verticalAlign: 'middle', right: '30%', top: 20, position: 'absolute', fontSize: FontSizes.size18, color: CommunicationColors.primary }}></Spinner>
<Spinner size={SpinnerSize.small} label={'Loading...'} style={{ verticalAlign: 'middle', right: '30%', top: 20, position: 'absolute', fontSize: FontSizes.size18, color: CommunicationColors.primary }} />
}
</div>
}

1
samples/react-carousel/src/webparts/carousel/components/ICarouselState.ts
View File

@ -1,4 +1,3 @@
import { ICarouselImages } from './ICarouselmages';
export interface ICarouselState {
carouselImages: any[];
isLoading: boolean;

12
samples/react-carousel/tsconfig.json
View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -14,12 +14,16 @@
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"noImplicitAny": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"webpack-env"
"webpack-env",
"@types/jest"
],
"lib": [
"es5",
@ -29,8 +33,8 @@
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": []
}

30
samples/react-carousel/tslint.json
View File

@ -1,30 +0,0 @@
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

38
samples/react-flow-dashboard/.devcontainer/devcontainer.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "SPFx 1.20.0",
"image": "docker.io/m365pnp/spfx:1.20.0",
"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"
}

33
samples/react-flow-dashboard/.devcontainer/spfx-startup.sh Normal file
View File

@ -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**********"

5
samples/react-flow-dashboard/.eslintrc.js
View File

@ -26,7 +26,7 @@ module.exports = {
//
// CONFIGURATION: By default, these are banned: String, Boolean, Number, Object, Symbol
'@typescript-eslint/ban-types': [
1,
0,
{
'extendDefaults': false,
'types': {
@ -126,7 +126,7 @@ module.exports = {
//
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
'@typescript-eslint/no-unused-vars': [
1,
0,
{
'vars': 'all',
// Unused function arguments often indicate a mistake in JavaScript code. However in TypeScript code,
@ -160,6 +160,7 @@ module.exports = {
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
// Rationale to disable: declaration of empty interfaces may be helpful for generic types scenarios
'@typescript-eslint/no-empty-interface': 0,
'@typescript-eslint/no-unused-expressions': 0,
// RATIONALE: This rule warns if setters are defined without getters, which is probably a mistake.
'accessor-pairs': 1,
// RATIONALE: In TypeScript, if you write x["y"] instead of x.y, it disables type checking.

BIN
samples/react-flow-dashboard/.nvmrc Normal file
View File

Binary file not shown.

6
samples/react-flow-dashboard/.yo-rc.json
View File

@ -2,12 +2,12 @@
"@microsoft/generator-sharepoint": {
"plusBeta": false,
"isCreatingSolution": true,
"nodeVersion": "16.18.1",
"nodeVersion": "18.18.2",
"sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.9.1"
"@microsoft/teams-js": "2.24.0"
},
"version": "1.17.4",
"version": "1.20.0",
"libraryName": "react-flow-dashboard",
"libraryId": "a55dc82b-3833-4250-9563-c6ab960ec7ae",
"environment": "spo",

28
samples/react-flow-dashboard/README.md
View File

@ -4,15 +4,11 @@
This web part demonstrates displaying the list of flows and perform some basic actions on the flow.
# Flow Dashboard
![Flow Dashboard](./assets/Dashboard.gif)
![](./assets/Dashboard.gif)
![Flow run history](./assets/Flowrunhistory.gif)
# Flow run history
![](./assets/Flowrunhistory.gif)
# Enabling stopped or suspended flows
![](./assets/Enablingflows.gif)
![Enabling stopped or suspended flows](./assets/Enablingflows.gif)
## Compatibility
@ -22,8 +18,8 @@ This web part demonstrates displaying the list of flows and perform some basic a
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.17.4](https://img.shields.io/badge/SPFx-1.17.4-green.svg)
![Node.js v16 | v14](https://img.shields.io/badge/Node.js-v16%20%7C%20v14-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@ -40,11 +36,12 @@ This web part uses *Microsoft Graph* API and *Microsoft Flow Service* API. You n
- Microsoft Flow Service
- `Flows.Read.All`
If the problem still persists,
If the problem still persists,
- go to `App Registrations`
- find `SharePoint Online Client Extensibility Web Application Principal`
- make sure you have added the above permission levels
![](./assets/APIPermissions.png)
![](./assets/APIPermissions.png)
## Minimal Path to Awesome
@ -54,18 +51,23 @@ If the problem still persists,
- in the command-line run:
- `npm install`
- `gulp serve`
- if using spfx-fast-serve, in the command-line run:
- `spfx-fast-serve`
- `Press enter if prompted to install node modules (will run npm install)`
- `npm run serve`
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
## Contributors
* [Nishkalank Bezawada](https://github.com/NishkalankBezawada)
- [Nishkalank Bezawada](https://github.com/NishkalankBezawada)
## Version history
Version|Date|Comments
-------|----|--------
1.0|August 3, 2023|Initial release
2.0|October 01, 2024|Upgraded to SharePoint Framework v1.20.0
## Help

4
samples/react-flow-dashboard/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part demonstrates displaying the list of flows in different environments, ability to re-enable flows which are stopped or suspended, and the flow run history of the selected flow."
],
"creationDateTime": "2023-08-03",
"updateDateTime": "2023-08-03",
"updateDateTime": "2024-10-01",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.17.4"
"value": "1.20.0"
}
],
"thumbnails": [

6
samples/react-flow-dashboard/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-flow-dashboard-client-side-solution",
"id": "a55dc82b-3833-4250-9563-c6ab960ec7ae",
"version": "1.0.0.0",
"version": "2.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
@ -12,7 +12,7 @@
"websiteUrl": "https://github.com/NishkalankBezawada",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": "Undefined-1.17.4"
"mpnId": "Undefined-1.20.0"
},
"webApiPermissionRequests": [
{
@ -40,7 +40,7 @@
"title": "react-flow-dashboard Feature",
"description": "The feature that activates elements of the react-flow-dashboard solution.",
"id": "6302f19a-1bd1-4021-8c94-6fe9ce9f3410",
"version": "1.0.0.0"
"version": "2.0.0.0"
}
]
},

6
samples/react-flow-dashboard/gulpfile.js vendored
View File

@ -13,4 +13,10 @@ build.rig.getTasks = function () {
return result;
};
/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */
build.initialize(require('gulp'));

59847
samples/react-flow-dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

39
samples/react-flow-dashboard/package.json
View File

@ -3,43 +3,46 @@
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=16.13.0 <17.0.0"
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
},
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
"test": "gulp test",
"serve": "fast-serve"
},
"dependencies": {
"@microsoft/sp-component-base": "1.17.4",
"@microsoft/sp-core-library": "1.17.4",
"@microsoft/sp-lodash-subset": "1.17.4",
"@microsoft/sp-office-ui-fabric-core": "1.17.4",
"@microsoft/sp-property-pane": "1.17.4",
"@microsoft/sp-webpart-base": "1.17.4",
"@fluentui/react": "8.106.4",
"@microsoft/sp-adaptive-card-extension-base": "1.20.0",
"@microsoft/sp-component-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/spfx-controls-react": "^3.15.0",
"@pnp/spfx-property-controls": "^3.14.0",
"jwt-decode": "^3.1.2",
"office-ui-fabric-react": "^7.199.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.17.4",
"@microsoft/eslint-plugin-spfx": "1.17.4",
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
"@microsoft/sp-build-web": "1.17.4",
"@microsoft/sp-module-interfaces": "1.17.4",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint": "8.7.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5"
"typescript": "4.7.4",
"spfx-fast-serve-helpers": "~1.20.0"
}
}
}

4
samples/react-flow-dashboard/src/webparts/reactFlowDashboard/components/Dashboard/IReactFlowDashboardState.ts
View File

@ -1,5 +1,5 @@
import { IColumn,IGroup } from 'office-ui-fabric-react';
import {MessageBarType } from 'office-ui-fabric-react';
import { IColumn,IGroup } from '@fluentui/react';
import {MessageBarType } from '@fluentui/react';
import { Items } from './IReactFlowDashboardProps';
import { IFlow } from './IReactFlowDashboardProps';
import { IFlowRun } from '../RunHistory/IReactFlowRunHistoryProps';

2
samples/react-flow-dashboard/src/webparts/reactFlowDashboard/components/Dashboard/ReactFlowDashboard.tsx
View File

@ -11,7 +11,7 @@ import {
DetailsList, DetailsListLayoutMode, SelectionMode,
IColumn, mergeStyles, Spinner,
ProgressIndicator,ITooltipHostStyles, Link
} from 'office-ui-fabric-react';
} from '@fluentui/react';
import FlowService from '../../services/FlowService';
import GraphService from '../../services/GraphService';
import { AadTokenProvider } from '@microsoft/sp-http-base';

2
samples/react-flow-dashboard/src/webparts/reactFlowDashboard/components/RunHistory/index.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Panel, PanelType } from 'office-ui-fabric-react';
import { Panel, PanelType } from '@fluentui/react';
import { IReactFlowRunHistoryProps } from './IReactFlowRunHistoryProps';

2
samples/react-flow-dashboard/tsconfig.json
View File

@ -1,5 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,

4
samples/react-modern-carousel/.devcontainer/devcontainer.json
View File

@ -1,6 +1,6 @@
{
"name": "SPFx 1.18.2",
"image": "docker.io/m365pnp/spfx:1.18.2",
"name": "SPFx 1.20.2",
"image": "docker.io/m365pnp/spfx:1.20.2",
"customizations": {
"vscode": {
"extensions": [

4
samples/react-modern-carousel/.yo-rc.json
View File

@ -10,9 +10,9 @@
"nodeVersion": "18.18.2",
"sdksVersions": {
"@microsoft/microsoft-graph-client": "3.0.2",
"@microsoft/teams-js": "2.12.0"
"@microsoft/teams-js": "2.24.0"
},
"version": "1.18.2",
"version": "1.20.0",
"libraryName": "award-recognition",
"libraryId": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
"environment": "spo",

39
samples/react-modern-carousel/README.md
View File

@ -8,22 +8,22 @@ This SharePoint Framework (SPFx) web part introduces a contemporary carousel com
## Compatibility
| :warning: Important |
|:---------------------------|
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
| :warning: Important |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node. |
| Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.18.2-green.svg)
![version](https://img.shields.io/badge/version-1.20.0-green.svg)
This sample is optimally compatible with the following environment configuration:
![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg)
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
![Node.js v18 | v16](https://img.shields.io/badge/Node.js-v18%20%7C%20v16-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Does not work with SharePoint 2016 (Feature Pack 2)](<https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg> "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-red.svg)
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-red.svg)
@ -39,17 +39,17 @@ This sample is optimally compatible with the following environment configuration
Create a SharePoint custom list `Award Recognition` in the SPO site with below columns
| Column Name | Type |
| ------- | --------------- |
| Title | OOTB |
| Designation | Text |
| UserImage | Image |
| Column Name | Type |
| ----------- | ----- |
| Title | OOTB |
| Designation | Text |
| UserImage | Image |
## Solution
| 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) ) |
| 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) ) |
## Contributors🧑‍💻
@ -57,9 +57,10 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
## Version history
| Version | Date | Comments |
| ------- | ---------------- | --------------- |
| 1.0 | March 16, 2024 | Initial release |
| Version | Date | Comments |
| ------- | ---------------- | ----------------------------------- |
| 1.0 | March 16, 2024 | Initial release |
| 1.1 | October 19, 2024 | Upgrade to SPFx 1.20 & misc changes |
## Minimal Path to Awesome⚡
@ -97,7 +98,7 @@ Key features demonstrated by this solution:
## 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.
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're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.

4
samples/react-modern-carousel/assets/sample.json
View File

@ -10,7 +10,7 @@
"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-03-16",
"updateDateTime": "2024-03-16",
"updateDateTime": "2024-10-10",
"products": [
"SharePoint"
],
@ -21,7 +21,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.18.2"
"value": "1.20.2"
}
],
"thumbnails": [

6
samples/react-modern-carousel/config/package-solution.json
View File

@ -3,12 +3,12 @@
"solution": {
"name": "award-recognition-client-side-solution",
"id": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
"version": "1.0.0.0",
"version": "1.1.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
"developer": {
"name": "",
"name": "Sandeep P S",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
@ -30,7 +30,7 @@
"title": "award-recognition Feature",
"description": "The feature that activates elements of the award-recognition solution.",
"id": "475edc5c-974e-43d2-874b-0262da790739",
"version": "1.0.0.0"
"version": "1.1.0.0"
}
]
},

13650
samples/react-modern-carousel/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
samples/react-modern-carousel/package.json
View File

@ -1,6 +1,6 @@
{
"name": "award-recognition",
"version": "1.0.0",
"version": "1.1.0",
"private": true,
"engines": {
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
@ -13,14 +13,14 @@
},
"dependencies": {
"@fluentui/react": "8.106.4",
"@fluentui/react-components": "^9.40.0",
"@fluentui/react-components": "^9.55.1",
"@microsoft/sp-adaptive-card-extension-base": "1.18.2",
"@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-property-pane": "1.18.2",
"@microsoft/sp-webpart-base": "1.18.2",
"@pnp/sp": "^3.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/sp": "^3.26.0",
"pnp-react-hooks": "^1.3.0",
"react": "17.0.1",
"react-dom": "17.0.1",
@ -28,18 +28,17 @@
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.18.2",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.18.2",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.18.2",
"@microsoft/sp-module-interfaces": "1.18.2",
"@rushstack/eslint-config": "2.5.1",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint": "8.7.0",
"eslint": "8.57.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.7.4"

64
samples/react-modern-carousel/src/components/Carousel.tsx
View File

@ -1,54 +1,54 @@
import * as React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow } from "swiper";
import { Card, CardPreview } from "@fluentui/react-components"
import { useEffect, useState } from "react"
import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems"
import { ListOptions } from "pnp-react-hooks/types/options/ListOptions"
import { useSite } from "pnp-react-hooks/hooks/sp/useSite"
import { Card, CardPreview } from "@fluentui/react-components";
import { useEffect, useState } from "react";
import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems";
import { ListOptions } from "pnp-react-hooks/types/options/ListOptions";
import { useSite } from "pnp-react-hooks/hooks/sp/useSite";
// Import Swiper styles
import "swiper/swiper.min.css"
import "swiper/modules/navigation/navigation.min.css"
import "swiper/modules/pagination/pagination.min.css"
import "swiper/modules/effect-coverflow/effect-coverflow.min.css"
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/effect-coverflow/effect-coverflow.min.css";
import { AwardItems } from "../types/AwardItems"
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
import { Content } from "./Content"
import { AwardItems } from "../types/AwardItems";
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
import { Content } from "./Content";
export const Carousel = (): JSX.Element => {
const [awardList, setAwardList] = useState<AwardItems[]>([])
const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null)
const [awardList, setAwardList] = useState<AwardItems[]>([]);
const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null);
const listItems = useListItems<AwardItems>("Award Recognition", {
query: {
select: ["ID", "Title", "Designation", "UserImage"],
},
mode: ListOptions.All,
})
});
const siteInfo = useSite()
const siteInfo = useSite();
useEffect(() => {
if (listItems && listItems.length > 0) {
const parsedData = listItems.map((item) => {
const AppImageUrl = JSON.parse(item.UserImage)
const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`
return { ...item, ImageUrl }
})
setAwardList(parsedData)
const AppImageUrl = JSON.parse(item.UserImage);
const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`;
return { ...item, ImageUrl };
});
setAwardList(parsedData);
if (selectedUser === null) {
setSelectedUser(parsedData[0])
setSelectedUser(parsedData[0]);
}
}
}, [listItems, selectedUser, siteInfo])
}, [listItems, selectedUser, siteInfo]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleSlideChange = (swiper: any): void => {
const activeIndex = swiper.activeIndex
setSelectedUser(awardList[activeIndex])
}
const activeIndex = swiper.activeIndex;
setSelectedUser(awardList[activeIndex]);
};
return (
<div className={styles.container}>
@ -56,8 +56,10 @@ export const Carousel = (): JSX.Element => {
<Content user={selectedUser} />
</aside>
<aside className={styles.carouselWrapper}>
<div className={styles.fade_left}></div>
<div className={styles.fade_right}></div>
<Swiper
effect='coverflow'
effect="coverflow"
grabCursor={true}
coverflowEffect={{
rotate: 0,
@ -93,8 +95,8 @@ export const Carousel = (): JSX.Element => {
borderRadius: "8px",
}}
>
<CardPreview>
<img src={user.ImageUrl} alt={user.Title}/>
<CardPreview style={{ height: "inherit" }}>
<img src={user.ImageUrl} alt={user.Title} />
</CardPreview>
</Card>
</SwiperSlide>
@ -102,5 +104,5 @@ export const Carousel = (): JSX.Element => {
</Swiper>
</aside>
</div>
)
}
);
};

24
samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss
View File

@ -26,6 +26,7 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
}
.carouselWrapper {
width: 70%;
position: relative;
}
.contentDescriptionWrapper {
display: grid;
@ -36,3 +37,26 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
display: grid;
gap: 0.2rem;
}
img {
object-fit: cover;
}
// Fade
.fade_left,
.fade_right {
position: absolute;
top: 0;
bottom: 0;
width: 4rem; /* Equivalent to w-16 in Tailwind */
z-index: 10;
}
.fade_left {
left: 0;
background: linear-gradient(to right, white, transparent);
}
.fade_right {
right: 0;
background: linear-gradient(to left, white, transparent);
}

10
samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js vendored
View File

@ -1,10 +1,10 @@
define([], function () {
return {
PropertyPaneDescription: "Description",
BasicGroupName: "Configure this webpart",
WebpartFieldLabel: "Webpart Title",
ContentTitleFieldLabel: "Content Title",
ContentDescriptionFieldLabel: "Content Description",
PropertyPaneDescription: "Configure this webpart",
BasicGroupName: "Basic Settings",
WebpartFieldLabel: "Header",
ContentTitleFieldLabel: "Sub heading",
ContentDescriptionFieldLabel: "Sub heading description",
AppLocalEnvironmentSharePoint:
"The app is running on your local environment as SharePoint web part",
AppLocalEnvironmentTeams:

201
samples/react-sales-orders/package-lock.json generated
View File

@ -1754,9 +1754,9 @@
"dev": true
},
"node_modules/body-parser": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
"integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
"version": "1.20.3",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
"dev": true,
"dependencies": {
"bytes": "3.1.2",
@ -1767,7 +1767,7 @@
"http-errors": "2.0.0",
"iconv-lite": "0.4.24",
"on-finished": "2.4.1",
"qs": "6.11.0",
"qs": "6.13.0",
"raw-body": "2.5.2",
"type-is": "~1.6.18",
"unpipe": "1.0.0"
@ -1930,14 +1930,19 @@
}
},
"node_modules/call-bind": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
"integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
"dev": true,
"dependencies": {
"es-define-property": "^1.0.0",
"es-errors": "^1.3.0",
"function-bind": "^1.1.2",
"get-intrinsic": "^1.2.1",
"set-function-length": "^1.1.1"
"get-intrinsic": "^1.2.4",
"set-function-length": "^1.2.1"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
@ -2325,9 +2330,9 @@
}
},
"node_modules/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
"dev": true,
"engines": {
"node": ">= 0.6"
@ -2489,17 +2494,20 @@
}
},
"node_modules/define-data-property": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
"integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.2.1",
"gopd": "^1.0.1",
"has-property-descriptors": "^1.0.0"
"es-define-property": "^1.0.0",
"es-errors": "^1.3.0",
"gopd": "^1.0.1"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/define-lazy-prop": {
@ -2708,9 +2716,9 @@
"dev": true
},
"node_modules/encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
"dev": true,
"engines": {
"node": ">= 0.8"
@ -2838,6 +2846,27 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/es-define-property": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.2.4"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-errors": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"dev": true,
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-set-tostringtag": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@ -2944,37 +2973,37 @@
}
},
"node_modules/express": {
"version": "4.19.2",
"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
"integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
"version": "4.21.1",
"resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
"integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
"dev": true,
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
"body-parser": "1.20.2",
"body-parser": "1.20.3",
"content-disposition": "0.5.4",
"content-type": "~1.0.4",
"cookie": "0.6.0",
"cookie": "0.7.1",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "2.0.0",
"encodeurl": "~1.0.2",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"finalhandler": "1.2.0",
"finalhandler": "1.3.1",
"fresh": "0.5.2",
"http-errors": "2.0.0",
"merge-descriptors": "1.0.1",
"merge-descriptors": "1.0.3",
"methods": "~1.1.2",
"on-finished": "2.4.1",
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"path-to-regexp": "0.1.10",
"proxy-addr": "~2.0.7",
"qs": "6.11.0",
"qs": "6.13.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.2.1",
"send": "0.18.0",
"serve-static": "1.15.0",
"send": "0.19.0",
"serve-static": "1.16.2",
"setprototypeof": "1.2.0",
"statuses": "2.0.1",
"type-is": "~1.6.18",
@ -3036,13 +3065,13 @@
}
},
"node_modules/finalhandler": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
"dev": true,
"dependencies": {
"debug": "2.6.9",
"encodeurl": "~1.0.2",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"on-finished": "2.4.1",
"parseurl": "~1.3.3",
@ -3281,16 +3310,20 @@
}
},
"node_modules/get-intrinsic": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
"integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
"dev": true,
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2",
"has-proto": "^1.0.1",
"has-symbols": "^1.0.3",
"hasown": "^2.0.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
@ -3482,12 +3515,12 @@
}
},
"node_modules/has-property-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
"integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
"dev": true,
"dependencies": {
"get-intrinsic": "^1.2.2"
"es-define-property": "^1.0.0"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
@ -4544,10 +4577,13 @@
}
},
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
"dev": true
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/methods": {
"version": "1.1.2",
@ -5623,9 +5659,9 @@
}
},
"node_modules/path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
"integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
"dev": true
},
"node_modules/pathval": {
@ -5772,12 +5808,12 @@
}
},
"node_modules/qs": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
"dev": true,
"dependencies": {
"side-channel": "^1.0.4"
"side-channel": "^1.0.6"
},
"engines": {
"node": ">=0.6"
@ -6117,9 +6153,9 @@
}
},
"node_modules/send": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
"dev": true,
"dependencies": {
"debug": "2.6.9",
@ -6155,6 +6191,15 @@
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true
},
"node_modules/send/node_modules/encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
"dev": true,
"engines": {
"node": ">= 0.8"
}
},
"node_modules/send/node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@ -6174,15 +6219,15 @@
"dev": true
},
"node_modules/serve-static": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
"version": "1.16.2",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
"dev": true,
"dependencies": {
"encodeurl": "~1.0.2",
"encodeurl": "~2.0.0",
"escape-html": "~1.0.3",
"parseurl": "~1.3.3",
"send": "0.18.0"
"send": "0.19.0"
},
"engines": {
"node": ">= 0.8.0"
@ -6195,15 +6240,17 @@
"dev": true
},
"node_modules/set-function-length": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
"integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
"dev": true,
"dependencies": {
"define-data-property": "^1.1.1",
"get-intrinsic": "^1.2.1",
"define-data-property": "^1.1.4",
"es-errors": "^1.3.0",
"function-bind": "^1.1.2",
"get-intrinsic": "^1.2.4",
"gopd": "^1.0.1",
"has-property-descriptors": "^1.0.0"
"has-property-descriptors": "^1.0.2"
},
"engines": {
"node": ">= 0.4"
@ -6242,14 +6289,18 @@
"dev": true
},
"node_modules/side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
"dev": true,
"dependencies": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
"object-inspect": "^1.9.0"
"call-bind": "^1.0.7",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.4",
"object-inspect": "^1.13.1"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"