@power-maverick/tool-erd-generator 0.0.7 → 0.0.8

package/README.md

@@ -1,192 +1,160 @@
-# ERD Generator for Dataverse
+# Dataverse ERD Generator
 
-Generate Entity Relationship Diagrams (ERD) from Dataverse solutions. **React-based tool** with dual integration support for **DVDT (Dataverse DevTools for VS Code)** and **PPTB (PowerPlatform ToolBox)**.
-
-> **🚀 Works in Both Platforms**: This tool automatically detects whether it's running in DVDT (VS Code extension) or PPTB (desktop application) and adapts accordingly. Zero configuration needed!
-
-## Quick Links
-
-- **[PPTB Integration Guide](docs/PPTB_Integration.md)** - For PowerPlatform ToolBox users
-- **[DVDT Integration Guide](docs/DVDT_Integration.md)** - For VS Code extension developers  
-- **[Integration Examples](docs/Integration_Examples.md)** - Complete code samples for both platforms
-- **[Getting Started](docs/Getting_Started.md)** - New to this tool? Start here!
+A PowerPlatform ToolBox tool for generating Entity Relationship Diagrams (ERD) from Dataverse solutions using React and Vite.
 
 ## Features
 
-- **🎨 Modern React UI**: Component-based architecture with React 18 and TypeScript
-- **🔄 Dual Platform Support**: Works seamlessly in both VS Code (DVDT) and PowerPlatform ToolBox (PPTB)
-- **⚡ Fast Development**: Vite for instant HMR and optimized production builds
-- **🔌 Minimal Integration**: Just pass credentials - tool handles all the rest
-- **📊 Multiple Formats**: Generate ERDs in Mermaid, PlantUML, or Graphviz DOT
-- **🎯 Smart Detection**: Automatically detects DVDT vs PPTB environment
-- **🛠️ Configurable Output**: Control attributes, relationships, and detail level
-- **📥 Export Options**: Download source files or copy to clipboard
-- **🔍 Visual Preview**: Interactive Mermaid diagram rendering (when available)
-- **🔒 Secure**: Platform-abstracted APIs ensure security in both environments
-
-## Platform Support
+- ✅ React 18 with TypeScript
+- ✅ Vite for fast development and building
+- ✅ Access to ToolBox API via `window.toolboxAPI`
+- ✅ Dataverse connection and authentication
+- ✅ Multiple ERD formats: Mermaid, PlantUML, Graphviz
+- ✅ Visual Mermaid diagram rendering
+- ✅ Configurable output (attributes, relationships, table limits)
+- ✅ Export diagrams (download source files or copy to clipboard)
+- ✅ Interactive UI with solution selection
 
-| Platform | Description | Status |
-|----------|-------------|--------|
-| **DVDT** | Dataverse DevTools for VS Code | ✅ Fully Supported |
-| **PPTB** | PowerPlatform ToolBox (Desktop) | ✅ Fully Supported |
+## Structure
 
-Both platforms use the same codebase with automatic platform detection and adaptation.
+```
+erd-generator/
+├── src/
+│   ├── App.tsx               # Main React component
+│   ├── main.tsx              # Entry point
+│   ├── styles.css            # Global styles
+│   ├── components/
+│   │   └── ERDGenerator.ts   # ERD generation logic
+│   ├── models/
+│   │   └── interfaces.ts     # TypeScript interfaces
+│   └── utils/
+│       └── DataverseClient.ts # Dataverse API client
+├── index.html                # HTML template
+├── vite.config.ts            # Vite configuration
+├── package.json
+├── tsconfig.json
+└── README.md
+```
 
-## Technical Architecture
+## Installation
 
-### Platform Abstraction Layer
-The tool uses a unified `IPlatformAPI` interface that abstracts platform differences:
+Install dependencies:
 
