Contributing

​

How to Contribute

​

Getting Started

1. Fork the repository on GitHub
2. Clone your fork locally:
   git clone https://github.com/YOUR_USERNAME/web-xp.git
   cd web-xp
   
3. Install dependencies:
   npm install
   
4. Create a branch for your changes:
   git checkout -b feature/your-feature-name
   
5. Make your changes and test them
6. Commit your changes with a clear message
7. Push to your fork:
   git push origin feature/your-feature-name
   
8. Open a Pull Request on GitHub

​

Code Style Guidelines

​

Prettier Configuration

{
  "trailingComma": "all",
  "singleQuote": true
}

• Use single quotes for strings
• Add trailing commas in objects and arrays
• Let Prettier handle formatting automatically

​

ESLint Configuration

• react-app - Standard React rules
• plugin:prettier/recommended - Prettier integration

​

Running the Linter

npm run lint

​

Code Formatting

1. Use an editor with Prettier integration (VS Code, WebStorm, etc.)
2. Enable format on save in your editor
3. Or manually format before committing

​

Coding Standards

​

React Component Guidelines

import React, { useState, useEffect } from 'react';

function MyComponent({ prop1, prop2 }) {
  const [state, setState] = useState(initialValue);
  
  useEffect(() => {
    // Effect logic
  }, [dependencies]);
  
  return (
    <div>{/* Component JSX */}</div>
  );
}

export default MyComponent;

​

Styled Components

import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10px;
`;

function MyComponent() {
  return <Container>{/* Content */}</Container>;
}

• Use PascalCase for styled component names
• Name components descriptively (e.g., Container, Header, Button)

​

File Organization

• Use .jsx extension for components
• One component per file
• Export default at the end

• Place new apps in src/WinXP/apps/
• Place reusable components in src/components/
• Place assets in src/assets/ organized by type

​

Import Order

1. React imports
2. Third-party library imports
3. Local component imports
4. Asset imports
5. Style imports

import React, { useState } from 'react';
import styled from 'styled-components';
import useMouse from 'react-use/lib/useMouse';

import { MyComponent } from 'components';
import { ADD_APP } from './constants/actions';

import iconImage from 'assets/windowsIcons/icon.png';

​

Path Aliases

// Good
import MyComponent from 'components/MyComponent';
import myIcon from 'assets/icons/myIcon.png';
import { useCustomHook } from 'hooks/useCustomHook';

// Avoid
import MyComponent from '../../components/MyComponent';
import myIcon from '../../../assets/icons/myIcon.png';

​

Pull Request Process

​

Before Submitting

1. Test your changes thoroughly:
   npm start
   
   • Test in multiple browsers if possible
   • Test on different screen sizes
   • Check console for errors
2. Run the linter:
   npm run lint
   
   Fix all errors and warnings
3. Build the project:
   npm run build
   
   Ensure the build succeeds
4. Review your changes:
   • Remove any console.log statements
   • Remove commented-out code
   • Check for accidental file inclusions

​

Pull Request Guidelines

• What does this PR do?
• Why is this change needed?
• How does it work?
• Are there any breaking changes?
• Include screenshots for UI changes

## Summary

Adds a new Calculator app to the desktop.

## Changes

- Created Calculator component in `src/WinXP/apps/Calculator/`
- Added Calculator to appSettings registry
- Added Calculator icon to desktop
- Implemented basic arithmetic operations

## Screenshots

[Screenshot of Calculator app]

## Testing

- Tested all arithmetic operations
- Tested keyboard input
- Tested window minimize/maximize/close
- Verified app appears in taskbar

• One feature or fix per PR
• Avoid mixing unrelated changes
• Split large changes into multiple PRs

• Address reviewer comments promptly
• Ask questions if feedback is unclear
• Update your PR based on suggestions

​

Testing Changes

​

Manual Testing Checklist

• Window operations:
  • Open, close, minimize, maximize
  • Drag and resize
  • Window focus and z-index
  • Taskbar button behavior
• Icon interactions:
  • Single click to select
  • Double click to open
  • Drag-to-select (rubber band)
• Start menu:
  • Menu opens and closes
  • Submenu navigation
  • App launches from menu
• Power operations:
  • Log off dialog
  • Shutdown dialog
  • Cancel buttons work
• Mobile compatibility:
  • Warning dialogs appear
  • Layout adapts to small screens

​

Browser Testing

• Chrome/Edge (Chromium)
• Firefox
• Safari (if on macOS)

​

Screen Size Testing

• Desktop (1920x1080)
• Laptop (1366x768)
• Tablet (768x1024)
• Mobile (375x667)

​

Reporting Bugs

1. Check if it’s already reported in GitHub Issues
2. Create a new issue with:
   • Clear description of the bug
   • Steps to reproduce
   • Expected behavior
   • Actual behavior
   • Screenshots if applicable
   • Browser and OS information

​

Feature Requests

1. Check existing issues to avoid duplicates
2. Create a new issue with:
   • Clear description of the feature
   • Why it would be useful
   • How it might work
   • Any design considerations

​

Questions?

• Open a GitHub Issue with the question label
• Check the existing documentation
• Review the source code for examples

​

License and Copyright

​

Code of Conduct

• Be welcoming to newcomers
• Provide helpful feedback
• Focus on the code, not the person
• Respect different opinions and approaches

​

Recognition