Skip to content

Commit 1790022

Browse files
author
Ahmed Mahmoud
committed
docs: add repository health files
- Add issue templates for bugs and feature requests - Add comprehensive contributing guidelines - Add security policy with vulnerability disclosure process - Set up proper community standards for open source project
1 parent 430513d commit 1790022

File tree

5 files changed

+394
-4
lines changed

5 files changed

+394
-4
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: '[BUG] '
5+
labels: bug
6+
assignees: dev-ahmedmahmoud
7+
8+
---
9+
10+
**Describe the bug**
11+
A clear and concise description of what the bug is.
12+
13+
**To Reproduce**
14+
Steps to reproduce the behavior:
15+
1. Go to '...'
16+
2. Click on '....'
17+
3. Scroll down to '....'
18+
4. See error
19+
20+
**Expected behavior**
21+
A clear and concise description of what you expected to happen.
22+
23+
**Screenshots**
24+
If applicable, add screenshots to help explain your problem.
25+
26+
**Environment (please complete the following information):**
27+
- React version: [e.g. 18.2.0]
28+
- Package version: [e.g. 5.0.0]
29+
- Browser: [e.g. chrome, safari]
30+
- OS: [e.g. iOS, Windows, macOS]
31+
32+
**Code Example**
33+
```typescript
34+
// Minimal code example that demonstrates the issue
35+
import { Scrollbars } from '@dev-ahmed-mahmoud/react-custom-scrollbars'
36+
37+
function MyComponent() {
38+
return (
39+
<Scrollbars>
40+
{/* Your code here */}
41+
</Scrollbars>
42+
)
43+
}
44+
```
45+
46+
**Additional context**
47+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/feature_request.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: '[FEATURE] '
5+
labels: enhancement
6+
assignees: dev-ahmedmahmoud
7+
8+
---
9+
10+
**Is your feature request related to a problem? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Use Case**
20+
Describe the specific use case or scenario where this feature would be helpful.
21+
22+
**TypeScript Support**
23+
If applicable, describe how this feature should be typed in TypeScript.
24+
25+
**Additional context**
26+
Add any other context or screenshots about the feature request here.

