Merge develop into main

CLAUDE.md

@@ -0,0 +1,54 @@
+# CLAUDE.md
+
+Guidance for Claude Code when working in this repository.
+
+## Project overview
+
+`@bigbluebutton/bbb-ui-components-react` is a library of reusable React components extracted from BigBlueButton (BBB), published to npm. Each component lives in its own folder under `src/components/<Name>/` and is built/exported independently (tree-shakeable per-component entry points).
+
+`CHANGELOG.md` and the package version are generated automatically on release by `TriPSs/conventional-changelog-action` (see `.github/workflows/tag_and_release.yml`), using the `conventionalcommits` preset. This is why **correct commit type and scope matter**: they directly drive the changelog content and the version bump (see "Commit conventions" below).
+
+## Adding a new component
+
+Component folder/file names are **raw** PascalCase (`Button`, `Input`, `Navigation`...), but the **exported** component name is prefixed: `BBB<Name>` (e.g. `Toggle` folder → `BBBToggle` export). The one known exception is `Button` → `BBButton` (only one extra `B`, since `BBBButton` reads badly) — check `src/components/index.ts` for how similarly-named components were prefixed before deciding, but default to the full `BBB<Name>` form.
+
+### Files to create in `src/components/<Name>/`
+
+| File | Required? | Purpose |
+|---|---|---|
+| `component.tsx` | always | Component implementation. |
+| `styles.ts` | always | styled-components, using `$`-prefixed transient props (internal, not part of the public API). |
+| `index.ts` | always | `export { default as BBB<Name> } from './component';` |
+| `component.stories.tsx` | always | Storybook stories: `title: 'BBB<Name>'`, `tags: ['autodocs']`, an `argTypes` entry with a `description` per public prop, and a one-line JSDoc comment above every named story export describing what that story demonstrates. |
+| `README.md` | always | Usage examples + a Props table (`Property \| Type \| Default \| Description`). |
+| `assets/example.png` | conventional | Demo screenshot referenced by the README as `![Demo](assets/example.png)`. Most components have one; add it when you can. |
+| `types.ts` | if the component takes props | The public `<Name>Props` type/interface. Document every field with a single-line JSDoc comment (see "Prop JSDoc conventions" below). Internal styled-components prop interfaces (`Styled*Props`, `$`-prefixed fields) don't need JSDoc — they aren't public API. |
+| `constants.ts` | if the component has variant/size/layout-style enums or shared defaults | Exported `*_VALUES` arrays and `DEFAULT_*` constants, reused by `types.ts`, `component.tsx`, and `component.stories.tsx`. |
+
+### References to update elsewhere
+
+- `src/components/index.ts` — add `export { BBB<Name> } from './<Name>';` (keep alphabetical by folder name).
+- Root `README.md` — add `- [BBB<Name>](./src/components/<Name>/README.md)` to the "Available Components" list (keep alphabetical).
+- `webpack.config.babel.js` — add `<Name>: './src/components/<Name>/index.ts',` to the `entry` map.
+- `package.json` `exports` — add a `"./<Name>"` block, mirroring an existing one (e.g. copy the `"./Toggle"` block and replace `Toggle` with `<Name>` throughout). This is what makes `import { BBB<Name> } from '@bigbluebutton/bbb-ui-components-react/<Name>'` tree-shakeable.
+- `src/index.ts` needs **no** change — it already does `export * from './components'`, which picks up new components automatically.
+
+## Adding a new prop to an existing component
+
+1. `types.ts`/`type.ts` — add the field to the public props type, with a single-line JSDoc comment directly above it (blank line before the comment; add an `@default` tag if the prop has a default value). This is enforced by the `jsdoc/multiline-blocks` and `jsdoc/lines-before-block` rules in `eslint.config.mjs`, scoped to `types.ts`/`type.ts`.
+2. `component.tsx` — destructure the prop (with its default value, if any) and wire up the logic/rendering.
+3. `styles.ts` — if the prop affects styling, thread it through as a `$`-prefixed transient prop on the relevant styled-component; it doesn't need JSDoc.
+4. `component.stories.tsx` — add an `argTypes.<prop>` entry with a `description` (keep the wording in sync with the `types.ts` JSDoc), and add a new named story if the prop introduces a visually distinct state worth its own example, with a one-line JSDoc comment describing what it demonstrates.
+5. `README.md` (component-level) — add a row to the Props table.
+
+A new prop does **not** require changes to the root `README.md`, `package.json` `exports`, or `webpack.config.babel.js` — those only change when adding a whole new component.
+
+## Commit conventions
+
+Commits follow Conventional Commits: `type(scope): subject`.
+
+- **Type**: `feat` (new component or new prop), `fix` (bug fix), `docs` (README/Storybook/JSDoc-only changes), `chore` (tooling/config), or `refactor`/`style`/`test`/`build`/`ci` as appropriate. `feat`/`fix` drive the automatic version bump, so getting the type right matters.
+- **Scope**: the component's **exported** name — e.g. `BBButton`, `BBBInput`, `BBBModal`, `BBBTypography` — not the raw folder name. Some older commits in this repo used the raw lowercase name instead (e.g. `fix(toggle)`, `fix(spinner)`); that's the inconsistency to avoid, not a pattern to follow.
+- Changes spanning multiple components (tooling, lint config, cross-cutting docs) can omit the scope, e.g. `chore(ci): ...`, `docs: ...`.
+
+Examples: `feat(BBBToggle): add indeterminate state`, `fix(BBButton): ...`, `docs(BBBTypography): add stories for every typography variant`.

