@instantdb/components 0.22.89-experimental.sync-table-fixes.20282627123.1 → 0.22.89-experimental.uuidfix.20282483875.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "0.22.89-experimental.sync-table-fixes.20282627123.1",
+  "version": "0.22.89-experimental.uuidfix.20282483875.1",
   "type": "module",
   "description": "Instant's UI components",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/components",
@@ -54,8 +54,8 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@babel/parser": "^8.0.0-beta.0",
@@ -74,7 +74,6 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.7",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
@@ -93,11 +92,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/admin": "0.22.89-experimental.sync-table-fixes.20282627123.1",
-    "@instantdb/platform": "0.22.89-experimental.sync-table-fixes.20282627123.1",
-    "@instantdb/react": "0.22.89-experimental.sync-table-fixes.20282627123.1",
-    "@instantdb/core": "0.22.89-experimental.sync-table-fixes.20282627123.1",
-    "@instantdb/version": "0.22.89-experimental.sync-table-fixes.20282627123.1"
+    "@instantdb/admin": "0.22.89-experimental.uuidfix.20282483875.1",
+    "@instantdb/version": "0.22.89-experimental.uuidfix.20282483875.1",
+    "@instantdb/platform": "0.22.89-experimental.uuidfix.20282483875.1",
+    "@instantdb/core": "0.22.89-experimental.uuidfix.20282483875.1",
+    "@instantdb/react": "0.22.89-experimental.uuidfix.20282483875.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/explorer/explorer-layout.tsx

@@ -55,10 +55,10 @@ export const ExplorerLayout = ({
         props.className,
       )}
     >
-      <Dialog title="Recently Deleted Namespaces" {...recentlyDeletedNsDialog}>
+      <Dialog {...recentlyDeletedNsDialog}>
         <RecentlyDeletedNamespaces appId={props.appId} db={db} />
       </Dialog>
