diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..3a8b098 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,465 @@ +# Contributing to Kleo Network Landing Page + +First off, thank you for considering contributing to Kleo Network! It's people like you that make Kleo Network such a great tool. + +## Table of Contents + +- [Code of Conduct](#code-of-conduct) +- [Getting Started](#getting-started) +- [How Can I Contribute?](#how-can-i-contribute) +- [Development Setup](#development-setup) +- [Coding Standards](#coding-standards) +- [Commit Guidelines](#commit-guidelines) +- [Pull Request Process](#pull-request-process) +- [Testing](#testing) +- [Documentation](#documentation) +- [Community](#community) + +## Code of Conduct + +This project and everyone participating in it is governed by our [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [conduct@kleo.network](mailto:conduct@kleo.network). + +## Getting Started + +### Prerequisites + +Before you begin, ensure you have the following installed: + +- **Node.js** (v18.0.0 or higher) +- **npm** (v9.0.0 or higher) or **yarn** (v1.22.0 or higher) +- **Git** (v2.30.0 or higher) + +### Fork and Clone + +1. Fork the repository on GitHub +2. Clone your fork locally: + +```bash +git clone https://github.com/YOUR_USERNAME/landing.git +cd landing +``` + +3. Add the upstream repository: + +```bash +git remote add upstream https://github.com/solidworkssa/landing.git +``` + +4. Create a new branch for your feature or fix: + +```bash +git checkout -b feature/your-feature-name +``` + +## How Can I Contribute? + +### Reporting Bugs + +Before creating bug reports, please check existing issues to avoid duplicates. When creating a bug report, include as many details as possible: + +- **Use a clear and descriptive title** +- **Describe the exact steps to reproduce the problem** +- **Provide specific examples** (code snippets, screenshots, etc.) +- **Describe the behavior you observed** and what you expected +- **Include your environment details** (OS, Node version, browser, etc.) + +**Use the bug report template** when creating a new issue. + +### Suggesting Enhancements + +Enhancement suggestions are tracked as GitHub issues. When creating an enhancement suggestion: + +- **Use a clear and descriptive title** +- **Provide a detailed description** of the suggested enhancement +- **Explain why this enhancement would be useful** +- **List any alternatives you've considered** + +**Use the feature request template** when creating a new issue. + +### Your First Code Contribution + +Unsure where to begin? Look for issues labeled: + +- `good first issue` - Simple issues perfect for newcomers +- `help wanted` - Issues where we need community help +- `documentation` - Documentation improvements + +### Pull Requests + +We actively welcome your pull requests! Here's how to contribute code: + +1. Fork the repo and create your branch from `main` +2. Make your changes following our coding standards +3. Add tests if you've added code that should be tested +4. Ensure the test suite passes +5. Make sure your code lints +6. Update documentation as needed +7. Submit your pull request! + +## Development Setup + +### Installation + +1. Install dependencies: + +```bash +npm install +``` + +2. Create environment file: + +```bash +cp .env.example .env.local +``` + +3. Start the development server: + +```bash +npm run dev +``` + +The application will be available at [http://localhost:3000](http://localhost:3000). + +### Available Scripts + +```bash +# Development +npm run dev # Start development server +npm run build # Build for production +npm run start # Start production server + +# Code Quality +npm run lint # Run ESLint +npm run lint:fix # Fix ESLint errors automatically +npm run format # Format code with Prettier +npm run type-check # Run TypeScript type checking + +# Testing +npm test # Run tests +npm run test:watch # Run tests in watch mode +npm run test:coverage # Run tests with coverage report +``` + +## Coding Standards + +### TypeScript + +- Use TypeScript for all new files +- Define proper types/interfaces (avoid `any`) +- Use meaningful variable and function names +- Add JSDoc comments for complex functions + +**Example:** + +```typescript +/** + * Formats a price value with currency symbol + * @param value - The numeric value to format + * @param currency - The currency code (default: 'USD') + * @returns Formatted price string + */ +export function formatPrice(value: number, currency: string = 'USD'): string { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency, + }).format(value) +} +``` + +### React Components + +- Use functional components with hooks +- Keep components small and focused (single responsibility) +- Extract reusable logic into custom hooks +- Use proper prop types with TypeScript interfaces + +**Example:** + +```tsx +interface ButtonProps { + children: React.ReactNode + onClick?: () => void + variant?: 'primary' | 'secondary' + disabled?: boolean +} + +export default function Button({ + children, + onClick, + variant = 'primary', + disabled = false +}: ButtonProps) { + return ( + + ) +} +``` + +### Styling + +- Use Tailwind CSS utility classes +- Follow the existing design system +- Ensure responsive design (mobile-first) +- Test in multiple browsers + +### File Naming + +- Components: `PascalCase.tsx` (e.g., `Button.tsx`) +- Utilities: `camelCase.ts` (e.g., `formatPrice.ts`) +- Hooks: `use*.ts` (e.g., `useLocalStorage.ts`) +- Types: `PascalCase.ts` (e.g., `User.ts`) + +### Code Organization + +``` +src/ +├── app/ # Next.js app directory +├── components/ # React components +│ ├── ui/ # Reusable UI components +│ └── ... # Feature-specific components +├── lib/ # Utility functions +├── hooks/ # Custom React hooks +├── types/ # TypeScript type definitions +└── constants/ # Constants and configuration +``` + +## Commit Guidelines + +We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification. + +### Commit Message Format + +``` +(): + + + +