@instantdb/components 1.0.37 → 1.0.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantdb/components",
   "private": false,
-  "version": "1.0.37",
+  "version": "1.0.38",
   "type": "module",
   "description": "Instant's UI components",
   "license": "Apache-2.0",
@@ -94,11 +94,11 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "uuid": "^11.1.0",
-    "@instantdb/admin": "1.0.37",
-    "@instantdb/core": "1.0.37",
-    "@instantdb/platform": "1.0.37",
-    "@instantdb/react": "1.0.37",
-    "@instantdb/version": "1.0.37"
+    "@instantdb/admin": "1.0.38",
+    "@instantdb/platform": "1.0.38",
+    "@instantdb/core": "1.0.38",
+    "@instantdb/version": "1.0.38",
+    "@instantdb/react": "1.0.38"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/explorer/edit-namespace-dialog.tsx

@@ -52,7 +52,7 @@ import {
   jobIsCompleted,
   jobIsErrored,
 } from '@lib/utils/indexingJobs';
-import { useExplorerProps, useExplorerState } from './index';
+import { EditSchemaScreen, useExplorerProps, useExplorerState } from './index';
 import { useClose } from '@headlessui/react';
 import {
   PendingJob,
@@ -69,6 +69,8 @@ export function EditNamespaceDialog({
   namespaces,
   onClose,
   isSystemCatalogNs,
+  screen,
+  onScreenChange,
 }: {
   db: InstantReactWebDatabase<any>;
   namespace: SchemaNamespace;
@@ -76,18 +78,20 @@ export function EditNamespaceDialog({
   onClose: (p?: { ok: boolean }) => void;
   readOnly: boolean;
   isSystemCatalogNs: boolean;
+  screen: EditSchemaScreen;
+  onScreenChange: (screen: EditSchemaScreen) => void;
 }) {
   const props = useExplorerProps();
   const appId = props.appId;
   const { history, explorerState } = useExplorerState();
   const { mutate } = useSWRConfig();
-  const [screen, setScreen] = useState<
-    | { type: 'main' }
-    | { type: 'delete' }
-    | { type: 'rename' }
-    | { type: 'add' }
-    | { type: 'edit'; attrId: string; isForward: boolean }
-  >({ type: 'main' });
+
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const setScreen = (s: EditSchemaScreen) => {
+    setIsDeleting(false);
+    onScreenChange(s);
+  };
 
   const [renameNsInput, setRenameNsInput] = useState(namespace.name);
   const [renameNsErrorText, setRenameNsErrorText] = useState<string | null>(
@@ -121,189 +125,183 @@ export function EditNamespaceDialog({
     );
     successToast('Renamed namespace to ' + newName);
     setRenameNsInput('');
-    setScreen({ type: 'main' });
+    setScreen({ kind: 'main' });
   }
 
   const notes = useAttrNotes();
 
   const screenAttr = useMemo(() => {
-    return (
-      screen.type === 'edit' &&
-      namespace.attrs.find(
-        (a) => a.id === screen.attrId && a.isForward === screen.isForward,
-      )
+    if (screen.kind !== 'edit-attr') return undefined;
+    return namespace.attrs.find(
+      (a) => a.id === screen.attrId && a.isForward === screen.isForward,
     );
   }, [
-    screen.type === 'edit' ? screen.attrId : null,
-    screen.type === 'edit' ? screen.isForward : null,
+    screen.kind === 'edit-attr' ? screen.attrId : null,
+    screen.kind === 'edit-attr' ? screen.isForward : null,
     namespace.attrs,
   ]);
 
-  return (
-    <>
-      {screen.type === 'rename' && (
-        <div className="px-2">
-          <button
-            onClick={() => {
-              setScreen({
-                type: 'main',
-              });
-            }}
-            className="mb-3"
-          >
-            <ArrowLeftIcon className="h-4 w-4 cursor-pointer" />
-          </button>
-          <h6 className="text-md pb-2 font-bold">Rename {namespace.name}</h6>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              renameNs(renameNsInput);
-            }}
+  return isDeleting ? (
+    <DeleteForm
+      name={namespace.name}
+      type="namespace"
+      onClose={onClose}
+      onConfirm={deleteNs}
+    />
+  ) : screen.kind === 'rename' ? (
+    <div className="px-2">
+      <button
+        onClick={() => {
+          setScreen({ kind: 'main' });
+        }}
+        className="mb-3"
+      >
+        <ArrowLeftIcon className="h-4 w-4 cursor-pointer" />
+      </button>
+      <h6 className="text-md pb-2 font-bold">Rename {namespace.name}</h6>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          renameNs(renameNsInput);
+        }}
+      >
+        <Content className="pb-2 text-sm">
+          This will immediately rename the namespace. You'll need to{' '}
+          <strong className="dark:text-white">update your code</strong> to the
+          new name.
+        </Content>
+        <TextInput
+          disabled={isSystemCatalogNs}
+          value={renameNsInput}
+          onChange={(n) => setRenameNsInput(n)}
+        />
+        <div className="flex flex-col gap-2 rounded-sm py-2">
+          <Button
+            type="submit"
+            disabled={
+              renameNsInput.startsWith('$') || renameNsInput.length === 0
+            }
           >
-            <Content className="pb-2 text-sm">
-              This will immediately rename the namespace. You'll need to{' '}
-              <strong className="dark:text-white">update your code</strong> to
-              the new name.
-            </Content>
-            <TextInput
-              disabled={isSystemCatalogNs}
-              value={renameNsInput}
-              onChange={(n) => setRenameNsInput(n)}
-            />
-            <div className="flex flex-col gap-2 rounded-sm py-2">
-              <Button
-                type="submit"
-                disabled={
-                  renameNsInput.startsWith('$') || renameNsInput.length === 0
-                }
-              >
-                Rename {namespace.name} → {renameNsInput}
-              </Button>
-            </div>
-          </form>{' '}
+            Rename {namespace.name} → {renameNsInput}
+          </Button>
         </div>
-      )}
+      </form>
+    </div>
+  ) : screen.kind === 'main' ? (
+    <div className="flex flex-col gap-4 px-2">
+      <div className="mr-8 flex gap-1">
+        <h5 className="flex items-center text-lg font-bold">
+          {namespace.name}
+        </h5>
+        <IconButton
+          variant="subtle"
+          onClick={() => {
+            setScreen({ kind: 'rename' });
+          }}
+          icon={
+            <PencilSquareIcon className="h-4 w-4 opacity-50"></PencilSquareIcon>
+          }
+          label="Rename"
+        ></IconButton>
 
-      {screen.type === 'main' ? (
-        <div className="flex flex-col gap-4 px-2">
-          <div className="mr-8 flex gap-1">
-            <h5 className="flex items-center text-lg font-bold">
-              {namespace.name}
-            </h5>
-            <IconButton
-              variant="subtle"
-              onClick={() => {
-                setScreen({ type: 'rename' });
-              }}
-              icon={
-                <PencilSquareIcon className="h-4 w-4 opacity-50"></PencilSquareIcon>
-              }
-              label="Rename"
-            ></IconButton>
-
-            <Button
-              className="ml-4"
-              disabled={isSystemCatalogNs}
-              title={
-                isSystemCatalogNs
-                  ? `The ${namespace.name} namespace can't be deleted.`
-                  : undefined
-              }
-              size="mini"
-              variant="secondary"
-              onClick={() => setScreen({ type: 'delete' })}
-            >
-              <TrashIcon className="inline" height="1rem" />
-              Delete
-            </Button>
-          </div>
+        <Button
+          className="ml-4"
+          disabled={isSystemCatalogNs}
+          title={
+            isSystemCatalogNs
+              ? `The ${namespace.name} namespace can't be deleted.`
+              : undefined
+          }
+          size="mini"
+          variant="secondary"
+          onClick={() => setIsDeleting(true)}
+        >
+          <TrashIcon className="inline" height="1rem" />
+          Delete
+        </Button>
+      </div>
 
-          <div className="flex flex-col gap-2">
-            {namespace.attrs.map((attr) => (
-              <div
-                key={attr.id + '-' + attr.name}
-                className="flex justify-between"
+      <div className="flex flex-col gap-2">
+        {namespace.attrs.map((attr) => (
+          <div key={attr.id + '-' + attr.name} className="flex justify-between">
+            <div className="flex items-center gap-3">
+              <span className="py-0.5 font-bold">{attr.name}</span>
+              {notes.notes[attr.id]?.message && (
+                <InfoTip>
+                  <div className="px-2 text-xs text-gray-500 dark:text-neutral-400">
+                    {notes.notes[attr.id].message}
+                  </div>
+                </InfoTip>
+              )}
+            </div>
+            {attr.name !== 'id' ? (
+              <Button
+                className="px-2"
+                size="mini"
+                variant="subtle"
+                onClick={() => {
+                  notes.removeNote(attr.id);
+                  setScreen({
+                    kind: 'edit-attr',
+                    attrId: attr.id,
+                    isForward: attr.isForward,
+                  });
+                }}
               >
-                <div className="flex items-center gap-3">
-                  <span className="py-0.5 font-bold">{attr.name}</span>
-                  {notes.notes[attr.id]?.message && (
-                    <InfoTip>
-                      <div className="px-2 text-xs text-gray-500 dark:text-neutral-400">
-                        {notes.notes[attr.id].message}
-                      </div>
-                    </InfoTip>
-                  )}
-                </div>
-                {attr.name !== 'id' ? (
-                  <Button
-                    className="px-2"
-                    size="mini"
-                    variant="subtle"
-                    onClick={() => {
-                      notes.removeNote(attr.id);
-                      setScreen({
-                        type: 'edit',
-                        attrId: attr.id,
-                        isForward: attr.isForward,
-                      });
-                    }}
-                  >
-                    Edit
-                  </Button>
-                ) : null}
-              </div>
-            ))}
+                Edit
+              </Button>
+            ) : null}
           </div>
+        ))}
+      </div>
 
-          <div>
-            <Button
-              size="mini"
-              variant="secondary"
-              onClick={() => setScreen({ type: 'add' })}
-            >
-              <PlusIcon className="inline" height="12px" />
-              New attribute
-            </Button>
-          </div>
-          <RecentlyDeletedAttrs
-            notes={notes}
-            db={db}
-            appId={appId}
-            namespace={namespace}
-          />
-        </div>
-      ) : screen.type === 'add' ? (
-        <AddAttrForm
-          db={db}
-          namespace={namespace}
-          namespaces={namespaces}
-          onClose={() => setScreen({ type: 'main' })}
-          constraints={getSystemConstraints({
-            namespaceName: namespace.name,
-            isSystemCatalogNs,
-          })}
-        />
-      ) : screen.type === 'delete' ? (
-        <DeleteForm
-          name={namespace.name}
-          type="namespace"
-          onClose={onClose}
-          onConfirm={deleteNs}
-        />
-      ) : screen.type === 'edit' && screenAttr ? (
-        <EditAttrForm
-          db={db}
-          attr={screenAttr}
-          onClose={() => setScreen({ type: 'main' })}
-          constraints={getSystemConstraints({
-            namespaceName: namespace.name,
-            isSystemCatalogNs: isSystemCatalogNs,
-            attr: screenAttr,
-          })}
-        />
-      ) : null}
-    </>
-  );
+      <div>
+        <Button
+          size="mini"
+          variant="secondary"
+          onClick={() => setScreen({ kind: 'add-attr', attrKind: 'data' })}
+        >
+          <PlusIcon className="inline" height="12px" />
+          New attribute
+        </Button>
+      </div>
+      <RecentlyDeletedAttrs
+        notes={notes}
+        db={db}
+        appId={appId}
+        namespace={namespace}
+      />
+    </div>
+  ) : screen.kind === 'add-attr' ? (
+    <AddAttrForm
+      db={db}
+      namespace={namespace}
+      namespaces={namespaces}
+      onClose={() => setScreen({ kind: 'main' })}
+      constraints={getSystemConstraints({
+        namespaceName: namespace.name,
+        isSystemCatalogNs,
+      })}
+      attrType={screen.attrKind === 'link' ? 'ref' : 'blob'}
+      onAttrTypeChange={(t) =>
+        onScreenChange({
+          kind: 'add-attr',
+          attrKind: t === 'ref' ? 'link' : 'data',
+        })
+      }
+    />
+  ) : screen.kind === 'edit-attr' && screenAttr ? (
+    <EditAttrForm
+      db={db}
+      attr={screenAttr}
+      onClose={() => setScreen({ kind: 'main' })}
+      constraints={getSystemConstraints({
+        namespaceName: namespace.name,
+        isSystemCatalogNs: isSystemCatalogNs,
+        attr: screenAttr,
+      })}
+    />
+  ) : null;
 }
 
 function DeleteForm({
@@ -350,12 +348,16 @@ function AddAttrForm({
   namespaces,
   onClose,
   constraints,
+  attrType,
+  onAttrTypeChange,
 }: {
   db: InstantReactWebDatabase<any>;
   namespace: SchemaNamespace;
   namespaces: SchemaNamespace[];
   onClose: () => void;
   constraints: SystemConstraints;
+  attrType: 'blob' | 'ref';
+  onAttrTypeChange: (attrType: 'blob' | 'ref') => void;
 }) {
   const [isRequired, setIsRequired] = useState(false);
   const [isIndex, setIsIndex] = useState(false);
@@ -364,7 +366,6 @@ function AddAttrForm({
   const [isCascadeReverse, setIsCascadeReverse] = useState(false);
   const [checkedDataType, setCheckedDataType] =
     useState<CheckedDataType | null>(null);
-  const [attrType, setAttrType] = useState<'blob' | 'ref'>('blob');
   const [relationship, setRelationship] =
     useState<RelationshipKinds>('many-many');
 
@@ -455,7 +456,7 @@ function AddAttrForm({
             { id: 'blob', label: 'Data' },
             { id: 'ref', label: 'Link' },
           ]}
-          onChange={(item) => setAttrType(item.id as 'blob' | 'ref')}
+          onChange={(item) => onAttrTypeChange(item.id as 'blob' | 'ref')}
         />
       </div>
       {attrType === 'blob' ? (

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useExplorerProps } from '.';
+import { useExplorerDialog, useExplorerProps } from '.';
 import { SchemaNamespace } from '@lib/types';
-import { Button, cn, Dialog, ToggleCollection, useDialog } from '../ui';
+import { Button, cn, Dialog, ToggleCollection } from '../ui';
 import {
   RecentlyDeletedNamespaces,
   useRecentlyDeletedNamespaces,
@@ -28,9 +28,19 @@ export const ExplorerLayout = ({
   appId: string;
 }) => {
   const props = useExplorerProps();
+  const { dialog, setDialog } = useExplorerDialog();
 
-  const recentlyDeletedNsDialog = useDialog();
-  const newNsDialog = useDialog();
+  const recentlyDeletedNsDialog = {
+    open: dialog?.type === 'recently-deleted-ns',
+    onOpen: () => setDialog({ type: 'recently-deleted-ns' }),
+    onClose: () => setDialog(null),
+  };
+
+  const newNsDialog = {
+    open: dialog?.type === 'new-namespace',
+    onOpen: () => setDialog({ type: 'new-namespace' }),
+    onClose: () => setDialog(null),
+  };
 
   const selectedNamespace = namespaces.find(
     (ns) => ns.id === props.explorerState?.namespace,
@@ -58,20 +68,24 @@ export const ExplorerLayout = ({
   );
 
   // Auto-select first namespace if none selected
+  const { setExplorerState } = props;
   useEffect(() => {
     if (!selectedNamespace && namespaces.length > 0) {
-      if (recentExplorerNamespaceId) {
-        const savedNamespace = namespaces.find(
-          (ns) => ns.id === recentExplorerNamespaceId,
-        );
-        if (savedNamespace) {
-          props.setExplorerState({ namespace: savedNamespace.id });
-        }
-      } else {
-        props.setExplorerState({ namespace: namespaces[0].id });
-      }
+      const savedNamespace = recentExplorerNamespaceId
+        ? namespaces.find((ns) => ns.id === recentExplorerNamespaceId)
+        : undefined;
+      const namespaceId = savedNamespace?.id ?? namespaces[0].id;
+      setExplorerState((prev) => ({
+        ...(prev ?? {}),
+        namespace: namespaceId,
+      }));
     }
-  }, [selectedNamespace, namespaces, props]);
+  }, [
+    selectedNamespace,
+    namespaces,
+    recentExplorerNamespaceId,
+    setExplorerState,
+  ]);
 
   const deletedNamespaces = useRecentlyDeletedNamespaces(props.appId);
 
@@ -90,7 +104,6 @@ export const ExplorerLayout = ({
           db={db}
           onClose={(p) => {
             newNsDialog.onClose();
-
             if (p?.name) {
               props.setExplorerState({ namespace: p.name });
             }

package/src/components/explorer/index.tsx

@@ -16,6 +16,17 @@ import { useSchemaQuery } from '@lib/hooks/explorer';
 import { useStableDB } from '@lib/hooks/useStableDB';
 import ErrorBoundary from '@lib/components/error-boundary';
 
+export type SetExplorerStateOptions = {
+  // Use 'replace' for transitions that shouldn't add a back-button step,
+  // such as switching screens within an already-open dialog. Defaults to 'push'.
+  history?: 'push' | 'replace';
+};
+
+export type SetExplorerState = (
+  action: React.SetStateAction<ExplorerNav | null>,
+  options?: SetExplorerStateOptions,
+) => void;
+
 interface ExplorerProps {
   appId: string;
   adminToken: string;
@@ -30,9 +41,7 @@ interface ExplorerProps {
   // When null: controlled mode with no selection
   // When ExplorerNav: controlled mode with a selection
   explorerState: HasDefault<ExplorerNav | null | undefined>;
-  setExplorerState: HasDefault<
-    React.Dispatch<React.SetStateAction<ExplorerNav | null>>
-  >;
+  setExplorerState: HasDefault<SetExplorerState>;
   useShadowDOM: HasDefault<boolean>;
 }
 
@@ -68,6 +77,27 @@ export const useExplorerState = () => {
   return { explorerState: ctx.props.explorerState, history: ctx.history };
 };
 
+export const useExplorerDialog = () => {
+  const ctx = useContext(ExplorerPropsContext);
+  if (!ctx.props) {
+    throw new Error(
+      'useExplorerDialog must be used within an Explorer component',
+    );
+  }
+  const props = ctx.props;
+  const dialog = props.explorerState?.dialog ?? null;
+  const setDialog = useCallback(
+    (d: ExplorerDialog | null, options?: SetExplorerStateOptions) => {
+      props.setExplorerState(
+        (prev) => (prev ? { ...prev, dialog: d } : prev),
+        options,
+      );
+    },
+    [props],
+  );
+  return { dialog, setDialog };
+};
+
 const isControlled = (props: WithOptional<ExplorerProps>): boolean => {
   // Component is controlled if explorerState prop is explicitly provided
   // (even if null - that means "no selection" in controlled mode)
@@ -79,7 +109,7 @@ const isControlled = (props: WithOptional<ExplorerProps>): boolean => {
 const fillPropsWithDefaults = (
   input: WithOptional<ExplorerProps>,
   _explorerState: ExplorerNav | null,
-  setExplorerState: React.Dispatch<React.SetStateAction<ExplorerNav | null>>,
+  setExplorerState: SetExplorerState,
 ): WithDefaults<ExplorerProps> => {
   const controlled = isControlled(input);
   return {
@@ -105,6 +135,19 @@ export type SearchFilterOp =
 
 export type SearchFilter = [string, SearchFilterOp, any];
 
+export type EditSchemaScreen =
+  | { kind: 'main' }
+  | { kind: 'rename' }
+  | { kind: 'add-attr'; attrKind: 'data' | 'link' }
+  | { kind: 'edit-attr'; attrId: string; isForward: boolean };
+
+export type ExplorerDialog =
+  | { type: 'add-row' }
+  | { type: 'edit-row'; rowId: string }
+  | { type: 'edit-schema'; screen: EditSchemaScreen }
+  | { type: 'new-namespace' }
+  | { type: 'recently-deleted-ns' };
+
 export interface ExplorerNav {
   namespace: string;
   where?: [string, any];
@@ -113,6 +156,7 @@ export interface ExplorerNav {
   filters?: SearchFilter[];
   limit?: number;
   page?: number;
+  dialog?: ExplorerDialog | null;
 }
 
 export const Explorer = (_props: WithOptional<ExplorerProps>) => {