-```typescript
-// Automatically detects PPTB or DVDT
-const api = PlatformAPIFactory.create();
-
-// Works the same in both platforms
-const context = await api.getToolContext();
-await api.showNotification({ title: 'Success', body: 'Done!', type: 'success' });
-await api.saveFile('erd.mmd', diagram);
-await api.copyToClipboard(text);
+```bash
+npm install
 ```
 
-### Build System
-- **Vite**: Modern build tool for fast development and optimized production builds
-- **React 18**: Latest React with hooks and concurrent features
-- **TypeScript**: Full type safety across the codebase
-- **Dual Build Target**: 
-  - Extension code (Node.js/VS Code) compiled with `tsc`
-  - Webview (browser) bundled with Vite
-  - Single `dist/` output works for both platforms
-
-### Platform Integration
-The tool automatically detects its environment:
-
-1. **DVDT (VS Code)**: Detects `window.acquireVsCodeApi()`
-   - Receives credentials via `postMessage` with `setCredentials` command
-   - Uses VS Code APIs for file operations and clipboard
-   
-2. **PPTB (ToolBox)**: Detects `window.toolboxAPI`
-   - Gets context via `toolboxAPI.getToolContext()`
-   - Listens for `TOOLBOX_CONTEXT` via `postMessage`
-   - Uses PPTB APIs for file operations, clipboard, and notifications
+## Development
 
-## Installation
+Run development server:
 
 ```bash
-npm install @dvdt-tools/erd-generator
+npm run dev
 ```
 
-## Development & Testing
+Build for production:
 
-### Building the Project
+```bash
+npm run build
+```
 
-The project uses dual build targets:
+Preview production build:
 
 ```bash
-npm run build
+npm run preview
 ```
 
-This runs:
-1. **Extension build** (`npm run build:extension`): Compiles TypeScript for Node.js/VS Code
-   - Input: `src/` TypeScript files
-   - Output: `dist/src/` JavaScript files
-   - Target: Node.js runtime (VS Code extension host)
+## Usage in ToolBox
 
-2. **Webview build** (`npm run build:webview`): Bundles React app for browser
-   - Input: `webview/` React components
-   - Output: `dist/webview/` bundled files (index.js, index.css)
-   - Target: Browser runtime (Chrome-based webview)
+1. Build the tool:
+   ```bash
+   npm run build
+   ```
 
-### Development Mode
+2. The built files will be in the `dist/` directory:
+   - `index.html` - Main entry point
+   - `index.js` - Bundled application
+   - `index.css` - Compiled styles
 
-Run with hot module replacement:
+3. Install the tool in PowerPlatform ToolBox through the UI or programmatically
 
-```bash
-npm run dev
-```
+## Key Concepts
+
+### ToolBox API Integration
 
-This starts:
-- TypeScript compiler in watch mode
-- Vite dev server with instant HMR
+The tool integrates with PowerPlatform ToolBox via `window.toolboxAPI`:
 
-### Preview Production Build
+```typescript
+// Get connection context
+const context = await window.toolboxAPI.getToolContext();
 
-Preview the production build locally:
+// Show notification
+await window.toolboxAPI.showNotification({
+  title: "Success",
+  body: "ERD generated successfully",
+  type: "success"
+});
 
-```bash
-npm run preview
+// Save file
+await window.toolboxAPI.saveFile(fileName, content);
+
+// Copy to clipboard
+await window.toolboxAPI.copyToClipboard(text);
 ```
 
-## Integration Guide
+**Important**: The tool must listen for `TOOLBOX_CONTEXT` via `postMessage` from the parent window. This provides connection information when the tool is loaded in a webview.
 
-### DVDT (Dataverse DevTools) Integration
+### React Hooks
 
-The ERD Generator provides a simple function to show the panel in VS Code:
+The tool demonstrates:
 
-```typescript
-import { showERDPanel } from '@dvdt-tools/erd-generator';
-
-// In your DVDT extension code
-export function activate(context: vscode.ExtensionContext) {
-  // When you want to show ERD Generator (e.g., from a command)
-  showERDPanel(
-    context.extensionUri,
-    environmentUrl,  // Your Dataverse environment URL
-    accessToken      // Your Dataverse access token
-  );
-}
-```
+- `useState` for managing component state
+- `useEffect` for initialization and side effects  
+- Type-safe event handling with TypeScript
+- Dataverse API integration
 