-      <Dialog title="New Namespace" {...newNsDialog}>
+      <Dialog {...newNsDialog}>
         <NewNamespaceDialog
           db={db}
           onClose={(p) => {

package/src/components/explorer/index.tsx

@@ -120,20 +120,12 @@ export const Explorer = (_props: WithOptional<ExplorerProps>) => {
   const [_explorerState, _setExplorerState] = useState<ExplorerNav | null>(
     null,
   );
-
   const props: WithDefaults<ExplorerProps> = fillPropsWithDefaults(
     _props,
     _explorerState,
     _setExplorerState,
   );
 
-  if (!props.adminToken) {
-    throw new Error('adminToken is required for explorer');
-  }
-  if (!props.appId) {
-    throw new Error('appId is required for explorer');
-  }
-
   // inside the component avoid setting explorer state directly
   // if change could be useful for history
   const { explorerState, setExplorerState } = props;

package/src/components/explorer/inner-explorer.tsx

@@ -8,10 +8,6 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { markdownTable } from 'markdown-table';
-
-import { mkConfig, generateCsv, download } from 'export-to-csv';
-
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
@@ -81,7 +77,6 @@ import { ViewSettings } from './view-settings';
 import { isObject } from 'lodash';
 import { EditNamespaceDialog } from './edit-namespace-dialog';
 import { EditRowDialog } from './edit-row-dialog';
-import copy from 'copy-to-clipboard';
 
 const fallbackItems: any[] = [];
 
@@ -93,147 +88,6 @@ export type TableColMeta = {
   copyable?: boolean;
 };
 
-function exportToCSV(
-  rows: any[],
-  columns: ColumnDef<any>[],
-  namespace: string,
-  downloadFile: boolean = false,
-) {
-  if (rows.length === 0) return;
-
-  const visibleColumns = columns.filter(
-    (col) =>
-      col.id !== 'select-col' &&
-      col.header !== undefined &&
-      !(col.meta as TableColMeta | undefined)?.isLink,
-  );
-
-  const data = rows.map((row) => {
-    const rowData: Record<string, any> = {};
-    visibleColumns.forEach((col: any) => {
-      const value = row[col.header];
-      // Handle different data types
-      if (value === null || value === undefined) {
-        rowData[col.header] = '';
-      } else if (typeof value === 'object') {
-        rowData[col.header] = JSON.stringify(value);
-      } else {
-        rowData[col.header] = value;
-      }
-    });
-    return rowData;
-  });
-
-  const csvConfig = mkConfig({
-    fieldSeparator: ',',
-    filename: `${namespace}_export`,
-    decimalSeparator: '.',
-    useKeysAsHeaders: true,
-  });
-
-  const csv = generateCsv(csvConfig)(data);
-
-  if (downloadFile) {
-    download(csvConfig)(csv);
-    successToast('CSV file downloaded');
-  } else {
-    copy(csv.toString());
-    successToast('CSV copied to clipboard');
-  }
-}
-
-function exportToMarkdown(
-  rows: any[],
-  columns: any[],
-  namespace: string,
-  downloadFile: boolean = false,
-) {
-  if (rows.length === 0) return;
-
-  const visibleColumns = columns.filter(
-    (col) =>
-      col.id !== 'select-col' &&
-      col.header !== undefined &&
-      !(col.meta as TableColMeta | undefined)?.isLink,
-  );
-
-  const headers = visibleColumns.map((col: any) => col.header as string);
-
-  const data = rows.map((row) => {
-    return visibleColumns.map((col: any) => {
-      const value = row[col.header];
-      if (value === null || value === undefined) {
-        return ' ';
-      } else if (typeof value === 'object') {
-        return JSON.stringify(value);
-      } else {
-        return String(value);
-      }
-    });
-  });
-
-  const markdown = markdownTable([headers, ...data]);
-
-  if (downloadFile) {
-    const blob = new Blob([markdown], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${namespace}_export.md`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-    successToast('Markdown file downloaded');
-  } else {
-    copy(markdown);
-    successToast('Markdown copied to clipboard');
-  }
-}
-
-function exportToJSON(
-  rows: any[],
-  columns: any[],
-  namespace: string,
-  downloadFile: boolean = false,
-) {
-  if (rows.length === 0) return;
-
-  const visibleColumns = columns.filter(
-    (col) =>
-      col.id !== 'select-col' &&
-      col.header !== undefined &&
-      !(col.meta as TableColMeta | undefined)?.isLink,
-  );
-
-  const data = rows.map((row) => {
-    const rowData: Record<string, any> = {};
-    visibleColumns.forEach((col: any) => {
-      const value = row[col.header];
-      rowData[col.header] = value;
-    });
-    return rowData;
-  });
-
-  const json = JSON.stringify(data, null, 2);
-
-  if (downloadFile) {
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${namespace}_export.json`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-    successToast('JSON file downloaded');
-  } else {
-    copy(json);
-    successToast('JSON copied to clipboard');
-  }
-}
-
 export const InnerExplorer: React.FC<{
   db: InstantReactAbstractDatabase<any, any>;
   namespaces: SchemaNamespace[];
@@ -830,7 +684,6 @@ export const InnerExplorer: React.FC<{
   return (
     <>
       <Dialog
-        title="Delete Rows"
         open={deleteDataConfirmationOpen}
         onClose={() => setDeleteDataConfirmationOpen(false)}
       >
@@ -901,7 +754,6 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
-        title="Edit Row"
         open={addItemDialogOpen}
         onClose={() => setAddItemDialogOpen(false)}
       >
@@ -915,7 +767,6 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
-        title="Edit Row"
         open={!!selectedEditableItem}
         onClose={() => setEditableRowId(null)}
       >
@@ -929,7 +780,6 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
-        title="Edit Namespace"
         stopFocusPropagation={true}
         open={Boolean(editNs)}
         onClose={() => setEditNs(null)}
@@ -1236,12 +1086,12 @@ export const InnerExplorer: React.FC<{
                         allItems,
                         checkedIds,
                       );
-                      exportToCSV(
-                        selectedRows,
-                        columns,
-                        selectedNamespace.name,
-                        isShiftPressed,
-                      );
+                      // exportToCSV(
+                      //   selectedRows,
+                      //   columns,
+                      //   selectedNamespace.name,
+                      //   isShiftPressed,
+                      // );
                       setDropdownOpen(false);
                     }}
                     className="flex items-center gap-2"
@@ -1256,12 +1106,12 @@ export const InnerExplorer: React.FC<{
                         allItems,
                         checkedIds,
                       );
-                      exportToMarkdown(
-                        selectedRows,
-                        columns,
-                        selectedNamespace.name,
-                        isShiftPressed,
-                      );
+                      // exportToMarkdown(
+                      //   selectedRows,
+                      //   columns,
+                      //   selectedNamespace.name,
+                      //   isShiftPressed,
+                      // );
                       setDropdownOpen(false);
                     }}
                     className="flex items-center gap-2"
@@ -1278,12 +1128,12 @@ export const InnerExplorer: React.FC<{
                         allItems,
                         checkedIds,
                       );
-                      exportToJSON(
-                        selectedRows,
-                        columns,
-                        selectedNamespace.name,
-                        isShiftPressed,
-                      );
+                      // exportToJSON(
+                      //   selectedRows,
+                      //   columns,
+                      //   selectedNamespace.name,
+                      //   isShiftPressed,
+                      // );
                       setDropdownOpen(false);
                     }}
                     className="flex items-center gap-2"

package/src/components/explorer/view-settings.tsx

@@ -25,7 +25,6 @@ export const ViewSettings = ({
         onClick={() => setDialogOpen(true)}
       />
       <Dialog
-        title="Explorer View Settings"
         hideCloseButton={true}
         onClose={() => setDialogOpen(false)}
         open={dialogOpen}

package/src/components/ui.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { Toaster, toast } from 'sonner';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Editor, Monaco, OnMount } from '@monaco-editor/react';
 import type { ClassValue } from 'clsx';
 import clsx from 'clsx';
@@ -636,7 +635,6 @@ function DialogContent({
   className,
   children,
   showCloseButton = false,
-  title,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
@@ -656,9 +654,6 @@ function DialogContent({
           )}
           {...props}
         >
-          <VisuallyHidden>
-            <DialogTitle>{title}</DialogTitle>
-          </VisuallyHidden>
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
@@ -682,13 +677,11 @@ export function Dialog({
   children,
   onClose,
   className,
-  title,
   stopFocusPropagation = false,
   hideCloseButton = false,
 }: {
   open: boolean;
   children: React.ReactNode;
-  title: string;
   onClose: () => void;
   className?: string;
   stopFocusPropagation?: boolean;
@@ -704,7 +697,6 @@ export function Dialog({
       open={open}
     >
       <DialogContent
-        title={title}
         onFocusCapture={(e) => {
           if (stopFocusPropagation) {
             e.stopPropagation();
@@ -1541,7 +1533,6 @@ export function Fence({
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { rosePineDawnTheme } from './rosePineDawnTheme';
 import { useShadowRoot, useShadowDarkMode } from './StyleMe';
-import { DialogTitle } from '@radix-ui/react-dialog';
 function Switch({
   className,
   ...props