Merge pull request #12 from API-200/sdk

Typescript SDK

Author: MaximBudnik

packages/dashboard/src/app/(layout)/services/[id]/endpoints/[endpointId]/components/CodeExample.tsx

@@ -2,7 +2,7 @@
 
 import { FC, useState } from "react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Card, CardContent } from "@/components/ui/card"
+import {Card, CardContent, CardDescription, CardTitle} from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Copy, CopyCheck } from "lucide-react"
 import {getCodeExample, Language, Method} from "@/utils/getCodeExample";
@@ -12,10 +12,10 @@ interface ApiExampleProps {
     method: Method
 }
 
-
 export const ApiExample: FC<ApiExampleProps> = ({ url, method }) => {
     const [language, setLanguage] = useState<Language>("js")
     const [isCopied, setIsCopied] = useState(false)
+    const [isSdkCopied, setIsSdkCopied] = useState(false)
 
     const handleCopy = async () => {
         try {
@@ -27,38 +27,88 @@ export const ApiExample: FC<ApiExampleProps> = ({ url, method }) => {
         }
     }
 
+    const handleCopyInstallCommand = async () => {
+        try {
+            await navigator.clipboard.writeText("npx api200-generate-sdk -t YOUR_API_TOKEN")
+            setIsSdkCopied(true)
+            setTimeout(() => setIsSdkCopied(false), 2000)
+        } catch (err) {
+            console.error('Failed to copy install command:', err)
+        }
+    }
+
     return (
-        <Card className={`w-full bg-gray-100 shadow-none`}>
-            <CardContent className="p-4">
-                <div className="flex justify-between items-center mb-4">
-                    <Select value={language} onValueChange={(value) => setLanguage(value as Language)}>
-                        <SelectTrigger className="w-[120px] bg-white h-8 text-xs">
-                            <SelectValue placeholder="Select language" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="js">JavaScript</SelectItem>
-                            <SelectItem value="python">Python</SelectItem>
-                            <SelectItem value="php">PHP</SelectItem>
-                            <SelectItem value="go">Go</SelectItem>
-                            <SelectItem value="rust">Rust</SelectItem>
-                            <SelectItem value="java">Java</SelectItem>
-                            <SelectItem value="csharp">C#</SelectItem>
-                            <SelectItem value="curl">cURL</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 w-8 p-0">
-                        {isCopied ? (
-                            <CopyCheck className="h-4 w-4 text-green-500" />
-                        ) : (
-                            <Copy className="h-4 w-4" />
-                        )}
-                    </Button>
-                </div>
-                <pre className="text-sm overflow-x-auto">
-          <code>{getCodeExample(language, url, method)}</code>
-        </pre>
-            </CardContent>
-        </Card>
+        <div className="w-full space-y-4">
+            {/* SDK Installation Instructions for JavaScript */}
+            {language === "js" && (
+                <Card className="w-full bg-blue-50 border-blue-200 shadow-none">
+                    <CardContent className="p-4">
+                        <div className="flex justify-between items-start mb-3">
+                            <div>
+                                <CardTitle className="text-sm text-blue-900">
+                                    📦 SDK Installation
+                                </CardTitle>
+                                <CardDescription className="text-xs text-blue-700">
+                                    Generate your personalized SDK with your API token
+                                </CardDescription>
+                            </div>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={handleCopyInstallCommand}
+                                className="h-8 w-8 p-0 border-blue-300 hover:bg-blue-100"
+                            >
+                                {isSdkCopied? <CopyCheck className="h-3 w-3 text-blue-600"/> :<Copy className="h-3 w-3 text-blue-600" />}
+
+                            </Button>
+                        </div>
+                        <div className="bg-white rounded border border-blue-200 p-3">
+                            <code className="text-sm text-blue-800 font-mono">
+                                npx api200-generate-sdk -t YOUR_API_TOKEN
+                            </code>
+                        </div>
+                    </CardContent>
+                </Card>
+            )}
+
+            {/* Main Code Example */}
+            <Card className="w-full bg-gray-100 shadow-none">
+                <CardContent className="p-4">
+                    <div className="flex justify-between items-center mb-4">
+                        <Select value={language} onValueChange={(value) => setLanguage(value as Language)}>
+                            <SelectTrigger className="w-[160px] bg-white h-8 text-xs">
+                                <SelectValue placeholder="Select language" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="js">
+                                    <div className="flex items-center gap-2">
+                                        <span>JavaScript</span>
+                                        <span className="text-xs bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded">SDK</span>
+                                    </div>
+                                </SelectItem>
+                                <SelectItem value="python">Python</SelectItem>
+                                <SelectItem value="php">PHP</SelectItem>
+                                <SelectItem value="go">Go</SelectItem>
+                                <SelectItem value="rust">Rust</SelectItem>
+                                <SelectItem value="java">Java</SelectItem>
+                                <SelectItem value="csharp">C#</SelectItem>
+                                <SelectItem value="curl">cURL</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button variant="outline" size="sm" onClick={handleCopy} className="h-8 w-8 p-0">
+                            {isCopied ? (
+                                <CopyCheck className="h-4 w-4 text-green-500" />
+                            ) : (
+                                <Copy className="h-4 w-4" />
+                            )}
+                        </Button>
+                    </div>
+                    <pre className="text-sm overflow-x-auto">
+                        <code>{getCodeExample(language, url, method)}</code>
+                    </pre>
+                </CardContent>
+            </Card>
+        </div>
     )
 }
 

packages/dashboard/src/utils/getCodeExample.ts

@@ -1,28 +1,83 @@
-
 export type Method = "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
 export type Language = "js" | "python" | "curl" | "php" | "go" | "rust" | "java" | "csharp"
 
+// Helper function to generate SDK method name (matching your SDK generator logic)
+function generateSDKMethodName(method: string, path: string): string {
+    return `${method.toLowerCase()}_${path.replace(/^\//, '').replace(/\//g, '_')}`.replace(/{([^}]+)}/g, 'by_$1');
+}
+
+// Helper function to convert service name to camelCase (matching your SDK generator logic)
+function toCamelCase(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+// Helper function to extract service name and endpoint path from URL
+function parseApiUrl(url: string): { serviceName: string; endpointPath: string } {
+    // Extract from URL like: https://eu.api200.co/api/users/profile/{id}
+    const urlParts = url.split('/api/');
+    if (urlParts.length < 2) {
+        return { serviceName: 'service', endpointPath: '/endpoint' };
+    }
+
+    const pathParts = urlParts[1].split('/');
+    const serviceName = pathParts[0] || 'service';
+    const endpointPath = '/' + pathParts.slice(1).join('/');
+
+    return { serviceName, endpointPath };
+}
+
+// Helper function to generate parameter example based on URL path
+function generateSDKParams(url: string, method: Method): string {
+    const pathParams = url.match(/{([^}]+)}/g);
+    const hasRequestBody = ['POST', 'PUT', 'PATCH'].includes(method);
+
+    if (!pathParams && !hasRequestBody) {
+        return '';
+    }
 
+    const params: string[] = [];
+
+    // Add path parameters
+    if (pathParams) {
+        pathParams.forEach(param => {
+            const paramName = param.replace(/[{}]/g, '');
+            params.push(`          ${paramName}: "your_${paramName}_value"`);
+        });
+    }
+
+    // Add request body for POST, PUT, PATCH
+    if (hasRequestBody) {
+        params.push(`  requestBody: {
+    // Your request data here
+    name: "example",
+    value: "data"
+  }`);
+    }
+
+    return params.length > 0 ? `{\n${params.join(',\n')}\n     }` : '';
+}
 
 export const getCodeExample = (language: Language, url: string, method: Method): string => {
     const headers = '{"x-api-key": "YOUR_API_KEY"}'
 
-    const examples = {
-        js: `const fetchData = async () => {
-  try {
-    const response = await fetch("${url}", {
-      method: "${method}",
-      headers: ${headers}
-    });
-    const data = await response.json();
-    console.log(data);
-  } catch (error) {
-    console.error('Error:', error);
-  }
+    // For JavaScript, show SDK usage instead of fetch
+    if (language === 'js') {
+        const { serviceName, endpointPath } = parseApiUrl(url);
+        const camelCaseServiceName = toCamelCase(serviceName);
+        const methodName = generateSDKMethodName(method, endpointPath);
+        const params = generateSDKParams(url, method);
+
+        return `
+import api200 from '@lib/api200';
+
+const fetchData = async () => {
+     const { data, error } = await api200.${camelCaseServiceName}.${methodName}.${method.toLowerCase()}(${params ? params : ''});
 };
 
-fetchData();`,
+fetchData();`;
+    }
 
+    const examples = {
         python: `import requests
 
 url = "${url}"
@@ -138,5 +193,5 @@ class Program
 }`
     }
 
-    return examples[language] || examples.js
+    return examples[language]
 }

