@instantdb/components 0.0.1

package/src/config.ts

@@ -0,0 +1,61 @@
+export const isBrowser = typeof window != 'undefined';
+
+const devBackend = getLocal('devBackend');
+
+let localPort = '8888';
+
+if (devBackend && isBrowser) {
+  const portOverride = new URL(location.href).searchParams.get('port');
+  if (portOverride) {
+    localPort = portOverride;
+  }
+}
+
+export const config = {
+  apiURI: getLocal('devBackend')
+    ? `http://localhost:${localPort}`
+    : `https://api.instantdb.com`,
+  websocketURI: getLocal('devBackend')
+    ? `ws://localhost:${localPort}/runtime/session`
+    : `wss://api.instantdb.com/runtime/session`,
+};
+
+export const isTouchDevice =
+  typeof window !== 'undefined' && 'ontouchstart' in window;
+
+export function getLocal(k: string) {
+  if (!isBrowser) {
+    return null;
+  }
+
+  try {
+    const raw = localStorage.getItem(k);
+
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function setLocal(k: string, v: any) {
+  if (!isBrowser) {
+    return;
+  }
+
+  try {
+    localStorage.setItem(k, JSON.stringify(v));
+  } catch (e) {
+    return;
+  }
+}
+
+export const localStorageFlagPrefix = `__instant__flag__`;
+
+export const cliOauthParamName = '_cli_oauth_ticket';
+
+export const discordInviteUrl = 'https://discord.com/invite/VU53p7uQcE';
+
+export const discordOAuthAppsFeedbackInviteUrl =
+  'https://discord.gg/GrvbPTBDEX';
+
+export const bugsAndQuestionsInviteUrl = 'https://discord.gg/unA5vyV6mP';

package/src/hooks/explorer.tsx

@@ -0,0 +1,125 @@
+import { InstantReactWebDatabase } from '@instantdb/react';
+import { useEffect, useState } from 'react';
+import { DBAttr, SchemaNamespace } from '@lib/types';
+import { dbAttrsToExplorerSchema } from '@lib/schema';
+
+export type SearchFilterOp =
+  | '='
+  | '$ilike'
+  | '$like'
+  | '$gt'
+  | '$lt'
+  | '$isNull';
+export type SearchFilter = [string, SearchFilterOp, any];
+
+function makeWhere(
+  navWhere: null | undefined | [string, any],
+  searchFilters: null | undefined | SearchFilter[],
+) {
+  const where: { [key: string]: any } = {};
+  if (navWhere) {
+    where[navWhere[0]] = navWhere[1];
+  }
+  if (searchFilters?.length) {
+    where.or = searchFilters.map(([attr, op, val]) => {
+      switch (op) {
+        case '=':
+          return { [attr]: val };
+        case '$isNull':
+          return { [attr]: { [op]: true } };
+        default:
+          return { [attr]: { [op]: val } };
+      }
+    });
+  }
+  return where;
+}
+
+// HOOKS
+export function useNamespacesQuery(
+  db: InstantReactWebDatabase<any>,
+  selectedNs?: SchemaNamespace,
+  navWhere?: [string, any],
+  searchFilters?: SearchFilter[],
+  limit?: number,
+  offset?: number,
+  sortAttr?: string,
+  sortAsc?: boolean,
+) {
+  const direction: 'asc' | 'desc' = sortAsc ? 'asc' : 'desc';
+
+  const where = makeWhere(navWhere, searchFilters);
+
+  const iql = selectedNs
+    ? {
+        [selectedNs.name]: {
+          ...Object.fromEntries(
+            selectedNs.attrs
+              .filter((a) => a.type === 'ref')
+              .map((a) => [a.name, { $: { fields: ['id'] } }]),
+          ),
+          $: {
+            ...(where ? { where: where } : {}),
+            ...(limit ? { limit } : {}),
+            ...(offset ? { offset } : {}),
+            ...(sortAttr ? { order: { [sortAttr]: direction } } : {}),
+          },
+        },
+      }
+    : {};
+
+  const itemsRes = db.useQuery(iql);
+
+  const allRes = db.useQuery(
+    selectedNs
+      ? {
+          [selectedNs.name]: {
+            $: {
+              aggregate: 'count',
+              ...(where ? { where: where } : {}),
+            },
+          },
+        }
+      : {},
+  );
+
+  // @ts-expect-error: admin-only feature
+  const allCount = allRes.aggregate?.[selectedNs?.name ?? '']?.count ?? null;
+
+  return {
+    itemsRes,
+    allCount,
+  };
+}
+export function useSchemaQuery(db: InstantReactWebDatabase<any>) {
+  const [state, setState] = useState<
+    | {
+        namespaces: SchemaNamespace[];
+        attrs: Record<string, DBAttr>;
+      }
+    | { namespaces: null; attrs: null }
+  >({ namespaces: null, attrs: null });
+
+  // (XXX)
+  // This is a hack so we can listen to all attr changes
+  //
+  // Context:
+  // The backend only sends attr changes to relevant queries.
+  // The ___explorer__ is a dummy query, which refreshes when _anything_
+  // happens.
+  //
+  // In the future, we may want a special `attr-changed` event.
+  db.useQuery({ ____explorer___: {} });
+
+  useEffect(() => {
+    function onAttrs(_oAttrs: Record<string, DBAttr>) {
+      setState({
+        attrs: _oAttrs,
+        namespaces: dbAttrsToExplorerSchema(_oAttrs),
+      });
+    }
+    return db._core._reactor.subscribeAttrs(onAttrs);
+  }, [db]);
+
+  return state;
+}

package/src/hooks/useAttrNotes.ts

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+type Note = {
+  message: string;
+};
+
+export const useAttrNotes = () => {
+  const [notes, setNotes] = useState<Record<string, Note>>({});
+
+  const setNote = (id: string, message: string) => {
+    setNotes((notes) => ({ ...notes, [id]: { message } }));
+  };
+
+  const removeNote = (id: string) => {
+    setNotes((notes) => {
+      const newNotes = { ...notes };
+      delete newNotes[id];
+      return newNotes;
+    });
+  };
+
+  return {
+    notes,
+    setNote,
+    removeNote,
+  };
+};

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,23 @@
+import { RefObject, useEffect } from 'react';
+
+export function useClickOutside(
+  ref: RefObject<HTMLElement>,
+  callback: () => void,
+) {
+  const handleClick = (e: MouseEvent) => {
+    if (
+      ref.current &&
+      e.target instanceof HTMLElement &&
+      !ref.current.contains(e.target)
+    ) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+}

package/src/hooks/useColumnVisibility.ts

@@ -0,0 +1,39 @@
+import { VisibilityState } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import { SchemaAttr } from '../types';
+
+const getColumnVisibilty = (appId: string) => {
+  const possible = localStorage.getItem(`columnVisibility_${appId}`);
+  if (!possible) {
+    return {};
+  }
+  try {
+    return JSON.parse(possible);
+  } catch (error) {
+    console.error('Failed to parse column visibility', error);
+    return {};
+  }
+};
+
+export const useColumnVisibility = (props: {
+  appId: string;
+  namespaceId?: string;
+  attrs: SchemaAttr[] | undefined;
+}) => {
+  const [visibility, setVisibility] = useState<VisibilityState>(
+    getColumnVisibilty(props.appId),
+  );
+
+  useEffect(() => {
+    localStorage.setItem(
+      `columnVisibility_${props.appId}`,
+      JSON.stringify(visibility),
+    );
+  }, [props.appId, visibility]);
+
+  useEffect(() => {
+    setVisibility(getColumnVisibilty(props.appId));
+  }, [props.appId]);
+
+  return { visibility, setVisibility, attrs: props.attrs } as const;
+};

package/src/hooks/useEditBlobConstraints.ts

@@ -0,0 +1,185 @@
+import { useEffect, useState, useRef, useMemo } from 'react';
+import { CheckedDataType, InstantIndexingJob, SchemaAttr } from '../types';
+import { jobFetchLoop } from '../utils/indexingJobs';
+import { useExplorerProps } from '@lib/components/explorer';
+
+type JobConstraintTypes = 'require' | 'index' | 'unique' | 'type';
+
+export type PendingJob = {
+  jobType: InstantIndexingJob['job_type'];
+  checkedDataType?: CheckedDataType | null | undefined;
+};
+
+export const useEditBlobConstraints = ({
+  attr,
+  appId,
+  isRequired,
+  isIndexed,
+  isUnique,
+  checkedDataType,
+  token,
+}: {
+  attr: SchemaAttr;
+  appId: string;
+  token: string;
+  isRequired: boolean;
+  isIndexed: boolean;
+  isUnique: boolean;
+  checkedDataType: CheckedDataType | 'any';
+}) => {
+  const [pendingJobs, setPendingJobs] = useState<{
+    [jobType in JobConstraintTypes]?: PendingJob;
+  }>({});
+
+  const [runningjobs, setRunningJobs] = useState<{
+    [jobType in JobConstraintTypes]?: InstantIndexingJob;
+  }>({});
+
+  const [progress, setProgress] = useState<{ [jobType: string]: number }>({});
+
+  const explorerProps = useExplorerProps();
+
+  useEffect(() => {
+    // If running jobs, don't update any pending
+    const isRunning = Object.values(runningjobs).some(
+      (job) => job.job_status !== 'completed' && job.job_status !== 'errored',
+    );
+    if (isRunning) {
+      return;
+    }
+
+    // Pending requirement job
+    if (isRequired === attr.isRequired) {
+      setPendingJobs((p) => ({ ...p, require: undefined }));
+    } else if (isRequired) {
+      setPendingJobs((p) => ({ ...p, require: { jobType: 'required' } }));
+    } else if (!isRequired) {
+      setPendingJobs((p) => ({
+        ...p,
+        require: { jobType: 'remove-required' },
+      }));
+    }
+
+    // Pending index job
+    if (isIndexed === attr.isIndex) {
+      setPendingJobs((p) => ({ ...p, index: undefined }));
+    } else if (isIndexed) {
+      setPendingJobs((p) => ({ ...p, index: { jobType: 'index' } }));
+    } else if (!isIndexed) {
+      setPendingJobs((p) => ({
+        ...p,
+        index: { jobType: 'remove-index' },
+      }));
+    }
+
+    // Pending unique job
+    if (isUnique === attr.isUniq) {
+      setPendingJobs((p) => ({ ...p, unique: undefined }));
+    } else if (isUnique) {
+      setPendingJobs((p) => ({ ...p, unique: { jobType: 'unique' } }));
+    } else if (!isUnique) {
+      setPendingJobs((p) => ({
+        ...p,
+        unique: { jobType: 'remove-unique' },
+      }));
+    }
+
+    // Checked data type
+    if (checkedDataType === (attr.checkedDataType || 'any')) {
+      setPendingJobs((p) => ({ ...p, type: undefined }));
+    } else {
+      if (checkedDataType === 'any') {
+        setPendingJobs((p) => ({
+          ...p,
+          type: { jobType: 'remove-data-type' },
+        }));
+      } else {
+        setPendingJobs((p) => ({
+          ...p,
+          type: { jobType: 'check-data-type', checkedDataType },
+        }));
+      }
+    }
+  }, [isRequired, isIndexed, isUnique, checkedDataType, attr, runningjobs]);
+
+  const [isCreatingJobs, setIsCreatingJobs] = useState(false);
+
+  const apply = async () => {
+    if (isCreatingJobs) return;
+
+    // Clean up previous errors
+    setRunningJobs({});
+    setIsCreatingJobs(true);
+    Object.entries(pendingJobs).forEach(async ([jobType, pendingJob]) => {
+      if (!pendingJob) return;
+      const res = await fetch(
+        `${explorerProps.apiURI}/dash/apps/${appId}/indexing-jobs`,
+        {
+          method: 'POST',
+          headers: {
+            authorization: `Bearer ${token}`,
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({
+            'app-id': appId,
+            'attr-id': attr.id,
+            'job-type': pendingJob.jobType,
+            'checked-data-type': pendingJob.checkedDataType,
+          }),
+        },
+      );
+      const json = await res.json();
+      setRunningJobs((p) => ({ ...p, [jobType]: json.job }));
+      setPendingJobs((p) => ({ ...p, [jobType]: undefined }));
+      setIsCreatingJobs(false);
+      const fetchLoop = jobFetchLoop(
+        appId,
+        json.job.id,
+        token,
+        explorerProps.apiURI,
+      );
+      await fetchLoop.start((updatedJob, error) => {
+        if (error) {
+          return;
+        }
+
+        if (updatedJob) {
+          const workEstimateTotal = updatedJob.work_estimate ?? 50000;
+          const workCompletedTotal = updatedJob.work_completed ?? 0;
+
+          const percent = Math.floor(
+            (workCompletedTotal / workEstimateTotal) * 100,
+          );
+          setProgress((prev) => ({ ...prev, [jobType]: percent }));
+
+          setRunningJobs((prev) => ({
+            ...prev,
+            [jobType]: updatedJob,
+          }));
+        }
+      });
+      fetchLoop.stop();
+    });
+  };
+
+  // Get average of non-zero and non-100 loading values
+  const progressPercent = useMemo(() => {
+    return (Object.values(progress)
+      .filter((p) => p > 0 && p < 100)
+      .reduce((a, b) => a + b, 0) /
+      Object.values(progress).filter((n) => n > 0 && n < 100).length) as
+      | number
+      | null;
+  }, [progress]);
+
+  return {
+    isPending: Object.values(pendingJobs).filter(Boolean).length > 0,
+    progress: progressPercent,
+    isRunning: Object.values(runningjobs).some(
+      (job) => job.job_status !== 'completed' && job.job_status !== 'errored',
+    ),
+    pending: pendingJobs,
+    running: runningjobs,
+    apply,
+  };
+};

package/src/hooks/useIsOverflow.ts

@@ -0,0 +1,24 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export function useIsOverflow() {
+  const ref = useRef<any>(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {
+      const hasOverflow =
+        current.scrollWidth > current.clientWidth ||
+        current.scrollHeight > current.clientHeight;
+
+      setIsOverflow(hasOverflow);
+    };
+
+    if (current) {
+      trigger();
+    }
+  }, [ref]);
+
+  return { ref, isOverflow, setIsOverflow };
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+
+function getSnapshot<T>(k: string): T | undefined {
+  if (typeof window == 'undefined') return;
+  let v = window.localStorage.getItem(k);
+  if (!v) return;
+  try {
+    return JSON.parse(v);
+  } catch (e) {}
+}
+
+function setItem<T>(k: string, v: T | undefined) {
+  if (typeof window == 'undefined') {
+    throw new Error('useLocalStorage/setState needs to run on the client');
+  }
+  const stringified = JSON.stringify(v);
+
+  try {
+    window.localStorage.setItem(k, stringified);
+  } catch (e) {
+    console.log("[localStorage] can't set k");
+    return;
+  }
+  // localStorage.setItem does not dispatch events to the current
+  window.dispatchEvent(
+    new StorageEvent('storage', { key: k, newValue: stringified }),
+  );
+}
+
+export function useLocalStorage<T>(
+  k: string,
+  defaultValue: T,
+): [T, (v: T | undefined) => void] {
+  const snapshotRef = useRef<T>(getSnapshot<T>(k) || defaultValue);
+  const subscribe = useCallback((cb: Function) => {
+    const listener = () => {
+      snapshotRef.current = getSnapshot<T>(k) || defaultValue;
+      cb();
+    };
+    window.addEventListener('storage', listener);
+    return () => {
+      window.removeEventListener('storage', listener);
+    };
+  }, []);
+  const state = useSyncExternalStore<T>(
+    subscribe,
+    () => snapshotRef.current,
+    () => defaultValue,
+  );
+  return [state, (v: T | undefined) => setItem<T>(k, v)];
+}

package/src/hooks/useMonacoJSONSchema.ts

@@ -0,0 +1,41 @@
+import { Monaco } from '@monaco-editor/react';
+import { useId } from 'react';
+import { useEffect } from 'react';
+
+export function useMonacoJSONSchema(
+  path: string,
+  monaco?: Monaco,
+  schema?: object,
+) {
+  const id = useId();
+  useEffect(() => {
+    if (!monaco || !schema) return;
+    const schemaUri = `http://myserver/myJsonTypeSchema-${id}`;
+
+    const diagnosticOptions =
+      monaco.languages.json.jsonDefaults.diagnosticsOptions;
+    const currentSchemas = diagnosticOptions.schemas || [];
+
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      ...diagnosticOptions,
+      schemas: [
+        ...currentSchemas,
+        {
+          uri: schemaUri,
+          fileMatch: [path],
+          schema: schema,
+        },
+      ],
+    });
+
+    return () => {
+      const currentOptions =
+        monaco.languages.json.jsonDefaults.diagnosticsOptions;
+      const currentSchemas = currentOptions.schemas || [];
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        ...currentOptions,
+        schemas: currentSchemas.filter((s) => s.uri !== schemaUri),
+      });
+    };
+  }, [monaco, path, schema, id]);
+}

package/src/hooks/useStableDB.ts

@@ -0,0 +1,30 @@
+import { init } from '@instantdb/react';
+import { useMemo } from 'react';
+
+type InstantReactClient = ReturnType<typeof init>;
+export const useStableDB = ({
+  appId,
+  apiURI,
+  websocketURI,
+  adminToken,
+}: {
+  appId: string;
+  apiURI: string;
+  websocketURI: string;
+  adminToken?: string;
+}) => {
+  const connection = useMemo<InstantReactClient>(
+    () =>
+      init({
+        appId,
+        apiURI,
+        websocketURI,
+        // @ts-ignore
+        __adminToken: adminToken,
+        disableValidation: true,
+      }),
+    [appId, apiURI, websocketURI, adminToken],
+  );
+
+  return connection;
+};

package/src/index.tsx

@@ -0,0 +1,8 @@
+import * as ui from './components/ui';
+
+export { Explorer } from './components/explorer/index';
+export type { ExplorerNav } from './components/explorer/index';
+export { StyleMe } from './components/StyleMe';
+
+export { ui };
+export * from './components/ui';