feat(sql-to-rest): http and curl syntax highlighting

package-lock.json

@@ -27006,6 +27006,11 @@
         "node": "*"
       }
     },
+    "node_modules/highlightjs-curl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-curl/-/highlightjs-curl-1.3.0.tgz",
+      "integrity": "sha512-50UEfZq1KR0Lfk2Tr6xb/MUIZH3h10oNC0OTy9g7WELcs5Fgy/mKN1vEhuKTkKbdo8vr5F9GXstu2eLhApfQ3A=="
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -48423,6 +48428,7 @@
         "common-tags": "^1.8.2",
         "date-fns": "^2.30.0",
         "formik": "^2.2.9",
+        "highlightjs-curl": "^1.3.0",
         "input-otp": "^1.2.3",
         "lodash": "^4.17.21",
         "lucide-react": "^0.338.0",

packages/ui-patterns/SqlToRest/index.tsx

@@ -237,12 +237,12 @@ export default function SqlToRest() {
           queryGroup="language"
         >
           <Tabs.Panel id="http" label="HTTP" className="flex flex-col gap-4">
-            <CodeBlock language="bash" hideLineNumbers className="self-stretch">
+            <CodeBlock language="http" hideLineNumbers className="self-stretch">
               {rawHttp}
             </CodeBlock>
           </Tabs.Panel>
           <Tabs.Panel id="curl" label="cURL" className="flex flex-col gap-4">
-            <CodeBlock language="bash" hideLineNumbers className="self-stretch">
+            <CodeBlock language="curl" hideLineNumbers className="self-stretch">
               {curlCommand}
             </CodeBlock>
           </Tabs.Panel>

packages/ui/package.json

@@ -58,6 +58,7 @@
     "common-tags": "^1.8.2",
     "date-fns": "^2.30.0",
     "formik": "^2.2.9",
+    "highlightjs-curl": "^1.3.0",
     "input-otp": "^1.2.3",
     "lodash": "^4.17.21",
     "lucide-react": "^0.338.0",
@@ -65,6 +66,7 @@
     "openai": "^4.17.0",
     "postcss": "^8.4.31",
     "prop-types": "^15.7.2",
+    "react-accessible-treeview": "^2.8.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countdown": "^2.3.5",
     "react-day-picker": "^8.8.0",
@@ -83,8 +85,7 @@
     "tailwindcss-animate": "^1.0.6",
     "tailwindcss-radix": "^2.0.0",
     "yup": "^1.4.0",
-    "zod": "^3.22.3",
-    "react-accessible-treeview": "^2.8.3"
+    "zod": "^3.22.3"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.21.4",

packages/ui/src/components/CodeBlock/CodeBlock.tsx

@@ -15,10 +15,24 @@ import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
 import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
 import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript'
+import http from 'react-syntax-highlighter/dist/cjs/languages/hljs/http'
+import curl from 'highlightjs-curl'
 
 export interface CodeBlockProps {
   title?: ReactNode
-  language?: 'js' | 'jsx' | 'sql' | 'py' | 'bash' | 'ts' | 'dart' | 'json' | 'csharp' | 'kotlin'
+  language?:
+    | 'js'
+    | 'jsx'
+    | 'sql'
+    | 'py'
+    | 'bash'
+    | 'ts'
+    | 'dart'
+    | 'json'
+    | 'csharp'
+    | 'kotlin'
+    | 'curl'
+    | 'http'
   linesToHighlight?: number[]
   hideCopy?: boolean
   hideLineNumbers?: boolean
@@ -75,6 +89,8 @@ export const CodeBlock = ({
   SyntaxHighlighter.registerLanguage('csharp', csharp)
   SyntaxHighlighter.registerLanguage('json', json)
   SyntaxHighlighter.registerLanguage('kotlin', kotlin)
+  SyntaxHighlighter.registerLanguage('curl', curl)
+  SyntaxHighlighter.registerLanguage('http', http)
 
   const large = false
   // don't show line numbers if bash == lang

packages/ui/src/types/highlightjs-curl.d.ts

@@ -0,0 +1,4 @@
+declare module 'highlightjs-curl' {
+  const languageFunc: any
+  export = languageFunc
+}