npm install @prequel/import-react react

import { ImportProvider, createDefaultClient } from "@prequel/import-react";

const client = createDefaultClient({
  fetchToken: async () => {
    const response = await fetch("/api/prequel/import-token");
    const { token } = await response.json();
    return token;
  },
});

export function App() {
  return (
    <ImportProvider client={client}>
      <ImportExperience />
    </ImportProvider>
  );
}

import { useListDatasets } from "@prequel/import-react";

export function DatasetList() {
  const { items, isLoading, error, hasNextPage, fetchNextPage } = useListDatasets({
    pageSize: 25,
  });

  if (isLoading) return null;
  if (error) return <p>Unable to load datasets.</p>;

  return (
    <>
      <ul>
        {items.map((dataset) => (
          <li key={dataset.id}>{dataset.name}</li>
        ))}
      </ul>
      <button disabled={!hasNextPage} onClick={fetchNextPage}>
        Next
      </button>
    </>
  );
}

import { useSource, useSourceTables } from "@prequel/import-react";

export function SourceDetails({ sourceId }: { sourceId: string }) {
  const source = useSource(sourceId);
  const tables = useSourceTables(source.data?.id);

  if (source.isLoading || tables.isLoading) return null;

  return <pre>{JSON.stringify({ source: source.data, tables: tables.tables }, null, 2)}</pre>;
}

import { useCreateSource, type SourceOptions } from "@prequel/import-react";

export function CreateSourceButton({ source }: { source: SourceOptions }) {
  const { createSource, isCreating, error } = useCreateSource();

  return (
    <>
      <button disabled={isCreating} onClick={() => void createSource(source)}>
        Create source
      </button>
      {error ? <p>{error.message}</p> : null}
    </>
  );
}

import { useSourceForm } from "@prequel/import-react";

export function SourceForm({ providerId, vendor }: { providerId: string; vendor: string }) {
  const form = useSourceForm({ providerId, vendor });

  if (form.isLoading) return null;

  return (
    <form>
      {form.fields.map((field) => (
        <label key={field.path}>
          {field.attributes.label}
          <input
            defaultValue={String(field.default ?? "")}
            onChange={(event) => form.setSourceField(field, event.target.value)}
          />
        </label>
      ))}
    </form>
  );
}