@react-lib-tech/react-code-scanner/README.md

Static code scanner with React UI components for viewing scan results

# 📦 React Code Scanner

A simple **static code analysis tool** built with **Babel parser** that scans your React (JS/TS/JSX/TSX) project for common **security risks** and **code smells** like:

- 🚨 `eval()` usage  
- 🚨 `Function` constructor usage  
- ⚠️ `console.log` statements  

It provides developer-friendly results in a **React UI table**.

---

## ✨ Features
- Detects **dangerous functions** (`eval`, `Function` constructor).
- Detects **console.log** and similar debug statements.
- Parses modern **JavaScript, TypeScript, JSX, TSX**.
- Displays results in a clean **React Tailwind UI table**.

---

## 📦 Installation (for users)

Install the package from npm:

```sh
npm install @react-lib-tech/react-code-scanner
```

or with Yarn:

```sh
yarn add @react-lib-tech/react-code-scanner
```

---

## 🚀 Usage Examples

### 1. Run Code Scan Programmatically (Node.js)
If you want to scan your project folder for issues:

```js
import { ReactCodeScanner } from "@react-lib-tech/react-code-scanner";

const results = ReactCodeScanner("./src");

console.log(results);
/*
[
  {
    type: "Security",
    message: "Avoid using eval()",
    suggestion: "Use JSON.parse() or safer parsing methods",
    file: "src/utils/unsafe.js",
    loc: { start: { line: 12, column: 4 } }
  }
]
*/
```

---

### 2. Show Results in React Component
If you want to render scan results inside your app:

```jsx
import React from "react";
import { ReactCodeScannerResults } from "@react-lib-tech/react-code-scanner";

function App() {
  return (
    <div>
      <h1>🔎 My Project Scan</h1>
      <ReactCodeScannerResults root="./src" />
    </div>
  );
}

export default App;
```

This will render a styled table with all detected issues.

---

### 📊 Example UI

| File                | Line | Type       | Message           | Suggestion                           |
|---------------------|------|-----------|------------------|--------------------------------------|
| `src/App.js`        | 10   | Security  | Avoid using eval | Use JSON.parse() or safer parsing    |
| `src/utils/log.tsx` | 45   | CodeSmell | console.log found | Remove in production or use a logger |

---

## 🛠️ Development (for contributors)

Install dependencies:
```sh
npm install
```

Run build:
```sh
npm run build
```

Run scanner test:
```sh
node scanner.js
```

---

# 📦 React Code Scanner

[![npm version](https://img.shields.io/npm/v/@react-lib-tech/react-code-scanner.svg)](https://www.npmjs.com/package/@react-lib-tech/react-code-scanner)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Node.js CI](https://img.shields.io/github/actions/workflow/status/your-username/react-code-scanner/ci.yml?branch=main)](https://github.com/your-username/react-code-scanner/actions)

A lightweight **SonarQube-like static analysis tool** for **React (JS/TS/JSX/TSX) projects**.  

It scans your code for:
- 🚨 Security issues (`eval`, `Function`, secrets, unsafe `process.env`)  
- ⚠️ Code smells (`console.log`, `var`, empty `catch`)  
- 📊 Complexity problems (cyclomatic complexity, long functions)  
- 📂 Duplicate code (function body hashing)  

It generates **developer-friendly reports** in **JSON, HTML, SARIF** and can display them in a **React Tailwind UI table**.  

---

## ✨ Features
- Detects **dangerous functions** (`eval`, `Function`, `alert`, `prompt`).
- Detects **console.log** and debug statements.
- Detects **hardcoded secrets** (AWS keys, JWT, API tokens).
- Detects **empty catch blocks** & unsafe `process.env` usage.
- Calculates **cyclomatic complexity** & detects long functions.
- Detects **duplicate functions/code blocks**.
- Generates reports:
  - `scan-report.json` → CI/CD & automation
  - `scan-report.html` → SonarQube-style dashboard
  - `scan-report.sarif` → GitHub Code Scanning
- Configurable **Quality Gate** for CI/CD (fail builds if thresholds exceeded).
- Keeps **history snapshots** in `.scan-history/` for trend analysis.
- Exposes a **React Component** to show results in a styled table.

---

## 📦 Installation

Install the package from npm:

```sh
npm install @react-lib-tech/react-code-scanner --save-dev


## 📜 License

MIT © 2025 Abhishek Kumar Singh

---