@datarecce/ui 0.1.0

package/README.md

@@ -0,0 +1,224 @@
+# @datarecce/ui
+
+React component library for building data validation and review interfaces. This library provides the UI components used in [Recce](https://github.com/DataRecce/recce), a data validation tool for dbt projects.
+
+## Installation
+
+```bash
+npm install @datarecce/ui
+# or
+yarn add @datarecce/ui
+# or
+pnpm add @datarecce/ui
+```
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+```json
+{
+  "@chakra-ui/react": "^3.0.0",
+  "@emotion/react": "^11.0.0",
+  "@tanstack/react-query": "^5.0.0",
+  "@xyflow/react": "^12.0.0",
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0"
+}
+```
+
+## Usage
+
+### Basic Setup
+
+Wrap your application with the Recce UI Provider:
+
+```tsx
+import { Provider } from "@datarecce/ui";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Provider>{/* Your app components */}</Provider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### Using Components
+
+Import and use individual components:
+
+```tsx
+import {
+  LineageView,
+  QueryForm,
+  ProfileDiffForm,
+  SchemaView,
+} from "@datarecce/ui";
+
+function MyComponent() {
+  return (
+    <div>
+      <LineageView />
+      <QueryForm />
+    </div>
+  );
+}
+```
+
+### Available Exports
+
+The library provides multiple entry points for different features:
+
+```tsx
+// Main components
+import { LineageView, QueryForm } from "@datarecce/ui/components";
+
+// API utilities
+import { axiosClient, fetchChecks } from "@datarecce/ui/api";
+
+// Custom hooks
+import { useLineageViewContext, useCheckToast } from "@datarecce/ui/hooks";
+
+// TypeScript types
+import type { DataFrame, Check, Run } from "@datarecce/ui/types";
+```
+
+## Component Categories
+
+### Lineage Components
+
+- `LineageView` - Interactive lineage graph visualization
+- `LineagePage` - Full lineage page with controls
+- `GraphNode`, `GraphEdge` - Graph building blocks
+- `NodeView` - Detailed node information display
+
+### Query Components
+
+- `QueryForm` - SQL query input form
+- `QueryPage` - Complete query interface
+- `SqlEditor` - Monaco-based SQL editor
+- `QueryResultView` - Query results display
+
+### Profile Components
+
+- `ProfileDiffForm` - Data profiling comparison form
+- `ProfileDiffResultView` - Profile diff results display
+
+### Chart Components
+
+- `HistogramChart` - Histogram visualization
+- `TopKSummaryList` - Top-K value summary
+- `HistogramDiffForm` - Histogram comparison interface
+
+### Schema Components
+
+- `SchemaView` - Schema structure display
+- `SchemaDiffView` - Schema comparison view
+- `ColumnNameCell` - Schema column renderer
+
+### Check Components
+
+- `CheckList` - List of validation checks
+- `CheckDetail` - Detailed check view
+- `LineageDiffView` - Lineage difference visualization
+
+### Run Components
+
+- `RunPage` - Run execution interface
+- `RunList` - List of execution runs
+- `RunView` - Individual run details
+
+## API Client Configuration
+
+The library includes API client utilities that need to be configured with your backend URL:
+
+```tsx
+import { axiosClient } from "@datarecce/ui/api";
+
+// Configure the API client
+axiosClient.defaults.baseURL = "http://localhost:8000";
+axiosClient.defaults.headers.common["Authorization"] = "Bearer token";
+```
+
+## Development
+
+### Building from Source
+
+This package uses a git submodule to reference the main Recce repository:
+
+```bash
+# Clone with submodules
+git clone --recursive https://github.com/DataRecce/recce-ui.git
+
+# Or if already cloned, initialize submodules
+git submodule init
+git submodule update
+
+# Install dependencies
+pnpm install
+
+# The postinstall script will automatically apply TypeScript patches
+# If you need to reapply patches manually:
+npm run patch:apply
+
+# Build the library
+pnpm build
+
+# Run in development mode
+pnpm dev
+
+# Type checking
+pnpm type:check        # Run with known issues handled
+pnpm type:check:strict # Run strict type checking
+```
+
+#### TypeScript Patches
+
+This package includes automatic patches to fix TypeScript strict mode issues in the source code. These patches are applied automatically during `npm install` and fix:
+
+1. Type assertion issues in CheckDetail.tsx
+2. Boolean type issues in CheckList.tsx
+3. Type conversion issues in LineageViewContextMenu.tsx
+4. Type inference issues in toaster.tsx
+
+The patches are temporary fixes until the main Recce repository is updated.
+
+### Updating the Submodule
+
+To update the Recce source code:
+
+```bash
+pnpm run submodule:update
+```
+
+### Running Storybook
+
+View component documentation and examples:
+
+```bash
+pnpm storybook
+```
+
+## TypeScript Support
+
+This library is written in TypeScript and provides full type definitions. All exports include proper TypeScript types for enhanced development experience.
+
+## License
+
+Apache-2.0
+
+## Contributing
+
+Contributions are welcome! Please check the main [Recce repository](https://github.com/DataRecce/recce) for contribution guidelines.
+
+## Links
+
+- [Recce Documentation](https://datarecce.io/docs)
+- [GitHub Repository](https://github.com/DataRecce/recce-ui)
+- [Main Recce Project](https://github.com/DataRecce/recce)
+- [Issue Tracker](https://github.com/DataRecce/recce/issues)

package/dist/api.js

@@ -0,0 +1,496 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var axios = require('axios');
+require('@amplitude/unified');
+var react = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+
+// recce-source/js/src/lib/const.ts
+var apiUrl = process.env.NEXT_PUBLIC_API_URL;
+apiUrl ??= typeof window !== "undefined" ? window.location.origin : "";
+var PUBLIC_API_URL = apiUrl;
+process.env.NEXT_PUBLIC_CLOUD_WEB_URL;
+
+// recce-source/js/src/lib/api/axiosClient.ts
+var axiosClient = axios__default.default.create({
+  baseURL: PUBLIC_API_URL
+});
+var reactQueryClient = new reactQuery.QueryClient();
+
+// recce-source/js/src/lib/api/types.ts
+function isQueryRun(run) {
+  return run.type === "query";
+}
+
+// recce-source/js/src/lib/api/runs.ts
+function mutateAddKey(run) {
+  if (run.result == null) {
+    return run;
+  }
+  if (isQueryRun(run)) {
+    run.result.columns = run.result.columns.map((c) => {
+      if (c.key) {
+        return c;
+      }
+      c.key = c.name;
+      return c;
+    });
+  }
+  return run;
+}
+async function submitRun(type, params, options) {
+  const track_props = options?.trackProps ? { ...options.trackProps } : {};
+  const response = await axiosClient.post("/api/runs", {
+    type,
+    params,
+    nowait: options?.nowait,
+    track_props
+  });
+  return response.data;
+}
+async function getRun(runId) {
+  const response = await axiosClient.get(
+    `/api/runs/${runId}`
+  );
+  return response.data;
+}
+async function waitRun(runId, timeout) {
+  const response = await axiosClient.get(
+    `/api/runs/${runId}/wait`,
+    {
+      params: {
+        timeout
+      }
+    }
+  );
+  return mutateAddKey(response.data);
+}
+async function cancelRun(runId) {
+  return await axiosClient.post(
+    `/api/runs/${runId}/cancel`
+  );
+}
+async function submitRunFromCheck(checkId, options) {
+  const response = await axiosClient.post(`/api/checks/${checkId}/run`, {
+    nowait: options?.nowait
+  });
+  return response.data;
+}
+async function searchRuns(type, params, limit) {
+  const response = await axiosClient.post(
+    `/api/runs/search`,
+    {
+      type,
+      params,
+      limit
+    }
+  );
+  return response.data;
+}
+async function listRuns() {
+  const response = await axiosClient.get(
+    "/api/runs"
+  );
+  return response.data;
+}
+async function aggregateRuns() {
+  const response = await axiosClient.post(`/api/runs/aggregate`, {});
+  return response.data;
+}
+
+// recce-source/js/src/lib/api/adhocQuery.ts
+async function submitQuery(params, options) {
+  return await submitRun("query", params, options);
+}
+async function submitQueryBase(params, options) {
+  return await submitRun("query_base", params, options);
+}
+async function submitQueryDiff(params, options) {
+  return await submitRun("query_diff", params, options);
+}
+
+// recce-source/js/src/lib/api/cacheKeys.ts
+var cacheKeys = {
+  rowCount: (model) => ["row_count", model],
+  lineage: () => ["lineage"],
+  checks: () => ["checks", "list"],
+  check: (checkId) => ["checks", checkId],
+  checkEvents: (checkId) => ["checks", checkId, "events"],
+  runs: () => ["runs"],
+  run: (runId) => ["runs", runId],
+  runsAggregated: () => ["runs_aggregated"],
+  flag: () => ["flag"],
+  instanceInfo: () => ["instance_info"],
+  user: () => ["user"]
+};
+
+// recce-source/js/src/lib/api/checks.ts
+async function createSimpleCheck() {
+  const response = await axiosClient.post("/api/checks", {
+    type: "simple"
+  });
+  return response.data;
+}
+async function createCheckByRun(runId, viewOptions) {
+  const track_props = {};
+  const response = await axiosClient.post("/api/checks", {
+    run_id: runId,
+    view_options: viewOptions,
+    track_props
+  });
+  return response.data;
+}
+async function listChecks() {
+  return (await axiosClient.get("/api/checks")).data;
+}
+function useChecks(enabled) {
+  return reactQuery.useQuery({
+    queryKey: cacheKeys.checks(),
+    queryFn: listChecks,
+    enabled
+  });
+}
+async function getCheck(checkId) {
+  const response = await axiosClient.get(`/api/checks/${checkId}`);
+  return response.data;
+}
+async function updateCheck(checkId, payload) {
+  const response = await axiosClient.patch(`/api/checks/${checkId}`, payload);
+  return response.data;
+}
+async function deleteCheck(checkId) {
+  const response = await axiosClient.delete(`/api/checks/${checkId}`);
+  return response.data;
+}
+async function reorderChecks(order) {
+  return await axiosClient.post("/api/checks/reorder", order);
+}
+async function markAsPresetCheck(checkId) {
+  await axiosClient.post(`/api/checks/${checkId}/mark-as-preset`);
+}
+
+// recce-source/js/src/lib/api/cll.ts
+async function getCll(input) {
+  const response = await axiosClient.post("/api/cll", input);
+  return response.data;
+}
+
+// recce-source/js/src/lib/api/connectToCloud.ts
+async function connectToCloud() {
+  const data = await axiosClient.post("/api/connect");
+  return data.data;
+}
+
+// recce-source/js/src/lib/api/flag.ts
+async function getServerFlag() {
+  return (await axiosClient.get("/api/flag")).data;
+}
+async function markOnboardingCompleted() {
+  try {
+    await axiosClient.post(
+      "/api/onboarding/completed"
+    );
+  } catch (_error) {
+  }
+}
+async function markRelaunchHintCompleted() {
+  try {
+    await axiosClient.post(
+      "/api/relaunch-hint/completed"
+    );
+  } catch (_error) {
+  }
+}
+async function getLineage(base = false) {
+  const response = await axiosClient.get(
+    `/api/lineage?base=${base}`
+  );
+  return response.data;
+}
+async function getLineageWithError(base = false) {
+  try {
+    const data = await getLineage(base);
+    return { data };
+  } catch (err) {
+    if (err instanceof axios.AxiosError) {
+      const data = err.response?.data;
+      const detail = data?.detail;
+      if (detail) {
+        return { error: detail };
+      } else {
+        return { error: err.message };
+      }
+    } else if (err instanceof Error) {
+      return { error: err.message };
+    } else {
+      return { error: "An unknown error occurred" };
+    }
+  }
+}
+async function getLineageDiff() {
+  const [base, current] = await Promise.all([
+    getLineageWithError(true),
+    getLineageWithError(false)
+  ]);
+  return {
+    base: base.data,
+    current: current.data,
+    base_error: base.error,
+    current_error: current.error
+  };
+}
+async function getServerInfo() {
+  return (await axiosClient.get(`/api/info`)).data;
+}
+async function getModelInfo(model) {
+  return (await axiosClient.get(
+    `/api/model/${model}`
+  )).data;
+}
+
+// recce-source/js/src/lib/api/lineagecheck.ts
+async function createLineageDiffCheck(viewOptions) {
+  const response = await axiosClient.post("/api/checks", {
+    type: "lineage_diff",
+    params: {},
+    view_options: viewOptions
+  });
+  return response.data;
+}
+
+// recce-source/js/src/lib/api/rowcount.ts
+async function submitRowCountDiff(params, options) {
+  return await submitRun("row_count_diff", params, options);
+}
+
+// recce-source/js/src/lib/api/models.ts
+async function fetchModelRowCount(modelName) {
+  const response = await axiosClient.get(
+    `/api/models/${modelName}/row_count`
+  );
+  return response.data;
+}
+async function queryModelRowCount(modelName) {
+  const { result } = await queryRowCount([modelName]);
+  return result[modelName];
+}
+async function queryRowCount(modelNames) {
+  if (modelNames.length === 0) {
+    throw new Error("No model names provided");
+  }
+  const { run_id } = await submitRowCountDiff(
+    { node_names: modelNames },
+    { nowait: true }
+  );
+  const run = await waitRun(run_id);
+  return {
+    runId: run_id,
+    result: run.result
+  };
+}
+
+// recce-source/js/src/lib/api/profile.ts
+async function submitProfileDiff(params, options) {
+  return await submitRun("profile_diff", params, options);
+}
+
+// recce-source/js/src/lib/api/schemacheck.ts
+async function createSchemaDiffCheck(params) {
+  const response = await axiosClient.post("/api/checks", {
+    type: "schema_diff",
+    params
+  });
+  return response.data;
+}
+
+// recce-source/js/src/lib/api/select.ts
+async function select(input) {
+  return (await axiosClient.post(
+    `/api/select`,
+    input
+  )).data;
+}
+async function saveAs(input) {
+  return (await axiosClient.post(
+    "/api/save-as",
+    input
+  )).data;
+}
+async function rename(input) {
+  return (await axiosClient.post(
+    "/api/rename",
+    input
+  )).data;
+}
+async function exportState() {
+  return (await axiosClient.post("/api/export")).data;
+}
+async function importState(file, checksOnly) {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("checks_only", (!!checksOnly).toString());
+  return (await axiosClient.post(
+    "/api/import",
+    formData
+  )).data;
+}
+async function isStateSyncing() {
+  const response = await axiosClient.get(
+    "/api/sync"
+  );
+  return response.status === 208;
+}
+async function syncState(input) {
+  try {
+    const response = await axiosClient.post("/api/sync", input);
+    if (response.status === 202) {
+      return {
+        status: "accepted"
+      };
+    }
+    if (response.status === 208) {
+      return {
+        status: "syncing"
+      };
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response?.status === 409) {
+        return { status: "conflict" };
+      }
+    }
+  }
+  throw new Error("Failed to sync state");
+}
+async function shareState() {
+  return (await axiosClient.post(
+    "/api/share"
+  )).data;
+}
+async function fetchUser() {
+  try {
+    const response = await axiosClient.get(
+      "/api/users"
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching user data:", error);
+    throw error;
+  }
+}
+async function fetchGitHubAvatar(userId) {
+  try {
+    const response = await axios__default.default.get(
+      `https://api.github.com/user/${userId}`
+    );
+    return response.data.avatar_url;
+  } catch (error) {
+    console.warn("Failed to fetch GitHub avatar:", error);
+    return null;
+  }
+}
+
+// recce-source/js/src/lib/api/valuediff.ts
+async function submitValueDiff(params, options) {
+  return await submitRun("value_diff", params, options);
+}
+async function submitValueDiffDetail(params, options) {
+  return await submitRun("value_diff_detail", params, options);
+}
+function useVersionNumber() {
+  const [version, setVersion] = react.useState("");
+  const [latestVersion, setLatestVersion] = react.useState("");
+  react.useEffect(() => {
+    async function fetchVersion() {
+      try {
+        const { version: version2, latestVersion: latestVersion2 } = (await axiosClient.get(
+          "/api/version"
+        )).data;
+        setVersion(version2);
+        setLatestVersion(latestVersion2);
+      } catch (error) {
+        console.error("Error fetching version number:", error);
+      }
+    }
+    void fetchVersion();
+  }, []);
+  return { version, latestVersion };
+}
+
+// recce-source/js/src/lib/api/localStorageKeys.ts
+var prefix = "recce-";
+var localStorageKeys = {
+  bypassSaveOverwrite: `${prefix}-bypass-save-overwrite`,
+  previewChangeFeedbackID: `${prefix}-preview-change-feedback`,
+  prepareEnvGuideID: `${prefix}-prepare-env`
+};
+
+// recce-source/js/src/lib/api/sessionStorageKeys.ts
+var prefix2 = "recce";
+var sessionStorageKeys = {
+  recommendationIgnored: `${prefix2}-recommendation-ignored`,
+  recommendationShowed: `${prefix2}-recommendation-showed`,
+  prevRefreshTimeStamp: `${prefix2}-prev-refresh-timestamp`,
+  lineageNotificationDismissed: `${prefix2}-lineage-notification-dismissed`
+};
+
+exports.aggregateRuns = aggregateRuns;
+exports.axiosClient = axiosClient;
+exports.cancelRun = cancelRun;
+exports.connectToCloud = connectToCloud;
+exports.createCheckByRun = createCheckByRun;
+exports.createLineageDiffCheck = createLineageDiffCheck;
+exports.createSchemaDiffCheck = createSchemaDiffCheck;
+exports.createSimpleCheck = createSimpleCheck;
+exports.deleteCheck = deleteCheck;
+exports.exportState = exportState;
+exports.fetchGitHubAvatar = fetchGitHubAvatar;
+exports.fetchModelRowCount = fetchModelRowCount;
+exports.fetchUser = fetchUser;
+exports.getCheck = getCheck;
+exports.getCll = getCll;
+exports.getLineage = getLineage;
+exports.getLineageDiff = getLineageDiff;
+exports.getLineageWithError = getLineageWithError;
+exports.getModelInfo = getModelInfo;
+exports.getRun = getRun;
+exports.getServerFlag = getServerFlag;
+exports.getServerInfo = getServerInfo;
+exports.importState = importState;
+exports.isStateSyncing = isStateSyncing;
+exports.listChecks = listChecks;
+exports.listRuns = listRuns;
+exports.localStorageKeys = localStorageKeys;
+exports.markAsPresetCheck = markAsPresetCheck;
+exports.markOnboardingCompleted = markOnboardingCompleted;
+exports.markRelaunchHintCompleted = markRelaunchHintCompleted;
+exports.queryModelRowCount = queryModelRowCount;
+exports.queryRowCount = queryRowCount;
+exports.reactQueryClient = reactQueryClient;
+exports.rename = rename;
+exports.reorderChecks = reorderChecks;
+exports.saveAs = saveAs;
+exports.searchRuns = searchRuns;
+exports.select = select;
+exports.sessionStorageKeys = sessionStorageKeys;
+exports.shareState = shareState;
+exports.submitProfileDiff = submitProfileDiff;
+exports.submitQuery = submitQuery;
+exports.submitQueryBase = submitQueryBase;
+exports.submitQueryDiff = submitQueryDiff;
+exports.submitRowCountDiff = submitRowCountDiff;
+exports.submitRun = submitRun;
+exports.submitRunFromCheck = submitRunFromCheck;
+exports.submitValueDiff = submitValueDiff;
+exports.submitValueDiffDetail = submitValueDiffDetail;
+exports.syncState = syncState;
+exports.updateCheck = updateCheck;
+exports.useChecks = useChecks;
+exports.useVersionNumber = useVersionNumber;
+exports.waitRun = waitRun;
+//# sourceMappingURL=api.js.map
+//# sourceMappingURL=api.js.map