‎CONTRIBUTING.md‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
# Contributing to @dev-ahmed-mahmoud/react-custom-scrollbars
2+
3+
Thank you for your interest in contributing! This project is a modern TypeScript/React 19 implementation of the original react-custom-scrollbars by [Malte Wessel](https://github.com/malte-wessel).
4+
5+
## 📋 Table of Contents
6+
7+
- [Code of Conduct](#code-of-conduct)
8+
- [How Can I Contribute?](#how-can-i-contribute)
9+
- [Development Setup](#development-setup)
10+
- [Pull Request Process](#pull-request-process)
11+
- [Coding Standards](#coding-standards)
12+
13+
## Code of Conduct
14+
15+
This project follows a [Code of Conduct](CODE_OF_CONDUCT.md) that we expect all contributors to adhere to.
16+
17+
## How Can I Contribute?
18+
19+
### 🐛 Reporting Bugs
20+
- Use the [bug report template](.github/ISSUE_TEMPLATE/bug_report.yml)
21+
- Include a clear description and reproduction steps
22+
- Provide environment details (React/Node.js versions, browser, OS)
23+
- Include a minimal code example demonstrating the issue
24+
25+
### 💡 Suggesting Features
26+
- Use the [feature request template](.github/ISSUE_TEMPLATE/feature_request.yml)
27+
- Explain the use case and expected behavior
28+
- Consider TypeScript implications
29+
30+
### 🔧 Contributing Code
31+
- Fix bugs or implement new features
32+
- Improve documentation
33+
- Add tests for new functionality
34+
- Optimize performance
35+
36+
## Development Setup
37+
38+
### Prerequisites
39+
- **Node.js**: 20.0.0 or higher
40+
- **npm**: Latest version
41+
- **TypeScript**: 5.8+ knowledge helpful
42+
43+
### Setup Instructions
44+
45+
1. **Fork and Clone**
46+
```bash
47+
git clone https://github.com/YOUR-USERNAME/react-custom-scrollbars.git
48+
cd react-custom-scrollbars
49+
```
50+
51+
2. **Install Dependencies**
52+
```bash
53+
npm install
54+
```
55+
56+
3. **Development Commands**
57+
```bash
58+
# Run tests
59+
npm test
60+
61+
# Run tests with coverage
62+
npm run test:coverage
63+
64+
# Type checking
65+
npm run typecheck
66+
67+
# Linting
68+
npm run lint
69+
npm run lint:fix
70+
71+
# Build
72+
npm run build
73+
74+
# Run all checks
75+
npm run prepublishOnly
76+
```
77+
78+
## Pull Request Process
79+
80+
### 1. Create a Branch
81+
```bash
82+
git checkout -b feature/your-feature-name
83+
# or
84+
git checkout -b fix/your-bug-fix
85+
```
86+
87+
### 2. Make Your Changes
88+
- Write clear, concise commit messages following [Conventional Commits](https://conventionalcommits.org/)
89+
- Add tests for new functionality
90+
- Update documentation if needed
91+
- Ensure TypeScript types are accurate
92+
93+
### 3. Test Your Changes
94+
```bash
95+
# Run all checks
96+
npm run prepublishOnly
97+
98+
# Ensure all tests pass
99+
npm test
100+
101+
# Check TypeScript compilation
102+
npm run typecheck
103+
104+
# Verify linting
105+
npm run lint
106+
```
107+
108+
### 4. Commit and Push
109+
```bash
110+
git commit -m "feat: add new scrollbar customization option"
111+
git push origin feature/your-feature-name
112+
```
113+
114+
### 5. Create Pull Request
115+
- Use a clear, descriptive title
116+
- Reference any related issues
117+
- Include a detailed description of changes
118+
- Add screenshots for visual changes
119+
120+
## Coding Standards
121+
122+
### TypeScript Guidelines
123+
```typescript
124+
// ✅ Good: Proper typing
125+
interface MyComponentProps {
126+
children: ReactNode
127+
className?: string
128+
}
129+
130+
// ✅ Good: Use meaningful names
131+
const handleScrollStart = useCallback(() => {
132+
// implementation
133+
}, [])
134+
135+
// ❌ Avoid: Any types
136+
const handleEvent = (event: any) => { }
137+
```
138+
139+
### React Patterns
140+
```typescript
141+
// ✅ Good: Use hooks appropriately
142+
const MyComponent = forwardRef<ScrollbarsRef, MyComponentProps>((props, ref) => {
143+
const scrollbarsRef = useRef<ScrollbarsRef>(null)
144+
145+
useImperativeHandle(ref, () => ({
146+
scrollToTop: () => scrollbarsRef.current?.scrollToTop(),
147+
}))
148+
149+
return <Scrollbars ref={scrollbarsRef} {...props} />
150+
})
151+
```
152+
153+
### Testing Requirements
154+
- **Unit Tests**: For all new features and bug fixes
155+
- **TypeScript Tests**: Ensure types are properly tested
156+
- **Integration Tests**: For component interactions
157+
158+
```typescript
159+
// Example test
160+
describe('Scrollbars', () => {
161+
it('should call onScrollStart when scrolling begins', async () => {
162+
const onScrollStart = vi.fn()
163+
164+
render(
165+
<Scrollbars onScrollStart={onScrollStart}>
166+
<div>Content</div>
167+
</Scrollbars>
168+
)
169+
170+
// Test implementation
171+
})
172+
})
173+
```
174+
175+
## 📚 Documentation
176+
177+
### Code Documentation
178+
- Use TypeScript for self-documenting code
179+
- Add JSDoc comments for complex functions
180+
- Include examples in documentation
181+
182+
### README Updates
183+
- Update README.md for new features
184+
- Add TypeScript examples
185+
- Update API documentation
186+
187+
## 🔍 Code Review Process
188+
189+
1. **Automated Checks**: All PRs must pass CI checks
190+
2. **Manual Review**: Code will be reviewed for:
191+
- Functionality and correctness
192+
- TypeScript best practices
193+
- Performance implications
194+
- Test coverage
195+
- Documentation completeness
196+
197+
## 🙏 Recognition
198+
199+
Contributors will be:
200+
- Added to the contributors list
201+
- Credited in release notes
202+
- Mentioned in the README
203+
204+
## ❓ Questions?
205+
206+
- Open an issue for questions
207+
- Check existing issues and PRs
208+
- Review the [API documentation](docs/API.md)
209+
210+
## 📝 License
211+
212+
By contributing, you agree that your contributions will be licensed under the MIT License.
213+
214+
---
215+
216+
**Credits:**
217+
- Original library by [Malte Wessel](https://github.com/malte-wessel)
218+
- v5.0 modernization maintained by [Ahmed Mahmoud](https://github.com/dev-ahmedmahmoud)

‎SECURITY.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Security Policy
2+
3+
## Supported Versions
4+
5+
We actively maintain and provide security updates for the following versions:
6+
7+
| Version | Supported |
8+
| ------- | ------------------ |
9+
| 5.0.x | ✅ Yes |
10+
| < 5.0 | ❌ No |
11+
12+
**Note**: This package (v5.0+) is a complete modernization. For older versions (4.x and below), please refer to the [original repository](https://github.com/malte-wessel/react-custom-scrollbars).
13+
14+
## Reporting a Vulnerability
15+
16+
If you discover a security vulnerability in this package, please help us maintain a safe environment by reporting it responsibly.
17+
18+
### How to Report
19+
20+
1. **Email**: Send details to dev.ahmedmahmoud@gmail.com
21+
2. **Subject**: Use "SECURITY: react-custom-scrollbars vulnerability"
22+
3. **Include**:
23+
- Description of the vulnerability
24+
- Steps to reproduce
25+
- Potential impact
26+
- Suggested fix (if any)
27+
28+
### What to Expect
29+
30+
- **Acknowledgment**: Within 24-48 hours
31+
- **Initial Assessment**: Within 1 week
32+
- **Resolution Timeline**: Depending on severity
33+
- Critical: Within 7 days
34+
- High: Within 14 days
35+
- Medium: Within 30 days
36+
- Low: Next scheduled release
37+
38+
### Security Updates
39+
40+
Security fixes will be:
41+
- Released as patch versions (e.g., 5.0.1)
42+
- Documented in CHANGELOG.md
43+
- Announced in GitHub releases
44+
- Published immediately to npm
45+
46+
## Security Considerations
47+
48+
### What We Monitor
49+
50+
- **Dependencies**: Regular audits with `npm audit`
51+
- **Code Quality**: ESLint security rules
52+
- **TypeScript**: Type safety to prevent runtime errors
53+
- **Build Process**: Secure build pipeline with GitHub Actions
54+
55+
### Safe Usage Guidelines
56+
57+
1. **Keep Updated**: Always use the latest version
58+
2. **Audit Dependencies**: Run `npm audit` in your project
59+
3. **Input Sanitization**: Sanitize any user content passed to scrollbars
60+
4. **CSP Headers**: Use Content Security Policy in production
61+
62+
### Known Security Features
63+
64+
- **No innerHTML Usage**: All DOM manipulation is safe
65+
- **No eval() or Function()**: No dynamic code execution
66+
- **Type Safety**: TypeScript prevents many runtime errors
67+
- **Minimal Dependencies**: Zero runtime dependencies
68+
69+
## Vulnerability Disclosure
70+
71+
We follow responsible disclosure practices:
72+
- Critical vulnerabilities are patched before public disclosure
73+
- Security advisories are published on GitHub
74+
- Users are notified through multiple channels
75+
76+
## Contact
77+
78+
For security-related questions or concerns:
79+
- **Email**: dev.ahmedmahmoud@gmail.com
80+
- **GitHub**: [@dev-ahmedmahmoud](https://github.com/dev-ahmedmahmoud)
81+
82+
Thank you for helping keep the community safe! 🛡️

0 commit comments

Comments
 (0)