Skip to content

Commit 50ace9b

Browse files
fabiendostiefabiendostie
authored
Update Jest Configuration: Use ts-jest for JSX/TSX Without Babe (#3)
* chore: test and performance experiments (web worker, e2e, UI tweaks) * UI/UX and validation logic fixes: improved row reporting, highlighting, and results header status indicator * ci: add-npm-install--g-pnpm * fix: update JSX setting to use react-jsx for improved compatibility
1 parent 67151da commit 50ace9b

File tree

51 files changed

+7462
-2789
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+7462
-2789
lines changed

‎.github/workflows/CD.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
jobs:
8+
deploy:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v4
12+
13+
- name: Use Node.js 20.x
14+
uses: actions/setup-node@v4
15+
with:
16+
node-version: 20
17+
18+
- name: Install pnpm
19+
run: npm install -g pnpm
20+
21+
- name: Install dependencies
22+
run: pnpm install
23+
24+
- name: Build and export
25+
run: |
26+
pnpm build
27+
pnpm run export
28+
29+
- name: Deploy to GitHub Pages
30+
uses: peaceiris/actions-gh-pages@v4
31+
with:
32+
github_token: ${{ secrets.GITHUB_TOKEN }}
33+
publish_dir: ./out

‎.github/workflows/CI.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main, develop]
6+
pull_request:
7+
branches: [main, develop]
8+
9+
jobs:
10+
ci:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v4
14+
15+
- name: Use Node.js 20.x
16+
uses: actions/setup-node@v4
17+
with:
18+
node-version: 20
19+
cache: 'pnpm'
20+
21+
- name: Install pnpm
22+
run: npm install -g pnpm
23+
24+
- name: Install dependencies
25+
run: pnpm install
26+
27+
- name: Lint
28+
run: pnpm lint
29+
30+
- name: Format check
31+
run: pnpm format --check || true
32+
33+
- name: Build
34+
run: pnpm build
35+
36+
- name: Install Playwright Browsers
37+
run: npx playwright install --with-deps
38+
39+
- name: Run unit tests
40+
run: pnpm test
41+
42+
- name: Run Playwright e2e tests
43+
run: pnpm test:e2e

‎.husky/pre-push‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
pnpm test

‎README.md‎

