MM-68397 Add shared package to STYLE_GUIDE.md (#36425)

* MM-68397 Add shared package to STYLE_GUIDE.md and CLAUDE.OPTIONAL.md

* Add webapp/AGENTS.md

webapp/AGENTS.md

@@ -0,0 +1,22 @@
+# AGENTS.md
+
+Guidance for coding agents working inside `webapp/`.
+
+## Coding Standards
+
+Follow `webapp/STYLE_GUIDE.md` for canonical style, accessibility, and testing standards.
+
+## Shared Components
+
+Prefer the shared components from `@mattermost/shared` over hand-rolled equivalents:
+
+- **`Button`** — use for text-based button UI instead of building bespoke `<button>` elements or styling.
+  ```typescript
+  import {Button} from '@mattermost/shared/components/button';
+  ```
+- **`WithTooltip`** — use for tooltips instead of wiring up Floating UI or other tooltip primitives directly.
+  ```typescript
+  import {WithTooltip} from '@mattermost/shared/components/tooltip';
+  ```
+
+Always import via the full package name (`@mattermost/shared/...`), never via relative paths into `platform/shared/`.

webapp/CLAUDE.OPTIONAL.md

@@ -42,6 +42,7 @@ This repository uses npm workspaces:
 - **@mattermost/types** (`platform/types/`): TypeScript type definitions
 - **@mattermost/client** (`platform/client/`): REST and WebSocket client for the Mattermost API
 - **@mattermost/components** (`platform/components/`): Shared React components
+- **@mattermost/shared** (`platform/shared/`): Cross-product components and utilities used by the web app and plugins (e.g. `Button`, `WithTooltip`). Prefer these over hand-rolled equivalents.
 - **@mattermost/eslint-plugin** (`platform/eslint-plugin/`): Custom ESLint rules
 
 ### Importing Packages
@@ -51,6 +52,8 @@ Always import packages using their full name, never relative paths:
 // Correct
 import {Client4} from '@mattermost/client';
 import {UserProfile} from '@mattermost/types/users';
+import {Button} from '@mattermost/shared/components/button';
+import {WithTooltip} from '@mattermost/shared/components/tooltip';
 import {getUser} from 'mattermost-redux/selectors/entities/users';
 
 // Incorrect
@@ -63,7 +66,8 @@ import Client4 from '../platform/client/src/client4.ts';
 - **Redux 5.0**: State management
 - **React Router 5.3**: Client-side routing
 - **React Intl**: Internationalization
-- **Floating UI**: Tooltips and popovers (prefer `WithTooltip` component)
+- **Floating UI**: Tooltips and popovers (prefer `WithTooltip` from `@mattermost/shared/components/tooltip`)
+- **@mattermost/shared**: Shared components and utilities (`Button`, `WithTooltip`, etc.) — prefer these over rolling your own
 - **@mattermost/compass-icons**: Icon library (prefer over font-awesome)
 - **Monaco Editor**: Code editor integration
 - **Styled Components**: Limited use (for MUI and some legacy components)
@@ -92,7 +96,7 @@ import Client4 from '../platform/client/src/client4.ts';
 
 - Channels workspace: `channels/CLAUDE.md`, `channels/src/CLAUDE.md`.
 - Channels source subfolders: `components/`, `actions/`, `selectors/`, `reducers/`, `store/`, `sass/`, `i18n/`, `tests/`, `utils/`, `types/`, `plugins/`, `packages/mattermost-redux/`.
-- Platform packages: `platform/CLAUDE.md`, plus `platform/client/`, `platform/components/`, `platform/types/`.
+- Platform packages: `platform/CLAUDE.md`, plus `platform/client/`, `platform/components/`, `platform/shared/`, `platform/types/`.
 - Tooling: `scripts/CLAUDE.md`.
 
 Use these nested guides for focused, actionable instructions when working within each directory.

webapp/STYLE_GUIDE.md

@@ -100,7 +100,10 @@ The following guidelines should be applied to both new and existing code. Howeve
 
 ### Dependencies & Packages
 
-- **React Bootstrap**: Avoid using React Bootstrap directly. Use `GenericModal` from `@mattermost/components` instead of React Bootstrap's `Modal`.
+- **React Bootstrap**: Avoid using React Bootstrap directly.
+    - **Modals**: Use `GenericModal` from `@mattermost/components` instead of React Bootstrap's `Modal`.
+    - **Buttons**: Use `Button` from `@mattermost/shared` instead of React Bootstrap's `Button` or raw Bootstrap like `<button class="btn btn-primary">`.
+    - **Tooltips**: Use `WithTooltip` from `@mattermost/shared` instead of React Bootstrap's `OverlayTrigger` and/or `Tooltip`.
 - **MUI**: Consult with the team before using MUI. If it is used, wrap the usage in another component to avoid leaking implementation details.
 - **Popovers**: Use `WithTooltip` for simple tooltips and Floating UI for more advanced usage.
 - **Icons**: Prefer using icon components from `@mattermost/compass-icons` for icons.

webapp/channels/src/components/CLAUDE.OPTIONAL.md

@@ -55,7 +55,7 @@ const HeavyComponent = makeAsyncComponent(
 
 - **Semantic HTML**: Use `<button>`, `<input>`, etc. over `<div>` with roles.
 - **Keyboard Support**: All interactive elements must be keyboard accessible.
-- **Helpers**: Reuse primitives like `GenericModal`, `Menu`, `WithTooltip`, `A11yController` helpers.
+- **Helpers**: Reuse primitives like `GenericModal` (from `@mattermost/components`), `Menu`, `Button` and `WithTooltip` (from `@mattermost/shared`), and `A11yController` helpers. Don't hand-roll buttons or tooltips when these primitives fit.
 - **Focus**: Use `a11y--focused` class for keyboard focus indicators.
 - **Images**: Alt text required for information images. Empty `alt=""` for decorative.
 

webapp/platform/CLAUDE.OPTIONAL.md

@@ -11,6 +11,7 @@
 | `@mattermost/types` | `types/` | TypeScript type definitions |
 | `@mattermost/client` | `client/` | REST and WebSocket API client |
 | `@mattermost/components` | `components/` | Shared React components |
+| `@mattermost/shared` | `shared/` | Cross-product components and utilities for the web app and plugins (e.g. `Button`, `WithTooltip`). Prefer these over rolling your own |
 | `@mattermost/eslint-plugin` | `eslint-plugin/` | Custom ESLint rules |
 
 ## Workspace Basics