Contributing

<?php

declare( strict_types=1 );

namespace MediaWiki\Skins\Citizen\Components;

public function __construct(
    private string $label,
    private ?string $icon = null,
    private bool $enabled = true
) {
    // ...
}

public function getTemplateData(): array {
    // ...
}

/**
 * @param string[] $items
 */
public function setItems( array $items ): void {
    $this->items = $items;
}

// ✅ Correct
use MediaWiki\Title\Title;
use MediaWiki\Content\TextContent;

// ❌ Wrong - legacy shims will be removed
use Title;
use TextContent;

// ❌ Avoid
public function display( bool $showIcon ) { }

// ✅ Better
const WITH_ICON = true;
const WITHOUT_ICON = false;

public function display( bool $iconMode = self::WITHOUT_ICON ) { }

// ✅ Even better - use enums or constants
public function display( string $mode = 'default' ) {
    $mode = match ( $mode ) {
        'with-icon', 'icon-only' => $mode,
        default => 'default',
    };
}

/**
 * @covers \MediaWiki\Skins\Citizen\Components\CitizenComponentButton
 */
class CitizenComponentButtonTest extends \MediaWikiUnitTestCase {
    // Tests
}

// Imports
const utils = require( './utils.js' );
const mw = require( 'mediawiki' );

// Exports
module.exports = {
    init: function() {
        // Implementation
    }
};

import { describe, it, expect, beforeEach } from 'vitest';

describe( 'component', () => {
    beforeEach( () => {
        // Set up DOM with innerHTML
        document.body.innerHTML = `
            <div id="test">Content</div>
        `;
    } );

    it( 'should do something', () => {
        // Arrange
        const element = document.getElementById( 'test' );

        // Act
        performAction( element );

        // Assert
        expect( element.textContent ).toBe( 'Updated' );
    } );
} );

const { defineComponent, ref, computed } = require( 'vue' );

module.exports = exports = defineComponent( {
    name: 'ComponentName',
    props: {
        value: {
            type: String,
            required: true
        }
    },
    setup( props ) {
        const state = ref( null );
        
        const displayValue = computed( () => {
            return props.value.toUpperCase();
        } );

        return {
            state,
            displayValue
        };
    }
} );

// ✅ Preferred
.component {
    color: var(--color-primary);
    padding: var(--space-md);
    border-radius: var(--border-radius-base);
}

// ❌ Avoid (unless LESS features needed)
@import 'variables.less';

.component {
    color: @color-primary;
    padding: @space-md;
}

@import 'mixins.less';

.component {
    .responsive-layout();  // Using a mixin
    width: calc(100% - 20px);  // Calculation
}

use MediaWiki\Skins\Citizen\Components\CitizenComponentButton;

$button = new CitizenComponentButton(
    label: 'Click me',
    icon: 'cdx-icon-add',
    weight: 'primary',
    action: 'progressive'
);

{
  "ResourceModules": {
    "skins.citizen.scripts": {
      "packageFiles": [
        "skins.citizen.scripts/index.js",
        "skins.citizen.scripts/newFeature.js"
      ]
    }
  }
}

{
  "ResourceModuleSkinStyles": {
    "ext.extensionName": "skinStyles/ExtensionName/styles.less"
  }
}

{
  "config": {
    "CitizenEnableSearch": {
      "value": true,
      "description": "Enable enhanced search functionality"
    }
  }
}

$enabled = $this->getConfig()->get( 'CitizenEnableSearch' );

feat: add new feature
fix: resolve bug
refactor: improve code structure
chore: update dependencies
ci: modify GitHub Actions
test: add test coverage
docs: update documentation

git commit -m "feat: add command palette search"
git commit -m "fix(header): resolve sticky header overlap"
git commit -m "refactor(components): simplify button logic"
git commit -m "chore: bump dependencies"

it( 'should update state when clicked', () => {
    // Arrange
    const button = document.createElement( 'button' );
    const expectedValue = 'clicked';

    // Act
    button.click();

    // Assert
    expect( button.getAttribute( 'data-state' ) ).toBe( expectedValue );
} );

// ✅ Preferred
beforeEach( () => {
    document.body.innerHTML = `
        <div class="container">
            <button id="test-button">Click</button>
        </div>
    `;
} );

// ❌ Avoid
beforeEach( () => {
    const container = document.createElement( 'div' );
    container.className = 'container';
    const button = document.createElement( 'button' );
    button.id = 'test-button';
    button.textContent = 'Click';
    container.appendChild( button );
    document.body.appendChild( container );
} );

{
    "citizen-feature-name": "Feature Name",
    "citizen-feature-description": "Description of the feature"
}

{
    "citizen-feature-name": "Label for the feature name shown in the UI",
    "citizen-feature-description": "Description text explaining what the feature does"
}