Lines changed: 77 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -5,171 +5,124 @@
55
[![Ajv](https://img.shields.io/badge/Schema%20Validation-Ajv-orange?style=flat-square)](https://ajv.js.org/)
66
[![UI](https://img.shields.io/badge/UI-Shadcn/ui-black?style=flat-square)](https://ui.shadcn.com/)
77

8-
A web-based tool to validate CSV data against JSON schemas directly in your browser. Edit your data on the fly and ensure compliance with predefined or custom structures.
8+
A modern web-based tool to validate CSV data against JSON schemas, edit CSVs, and ensure compliance with custom or predefined structures. Built with Next.js 15+, TypeScript, and a robust UI/UX.
99

1010
---
1111

1212
## ✨ Features
1313

14-
* **CSV Upload:** Easily upload your CSV files via drag-and-drop or file selection.
15-
* **Schema Selection:** Choose from a list of predefined JSON schemas tailored for specific data types.
16-
* **Custom Schema Upload:** Validate against your own JSON schema by uploading it.
17-
* **In-Browser Validation:** Performs validation locally using Web Workers for a smooth UI experience.
18-
* **Detailed Results:** View a clear list of validation errors and warnings, sorted with errors first.
19-
* **Specific Value Highlighting:** Error messages pinpoint the exact value that caused the issue.
20-
* **Live CSV Editing:** Modify your CSV data directly within the application using a code editor interface.
21-
* **Save Modified CSV:** Download the edited CSV data back to your local machine.
22-
* **Auto Re-validation:** Automatically re-validates the CSV data after saving changes.
14+
- **CSV Upload & Editing:** Upload, edit, and validate CSV files in-browser with a code editor interface.
15+
- **Schema Selection & Upload:** Choose from predefined JSON schemas or upload your own custom schema.
16+
- **Live Validation:** Real-time validation using Ajv, with errors and warnings shown per row and value.
17+
- **Detailed Results:** Errors and warnings are clearly displayed, with row numbers and schema paths.
18+
- **Save & Download:** Download your edited CSV at any time.
19+
- **Auto Re-validation:** CSV is re-validated after every save or edit.
20+
- **Human-Readable Schema Docs:** View a Markdown-rendered, human-friendly version of the selected schema.
21+
- **Responsive UI:** Panels resize and animate smoothly; results always visible.
22+
- **Dark Mode:** Full support for light/dark themes, including logo adaptation.
23+
- **E2E Testing:** Playwright-based end-to-end tests for reliability.
24+
- **CI/CD:** Automated lint, test, build, and deploy via GitHub Actions.
2325

2426
---
2527

2628
## 🚀 Getting Started
2729

2830
### Prerequisites
29-
30-
* Node.js (v18 or later recommended)
31-
* pnpm (or npm/yarn)
31+
- Node.js (v18 or later recommended)
32+
- pnpm (or npm/yarn)
3233

3334
### Installation & Running Locally
3435

35-
1. **Clone the repository:**
36-
```bash
37-
git clone https://github.com/FabienDostieIT/CSV_Data_Validator.git
38-
cd CSV_Data_Validator
39-
```
36+
```bash
37+
# Clone the repository
38+
git clone https://github.com/FabienDostieIT/CSV_Data_Validator.git
39+
cd CSV_Data_Validator
4040

41-
2. **Install dependencies:**
42-
```bash
43-
pnpm install
44-
# or npm install / yarn install
45-
```
41+
# Install dependencies
42+
pnpm install
43+
# or npm install / yarn install
4644

47-
3. **Run the development server:**
48-
```bash
49-
pnpm dev
50-
# or npm run dev / yarn dev
51-
```
45+
# Run the development server
46+
pnpm dev
47+
# or npm run dev / yarn dev
5248

53-
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
49+
# Open http://localhost:3000 in your browser
50+
```
5451

5552
---
5653

57-
## 🛠️ How to Use
58-
59-
### 1. Upload CSV File
60-
61-
* Drag and drop your CSV file onto the designated area.
62-
* Alternatively, click the upload area to open a file selection dialog.
63-
* The raw CSV content will be displayed in the editor pane.
64-
65-
![Alt text](img/image.png "CSV Content")
66-
67-
### 2. Select or Upload Schema
68-
69-
* **Predefined Schema:** Choose a schema from the dropdown list (e.g., `productSchema`, `userSchema`). The validation will use this structure.
70-
* **Custom Schema:**
71-
* Click the "Upload Custom Schema" button.
72-
* Select your JSON schema file (`.json`).
73-
* The application will use your uploaded schema for validation.
74-
75-
![Alt text](img/image2.png "JSON Schema")
76-
77-
### 3. Validate Data
78-
79-
* Click the "Validate CSV" button.
80-
* The validation process runs in the background.
81-
* A loading indicator will show while processing.
82-
83-
### 4. Review Results
84-
85-
* Once validation is complete, the "Validation Results" section will appear below the editor.
86-
* Results are categorized into **Errors** and **Warnings**.
87-
* Errors are listed first, followed by warnings.
88-
* Each result shows:
89-
* Row Number (in the original CSV)
90-
* Error/Warning Message (including the specific problematic value)
91-
* Schema Path (`instancePath`) indicating the location of the issue within the data structure.
92-
* Counts for total errors and warnings are displayed.
93-
94-
![Alt text](img/image3.png "Results section")
54+
## 🛠️ Usage Overview
9555

96-
### 5. Edit CSV Data
56+
1. **Upload CSV:** Drag-and-drop or select a CSV file. The content appears in the editor.
57+
2. **Select/Upload Schema:** Choose a schema from the dropdown or upload your own JSON schema.
58+
3. **Validate:** Click "Validate Data". Errors and warnings appear below, with details per row.
59+
4. **Edit & Save:** Edit CSV directly, then save/download. Validation runs automatically after edits.
60+
5. **View Schema Docs:** Toggle the schema panel to see a human-readable Markdown version of the schema.
9761

98-
* You can directly edit the text in the CSV editor pane on the left.
99-
* Make corrections based on the validation results or perform other modifications.
100-
101-
![Alt text](img/image4.png "Optional title")
62+
---
10263

103-
### 6. Save Modified CSV
64+
## 🧪 Testing & Quality
65+
66+
- **Lint:**
67+
```sh
68+
pnpm lint
69+
```
70+
- **Format:**
71+
```sh
72+
pnpm format --check
73+
```
74+
- **Unit Tests:**
75+
```sh
76+
pnpm test
77+
```
78+
- **E2E Tests (Playwright):**
79+
```sh
80+
pnpm e2e
81+
```
10482

105-
* Click the "Save CSV" button.
106-
* This will trigger a download of the currently displayed CSV content as a `.csv` file.
83+
---
10784

108-
### 7. Automatic Re-validation After Save
85+
## ⚙️ CI/CD & Deployment
10986

110-
* After saving the CSV, the application automatically re-parses the data from the editor and runs the validation again with the selected schema.
111-
* The results panel will update to reflect the validity of the *saved* data.
87+
- **CI:** Automated via GitHub Actions (`.github/workflows/CI.yml`). Runs lint, format, unit tests, build, and Playwright e2e tests on every push/PR.
88+
- **CD:** Static export and deploy to GitHub Pages via `.github/workflows/CD.yml`.
89+
- **Static Export:**
90+
- Next.js 15+ uses `output: 'export'` in `next.config.mjs`.
91+
- Build with:
92+
```sh
93+
pnpm build
94+
# Output is in the out/ directory
95+
```
96+
- **GitHub Pages:**
97+
- Deployment is automatic from the `main` branch to the `gh-pages` branch.
98+
- Configure GitHub Pages in repo settings to serve from `gh-pages` branch.
11299

113100
---
114101

115102
## 💻 Tech Stack
116103

117-
* **Frontend:** Next.js (React Framework), TypeScript
118-
* **UI Components:** Shadcn/ui, Radix UI, Tailwind CSS
119-
* **CSV Parsing:** PapaParse
120-
* **Schema Validation:** Ajv (Another JSON Schema Validator)
121-
* **Code Editor:** CodeMirror
122-
* **State Management:** React Hooks (useState, useCallback, useRef)
123-
* **Asynchronous Operations:** Web Workers
124-
125-
126-
127-
---
128-
129-
<div align="center">
130-
✔️ Made with ❤️ by the fine people @ [F]it 👌
131-
</div>
104+
- **Frontend:** Next.js 15+, React 19, TypeScript
105+
- **UI:** Shadcn/ui, Radix UI, Tailwind CSS
106+
- **CSV Parsing:** PapaParse
107+
- **Schema Validation:** Ajv
108+
- **Code Editor:** Monaco/CodeMirror
109+
- **E2E:** Playwright
110+
- **CI/CD:** GitHub Actions
132111

133112
---
134113

135114
## 🤝 Contributing
136115

137-
Contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub.
138-
139-
If you'd like to contribute code:
140-
141-
1. Fork the repository.
142-
2. Create a new branch for your feature or bug fix (`git checkout -b feature/your-feature` or `git checkout -b fix/your-bug`).
143-
3. Make your changes and commit them with clear messages.
144-
4. Push your branch to your fork (`git push origin feature/your-feature`).
145-
5. Open a Pull Request back to the main repository's `develop` branch.
146-
147-
Please ensure your code adheres to the existing style and that any relevant tests pass (if applicable).
116+
Contributions are welcome! Please open issues or pull requests. Ensure your code passes lint, format, and all tests before submitting.
148117

149118
---
150119

151120
## 📄 License
152121

153-
This project is licensed under the MIT License.
122+
MIT License © 2025 Fabien Dostie, [F]it
154123

155-
**MIT License**
156-
157-
Copyright (c) 2025 Fabien Dostie, [F]it
158-
159-
Permission is hereby granted, free of charge, to any person obtaining a copy
160-
of this software and associated documentation files (the "Software"), to deal
161-
in the Software without restriction, including without limitation the rights
162-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
163-
copies of the Software, and to permit persons to whom the Software is
164-
furnished to do so, subject to the following conditions:
124+
---
165125

166-
The above copyright notice and this permission notice shall be included in all
167-
copies or substantial portions of the Software.
126+
## 🔒 Security
168127

169-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
170-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
171-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
172-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
173-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
174-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
175-
SOFTWARE.
128+
See [SECURITY.md](./SECURITY.md) for vulnerability reporting and supported versions.

‎SECURITY.md‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,38 @@ We are committed to ensuring the security of the CSV Data Validator. Security up
99
| >= 1.0.0 (Latest `main`) | :white_check_mark: |
1010
| < 1.0.0 | :x: |
1111

12-
*(**Note:** Based on your `package.json`, the version is `1.0.0`. This table assumes you only actively support the latest code. Adjust this table if you maintain older versions with security patches).*
12+
> **Note:** Only the latest code on `main` is actively supported. Older versions do not receive security patches unless otherwise stated.
13+
14+
## Security Features & Practices
15+
16+
- **Automated Dependency Checks:** All dependencies are regularly updated and checked for vulnerabilities via GitHub Actions.
17+
- **CI/CD Security:** All code changes are tested (unit, integration, E2E) and statically analyzed before deployment.
18+
- **E2E Security Testing:** Playwright E2E tests help ensure that critical user flows are protected against regressions and common web vulnerabilities.
19+
- **Static Export:** The app is deployed as a static site (Next.js `output: 'export'`), minimizing server-side attack surface.
1320

1421
## Reporting a Vulnerability
1522

16-
We take security vulnerabilities seriously. If you discover a security issue, please report it responsibly. **Please do not report security vulnerabilities through public GitHub issues.**
23+
We take security vulnerabilities seriously. If you discover a security issue, please report it responsibly. **Do not report security vulnerabilities through public GitHub issues.**
1724

1825
Instead, please report vulnerabilities using one of the following methods:
1926

20-
1. **(Recommended) GitHub Security Advisories:** You can privately report a vulnerability directly through GitHub by navigating to the "Security" tab of the repository (`https://github.com/FabienDostieIT/CSV_Data_Validator/security/advisories/new`). This is the preferred method as it allows for secure communication and tracking.
21-
2. **(Alternative) Email:** You can email the report directly to `[Your Security Contact Email Address - e.g., [email protected] or your personal email if appropriate]`. Please use a clear subject line like "Security Vulnerability Report: CSV Data Validator".
22-
23-
**What to Include in Your Report:**
27+
1. **(Recommended) GitHub Security Advisories:** Privately report a vulnerability via the "Security" tab of the repository ([link](https://github.com/FabienDostieIT/CSV_Data_Validator/security/advisories/new)).
28+
2. **(Alternative) Email:** Email the report to `[email protected]` (replace with your actual contact email). Use a clear subject like "Security Vulnerability Report: CSV Data Validator".
2429

25-
Please include as much detail as possible to help us understand and reproduce the issue:
30+
### What to Include in Your Report
2631

27-
* Type of vulnerability (e.g., Cross-Site Scripting, dependency vulnerability, improper validation).
28-
* Steps to reproduce the vulnerability.
29-
* Any proof-of-concept code or examples.
30-
* Potential impact of the vulnerability.
31-
* Any suggested mitigation, if known.
32+
- Type of vulnerability (e.g., XSS, dependency, improper validation)
33+
- Steps to reproduce
34+
- Proof-of-concept code or examples
35+
- Potential impact
36+
- Suggested mitigation (if known)
3237

33-
**Our Process:**
38+
### Our Process
3439

35-
1. **Acknowledgement:** We aim to acknowledge receipt of your vulnerability report within **[e.g., 2-3 business days]**.
36-
2. **Assessment:** We will investigate the report to confirm the vulnerability and assess its severity and impact.
37-
3. **Communication:** We will maintain communication with you regarding the status of the report and our findings.
38-
4. **Resolution:** If the vulnerability is confirmed and requires action, we will work on a fix. Security patches will typically be applied to the `develop` branch first and then merged into the `main` branch for release.
39-
5. **Disclosure:** Once a fix is available, we may coordinate disclosure with you. We typically aim to credit reporters who responsibly disclose vulnerabilities unless they prefer to remain anonymous.
40+
1. **Acknowledgement:** We aim to acknowledge your report within 2-3 business days.
41+
2. **Assessment:** We investigate and assess severity/impact.
42+
3. **Communication:** We keep you updated on status and findings.
43+
4. **Resolution:** If confirmed, we work on a fix and apply patches to `main`.
44+
5. **Disclosure:** We may coordinate disclosure and credit you unless you prefer anonymity.
4045

41-
We appreciate your efforts in responsibly disclosing security vulnerabilities and helping us keep the CSV Data Validator secure.
46+
We appreciate your efforts in responsibly disclosing vulnerabilities and helping us keep the CSV Data Validator secure.

0 commit comments

Comments
 (0)