react-scanner-ui 0.0.9 → 0.0.11

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.9",
+  "type": "module",
+  "version": "0.0.11",
   "main": "dist/index.js",
   "bin": {
     "react-scanner-ui": "dist/index.js"
@@ -17,11 +18,19 @@
   "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",
@@ -36,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

@@ -1,149 +1,149 @@
 .component-table {
-    width: 100%;
-    border-collapse: collapse;
-    background-color: var(--color-bg-card);
-    box-shadow: var(--shadow-sm);
-    border-radius: var(--radius-md);
-    overflow: hidden;
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--color-bg-card);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 
 .component-table th,
 .component-table td {
-    padding: 12px 16px;
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .component-table th {
-    background-color: var(--color-bg-header);
-    font-weight: 600;
-    color: var(--color-text);
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 0.15s ease;
+  background-color: var(--color-bg-header);
+  font-weight: 600;
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
 }
 
 .component-table th:hover {
-    background-color: #e9ecef;
+  background-color: #e9ecef;
 }
 
 .component-table th .sort-indicator {
-    margin-left: 5px;
-    color: var(--color-text-muted);
-    font-size: 0.75em;
+  margin-left: 5px;
+  color: var(--color-text-muted);
+  font-size: 0.75em;
 }
 
 .component-table tbody tr:last-child td {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .component-table tbody tr:hover td {
-    background-color: var(--color-bg-hover);
+  background-color: var(--color-bg-hover);
 }
 
 .component-table .count {
-    font-family: var(--font-mono);
-    font-weight: 500;
+  font-family: var(--font-mono);
+  font-weight: 500;
 }
 
 .component-table .total-row {
-    font-weight: 600;
-    background-color: var(--color-bg-total);
+  font-weight: 600;
+  background-color: var(--color-bg-total);
 }
 
 .component-table .total-row td {
-    border-top: 2px solid var(--color-border-strong);
-    border-bottom: none;
+  border-top: 2px solid var(--color-border-strong);
+  border-bottom: none;
 }
 
 .component-table .total-row:hover td {
-    background-color: var(--color-bg-total);
+  background-color: var(--color-bg-total);
 }
 
 /* Expandable rows */
 .clickable-row {
-    cursor: pointer;
-    transition: background-color 0.15s ease;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
 
 .clickable-row.has-props:hover td {
-    background-color: var(--color-bg-hover);
+  background-color: var(--color-bg-hover);
 }
 
 .clickable-row.expanded td {
-    background-color: var(--color-bg-hover);
-    border-bottom: none;
+  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;
+  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);
+  transform: rotate(90deg);
 }
 
 /* Props row */
 .props-row td {
-    padding: 8px 16px 16px 16px;
-    background-color: var(--color-bg-hover);
+  padding: 8px 16px 16px 16px;
+  background-color: var(--color-bg-hover);
 }
 
 .props-container {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
+  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;
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  padding-top: 4px;
 }
 
 .props-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+  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;
+  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);
+  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);
+  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,25 +16,25 @@ 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) => {
+    setExpandedRows(prev => {
       const next = new Set(prev);
       if (next.has(name)) {
         next.delete(name);
@@ -53,43 +53,43 @@ export function ComponentTable({ data }: ComponentTableProps) {
   }));
 
   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")}>
+            <th onClick={() => handleSort('count')}>
               Usage Count
-              <span className="sort-indicator">
-                {getSortIndicator("count")}
+              <span className='sort-indicator'>
+                {getSortIndicator('count')}
               </span>
             </th>
           </tr>
         </thead>
         <tbody>
-          {components.map((component) => {
+          {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,
+              ([, a], [, b]) => b - a
             );
 
             return (
@@ -97,28 +97,28 @@ export function ComponentTable({ data }: ComponentTableProps) {
                 <tr
                   key={component.name}
                   onClick={() => toggleRow(component.name)}
-                  className={`clickable-row ${isExpanded ? "expanded" : ""} ${hasProps ? "has-props" : ""}`}
+                  className={`clickable-row ${isExpanded ? 'expanded' : ''} ${hasProps ? 'has-props' : ''}`}
                 >
-                  <td className="component-name">
+                  <td className='component-name'>
                     <span
-                      className={`expand-icon ${isExpanded ? "expanded" : ""}`}
+                      className={`expand-icon ${isExpanded ? 'expanded' : ''}`}
                     >
-                      {hasProps ? "▶" : ""}
+                      {hasProps ? '▶' : ''}
                     </span>
                     {component.name}
                   </td>
-                  <td className="count">{component.count}</td>
+                  <td className='count'>{component.count}</td>
                 </tr>
                 {isExpanded && hasProps && (
-                  <tr key={`${component.name}-props`} className="props-row">
+                  <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">
+                      <div className='props-container'>
+                        <span className='props-label'>Props:</span>
+                        <div className='props-chips'>
                           {sortedProps.map(([propName, propCount]) => (
-                            <span key={propName} className="prop-chip">
+                            <span key={propName} className='prop-chip'>
                               {propName}
-                              <span className="prop-count">{propCount}</span>
+                              <span className='prop-count'>{propCount}</span>
                             </span>
                           ))}
                         </div>
@@ -129,9 +129,9 @@ export function ComponentTable({ data }: ComponentTableProps) {
               </>
             );
           })}
-          <tr className="total-row">
+          <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>