README.md

@@ -11,6 +11,7 @@ Below is a list of the components available in this library. Each component has
 - [BBBCheckbox](./src/components/Checkbox/README.md)
 - [BBBDivider](./src/components/Divider/README.md)
 - [BBBHint](./src/components/Hint/README.md)
+- [BBBInput](./src/components/Input/README.md)
 - [BBBModal](./src/components/Modal//README.md)
 - [BBBNavigation](./src/components/Navigation/README.md)
 - [BBBSearch](./src/components/Search/README.md)
@@ -71,28 +72,28 @@ The following table lists the supported CSS variables for color overriding, extr
 | `--color-light-gray`       | No                         | #F4F6FA      |
 | `--color-gray`             | No                         | #4E5A66      |
 | `--color-dark-gray`        | No                         | #393C48      |
-| `--color-brand-1`          | No                         | #1D65D4      |
-| `--color-brand-2`          | No                         | #1D65D4      |
-| `--color-brand-3`          | No                         | #1D65D4      |
+| `--color-brand-1`          | No                         | #0F70D7      |
+| `--color-brand-2`          | No                         | #0F70D7      |
+| `--color-brand-3`          | No                         | #0F70D7      |
 | `--color-brand-light`      | Yes (`--color-blue-aux`)   | #E5EFFB      |
 | `--color-brand-aux`        | Yes (`--color-brand-aux`)  | #E5EFFB      |
 | `--color-success`          | No                         | #2DD36F      |
 | `--color-warning`          | No                         | #F59240      |
-| `--color-error`            | Yes (`--color-danger`)     | #D6232D      |
-| `--color-error-dark`       | Yes (`--color-danger-dark`)| #B91C25      |
+| `--color-error`            | Yes (`--color-danger`)     | #DF2721      |
+| `--color-error-dark`       | Yes (`--color-danger-dark`)| #AE1010      |
 | `--color-background-white` | No                         | #FFFFFF      |
 | `--color-background-light` | No                         | #F4F6FA      |
 | `--color-background-blue`  | No                         | #E5EFFB      |
 | `--color-border-default`   | No                         | #B0BDC9      |
-| `--color-border-selected`  | No                         | #1D65D4      |
-| `--color-border-error`     | No                         | #D6232D      |
+| `--color-border-selected`  | No                         | #0F70D7      |
+| `--color-border-error`     | No                         | #DF2721      |
 | `--color-border-default`   | Yes (`--default-border`)   | #B0BDC9      |
 | `--color-text-default`     | No                         | #393C48      |
 | `--color-text-light`       | No                         | #717C91      |
 | `--color-icon-default`     | No                         | #717C91      |
-| `--color-icon-blue`        | No                         | #1D65D4      |
+| `--color-icon-blue`        | No                         | #0F70D7      |
 | `--color-icon-white`       | No                         | #FFFFFF      |
-| `--color-hover-dark`       | No                         | #1E53AF      |
+| `--color-hover-dark`       | No                         | #0C57A7      |
 | `--color-hover-light`      | No                         | #D4E5FA      |
 | `--color-hover-neutral`    | No                         | #DCE4EC      |
 
@@ -111,7 +112,7 @@ If you need to override colors for specific components or add new variables, ref
 You can install the library directly from npm:
 
 ```bash
-npm install @mconf/bbb-ui-components-react
+npm install @bigbluebutton/bbb-ui-components-react
 ```
 
 ## Local Development

eslint.config.mjs

@@ -6,6 +6,7 @@ import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
 import hooksPlugin from 'eslint-plugin-react-hooks';
 import importPlugin from 'eslint-plugin-import';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import jsdocPlugin from 'eslint-plugin-jsdoc';
 import globals from 'globals';
 
 export default tseslint.config(
@@ -71,4 +72,22 @@ export default tseslint.config(
       },
     },
   },
+
+  {
+    // Prop JSDoc in component `types.ts`/`type.ts` files: single-line blocks only,
+    // each preceded by a blank line (but not the first prop right after `{`).
+    files: ['src/components/**/types.ts', 'src/components/**/type.ts'],
+    plugins: {
+      jsdoc: jsdocPlugin,
+    },
+    rules: {
+      'jsdoc/multiline-blocks': ['error', {
+        noMultilineBlocks: true,
+        allowMultipleTags: false,
+      }],
+      'jsdoc/lines-before-block': ['error', {
+        ignoreSingleLines: false,
+      }],
+    },
+  },
 );