packages/js-sdk/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.env

packages/js-sdk/README.md

@@ -0,0 +1,131 @@
+# API200 SDK Generator
+
+A TypeScript SDK generator that automatically creates a fully-typed client library for your API200 services. Generate type-safe API clients with zero configuration and full IDE support.
+
+## Features
+
+- **Automatic Type Generation**: Creates TypeScript interfaces from your API schemas
+- **Full Type Safety**: Compile-time error checking for API calls
+- **Zero Configuration**: Works out of the box with sensible defaults
+- **Path & Query Parameters**: Handles both path variables and query strings
+- **Request Body Support**: Type-safe request body handling for POST/PUT/PATCH
+- **Error Handling**: Structured error responses with status codes
+- **IDE Support**: Full IntelliSense and autocomplete support
+
+## Prerequisites
+
+1. **Register with API200**: Sign up at [API200](https://api200.co) and set up your API proxy platform
+2. **Import/Create Services**: Add your API services to the API200 platform
+3. **Get API Token**: Obtain your user token from the API200 dashboard
+
+## Installation
+
+Generate your SDK using npx (no installation required):
+
+```bash
+npx api200-generate-sdk -t YOUR_API_TOKEN
+```
+
+## Command Options
+
+| Option | Short | Description | Default |
+|--------|-------|-------------|---------|
+| `--token` | `-t` | **Required.** Your API200 user token ||
+| `--base-url` | `-u` | Base API URL | `https://eu.api200.co/api` |
+| `--output` | `-o` | Output directory | `./src/lib/api200` or `./lib/api200` |
+
+### Examples
+
+```bash
+# Basic usage
+npx api200-generate-sdk -t your_token_here
+
+# Custom output directory
+npx api200-generate-sdk -t your_token_here -o ./src/api
+
+# Different API region
+npx api200-generate-sdk -t your_token_here -u https://us.api200.co/api
+```
+
+## Generated Structure
+
+The SDK generator creates the following file structure:
+
+```
+lib/api200/
+├── index.ts          # Main export file with configured client
+├── api200.ts         # Core client and request handling
+├── types.ts          # TypeScript type definitions
+└── [service-name].ts # Individual service files
+```
+
+## Usage Example
+
+### Usage
+
+```typescript
+import api200 from './lib/api200';
+
+// GET request with path parameter
+const { data, error } = await api200.users.getUserById.get({ 
+  id: "123" 
+});
+
+if (error) {
+  console.error('API Error:', error.message);
+} else {
+  console.log('User data:', data);
+}
+```
+
+### Method Naming Convention
+
+Methods are generated using the pattern: `[httpMethod][EndpointPath]`
+
+Examples:
+- `GET /users/{id}` → `getUserById.get()`
+- `POST /users` → `createUser.post()`
+- `PUT /users/{id}` → `updateUserById.put()`
+- `DELETE /orders/{orderId}` → `deleteOrderByOrderId.delete()`
+
+## Error Handling
+
+All API methods return a consistent response structure:
+
+```typescript
+interface API200Response<T> {
+  data: T | null;
+  error: API200Error | null;
+}
+
+interface API200Error {
+  message: string;
+  status?: number;
+  details?: any;
+}
+```
+
+## Types
+
+The generator creates comprehensive TypeScript types for all your APIs:
+
+## Updating Your SDK
+
+When you add new services or modify existing ones in API200:
+
+1. **Regenerate the SDK**:
+   ```bash
+   npx api200-generate-sdk -t YOUR_API_TOKEN
+   ```
+
+2. **The generator will**:
+    - Fetch the latest service definitions
+    - Update all type definitions
+    - Add new service methods
+    - Preserve your existing configuration
+
+3. **No breaking changes**: Existing code continues to work while new features become available
+
+## Support
+
+- [GitHub](https://github.com/API-200/api200/discussions)