Update component's readme, add github actions workflows and pull request/issue templates.

.github/ISSUE_TEMPLATE/bug_issue_template.md

@@ -0,0 +1,50 @@
+---
+name: BBB Components React Lib bug report
+about: Template for reporting a bug in BBB-UI-Components-React (UI Lib with BigBlueButton standard components).
+title: ''
+labels: 'bug'
+assignees: ''
+
+---
+
+<!--PLEASE DO NOT FILE ISSUES FOR GENERAL SUPPORT QUESTIONS.
+This issue tracker is only for bbb development related issues.-->
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Actual behavior**
+A clear and concise description of what is happening.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**BBB version, plugin in which the bug happened and SDK version:**
+BigBlueButton continually evolves. Providing the version/build helps us to pinpoint when an issue was introduced.
+Example:
+$ sudo bbb-conf --check | grep BigBlueButton
+BigBlueButton Server 2.2.2 (1816)
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows, Mac]
+ - Browser [e.g. Chrome, Safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, Safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_issue_template.md

@@ -0,0 +1,36 @@
+---
+name: BBB Components React Lib feature request
+about: Template for suggesting a new feature or improvement to BBB-UI-Components-React (UI Lib with BigBlueButton standard components).
+title: ''
+labels: 'enhancement'
+assignees: ''
+
+---
+
+<!--PLEASE DO NOT FILE ISSUES FOR GENERAL SUPPORT QUESTIONS.
+This issue tracker is only for bbb development related issues.-->
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of the problem or limitation. Example: "I'm always frustrated when [...]"
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Affected component(s)**
+List the component(s) this feature request applies to, if any. Example: BBBButton, BBBModal, BBBSelect.
+
+**Proposed API / Usage Example**
+If applicable, provide a code snippet showing how the feature would be used.
+
+```jsx
+// Example usage
+```
+
+**Screenshots or mockups**
+If applicable, add screenshots or mockups to help illustrate the feature.
+
+**Additional context**
+Add any other context about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,36 @@
+<!--
+PLEASE READ THIS MESSAGE.
+
+HOW TO WRITE A GOOD PULL REQUEST?
+
+- Make it small.
+- Do only one thing.
+- Avoid re-formatting.
+- Make sure the code builds and works.
+- Write useful descriptions and titles.
+- Address review comments in terms of additional commits.
+- Do not amend/squash existing ones unless the PR is trivial.
+- Read the contributing guide: https://docs.bigbluebutton.org/support/faq.html#bigbluebutton-development-process
+- Sign and send the Contributor License Agreement: https://docs.bigbluebutton.org/support/faq.html#why-do-i-need-to-sign-a-contributor-license-agreement-to-contribute-source-code
+
+-->
+
+### What does this PR do?
+
+<!-- A brief description of each change being made with this pull request. -->
+
+### Closes Issue(s)
+<!-- List here all the issues closed by this pull request. Use keyword `closes` before each issue number
+Closes #123456
+-->
+Closes #
+
+
+### Motivation
+
+<!-- What inspired you to submit this pull request? -->
+
+### More
+
+<!-- Anything else we should know when reviewing? -->
+- [ ] Added/updated documentation

.github/actions/merge-branches/action.yml

@@ -0,0 +1,21 @@
+name: Merge branches
+
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout ${{ github.event.pull_request.base.ref || 'master' }}
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.base.ref || 'master' }}
+        fetch-depth: 0 # Fetch all history
+    - name: Merge pr-${{ github.event.number }} into ${{ github.event.pull_request.base.ref }}
+      if: github.event_name == 'pull_request'
+      shell: bash
+      run: |
+        git config user.name "BBB Automated Tests"
+        git config user.email "tests@bigbluebutton.org"
+        git config pull.rebase false
+        if ! git pull origin pull/${{ github.event.number }}/head:${{ github.head_ref }}; then
+          echo "::error::Failed to merge PR #${{ github.event.number }} (${{ github.head_ref }}) into ${{ github.event.pull_request.base.ref }}. There may be merge conflicts that need to be resolved manually."
+          exit 1
+        fi

.github/workflows/sync-develop.yml

@@ -0,0 +1,70 @@
+name: Sync main into develop
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Open PR from main to develop
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const tag = context.ref.replace('refs/tags/', '');
+            const { owner, repo } = context.repo;
+
+            // Check if develop branch exists
+            try {
+              await github.rest.repos.getBranch({ owner, repo, branch: 'develop' });
+            } catch (e) {
+              if (e.status === 404) {
+                core.warning('Branch "develop" not found. Skipping PR creation.');
+                return;
+              }
+              throw e;
+            }
+
+            // Check if branches are already in sync
+            const comparison = await github.rest.repos.compareCommitsWithBasehead({
+              owner,
+              repo,
+              basehead: 'develop...main',
+            });
+            if (comparison.data.ahead_by === 0) {
+              core.info('Branches are already in sync. No PR needed.');
+              return;
+            }
+
+            // Check if a PR from main to develop already exists
+            const existingPRs = await github.rest.pulls.list({
+              owner,
+              repo,
+              state: 'open',
+              head: `${owner}:main`,
+              base: 'develop',
+            });
+            if (existingPRs.data.length > 0) {
+              core.info(`PR already exists: ${existingPRs.data[0].html_url}`);
+              return;
+            }
+
+            await github.rest.pulls.create({
+              owner,
+              repo,
+              title: `chore: sync ${tag} from main into develop`,
+              head: 'main',
+              base: 'develop',
+              body: `Automated back-merge after release ${tag}.`,
+            });

