react-scanner-ui 0.0.8 → 0.0.10

package/docs/.vitepress/config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  title: 'React Scanner UI',
+  description: 'A React component scanner and visualization tool',
+  base: '/react-scanner-ui/',
+
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/' },
+      { text: 'API', link: '/api/' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Getting Started', link: '/guide/' },
+          { text: 'Installation', link: '/guide/installation' },
+          { text: 'Usage', link: '/guide/usage' },
+        ],
+      },
+      {
+        text: 'API Reference',
+        items: [{ text: 'API Overview', link: '/api/' }],
+      },
+    ],
+
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/vimalmunjani/react-scanner-ui',
+      },
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2024 Vimal Munjani',
+    },
+  },
+
+  head: [['link', { rel: 'icon', href: '/react-scanner-ui/favicon.ico' }]],
+});

package/docs/README.md

@@ -0,0 +1,23 @@
+# Documentation
+
+This directory contains the VitePress documentation for React Scanner UI.
+
+## Development
+
+To run the documentation locally:
+
+```bash
+yarn dev:docs
+```
+
+## Building
+
+To build the documentation:
+
+```bash
+yarn build:docs
+```
+
+## Deployment
+
+The documentation is automatically deployed to GitHub Pages when changes are pushed to the main branch via GitHub Actions.

package/docs/api/index.md

@@ -0,0 +1,11 @@
+# API Reference
+
+## CLI Commands
+
+### `react-scanner-ui`
+
+Main command to start the component scanner.
+
+## Configuration
+
+Configuration options and examples will be documented here.

package/docs/guide/index.md

@@ -0,0 +1,14 @@
+# Getting Started
+
+React Scanner UI is a tool for scanning and visualizing React components in your project.
+
+## Quick Start
+
+1. Install the package globally or use npx
+2. Run the scanner in your React project
+3. View the interactive UI
+
+## Next Steps
+
+- [Installation Guide](./installation)
+- [Usage Instructions](./usage)

package/docs/guide/installation.md

@@ -0,0 +1,19 @@
+# Installation
+
+## NPM
+
+```bash
+npm install -g react-scanner-ui
+```
+
+## Yarn
+
+```bash
+yarn global add react-scanner-ui
+```
+
+## Using NPX
+
+```bash
+npx react-scanner-ui
+```

package/docs/guide/usage.md

@@ -0,0 +1,14 @@
+# Usage
+
+## Basic Usage
+
+Run the scanner in your React project directory:
+
+```bash
+react-scanner-ui
+```
+
+## Options
+
+- `--port`: Specify the port for the UI server
+- `--help`: Show available options

package/docs/index.md

@@ -0,0 +1,23 @@
+---
+layout: home
+
+hero:
+  name: 'React Scanner UI'
+  text: 'Component Scanner & Visualization Tool'
+  tagline: 'Scan, analyze, and visualize your React components with ease'
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/vimalmunjani/react-scanner-ui
+
+features:
+  - title: Component Scanning
+    details: Automatically scan and analyze React components in your project
+  - title: Visual Interface
+    details: Interactive UI for exploring component structure and relationships
+  - title: Easy Integration
+    details: Simple CLI tool that works with any React project
+---

package/eslint.config.js

@@ -0,0 +1,90 @@
+import js from '@eslint/js';
+import typescript from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        console: 'readonly',
+        process: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        exports: 'readonly',
+        global: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearInterval: 'readonly',
+        NodeJS: 'readonly',
+        fetch: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescript,
+      react: react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      prettier: prettier,
+    },
+    rules: {
+      ...typescript.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      ...prettierConfig.rules,
+      'prettier/prettier': 'error',
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    ignores: [
+      'dist/',
+      'node_modules/',
+      'build/',
+      '*.min.js',
+      '*.min.css',
+      'docs/.vitepress/dist/',
+      'docs/.vitepress/cache/',
+    ],
+  },
+];

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-scanner-ui",
-  "version": "0.0.8",
+  "type": "module",
+  "version": "0.0.10",
   "main": "dist/index.js",
   "bin": {
     "react-scanner-ui": "dist/index.js"
@@ -17,17 +18,24 @@
   "scripts": {
     "build": "tsc",
     "build:ui": "vite build --config ui/vite.config.ts",
+    "build:docs": "vitepress build docs",
     "start": "node dist/index.js",
     "dev": "ts-node src/index.ts",
     "dev:ui": "vite --config ui/vite.config.ts",
+    "dev:docs": "vitepress dev docs",
+    "preview:docs": "vitepress preview docs",
     "prepublishOnly": "yarn build",
-    "publish:npm": "yarn build && npm publish"
+    "publish:npm": "yarn build && npm publish",
+    "prepare": "husky",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "commander": "^14.0.2",
     "detect-port": "^1.6.1",
-    "polka": "^0.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^5.4.19"
@@ -37,7 +45,28 @@
     "@types/polka": "^0.5.7",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitepress": "^1.6.4"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,css,scss,yaml,yml}": [
+      "prettier --write"
+    ]
   }
 }

