@kurly-growth/growthman 0.1.13 → 0.1.14

package/components/endpoint-edit-dialog.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { MockEndpoint } from '@/types/endpoint'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
+  ssr: false,
+  loading: () => <div className="h-[400px] bg-gray-100 animate-pulse rounded" />,
+})
+
+interface EndpointEditDialogProps {
+  endpoint: MockEndpoint | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSave: (endpoint: Partial<MockEndpoint> & { id?: string }) => void
+}
+
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE']
+
+export function EndpointEditDialog({
+  endpoint,
+  open,
+  onOpenChange,
+  onSave,
+}: EndpointEditDialogProps) {
+  const [path, setPath] = useState('')
+  const [method, setMethod] = useState('GET')
+  const [description, setDescription] = useState('')
+  const [statusCode, setStatusCode] = useState(200)
+  const [responseBody, setResponseBody] = useState('{}')
+  const [jsonError, setJsonError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (endpoint) {
+      setPath(endpoint.path)
+      setMethod(endpoint.method)
+      setDescription(endpoint.description || '')
+      setStatusCode(endpoint.statusCode)
+      setResponseBody(JSON.stringify(endpoint.responseBody, null, 2))
+    } else {
+      setPath('')
+      setMethod('GET')
+      setDescription('')
+      setStatusCode(200)
+      setResponseBody('{}')
+    }
+    setJsonError(null)
+  }, [endpoint, open])
+
+  const handleSave = () => {
+    try {
+      const parsedBody = JSON.parse(responseBody)
+      setJsonError(null)
+      onSave({
+        id: endpoint?.id,
+        path,
+        method,
+        description: description || null,
+        statusCode,
+        responseBody: parsedBody,
+      })
+      onOpenChange(false)
+    } catch {
+      setJsonError('Invalid JSON format')
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[70vw] h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>
+            {endpoint ? 'Edit Endpoint' : 'Create New Endpoint'}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4 flex-1 overflow-hidden">
+          <div className="flex items-center gap-4">
+            <Label htmlFor="method" className="w-28 text-right shrink-0">
+              Method
+            </Label>
+            <select
+              id="method"
+              value={method}
+              onChange={(e) => setMethod(e.target.value)}
+              className="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2"
+            >
+              {HTTP_METHODS.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="path" className="w-28 text-right shrink-0">
+              Path
+            </Label>
+            <Input
+              id="path"
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+              placeholder="/v1/users/:userId"
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="description" className="w-28 text-right shrink-0">
+              Description
+            </Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="API description"
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Label htmlFor="statusCode" className="w-28 text-right shrink-0">
+              Status Code
+            </Label>
+            <Input
+              id="statusCode"
+              type="number"
+              value={statusCode}
+              onChange={(e) => setStatusCode(Number(e.target.value))}
+              className="flex-1"
+            />
+          </div>
+
+          <div className="flex items-start gap-4">
+            <Label className="w-28 text-right shrink-0 pt-2">Response Body</Label>
+            <div className="flex-1">
+              <div className="border rounded-md overflow-hidden">
+                <MonacoEditor
+                  height="calc(85vh - 320px)"
+                  language="json"
+                  theme="vs-dark"
+                  value={responseBody}
+                  onChange={(value) => setResponseBody(value || '{}')}
+                  options={{
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    formatOnPaste: true,
+                    automaticLayout: true,
+                    scrollBeyondLastLine: false,
+                  }}
+                />
+              </div>
+              {jsonError && (
+                <p className="text-red-500 text-sm mt-2">{jsonError}</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/endpoint-table.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { MockEndpoint } from '@/types/endpoint'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+
+interface EndpointTableProps {
+  endpoints: MockEndpoint[]
+  onEdit: (endpoint: MockEndpoint) => void
+  onDelete: (id: string) => void
+  onTest: (endpoint: MockEndpoint) => void
+  selectedIds: Set<string>
+  onSelectionChange: (ids: Set<string>) => void
+  lastModifiedId?: string | null
+}
+
+const methodColors: Record<string, string> = {
+  GET: 'bg-green-100 text-green-800',
+  POST: 'bg-blue-100 text-blue-800',
+  PUT: 'bg-yellow-100 text-yellow-800',
+  PATCH: 'bg-orange-100 text-orange-800',
+  DELETE: 'bg-red-100 text-red-800',
+}
+
+export function EndpointTable({
+  endpoints,
+  onEdit,
+  onDelete,
+  onTest,
+  selectedIds,
+  onSelectionChange,
+  lastModifiedId,
+}: EndpointTableProps) {
+  const allSelected = endpoints.length > 0 && endpoints.every((e) => selectedIds.has(e.id))
+  const someSelected = endpoints.some((e) => selectedIds.has(e.id)) && !allSelected
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      onSelectionChange(new Set(endpoints.map((e) => e.id)))
+    } else {
+      onSelectionChange(new Set())
+    }
+  }
+
+  const handleSelectOne = (id: string, checked: boolean) => {
+    const newSet = new Set(selectedIds)
+    if (checked) {
+      newSet.add(id)
+    } else {
+      newSet.delete(id)
+    }
+    onSelectionChange(newSet)
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[50px]">
+            <Checkbox
+              checked={allSelected}
+              ref={(el) => {
+                if (el) {
+                  (el as unknown as HTMLInputElement).indeterminate = someSelected
+                }
+              }}
+              onCheckedChange={(checked) => handleSelectAll(checked === true)}
+              aria-label="Select all"
+            />
+          </TableHead>
+          <TableHead className="w-[100px]">Method</TableHead>
+          <TableHead>Path</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead className="w-[200px]">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {endpoints.length === 0 ? (
+          <TableRow>
+            <TableCell colSpan={5} className="text-center text-gray-500">
+              No endpoints registered yet
+            </TableCell>
+          </TableRow>
+        ) : (
+          endpoints.map((endpoint) => (
+            <TableRow
+              key={endpoint.id}
+              className={lastModifiedId === endpoint.id ? 'bg-yellow-50' : ''}
+            >
+              <TableCell>
+                <Checkbox
+                  checked={selectedIds.has(endpoint.id)}
+                  onCheckedChange={(checked) => handleSelectOne(endpoint.id, checked === true)}
+                  aria-label={`Select ${endpoint.path}`}
+                />
+              </TableCell>
+              <TableCell>
+                <span
+                  className={`px-2 py-1 rounded text-xs font-medium ${methodColors[endpoint.method] || 'bg-gray-100'}`}
+                >
+                  {endpoint.method}
+                </span>
+              </TableCell>
+              <TableCell className="font-mono text-sm">{endpoint.path}</TableCell>
+              <TableCell className="text-gray-600">
+                {endpoint.description || '-'}
+              </TableCell>
+              <TableCell>
+                <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => onTest(endpoint)}
+                  >
+                    Test
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onEdit(endpoint)}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => onDelete(endpoint.id)}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  )
+}

package/components/openapi-upload-dialog.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { toast } from 'sonner'
+
+interface OpenAPIUploadDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onImportComplete: () => void
+}
+
+type ImportMode = 'url' | 'file'
+
+export function OpenAPIUploadDialog({
+  open,
+  onOpenChange,
+  onImportComplete,
+}: OpenAPIUploadDialogProps) {
+  const [mode, setMode] = useState<ImportMode>('url')
+  const [url, setUrl] = useState('')
+  const [file, setFile] = useState<File | null>(null)
+  const [pathPrefix, setPathPrefix] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0]
+    if (selectedFile) {
+      setFile(selectedFile)
+      setError(null)
+    }
+  }
+
+  const handleImport = async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      let response: Response
+
+      if (mode === 'url') {
+        if (!url.trim()) {
+          throw new Error('Please enter a URL')
+        }
+        response = await fetch('/api/endpoints/sync', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: url.trim(), pathPrefix: pathPrefix.trim() || undefined }),
+        })
+      } else {
+        if (!file) {
+          throw new Error('Please select a file')
+        }
+        const text = await file.text()
+        const spec = JSON.parse(text)
+        response = await fetch('/api/endpoints/import', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ spec, pathPrefix: pathPrefix.trim() || undefined }),
+        })
+      }
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Import failed')
+      }
+
+      const succeeded = data.succeeded ?? data.created
+      const failed = data.failed ?? 0
+      if (failed > 0) {
+        toast.warning(`Imported ${succeeded} endpoints (${failed} failed)`)
+      } else {
+        toast.success(`Successfully imported ${succeeded} endpoints`)
+      }
+      onImportComplete()
+      handleClose()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Import failed'
+      setError(message)
+      toast.error(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClose = () => {
+    setUrl('')
+    setFile(null)
+    setPathPrefix('')
+    setError(null)
+    onOpenChange(false)
+  }
+
+  const canImport = mode === 'url' ? url.trim().length > 0 : file !== null
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Import OpenAPI Specification</DialogTitle>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Mode Toggle */}
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant={mode === 'url' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setMode('url')}
+            >
+              From URL
+            </Button>
+            <Button
+              type="button"
+              variant={mode === 'file' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setMode('file')}
+            >
+              From File
+            </Button>
+          </div>
+
+          {/* URL Input */}
+          {mode === 'url' && (
+            <div className="space-y-2">
+              <Label htmlFor="url">OpenAPI JSON URL</Label>
+              <Input
+                id="url"
+                type="url"
+                placeholder="https://api.example.com/api-docs-json"
+                value={url}
+                onChange={(e) => {
+                  setUrl(e.target.value)
+                  setError(null)
+                }}
+              />
+              <p className="text-xs text-gray-500">
+                Enter the URL to your OpenAPI/Swagger JSON specification
+              </p>
+            </div>
+          )}
+
+          {/* File Upload */}
+          {mode === 'file' && (
+            <div
+              className="border-2 border-dashed rounded-lg p-8 text-center cursor-pointer hover:border-gray-400 transition-colors"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".json"
+                onChange={handleFileChange}
+                className="hidden"
+              />
+              {file ? (
+                <p className="text-sm">
+                  Selected: <span className="font-medium">{file.name}</span>
+                </p>
+              ) : (
+                <p className="text-gray-500">
+                  Click to select an OpenAPI JSON file
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Path Prefix */}
+          <div className="space-y-2">
+            <Label htmlFor="pathPrefix">Path Prefix (optional)</Label>
+            <Input
+              id="pathPrefix"
+              type="text"
+              placeholder="/reward"
+              value={pathPrefix}
+              onChange={(e) => setPathPrefix(e.target.value)}
+            />
+            <p className="text-xs text-gray-500">
+              Prefix to add to all imported paths (e.g., /reward → /reward/v1/users/:id)
+            </p>
+          </div>
+
+          {/* Error */}
+          {error && (
+            <p className="text-red-500 text-sm">{error}</p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleImport} disabled={!canImport || loading}>
+            {loading ? 'Importing...' : 'Import'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }