Update embedding sdk version to 0.52.6

Update embedding sdk to 0.52.6 with breaking changes

Author: heypoom

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "trailingComma": "all"
+}

README.md

@@ -1,9 +1,9 @@
 # Metabase embedding SDK for React sample application
 
-You'll need a Pro or Enterprise version of Metabase 50 up and running. If you're not sure where to start, sign up for [Pro Cloud](https://www.metabase.com/pricing).
+You'll need a Pro or Enterprise version of Metabase 52 up and running. If you're not sure where to start, sign up for [Pro Cloud](https://www.metabase.com/pricing).
 
 > [!IMPORTANT]
-> The SDK is currently only compatible with Metabase v1.50 or higher
+> The SDK is compatible with Metabase v1.51 or higher
 
 ## Create `.env` file
 
@@ -28,7 +28,7 @@ On the card that says **JWT**, click the **Setup** button.
 
 ### JWT identity provider URI
 
-In the **JWT IDENTITY PROVIDER URI** field, paste  `localhost:9090/sso/metabase` (or substitute your Cloud URL for localhost).
+In the **JWT IDENTITY PROVIDER URI** field, paste `localhost:9090/sso/metabase` (or substitute your Cloud URL for localhost).
 
 In your `.env` this address is set as:
 

client/package-lock.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@metabase/embedding-sdk-react": "^1.51.4",
+    "@metabase/embedding-sdk-react": "^0.52.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -28,4 +28,4 @@
     "globals": "^15.11.0",
     "vite": "^5.4.10"
   }
-}
+}

client/package.json

@@ -1,19 +1,21 @@
+/// <reference types="vite/client" />
+
 import {
   MetabaseProvider,
   InteractiveQuestion,
-  defineEmbeddingSdkTheme,
-  defineEmbeddingSdkConfig,
+  defineMetabaseAuthConfig,
+  defineMetabaseTheme,
 } from "@metabase/embedding-sdk-react";
 
 // Configuration
-const config = defineEmbeddingSdkConfig({
+const config = defineMetabaseAuthConfig({
   metabaseInstanceUrl: import.meta.env.VITE_METABASE_INSTANCE_URL,
   authProviderUri: import.meta.env.VITE_AUTH_PROVIDER_URI,
 });
 
 const questionId = 14;
 
-const theme = defineEmbeddingSdkTheme({
+const theme = defineMetabaseTheme({
   // Specify a font to use from the set of fonts supported by Metabase.
   // You can set the font to "Custom" to use the custom font
   // configured in your Metabase instance.
@@ -44,7 +46,6 @@ const theme = defineEmbeddingSdkTheme({
   components: {
     question: {
       backgroundColor: "#FFFFFF",
-      textColor: "#4C5773",
     },
 
     table: {
@@ -63,8 +64,8 @@ const theme = defineEmbeddingSdkTheme({
 
 function App() {
   return (
-    <div className="App" width="1200px" height="800px">
-      <MetabaseProvider config={config} theme={theme}>
+    <div className="App" style={{ width: "1200px", height: "800px" }}>
+      <MetabaseProvider authConfig={config} theme={theme}>
         <InteractiveQuestion questionId={questionId} />
       </MetabaseProvider>
     </div>