@instantdb/components 0.22.89 → 0.22.90-experimental.drewh-ssr.20286580593.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "0.22.89",
+  "version": "0.22.90-experimental.drewh-ssr.20286580593.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",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "dependencies": {
     "@babel/parser": "^8.0.0-beta.0",
@@ -74,6 +74,7 @@
     "@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",
@@ -92,11 +93,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/admin": "0.22.89",
-    "@instantdb/core": "0.22.89",
-    "@instantdb/react": "0.22.89",
-    "@instantdb/version": "0.22.89",
-    "@instantdb/platform": "0.22.89"
+    "@instantdb/admin": "0.22.90-experimental.drewh-ssr.20286580593.1",
+    "@instantdb/core": "0.22.90-experimental.drewh-ssr.20286580593.1",
+    "@instantdb/platform": "0.22.90-experimental.drewh-ssr.20286580593.1",
+    "@instantdb/react": "0.22.90-experimental.drewh-ssr.20286580593.1",
+    "@instantdb/version": "0.22.90-experimental.drewh-ssr.20286580593.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 {...recentlyDeletedNsDialog}>
+      <Dialog title="Recently Deleted Namespaces" {...recentlyDeletedNsDialog}>
         <RecentlyDeletedNamespaces appId={props.appId} db={db} />
       </Dialog>
-      <Dialog {...newNsDialog}>
+      <Dialog title="New Namespace" {...newNsDialog}>
         <NewNamespaceDialog
           db={db}
           onClose={(p) => {

package/src/components/explorer/index.tsx

@@ -91,7 +91,7 @@ const fillPropsWithDefaults = (
     // In uncontrolled mode, use the internal state
     explorerState: controlled ? (input.explorerState ?? null) : _explorerState,
     setExplorerState: input.setExplorerState || setExplorerState,
-    useShadowDOM: input.useShadowDOM || false,
+    useShadowDOM: input.useShadowDOM === undefined ? true : input.useShadowDOM,
   };
 };
 
@@ -120,12 +120,20 @@ 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,6 +8,10 @@ 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,
@@ -77,6 +81,7 @@ 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[] = [];
 
@@ -88,6 +93,147 @@ 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[];
@@ -684,6 +830,7 @@ export const InnerExplorer: React.FC<{
   return (
     <>
       <Dialog
+        title="Delete Rows"
         open={deleteDataConfirmationOpen}
         onClose={() => setDeleteDataConfirmationOpen(false)}
       >
@@ -754,6 +901,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Row"
         open={addItemDialogOpen}
         onClose={() => setAddItemDialogOpen(false)}
       >
@@ -767,6 +915,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Row"
         open={!!selectedEditableItem}
         onClose={() => setEditableRowId(null)}
       >
@@ -780,6 +929,7 @@ export const InnerExplorer: React.FC<{
         ) : null}
       </Dialog>
       <Dialog
+        title="Edit Namespace"
         stopFocusPropagation={true}
         open={Boolean(editNs)}
         onClose={() => setEditNs(null)}
@@ -1086,12 +1236,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"
@@ -1106,12 +1256,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"
@@ -1128,12 +1278,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,6 +25,7 @@ export const ViewSettings = ({
         onClick={() => setDialogOpen(true)}
       />
       <Dialog
+        title="Explorer View Settings"
         hideCloseButton={true}
         onClose={() => setDialogOpen(false)}
         open={dialogOpen}

package/src/components/ui.tsx

@@ -1,5 +1,6 @@
 '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';
@@ -635,6 +636,7 @@ function DialogContent({
   className,
   children,
   showCloseButton = false,
+  title,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
@@ -654,6 +656,9 @@ function DialogContent({
           )}
           {...props}
         >
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
           {children}
           {showCloseButton && (
             <DialogPrimitive.Close
@@ -677,11 +682,13 @@ export function Dialog({
   children,
   onClose,
   className,
+  title,
   stopFocusPropagation = false,
   hideCloseButton = false,
 }: {
   open: boolean;
   children: React.ReactNode;
+  title: string;
   onClose: () => void;
   className?: string;
   stopFocusPropagation?: boolean;
@@ -697,6 +704,7 @@ export function Dialog({
       open={open}
     >
       <DialogContent
+        title={title}
         onFocusCapture={(e) => {
           if (stopFocusPropagation) {
             e.stopPropagation();
@@ -1533,6 +1541,7 @@ 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