React tabaccordion

[NicolasKheirallah]

By submitting this pull request, you agree to the contribution guidelines

If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, sign up for one of our Sharing is Caring events. It's completely free, and we'll guide you through the process.

To submit a pull request with multiple authors, make sure that at least one commit is a co-authored commit by adding a Co-authored-by: trailer to the commit's message. E.g.: Co-authored-by: name <[email protected]>

Put an x in all the items that apply ([x], no spaces between the [, the x, and the ] ), make notes next to any that haven't been addressed.

• New sample
• Bug fix/update
• Related issues: fixes react-tabaccordion - Re-order Tabs support #5420

What's in this Pull Request?

Please describe the changes in this PR. Sample description or details around bugs which are being fixed.

Refactored the code and modernized it to 2025, using built in functions in Fluent UI such as the accordian/tabs.
Updated and cleaned up the dependenices to latest version, Spfx 1.20, React 17 etc.
Added every function I could think of under the sun that would be useful:

Core Features

• Create and manage tabs with rich content using tinymce
• Toggle between Tab and Accordion display modes
• Seamless SharePoint theme integration
• Mobile-responsive design

Content Import/Export

• Export all tabs to a JSON file for backup or sharing
• Import tabs from JSON files
• Validation to ensure proper data structure

Tab Reordering and Duplication

• Drag and drop tabs to reorder
• Duplicate tabs with a single click
• Remove tabs with confirmation

SharePoint List Integration

• Pull tab content directly from SharePoint lists
• Configure list URL, columns, and sort order
• Refresh from list with a single click

Enhanced Styling Options

• Customize header and active state colors
• Control typography with font family, size, weight options
• Text transformation options (uppercase, lowercase, capitalize)
• Content area font customization for consistent reading experience
• Style reset option to quickly return to defaults

Typography Controls

• Font family selection with web-safe font options
• Font size control for headers and content
• Font weight options from light to extra bold
• Text transformation for creative styling
• Consistent typography applied to TinyMCE editor

Enhanced Media Support

• Improved support for video and audio content
• Custom SharePoint content embedding
• Pre-defined content templates

Deep Linking

• Direct links to specific tabs
• Copy link functionality for easy sharing
• Browser history management

Microsoft Graph Integration & Audience Targeting

• Target tabs to specific Microsoft 365 groups
• Visual indicators for audience targeting
• Integration with Microsoft Graph

Multi-language Support

• Content in multiple languages
• Automatic language detection
• Language selector for manual switching

Node Version

(Use node -v to get the version of Node you used to build this sample)

Node version used: 18.18.2

Checklist

This checklist is used to automatically pre-process your pull request; It is meant to help process pull requests in a timely manner, rather than hoops to jump through.

Put an x in all the items that apply ([x], no spaces between the [, the x, and the ] ). Make notes next to any that haven't been addressed.

• My pull request affects only ONE sample.
• My sample builds without any warnings
• I have updated the README.md file's Version history. For new samples, created a new README.md file matching this template
• My README.md has at least one static high-resolution screenshot (i.e. not a GIF) located in the assets folder.
• My README.md contains complete setup instructions, including pre-requisites and permissions required
• My solution includes a .nvmrc file indicating the version of Node.js

[github-actions]

Sample PR validation for #5425

✅ Validation status: success

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	✅ Succeeded
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded

[github-actions]

Sample PR validation for #5425

✅ Validation status: success

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	✅ Succeeded
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded