nextjs-ide-helper 1.0.0 → 1.1.0

package/README.md

@@ -1,25 +1,23 @@
-# NextJS Cursor Helper
+# NextJS IDE Helper
 
-A Next.js plugin that automatically adds cursor buttons to React components in development mode, enabling seamless IDE integration and faster development workflow.
+A Next.js plugin that automatically adds IDE buttons to React components in development mode, enabling seamless IDE integration and faster development workflow. Supports Cursor, VS Code, WebStorm, and Atom.
 
 ## Features
 
-- 🚀 **Automatic Integration**: Automatically wraps React components with cursor buttons
+- 🚀 **Automatic Integration**: Automatically wraps React components with IDE buttons
 - 🎯 **Smart Detection**: Only processes components in specified directories
-- 🔧 **Zero Configuration**: Works out of the box with sensible defaults
+- 🔧 **Zero Configuration**: Works out of the box with sensible defaults (Cursor as default IDE)
 - 🏎️ **Development Only**: Only active in development mode, no production overhead
 - 🎨 **Non-intrusive**: Uses absolute positioning to avoid layout disruption
 - ⚡ **Hydration Safe**: No SSR/client hydration mismatches
 - 📱 **TypeScript Support**: Full TypeScript definitions included
+- 🔌 **Multi-IDE Support**: Supports Cursor, VS Code, WebStorm, and Atom
 
 ## Installation
 
 ```bash
-npm install nextjs-cursor-helper --save-dev
 # or
-yarn add nextjs-cursor-helper --dev
 # or
-pnpm add nextjs-cursor-helper --save-dev
 ```
 
 ## Quick Start
@@ -29,36 +27,37 @@ pnpm add nextjs-cursor-helper --save-dev
 Add the plugin to your `next.config.js`:
 
 ```javascript
-const withCursorHelper = require('nextjs-cursor-helper');
+const withIdeHelper = require('nextjs-ide-plugin');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // your existing config
 };
 
-module.exports = withCursorHelper()(nextConfig);
+module.exports = withIdeHelper()(nextConfig);
 ```
 
 ### 2. That's it!
 
-All React components in your `src/components` directory will automatically get cursor buttons in development mode.
+All React components in your `src/components` directory will automatically get IDE buttons in development mode (defaults to Cursor IDE).
 
 ## Configuration
 
 You can customize the plugin behavior:
 
 ```javascript
-const withCursorHelper = require('nextjs-cursor-helper');
+const withIdeHelper = require('nextjs-ide-plugin');
 
 const nextConfig = {
   // your existing config
 };
 
-module.exports = withCursorHelper({
+module.exports = withIdeHelper({
   componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan
   projectRoot: process.cwd(), // project root directory
-  importPath: 'nextjs-cursor-helper/withCursorButton', // import path for the HOC
-  enabled: process.env.NODE_ENV === 'development' // enable/disable
+  importPath: 'nextjs-ide-plugin/withIdeButton', // import path for the HOC
+  enabled: process.env.NODE_ENV === 'development', // enable/disable
+  ideType: 'cursor' // IDE to use: 'cursor', 'vscode', 'webstorm', 'atom'
 })(nextConfig);
 ```
 
@@ -68,21 +67,28 @@ module.exports = withCursorHelper({
 |--------|------|---------|-------------|
 | `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components |
 | `projectRoot` | `string` | `process.cwd()` | Root directory of your project |
-| `importPath` | `string` | `'nextjs-cursor-helper/withCursorButton'` | Import path for the withCursorButton HOC |
+| `importPath` | `string` | `'nextjs-ide-plugin/withIdeButton'` | Import path for the withIdeButton HOC |
 | `enabled` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable the plugin |
+| `ideType` | `'cursor' \| 'vscode' \| 'webstorm' \| 'atom'` | `'cursor'` | IDE to open files in |
 
 ## Manual Usage
 
 You can also manually wrap components:
 
 ```tsx
-import { withCursorButton } from 'nextjs-cursor-helper';
+import { withIdeButton } from 'nextjs-ide-plugin';
 
 const MyComponent = () => {
   return <div>Hello World</div>;
 };
 
-export default withCursorButton(MyComponent, 'src/components/MyComponent.tsx');
+// Default (Cursor)
+export default withIdeButton(MyComponent, 'src/components/MyComponent.tsx');
+
+// With specific IDE
+export default withIdeButton(MyComponent, 'src/components/MyComponent.tsx', {
+  ideType: 'vscode'
+});
 ```
 
 ## How It Works
@@ -90,7 +96,7 @@ export default withCursorButton(MyComponent, 'src/components/MyComponent.tsx');
 1. **Webpack Loader**: The plugin uses a custom webpack loader to transform your React components at build time
 2. **Automatic Detection**: It scans specified directories for `.tsx` and `.jsx` files
 3. **Smart Wrapping**: Only wraps components that export a default React component
-4. **Development Only**: The cursor buttons only appear in development mode
+4. **Development Only**: The IDE buttons only appear in development mode
 5. **Hydration Safe**: Uses client-side state to prevent SSR/hydration mismatches
 
 ## Example
@@ -115,7 +121,7 @@ After (automatically transformed):
 ```tsx
 // src/components/Button.tsx (transformed by the plugin)
 import React from 'react';
-import { withCursorButton } from 'nextjs-cursor-helper/withCursorButton';
+import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
 
 const Button = ({ children, onClick }) => {
   return (
@@ -125,7 +131,10 @@ const Button = ({ children, onClick }) => {
   );
 };
 
-export default withCursorButton(Button, 'src/components/Button.tsx', { projectRoot: '/path/to/project' });
+export default withIdeButton(Button, 'src/components/Button.tsx', { 
+  projectRoot: '/path/to/project',
+  ideType: 'cursor' // defaults to cursor, can be 'vscode', 'webstorm', 'atom'
+});
 ```
 
 ## Troubleshooting
@@ -141,14 +150,19 @@ export default withCursorButton(Button, 'src/components/Button.tsx', { projectRo
 The plugin is designed to prevent hydration errors, but if you encounter any:
 
 1. Make sure you're using the latest version
-2. Check that the 'use client' directive is present in the withCursorButton module
+2. Check that the 'use client' directive is present in the withIdeButton module
 3. File an issue with details about your setup
 
-### Cursor not opening files
+### IDE not opening files
 
-1. Ensure you have Cursor IDE installed
+1. Ensure you have your IDE installed and properly configured
+   - **Cursor**: Make sure Cursor IDE is installed
+   - **VS Code**: Make sure VS Code is installed and set up to handle `vscode://` links
+   - **WebStorm**: Ensure WebStorm is installed and configured
+   - **Atom**: Make sure Atom is installed (note: Atom is deprecated)
 2. Check that the file paths are correct
-3. Verify your browser allows `cursor://` protocol links
+3. Verify your browser allows protocol links for your IDE
+4. Try setting the `ideType` option explicitly in your configuration
 
 ## Contributing
 

package/lib/index.d.ts

@@ -1,5 +1,5 @@
-export { withCursorButton } from './withCursorButton';
-export type { WithCursorButtonOptions } from './withCursorButton';
-declare const withCursorHelper: any;
-export default withCursorHelper;
-export { withCursorHelper };
+export { withIdeButton } from './withIdeButton';
+export type { WithIdeButtonOptions } from './withIdeButton';
+declare const withIdeHelper: any;
+export default withIdeHelper;
+export { withIdeHelper };

package/lib/index.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withCursorHelper = exports.withCursorButton = void 0;
+exports.withIdeHelper = exports.withIdeButton = void 0;
 // Main exports
-var withCursorButton_1 = require("./withCursorButton");
-Object.defineProperty(exports, "withCursorButton", { enumerable: true, get: function () { return withCursorButton_1.withCursorButton; } });
+var withIdeButton_1 = require("./withIdeButton");
+Object.defineProperty(exports, "withIdeButton", { enumerable: true, get: function () { return withIdeButton_1.withIdeButton; } });
 // Next.js plugin
-const withCursorHelper = require('./plugin');
-exports.withCursorHelper = withCursorHelper;
-exports.default = withCursorHelper;
+const withIdeHelper = require('./plugin');
+exports.withIdeHelper = withIdeHelper;
+exports.default = withIdeHelper;

package/lib/loader.js

@@ -31,7 +31,7 @@ module.exports = function cursorButtonLoader(source) {
   }
 
   // Check if it's already wrapped
-  if (source.includes('withCursorButton')) {
+  if (source.includes('withIdeButton')) {
     return source;
   }
 
@@ -58,17 +58,17 @@ module.exports = function cursorButtonLoader(source) {
   
   if (imports.length === 0) {
     // No imports found, add at top
-    const importStatement = `import { withCursorButton } from '${importPath}';\n`;
-    const wrappedExport = `export default withCursorButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
+    const importStatement = `import { withIdeButton } from '${importPath}';\n`;
+    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
     modifiedSource = importStatement + source.replace(/export\s+default\s+\w+;?/, wrappedExport);
   } else {
     const lastImportIndex = source.lastIndexOf(imports[imports.length - 1]) + imports[imports.length - 1].length;
     
     // Add import statement
-    const importStatement = `\nimport { withCursorButton } from '${importPath}';`;
+    const importStatement = `\nimport { withIdeButton } from '${importPath}';`;
     
     // Replace the export
-    const wrappedExport = `export default withCursorButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
+    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
     
     modifiedSource = source.slice(0, lastImportIndex) + 
                      importStatement + 

package/lib/plugin.js

@@ -5,7 +5,7 @@ const path = require('path');
  * @typedef {Object} CursorHelperOptions
  * @property {string[]} [componentPaths=['src/components']] - Paths to scan for React components
  * @property {string} [projectRoot=process.cwd()] - Root directory of the project
- * @property {string} [importPath='nextjs-cursor-helper/withCursorButton'] - Import path for withCursorButton
+ * @property {string} [importPath='nextjs-cursor-helper/withIdeButton'] - Import path for withIdeButton
  * @property {boolean} [enabled=process.env.NODE_ENV === 'development'] - Enable/disable the plugin
  */
 
@@ -18,7 +18,7 @@ function withCursorHelper(options = {}) {
   const defaultOptions = {
     componentPaths: ['src/components'],
     projectRoot: process.cwd(),
-    importPath: 'nextjs-cursor-helper/withCursorButton',
+    importPath: 'nextjs-cursor-helper/withIdeButton',
     enabled: process.env.NODE_ENV === 'development'
   };
 

package/lib/withIdeButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface WithIdeButtonOptions {
+    projectRoot?: string;
+    enabled?: boolean;
+    ideType?: 'cursor' | 'vscode' | 'webstorm' | 'atom';
+}
+export declare function withIdeButton<T extends object>(WrappedComponent: React.ComponentType<T>, filePath: string, options?: WithIdeButtonOptions): React.FC<T>;

package/lib/{withCursorButton.js → withIdeButton.js}

@@ -1,13 +1,28 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withCursorButton = withCursorButton;
+exports.withIdeButton = withIdeButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const CursorButton = ({ filePath, projectRoot }) => {
+const IdeButton = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+    const getIdeUrl = (ide, path) => {
+        const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
+        switch (ide) {
+            case 'cursor':
+                return `cursor://file${fullPath}`;
+            case 'vscode':
+                return `vscode://file${fullPath}`;
+            case 'webstorm':
+                return `webstorm://open?file=${fullPath}`;
+            case 'atom':
+                return `atom://open?path=${fullPath}`;
+            default:
+                return `cursor://file${fullPath}`;
+        }
+    };
     const handleClick = () => {
-        const fullPath = projectRoot ? `${projectRoot}/${filePath}` : filePath;
-        window.open(`cursor://file${fullPath}`, '_blank');
+        const url = getIdeUrl(ideType, filePath);
+        window.open(url, '_blank');
     };
     return ((0, jsx_runtime_1.jsx)("button", { onClick: handleClick, style: {
             position: 'absolute',
@@ -24,11 +39,11 @@ const CursorButton = ({ filePath, projectRoot }) => {
             opacity: 0.7,
             transition: 'opacity 0.2s',
             fontFamily: 'monospace'
-        }, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.7'), title: `Open ${filePath} in Cursor`, children: "\uD83D\uDCDD" }));
+        }, onMouseEnter: (e) => (e.currentTarget.style.opacity = '1'), onMouseLeave: (e) => (e.currentTarget.style.opacity = '0.7'), title: `Open ${filePath} in ${ideType.toUpperCase()}`, children: "\uD83D\uDCDD" }));
 };
-function withCursorButton(WrappedComponent, filePath, options = {}) {
-    const { projectRoot, enabled = process.env.NODE_ENV === 'development' } = options;
-    const WithCursorButtonComponent = (props) => {
+function withIdeButton(WrappedComponent, filePath, options = {}) {
+    const { projectRoot, enabled = process.env.NODE_ENV === 'development', ideType = 'cursor' } = options;
+    const WithIdeButtonComponent = (props) => {
         const [isClient, setIsClient] = (0, react_1.useState)(false);
         (0, react_1.useEffect)(() => {
             setIsClient(true);
@@ -37,8 +52,8 @@ function withCursorButton(WrappedComponent, filePath, options = {}) {
         if (!enabled || !isClient) {
             return (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props });
         }
-        return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(CursorButton, { filePath: filePath, projectRoot: projectRoot }), (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(IdeButton, { filePath: filePath, projectRoot: projectRoot, ideType: ideType }), (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props })] }));
     };
-    WithCursorButtonComponent.displayName = `withCursorButton(${WrappedComponent.displayName || WrappedComponent.name})`;
-    return WithCursorButtonComponent;
+    WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
+    return WithIdeButtonComponent;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextjs-ide-helper",
-  "version": "1.0.0",
-  "description": "A Next.js plugin that automatically adds cursor buttons to React components for seamless IDE integration",
+  "version": "1.1.0",
+  "description": "A Next.js plugin that automatically adds IDE buttons to React components for seamless IDE integration. Supports Cursor, VS Code, WebStorm, and Atom.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -17,6 +17,9 @@
     "nextjs",
     "react",
     "cursor",
+    "vscode",
+    "webstorm",
+    "atom",
     "ide",
     "development",
     "webpack",
@@ -36,10 +39,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/nextjs-cursor-helper.git"
+    "url": "https://github.com/yourusername/nextjs-ide-plugin.git"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/nextjs-cursor-helper/issues"
+    "url": "https://github.com/yourusername/nextjs-ide-plugin/issues"
   },
-  "homepage": "https://github.com/yourusername/nextjs-cursor-helper#readme"
+  "homepage": "https://github.com/yourusername/nextjs-ide-plugin#readme"
 }

package/src/index.ts

@@ -1,8 +1,8 @@
 // Main exports
-export { withCursorButton } from './withCursorButton';
-export type { WithCursorButtonOptions } from './withCursorButton';
+export { withIdeButton } from './withIdeButton';
+export type { WithIdeButtonOptions } from './withIdeButton';
 
 // Next.js plugin
-const withCursorHelper = require('./plugin');
-export default withCursorHelper;
-export { withCursorHelper };
+const withIdeHelper = require('./plugin');
+export default withIdeHelper;
+export { withIdeHelper };

package/src/loader.js

@@ -12,7 +12,7 @@ module.exports = function cursorButtonLoader(source) {
   const {
     componentPaths = ['src/components'],
     projectRoot = process.cwd(),
-    importPath = 'nextjs-cursor-helper/withCursorButton',
+    importPath = 'nextjs-cursor-helper/withIdeButton',
     enabled = process.env.NODE_ENV === 'development'
   } = options;
 
@@ -31,7 +31,7 @@ module.exports = function cursorButtonLoader(source) {
   }
 
   // Check if it's already wrapped
-  if (source.includes('withCursorButton')) {
+  if (source.includes('withIdeButton')) {
     return source;
   }
 
@@ -58,17 +58,17 @@ module.exports = function cursorButtonLoader(source) {
   
   if (imports.length === 0) {
     // No imports found, add at top
-    const importStatement = `import { withCursorButton } from '${importPath}';\n`;
-    const wrappedExport = `export default withCursorButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
+    const importStatement = `import { withIdeButton } from '${importPath}';\n`;
+    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
     modifiedSource = importStatement + source.replace(/export\s+default\s+\w+;?/, wrappedExport);
   } else {
     const lastImportIndex = source.lastIndexOf(imports[imports.length - 1]) + imports[imports.length - 1].length;
     
     // Add import statement
-    const importStatement = `\nimport { withCursorButton } from '${importPath}';`;
+    const importStatement = `\nimport { withIdeButton } from '${importPath}';`;
     
     // Replace the export
-    const wrappedExport = `export default withCursorButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
+    const wrappedExport = `export default withIdeButton(${componentName}, '${relativePath}', { projectRoot: '${projectRoot}' });`;
     
     modifiedSource = source.slice(0, lastImportIndex) + 
                      importStatement + 

package/src/plugin.js

@@ -5,7 +5,7 @@ const path = require('path');
  * @typedef {Object} CursorHelperOptions
  * @property {string[]} [componentPaths=['src/components']] - Paths to scan for React components
  * @property {string} [projectRoot=process.cwd()] - Root directory of the project
- * @property {string} [importPath='nextjs-cursor-helper/withCursorButton'] - Import path for withCursorButton
+ * @property {string} [importPath='nextjs-cursor-helper/withIdeButton'] - Import path for withIdeButton
  * @property {boolean} [enabled=process.env.NODE_ENV === 'development'] - Enable/disable the plugin
  */
 
@@ -18,7 +18,7 @@ function withCursorHelper(options = {}) {
   const defaultOptions = {
     componentPaths: ['src/components'],
     projectRoot: process.cwd(),
-    importPath: 'nextjs-cursor-helper/withCursorButton',
+    importPath: 'nextjs-cursor-helper/withIdeButton',
     enabled: process.env.NODE_ENV === 'development'
   };
 

package/src/{withCursorButton.tsx → withIdeButton.tsx}

@@ -1,15 +1,33 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 
-interface CursorButtonProps {
+interface IdeButtonProps {
   filePath: string;
   projectRoot?: string;
+  ideType?: 'cursor' | 'vscode' | 'webstorm' | 'atom';
 }
 
-const CursorButton: React.FC<CursorButtonProps> = ({ filePath, projectRoot }) => {
+const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+  const getIdeUrl = (ide: string, path: string) => {
+    const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
+    
+    switch (ide) {
+      case 'cursor':
+        return `cursor://file${fullPath}`;
+      case 'vscode':
+        return `vscode://file${fullPath}`;
+      case 'webstorm':
+        return `webstorm://open?file=${fullPath}`;
+      case 'atom':
+        return `atom://open?path=${fullPath}`;
+      default:
+        return `cursor://file${fullPath}`;
+    }
+  };
+
   const handleClick = () => {
-    const fullPath = projectRoot ? `${projectRoot}/${filePath}` : filePath;
-    window.open(`cursor://file${fullPath}`, '_blank');
+    const url = getIdeUrl(ideType, filePath);
+    window.open(url, '_blank');
   };
 
   return (
@@ -33,26 +51,27 @@ const CursorButton: React.FC<CursorButtonProps> = ({ filePath, projectRoot }) =>
       }}
       onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
       onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.7')}
-      title={`Open ${filePath} in Cursor`}
+      title={`Open ${filePath} in ${ideType.toUpperCase()}`}
     >
       📝
     </button>
   );
 };
 
-export interface WithCursorButtonOptions {
+export interface WithIdeButtonOptions {
   projectRoot?: string;
   enabled?: boolean;
+  ideType?: 'cursor' | 'vscode' | 'webstorm' | 'atom';
 }
 
-export function withCursorButton<T extends object>(
+export function withIdeButton<T extends object>(
   WrappedComponent: React.ComponentType<T>,
   filePath: string,
-  options: WithCursorButtonOptions = {}
+  options: WithIdeButtonOptions = {}
 ) {
-  const { projectRoot, enabled = process.env.NODE_ENV === 'development' } = options;
+  const { projectRoot, enabled = process.env.NODE_ENV === 'development', ideType = 'cursor' } = options;
 
-  const WithCursorButtonComponent: React.FC<T> = (props) => {
+  const WithIdeButtonComponent: React.FC<T> = (props) => {
     const [isClient, setIsClient] = useState(false);
 
     useEffect(() => {
@@ -66,13 +85,13 @@ export function withCursorButton<T extends object>(
 
     return (
       <div style={{ position: 'relative' }}>
-        <CursorButton filePath={filePath} projectRoot={projectRoot} />
+        <IdeButton filePath={filePath} projectRoot={projectRoot} ideType={ideType} />
         <WrappedComponent {...props} />
       </div>
     );
   };
 
-  WithCursorButtonComponent.displayName = `withCursorButton(${WrappedComponent.displayName || WrappedComponent.name})`;
+  WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
 
-  return WithCursorButtonComponent;
+  return WithIdeButtonComponent;
 }

package/lib/withCursorButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface WithCursorButtonOptions {
-    projectRoot?: string;
-    enabled?: boolean;
-}
-export declare function withCursorButton<T extends object>(WrappedComponent: React.ComponentType<T>, filePath: string, options?: WithCursorButtonOptions): React.FC<T>;