feat: add survey curl example code

Author: moonrailgun

src/client/components/survey/SurveyUsageBtn.tsx

@@ -13,7 +13,11 @@ import { LuCode2 } from 'react-icons/lu';
 import { trpc } from '@/api/trpc';
 import { useCurrentWorkspaceId } from '@/store/user';
 import { CodeBlock } from '../CodeBlock';
-import { generateSurveyExampleCode } from '@/utils/survey';
+import {
+  generateSurveyExampleCurlCode,
+  generateSurveyExampleSDKCode,
+} from '@/utils/survey';
+import { CodeExample } from '../CodeExample';
 
 interface SurveyUsageBtnProps {
   surveyId: string;
@@ -29,8 +33,6 @@ export const SurveyUsageBtn: React.FC<SurveyUsageBtnProps> = React.memo(
       surveyId,
     });
 
-    const exampleCode = generateSurveyExampleCode(window.location.origin, info);
-
     return (
       <Dialog>
         <DialogTrigger asChild>
@@ -46,9 +48,33 @@ export const SurveyUsageBtn: React.FC<SurveyUsageBtnProps> = React.memo(
             </DialogDescription>
           </DialogHeader>
 
-          <CodeBlock code="npm install tianji-client-sdk" />
+          <CodeExample
+            className="overflow-hidden"
+            example={{
+              curl: {
+                label: 'curl',
+                code: generateSurveyExampleCurlCode(
+                  window.location.origin,
+                  info
+                ),
+              },
+              sdk: {
+                label: 'sdk',
+                element: (
+                  <div className="flex flex-col gap-1">
+                    <CodeBlock code="npm install tianji-client-sdk" />
 
-          <CodeBlock code={exampleCode} />
+                    <CodeBlock
+                      code={generateSurveyExampleSDKCode(
+                        window.location.origin,
+                        info
+                      )}
+                    />
+                  </div>
+                ),
+              },
+            }}
+          />
         </DialogContent>
       </Dialog>
     );

src/client/utils/__snapshots__/survey.spec.ts.snap

@@ -1,6 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`survey > example code 1`] = `
+exports[`survey > example curl code 1`] = `
+"curl -X POST https://example.com/open/workspace/<workspaceId>/survey/<surveyId>/submit \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "payload": {
+      "textField": "Text"
+    }
+  }'"
+`;
+
+exports[`survey > example sdk code 1`] = `
 "import { submitSurvey, initOpenapiSDK } from 'tianji-client-sdk';
 
 initOpenapiSDK('https://example.com');

src/client/utils/survey.spec.ts

@@ -1,10 +1,32 @@
 import { describe, test, expect } from 'vitest';
-import { generateSurveyExampleCode } from './survey';
+import {
+  generateSurveyExampleCurlCode,
+  generateSurveyExampleSDKCode,
+} from './survey';
 
 describe('survey', () => {
-  test('example code', () => {
+  test('example sdk code', () => {
     expect(
-      generateSurveyExampleCode('https://example.com', {
+      generateSurveyExampleSDKCode('https://example.com', {
+        id: '<surveyId>',
+        workspaceId: '<workspaceId>',
+        name: 'Test',
+        payload: {
+          items: [
+            {
+              name: 'textField',
+              label: 'Text',
+              type: 'text',
+            },
+          ],
+        },
+      })
+    ).matchSnapshot();
+  });
+
+  test('example curl code', () => {
+    expect(
+      generateSurveyExampleCurlCode('https://example.com', {
         id: '<surveyId>',
         workspaceId: '<workspaceId>',
         name: 'Test',

src/client/utils/survey.ts

@@ -1,9 +1,9 @@
 import { AppRouterOutput } from '@/api/trpc';
 
 /**
- * Generate survey example code
+ * Generate survey example sdk code
  */
-export function generateSurveyExampleCode(
+export function generateSurveyExampleSDKCode(
   host: string,
   info:
     | Pick<
@@ -42,3 +42,29 @@ async function submitForm(${fields.map((field) => field.name).join(', ')}) {
 
   return exampleCode;
 }
+
+/**
+ * Generate survey example curl code
+ */
+export function generateSurveyExampleCurlCode(
+  host: string,
+  info:
+    | Pick<
+        NonNullable<AppRouterOutput['survey']['get']>,
+        'id' | 'name' | 'workspaceId' | 'payload'
+      >
+    | null
+    | undefined
+): string {
+  const fields = info?.payload.items ?? [];
+
+  const exampleCode = `curl -X POST ${host}/open/workspace/${info?.workspaceId}/survey/${info?.id}/submit \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "payload": {
+      ${fields.map((field) => `"${field.name}": "${field.label}"`).join(',\n      ')}
+    }
+  }'`;
+
+  return exampleCode;
+}

src/client/vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
   },
   clearScreen: false,
   server: {
-    // host: '0.0.0.0',
+    host: '127.0.0.1',
     proxy: {
       '/socket.io': {
         target: 'ws://localhost:12345',
@@ -34,6 +34,9 @@ export default defineConfig({
       '/trpc': {
         target: 'http://localhost:12345',
       },
+      '/open': {
+        target: 'http://localhost:12345',
+      },
       '/lh': {
         target: 'http://localhost:12345',
       },