.github/workflows/ts-code-compilation.yml

@@ -0,0 +1,25 @@
+name: Typescript - compile code
+on: [pull_request]
+permissions:
+  contents: read
+jobs:
+  ts-code-compilation:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      # Merges the base branch (e.g. develop) into the PR branch so compilation
+      # runs against the integrated result, catching conflicts early.
+      - name: Merge branches
+        uses: ./.github/actions/merge-branches
+      - name: install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: run npm install
+        shell: bash
+        run: npm install
+      - name: typescript code compilation
+        shell: bash
+        run: npx tsc

.github/workflows/ts-code-validation.yml

@@ -0,0 +1,26 @@
+name: Typescript - validate code (eslint)
+on: [pull_request]
+
+permissions:
+  contents: read
+jobs:
+  ts-code-validation:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      # Merges the base branch (e.g. develop) into the PR branch so validation
+      # runs against the integrated result, catching conflicts early.
+      - name: Merge branches
+        uses: ./.github/actions/merge-branches
+      - name: install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: run npm install
+        shell: bash
+        run: npm install
+      - name: typescript code validation with eslint
+        shell: bash
+        run: npm run lint

src/components/Modal/README.md

@@ -30,8 +30,8 @@ import { BBBModal } from 'bbb-ui-components-react';
 | Prop                        | Type                           | Default   | Description                                                                 |
 |-----------------------------|--------------------------------|-----------|-----------------------------------------------------------------------------|
 | `isOpen`                    | `boolean`                      | `true`    | Controls whether the modal is open.                                         |
-| `onRequestClose`            | `() => void`                   | —         | Function called when requesting to close the modal.                         |
-| `appElement`                | `HTMLElement \| string`        | —         | App element for accessibility.                                              |
+| `onRequestClose`            | `(event: React.MouseEvent \| React.KeyboardEvent) => void` | — | Function called when requesting to close the modal.              |
+| `appElement`                | `HTMLElement \| HTMLElement[] \| HTMLCollection \| NodeList` | — | App element for accessibility (passed to `react-modal`).        |
 | `title`                     | `string`                       | —         | Modal title.                                                                |
 | `contentLabel`              | `string`                       | —         | Accessibility label for modal content.                                      |
 | `showDividers`              | `boolean`                      | `false`   | Shows dividers between header, body, and footer.                            |
@@ -42,6 +42,7 @@ import { BBBModal } from 'bbb-ui-components-react';
 | `footerContent`             | `React.ReactNode`              | `null`    | Custom content for the footer.                                              |
 | `stickyFooter`              | `boolean`                      | `true`    | Makes the footer sticky.                                                    |
 | `children`                  | `React.ReactNode`              | —         | Modal content.                                                              |
+| `...props`                  | `ReactModal.Props`             | —         | Any other props are passed down to the underlying `react-modal` instance.   |
 
 See [`ModalProps`](./types.ts) for full type definitions.
 

src/components/Toggle/README.md

@@ -43,7 +43,7 @@ import { BBBToggle } from 'bbb-ui-components-react';
 | `textPosition`      | `keyof typeof TEXT_POSITIONS`                                       | `'right'` | The position of the text labels relative to the toggle switch.                 |
 | `disabled`          | `boolean`                                                           | `false`   | If `true`, the toggle will be disabled and unresponsive.                       |
 | `onChange`          | `(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void` |           | Callback function that is fired when the toggle state changes.                 |
-| `aria-label`        | `string`                                                            |           | The accessible name for the toggle.                                            |
-| `aria-labelledby`   | `string`                                                            |           | The ID of the element that labels the toggle.                                  |
-| `aria-describedby`  | `string`                                                            |           | The ID of the element that describes the toggle.                               |
-| `...toggleProps`    | `any`                                                               |           | Any other props will be passed down to the underlying Material-UI Switch component. |
+| `ariaLabel`         | `string`                                                            |           | The accessible name for the toggle.                                            |
+| `ariaLabelledBy`    | `string`                                                            |           | The ID of the element that labels the toggle.                                  |
+| `ariaDescribedBy`   | `string`                                                            |           | The ID of the element that describes the toggle.                               |
+| `...props`          | `SwitchProps`                                                       |           | Any other props will be passed down to the underlying Material-UI Switch component. |