@instantdb/components 0.0.1

package/src/utils/indexingJobs.ts

@@ -0,0 +1,126 @@
+import useSWRSubscription from 'swr/subscription';
+import { CheckedDataType, InstantIndexingJob } from '@lib/types';
+
+export async function createJob(
+  {
+    appId,
+    attrId,
+    jobType,
+    checkedDataType,
+    apiURI,
+  }: {
+    appId: string;
+    attrId: string;
+    jobType: InstantIndexingJob['job_type'];
+    checkedDataType?: CheckedDataType | null | undefined;
+    apiURI: string;
+  },
+  token: string,
+): Promise<InstantIndexingJob> {
+  const res = await fetch(`${apiURI}/dash/apps/${appId}/indexing-jobs`, {
+    method: 'POST',
+    headers: {
+      authorization: `Bearer ${token}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      'app-id': appId,
+      'attr-id': attrId,
+      'job-type': jobType,
+      'checked-data-type': checkedDataType,
+    }),
+  });
+
+  const json = await res.json();
+  return json.job;
+}
+
+export function jobFetchLoop(
+  appId: string,
+  jobId: string,
+  token: string,
+  apiURI: string,
+) {
+  let stopped = false;
+  let errored = false;
+  let waitMs = 20;
+  let lastBody: string | null = null;
+
+  const nextWaitMs = (body: string) => {
+    if (body !== lastBody) {
+      waitMs = 20;
+      lastBody = body;
+      return waitMs;
+    }
+    const ret = waitMs;
+    waitMs = Math.min(10000, waitMs * 2);
+    return ret;
+  };
+
+  const start = async (
+    cb: (data: InstantIndexingJob | null, error?: Error) => void,
+  ) => {
+    while (!stopped && !errored) {
+      try {
+        const res = await fetch(
+          `${apiURI}/dash/apps/${appId}/indexing-jobs/${jobId}`,
+          { headers: { authorization: `Bearer ${token}` } },
+        );
+        const body = await res.text();
+        const json = JSON.parse(body);
+        const job = json.job;
+        cb(job);
+        if (job.job_status !== 'processing' && job.job_status !== 'waiting') {
+          return job;
+        }
+        await new Promise((resolve) => setTimeout(resolve, nextWaitMs(body)));
+      } catch (e) {
+        console.error('Job polling error:', e);
+        errored = true;
+        cb(null, e as Error);
+      }
+    }
+  };
+
+  return {
+    start: async (
+      cb: (data: InstantIndexingJob | null, error?: Error) => void,
+    ): Promise<InstantIndexingJob> => {
+      return start(cb);
+    },
+    stop: () => {
+      stopped = true;
+    },
+  };
+}
+
+export function useJobSubscription({
+  appId,
+  jobId,
+  token,
+  apiURI,
+}: {
+  appId: string;
+  jobId: string;
+  token: string;
+  apiURI: string;
+}) {
+  const { data, error } = useSWRSubscription(
+    ['jobs', appId, jobId],
+    ([_, appId, jobId], { next }) => {
+      const fetchLoop = jobFetchLoop(appId, jobId, token, apiURI);
+      fetchLoop.start((data, error) => next(error, data));
+      return () => fetchLoop.stop();
+    },
+  );
+
+  return { data, error };
+}
+
+export function jobIsErrored(job: InstantIndexingJob) {
+  return job.job_status === 'errored';
+}
+
+export function jobIsCompleted(job: InstantIndexingJob) {
+  return job.job_status === 'completed' || job.job_status === 'errored';
+}

package/src/utils/parsePermsJSON.ts

@@ -0,0 +1,35 @@
+import JsonParser from 'json5';
+
+// parse string as json5, returning the object,
+// boolean values will be converted to strings
+// return a normal json string
+export const parsePermsJSON = (text: string): Result<string> => {
+  const parseResult = doTry(() =>
+    JsonParser.parse(text, (_key, value) => {
+      if (value === true) {
+        return 'true';
+      } else if (value === false) {
+        return 'false';
+      } else {
+        return value;
+      }
+    }),
+  );
+  return parseResult;
+};
+
+export const doTry = <T>(fn: () => T): Result<T> => {
+  try {
+    const value = fn();
+    return { status: 'ok', value };
+  } catch (error) {
+    return { status: 'error', error: error as Error };
+  }
+};
+
+type Result<T> =
+  | { status: 'ok'; value: T }
+  | {
+      status: 'error';
+      error: Error;
+    };

package/src/utils/renames.ts

@@ -0,0 +1,42 @@
+import { SchemaNamespace } from '@lib/types';
+
+export const createRenameNamespaceOps = (
+  newName: string,
+  namespace: SchemaNamespace,
+  namespaces: SchemaNamespace[],
+) => {
+  const currentName = namespace.name;
+  const ops: any[] = [];
+  namespace.attrs.forEach((attr) => {
+    ops.push([
+      'update-attr',
+      {
+        id: attr.id,
+        'forward-identity': [
+          attr.linkConfig.forward.id,
+          newName,
+          attr.linkConfig.forward.attr,
+        ],
+      },
+    ]);
+  });
+
+  namespaces.forEach((ns) => {
+    ns.attrs.forEach((attr) => {
+      if (attr.linkConfig.reverse?.namespace === currentName) {
+        ops.push([
+          'update-attr',
+          {
+            id: attr.id,
+            'reverse-identity': [
+              attr.linkConfig.reverse.id,
+              newName,
+              attr.linkConfig.reverse.attr,
+            ],
+          },
+        ]);
+      }
+    });
+  });
+  return ops;
+};

package/src/utils/tableWidthSize.ts

@@ -0,0 +1,62 @@
+/**
+ *
+ * @param columnId
+ * @param max set a maximum width to return
+ * @returns minimum width to display all column cells
+ * @throws Error if element with class ${columnId} not found
+ */
+export const getTableWidthSize = (columnId: string, max: number): number => {
+  const header = document.querySelector(`.th-${columnId}`);
+  if (!header) {
+    throw new Error(`Element with class th-${columnId} not found`);
+  }
+
+  const tableCells = document.querySelectorAll(`span.td-${columnId}`);
+
+  // Create container for clones
+  const container = document.createElement('div');
+  container.style.position = 'absolute';
+  container.style.visibility = 'hidden';
+  container.style.top = '-9999px';
+  container.style.left = '-9999px';
+  container.style.width = 'auto';
+  container.style.whiteSpace = 'nowrap';
+
+  document.body.appendChild(container);
+
+  try {
+    // Clone and measure header
+    const headerClone = header.cloneNode(true) as HTMLElement;
+    headerClone.style.display = 'inline-block';
+    headerClone.style.overflow = 'visible';
+    headerClone.style.width = 'auto';
+    headerClone.style.maxWidth = 'none';
+    headerClone.style.whiteSpace = 'nowrap';
+    container.appendChild(headerClone);
+    const headerWidth = headerClone.scrollWidth;
+
+    // Clone and measure each cell
+    const cellWidths = Array.from(tableCells).map((cell) => {
+      const cellClone = cell.cloneNode(true) as HTMLElement;
+      cellClone.style.display = 'inline-block';
+      cellClone.style.overflow = 'visible';
+      cellClone.style.width = 'auto';
+      cellClone.style.maxWidth = 'none';
+      cellClone.style.whiteSpace = 'nowrap';
+      container.appendChild(cellClone);
+      const width = cellClone.scrollWidth;
+      container.removeChild(cellClone);
+      return width;
+    });
+
+    const maxCellWidth = cellWidths.length > 0 ? Math.max(...cellWidths) : 0;
+    const maxWidth = Math.max(headerWidth, maxCellWidth);
+
+    // Add padding
+    const finalWidth = maxWidth + 12;
+
+    return Math.min(finalWidth, max);
+  } finally {
+    document.body.removeChild(container);
+  }
+};

package/tailwind.config.cjs

@@ -0,0 +1,42 @@
+// Tailwind v4 uses CSS-first configuration via style.css
+// This config is kept for any remaining JS-based customizations
+
+const sans = [
+  'ui-sans-serif',
+  'system-ui',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  'Segoe UI',
+  'Roboto',
+  'Arial',
+  'Noto Sans',
+  'sans-serif',
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji',
+];
+
+module.exports = {
+  darkMode: 'class',
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  plugins: [],
+  theme: {
+    fontFamily: {
+      sans: ['"IBM Plex Sans"', ...sans],
+      mono: [
+        'Berk Mono',
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace',
+      ],
+    },
+    extend: {},
+  },
+  future: { hoverOnlyWhenSupported: true },
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "strict": true,
+    "outDir": "dist/tsc",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "rootDirs": ["src", "app"],
+    "sourceMap": true,
+    "jsx": "react",
+    "checkJs": false,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["./src/*"]
+    },
+    "strictNullChecks": true
+  }
+}

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
+import dts from 'unplugin-dts/vite';
+
+import { peerDependencies, dependencies } from './package.json';
+
+export default defineConfig({
+  clearScreen: false,
+  plugins: [react({}), tailwindcss({ optimize: true }), dts({})],
+  resolve: {
+    alias: {
+      '@lib': path.resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    target: 'esnext',
+    emptyOutDir: false,
+    cssCodeSplit: true,
+    lib: {
+      formats: ['es', 'cjs'],
+      entry: [
+        resolve(__dirname, 'src', 'index.tsx'),
+        resolve(__dirname, 'src', 'style.css'),
+      ],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: (id) => {
+        // Bundle prism-react-renderer to avoid CJS/ESM interop issues
+        if (
+          id === 'prism-react-renderer' ||
+          id.startsWith('prism-react-renderer/')
+        ) {
+          return false;
+        }
+        // Check exact matches and subpath imports (e.g., react/jsx-runtime)
+        const allDeps = [
+          ...Object.keys(peerDependencies),
+          ...Object.keys(dependencies),
+        ];
+        return allDeps.some((dep) => id === dep || id.startsWith(dep + '/'));
+      },
+    },
+  },
+});