@rimori/client 1.3.1 → 1.4.3

package/src/cli/scripts/init/package-setup.ts

@@ -51,11 +51,7 @@ export function getRimoriClientVersion(): string {
  * @param param.isUpgrade - Whether this is an upgrade operation.
  * @throws {Error} if plugin directory doesn't exist or package.json is missing.
  */
-export function updatePackageJson({
-  pluginId,
-  port,
-  isUpgrade = false,
-}: PackageSetupParams): void {
+export function updatePackageJson({ pluginId, port, isUpgrade = false }: PackageSetupParams): void {
   // Get the plugin repo name from the current directory
   const pluginRepoName = path.basename(process.cwd());
   console.log(`Setting up plugin: ${pluginRepoName}`);
@@ -93,18 +89,18 @@ export function updatePackageJson({
   }
   packageJson.scripts = {
     ...packageJson.scripts,
-    "dev": `vite --port ${port || 3000}`,
-    "build": "yarn run check && vite build",
-    "check": "tsc --project tsconfig.app.json --noEmit --pretty",
-    "release:alpha": "yarn build && yarn rimori-release alpha",
-    "release:beta": "yarn build && yarn rimori-release beta",
-    "release:stable": "yarn build && yarn rimori-release stable",
-    "dev:worker": "VITE_MINIFY=false vite build --watch --config worker/vite.config.ts",
-    "build:worker": "vite build --config worker/vite.config.ts",
+    dev: `vite --port ${port || 3000}`,
+    build: 'yarn run check && vite build',
+    check: 'tsc --project tsconfig.app.json --noEmit --pretty',
+    'release:alpha': 'yarn build && yarn rimori-release alpha',
+    'release:beta': 'yarn build && yarn rimori-release beta',
+    'release:stable': 'yarn build && yarn rimori-release stable',
+    'dev:worker': 'VITE_MINIFY=false vite build --watch --config worker/vite.config.ts',
+    'build:worker': 'vite build --config worker/vite.config.ts',
   };
   packageJson.dependencies = {
     ...packageJson.dependencies,
-    "@rimori/client": rimoriClientVersion,
+    '@rimori/client': rimoriClientVersion,
   };
 
   // Write the updated package.json back to file
@@ -114,4 +110,4 @@ export function updatePackageJson({
   } catch (error) {
     throw new Error(`Failed to update package.json: ${error}`);
   }
-} 
+}

package/src/cli/scripts/init/router-transformer.ts

@@ -89,14 +89,14 @@ function detectRouteComponents(content: string): RouteComponent[] {
   }
 
   // For each component, find its corresponding import statement
-  componentNames.forEach(componentName => {
+  componentNames.forEach((componentName) => {
     const importInfo = findImportForComponent(content, componentName);
     if (importInfo) {
       routeComponents.push({
         componentName,
         importStatement: importInfo.importStatement,
         importPath: importInfo.importPath,
-        isDefaultImport: importInfo.isDefaultImport
+        isDefaultImport: importInfo.isDefaultImport,
       });
     }
   });
@@ -111,7 +111,10 @@ function detectRouteComponents(content: string): RouteComponent[] {
  * @param componentName - The component name to find import for
  * @returns Import information or null if not found
  */
-function findImportForComponent(content: string, componentName: string): {
+function findImportForComponent(
+  content: string,
+  componentName: string,
+): {
   importStatement: string;
   importPath: string;
   isDefaultImport: boolean;
@@ -124,7 +127,7 @@ function findImportForComponent(content: string, componentName: string): {
     return {
       importStatement: defaultMatch[0],
       importPath: defaultMatch[1],
-      isDefaultImport: true
+      isDefaultImport: true,
     };
   }
 
@@ -133,12 +136,12 @@ function findImportForComponent(content: string, componentName: string): {
   let namedMatch;
 
   while ((namedMatch = namedImportRegex.exec(content)) !== null) {
-    const imports = namedMatch[1].split(',').map(imp => imp.trim());
+    const imports = namedMatch[1].split(',').map((imp) => imp.trim());
     if (imports.includes(componentName)) {
       return {
         importStatement: namedMatch[0],
         importPath: namedMatch[2],
-        isDefaultImport: false
+        isDefaultImport: false,
       };
     }
   }
@@ -191,7 +194,10 @@ function addLazyImport(content: string): string {
   if (reactImportMatch) {
     // React import exists, add lazy to it
     const existingImports = reactImportMatch[1] || '';
-    const importList = existingImports.split(',').map(imp => imp.trim()).filter(Boolean);
+    const importList = existingImports
+      .split(',')
+      .map((imp) => imp.trim())
+      .filter(Boolean);
 
     if (!importList.includes('lazy')) {
       importList.push('lazy');
@@ -200,16 +206,18 @@ function addLazyImport(content: string): string {
       importList.push('Suspense');
     }
 
-    const newImport = importList.length > 0
-      ? `import React, { ${importList.join(', ')} } from "react";`
-      : `import React from "react";`;
+    const newImport =
+      importList.length > 0 ? `import React, { ${importList.join(', ')} } from "react";` : `import React from "react";`;
 
     return content.replace(reactImportMatch[0], newImport);
   } else {
     // No React import found, add it
     const firstImportMatch = content.match(/^import.*$/m);
     if (firstImportMatch) {
-      return content.replace(firstImportMatch[0], `import React, { lazy, Suspense } from "react";\n${firstImportMatch[0]}`);
+      return content.replace(
+        firstImportMatch[0],
+        `import React, { lazy, Suspense } from "react";\n${firstImportMatch[0]}`,
+      );
     } else {
       // No imports found, add at the beginning
       return `import React, { lazy, Suspense } from "react";\n${content}`;
@@ -266,39 +274,34 @@ function transformImports(content: string): string {
     // Add new import line for PluginProvider
     const importMatch = content.match(/^(import.*from\s+["']react["'];?\s*\n)/m);
     if (importMatch) {
-      content = content.replace(
-        importMatch[0],
-        `${importMatch[0]}import { PluginProvider } from "@rimori/client";\n`
-      );
+      content = content.replace(importMatch[0], `${importMatch[0]}import { PluginProvider } from "@rimori/client";\n`);
     } else {
       // If no React import found, add at the beginning
       content = `import { PluginProvider } from "@rimori/client";\n${content}`;
     }
   } else {
     // Update existing @rimori/client import to include PluginProvider
-    content = content.replace(
-      /import\s*{\s*([^}]*)\s*}\s*from\s*["']@rimori\/client["'];?/,
-      (match, imports) => {
-        const importList = imports.split(',').map((imp: string) => imp.trim()).filter(Boolean);
-        if (!importList.includes('PluginProvider')) {
-          importList.push('PluginProvider');
-        }
-        return `import { ${importList.join(', ')} } from "@rimori/client";`;
+    content = content.replace(/import\s*{\s*([^}]*)\s*}\s*from\s*["']@rimori\/client["'];?/, (match, imports) => {
+      const importList = imports
+        .split(',')
+        .map((imp: string) => imp.trim())
+        .filter(Boolean);
+      if (!importList.includes('PluginProvider')) {
+        importList.push('PluginProvider');
       }
-    );
+      return `import { ${importList.join(', ')} } from "@rimori/client";`;
+    });
   }
 
   // Transform react-router-dom import: replace BrowserRouter with HashRouter
-  content = content.replace(
-    /import\s*{\s*([^}]*)\s*}\s*from\s*["']react-router-dom["'];?/,
-    (match, imports) => {
-      const importList = imports.split(',').map((imp: string) => imp.trim()).filter(Boolean);
-      const updatedImports = importList.map((imp: string) =>
-        imp === 'BrowserRouter' ? 'HashRouter' : imp
-      );
-      return `import { ${updatedImports.join(', ')} } from "react-router-dom";`;
-    }
-  );
+  content = content.replace(/import\s*{\s*([^}]*)\s*}\s*from\s*["']react-router-dom["'];?/, (match, imports) => {
+    const importList = imports
+      .split(',')
+      .map((imp: string) => imp.trim())
+      .filter(Boolean);
+    const updatedImports = importList.map((imp: string) => (imp === 'BrowserRouter' ? 'HashRouter' : imp));
+    return `import { ${updatedImports.join(', ')} } from "react-router-dom";`;
+  });
 
   return content;
 }
@@ -315,15 +318,15 @@ function transformJSX(content: string, pluginId: string): string {
   content = content.replace(
     /<BrowserRouter(\s[^>]*)?>/,
     `<PluginProvider pluginId="${pluginId}">
-      <HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>`
+      <HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>`,
   );
 
   // Replace closing BrowserRouter tag
   content = content.replace(
     /<\/BrowserRouter>/,
     `</HashRouter>
-    </PluginProvider>`
+    </PluginProvider>`,
   );
 
   return content;
-} 
+}

package/src/cli/scripts/init/tailwind-config.ts

@@ -21,16 +21,10 @@ export function updateTailwindConfig(): void {
 
     // Set darkMode to "class" if it exists, otherwise add it
     if (updatedContent.includes('darkMode:')) {
-      updatedContent = updatedContent.replace(
-        /darkMode:\s*\[?"[^"]*"?\]?,?/g,
-        'darkMode: ["class"],'
-      );
+      updatedContent = updatedContent.replace(/darkMode:\s*\[?"[^"]*"?\]?,?/g, 'darkMode: ["class"],');
     } else {
       // Add darkMode after the opening brace
-      updatedContent = updatedContent.replace(
-        /export default \{/,
-        'export default {\n  darkMode: ["class"],'
-      );
+      updatedContent = updatedContent.replace(/export default \{/, 'export default {\n  darkMode: ["class"],');
     }
 
     // Add Rimori client package to content array if not already present
@@ -38,31 +32,28 @@ export function updateTailwindConfig(): void {
       // Find the content array and add the Rimori client path
       if (updatedContent.includes('content:')) {
         // More precise regex to handle the content array properly
-        updatedContent = updatedContent.replace(
-          /(content:\s*\[)([\s\S]*?)(\])/,
-          (match, start, content, end) => {
-            // Clean up any existing double commas first
-            let cleanContent = content.replace(/,\s*,/g, ',');
+        updatedContent = updatedContent.replace(/(content:\s*\[)([\s\S]*?)(\])/, (match, start, content, end) => {
+          // Clean up any existing double commas first
+          let cleanContent = content.replace(/,\s*,/g, ',');
 
-            // Remove trailing comma and whitespace
-            cleanContent = cleanContent.replace(/,\s*$/, '');
+          // Remove trailing comma and whitespace
+          cleanContent = cleanContent.replace(/,\s*$/, '');
 
-            // Add the new path with proper formatting
-            const newPath = '"node_modules/@rimori/client/dist/components/**/*.{js,jsx}"';
+          // Add the new path with proper formatting
+          const newPath = '"node_modules/@rimori/client/dist/components/**/*.{js,jsx}"';
 
-            // If content is not empty, add comma before new entry
-            if (cleanContent.trim()) {
-              return `${start}${cleanContent},\n    ${newPath}\n  ${end}`;
-            } else {
-              return `${start}\n    ${newPath}\n  ${end}`;
-            }
+          // If content is not empty, add comma before new entry
+          if (cleanContent.trim()) {
+            return `${start}${cleanContent},\n    ${newPath}\n  ${end}`;
+          } else {
+            return `${start}\n    ${newPath}\n  ${end}`;
           }
-        );
+        });
       } else {
         // Add content array if it doesn't exist
         updatedContent = updatedContent.replace(
           /darkMode: \["class"\],/,
-          'darkMode: ["class"],\n  content: [\n    "./src/**/*.{js,jsx,ts,tsx}",\n    "node_modules/@rimori/client/dist/components/**/*.{js,jsx}"\n  ],'
+          'darkMode: ["class"],\n  content: [\n    "./src/**/*.{js,jsx,ts,tsx}",\n    "node_modules/@rimori/client/dist/components/**/*.{js,jsx}"\n  ],',
         );
       }
     }
@@ -72,4 +63,4 @@ export function updateTailwindConfig(): void {
   } catch (error) {
     console.warn(`Warning: Could not update tailwind.config.ts: ${error instanceof Error ? error.message : error}`);
   }
-} 
+}

package/src/cli/scripts/init/vite-config.ts

@@ -10,7 +10,7 @@ import * as path from 'path';
  */
 export function updateViteConfigBase({
   basePath = './',
-  configPath = './vite.config.ts'
+  configPath = './vite.config.ts',
 }: {
   basePath?: string;
   configPath?: string;
@@ -56,7 +56,7 @@ export function updateViteConfigBase({
  * @returns The current base value or null if not found.
  */
 export function getCurrentViteBase({
-  configPath = './vite.config.ts'
+  configPath = './vite.config.ts',
 }: {
   configPath?: string;
 } = {}): string | null {
@@ -70,4 +70,4 @@ export function getCurrentViteBase({
   const baseMatch = configContent.match(/base:\s*['"]([^'"]*)['"]/);
 
   return baseMatch ? baseMatch[1] : null;
-} 
+}

package/src/cli/scripts/release/release-config-upload.ts

@@ -26,7 +26,7 @@ export async function sendConfiguration(config: Config): Promise<string> {
     // Transpile TypeScript to JavaScript
     const result = ts.transpile(configContent, {
       target: ts.ScriptTarget.ES2020,
-      module: ts.ModuleKind.ES2020
+      module: ts.ModuleKind.ES2020,
     });
 
     // Create a temporary file to import the transpiled code
@@ -44,7 +44,7 @@ export async function sendConfiguration(config: Config): Promise<string> {
       // Clean up temp file even on error
       try {
         await fs.promises.unlink(tempFile);
-      } catch (e) { }
+      } catch (e) {}
       throw error;
     }
 
@@ -67,7 +67,7 @@ export async function sendConfiguration(config: Config): Promise<string> {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${config.token}`
+          Authorization: `Bearer ${config.token}`,
         },
         body: JSON.stringify(requestBody),
       });
@@ -87,8 +87,8 @@ export async function sendConfiguration(config: Config): Promise<string> {
         throw new Error('Configuration upload failed');
       }
     } catch (e) {
-      console.log("error", e);
-      throw new Error("Error sending configuration");
+      console.log('error', e);
+      throw new Error('Error sending configuration');
     }
   } catch (error: any) {
     console.error('❌ Error sending configuration:', error.message);
@@ -101,14 +101,14 @@ export async function releasePlugin(config: Config, release_id: string): Promise
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      'Authorization': `Bearer ${config.token}`
+      Authorization: `Bearer ${config.token}`,
     },
-    body: JSON.stringify({ plugin_id: config.plugin_id })
+    body: JSON.stringify({ plugin_id: config.plugin_id }),
   });
 
   if (!response.ok) {
-    console.log("Response:", await response.text());
-    throw new Error("Failed to release plugin");
+    console.log('Response:', await response.text());
+    throw new Error('Failed to release plugin');
   }
-  console.log("✅ Plugin released successfully");
-}
+  console.log('✅ Plugin released successfully');
+}

package/src/cli/scripts/release/release-db-update.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import ts from 'typescript';
-import { Config } from "./release";
+import { Config } from './release';
 
 /**
  * Read and send the database configuration to the release endpoint
@@ -27,7 +27,7 @@ export default async function dbUpdate(config: Config, release_id: string): Prom
     // Transpile TypeScript to JavaScript
     const result = ts.transpile(dbConfigContent, {
       target: ts.ScriptTarget.ES2020,
-      module: ts.ModuleKind.ES2020
+      module: ts.ModuleKind.ES2020,
     });
 
     // Create a temporary file to import the transpiled code
@@ -45,7 +45,7 @@ export default async function dbUpdate(config: Config, release_id: string): Prom
       // Clean up temp file even on error
       try {
         await fs.promises.unlink(tempFile);
-      } catch (e) { }
+      } catch (e) {}
       throw error;
     }
 
@@ -66,32 +66,32 @@ export default async function dbUpdate(config: Config, release_id: string): Prom
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${config.token}`
+        Authorization: `Bearer ${config.token}`,
       },
       body: JSON.stringify(requestBody),
     }).catch((e) => {
-      console.log("error", e);
-      throw new Error("Error sending database configuration");
+      console.log('error', e);
+      throw new Error('Error sending database configuration');
     });
     try {
       const responseText = await response.text().catch((e) => {
-        console.log("error", e);
-        throw new Error("Error sending database configuration");
+        console.log('error', e);
+        throw new Error('Error sending database configuration');
       });
 
       const responseData = JSON.parse(responseText);
       if (response.ok) {
         console.log('✅ Database configuration deployed successfully!');
       } else {
-        console.log("responseData", responseData);
+        console.log('responseData', responseData);
         throw new Error(responseData.message);
       }
     } catch (e) {
-      console.log("error", e);
-      throw new Error("Error sending database configuration");
+      console.log('error', e);
+      throw new Error('Error sending database configuration');
     }
   } catch (error: any) {
     console.error('❌ Error sending database configuration:', error.message);
     throw error;
   }
-}
+}

package/src/cli/scripts/release/release-file-upload.ts

@@ -52,7 +52,7 @@ export async function uploadDirectory(config: Config, release_id: string): Promi
       pathMapping[fileId] = relativePath;
 
       // Create a Blob with the file content and content type
-      const blob = new Blob([fileContent], { type: contentType });
+      const blob = new Blob([new Uint8Array(fileContent)], { type: contentType });
 
       // Add file to FormData with ID_filename format
       const fileName = `${fileId}_${path.basename(filePath)}`;
@@ -69,7 +69,7 @@ export async function uploadDirectory(config: Config, release_id: string): Promi
   // Upload to the release endpoint
   const response = await fetch(`${config.domain}/release/${release_id}/files`, {
     method: 'POST',
-    headers: { 'Authorization': `Bearer ${config.token}` },
+    headers: { Authorization: `Bearer ${config.token}` },
     body: formData,
   });
 
@@ -135,4 +135,4 @@ function getContentType(filePath: string): string {
   const contentType = contentTypes[ext || ''];
   if (!contentType) throw new Error(`Unsupported file type: ${ext}`);
   return contentType;
-}
+}

package/src/cli/scripts/release/release.ts

@@ -38,9 +38,9 @@ const config = {
   release_channel: releaseChannel,
   plugin_id: pluginId,
   token: RIMORI_TOKEN,
-  domain: process.env.RIMORI_BACKEND_URL || "https://api.rimori.se",
+  domain: process.env.RIMORI_BACKEND_URL || 'https://api.rimori.se',
   rimori_client_version: packageJson.dependencies['@rimori/client'].replace('^', ''),
-}
+};
 
 export type Config = typeof config;
 
@@ -61,9 +61,9 @@ async function releaseProcess(): Promise<void> {
     // Then release the plugin
     await releasePlugin(config, release_id);
   } catch (error: any) {
-    console.log("❌ Error:", error.message);
+    console.log('❌ Error:', error.message);
     process.exit(1);
   }
 }
 
-releaseProcess();
+releaseProcess();

package/src/cli/types/DatabaseTypes.ts

@@ -1,4 +1,3 @@
-
 // Database table structure definitions
 
 /**
@@ -45,15 +44,15 @@ export interface DbColumnDefinition {
   // primary_key?: boolean;
   /** Restrictions for the column. If the column is restricted, the permission is further restricted. E.g. if the column is restricted to user, then the user can only read the column if they have the right permission.
    * Example: Denying users to update the column, but allowing the moderator to update the column.
-  */
+   */
   restrict?: {
     /** Restrictions for the user */
-    user: Partial<Omit<DbPermissionDefinition, 'delete'>>,
+    user: Partial<Omit<DbPermissionDefinition, 'delete'>>;
     /** Restrictions for the moderator */
-    moderator?: Partial<Omit<DbPermissionDefinition, 'delete'>>,
+    moderator?: Partial<Omit<DbPermissionDefinition, 'delete'>>;
     /** Restrictions for the maintainer */
     // maintainer?: Partial<DbPermissionDefinition>,
-  }
+  };
 }
 
 /**
@@ -80,8 +79,8 @@ export interface DbTableDefinition {
   description: string;
   /** Permissions for the table */
   permissions: {
-    user: DbPermissionDefinition,
-    moderator?: DbPermissionDefinition,
+    user: DbPermissionDefinition;
+    moderator?: DbPermissionDefinition;
     // maintainer?: DbPermissionDefinition,
   };
   /** Column definitions for the table */
@@ -98,7 +97,7 @@ export interface DbTableDefinition {
  *
  * Defines the permissions for a database table.
  */
-export type DbPermission = "NONE" | "OWN" | "ALL";
+export type DbPermission = 'NONE' | 'OWN' | 'ALL';
 
 /**
  * Permission definition for a database table.

package/src/components/CRUDModal.tsx

@@ -1,59 +1,75 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 interface Props {
-    title: string;
-    show?: boolean;
-    className?: string;
-    closeAble?: boolean;
-    children: React.ReactNode;
-    actionbuttons: ActionButton[];
-    buttonText?: string | React.ReactNode;
-    onClose?: () => void;
+  title: string;
+  show?: boolean;
+  className?: string;
+  closeAble?: boolean;
+  children: React.ReactNode;
+  actionbuttons: ActionButton[];
+  buttonText?: string | React.ReactNode;
+  onClose?: () => void;
 }
 
 interface ActionButton {
-    text: string;
-    onClick: () => void;
-    closeModal?: boolean;
+  text: string;
+  onClick: () => void;
+  closeModal?: boolean;
 }
 
-export function CRUDModal({ actionbuttons, children, title, buttonText, className, closeAble = true, show = false, onClose }: Props) {
-    const dialogRef = useRef<HTMLDialogElement>(null);
+export function CRUDModal({
+  actionbuttons,
+  children,
+  title,
+  buttonText,
+  className,
+  closeAble = true,
+  show = false,
+  onClose,
+}: Props) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
-    useEffect(() => {
-        if (show) {
-            dialogRef.current?.showModal();
-        } else {
-            dialogRef.current?.close();
-        }
-    }, [show]);
+  useEffect(() => {
+    if (show) {
+      dialogRef.current?.showModal();
+    } else {
+      dialogRef.current?.close();
+    }
+  }, [show]);
 
-    const handleClose = () => {
-        dialogRef.current?.close();
-        onClose?.();
-    };
+  const handleClose = () => {
+    dialogRef.current?.close();
+    onClose?.();
+  };
 
-    return (
-        <>
-            {!!buttonText && <button className={className} onClick={() => dialogRef.current?.showModal()}>{buttonText}</button>}
-            <dialog ref={dialogRef} className="bg-gray-400 rounded-lg font-normal" onClose={handleClose}>
-                <div className="bg-gray-500 text-xl flex flex-row justify-between p-3 items-start font-bold">
-                    <h2>{title}</h2>
-                    {closeAble && <button onClick={handleClose}>&times;</button>}
-                </div>
-                <div className="modal-body p-2">
-                    {children}
-                </div>
-                <div className="modal-footer px-2 py-2 flex flex-row gap-2 border-t-2">
-                    {actionbuttons.map(({ onClick, text, closeModal = true }, index) => (
-                        <button key={index} className="bg-blue-500 hover:bg-blue-600 dark:border-gray-900 rounded-md py-2 px-4 dark:text-white font-bold"
-                            onClick={() => {
-                                if (closeModal) handleClose();
-                                onClick();
-                            }}>{text}</button>
-                    ))}
-                </div>
-            </dialog>
-        </>
-    );
+  return (
+    <>
+      {!!buttonText && (
+        <button className={className} onClick={() => dialogRef.current?.showModal()}>
+          {buttonText}
+        </button>
+      )}
+      <dialog ref={dialogRef} className="bg-gray-400 rounded-lg font-normal" onClose={handleClose}>
+        <div className="bg-gray-500 text-xl flex flex-row justify-between p-3 items-start font-bold">
+          <h2>{title}</h2>
+          {closeAble && <button onClick={handleClose}>&times;</button>}
+        </div>
+        <div className="modal-body p-2">{children}</div>
+        <div className="modal-footer px-2 py-2 flex flex-row gap-2 border-t-2">
+          {actionbuttons.map(({ onClick, text, closeModal = true }, index) => (
+            <button
+              key={index}
+              className="bg-blue-500 hover:bg-blue-600 dark:border-gray-900 rounded-md py-2 px-4 dark:text-white font-bold"
+              onClick={() => {
+                if (closeModal) handleClose();
+                onClick();
+              }}
+            >
+              {text}
+            </button>
+          ))}
+        </div>
+      </dialog>
+    </>
+  );
 }