@pnx-mixtape/mxds 0.1.0-rc.3 → 0.1.0-rc.5

package/docs/CodeQuality.md

@@ -0,0 +1,940 @@
+# Code Quality Guidelines
+
+This document provides a quick reference for code quality standards. For detailed guides, see the focused documentation below.
+
+## 📚 Focused Documentation
+
+- **[Component Architecture](./ComponentArchitecture.md)** - How to build Web Components and React components
+- **[Memory Management](./MemoryManagement.md)** - Prevent memory leaks (essential reading!)
+- **[Security Guidelines](./Security.md)** - XSS prevention, input validation, secure practices
+- **[CSS Guidelines](./CSSGuidelines.md)** - BEM, tokens, logical properties, custom media
+- **[Testing Guide](./Testing.md)** - Storybook, snapshots, accessibility testing
+- **[Contributing Guide](./Contributing.md)** - Git workflow, commit conventions
+- **[API Documentation](./API.md)** - Validators utility and helper functions
+- **[Troubleshooting](./Troubleshooting.md)** - Common issues and solutions
+
+## Table of Contents
+
+- [Quick Reference](#quick-reference)
+- [Memory Management](#memory-management)
+- [Security](#security)
+- [TypeScript](#typescript)
+- [Component Architecture](#component-architecture)
+- [CSS & Styling](#css--styling)
+- [Testing](#testing)
+- [Code Formatting](#code-formatting)
+- [Git & Commits](#git--commits)
+- [Validation](#validation)
+
+---
+
+## Quick Reference
+
+### Essential Rules
+
+1. ✅ **Always use AbortController** for event listeners → [Details](./MemoryManagement.md#event-listeners)
+2. ✅ **Always implement disconnectedCallback()** → [Details](./MemoryManagement.md#the-solution-store-as-properties)
+3. ✅ **Never use dangerouslySetInnerHTML or innerHTML** → [Details](./Security.md#xss-prevention)
+4. ✅ **Always validate input** with validators utility → [Details](./Security.md#input-validation)
+5. ✅ **Use BEM naming** for all CSS → [Details](./CSSGuidelines.md#bem-naming)
+6. ✅ **Use logical properties** not physical → [Details](./CSSGuidelines.md#logical-properties)
+7. ✅ **Import custom media** in every CSS file → [Details](./CSSGuidelines.md#custom-media)
+8. ✅ **Follow TypeScript types** strictly → [Details](#typescript)
+9. ✅ **Write Storybook stories** for all components → [Details](./Testing.md)
+10. ✅ **Use conventional commits** → [Details](#git--commits)
+
+---
+
+## Memory Management
+
+> 📖 **[Full Memory Management Guide](./MemoryManagement.md)**
+
+### Critical Rules
+
+1. ✅ **Use AbortController** for event listeners
+2. ✅ **Store observers** as properties (iO, rO, mO)
+3. ✅ **Store timer IDs** and clear them
+4. ✅ **Implement disconnectedCallback()** always
+5. ✅ **Return cleanup** from React useEffect
+
+### Quick Pattern
+
+```typescript
+class Component extends HTMLElement {
+  controller: AbortController
+  iO: IntersectionObserver
+  timeout: ReturnType<typeof setTimeout>
+
+  constructor() {
+    super()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback() {
+    // Setup with signal
+    const { signal } = this.controller
+    this.addEventListener('click', this.handleClick, { signal })
+
+    this.iO = new IntersectionObserver(...)
+    this.timeout = setTimeout(...)
+  }
+
+  disconnectedCallback() {
+    // Cleanup everything
+    this.controller.abort()
+    this.iO?.disconnect()
+    clearTimeout(this.timeout)
+  }
+}
+```
+
+**→ See [Memory Management Guide](./MemoryManagement.md) for complete details**
+
+---
+
+## Security
+
+> 📖 **[Full Security Guidelines](./Security.md)**
+
+### Critical Rules
+
+1. ❌ **Never** use `dangerouslySetInnerHTML`
+2. ❌ **Never** use `innerHTML`
+3. ✅ **Always** validate URLs with `validators.url()`
+4. ✅ **Always** validate numbers with `validators.integer()`
+5. ✅ **Always** wrap JSON.parse with `validators.json()`
+6. ✅ Use environment-specific logging
+7. ✅ Add `rel="noopener noreferrer"` to external `target="_blank"` links
+
+### Quick Patterns
+
+```typescript
+// XSS Prevention
+import { createElement } from "../Utility/utilities"
+const el = createElement(htmlString) // Safe, not innerHTML
+
+// URL Validation
+import { validators } from "../Utility/utilities"
+if (!validators.url(url)) {
+  url = window.location.href // Safe fallback
+}
+
+// Number Validation
+if (!validators.integer(page, 1, lastPage)) {
+  return // Reject invalid input
+}
+
+// JSON Validation
+if (!validators.json(stored)) {
+  return defaultValue
+}
+```
+
+**→ See [Security Guidelines](./Security.md) for OWASP Top 10 coverage and complete details**
+
+---
+
+## TypeScript
+
+### Type Safety Best Practices
+
+1. **Use strict TypeScript settings** (already configured in tsconfig.json)
+   - `isolatedModules: true`
+   - `skipLibCheck: true`
+   - `esModuleInterop: true`
+
+2. **Use explicit types for component props**
+
+   ```typescript
+   // ✅ Good
+   type CardProps = PropsWithChildren & {
+     reversed?: boolean
+     block?: boolean
+     as?: AsTypes
+     background?: BackgroundStyles
+     className?: string
+   }
+
+   const Card = ({ children, reversed = null, ... }: CardProps): JSX.Element => {
+     // ...
+   }
+   ```
+
+3. **Use proper return types for functions**
+
+   ```typescript
+   // ✅ Good
+   export const makeAnchor = (string: string, length: number = 20): string => {
+     // ...
+   }
+   ```
+
+4. **Use `@ts-expect-error` sparingly and document why**
+
+   ```typescript
+   // ✅ Good - Explains why
+   // @ts-expect-error inert is allowed but not in TS yet
+   element.inert = true
+   ```
+
+5. **Use oxlint disable comments when necessary** and document why
+
+   ```typescript
+   // For user-facing errors where logging is intentional
+   console.error("Could not copy URL") // eslint-disable-line no-console
+
+   // For React patterns that need exceptions
+   /* eslint-disable consistent-return, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+
+   // At file level for specific cases
+   /* eslint-disable no-console */
+   ```
+
+6. **Avoid `any` - use `unknown` or proper types**
+   ```typescript
+   // ⚠️ Acceptable for utility functions with generic types
+   validators: {
+     oneOf: <T>(value: T, allowedValues: T[]): boolean => {
+       return allowedValues.includes(value)
+     }
+   }
+   ```
+
+---
+
+## Component Architecture
+
+> 📖 **[Full Component Architecture Guide](./ComponentArchitecture.md)**
+
+### Web Components (Custom Elements)
+
+1. **Component structure**
+
+   ```typescript
+   export default class MyComponent extends HTMLElement {
+     // 1. Properties
+     internals_: ElementInternals
+     controller: AbortController
+
+     // 2. Constructor
+     constructor() {
+       super()
+       this.internals_ = this.attachInternals()
+       this.controller = new AbortController()
+     }
+
+     // 3. Lifecycle
+     connectedCallback(): void {
+       // Setup
+     }
+
+     disconnectedCallback(): void {
+       // Cleanup
+       this.controller.abort()
+     }
+
+     // 4. Handlers
+     handleClick = (): void => {
+       // ...
+     }
+
+     // 5. Getters
+     get trigger(): HTMLButtonElement {
+       const trigger = this.querySelector("button")
+       if (!trigger) {
+         throw new Error(`${this.localName} must contain a <button>`)
+       }
+       return trigger
+     }
+   }
+
+   // 6. Registration
+   if (!customElements.get("mx-component")) {
+     customElements.define("mx-component", MyComponent)
+   }
+
+   // 7. TypeScript declaration
+   declare global {
+     interface HTMLElementTagNameMap {
+       "mx-component": MyComponent
+     }
+   }
+   ```
+
+2. **Use getters for DOM queries** with validation
+
+   ```typescript
+   get details(): HTMLDetailsElement | null {
+     const details = this.querySelector("details")
+     if (!details) {
+       throw new Error(`${this.localName} must contain a <details> element.`)
+     }
+     return details
+   }
+   ```
+
+3. **Generate IDs when needed**
+   ```typescript
+   details.id = details.id || this.generatedId()
+   ```
+   > `generatedId()` is a private method on Web Component classes. See [API Documentation → generatedId()](./API.md#generatedid) for details.
+
+### React Components
+
+1. **Component structure**
+
+   ```typescript
+   import { JSX, PropsWithChildren } from "react"
+   import classNames from "classnames"
+
+   type ComponentProps = PropsWithChildren & {
+     // Props with defaults
+     reversed?: boolean
+     // Required props
+     className?: string
+   }
+
+   const Component = ({
+     children,
+     reversed = false,
+     className = null,
+   }: ComponentProps): JSX.Element => {
+     return (
+       <div className={classNames("mx-component", className, {
+         "mx-component--reversed": reversed,
+       })}>
+         {children}
+       </div>
+     )
+   }
+
+   export default Component
+   ```
+
+2. **Use proper React hooks**
+
+   ```typescript
+   // State
+   const [activePage, setActivePage] = useState(0)
+
+   // Refs
+   const polyfillsInstance = useRef<any>(null)
+
+   // Effects with cleanup
+   useEffect(() => {
+     const controller = new AbortController()
+     // Setup
+
+     return () => {
+       controller.abort() // Cleanup
+     }
+   }, [dependencies])
+
+   // Memoization
+   const value = useMemo(() => {
+     return expensiveCalculation(dep)
+   }, [dep])
+   ```
+
+3. **Use classNames for conditional classes**
+
+   ```typescript
+   import classNames from "classnames"
+
+   <div className={classNames("mx-card", className, {
+     "mx-card--reversed": reversed,
+     "mx-card--block": block,
+     [`mx-background--${background}`]: background,
+   })} />
+   ```
+
+---
+
+## CSS & Styling
+
+> 📖 **[Full CSS Guidelines](./CSSGuidelines.md)**
+
+> ⚙️ **[PostCSS Pipeline](./CSSGuidelines.md#postcss-pipeline)** — explains non-standard syntax: `token()`, `@media (--medium-up)`, and px→rem conversion
+
+### BEM Naming Convention
+
+Follow BEM (Block Element Modifier) strictly:
+
+```css
+/* ✅ Good - BEM structure */
+.mx-card {
+}
+.mx-card__header {
+}
+.mx-card__body {
+}
+.mx-card--reversed {
+}
+.mx-card--block {
+}
+
+/* ❌ Bad - Not BEM */
+.mx-card-header {
+}
+.mx-card.reversed {
+}
+```
+
+### CSS Organization
+
+1. **File structure**
+
+   ```
+   Component/
+     _component-partial.css    (internal styles)
+     component.css             (public API)
+     Component.tsx
+     component.twig
+   ```
+
+2. **Import custom media in every CSS file**
+
+   This is only required if you're not using something like [@csstools/postcss-global-data](https://www.npmjs.com/package/@csstools/postcss-global-data).
+
+   ```css
+   @import "../../_custom-media.css";
+
+   .mx-component {
+     /* Mobile first */
+     display: block;
+
+     /* Responsive */
+     @media (--medium-up) {
+       display: flex;
+     }
+   }
+   ```
+
+3. **Use CSS custom properties from constants.css**
+
+   Design tokens (in `src/tokens.js`) are used with PostCSS to generate `src/constants.css` which defines all CSS custom properties. Load `constants.css` once at the page level, then all components can use the custom properties:
+
+   ```css
+   /* Component CSS - NO import needed */
+   .mx-component {
+     color: var(--colour-foreground);
+     padding: var(--spacing-m);
+     font-size: var(--font-size-m);
+   }
+   ```
+
+   The custom properties are available because `constants.css` is loaded at the page level, preventing duplication.
+
+4. **Use logical properties**
+
+   ```css
+   /* ✅ Good - Logical properties */
+   padding-inline: 1rem;
+   margin-block-start: 1rem;
+   inset-inline-start: 0;
+
+   /* ❌ Avoid - Physical properties */
+   padding-left: 1rem;
+   margin-top: 1rem;
+   left: 0;
+   ```
+
+5. **Nest selectors properly**
+
+   ```css
+   /* ✅ Good - Use & for nesting */
+   .mx-component {
+     & button {
+     }
+   }
+
+   .mx-component--modifier {
+     & button {
+     }
+   }
+   .mx-component__element {
+     & button {
+     }
+   }
+
+   /* Stylelint enforces this pattern */
+   ```
+
+6. **Use cascade layers**
+   ```css
+   /* All component styles are wrapped in a layer */
+   @layer design-system.components {
+     .mx-component {
+     }
+   }
+   ```
+
+---
+
+## Validation
+
+> 📖 **[Full API Documentation](./API.md)**
+
+### Use the validators utility
+
+Always use the centralized `validators` utility for input validation:
+
+```typescript
+import { validators } from "../Utility/utilities"
+
+// URL validation
+if (!validators.url(url)) {
+  // Handle invalid URL
+}
+
+// Integer with bounds
+if (!validators.integer(page, 1, lastPage)) {
+  // Handle invalid page
+}
+
+// JSON validation
+if (!validators.json(jsonString)) {
+  return fallbackValue
+}
+
+// Email validation
+if (!validators.email(email)) {
+  // Handle invalid email
+}
+
+// Non-empty string
+if (!validators.notEmpty(input)) {
+  return ""
+}
+```
+
+### Available validators:
+
+- `url(value, allowedProtocols)` - URL with protocol checking
+- `email(value)` - Email format
+- `number(value, min, max)` - Number with bounds
+- `integer(value, min, max)` - Integer with bounds
+- `string(value, minLength, maxLength)` - String with length
+- `notEmpty(value)` - Non-empty after trim
+- `pattern(value, regex)` - Regex matching
+- `oneOf(value, allowedValues)` - Enum validation
+- `array(value, minLength, maxLength)` - Array validation
+- `json(value)` - JSON string validation
+- `date(value, minDate, maxDate)` - Date validation
+- `hexColor(value)` - Hex color validation
+
+---
+
+## Testing
+
+> 📖 **[Full Testing Guide](./Testing.md)**
+
+### Storybook Stories
+
+1. **Create stories for all components**
+
+   ```typescript
+   import type { Meta, StoryObj } from "@storybook/html"
+
+   const meta: Meta = {
+     title: "Component/MyComponent",
+     tags: ["autodocs"],
+     render: args => {
+       return `<mx-component>${args.content}</mx-component>`
+     },
+   }
+
+   export default meta
+   type Story = StoryObj
+
+   export const Default: Story = {
+     args: {
+       content: "Default content",
+     },
+   }
+   ```
+
+2. **Use snapshots for visual regression**
+   - Snapshots are automatically generated from stories
+   - Located in `__snapshots__/` directories
+   - Run `pnpm test` to verify
+
+3. **Tag stories appropriately**
+   ```typescript
+   export const NoSnapshotExample: Story = {
+     tags: ["no-snapshot"],  // Skip snapshot testing
+     args: { ... }
+   }
+   ```
+
+### Testing Commands
+
+```bash
+# Run all tests
+pnpm test
+
+# Run HTML component tests
+pnpm test-html
+
+# Run React component tests
+pnpm test-react
+
+# Lint everything
+pnpm lint
+
+# Fix linting issues
+pnpm format
+```
+
+---
+
+## Code Formatting
+
+### oxfmt Configuration
+
+oxfmt is configured via `.oxfmtrc.json`:
+
+- **Print width**: 100 characters
+- **Arrow parens**: avoid
+- **Semi**: false (no semicolons)
+- **Sort package.json**: false
+- **Ignore patterns**: node_modules, package files, storybook output, markdown docs
+
+**Commands:**
+
+```bash
+# Format all files
+pnpm format
+
+# Check formatting without making changes
+pnpm lint-format
+```
+
+> **Why oxfmt?** oxfmt is a Rust-based formatter that's significantly faster than Prettier while maintaining compatibility with Prettier configurations.
+
+### Oxlint
+
+Using `oxlint` for fast, performant linting (configured in `.oxlintrc.json`):
+
+**Configuration highlights:**
+
+- **Plugins**: unicorn, typescript, oxc, import, react, react-perf, jsx-a11y, jest, jsdoc
+- **Categories**: correctness (error), suspicious (warn), perf (warn)
+- **Globals defined**: Drupal, once, Mixtape
+- **Key rules**:
+  - `no-console: error` (use `// eslint-disable-line no-console` for exceptions)
+  - `import/no-unused-imports: error`
+  - `consistent-return: warn`
+  - `no-unused-vars: warn`
+
+**Globals:**
+
+These are injected by the host environment and declared in `.oxlintrc.json`. See [API Documentation → Global Variables](./API.md#global-variables) for full details.
+
+| Global | Source | Purpose |
+|---|---|---|
+| `Drupal` | Drupal CMS | CMS integration — use `loadOnReady()` rather than accessing directly |
+| `once` / `window.once` | [`@drupal/once`](https://www.npmjs.com/package/@drupal/once) (standalone or Drupal core) | DOM initialisation guard — assign to `window.once` in non-Drupal projects |
+| `Mixtape` | Internal CMS layer | App-level config and feature flags |
+
+**Commands:**
+
+```bash
+# Lint TypeScript files
+pnpm lint-js
+
+# Fix auto-fixable issues
+pnpm fix-js
+```
+
+**React/JSX overrides:**
+
+- `consistent-return: off` (React components don't always need explicit returns)
+- `react/react-in-jsx-scope: off` (React 17+ JSX transform)
+- `jsx-a11y/anchor-is-valid: off` (design system uses custom Link components)
+
+### Stylelint
+
+Enforces:
+
+- BEM naming convention
+- Logical properties preferred
+- Standard CSS rules
+- No descending specificity issues (disabled for flexibility)
+
+```bash
+# Lint CSS
+pnpm lint-css
+
+# Fix CSS issues
+pnpm fix-css
+```
+
+### EditorConfig
+
+Use consistent settings:
+
+- UTF-8 encoding
+- LF line endings
+- 2 spaces for indentation
+- Trim trailing whitespace
+
+---
+
+## Git & Commits
+
+> 📖 **[Full Contributing Guide](./Contributing.md)**
+
+### Conventional Commits
+
+Use Commitizen for standardized commit messages:
+
+```bash
+pnpm commit
+```
+
+Commit types:
+
+- `feat`: New feature
+- `fix`: Bug fix
+- `docs`: Documentation only
+- `style`: Code style (formatting, missing semicolons, etc)
+- `refactor`: Code change that neither fixes a bug nor adds a feature
+- `perf`: Performance improvement
+- `test`: Adding or updating tests
+- `chore`: Maintenance tasks, dependencies, etc
+
+### Example Commits
+
+```
+feat: add validation utility for form inputs
+fix: prevent memory leak in Carousel component
+docs: update CodeQuality.md with validation patterns
+refactor: use validators utility in Pagination
+perf: optimize image loading with intersection observer
+test: add snapshot tests for Button variants
+chore: update dependencies to latest versions
+```
+
+---
+
+## File Organization
+
+### Component Structure
+
+```
+Component/
+  README.md                   # Component documentation (optional)
+  Component.tsx               # React component
+  Component.stories.tsx       # React stories
+  component.twig              # Twig template
+  Component.stories.ts        # Twig stories
+  component.css               # Public styles
+  _component-partial.css      # Internal styles
+  Elements/                   # Web Components
+    Component.ts
+  Components/                 # React Sub-components
+    ComponentPart.tsx
+  __snapshots__/             # Snapshot regression tests
+    Component.stories.ts.snap
+```
+
+### Import Order
+
+1. External dependencies
+2. Internal utilities
+3. Types/enums
+4. Components
+5. Styles (in CSS/Twig files)
+
+```typescript
+// 1. External
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+// 2. Internal utilities
+import { validators } from "../../Utility/utilities"
+
+// 3. Types/enums
+import { AsTypes } from "@pnx-mixtape/ids-shape"
+import { BackgroundStyles } from "../../enums"
+
+// 4. Components
+import Button from "../Button/Button"
+
+// Component code
+```
+
+---
+
+## Performance
+
+> 📖 **[Full Component Architecture Guide - Performance](./ComponentArchitecture.md)**
+
+1. **Lazy load components when appropriate**
+   - Use `IntersectionLoader` for below-fold content
+   - Use `BreakpointLoader` for responsive loading
+
+2. **Use memoization for expensive calculations**
+
+   ```typescript
+   const value = useMemo(() => expensiveCalculation(dep), [dep])
+   ```
+
+3. **Debounce/throttle frequent events**
+
+   ```typescript
+   clearTimeout(this.debounced)
+   this.debounced = setTimeout(this.handler, 200)
+   ```
+
+4. **Use CSS containment where appropriate**
+   ```css
+   .mx-component {
+     contain: layout style paint;
+   }
+   ```
+
+---
+
+## Accessibility
+
+> 📖 **[Full Testing Guide - Accessibility](./Testing.md#accessibility-testing)**
+
+1. **Always include ARIA labels**
+
+   ```html
+   <nav aria-label="Primary navigation">
+   <button aria-expanded="false" aria-controls="menu">
+   ```
+
+2. **Use semantic HTML**
+
+   ```html
+   <!-- ✅ Good -->
+   <nav>, <main>, <article>, <section>, <aside>
+   
+   <!-- ❌ Avoid -->
+   <div class="nav">, <div class="main">
+   ```
+
+3. **Support keyboard navigation**
+   - Tab order must be logical
+   - Escape key closes modals/menus
+   - Arrow keys navigate menus
+
+4. **Include skip links**
+
+   ```html
+   <a href="#main-content" class="sr-only">Skip to main content</a>
+   ```
+
+5. **Test with Storybook a11y addon**
+   - Addon runs automatically
+   - Check for WCAG violations
+
+---
+
+## Documentation
+
+1. **Add JSDoc to public APIs**
+
+   ```typescript
+   /**
+    * Validates a URL string and optionally checks protocol.
+    * @param value - URL string to validate
+    * @param allowedProtocols - Array of allowed protocols
+    * @returns true if valid URL with allowed protocol
+    * @example
+    * validators.url('https://example.com') // true
+    */
+   url: (value: string, allowedProtocols: string[] = ["http:", "https:"]): boolean => {
+   ```
+
+2. **Create README files for complex components**
+   - Usage examples
+   - Props documentation
+   - Common patterns
+
+3. **Use MDX for Storybook documentation**
+
+   ```mdx
+   import { Meta } from "@storybook/blocks"
+
+   <Meta title="Component/MyComponent/Docs" />
+
+   # MyComponent
+
+   Description and usage guide...
+   ```
+
+---
+
+## Common Patterns
+
+### Singleton Pattern (CookieCompliance)
+
+```typescript
+static create({ context = null } = {}): void {
+  const [el] = window.once("cookie-compliance", "#cookie-compliance", context)
+  if (el) {
+    const instance = new CookieCompliance(el)
+    instance.init()
+    window.CookieCompliance = instance  // Global reference
+  }
+}
+```
+
+> `window.once` is a DOM initialisation guard from [`@drupal/once`](https://www.npmjs.com/package/@drupal/once) — works standalone (assign to `window.once` at your entry point) or automatically inside Drupal. See [API Documentation → Global Variables](./API.md#global-variables) for full details.
+
+### Disclosure Pattern (Accordion, Tabs)
+
+```typescript
+import { DisclosureWidget } from "../../../Utility/utilities"
+
+this.widget = new DisclosureWidget(this.trigger, this.target)
+this.widget.init()
+```
+
+### Keyboard Navigation Pattern
+
+```typescript
+import { Keyboard } from "../../../Utility/utilities"
+
+const keyboard = new Keyboard()
+keyboard.attachMenu(container, items)
+keyboard.attachEventListeners(signal)
+```
+
+---
+
+## Checklist for New Components
+
+- [ ] TypeScript types defined
+- [ ] Props have defaults where appropriate
+- [ ] Memory cleanup implemented (disconnectedCallback/useEffect cleanup)
+- [ ] Input validation using `validators` utility
+- [ ] Error handling with try-catch
+- [ ] Environment-specific logging
+- [ ] BEM class names
+- [ ] Responsive styles with custom media
+- [ ] Logical CSS properties
+- [ ] ARIA labels and roles
+- [ ] Keyboard navigation support
+- [ ] Storybook stories created
+- [ ] README documentation
+- [ ] Snapshot tests passing
+- [ ] No TypeScript errors
+- [ ] Linting passes (`pnpm lint`)
+- [ ] Manual testing in Storybook
+
+---
+
+## Resources
+
+- [Project README](../README.md)
+- [Storybook](https://mxds.pnx.io)
+- [Conventional Commits](https://www.conventionalcommits.org/)
+- [BEM Methodology](https://getbem.com/)
+- [MDN Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+- [React Documentation](https://react.dev/)