@datarecce/ui 0.1.41 → 0.2.0

package/README.md

@@ -1,164 +1,59 @@
-<p align="center">
-    <a href="https://reccehq.com">
-        <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="https://reccehq.com/assets/images/recce-logo-stacked.avif">
-            <source media="(prefers-color-scheme: light)" srcset="https://reccehq.com/assets/images/recce-logo-stacked.avif">
-            <img alt="Recce" src="https://reccehq.com/assets/images/recce-logo-stacked.avif" width="200">
-        </picture>
-    </a>
-</p>
+# @datarecce/ui
 
-<h1 align="center">@datarecce/ui</h1>
-
-<p align="center">
-    React components for building data validation and review interfaces.
-</p>
-
-<p align="center">
-    <a href="https://www.npmjs.com/package/@datarecce/ui"><img src="https://img.shields.io/npm/v/@datarecce/ui?style=flat-square" alt="npm version"></a>
-    <a href="https://github.com/DataRecce/recce-ui/blob/main/LICENSE"><img src="https://img.shields.io/github/license/DataRecce/recce-ui?style=flat-square" alt="license"></a>
-    <a href="https://www.npmjs.com/package/@datarecce/ui"><img src="https://img.shields.io/npm/dm/@datarecce/ui?style=flat-square" alt="downloads"></a>
-</p>
-
----
-
-## What is this?
-
-`@datarecce/ui` is the React component library extracted from [Recce](https://github.com/DataRecce/recce), a data validation tool for dbt projects. Use it to build custom data comparison, profiling, and validation interfaces in your React applications.
-
-## Looking to Contribute?
-
-We welcome contributions! Whether it's bug fixes, new features, or documentation improvements.
-
-Check out our [Contributing Guide](./CONTRIBUTING.md) to get started with development setup, coding standards, and the PR process.
+Shared UI library for Recce OSS and Recce Cloud.
 
 ## Quick Start
 
-### Installation
+Install (workspace):
 
 ```bash
-npm install @datarecce/ui
-# or
-pnpm add @datarecce/ui
+cd js
+pnpm install
 ```
 
-### Peer Dependencies
-
-Install the required peer dependencies:
-
-```bash
-npm install react react-dom @mui/material @emotion/react @tanstack/react-query @xyflow/react axios
-```
-
-### Basic Setup
-
-Wrap your application with the required providers:
+Basic usage with `RecceProvider`:
 
 ```tsx
-import { MuiProvider, ToasterProvider } from "@datarecce/ui";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RecceProvider } from "@datarecce/ui/providers";
+import { LineageView } from "@datarecce/ui/components/lineage";
 
-const queryClient = new QueryClient();
-
-function App() {
+export function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <MuiProvider>
-        <ToasterProvider>
-          {/* Your app components */}
-        </ToasterProvider>
-      </MuiProvider>
-    </QueryClientProvider>
-  );
-}
-```
-
-### Using Components
-
-```tsx
-import { LineageView, QueryForm, SchemaView } from "@datarecce/ui";
-
-function MyDataView() {
-  return (
-    <div>
+    <RecceProvider api={{ baseUrl: "/api" }}>
       <LineageView />
-      <QueryForm />
-      <SchemaView />
-    </div>
+    </RecceProvider>
   );
 }
 ```
 
-### Import Styles
+Primitives and advanced exports:
 
 ```tsx
-import "@datarecce/ui/styles";
+import { DiffText, HSplit } from "@datarecce/ui/primitives";
+import { LineageCanvas, useThemeColors } from "@datarecce/ui/advanced";
 ```
 
-## Available Components
-
-### Lineage & Visualization
-- `LineageView` - Interactive lineage graph
-- `LineagePage` - Full lineage interface with controls
-- `GraphNode`, `GraphEdge` - Graph primitives
+## API Reference
 
-### Query & SQL
-- `QueryForm` - SQL query input
-- `SqlEditor` - CodeMirror-based editor
-- `QueryResultView` - Results display
+Generate API reference via TypeDoc:
 
-### Data Profiling
-- `ProfileDiffForm` - Profile comparison
-- `HistogramChart` - Distribution visualization
-- `TopKSummaryList` - Top-K values
-
-### Schema
-- `SchemaView` - Structure display
-- `SchemaDiffView` - Schema comparison
-
-### Validation
-- `CheckList` - Validation checks
-- `CheckDetail` - Check details
-- `RunList`, `RunView` - Execution runs
-
-## Entry Points
-
-```tsx
-// All exports
-import { LineageView, QueryForm } from "@datarecce/ui";
-
-// Specific categories
-import { LineageView } from "@datarecce/ui/components";
-import { axiosClient } from "@datarecce/ui/api";
-import { useLineageViewContext } from "@datarecce/ui/hooks";
-import type { DataFrame, Check } from "@datarecce/ui/types";
+```bash
+cd js/packages/ui
+pnpm docs:api
 ```
 
-## Requirements
-
-| Dependency | Version |
-|------------|---------|
-| Node.js | >= 20 |
-| React | 18.x or 19.x |
-| @mui/material | 7.x |
-| @emotion/react | 11.x |
-| @tanstack/react-query | 5.x |
-| @xyflow/react | 12.x |
-| axios | 1.x |
+The generated output lives in `js/packages/ui/docs/api/`.
 
-## Links
+## TypeScript Types
 
-- [Recce Documentation](https://docs.reccehq.com/)
-- [Main Recce Project](https://github.com/DataRecce/recce)
-- [npm Package](https://www.npmjs.com/package/@datarecce/ui)
-- [Issue Tracker](https://github.com/DataRecce/recce-ui/issues)
+All exports ship with TypeScript definitions. Use the exported types from the
+same module path as the component or hook you import.
 
-## Support
+## Environment overrides
 
-- [Discord](https://discord.com/invite/VpwXRC34jz)
-- [dbt Slack #tools-recce](https://getdbt.slack.com/archives/C05C28V7CPP)
-- [Email: help@reccehq.com](mailto:help@reccehq.com)
+@datarecce/ui ships defaults for public URLs, but you can override them via Next.js env vars:
 
-## License
+- `NEXT_PUBLIC_API_URL` - overrides the default API base URL.
+- `NEXT_PUBLIC_RECCE_SUPPORT_CALENDAR_URL` - overrides the support calendar URL.
 
-[Apache-2.0](./LICENSE)
+These values are read from `process.env` at runtime in the host app.