-**What it does:**
-1. Creates or reveals a VS Code WebView panel
-2. Loads the React app into the webview
-3. Sends credentials via `postMessage`
-4. Handles file save and clipboard operations through VS Code APIs
-
-### PPTB (Power Platform Toolbox) Integration
-
-The tool automatically integrates with PPTB when deployed as a tool:
-
-**No code required!** The React app detects PPTB environment and:
-1. Listens for `TOOLBOX_CONTEXT` via `postMessage`
-2. Calls `window.toolboxAPI.getToolContext()` to get connection details
-3. Uses `window.toolboxAPI.showNotification()` for user feedback
-4. Subscribes to toolbox events via `window.toolboxAPI.onToolboxEvent()`
-
-**Package structure for PPTB:**
-```json
-{
-  "name": "dvdt-erd-generator",
-  "version": "0.0.6",
-  "displayName": "Dataverse ERD Generator",
-  "description": "Generate Entity Relationship Diagrams for Dataverse solutions"
-}
-```
+### ERD Generation
+
+Supports three formats:
+
+1. **Mermaid** - Visual diagrams with interactive rendering
+2. **PlantUML** - Text-based UML diagrams
+3. **Graphviz** - DOT language for graph visualization
 
-The `dist/webview/` folder contains the complete tool:
-- `index.html` - Entry point
-- `index.js` - Bundled React app
-- `index.css` - Styles
+Configuration options:
+- Include/exclude attributes
+- Include/exclude relationships
+- Limit maximum attributes per table
 
-## Usage
+### Styling
 
-### In DVDT (VS Code)
+Uses CSS with modern features:
 
-1. Install the tool in your Dataverse DevTools extension
-2. Call `showERDPanel()` with connection details
-3. The panel opens showing available solutions
-4. Select a solution and configure options
-5. Click "Generate ERD" to create the diagram
-6. Download or copy the generated diagram
+- CSS Grid for layouts
+- Flexbox for alignment
+- Gradient backgrounds
+- Responsive design
+- Clean, professional UI
 
-### In PPTB (Web)
+## TypeScript
 
-1. Install the tool in Power Platform Toolbox
-2. Open the tool from the toolbox interface
-3. Tool automatically receives connection context
-4. Select a solution and configure options
-5. Click "Generate ERD" to create the diagram
-6. Download to your computer or copy to clipboard
+Full TypeScript support with:
+
+- Type declarations for ToolBox API
+- Strict type checking
+- Modern ES2020 features
+- React JSX types
+- Dataverse API types
+
+## Building Diagrams
+
+The tool:
+
+1. Connects to Dataverse using provided credentials
+2. Lists available solutions
+3. Fetches solution metadata (tables, attributes, relationships)
+4. Generates diagram in selected format
+5. Renders visual preview (Mermaid) or shows source code
+6. Allows export via download or clipboard
 
 ## Configuration Options
 
@@ -214,60 +182,6 @@ The tool provides several configuration options:
 - Powerful layout engines
 - Flexible customization options
 
-## Architecture Details
-
-### No Node.js Dependencies in Webview
-
-The webview bundle (`dist/webview/index.js`) is **pure browser JavaScript**:
-- ✅ No `require()` or `module.exports`
-- ✅ No `process.env` or Node.js globals
-- ✅ No Node.js-specific APIs
-- ✅ Uses only browser-standard APIs
-
-This ensures:
-- Works in any browser environment (PPTB)
-- Works in VS Code webviews (DVDT)
-- No runtime dependencies
-- Smaller bundle size
-
-### Build Output Structure
-
-```
-dist/
-├── src/                    # Extension code (Node.js)
-│   ├── index.js           # Main export
-│   ├── components/
-│   │   └── ERDGenerator.js
-│   ├── utils/
-│   │   └── DataverseClient.js
-│   └── dvdtIntegration/
-│       └── integration.js  # VS Code panel management
-└── webview/               # Browser bundle (React app)
-    ├── index.html         # Entry point
-    ├── index.js          # Bundled React app (~195 KB)
-    └── index.css         # Styles (~5 KB)
-```
-
-## Core Components
-
-### ERDGenerator (`src/components/ERDGenerator.ts`)
-- Core logic for generating diagrams
-- Supports multiple output formats
-- Handles table and relationship mapping
-- Shared between extension and webview builds
-
-### DataverseClient (`src/utils/DataverseClient.ts`)
-- Dataverse API client
-- Fetches solutions, tables, attributes, relationships
-- Uses Axios for HTTP requests
-- Shared between extension and webview builds
-
-### App Component (`webview/App.tsx`)
-- Main React component
-- Environment detection (DVDT vs PPTB)
-- State management with hooks
-- User interface and interactions
-
 ## Troubleshooting
 
 ### Build Issues