package/ui/components/App.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import { ComponentTable } from "./ComponentTable";
-import "./App.css";
+import { useState, useEffect } from 'react';
+import { ComponentTable } from './ComponentTable';
+import './App.css';
 
 export interface ScanData {
   [componentName: string]: {
@@ -20,8 +20,8 @@ function App() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetch("/api/scan-data")
-      .then((res) => res.json())
+    fetch('/api/scan-data')
+      .then(res => res.json())
       .then((result: ApiResponse) => {
         if (result.error) {
           setError(result.error);
@@ -30,20 +30,20 @@ function App() {
         }
         setLoading(false);
       })
-      .catch((err) => {
-        setError("Failed to fetch scan data: " + err.message);
+      .catch(err => {
+        setError('Failed to fetch scan data: ' + err.message);
         setLoading(false);
       });
   }, []);
 
   return (
-    <div className="container">
+    <div className='container'>
       <h1>React Scanner UI</h1>
-      {loading && <div className="loading">Loading scan data...</div>}
-      {error && <div className="error">{error}</div>}
+      {loading && <div className='loading'>Loading scan data...</div>}
+      {error && <div className='error'>{error}</div>}
       {!loading && !error && data && <ComponentTable data={data} />}
       {!loading && !error && !data && (
-        <div className="error">No component data found.</div>
+        <div className='error'>No component data found.</div>
       )}
     </div>
   );

package/ui/components/ComponentTable.css

@@ -59,3 +59,91 @@
 .component-table .total-row:hover td {
   background-color: var(--color-bg-total);
 }
+
+/* Expandable rows */
+.clickable-row {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.clickable-row.has-props:hover td {
+  background-color: var(--color-bg-hover);
+}
+
+.clickable-row.expanded td {
+  background-color: var(--color-bg-hover);
+  border-bottom: none;
+}
+
+.expand-icon {
+  display: inline-block;
+  width: 16px;
+  margin-right: 8px;
+  font-size: 0.7em;
+  color: var(--color-text-muted);
+  transition: transform 0.2s ease;
+}
+
+.expand-icon.expanded {
+  transform: rotate(90deg);
+}
+
+/* Props row */
+.props-row td {
+  padding: 8px 16px 16px 16px;
+  background-color: var(--color-bg-hover);
+}
+
+.props-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.props-label {
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  padding-top: 4px;
+}
+
+.props-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.prop-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  font-size: 0.85em;
+  color: var(--color-text);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.prop-chip:hover {
+  background-color: var(--color-bg-header);
+  border-color: var(--color-border-strong);
+}
+
+.prop-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background-color: var(--color-primary, #4a90d9);
+  color: white;
+  border-radius: 10px;
+  font-size: 0.8em;
+  font-weight: 600;
+  font-family: var(--font-mono);
+}

package/ui/components/ComponentTable.tsx

@@ -1,13 +1,13 @@
-import { useState } from "react";
-import type { ScanData } from "./App";
-import "./ComponentTable.css";
+import { useState } from 'react';
+import type { ScanData } from './App';
+import './ComponentTable.css';
 
 interface ComponentTableProps {
   data: ScanData;
 }
 
-type SortKey = "name" | "count";
-type SortDirection = "asc" | "desc";
+type SortKey = 'name' | 'count';
+type SortDirection = 'asc' | 'desc';
 
 interface SortConfig {
   key: SortKey;
@@ -16,70 +16,122 @@ interface SortConfig {
 
 export function ComponentTable({ data }: ComponentTableProps) {
   const [sortConfig, setSortConfig] = useState<SortConfig>({
-    key: "count",
-    direction: "desc",
+    key: 'count',
+    direction: 'desc',
   });
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
   const handleSort = (key: SortKey) => {
-    setSortConfig((prev) => ({
+    setSortConfig(prev => ({
       key,
-      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc',
     }));
   };
 
   const getSortIndicator = (key: SortKey) => {
-    if (sortConfig.key !== key) return "";
-    return sortConfig.direction === "asc" ? "▲" : "▼";
+    if (sortConfig.key !== key) return '';
+    return sortConfig.direction === 'asc' ? '▲' : '▼';
+  };
+
+  const toggleRow = (name: string) => {
+    setExpandedRows(prev => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
   };
 
   // Transform data into array and sort
   const components = Object.entries(data).map(([name, info]) => ({
     name,
-    count: info.instances || 0,
+    count: info.instances,
+    props: info.props || {},
   }));
 
   components.sort((a, b) => {
-    const aValue = sortConfig.key === "name" ? a.name.toLowerCase() : a.count;
-    const bValue = sortConfig.key === "name" ? b.name.toLowerCase() : b.count;
+    const aValue = sortConfig.key === 'name' ? a.name.toLowerCase() : a.count;
+    const bValue = sortConfig.key === 'name' ? b.name.toLowerCase() : b.count;
 
-    if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
-    if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+    if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;
+    if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;
     return 0;
   });
 
   const totalCount = components.reduce((sum, c) => sum + c.count, 0);
 
   if (components.length === 0) {
-    return <div className="empty-state">No components found in scan data.</div>;
+    return <div className='empty-state'>No components found in scan data.</div>;
   }
 
   return (
-    <div className="table-container">
-      <table className="component-table">
+    <div className='table-container'>
+      <table className='component-table'>
         <thead>
           <tr>
-            <th onClick={() => handleSort("name")}>
+            <th onClick={() => handleSort('name')}>
               Component
-              <span className="sort-indicator">{getSortIndicator("name")}</span>
+              <span className='sort-indicator'>{getSortIndicator('name')}</span>
             </th>
-            <th onClick={() => handleSort("count")}>
-              Count
-              <span className="sort-indicator">
-                {getSortIndicator("count")}
+            <th onClick={() => handleSort('count')}>
+              Usage Count
+              <span className='sort-indicator'>
+                {getSortIndicator('count')}
               </span>
             </th>
           </tr>
         </thead>
         <tbody>
-          {components.map((component) => (
-            <tr key={component.name}>
-              <td className="component-name">{component.name}</td>
-              <td className="count">{component.count}</td>
-            </tr>
-          ))}
-          <tr className="total-row">
+          {components.map(component => {
+            const isExpanded = expandedRows.has(component.name);
+            const hasProps = Object.keys(component.props).length > 0;
+            const sortedProps = Object.entries(component.props).sort(
+              ([, a], [, b]) => b - a
+            );
+
+            return (
+              <>
+                <tr
+                  key={component.name}
+                  onClick={() => toggleRow(component.name)}
+                  className={`clickable-row ${isExpanded ? 'expanded' : ''} ${hasProps ? 'has-props' : ''}`}
+                >
+                  <td className='component-name'>
+                    <span
+                      className={`expand-icon ${isExpanded ? 'expanded' : ''}`}
+                    >
+                      {hasProps ? '▶' : ''}
+                    </span>
+                    {component.name}
+                  </td>
+                  <td className='count'>{component.count}</td>
+                </tr>
+                {isExpanded && hasProps && (
+                  <tr key={`${component.name}-props`} className='props-row'>
+                    <td colSpan={2}>
+                      <div className='props-container'>
+                        <span className='props-label'>Props:</span>
+                        <div className='props-chips'>
+                          {sortedProps.map(([propName, propCount]) => (
+                            <span key={propName} className='prop-chip'>
+                              {propName}
+                              <span className='prop-count'>{propCount}</span>
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </>
+            );
+          })}
+          <tr className='total-row'>
             <td>Total</td>
-            <td className="count">{totalCount}</td>
+            <td className='count'>{totalCount}</td>
           </tr>
         </tbody>
       </table>

package/ui/index.css

@@ -23,7 +23,9 @@
   --radius-sm: 4px;
   --radius-md: 8px;
   --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    sans-serif;
 }
 
 body {
@@ -54,6 +56,8 @@ button {
   cursor: pointer;
 }
 
-input, select, textarea {
+input,
+select,
+textarea {
   font-family: inherit;
 }

package/ui/index.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>React Scanner UI</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="./main.tsx"></script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Scanner UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
 </html>