From eee8e799eefe108b2b1fd54852fcc198d7833f25 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 4 Apr 2026 17:53:21 +0000 Subject: [PATCH] =?UTF-8?q?Update:=20comprehensive=20repo=20improvements?= =?UTF-8?q?=20=E2=80=94=20testing,=20linting,=20a11y,=20docs,=20and=20dep?= =?UTF-8?q?=20upgrades?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add ESLint + Prettier with flat config for code quality enforcement - Add Vitest + React Testing Library with 21 passing tests - Update CI to run lint, format check, tests, and build - Fix silent error swallowing in Indicators and Schemes pages - Add accessibility: skip-to-content, ARIA roles, semantic HTML, keyboard nav - Fix responsive design with tablet/mobile breakpoints for Indicators layout - Move inline styles to CSS classes (section-title, value-sm, card-empty, etc.) - Extract reusable DataTable and FilterBar components - Add TypeScript config (tsconfig.json) for IDE support - Add .env.example documenting API configuration - Upgrade to React 19, React Router 7, Recharts 3 - Add Docsify documentation site with architecture, API, and best practices - Add GitHub Pages workflow for docs deployment https://claude.ai/code/session_0162zAikEeEs7xSqcq8Fbv4o --- .env.example | 3 + .github/workflows/ci.yml | 14 + .github/workflows/docs.yml | 30 + .prettierignore | 3 + .prettierrc | 7 + docs/.nojekyll | 0 docs/README.md | 38 + docs/_coverpage.md | 10 + docs/_sidebar.md | 23 + docs/accessibility.md | 33 + docs/api-client.md | 56 + docs/architecture.md | 47 + docs/code-style.md | 52 + docs/commits.md | 45 + docs/components.md | 68 + docs/contributing.md | 37 + docs/development.md | 57 + docs/index.html | 37 + docs/performance.md | 43 + docs/quickstart.md | 59 + docs/security.md | 28 + docs/structure.md | 50 + docs/testing.md | 66 + eslint.config.js | 41 + package-lock.json | 7104 ++++++++++++++++++++++++++ package.json | 35 +- src/App.css | 147 + src/App.jsx | 17 +- src/components/DataTable.jsx | 49 + src/components/FilterBar.jsx | 25 + src/components/LoadingState.jsx | 12 +- src/components/LoadingState.test.jsx | 37 + src/components/StatCard.test.jsx | 21 + src/main.jsx | 10 +- src/pages/Dashboard.jsx | 38 +- src/pages/Indicators.jsx | 103 +- src/pages/SchemeDetail.jsx | 56 +- src/pages/Schemes.jsx | 64 +- src/pages/StateDetail.jsx | 26 +- src/pages/States.jsx | 40 +- src/test/setup.js | 1 + src/utils/format.test.js | 65 + tsconfig.json | 23 + vite.config.js | 9 +- vitest.config.js | 11 + 45 files changed, 8568 insertions(+), 172 deletions(-) create mode 100644 .env.example create mode 100644 .github/workflows/docs.yml create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 docs/.nojekyll create mode 100644 docs/README.md create mode 100644 docs/_coverpage.md create mode 100644 docs/_sidebar.md create mode 100644 docs/accessibility.md create mode 100644 docs/api-client.md create mode 100644 docs/architecture.md create mode 100644 docs/code-style.md create mode 100644 docs/commits.md create mode 100644 docs/components.md create mode 100644 docs/contributing.md create mode 100644 docs/development.md create mode 100644 docs/index.html create mode 100644 docs/performance.md create mode 100644 docs/quickstart.md create mode 100644 docs/security.md create mode 100644 docs/structure.md create mode 100644 docs/testing.md create mode 100644 eslint.config.js create mode 100644 package-lock.json create mode 100644 src/components/DataTable.jsx create mode 100644 src/components/FilterBar.jsx create mode 100644 src/components/LoadingState.test.jsx create mode 100644 src/components/StatCard.test.jsx create mode 100644 src/test/setup.js create mode 100644 src/utils/format.test.js create mode 100644 tsconfig.json create mode 100644 vitest.config.js diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..8aca7be --- /dev/null +++ b/.env.example @@ -0,0 +1,3 @@ +# API backend URL (BridgeStack FastAPI server) +# The Vite dev server proxies /api requests to this URL +VITE_API_URL=http://localhost:8000 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1136cba..dd6fbd5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -16,3 +16,17 @@ jobs: with: args: --accept 200,204,301,302,403,429 --exclude-mail --exclude "localhost|127.0.0.1|example.com|twitter.com|x.com|linkedin.com|facebook.com|instagram.com" --timeout 30 --max-retries 2 "**/*.html" "**/*.md" fail: false + + build-and-test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - run: npm ci --legacy-peer-deps + - run: npm run lint + - run: npm run format:check + - run: npm run test + - run: npm run build diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 0000000..a6e9c9f --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,30 @@ +name: Deploy Docs + +on: + push: + branches: [main] + paths: ['docs/**'] + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/configure-pages@v4 + - uses: actions/upload-pages-artifact@v3 + with: + path: docs + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..1a99321 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c03d068 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100, + "tabWidth": 2 +} diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..73021af --- /dev/null +++ b/docs/README.md @@ -0,0 +1,38 @@ +# ViewStack + +**ViewStack** is the frontend layer of the [OpenStacks](https://openstacks.dev) platform — a React dashboard for exploring Indian development data including government schemes, state indicators, budgets, and geographic coverage. + +## Key Features + +- **Dashboard** — Summary cards with scheme, state, indicator, and sector counts +- **States Explorer** — Browse states/UTs with region filtering, population data, and district breakdowns +- **Scheme Browser** — Filter government schemes by sector and level, view budget trends and coverage +- **Indicator Explorer** — Interactive charts comparing development indicators across states + +## Tech Stack + +| Layer | Technology | +|-------|-----------| +| UI Framework | React 19 | +| Routing | React Router 7 | +| Charts | Recharts 3 | +| Build Tool | Vite 5 | +| Testing | Vitest + React Testing Library | +| Linting | ESLint 10 + Prettier | +| API Backend | [BridgeStack](https://github.com/Varnasr/BridgeStack) (FastAPI) | + +## Getting Started + +```bash +# Clone the repo +git clone https://github.com/Varnasr/ViewStack.git +cd ViewStack + +# Install dependencies +npm install + +# Start dev server (requires BridgeStack running on port 8000) +npm run dev +``` + +Visit `http://localhost:5173` to see the dashboard. diff --git a/docs/_coverpage.md b/docs/_coverpage.md new file mode 100644 index 0000000..816ad77 --- /dev/null +++ b/docs/_coverpage.md @@ -0,0 +1,10 @@ +# ViewStack + +> A React dashboard for exploring Indian development data + +- Built with React 19, Recharts 3, React Router 7 +- Part of the [OpenStacks](https://openstacks.dev) ecosystem +- Open source under MIT license + +[Get Started](#getting-started) +[GitHub](https://github.com/Varnasr/ViewStack) diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 0000000..fea9c5f --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,23 @@ +- **Getting Started** + - [Introduction](/) + - [Quick Start](quickstart.md) + - [Project Structure](structure.md) + +- **Architecture** + - [Overview](architecture.md) + - [API Client](api-client.md) + - [Components](components.md) + +- **Development** + - [Development Guide](development.md) + - [Testing](testing.md) + - [Code Style](code-style.md) + +- **Best Practices** + - [Accessibility](accessibility.md) + - [Performance](performance.md) + - [Security](security.md) + +- **Contributing** + - [How to Contribute](contributing.md) + - [Commit Conventions](commits.md) diff --git a/docs/accessibility.md b/docs/accessibility.md new file mode 100644 index 0000000..ce96b5b --- /dev/null +++ b/docs/accessibility.md @@ -0,0 +1,33 @@ +# Accessibility + +ViewStack follows web accessibility best practices to ensure the dashboard is usable by everyone. + +## Current Implementation + +### Skip Navigation +A "Skip to main content" link appears on keyboard focus, allowing users to bypass the navigation. + +### ARIA Roles +- `LoadingState` uses `role="status"` with `aria-live="polite"` for screen reader announcements +- `ErrorState` uses `role="alert"` for immediate error announcements +- `FilterBar` uses `role="search"` with `aria-label` on each select +- Navigation uses `aria-label="Main navigation"` +- Footer uses `role="contentinfo"` + +### Semantic HTML +- Tables use `` (visually hidden) for screen readers +- Table headers use `scope="col"` for proper association +- Interactive table rows have `role="button"`, `tabIndex`, and keyboard handlers + +### Keyboard Navigation +- `DataTable` rows with `onRowClick` support Enter and Space key activation +- All interactive elements are focusable and keyboard-operable + +## Best Practices for Contributors + +1. **Always add `aria-label`** to interactive elements without visible text +2. **Use semantic HTML** — prefer `