Contributing Guide - FabricJS Design Tool

🚀 Quick Start

1. Fork & Clone

# Fork the repository on GitHub, then clone your fork
git clone https://github.com/YOUR_USERNAME/fabricjs-design-tool.git
cd fabricjs-design-tool

2. Install Dependencies

# Install all dependencies
npm install

# Install global dependencies if needed
npm install -g typescript rollup

3. Start Development

# Start development server
npm run dev

# Build and watch for changes
npm run build:watch

🛠️ Development Setup

Project Structure

fabricjs-design-tool/
├── src/                  # Source code
│   ├── components/       # React components
│   ├── hooks/           # Custom React hooks
│   ├── utils/           # Utility functions
│   └── types/           # TypeScript type definitions
├── lib/                 # Built library files
├── docs/                # Documentation
├── examples/            # Example implementations
├── tests/               # Test files
└── scripts/             # Build and deployment scripts

Available Commands

Development

npm run dev - Start dev server

npm run build:watch - Watch and build

Building

npm run build - Build for production

npm run build:lib - Build library only

Testing

npm test - Run tests

npm run test:watch - Watch tests

Quality

npm run lint - Lint code

npm run type-check - Check types

📋 Contribution Guidelines

🎯 What We're Looking For

• Bug fixes: Help us squash bugs and improve stability
• New features: Add useful functionality that benefits the community
• Documentation: Improve docs, add examples, fix typos
• Performance improvements: Make the library faster and more efficient
• TypeScript improvements: Better type definitions and safety

📝 Code Style

✅ Use TypeScript for all new code
✅ Follow existing naming conventions
✅ Add JSDoc comments for public APIs
✅ Keep functions small and focused
✅ Write tests for new functionality
✅ Use meaningful commit messages

🔄 Pull Request Process

Step-by-Step Process

1

Create a Branch

Create a feature branch from main

git checkout -b feature/your-feature-name

2

Make Changes

Implement your feature or fix

3

Test Your Changes

Run tests and ensure everything works

npm test && npm run lint && npm run type-check

4

Commit & Push

Commit with a clear message and push to your fork

git commit -m "feat: add new shape creation feature"
git push origin feature/your-feature-name

5

Create Pull Request

Open a PR with a clear description of your changes

📝 PR Template

## Description
Brief description of what this PR does

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Breaking change
- [ ] Documentation update

## Testing
- [ ] Tests pass
- [ ] Added new tests
- [ ] Manual testing completed

## Checklist
- [ ] Code follows style guidelines
- [ ] Self-review completed
- [ ] Documentation updated
- [ ] No console errors

💡 Development Tips

🔧 Debugging

• Use browser dev tools for canvas debugging
• Add console.log statements in development
• Use Fabric.js dev build for better error messages
• Test in multiple browsers

⚡ Performance

• Profile canvas operations with dev tools
• Test with many objects on canvas
• Consider object caching for static shapes
• Avoid unnecessary re-renders

📱 Testing

• Test on different screen sizes
• Verify touch interactions on mobile
• Check accessibility with screen readers
• Test keyboard navigation

📚 Documentation

• Update API docs for new features
• Add code examples
• Update TypeScript definitions
• Keep changelog updated

🤝 Contributing Guide