@@ -280,15 +194,7 @@ npm install
 npm run build
 ```
 
-### Webview Not Loading in VS Code
-
-Check:
-1. Extension is built: `npm run build:extension`
-2. Webview is built: `npm run build:webview`
-3. Files exist in `dist/webview/`
-4. CSP settings in integration.ts allow loading scripts
-
-### PPTB Integration Issues
+### ToolBox Integration Issues
 
 Check:
 1. `window.toolboxAPI` is available
@@ -296,29 +202,13 @@ Check:
 3. Connection context is being received
 4. Network requests are successful
 
-## Migration from Webpack to Vite
-
-This tool was migrated from Webpack to Vite for better performance and simpler configuration:
-
-**Benefits:**
-- ⚡ Faster development with instant HMR
-- 📦 Smaller production bundles
-- 🎯 Simpler configuration
-- 🔧 Better TypeScript integration
-- 🚀 Native ESM support
-
-**Breaking Changes:**
-- Webview bundle location changed from `dist/webview/webview.js` to `dist/webview/index.js`
-- HTML is now generated (not loaded from template)
-- Build output structure simplified
-
 ## Contributing
 
 Contributions are welcome! When contributing:
 
-1. Maintain dual platform support (DVDT + PPTB)
+1. Maintain PPTB integration patterns
 2. Keep webview bundle browser-only (no Node.js dependencies)
-3. Test in both environments
+3. Test in PowerPlatform ToolBox
 4. Update documentation as needed
 5. Follow existing code style
 
@@ -330,134 +220,3 @@ This project is licensed under the GPL-2.0 License - see the [LICENSE](../../LIC
 
 - **Issues**: [GitHub Issues](https://github.com/Power-Maverick/DVDT-Tools/issues)
 - **Discussions**: [GitHub Discussions](https://github.com/Power-Maverick/DVDT-Tools/discussions)
-
-## Changelog
-
-### v0.0.6
-- 🎉 **Major Rewrite**: Converted to React-based architecture
-- 🔄 Added PPTB (Power Platform Toolbox) integration support
-- ⚡ Migrated from Webpack to Vite
-- 🎨 Modern React components with hooks
-- 🌐 Dual platform support (DVDT + PPTB)
-- 📦 Cleaner build output with no Node.js artifacts in webview
-- 🔧 Improved TypeScript configuration
-- 📚 Updated documentation
-
-### Previous Versions
-See [CHANGELOG.md](../../CHANGELOG.md) for full history.
-- Copy to clipboard
-
-## Integration with Dataverse DevTools
-
-### VS Code WebView Panel Integration
-
-**Simple function call - no command registration needed:**
-
-```typescript
-import { showERDPanel } from '@dvdt-tools/erd-generator';
-
-// Call this when you want to show the ERD panel
-showERDPanel(context.extensionUri, environmentUrl, accessToken);
-```
-
-**Complete example:**
-
-```typescript
-import { showERDPanel } from '@dvdt-tools/erd-generator';
-import * as vscode from 'vscode';
-
-// In your DVDT menu handler or button click
-async function openERDGenerator() {
-    try {
-        const environmentUrl = dvdtConfig.getCurrentEnvironment();
-        const accessToken = await dvdtAuth.getAccessToken();
-
-        if (!environmentUrl || !accessToken) {
-            vscode.window.showErrorMessage('Please connect to Dataverse first');
-            return;
-        }
-
-        // Open ERD tool panel
-        showERDPanel(context.extensionUri, environmentUrl, accessToken);
-    } catch (error) {
-        vscode.window.showErrorMessage(`Failed to open ERD Generator: ${error.message}`);
-    }
-}
-```
-
-That's it! The ERD tool will:
-- Open as a panel when called
-- List all solutions in a dropdown control
-- Allow users to select and generate ERDs
-- Handle downloading and copying
-- Provide a complete UI experience with configuration options
-
-See [../../VSCODE_INTEGRATION.md](../../VSCODE_INTEGRATION.md) for complete integration guide.
-
-## API
-
-### showERDPanel()
-
-Opens the ERD Generator panel in VS Code.
-
-**Parameters:**
-- `extensionUri: vscode.Uri` - VS Code extension URI from context
-- `environmentUrl: string` - Dataverse environment URL
-- `accessToken: string` - Dataverse access token
-
-**Example:**
-```typescript
-showERDPanel(context.extensionUri, environmentUrl, accessToken);
-```
-
-### DataverseClient
-
-Handles communication with Dataverse Web API.
-
-**Constructor:**
-```typescript
-new DataverseClient({
-  environmentUrl: string,
-  accessToken: string,
-  apiVersion?: string  // Optional, defaults to '9.2'
-})
-```
-
-**Methods:**
-- `listSolutions(): Promise<Solution[]>` - Lists all solutions
-- `fetchSolution(uniqueName: string): Promise<DataverseSolution>` - Fetches complete solution metadata
-
-### ERDGenerator
-
-Generates ERD diagrams from solution metadata.
-
-**Constructor:**
-```typescript
-new ERDGenerator({
-  format: 'mermaid' | 'plantuml' | 'graphviz',
-  includeAttributes?: boolean,      // Default: true
-  includeRelationships?: boolean,   // Default: true
-  maxAttributesPerTable?: number    // Default: 10, 0 = all
-})
-```
-
-**Methods:**
-- `generate(solution: DataverseSolution): string` - Generates ERD diagram
-
-## Architecture
-
-The ERD tool is self-contained:
-
-```
-DVDT Extension
-    ↓ (provides credentials)
-ERD Tool WebView Panel
-    ↓ (uses)
-DataverseClient → Dataverse Web API
-    ↓ (fetches metadata)
-ERDGenerator → Generates diagrams
-```
-
-## License
-
-GPL-2.0

package/index.html

@@ -4,9 +4,26 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dataverse ERD Generator</title>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script>
+      if (typeof mermaid !== 'undefined') {
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: 'default',
+          themeVariables: {
+            primaryColor: '#0e639c',
+            primaryTextColor: '#fff',
+            primaryBorderColor: '#0a4f7c',
+            lineColor: '#0e639c',
+            secondaryColor: '#f3f4f6',
+            tertiaryColor: '#e5e7eb'
+          }
+        });
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/webview/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/package.json

@@ -1,50 +1,35 @@
 {
   "name": "@power-maverick/tool-erd-generator",
   "displayName": "ERD Generator",
-  "version": "0.0.7",
-  "description": "Generate Entity Relationship Diagrams (ERD) for Dataverse solutions - React-based tool with DVDT and PPTB integration",
-  "main": "dist/src/index.js",
-  "types": "dist/src/index.d.ts",
+  "version": "0.0.8",
+  "description": "Generate Entity Relationship Diagrams (ERD) for Dataverse solutions - React-based tool for PowerPlatform ToolBox",
+  "type": "module",
   "scripts": {
-    "build": "npm run build:extension && npm run build:webview",
-    "build:extension": "tsc",
-    "build:webview": "cd webview && vite build",
-    "dev": "npm run dev:extension & npm run dev:webview",
-    "dev:extension": "tsc --watch",
-    "dev:webview": "cd webview && vite",
-    "preview": "cd webview && vite preview"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "keywords": [
     "dataverse",
     "erd",
     "entity-relationship-diagram",
     "power-platform",
-    "dvdt",
-    "pptb"
+    "pptb",
+    "toolbox"
   ],
   "author": "Power Maverick",
   "license": "GPL-2.0",
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "axios": "^1.7.9"
   },
   "devDependencies": {
-    "@pptb/types": "1.0.0",
-    "@types/node": "24.7.2",
+    "@pptb/types": "^1.0.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@types/vscode": "1.85.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "axios": "1.12.2",
-    "typescript": "5.9.3",
+    "typescript": "^5.9.3",
     "vite": "^6.0.7"
-  },
-  "peerDependencies": {
-    "vscode": "^1.85.0"
-  },
-  "peerDependenciesMeta": {
-    "vscode": {
-      "optional": true
-    }
   }
 }

package/tsconfig.json

@@ -1,20 +1,25 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./",
-    "target": "es6",
-    "module": "commonjs",
-    "strict": true,
-    "esModuleInterop": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["es6", "dom"]
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/dvdtIntegration/webview.ts",
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }