shiny-url-input-box 1.0.1 → 1.1.0

package/README.md

@@ -62,3 +62,51 @@ function App() {
 - `buttonText` (string, optional) - Submit button text (default: "Shorten URL")
 - `className` (string, optional) - Additional CSS class for the wrapper
 
+
+## Programmatic Usage
+
+You can also use the exported `shortenUrl` function to shorten URLs programmatically without using the UI component.
+
+```javascript
+import { shortenUrl } from 'shiny-url-input-box';
+
+// Inside an async function
+try {
+  const result = await shortenUrl(
+    'https://example.com/long/url',
+    'YOUR_API_KEY',
+    { apiBaseUrl: 'https://shinyurl-backend.onrender.com' } // Optional
+  );
+
+  if (result.success) {
+    console.log('Short URL:', result.data.shortUrl);
+  } else {
+    console.error('Error:', result.message);
+  }
+} catch (error) {
+  console.error('Failed to shorten URL:', error);
+}
+```
+
+### `shortenUrl` Arguments
+
+1. `url` (string): The URL to shorten.
+2. `apiKey` (string): Your API key.
+3. `options` (object, optional):
+   - `apiBaseUrl` (string): Base URL of the backend API. Defaults to window origin or shinyurl-backend.onrender.com.
+
+### Return Value
+
+Returns a Promise that resolves to:
+
+```typescript
+interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+```

package/dist/ShinyUrlInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShinyUrlInput.d.ts","sourceRoot":"","sources":["../src/ShinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAqCD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+O/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ShinyUrlInput.d.ts","sourceRoot":"","sources":["../src/ShinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,oBAAoB,CAAC;AAG5B,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkN/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ShinyUrlInput.js

@@ -2,29 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from 'react';
 import './TinyUrlInput.css';
-// Security: Validate and sanitize URL
-const isValidUrl = (string) => {
-    try {
-        const url = new URL(string);
-        // Only allow http and https protocols
-        return url.protocol === 'http:' || url.protocol === 'https:';
-    }
-    catch (_) {
-        return false;
-    }
-};
-// Security: Sanitize input to prevent XSS
-const sanitizeInput = (input) => {
-    return input.trim().replace(/[<>]/g, '');
-};
-// Get default API base URL (same origin or localhost:5000)
-const getDefaultApiBaseUrl = () => {
-    if (typeof window !== 'undefined') {
-        // Use same origin if available
-        return window.location.origin;
-    }
-    return 'https://shinyurl-backend.onrender.com';
-};
+import { shortenUrl, getDefaultApiBaseUrl, sanitizeInput, isValidUrl } from './shortener';
 const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter URL to shorten', buttonText = 'Shorten URL', className = '', installationPageUrl }) => {
     const [url, setUrl] = useState('');
     const [loading, setLoading] = useState(false);
@@ -93,34 +71,13 @@ const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter
         setShortUrl('');
         setCopied(false);
         try {
-            // Security: Use baseUrl which is validated
-            const response = await fetch(`${baseUrl}/api/shorten`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-API-Key': apiKey,
-                },
-                body: JSON.stringify({ originalUrl: sanitizedUrl }),
-            });
-            if (!response.ok) {
-                // Try to get error message from response
-                let errorMessage = 'Failed to shorten URL';
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData.message || errorMessage;
-                }
-                catch (e) {
-                    errorMessage = `Server error: ${response.status} ${response.statusText}`;
-                }
-                throw new Error(errorMessage);
-            }
-            const data = await response.json();
-            if (!data.success || !data.data) {
-                throw new Error(data.message || 'Failed to shorten URL');
+            const result = await shortenUrl(sanitizedUrl, apiKey, { apiBaseUrl: baseUrl });
+            if (!result.success || !result.data) {
+                throw new Error(result.message || 'Failed to shorten URL');
             }
-            setShortUrl(data.data.shortUrl);
+            setShortUrl(result.data.shortUrl);
             if (onSuccess) {
-                onSuccess(data);
+                onSuccess(result);
             }
         }
         catch (err) {
@@ -128,10 +85,6 @@ const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter
             if (err instanceof Error) {
                 errorMessage = err.message;
             }
-            // Handle network errors
-            if (err instanceof TypeError && err.message.includes('fetch')) {
-                errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
-            }
             setError(errorMessage);
             if (onError) {
                 onError(errorMessage);

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 export type { ShinyUrlInputProps } from './ShinyUrlInput';
+export * from './shortener';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -1 +1,2 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
+export * from './shortener';

package/dist/shortener.d.ts

@@ -0,0 +1,17 @@
+export interface ShortenResponse {
+    success: boolean;
+    data?: {
+        originalUrl: string;
+        shortUrl: string;
+        shortCode: string;
+    };
+    message?: string;
+}
+export interface ShortenOptions {
+    apiBaseUrl?: string;
+}
+export declare const isValidUrl: (string: string) => boolean;
+export declare const sanitizeInput: (input: string) => string;
+export declare const getDefaultApiBaseUrl: () => string;
+export declare const shortenUrl: (originalUrl: string, apiKey: string, options?: ShortenOptions) => Promise<ShortenResponse>;
+//# sourceMappingURL=shortener.d.ts.map

package/dist/shortener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortener.d.ts","sourceRoot":"","sources":["../src/shortener.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,KAAG,OAQ3C,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAAO,MAMvC,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,UAAS,cAAmB,KAC3B,OAAO,CAAC,eAAe,CAiDzB,CAAC"}

package/dist/shortener.js

@@ -0,0 +1,66 @@
+// Security: Validate and sanitize URL
+export const isValidUrl = (string) => {
+    try {
+        const url = new URL(string);
+        // Only allow http and https protocols
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_) {
+        return false;
+    }
+};
+// Security: Sanitize input to prevent XSS
+export const sanitizeInput = (input) => {
+    return input.trim().replace(/[<>]/g, '');
+};
+// Get default API base URL (same origin or localhost:5000)
+export const getDefaultApiBaseUrl = () => {
+    if (typeof window !== 'undefined') {
+        // Use same origin if available
+        return window.location.origin;
+    }
+    return 'https://shinyurl-backend.onrender.com';
+};
+export const shortenUrl = async (originalUrl, apiKey, options = {}) => {
+    const sanitizedUrl = sanitizeInput(originalUrl);
+    if (!sanitizedUrl) {
+        return { success: false, message: 'Please enter a URL' };
+    }
+    if (!isValidUrl(sanitizedUrl)) {
+        return { success: false, message: 'Please enter a valid URL (must start with http:// or https://)' };
+    }
+    const baseUrl = options.apiBaseUrl || getDefaultApiBaseUrl();
+    try {
+        const response = await fetch(`${baseUrl}/api/shorten`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-Key': apiKey,
+            },
+            body: JSON.stringify({ originalUrl: sanitizedUrl }),
+        });
+        if (!response.ok) {
+            let errorMessage = 'Failed to shorten URL';
+            try {
+                const errorData = await response.json();
+                errorMessage = errorData.message || errorMessage;
+            }
+            catch (e) {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            return { success: false, message: errorMessage };
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (err) {
+        let errorMessage = 'An error occurred';
+        if (err instanceof Error) {
+            errorMessage = err.message;
+        }
+        if (err instanceof TypeError && typeof err.message === 'string' && err.message.includes('fetch')) {
+            errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+        }
+        return { success: false, message: errorMessage };
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiny-url-input-box",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A reusable React component for generating ShinyURLs",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/ShinyUrlInput.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useMemo, useEffect } from 'react';
 import './TinyUrlInput.css';
+import { shortenUrl, ShortenResponse, getDefaultApiBaseUrl, sanitizeInput, isValidUrl } from './shortener';
 
 export interface ShinyUrlInputProps {
   apiKey: string;
@@ -14,41 +15,6 @@ export interface ShinyUrlInputProps {
   installationPageUrl?: string;
 }
 
-interface ShortenResponse {
-  success: boolean;
-  data?: {
-    originalUrl: string;
-    shortUrl: string;
-    shortCode: string;
-  };
-  message?: string;
-}
-
-// Security: Validate and sanitize URL
-const isValidUrl = (string: string): boolean => {
-  try {
-    const url = new URL(string);
-    // Only allow http and https protocols
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch (_) {
-    return false;
-  }
-};
-
-// Security: Sanitize input to prevent XSS
-const sanitizeInput = (input: string): string => {
-  return input.trim().replace(/[<>]/g, '');
-};
-
-// Get default API base URL (same origin or localhost:5000)
-const getDefaultApiBaseUrl = (): string => {
-  if (typeof window !== 'undefined') {
-    // Use same origin if available
-    return window.location.origin;
-  }
-  return 'https://shinyurl-backend.onrender.com';
-};
-
 const ShinyUrlInput: React.FC<ShinyUrlInputProps> = ({
   apiKey,
   apiBaseUrl,
@@ -135,51 +101,22 @@ const ShinyUrlInput: React.FC<ShinyUrlInputProps> = ({
     setCopied(false);
 
     try {
-      // Security: Use baseUrl which is validated
-      const response = await fetch(`${baseUrl}/api/shorten`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-API-Key': apiKey,
-        },
-        body: JSON.stringify({ originalUrl: sanitizedUrl }),
-      });
+      const result = await shortenUrl(sanitizedUrl, apiKey, { apiBaseUrl: baseUrl });
 
-      if (!response.ok) {
-        // Try to get error message from response
-        let errorMessage = 'Failed to shorten URL';
-        try {
-          const errorData: ShortenResponse = await response.json();
-          errorMessage = errorData.message || errorMessage;
-        } catch (e) {
-          errorMessage = `Server error: ${response.status} ${response.statusText}`;
-        }
-        throw new Error(errorMessage);
-      }
-
-      const data: ShortenResponse = await response.json();
-
-      if (!data.success || !data.data) {
-        throw new Error(data.message || 'Failed to shorten URL');
+      if (!result.success || !result.data) {
+        throw new Error(result.message || 'Failed to shorten URL');
       }
 
-      setShortUrl(data.data.shortUrl);
+      setShortUrl(result.data.shortUrl);
       
       if (onSuccess) {
-        onSuccess(data);
+        onSuccess(result);
       }
     } catch (err) {
       let errorMessage = 'An error occurred';
-      
       if (err instanceof Error) {
         errorMessage = err.message;
       }
-      
-      // Handle network errors
-      if (err instanceof TypeError && err.message.includes('fetch')) {
-        errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
-      }
-      
       setError(errorMessage);
       
       if (onError) {

package/src/index.ts

@@ -1,3 +1,4 @@
 export { default as ShinyUrlInput } from './ShinyUrlInput';
 export type { ShinyUrlInputProps } from './ShinyUrlInput';
+export * from './shortener';
 

package/src/shortener.ts

@@ -0,0 +1,93 @@
+export interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+
+export interface ShortenOptions {
+  apiBaseUrl?: string;
+}
+
+// Security: Validate and sanitize URL
+export const isValidUrl = (string: string): boolean => {
+  try {
+    const url = new URL(string);
+    // Only allow http and https protocols
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+};
+
+// Security: Sanitize input to prevent XSS
+export const sanitizeInput = (input: string): string => {
+  return input.trim().replace(/[<>]/g, '');
+};
+
+// Get default API base URL (same origin or localhost:5000)
+export const getDefaultApiBaseUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    // Use same origin if available
+    return window.location.origin;
+  }
+  return 'https://shinyurl-backend.onrender.com';
+};
+
+export const shortenUrl = async (
+  originalUrl: string,
+  apiKey: string,
+  options: ShortenOptions = {}
+): Promise<ShortenResponse> => {
+  const sanitizedUrl = sanitizeInput(originalUrl);
+
+  if (!sanitizedUrl) {
+    return { success: false, message: 'Please enter a URL' };
+  }
+
+  if (!isValidUrl(sanitizedUrl)) {
+    return { success: false, message: 'Please enter a valid URL (must start with http:// or https://)' };
+  }
+
+  const baseUrl = options.apiBaseUrl || getDefaultApiBaseUrl();
+
+  try {
+    const response = await fetch(`${baseUrl}/api/shorten`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-Key': apiKey,
+      },
+      body: JSON.stringify({ originalUrl: sanitizedUrl }),
+    });
+
+    if (!response.ok) {
+      let errorMessage = 'Failed to shorten URL';
+      try {
+        const errorData = await response.json();
+        errorMessage = errorData.message || errorMessage;
+      } catch (e) {
+        errorMessage = `Server error: ${response.status} ${response.statusText}`;
+      }
+      return { success: false, message: errorMessage };
+    }
+
+    const data: ShortenResponse = await response.json();
+    return data;
+  } catch (err: unknown) {
+    let errorMessage = 'An error occurred';
+    
+    if (err instanceof Error) {
+      errorMessage = err.message;
+    }
+    
+    if (err instanceof TypeError && typeof err.message === 'string' && err.message.includes('fetch')) {
+      errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+    }
+    
+    return { success: false, message: errorMessage };
+  }
+};