SQL to REST translator

apps/database-new/tsconfig.json

@@ -24,6 +24,12 @@
  "@ui/*": ["./../../packages/ui/src/*"]
  }
  },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ "./../../packages/ui/src/**/*.d.ts"
+ ],
  "exclude": ["node_modules"]
 }

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -991,6 +991,11 @@ export const api: NavMenuConstant = {
  url: '/guides/api/rest/generating-types',
  items: [],
  },
+ {
+ name: 'Tools',
+ url: '/guides/api',
+ items: [{ name: 'SQL to REST API Translator', url: '/guides/api/sql-to-rest' }],
+ },
  {
  name: 'Guides',
  url: '/guides/api',

apps/docs/components/index.tsx

@@ -34,10 +34,10 @@ import { NavData } from './NavData'
 import { SharedData } from './SharedData'
 
 // Partials
+import HuggingFaceDeployment from './MDX/ai/quickstart_hf_deployment.mdx'
 import AuthRateLimits from './MDX/auth_rate_limits.mdx'
 import DatabaseSetup from './MDX/database_setup.mdx'
 import GetSessionWarning from './MDX/get_session_warning.mdx'
-import HuggingFaceDeployment from './MDX/ai/quickstart_hf_deployment.mdx'
 import KotlinProjectSetup from './MDX/kotlin_project_setup.mdx'
 import MigrationWarnings from './MDX/migration_warnings.mdx'
 import OAuthPkceFlow from './MDX/oauth_pkce_flow.mdx'
@@ -47,6 +47,7 @@ import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supab
 import SocialProviderSetup from './MDX/social_provider_setup.mdx'
 
 // Icons
+import { IconArrowDown, IconCheck } from 'ui'
 import {
  IconMenuApi,
  IconMenuAuth,
@@ -69,9 +70,9 @@ import {
  IconMenuStorage,
  IconMenuSwift,
 } from './Navigation/NavigationMenu/HomeMenuIcons'
-import { IconArrowDown, IconCheck } from 'ui'
 
 // Heavy/rare (lazy-loaded)
+import SqlToRest from '@ui-patterns/SqlToRest'
 import { AppleSecretGenerator } from './AppleSecretGenerator'
 import { AuthSmsProviderConfig } from './AuthSmsProviderConfig'
 import { Extensions } from './Extensions'
@@ -160,6 +161,7 @@ const components = {
  SharedData,
  SocialProviderSettingsSupabase,
  SocialProviderSetup,
+ SqlToRest,
  StepHikeCompact,
  TabPanel,
  Tabs,

apps/docs/content/guides/api/sql-to-rest.mdx

@@ -0,0 +1,32 @@
+---
+id: 'sql-to-rest'
+title: 'SQL to REST API Translator'
+subtitle: 'Translate SQL queries to HTTP requests and Supabase client code'
+description: 'Translate SQL queries to HTTP requests and Supabase client code'
+---
+
+Sometimes it's challenging to translate SQL queries to the equivalent [PostgREST](https://postgrest.org/) request or Supabase client code. Use this tool to help with this translation.
+
+<Admonition type="info">
+
+PostgREST supports a subset of SQL, so not all SQL queries will translate.
+
+</Admonition>
+
+<SqlToRest
+ defaultValue={stripIndent`
+ select
+ title,
+ description
+ from
+ books
+ where
+ description ilike '%cheese%'
+ order by
+ title desc
+ limit
+ 5
+ offset
+ 10
+ `}
+/>

apps/docs/pages/guides/api/[[...slug]].tsx

@@ -1,3 +1,4 @@
+import { stripIndent } from 'common-tags'
 import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
 import { MDXRemote } from 'next-mdx-remote'
 
@@ -23,7 +24,7 @@ export default function ApiGuide({
 
  return (
  <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Api}>
- <MDXRemote {...mdxSource} components={components} />
+ <MDXRemote {...mdxSource} components={components} scope={{ stripIndent }} />
  </Layout>
  )
 }

apps/docs/tsconfig.json

@@ -27,7 +27,8 @@
  "**/*.ts",
  "**/*.tsx",
  "pages/guides/append-test.js",
- "jest.config.mjs"
+ "jest.config.mjs",
+ "./../../packages/ui/src/**/*.d.ts"
  ],
  "exclude": ["node_modules"]
 }

apps/storybook/tsconfig.json

@@ -5,6 +5,6 @@
  "@ui/*": ["./../../packages/ui/src/*"] // handle ui package paths
  }
  },
- "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "./../../packages/ui/src/**/*.d.ts"],
  "exclude": ["node_modules"]
 }

apps/studio/jest.config.mjs

@@ -27,7 +27,12 @@ const config = {
  testEnvironment: 'jsdom',
  testTimeout: 10000,
  testRegex: '(.*\\.test.(js|jsx|ts|tsx)$)',
- setupFiles: ['jest-canvas-mock', './tests/setup/radix', './tests/setup/polyfills'],
+ setupFiles: [
+ 'jest-canvas-mock',
+ './tests/setup/radix',
+ './tests/setup/polyfills',
+ './tests/setup/fetch-mock',
+ ],
 }
 
 export default createJestConfig(config)

apps/studio/next.config.js

@@ -429,7 +429,15 @@ const nextConfig = {
  'vercel.com',
  ],
  },
- transpilePackages: ['ui', 'ui-patterns', 'common', 'shared-data', 'api-types', 'icons'],
+ transpilePackages: [
+ 'ui',
+ 'ui-patterns',
+ 'common',
+ 'shared-data',
+ 'api-types',
+ 'icons',
+ 'libpg-query',
+ ],
  webpack(config) {
  config.module?.rules
  .find((rule) => rule.oneOf)

apps/studio/package.json

@@ -145,6 +145,7 @@
  "jest": "^29.7.0",
  "jest-canvas-mock": "^2.5.2",
  "jest-environment-jsdom": "^29.7.0",
+ "jest-fetch-mock": "^3.0.3",
  "postcss": "^8.4.31",
  "prettier": "^4.0.0-alpha.8",
  "storybook-dark-mode": "^3.0.1",

apps/studio/tests/setup/fetch-mock.js

@@ -0,0 +1,22 @@
+import { enableFetchMocks } from 'jest-fetch-mock'
+import { readFile } from 'fs/promises'
+import { fileURLToPath } from 'url'
+
+enableFetchMocks()
+
+fetch.mockResponse(async (request) => {
+ // Support loading .wasm files in Jest jsdom environment
+ if (request.url.endsWith('.wasm')) {
+ const filePath = fileURLToPath(request.url)
+ const file = await readFile(filePath)
+ return {
+ status: 200,
+ body: file,
+ }
+ } else {
+ return {
+ status: 404,
+ body: 'Not Found',
+ }
+ }
+})

apps/studio/tsconfig.json

@@ -26,6 +26,14 @@
  }
  ]
  },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", ".next/types/**/*.ts"],
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "**/*.js",
+ "**/*.jsx",
+ ".next/types/**/*.ts",
+ "./../../packages/ui/src/**/*.d.ts"
+ ],
  "exclude": ["node_modules"]
 }

apps/www/tsconfig.json

@@ -28,5 +28,11 @@
  ]
  },
  "exclude": ["node_modules", "supabase"],
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ "./../../packages/ui/src/**/*.d.ts"
+ ]
 }