diff --git a/docs/docs/api/appkit-ui/data/AreaChart.mdx b/docs/docs/api/appkit-ui/data/AreaChart.mdx new file mode 100644 index 00000000..7c1dd45c --- /dev/null +++ b/docs/docs/api/appkit-ui/data/AreaChart.mdx @@ -0,0 +1,85 @@ +# AreaChart + +Area Chart component for trend visualization with filled areas. + + +## Example + +```tsx +"use client"; + +import { AreaChart } from "@databricks/appkit-ui/react"; + +export default function AreaChartExample() { + return ( + + ); +} + +``` + + +## AreaChart + +Area Chart component for trend visualization with filled areas. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/area/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/area/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `orientation` | `enum` | | `"vertical"` | Chart orientation | +| `showSymbol` | `boolean` | | `false` | Show data point symbols | +| `smooth` | `boolean` | | `true` | Smooth line curves | +| `stacked` | `boolean` | | `false` | Stack areas | + + + +### Usage + +```tsx +import { AreaChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/BarChart.mdx b/docs/docs/api/appkit-ui/data/BarChart.mdx new file mode 100644 index 00000000..f76a57dd --- /dev/null +++ b/docs/docs/api/appkit-ui/data/BarChart.mdx @@ -0,0 +1,80 @@ +# BarChart + +Bar Chart component for categorical comparisons. + + +## Example + +```tsx +"use client"; + +import { BarChart } from "@databricks/appkit-ui/react"; + +export default function BarChartExample() { + return ( + + ); +} + +``` + + +## BarChart + +Bar Chart component for categorical comparisons. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/bar/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/bar/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `orientation` | `enum` | | `"vertical"` | Chart orientation | +| `stacked` | `boolean` | | - | Stack bars | + + + +### Usage + +```tsx +import { BarChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/DataTable.mdx b/docs/docs/api/appkit-ui/data/DataTable.mdx new file mode 100644 index 00000000..46f699ad --- /dev/null +++ b/docs/docs/api/appkit-ui/data/DataTable.mdx @@ -0,0 +1,73 @@ +# DataTable + +Production-ready data table with automatic data fetching and state management + + +## Example + +```tsx +"use client"; + +import { DataTable } from "@databricks/appkit-ui/react"; + +export default function DataTableExample() { + return ( + + ); +} + +``` + + +## DataTable + +Production-ready data table with automatic data fetching and state management + +Features: + - Automatic column generation from data structure + - Integrated with useAnalyticsQuery for data fetching + - Built-in loading, error, and empty states + - Dynamic filtering, sorting and pagination + - Column visibility controls + - Responsive design + - Supports opinionated mode (auto columns) and full-control mode (`children(table)`) + + +**Source:** [`packages/appkit-ui/src/react/table/data-table.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/table/data-table.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | ✓ | - | The query key to fetch the data | +| `parameters` | `Record` | ✓ | - | The parameters to pass to the query | +| `filterColumn` | `string` | | - | The column to filter by | +| `filterPlaceholder` | `string` | | - | Optional placeholder for the filter input | +| `transform` | `((data: any[]) => any[])` | | - | Optional function to transform data before creating table | +| `labels` | `DataTableLabels` | | - | Optional labels for the DataTable component | +| `ariaLabel` | `string` | | - | Optional accessibility label for the DataTable component | +| `testId` | `string` | | - | Optional test ID for the DataTable component | +| `className` | `string` | | - | Optional CSS class name for the DataTable component | +| `enableRowSelection` | `boolean` | | - | Enable row selection with checkboxes | +| `onRowSelectionChange` | `((rowSelection: RowSelectionState) => void)` | | - | Callback function to handle row selection changes | +| `children` | `((table: Table) => ReactNode)` | | - | Optional children for full control mode | +| `pageSize` | `number` | | - | Number of rows to display per page | +| `pageSizeOptions` | `number[]` | | - | Options for the page size selector | + + + +### Usage + +```tsx +import { DataTable } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/DonutChart.mdx b/docs/docs/api/appkit-ui/data/DonutChart.mdx new file mode 100644 index 00000000..cd2e056e --- /dev/null +++ b/docs/docs/api/appkit-ui/data/DonutChart.mdx @@ -0,0 +1,78 @@ +# DonutChart + +Donut Chart component (Pie chart with inner radius). + + +## Example + +```tsx +"use client"; + +import { DonutChart } from "@databricks/appkit-ui/react"; + +export default function DonutChartExample() { + return ( + + ); +} + +``` + + +## DonutChart + +Donut Chart component (Pie chart with inner radius). + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/pie/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/pie/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `innerRadius` | `number` | | `0` | Inner radius for donut charts (0-100%) | +| `showLabels` | `boolean` | | `true` | Show labels on slices | +| `labelPosition` | `enum` | | `"outside"` | Label position | + + + +### Usage + +```tsx +import { DonutChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/ErrorState.mdx b/docs/docs/api/appkit-ui/data/ErrorState.mdx new file mode 100644 index 00000000..4ae161ec --- /dev/null +++ b/docs/docs/api/appkit-ui/data/ErrorState.mdx @@ -0,0 +1,25 @@ +# ErrorState + + +## ErrorState + + +**Source:** [`packages/appkit-ui/src/react/table/error.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/table/error.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `error` | `string` | ✓ | - | - | + + + +### Usage + +```tsx +import { ErrorState } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/HeatmapChart.mdx b/docs/docs/api/appkit-ui/data/HeatmapChart.mdx new file mode 100644 index 00000000..c257f6ee --- /dev/null +++ b/docs/docs/api/appkit-ui/data/HeatmapChart.mdx @@ -0,0 +1,96 @@ +# HeatmapChart + +Heatmap Chart component for matrix-style data visualization. + + +## Example + +```tsx +"use client"; + +import { HeatmapChart } from "@databricks/appkit-ui/react"; + +export default function HeatmapChartExample() { + const data = []; + const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; + const hours = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"]; + + for (const day of days) { + for (const hour of hours) { + data.push({ + day, + hour, + count: Math.floor(Math.random() * 100), + }); + } + } + + return ( + + ); +} + +``` + + +## HeatmapChart + +Heatmap Chart component for matrix-style data visualization. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Data should be in "long format" with three fields: +- xKey: X-axis category (columns) +- yAxisKey: Y-axis category (rows) +- yKey: The numeric value for each cell + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/heatmap/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/heatmap/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `yAxisKey` | `string` | | - | Field key for the Y-axis categories. For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value). | +| `min` | `number` | | - | Min value for color scale (auto-detected if not provided) | +| `max` | `number` | | - | Max value for color scale (auto-detected if not provided) | +| `showLabels` | `boolean` | | `false` | Show value labels on cells | + + + +### Usage + +```tsx +import { HeatmapChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/LineChart.mdx b/docs/docs/api/appkit-ui/data/LineChart.mdx new file mode 100644 index 00000000..255f9fa8 --- /dev/null +++ b/docs/docs/api/appkit-ui/data/LineChart.mdx @@ -0,0 +1,83 @@ +# LineChart + +Line Chart component for time-series and trend visualization. + + +## Example + +```tsx +"use client"; + +import { LineChart } from "@databricks/appkit-ui/react"; + +export default function LineChartExample() { + return ( + + ); +} + +``` + + +## LineChart + +Line Chart component for time-series and trend visualization. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/line/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/line/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `orientation` | `enum` | | `"vertical"` | Chart orientation | +| `showSymbol` | `boolean` | | `false` | Show data point symbols | +| `smooth` | `boolean` | | `true` | Smooth line curves | + + + +### Usage + +```tsx +import { LineChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/PieChart.mdx b/docs/docs/api/appkit-ui/data/PieChart.mdx new file mode 100644 index 00000000..d064c0cb --- /dev/null +++ b/docs/docs/api/appkit-ui/data/PieChart.mdx @@ -0,0 +1,78 @@ +# PieChart + +Pie Chart component for proportional data visualization. + + +## Example + +```tsx +"use client"; + +import { PieChart } from "@databricks/appkit-ui/react"; + +export default function PieChartExample() { + return ( + + ); +} + +``` + + +## PieChart + +Pie Chart component for proportional data visualization. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/pie/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/pie/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `innerRadius` | `number` | | `0` | Inner radius for donut charts (0-100%) | +| `showLabels` | `boolean` | | `true` | Show labels on slices | +| `labelPosition` | `enum` | | `"outside"` | Label position | + + + +### Usage + +```tsx +import { PieChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/RadarChart.mdx b/docs/docs/api/appkit-ui/data/RadarChart.mdx new file mode 100644 index 00000000..ef289822 --- /dev/null +++ b/docs/docs/api/appkit-ui/data/RadarChart.mdx @@ -0,0 +1,80 @@ +# RadarChart + +Radar Chart component for multi-dimensional data comparison. + + +## Example + +```tsx +"use client"; + +import { RadarChart } from "@databricks/appkit-ui/react"; + +export default function RadarChartExample() { + return ( + + ); +} + +``` + + +## RadarChart + +Radar Chart component for multi-dimensional data comparison. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/radar/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/radar/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `showArea` | `boolean` | | `true` | Show area fill | + + + +### Usage + +```tsx +import { RadarChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/ScatterChart.mdx b/docs/docs/api/appkit-ui/data/ScatterChart.mdx new file mode 100644 index 00000000..c5d0d4fc --- /dev/null +++ b/docs/docs/api/appkit-ui/data/ScatterChart.mdx @@ -0,0 +1,82 @@ +# ScatterChart + +Scatter Chart component for correlation and distribution visualization. + + +## Example + +```tsx +"use client"; + +import { ScatterChart } from "@databricks/appkit-ui/react"; + +export default function ScatterChartExample() { + return ( + + ); +} + +``` + + +## ScatterChart + +Scatter Chart component for correlation and distribution visualization. + +**Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + +**Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + +Supports both query mode (queryKey + parameters) and data mode (static data). + + +**Source:** [`packages/appkit-ui/src/react/charts/scatter/index.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/charts/scatter/index.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | | - | Analytics query key registered with analytics plugin | +| `parameters` | `Record` | | - | Query parameters passed to the analytics endpoint | +| `format` | `enum` | | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size | +| `transformer` | `((data: T) => T)` | | - | Transform raw data before rendering | +| `asUser` | `boolean` | | `false` | Whether to execute the query as the current user | +| `data` | `ChartData` | | - | Arrow Table or JSON array | +| `title` | `string` | | - | Chart title | +| `showLegend` | `boolean` | | - | Show legend | +| `colorPalette` | `enum` | | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values | +| `colors` | `string[]` | | - | Custom colors for series (overrides colorPalette) | +| `height` | `number` | | `300` | Chart height in pixels | +| `className` | `string` | | - | Additional CSS classes | +| `xKey` | `string` | | - | X-axis field key. Auto-detected from schema if not provided. | +| `yKey` | `string \| string[]` | | - | Y-axis field key(s). Auto-detected from schema if not provided. | +| `ariaLabel` | `string` | | - | Accessibility label for screen readers | +| `testId` | `string` | | - | Test ID for automated testing | +| `options` | `Record` | | - | Additional ECharts options to merge | +| `symbolSize` | `number` | | `8` | Symbol size | + + + +### Usage + +```tsx +import { ScatterChart } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/TableErrorBoundary.mdx b/docs/docs/api/appkit-ui/data/TableErrorBoundary.mdx new file mode 100644 index 00000000..b8b8ce88 --- /dev/null +++ b/docs/docs/api/appkit-ui/data/TableErrorBoundary.mdx @@ -0,0 +1,25 @@ +# TableErrorBoundary + + +## TableErrorBoundary + + +**Source:** [`packages/appkit-ui/src/react/table/table-error-boundary.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/table/table-error-boundary.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `fallback` | `ReactNode` | ✓ | - | - | + + + +### Usage + +```tsx +import { TableErrorBoundary } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/data/TableWrapper.mdx b/docs/docs/api/appkit-ui/data/TableWrapper.mdx new file mode 100644 index 00000000..e7b6c38d --- /dev/null +++ b/docs/docs/api/appkit-ui/data/TableWrapper.mdx @@ -0,0 +1,45 @@ +# TableWrapper + +Wrapper component for tables with automatic data fetching and state management This component handles: - Data fetching via useAnalyticsQuery - Loading, error, and empty states with proper UI components - Data transformation (optional) - Dynamic column generation from data structure - TanStack Table instance creation with all features (sorting, filtering, pagination, etc.) + + +## TableWrapper + +Wrapper component for tables with automatic data fetching and state management +This component handles: +- Data fetching via useAnalyticsQuery +- Loading, error, and empty states with proper UI components +- Data transformation (optional) +- Dynamic column generation from data structure +- TanStack Table instance creation with all features (sorting, filtering, pagination, etc.) + + +**Source:** [`packages/appkit-ui/src/react/table/table-wrapper.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/table/table-wrapper.tsx) + + +### Props + +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| `queryKey` | `string` | ✓ | - | The query key to fetch the data | +| `parameters` | `Record` | ✓ | - | The parameters to pass to the query | +| `transformer` | `((data: TRaw[]) => TProcessed[])` | | - | Optional function to transform raw data before creating table | +| `asUser` | `boolean` | | - | Whether to execute the query as a user. Default is false. | +| `children` | `(data: Table) => ReactNode` | ✓ | - | Render function that receives the TanStack Table instance | +| `className` | `string` | | - | Optional CSS class name for the wrapper | +| `ariaLabel` | `string` | | - | Optional accessibility label for the wrapper | +| `testId` | `string` | | - | Optional test ID for the wrapper | +| `enableRowSelection` | `boolean` | | - | Enable row selection with checkboxes | +| `onRowSelectionChange` | `((rowSelection: RowSelectionState) => void)` | | - | Callback function to handle row selection changes | +| `pageSize` | `number` | | - | Number of rows to display per page | + + + +### Usage + +```tsx +import { TableWrapper } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/index.md b/docs/docs/api/appkit-ui/index.md index 408054c3..a4de200d 100644 --- a/docs/docs/api/appkit-ui/index.md +++ b/docs/docs/api/appkit-ui/index.md @@ -4,4 +4,11 @@ The library provides a set of UI primitives for building Databricks apps in [Rea The full list of components is available in the UI components section. Use the component list to inspect props, events, and examples for every exported primitive. -The components and their examples originate from the [Shadcn UI](https://github.com/shadcn-ui/ui) project. +## UI components +The UI components and their examples originate from the [Shadcn UI](https://github.com/shadcn-ui/ui) project. + +## Data components + +The data components are built on top of the [Apache ECharts](https://echarts.apache.org/) library. + +They support both query mode (queryKey + parameters) and data mode (static data). diff --git a/docs/docs/api/appkit-ui/styling.md b/docs/docs/api/appkit-ui/styling.md new file mode 100644 index 00000000..15681706 --- /dev/null +++ b/docs/docs/api/appkit-ui/styling.md @@ -0,0 +1,167 @@ +--- +sidebar_position: 4 +--- + +# Styling + +This guide covers how to style AppKit UI components using CSS variables and theming. + +## CSS import + +In your main CSS file, import the AppKit UI styles: + +```css +@import "@databricks/appkit-ui/styles.css"; +``` + +This provides a default theme for your app using CSS variables. + +## Customizing theme + +AppKit UI uses CSS variables for theming, supporting both light and dark modes automatically. + +### Full variable list + +You can customize the theme by overriding CSS variables. Here's the complete list: + +```css +@import "@databricks/appkit-ui/styles.css"; + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.141 0.005 285.823); + --card: oklch(1 0 0); + --card-foreground: oklch(0.141 0.005 285.823); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.21 0.006 285.885); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.985 0 0); + --success: oklch(0.603 0.135 166.892); + --success-foreground: oklch(1 0 0); + --warning: oklch(0.795 0.157 78.748); + --warning-foreground: oklch(0.199 0.027 238.732); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.705 0.015 286.067); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.21 0.006 285.885); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.705 0.015 286.067); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: oklch(0.141 0.005 285.823); + --foreground: oklch(0.985 0 0); + --card: oklch(0.21 0.006 285.885); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.21 0.006 285.885); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.92 0.004 286.32); + --primary-foreground: oklch(0.21 0.006 285.885); + --secondary: oklch(0.274 0.006 286.033); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --destructive-foreground: oklch(0.985 0 0); + --success: oklch(0.67 0.12 167); + --success-foreground: oklch(1 0 0); + --warning: oklch(0.83 0.165 85); + --warning-foreground: oklch(0.199 0.027 238.732); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.552 0.016 285.938); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.21 0.006 285.885); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.274 0.006 286.033); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.552 0.016 285.938); + } +} +``` + +:::warning Important +If you change any variable, you must change it for **both light and dark mode** to ensure consistent appearance across color schemes. +::: + +## Color system + +AppKit UI uses the OKLCH color space for better perceptual uniformity. The format is: + +``` +oklch(lightness chroma hue) +``` + +Where: +- **lightness**: 0-1 (0 = black, 1 = white) +- **chroma**: 0-0.4 (saturation) +- **hue**: 0-360 (color angle) + +## Semantic color variables + +### Core colors + +- `--background` / `--foreground` - Main background and text +- `--card` / `--card-foreground` - Card backgrounds +- `--popover` / `--popover-foreground` - Popover/dropdown backgrounds + +### Interactive colors + +- `--primary` / `--primary-foreground` - Primary actions +- `--secondary` / `--secondary-foreground` - Secondary actions +- `--muted` / `--muted-foreground` - Muted/disabled states +- `--accent` / `--accent-foreground` - Accent highlights + +### Status colors + +- `--destructive` / `--destructive-foreground` - Destructive actions +- `--success` / `--success-foreground` - Success states +- `--warning` / `--warning-foreground` - Warning states + +### UI elements + +- `--border` - Border colors +- `--input` - Input field borders +- `--ring` - Focus ring colors +- `--radius` - Border radius + +### Charts + +- `--chart-1` through `--chart-5` - Chart color palette + +### Sidebar + +- `--sidebar-*` - Sidebar-specific colors + +## See also + +- [API Reference](/docs/api/appkit-ui) - Complete UI components API documentation diff --git a/docs/docs/api/appkit-ui/components/Accordion.mdx b/docs/docs/api/appkit-ui/ui/Accordion.mdx similarity index 92% rename from docs/docs/api/appkit-ui/components/Accordion.mdx rename to docs/docs/api/appkit-ui/ui/Accordion.mdx index 9783ddbf..b275e22b 100644 --- a/docs/docs/api/appkit-ui/components/Accordion.mdx +++ b/docs/docs/api/appkit-ui/ui/Accordion.mdx @@ -1,9 +1,8 @@ ---- -title: Accordion ---- - # Accordion +Collapsible content sections organized in a vertical stack + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Accordion +Collapsible content sections organized in a vertical stack + **Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) @@ -44,6 +45,8 @@ import { Accordion } from '@databricks/appkit-ui'; ## AccordionContent +Content area that expands and collapses within an accordion item + **Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) @@ -68,6 +71,8 @@ import { AccordionContent } from '@databricks/appkit-ui'; ## AccordionItem +Individual collapsible section within an accordion + **Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) @@ -93,6 +98,8 @@ import { AccordionItem } from '@databricks/appkit-ui'; ## AccordionTrigger +Clickable button that triggers accordion content visibility + **Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) diff --git a/docs/docs/api/appkit-ui/components/Alert.mdx b/docs/docs/api/appkit-ui/ui/Alert.mdx similarity index 84% rename from docs/docs/api/appkit-ui/components/Alert.mdx rename to docs/docs/api/appkit-ui/ui/Alert.mdx index 4e5d5115..01772655 100644 --- a/docs/docs/api/appkit-ui/components/Alert.mdx +++ b/docs/docs/api/appkit-ui/ui/Alert.mdx @@ -1,9 +1,8 @@ ---- -title: Alert ---- - # Alert +Displays important information with optional icon and multiple variants + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Alert +Displays important information with optional icon and multiple variants + **Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) @@ -36,6 +37,8 @@ import { Alert } from '@databricks/appkit-ui'; ## AlertDescription +Descriptive text content for an alert component + **Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) @@ -57,6 +60,8 @@ import { AlertDescription } from '@databricks/appkit-ui'; ## AlertTitle +Title text for an alert component + **Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) diff --git a/docs/docs/api/appkit-ui/components/AlertDialog.mdx b/docs/docs/api/appkit-ui/ui/AlertDialog.mdx similarity index 90% rename from docs/docs/api/appkit-ui/components/AlertDialog.mdx rename to docs/docs/api/appkit-ui/ui/AlertDialog.mdx index 7da88b41..79f54905 100644 --- a/docs/docs/api/appkit-ui/components/AlertDialog.mdx +++ b/docs/docs/api/appkit-ui/ui/AlertDialog.mdx @@ -1,9 +1,8 @@ ---- -title: AlertDialog ---- - # AlertDialog +Modal dialog that interrupts the user with critical information requiring immediate action + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## AlertDialog +Modal dialog that interrupts the user with critical information requiring immediate action + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -38,6 +39,8 @@ import { AlertDialog } from '@databricks/appkit-ui'; ## AlertDialogAction +Primary action button that confirms the alert + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -61,6 +64,8 @@ import { AlertDialogAction } from '@databricks/appkit-ui'; ## AlertDialogCancel +Cancel button that dismisses the alert dialog + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -84,6 +89,8 @@ import { AlertDialogCancel } from '@databricks/appkit-ui'; ## AlertDialogContent +Main content container for the alert dialog + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -112,6 +119,8 @@ import { AlertDialogContent } from '@databricks/appkit-ui'; ## AlertDialogDescription +Descriptive text explaining the alert + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -135,6 +144,8 @@ import { AlertDialogDescription } from '@databricks/appkit-ui'; ## AlertDialogFooter +Footer section containing action buttons + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -156,6 +167,8 @@ import { AlertDialogFooter } from '@databricks/appkit-ui'; ## AlertDialogHeader +Header section containing title and description + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -177,6 +190,8 @@ import { AlertDialogHeader } from '@databricks/appkit-ui'; ## AlertDialogOverlay +Background overlay that dims content behind the alert dialog + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -201,6 +216,8 @@ import { AlertDialogOverlay } from '@databricks/appkit-ui'; ## AlertDialogPortal +Portal container for rendering alert dialog content outside the DOM hierarchy + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -225,6 +242,8 @@ import { AlertDialogPortal } from '@databricks/appkit-ui'; ## AlertDialogTitle +Title heading for the alert dialog + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) @@ -248,6 +267,8 @@ import { AlertDialogTitle } from '@databricks/appkit-ui'; ## AlertDialogTrigger +Button that triggers the alert dialog to open + **Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) diff --git a/docs/docs/api/appkit-ui/components/AspectRatio.mdx b/docs/docs/api/appkit-ui/ui/AspectRatio.mdx similarity index 81% rename from docs/docs/api/appkit-ui/components/AspectRatio.mdx rename to docs/docs/api/appkit-ui/ui/AspectRatio.mdx index 52c61026..f601d239 100644 --- a/docs/docs/api/appkit-ui/components/AspectRatio.mdx +++ b/docs/docs/api/appkit-ui/ui/AspectRatio.mdx @@ -1,9 +1,8 @@ ---- -title: AspectRatio ---- - # AspectRatio +Container that maintains a specific aspect ratio for its content + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## AspectRatio +Container that maintains a specific aspect ratio for its content + **Source:** [`packages/appkit-ui/src/react/ui/aspect-ratio.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/aspect-ratio.tsx) diff --git a/docs/docs/api/appkit-ui/components/Avatar.mdx b/docs/docs/api/appkit-ui/ui/Avatar.mdx similarity index 87% rename from docs/docs/api/appkit-ui/components/Avatar.mdx rename to docs/docs/api/appkit-ui/ui/Avatar.mdx index 1b16497f..656858b2 100644 --- a/docs/docs/api/appkit-ui/components/Avatar.mdx +++ b/docs/docs/api/appkit-ui/ui/Avatar.mdx @@ -1,9 +1,8 @@ ---- -title: Avatar ---- - # Avatar +Displays user profile picture or initials in a circular container + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Avatar +Displays user profile picture or initials in a circular container + **Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) @@ -36,6 +37,8 @@ import { Avatar } from '@databricks/appkit-ui'; ## AvatarFallback +Fallback content displayed when avatar image fails to load + **Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) @@ -60,6 +63,8 @@ import { AvatarFallback } from '@databricks/appkit-ui'; ## AvatarImage +Image element for the avatar + **Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) diff --git a/docs/docs/api/appkit-ui/components/Badge.mdx b/docs/docs/api/appkit-ui/ui/Badge.mdx similarity index 84% rename from docs/docs/api/appkit-ui/components/Badge.mdx rename to docs/docs/api/appkit-ui/ui/Badge.mdx index dcca1f43..ce2862fc 100644 --- a/docs/docs/api/appkit-ui/components/Badge.mdx +++ b/docs/docs/api/appkit-ui/ui/Badge.mdx @@ -1,9 +1,8 @@ ---- -title: Badge ---- - # Badge +Small label for displaying status, categories, or counts + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Badge +Small label for displaying status, categories, or counts + **Source:** [`packages/appkit-ui/src/react/ui/badge.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/badge.tsx) diff --git a/docs/docs/api/appkit-ui/components/Breadcrumb.mdx b/docs/docs/api/appkit-ui/ui/Breadcrumb.mdx similarity index 86% rename from docs/docs/api/appkit-ui/components/Breadcrumb.mdx rename to docs/docs/api/appkit-ui/ui/Breadcrumb.mdx index ad7f425d..c480562c 100644 --- a/docs/docs/api/appkit-ui/components/Breadcrumb.mdx +++ b/docs/docs/api/appkit-ui/ui/Breadcrumb.mdx @@ -1,9 +1,8 @@ ---- -title: Breadcrumb ---- - # Breadcrumb +Navigation component showing the current page's location in the site hierarchy + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Breadcrumb +Navigation component showing the current page's location in the site hierarchy + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -34,6 +35,8 @@ import { Breadcrumb } from '@databricks/appkit-ui'; ## BreadcrumbEllipsis +Ellipsis indicator for collapsed breadcrumb items + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -55,6 +58,8 @@ import { BreadcrumbEllipsis } from '@databricks/appkit-ui'; ## BreadcrumbItem +Individual item in the breadcrumb trail + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -76,6 +81,8 @@ import { BreadcrumbItem } from '@databricks/appkit-ui'; ## BreadcrumbLink +Clickable link within a breadcrumb item + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -99,6 +106,8 @@ import { BreadcrumbLink } from '@databricks/appkit-ui'; ## BreadcrumbList +Ordered list container for breadcrumb items + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -120,6 +129,8 @@ import { BreadcrumbList } from '@databricks/appkit-ui'; ## BreadcrumbPage +Current page indicator in the breadcrumb trail + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) @@ -141,6 +152,8 @@ import { BreadcrumbPage } from '@databricks/appkit-ui'; ## BreadcrumbSeparator +Visual separator between breadcrumb items + **Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) diff --git a/docs/docs/api/appkit-ui/components/Button.mdx b/docs/docs/api/appkit-ui/ui/Button.mdx similarity index 87% rename from docs/docs/api/appkit-ui/components/Button.mdx rename to docs/docs/api/appkit-ui/ui/Button.mdx index e2610f82..46835d34 100644 --- a/docs/docs/api/appkit-ui/components/Button.mdx +++ b/docs/docs/api/appkit-ui/ui/Button.mdx @@ -1,9 +1,8 @@ ---- -title: Button ---- - # Button +Clickable button with multiple variants and sizes + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Button +Clickable button with multiple variants and sizes + **Source:** [`packages/appkit-ui/src/react/ui/button.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button.tsx) diff --git a/docs/docs/api/appkit-ui/components/ButtonGroup.mdx b/docs/docs/api/appkit-ui/ui/ButtonGroup.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/ButtonGroup.mdx rename to docs/docs/api/appkit-ui/ui/ButtonGroup.mdx index 8d4568a8..5888e39e 100644 --- a/docs/docs/api/appkit-ui/components/ButtonGroup.mdx +++ b/docs/docs/api/appkit-ui/ui/ButtonGroup.mdx @@ -1,11 +1,12 @@ ---- -title: ButtonGroup ---- - # ButtonGroup +Container for grouping related buttons together with shared borders + + ## ButtonGroup +Container for grouping related buttons together with shared borders + **Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx) @@ -29,6 +30,8 @@ import { ButtonGroup } from '@databricks/appkit-ui'; ## ButtonGroupSeparator +Visual separator between buttons in a button group + **Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx) @@ -54,6 +57,8 @@ import { ButtonGroupSeparator } from '@databricks/appkit-ui'; ## ButtonGroupText +Text label or content within a button group + **Source:** [`packages/appkit-ui/src/react/ui/button-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button-group.tsx) diff --git a/docs/docs/api/appkit-ui/components/Calendar.mdx b/docs/docs/api/appkit-ui/ui/Calendar.mdx similarity index 83% rename from docs/docs/api/appkit-ui/components/Calendar.mdx rename to docs/docs/api/appkit-ui/ui/Calendar.mdx index f4d03dc9..83bf0ffe 100644 --- a/docs/docs/api/appkit-ui/components/Calendar.mdx +++ b/docs/docs/api/appkit-ui/ui/Calendar.mdx @@ -1,9 +1,8 @@ ---- -title: Calendar ---- - # Calendar +Date picker component for selecting single dates or date ranges + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Calendar +Date picker component for selecting single dates or date ranges + **Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx) @@ -24,14 +25,14 @@ import { DocExample } from "@site/src/components/DocExample"; | `mode` | `enum` | | - | Enable the selection of a single day, multiple days, or a range of days. @see https://daypicker.dev/docs/selection-modes | | `required` | `boolean` | | - | Whether the selection is required. @see https://daypicker.dev/docs/selection-modes | | `className` | `string` | | - | Class name to add to the root element. | -| `classNames` | `(Partial & Partial>)` | | - | Change the class names used by DayPicker. Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework. @see https://daypicker.dev/docs/styling | +| `classNames` | `(Partial & Partial>)` | | - | Change the class names used by DayPicker. | | `modifiersClassNames` | `ModifiersClassNames` | | - | Change the class name for the day matching the `modifiers`. @see https://daypicker.dev/guides/custom-modifiers | | `style` | `CSSProperties` | | - | Style to apply to the root element. | | `styles` | `(Partial & Partial>)` | | - | Change the inline styles of the HTML elements. @see https://daypicker.dev/docs/styling | | `modifiersStyles` | `ModifiersStyles` | | - | Change the class name for the day matching the modifiers. @see https://daypicker.dev/guides/custom-modifiers | | `id` | `string` | | - | A unique id to add to the root element. | -| `defaultMonth` | `Date` | | - | The initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month and onMonthChange. @defaultValue The current month @see https://daypicker.dev/docs/navigation | -| `month` | `Date` | | - | The month displayed in the calendar. As opposed to `defaultMonth`, use this prop with `onMonthChange` to change the month programmatically. @see https://daypicker.dev/docs/navigation | +| `defaultMonth` | `Date` | | - | The initial month to show in the calendar. | +| `month` | `Date` | | - | The month displayed in the calendar. | | `numberOfMonths` | `number` | | - | The number of displayed months. @defaultValue 1 @see https://daypicker.dev/docs/customization#multiplemonths | | `startMonth` | `Date` | | - | The earliest month to start the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates | | `fromDate` | `Date` | | - | @private @deprecated This prop has been removed. Use `hidden={{ before: date }}` instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates | @@ -45,20 +46,20 @@ import { DocExample } from "@site/src/components/DocExample"; | `reverseMonths` | `boolean` | | - | Render the months in reversed order (when numberOfMonths is set) to display the most recent month first. @see https://daypicker.dev/docs/customization#multiplemonths | | `hideNavigation` | `boolean` | | - | Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use disableNavigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#hidenavigation | | `disableNavigation` | `boolean` | | - | Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use hideNavigation. @see https://daypicker.dev/docs/navigation#disablenavigation | -| `captionLayout` | `enum` | | `label` | Show dropdowns to navigate between months or years. - `label`: Displays the month and year as a label. Default value. - `dropdown`: Displays dropdowns for both month and year navigation. - `dropdown-months`: Displays a dropdown only for the month navigation. - `dropdown-years`: Displays a dropdown only for the year navigation. **Note:** By default, showing the dropdown will set the startMonth to 100 years ago and endMonth to the end of the current year. You can override this behavior by explicitly setting `startMonth` and `endMonth`. @see https://daypicker.dev/docs/customization#caption-layouts | +| `captionLayout` | `enum` | | `label` | Show dropdowns to navigate between months or years. | | `reverseYears` | `boolean` | | - | Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`. @since 9.9.0 @see https://daypicker.dev/docs/customization#caption-layouts | -| `navLayout` | `enum` | | - | Adjust the positioning of the navigation buttons. - `around`: Displays the buttons on either side of the caption. - `after`: Displays the buttons after the caption. This ensures the tab order matches the visual order. If not set, the buttons default to being displayed after the caption, but the tab order may not align with the visual order. @since 9.7.0 @see https://daypicker.dev/docs/customization#navigation-layouts | +| `navLayout` | `enum` | | - | Adjust the positioning of the navigation buttons. | | `fixedWeeks` | `boolean` | | - | Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month. @see https://daypicker.dev/docs/customization#fixed-weeks | | `hideWeekdays` | `boolean` | | - | Hide the row displaying the weekday row header. @since 9.0.0 | -| `showOutsideDays` | `boolean` | | `true` | Show the outside days (days falling in the next or the previous month). **Note:** when a broadcastCalendar is set, this prop defaults to true. @see https://daypicker.dev/docs/customization#outside-days | +| `showOutsideDays` | `boolean` | | `true` | Show the outside days (days falling in the next or the previous month). | | `showWeekNumber` | `boolean` | | - | Show the week numbers column. Weeks are numbered according to the local week index. @see https://daypicker.dev/docs/customization#showweeknumber | | `animate` | `boolean` | | - | Animate navigating between months. @since 9.6.0 @see https://daypicker.dev/docs/navigation#animate | | `broadcastCalendar` | `boolean` | | - | Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and showOutsideDays will default to true. @since 9.4.0 @see https://daypicker.dev/docs/localization#broadcast-calendar @see https://en.wikipedia.org/wiki/Broadcast_calendar | | `ISOWeek` | `boolean` | | - | Use ISO week dates instead of the locale setting. Setting this prop will ignore `weekStartsOn` and `firstWeekContainsDate`. @see https://daypicker.dev/docs/localization#iso-week-dates @see https://en.wikipedia.org/wiki/ISO_week_date | -| `timeZone` | `string` | | - | The time zone (IANA or UTC offset) to use in the calendar (experimental). See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the possible values. @since 9.1.1 @see https://daypicker.dev/docs/time-zone | +| `timeZone` | `string` | | - | The time zone (IANA or UTC offset) to use in the calendar (experimental). | | `components` | `Partial` | | - | Change the components used for rendering the calendar elements. @see https://daypicker.dev/guides/custom-components | -| `footer` | `ReactNode` | | - | Add a footer to the calendar, acting as a live region. Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements. @see https://daypicker.dev/guides/accessibility#footer | -| `autoFocus` | `boolean` | | - | When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus DayPicker after a user action, for improved accessibility. @see https://daypicker.dev/guides/accessibility#autofocus | +| `footer` | `ReactNode` | | - | Add a footer to the calendar, acting as a live region. | +| `autoFocus` | `boolean` | | - | When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). | | `initialFocus` | `boolean` | | - | @private @deprecated This prop will be removed. Use autoFocus instead. | | `disabled` | `Matcher \| Matcher[]` | | - | Apply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set. @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled | | `hidden` | `Matcher \| Matcher[]` | | - | Apply the `hidden` modifier to the matching days. Will hide them from the calendar. @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier | @@ -74,7 +75,7 @@ import { DocExample } from "@site/src/components/DocExample"; | `title` | `string` | | - | Add a `title` attribute to the container element. | | `lang` | `string` | | - | Add the language tag to the container element. | | `locale` | `Partial` | | - | The locale object used to localize dates. Pass a locale from `react-day-picker/locale` to localize the calendar. @example import { es } from "react-day-picker/locale"; <DayPicker locale={es} /> @defaultValue enUS - The English locale default of `date-fns`. @see https://daypicker.dev/docs/localization @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales | -| `numerals` | `enum` | | - | The numeral system to use when formatting dates. - `latn`: Latin (Western Arabic) - `arab`: Arabic-Indic - `arabext`: Eastern Arabic-Indic (Persian) - `deva`: Devanagari - `beng`: Bengali - `guru`: Gurmukhi - `gujr`: Gujarati - `orya`: Oriya - `tamldec`: Tamil - `telu`: Telugu - `knda`: Kannada - `mlym`: Malayalam @defaultValue `latn` Latin (Western Arabic) @see https://daypicker.dev/docs/translation#numeral-systems | +| `numerals` | `enum` | | - | The numeral system to use when formatting dates. | | `weekStartsOn` | `enum` | | - | The index of the first day of the week (0 - Sunday). Overrides the locale's default. @see https://daypicker.dev/docs/localization#first-date-of-the-week | | `firstWeekContainsDate` | `enum` | | - | The day of January that is always in the first week of the year. @see https://daypicker.dev/docs/localization#first-week-contains-date | | `useAdditionalWeekYearTokens` | `boolean` | | - | Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens | @@ -118,6 +119,8 @@ import { Calendar } from '@databricks/appkit-ui'; ## CalendarDayButton +Individual day button within the calendar grid + **Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx) diff --git a/docs/docs/api/appkit-ui/components/Card.mdx b/docs/docs/api/appkit-ui/ui/Card.mdx similarity index 85% rename from docs/docs/api/appkit-ui/components/Card.mdx rename to docs/docs/api/appkit-ui/ui/Card.mdx index f7b4a719..c1c01e23 100644 --- a/docs/docs/api/appkit-ui/components/Card.mdx +++ b/docs/docs/api/appkit-ui/ui/Card.mdx @@ -1,9 +1,8 @@ ---- -title: Card ---- - # Card +Container for grouping related content with header, body, and footer sections + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Card +Container for grouping related content with header, body, and footer sections + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -34,6 +35,8 @@ import { Card } from '@databricks/appkit-ui'; ## CardAction +Action buttons or controls positioned in the card header + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -55,6 +58,8 @@ import { CardAction } from '@databricks/appkit-ui'; ## CardContent +Main content area of the card + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -76,6 +81,8 @@ import { CardContent } from '@databricks/appkit-ui'; ## CardDescription +Descriptive text providing context for the card + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -97,6 +104,8 @@ import { CardDescription } from '@databricks/appkit-ui'; ## CardFooter +Footer section for additional actions or information + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -118,6 +127,8 @@ import { CardFooter } from '@databricks/appkit-ui'; ## CardHeader +Header section containing title, description, and actions + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) @@ -139,6 +150,8 @@ import { CardHeader } from '@databricks/appkit-ui'; ## CardTitle +Title heading for the card + **Source:** [`packages/appkit-ui/src/react/ui/card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/card.tsx) diff --git a/docs/docs/api/appkit-ui/components/Carousel.mdx b/docs/docs/api/appkit-ui/ui/Carousel.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/Carousel.mdx rename to docs/docs/api/appkit-ui/ui/Carousel.mdx index 45527862..263c0031 100644 --- a/docs/docs/api/appkit-ui/components/Carousel.mdx +++ b/docs/docs/api/appkit-ui/ui/Carousel.mdx @@ -1,9 +1,8 @@ ---- -title: Carousel ---- - # Carousel +Slideshow component for cycling through content with navigation controls + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Carousel +Slideshow component for cycling through content with navigation controls + **Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx) @@ -39,6 +40,8 @@ import { Carousel } from '@databricks/appkit-ui'; ## CarouselContent +Container for carousel slides with horizontal or vertical scrolling + **Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx) @@ -60,6 +63,8 @@ import { CarouselContent } from '@databricks/appkit-ui'; ## CarouselItem +Individual slide within the carousel + **Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx) @@ -81,6 +86,8 @@ import { CarouselItem } from '@databricks/appkit-ui'; ## CarouselNext +Button to navigate to the next carousel slide + **Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx) @@ -106,6 +113,8 @@ import { CarouselNext } from '@databricks/appkit-ui'; ## CarouselPrevious +Button to navigate to the previous carousel slide + **Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx) diff --git a/docs/docs/api/appkit-ui/components/Chart.mdx b/docs/docs/api/appkit-ui/ui/ChartContainer.mdx similarity index 98% rename from docs/docs/api/appkit-ui/components/Chart.mdx rename to docs/docs/api/appkit-ui/ui/ChartContainer.mdx index 67cfa66e..4e905927 100644 --- a/docs/docs/api/appkit-ui/components/Chart.mdx +++ b/docs/docs/api/appkit-ui/ui/ChartContainer.mdx @@ -1,11 +1,12 @@ ---- -title: Chart ---- +# ChartContainer + +Container for rendering data visualizations using Recharts -# Chart ## ChartContainer +Container for rendering data visualizations using Recharts + **Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) @@ -29,7 +30,8 @@ import { ChartContainer } from '@databricks/appkit-ui'; ## ChartLegend -A wrapper component for Recharts Legend with proper typing and documentation support. It is needed to ensure the correct name is displayed in the docs. +A wrapper component for Recharts Legend with proper typing and documentation support. +It is needed to ensure the correct name is displayed in the docs. **Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) @@ -279,7 +281,8 @@ import { ChartStyle } from '@databricks/appkit-ui'; ## ChartTooltip -A wrapper component for Recharts Tooltip with proper typing and documentation support. It is needed to ensure the correct name is displayed in the docs. +A wrapper component for Recharts Tooltip with proper typing and documentation support. +It is needed to ensure the correct name is displayed in the docs. **Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) diff --git a/docs/docs/api/appkit-ui/components/Checkbox.mdx b/docs/docs/api/appkit-ui/ui/Checkbox.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/Checkbox.mdx rename to docs/docs/api/appkit-ui/ui/Checkbox.mdx index 7edcdbdc..63af8ac1 100644 --- a/docs/docs/api/appkit-ui/components/Checkbox.mdx +++ b/docs/docs/api/appkit-ui/ui/Checkbox.mdx @@ -1,9 +1,8 @@ ---- -title: Checkbox ---- - # Checkbox +Checkbox input for selecting multiple options + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Checkbox +Checkbox input for selecting multiple options + **Source:** [`packages/appkit-ui/src/react/ui/checkbox.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/checkbox.tsx) diff --git a/docs/docs/api/appkit-ui/components/Collapsible.mdx b/docs/docs/api/appkit-ui/ui/Collapsible.mdx similarity index 89% rename from docs/docs/api/appkit-ui/components/Collapsible.mdx rename to docs/docs/api/appkit-ui/ui/Collapsible.mdx index 78391f5e..4af5130d 100644 --- a/docs/docs/api/appkit-ui/components/Collapsible.mdx +++ b/docs/docs/api/appkit-ui/ui/Collapsible.mdx @@ -1,9 +1,8 @@ ---- -title: Collapsible ---- - # Collapsible +Interactive component that expands and collapses content + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Collapsible +Interactive component that expands and collapses content + **Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx) @@ -40,6 +41,8 @@ import { Collapsible } from '@databricks/appkit-ui'; ## CollapsibleContent +Content area that can be expanded or collapsed + **Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx) @@ -64,6 +67,8 @@ import { CollapsibleContent } from '@databricks/appkit-ui'; ## CollapsibleTrigger +Button that toggles the collapsible content visibility + **Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx) diff --git a/docs/docs/api/appkit-ui/components/Command.mdx b/docs/docs/api/appkit-ui/ui/Command.mdx similarity index 93% rename from docs/docs/api/appkit-ui/components/Command.mdx rename to docs/docs/api/appkit-ui/ui/Command.mdx index 6cca0780..b882d5cf 100644 --- a/docs/docs/api/appkit-ui/components/Command.mdx +++ b/docs/docs/api/appkit-ui/ui/Command.mdx @@ -1,9 +1,8 @@ ---- -title: Command ---- - # Command +Command palette for keyboard-driven navigation and actions + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Command +Command palette for keyboard-driven navigation and actions + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -44,6 +45,8 @@ import { Command } from '@databricks/appkit-ui'; ## CommandDialog +Dialog wrapper for the command palette + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -74,6 +77,8 @@ import { CommandDialog } from '@databricks/appkit-ui'; ## CommandEmpty +Empty state displayed when no commands match the search + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -97,6 +102,8 @@ import { CommandEmpty } from '@databricks/appkit-ui'; ## CommandGroup +Group of related command items with an optional heading + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -123,6 +130,8 @@ import { CommandGroup } from '@databricks/appkit-ui'; ## CommandInput +Search input field for filtering command items + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -148,6 +157,8 @@ import { CommandInput } from '@databricks/appkit-ui'; ## CommandItem +Individual selectable command item + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -176,6 +187,8 @@ import { CommandItem } from '@databricks/appkit-ui'; ## CommandList +Scrollable list container for command items + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -200,6 +213,8 @@ import { CommandList } from '@databricks/appkit-ui'; ## CommandSeparator +Visual separator between command groups + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) @@ -224,6 +239,8 @@ import { CommandSeparator } from '@databricks/appkit-ui'; ## CommandShortcut +Keyboard shortcut indicator displayed next to command items + **Source:** [`packages/appkit-ui/src/react/ui/command.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/command.tsx) diff --git a/docs/docs/api/appkit-ui/components/ContextMenu.mdx b/docs/docs/api/appkit-ui/ui/ContextMenu.mdx similarity index 99% rename from docs/docs/api/appkit-ui/components/ContextMenu.mdx rename to docs/docs/api/appkit-ui/ui/ContextMenu.mdx index 453d0c1e..874e02d3 100644 --- a/docs/docs/api/appkit-ui/components/ContextMenu.mdx +++ b/docs/docs/api/appkit-ui/ui/ContextMenu.mdx @@ -1,9 +1,8 @@ ---- -title: ContextMenu ---- - # ContextMenu +Menu triggered by right-clicking an element + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## ContextMenu +Menu triggered by right-clicking an element + **Source:** [`packages/appkit-ui/src/react/ui/context-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/context-menu.tsx) diff --git a/docs/docs/api/appkit-ui/components/Dialog.mdx b/docs/docs/api/appkit-ui/ui/Dialog.mdx similarity index 94% rename from docs/docs/api/appkit-ui/components/Dialog.mdx rename to docs/docs/api/appkit-ui/ui/Dialog.mdx index 3d7438ff..7e226b20 100644 --- a/docs/docs/api/appkit-ui/components/Dialog.mdx +++ b/docs/docs/api/appkit-ui/ui/Dialog.mdx @@ -1,9 +1,8 @@ ---- -title: Dialog ---- - # Dialog +Modal dialog that overlays the page content + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Dialog +Modal dialog that overlays the page content + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -39,6 +40,8 @@ import { Dialog } from '@databricks/appkit-ui'; ## DialogClose +Button that closes the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -62,6 +65,8 @@ import { DialogClose } from '@databricks/appkit-ui'; ## DialogContent +Main content area of the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -93,6 +98,8 @@ import { DialogContent } from '@databricks/appkit-ui'; ## DialogDescription +Description text for the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -116,6 +123,8 @@ import { DialogDescription } from '@databricks/appkit-ui'; ## DialogFooter +Footer section of the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -137,6 +146,8 @@ import { DialogFooter } from '@databricks/appkit-ui'; ## DialogHeader +Header section of the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -158,6 +169,8 @@ import { DialogHeader } from '@databricks/appkit-ui'; ## DialogOverlay +Dimmed overlay behind the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -182,6 +195,8 @@ import { DialogOverlay } from '@databricks/appkit-ui'; ## DialogPortal +Portal container for dialog content + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -206,6 +221,8 @@ import { DialogPortal } from '@databricks/appkit-ui'; ## DialogTitle +Title text for the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) @@ -229,6 +246,8 @@ import { DialogTitle } from '@databricks/appkit-ui'; ## DialogTrigger +Button that opens the dialog + **Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx) diff --git a/docs/docs/api/appkit-ui/components/Drawer.mdx b/docs/docs/api/appkit-ui/ui/Drawer.mdx similarity index 96% rename from docs/docs/api/appkit-ui/components/Drawer.mdx rename to docs/docs/api/appkit-ui/ui/Drawer.mdx index 00de8243..f59af22c 100644 --- a/docs/docs/api/appkit-ui/components/Drawer.mdx +++ b/docs/docs/api/appkit-ui/ui/Drawer.mdx @@ -1,9 +1,8 @@ ---- -title: Drawer ---- - # Drawer +Draggable panel that slides in from screen edges + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Drawer +Draggable panel that slides in from screen edges + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -63,6 +64,8 @@ import { Drawer } from '@databricks/appkit-ui'; ## DrawerClose +Button that closes the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -86,6 +89,8 @@ import { DrawerClose } from '@databricks/appkit-ui'; ## DrawerContent +Main content area of the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -116,6 +121,8 @@ import { DrawerContent } from '@databricks/appkit-ui'; ## DrawerDescription +Description text for the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -139,6 +146,8 @@ import { DrawerDescription } from '@databricks/appkit-ui'; ## DrawerFooter +Footer section of the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -160,6 +169,8 @@ import { DrawerFooter } from '@databricks/appkit-ui'; ## DrawerHeader +Header section of the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -181,6 +192,8 @@ import { DrawerHeader } from '@databricks/appkit-ui'; ## DrawerOverlay +Dimmed overlay behind the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -205,6 +218,8 @@ import { DrawerOverlay } from '@databricks/appkit-ui'; ## DrawerPortal +Portal container for drawer content + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -229,6 +244,8 @@ import { DrawerPortal } from '@databricks/appkit-ui'; ## DrawerTitle +Title text for the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) @@ -252,6 +269,8 @@ import { DrawerTitle } from '@databricks/appkit-ui'; ## DrawerTrigger +Button that opens the drawer + **Source:** [`packages/appkit-ui/src/react/ui/drawer.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/drawer.tsx) diff --git a/docs/docs/api/appkit-ui/components/DropdownMenu.mdx b/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx similarity index 98% rename from docs/docs/api/appkit-ui/components/DropdownMenu.mdx rename to docs/docs/api/appkit-ui/ui/DropdownMenu.mdx index ff27f6b2..f03cb710 100644 --- a/docs/docs/api/appkit-ui/components/DropdownMenu.mdx +++ b/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx @@ -1,9 +1,8 @@ ---- -title: DropdownMenu ---- - # DropdownMenu +Menu that displays when triggered by a button or element + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## DropdownMenu +Menu that displays when triggered by a button or element + **Source:** [`packages/appkit-ui/src/react/ui/dropdown-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dropdown-menu.tsx) diff --git a/docs/docs/api/appkit-ui/components/Empty.mdx b/docs/docs/api/appkit-ui/ui/Empty.mdx similarity index 95% rename from docs/docs/api/appkit-ui/components/Empty.mdx rename to docs/docs/api/appkit-ui/ui/Empty.mdx index 3ae447c5..565d2135 100644 --- a/docs/docs/api/appkit-ui/components/Empty.mdx +++ b/docs/docs/api/appkit-ui/ui/Empty.mdx @@ -1,11 +1,12 @@ ---- -title: Empty ---- - # Empty +Empty state component for displaying no-data scenarios + + ## Empty +Empty state component for displaying no-data scenarios + **Source:** [`packages/appkit-ui/src/react/ui/empty.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/empty.tsx) diff --git a/docs/docs/api/appkit-ui/components/Field.mdx b/docs/docs/api/appkit-ui/ui/Field.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/Field.mdx rename to docs/docs/api/appkit-ui/ui/Field.mdx index a072b8ba..0e7992cc 100644 --- a/docs/docs/api/appkit-ui/components/Field.mdx +++ b/docs/docs/api/appkit-ui/ui/Field.mdx @@ -1,11 +1,12 @@ ---- -title: Field ---- - # Field +Form field wrapper with label and input positioning + + ## Field +Form field wrapper with label and input positioning + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -29,6 +30,8 @@ import { Field } from '@databricks/appkit-ui'; ## FieldContent +Container for field label, description, and error messages + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -50,6 +53,8 @@ import { FieldContent } from '@databricks/appkit-ui'; ## FieldDescription +Helper text providing additional context for a field + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -71,6 +76,8 @@ import { FieldDescription } from '@databricks/appkit-ui'; ## FieldError +Error message display for invalid field values + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -94,6 +101,8 @@ import { FieldError } from '@databricks/appkit-ui'; ## FieldGroup +Container for organizing multiple fields + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -115,6 +124,8 @@ import { FieldGroup } from '@databricks/appkit-ui'; ## FieldLabel +Label for a form field + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -138,6 +149,8 @@ import { FieldLabel } from '@databricks/appkit-ui'; ## FieldLegend +Title or caption for a fieldset + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -161,6 +174,8 @@ import { FieldLegend } from '@databricks/appkit-ui'; ## FieldSeparator +Visual separator between fields with optional label + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -182,6 +197,8 @@ import { FieldSeparator } from '@databricks/appkit-ui'; ## FieldSet +Container for grouping related form fields + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) @@ -203,6 +220,8 @@ import { FieldSet } from '@databricks/appkit-ui'; ## FieldTitle +Title text for a field + **Source:** [`packages/appkit-ui/src/react/ui/field.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/field.tsx) diff --git a/docs/docs/api/appkit-ui/components/Form.mdx b/docs/docs/api/appkit-ui/ui/FormControl.mdx similarity index 87% rename from docs/docs/api/appkit-ui/components/Form.mdx rename to docs/docs/api/appkit-ui/ui/FormControl.mdx index 8c1654c4..3176b924 100644 --- a/docs/docs/api/appkit-ui/components/Form.mdx +++ b/docs/docs/api/appkit-ui/ui/FormControl.mdx @@ -1,11 +1,12 @@ ---- -title: Form ---- +# FormControl + +Wrapper for form control elements with accessibility attributes -# Form ## FormControl +Wrapper for form control elements with accessibility attributes + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) @@ -27,6 +28,8 @@ import { FormControl } from '@databricks/appkit-ui'; ## FormDescription +Helper text providing guidance for a form field + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) @@ -48,6 +51,8 @@ import { FormDescription } from '@databricks/appkit-ui'; ## FormField +Controlled field component for react-hook-form integration + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) @@ -78,6 +83,8 @@ import { FormField } from '@databricks/appkit-ui'; ## FormItem +Container for a single form field with label and messages + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) @@ -99,6 +106,8 @@ import { FormItem } from '@databricks/appkit-ui'; ## FormLabel +Label for a form field with error state styling + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) @@ -122,6 +131,8 @@ import { FormLabel } from '@databricks/appkit-ui'; ## FormMessage +Validation error message for a form field + **Source:** [`packages/appkit-ui/src/react/ui/form.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/form.tsx) diff --git a/docs/docs/api/appkit-ui/components/HoverCard.mdx b/docs/docs/api/appkit-ui/ui/HoverCard.mdx similarity index 96% rename from docs/docs/api/appkit-ui/components/HoverCard.mdx rename to docs/docs/api/appkit-ui/ui/HoverCard.mdx index eacd69d2..3802f5d1 100644 --- a/docs/docs/api/appkit-ui/components/HoverCard.mdx +++ b/docs/docs/api/appkit-ui/ui/HoverCard.mdx @@ -1,9 +1,8 @@ ---- -title: HoverCard ---- - # HoverCard +Content card that appears when hovering over an element + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## HoverCard +Content card that appears when hovering over an element + **Source:** [`packages/appkit-ui/src/react/ui/hover-card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/hover-card.tsx) diff --git a/docs/docs/api/appkit-ui/components/Input.mdx b/docs/docs/api/appkit-ui/ui/Input.mdx similarity index 83% rename from docs/docs/api/appkit-ui/components/Input.mdx rename to docs/docs/api/appkit-ui/ui/Input.mdx index ec8daa2b..41c3a018 100644 --- a/docs/docs/api/appkit-ui/components/Input.mdx +++ b/docs/docs/api/appkit-ui/ui/Input.mdx @@ -1,9 +1,8 @@ ---- -title: Input ---- - # Input +Text input field for single-line user input + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Input +Text input field for single-line user input + **Source:** [`packages/appkit-ui/src/react/ui/input.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input.tsx) diff --git a/docs/docs/api/appkit-ui/components/InputGroup.mdx b/docs/docs/api/appkit-ui/ui/InputGroup.mdx similarity index 87% rename from docs/docs/api/appkit-ui/components/InputGroup.mdx rename to docs/docs/api/appkit-ui/ui/InputGroup.mdx index 0a60d02d..c218f2ca 100644 --- a/docs/docs/api/appkit-ui/components/InputGroup.mdx +++ b/docs/docs/api/appkit-ui/ui/InputGroup.mdx @@ -1,11 +1,12 @@ ---- -title: InputGroup ---- - # InputGroup +Container for combining input fields with addons and buttons + + ## InputGroup +Container for combining input fields with addons and buttons + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) @@ -27,6 +28,8 @@ import { InputGroup } from '@databricks/appkit-ui'; ## InputGroupAddon +Decorative content positioned at the start or end of an input group + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) @@ -50,6 +53,8 @@ import { InputGroupAddon } from '@databricks/appkit-ui'; ## InputGroupButton +Button integrated within an input group + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) @@ -75,6 +80,8 @@ import { InputGroupButton } from '@databricks/appkit-ui'; ## InputGroupInput +Text input styled for use within an input group + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) @@ -96,6 +103,8 @@ import { InputGroupInput } from '@databricks/appkit-ui'; ## InputGroupText +Static text or icon displayed within an input group + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) @@ -117,6 +126,8 @@ import { InputGroupText } from '@databricks/appkit-ui'; ## InputGroupTextarea +Textarea styled for use within an input group + **Source:** [`packages/appkit-ui/src/react/ui/input-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-group.tsx) diff --git a/docs/docs/api/appkit-ui/components/InputOtp.mdx b/docs/docs/api/appkit-ui/ui/InputOTP.mdx similarity index 89% rename from docs/docs/api/appkit-ui/components/InputOtp.mdx rename to docs/docs/api/appkit-ui/ui/InputOTP.mdx index 9808aa81..da9113a8 100644 --- a/docs/docs/api/appkit-ui/components/InputOtp.mdx +++ b/docs/docs/api/appkit-ui/ui/InputOTP.mdx @@ -1,8 +1,7 @@ ---- -title: InputOtp ---- +# InputOTP + +One-time password input with individual character slots -# InputOtp ## Example @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## InputOTP +One-time password input with individual character slots + **Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx) @@ -45,6 +46,8 @@ import { InputOTP } from '@databricks/appkit-ui'; ## InputOTPGroup +Container grouping OTP input slots together + **Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx) @@ -66,6 +69,8 @@ import { InputOTPGroup } from '@databricks/appkit-ui'; ## InputOTPSeparator +Visual separator between OTP slot groups + **Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx) @@ -87,6 +92,8 @@ import { InputOTPSeparator } from '@databricks/appkit-ui'; ## InputOTPSlot +Individual character slot within the OTP input + **Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx) diff --git a/docs/docs/api/appkit-ui/components/Item.mdx b/docs/docs/api/appkit-ui/ui/Item.mdx similarity index 96% rename from docs/docs/api/appkit-ui/components/Item.mdx rename to docs/docs/api/appkit-ui/ui/Item.mdx index 585ed14f..87524a38 100644 --- a/docs/docs/api/appkit-ui/components/Item.mdx +++ b/docs/docs/api/appkit-ui/ui/Item.mdx @@ -1,11 +1,12 @@ ---- -title: Item ---- - # Item +Flexible container for list items with media, content, and actions + + ## Item +Flexible container for list items with media, content, and actions + **Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx) diff --git a/docs/docs/api/appkit-ui/components/Kbd.mdx b/docs/docs/api/appkit-ui/ui/Kbd.mdx similarity index 89% rename from docs/docs/api/appkit-ui/components/Kbd.mdx rename to docs/docs/api/appkit-ui/ui/Kbd.mdx index ffbc6960..29886384 100644 --- a/docs/docs/api/appkit-ui/components/Kbd.mdx +++ b/docs/docs/api/appkit-ui/ui/Kbd.mdx @@ -1,11 +1,12 @@ ---- -title: Kbd ---- - # Kbd +Visual representation of keyboard keys + + ## Kbd +Visual representation of keyboard keys + **Source:** [`packages/appkit-ui/src/react/ui/kbd.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/kbd.tsx) diff --git a/docs/docs/api/appkit-ui/components/Label.mdx b/docs/docs/api/appkit-ui/ui/Label.mdx similarity index 86% rename from docs/docs/api/appkit-ui/components/Label.mdx rename to docs/docs/api/appkit-ui/ui/Label.mdx index 42676ddc..547a5a16 100644 --- a/docs/docs/api/appkit-ui/components/Label.mdx +++ b/docs/docs/api/appkit-ui/ui/Label.mdx @@ -1,9 +1,8 @@ ---- -title: Label ---- - # Label +Text label associated with form controls + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Label +Text label associated with form controls + **Source:** [`packages/appkit-ui/src/react/ui/label.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/label.tsx) diff --git a/docs/docs/api/appkit-ui/components/Menubar.mdx b/docs/docs/api/appkit-ui/ui/Menubar.mdx similarity index 99% rename from docs/docs/api/appkit-ui/components/Menubar.mdx rename to docs/docs/api/appkit-ui/ui/Menubar.mdx index 3ae25d79..30983aa3 100644 --- a/docs/docs/api/appkit-ui/components/Menubar.mdx +++ b/docs/docs/api/appkit-ui/ui/Menubar.mdx @@ -1,9 +1,8 @@ ---- -title: Menubar ---- - # Menubar +Horizontal menu bar with dropdown menus + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Menubar +Horizontal menu bar with dropdown menus + **Source:** [`packages/appkit-ui/src/react/ui/menubar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/menubar.tsx) diff --git a/docs/docs/api/appkit-ui/components/NavigationMenu.mdx b/docs/docs/api/appkit-ui/ui/NavigationMenu.mdx similarity index 93% rename from docs/docs/api/appkit-ui/components/NavigationMenu.mdx rename to docs/docs/api/appkit-ui/ui/NavigationMenu.mdx index fcd596fc..997f36e3 100644 --- a/docs/docs/api/appkit-ui/components/NavigationMenu.mdx +++ b/docs/docs/api/appkit-ui/ui/NavigationMenu.mdx @@ -1,9 +1,8 @@ ---- -title: NavigationMenu ---- - # NavigationMenu +Horizontal navigation menu with dropdown submenus + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## NavigationMenu +Horizontal navigation menu with dropdown submenus + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -44,6 +45,8 @@ import { NavigationMenu } from '@databricks/appkit-ui'; ## NavigationMenuContent +Dropdown content area for navigation submenu + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -72,6 +75,8 @@ import { NavigationMenuContent } from '@databricks/appkit-ui'; ## NavigationMenuIndicator +Visual indicator for active navigation menu item + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -96,6 +101,8 @@ import { NavigationMenuIndicator } from '@databricks/appkit-ui'; ## NavigationMenuItem +Individual navigation menu item + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -120,6 +127,8 @@ import { NavigationMenuItem } from '@databricks/appkit-ui'; ## NavigationMenuLink +Clickable link within navigation menu + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -145,6 +154,8 @@ import { NavigationMenuLink } from '@databricks/appkit-ui'; ## NavigationMenuList +Container list for navigation menu items + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -168,6 +179,8 @@ import { NavigationMenuList } from '@databricks/appkit-ui'; ## NavigationMenuTrigger +Button that opens a navigation submenu + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) @@ -191,6 +204,8 @@ import { NavigationMenuTrigger } from '@databricks/appkit-ui'; ## NavigationMenuViewport +Viewport container for navigation menu content + **Source:** [`packages/appkit-ui/src/react/ui/navigation-menu.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/navigation-menu.tsx) diff --git a/docs/docs/api/appkit-ui/components/Pagination.mdx b/docs/docs/api/appkit-ui/ui/Pagination.mdx similarity index 90% rename from docs/docs/api/appkit-ui/components/Pagination.mdx rename to docs/docs/api/appkit-ui/ui/Pagination.mdx index 1fb0e0af..1e930d77 100644 --- a/docs/docs/api/appkit-ui/components/Pagination.mdx +++ b/docs/docs/api/appkit-ui/ui/Pagination.mdx @@ -1,9 +1,8 @@ ---- -title: Pagination ---- - # Pagination +Navigation component for paginated content + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Pagination +Navigation component for paginated content + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -34,6 +35,8 @@ import { Pagination } from '@databricks/appkit-ui'; ## PaginationContent +Container for pagination items + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -55,6 +58,8 @@ import { PaginationContent } from '@databricks/appkit-ui'; ## PaginationEllipsis +Ellipsis indicator for skipped page numbers + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -76,6 +81,8 @@ import { PaginationEllipsis } from '@databricks/appkit-ui'; ## PaginationItem +Individual pagination item wrapper + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -97,6 +104,8 @@ import { PaginationItem } from '@databricks/appkit-ui'; ## PaginationLink +Clickable link for navigating to a specific page + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -121,6 +130,8 @@ import { PaginationLink } from '@databricks/appkit-ui'; ## PaginationNext +Button for navigating to the next page + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) @@ -145,6 +156,8 @@ import { PaginationNext } from '@databricks/appkit-ui'; ## PaginationPrevious +Button for navigating to the previous page + **Source:** [`packages/appkit-ui/src/react/ui/pagination.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/pagination.tsx) diff --git a/docs/docs/api/appkit-ui/components/Popover.mdx b/docs/docs/api/appkit-ui/ui/Popover.mdx similarity index 97% rename from docs/docs/api/appkit-ui/components/Popover.mdx rename to docs/docs/api/appkit-ui/ui/Popover.mdx index a90b8943..1aee1987 100644 --- a/docs/docs/api/appkit-ui/components/Popover.mdx +++ b/docs/docs/api/appkit-ui/ui/Popover.mdx @@ -1,9 +1,8 @@ ---- -title: Popover ---- - # Popover +Floating content panel anchored to a trigger element + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Popover +Floating content panel anchored to a trigger element + **Source:** [`packages/appkit-ui/src/react/ui/popover.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/popover.tsx) diff --git a/docs/docs/api/appkit-ui/components/Progress.mdx b/docs/docs/api/appkit-ui/ui/Progress.mdx similarity index 86% rename from docs/docs/api/appkit-ui/components/Progress.mdx rename to docs/docs/api/appkit-ui/ui/Progress.mdx index b0398be1..eaee62c0 100644 --- a/docs/docs/api/appkit-ui/components/Progress.mdx +++ b/docs/docs/api/appkit-ui/ui/Progress.mdx @@ -1,9 +1,8 @@ ---- -title: Progress ---- - # Progress +Visual indicator showing task completion percentage + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Progress +Visual indicator showing task completion percentage + **Source:** [`packages/appkit-ui/src/react/ui/progress.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/progress.tsx) diff --git a/docs/docs/api/appkit-ui/components/RadioGroup.mdx b/docs/docs/api/appkit-ui/ui/RadioGroup.mdx similarity index 93% rename from docs/docs/api/appkit-ui/components/RadioGroup.mdx rename to docs/docs/api/appkit-ui/ui/RadioGroup.mdx index 84dceb22..8abb465d 100644 --- a/docs/docs/api/appkit-ui/components/RadioGroup.mdx +++ b/docs/docs/api/appkit-ui/ui/RadioGroup.mdx @@ -1,9 +1,8 @@ ---- -title: RadioGroup ---- - # RadioGroup +Group of radio buttons for selecting a single option + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## RadioGroup +Group of radio buttons for selecting a single option + **Source:** [`packages/appkit-ui/src/react/ui/radio-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/radio-group.tsx) diff --git a/docs/docs/api/appkit-ui/components/Resizable.mdx b/docs/docs/api/appkit-ui/ui/ResizableHandle.mdx similarity index 93% rename from docs/docs/api/appkit-ui/components/Resizable.mdx rename to docs/docs/api/appkit-ui/ui/ResizableHandle.mdx index acd595c1..c60d8739 100644 --- a/docs/docs/api/appkit-ui/components/Resizable.mdx +++ b/docs/docs/api/appkit-ui/ui/ResizableHandle.mdx @@ -1,8 +1,7 @@ ---- -title: Resizable ---- +# ResizableHandle + +Draggable handle for resizing panels -# Resizable ## Example @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## ResizableHandle +Draggable handle for resizing panels + **Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx) @@ -46,6 +47,8 @@ import { ResizableHandle } from '@databricks/appkit-ui'; ## ResizablePanel +Individual resizable panel within a panel group + **Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx) @@ -79,6 +82,8 @@ import { ResizablePanel } from '@databricks/appkit-ui'; ## ResizablePanelGroup +Container for resizable panel layout + **Source:** [`packages/appkit-ui/src/react/ui/resizable.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/resizable.tsx) diff --git a/docs/docs/api/appkit-ui/components/ScrollArea.mdx b/docs/docs/api/appkit-ui/ui/ScrollArea.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/ScrollArea.mdx rename to docs/docs/api/appkit-ui/ui/ScrollArea.mdx index c00a421d..14fbcee5 100644 --- a/docs/docs/api/appkit-ui/components/ScrollArea.mdx +++ b/docs/docs/api/appkit-ui/ui/ScrollArea.mdx @@ -1,9 +1,8 @@ ---- -title: ScrollArea ---- - # ScrollArea +Container with custom scrollbars for overflow content + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## ScrollArea +Container with custom scrollbars for overflow content + **Source:** [`packages/appkit-ui/src/react/ui/scroll-area.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/scroll-area.tsx) @@ -39,6 +40,8 @@ import { ScrollArea } from '@databricks/appkit-ui'; ## ScrollBar +Scrollbar component for the scroll area + **Source:** [`packages/appkit-ui/src/react/ui/scroll-area.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/scroll-area.tsx) diff --git a/docs/docs/api/appkit-ui/components/Select.mdx b/docs/docs/api/appkit-ui/ui/Select.mdx similarity index 97% rename from docs/docs/api/appkit-ui/components/Select.mdx rename to docs/docs/api/appkit-ui/ui/Select.mdx index 4bb187c0..45b43a85 100644 --- a/docs/docs/api/appkit-ui/components/Select.mdx +++ b/docs/docs/api/appkit-ui/ui/Select.mdx @@ -1,9 +1,8 @@ ---- -title: Select ---- - # Select +Dropdown control for selecting a value from a list + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Select +Dropdown control for selecting a value from a list + **Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx) @@ -108,6 +109,8 @@ import { SelectGroup } from '@databricks/appkit-ui'; ## SelectItem +Select item component for individual options in a dropdown. + **Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx) diff --git a/docs/docs/api/appkit-ui/components/Separator.mdx b/docs/docs/api/appkit-ui/ui/Separator.mdx similarity index 90% rename from docs/docs/api/appkit-ui/components/Separator.mdx rename to docs/docs/api/appkit-ui/ui/Separator.mdx index 24a2f196..fc949187 100644 --- a/docs/docs/api/appkit-ui/components/Separator.mdx +++ b/docs/docs/api/appkit-ui/ui/Separator.mdx @@ -1,9 +1,8 @@ ---- -title: Separator ---- - # Separator +Visual divider line between content sections + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Separator +Visual divider line between content sections + **Source:** [`packages/appkit-ui/src/react/ui/separator.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/separator.tsx) diff --git a/docs/docs/api/appkit-ui/components/Sheet.mdx b/docs/docs/api/appkit-ui/ui/Sheet.mdx similarity index 93% rename from docs/docs/api/appkit-ui/components/Sheet.mdx rename to docs/docs/api/appkit-ui/ui/Sheet.mdx index 28ca2a0d..1a3d32bc 100644 --- a/docs/docs/api/appkit-ui/components/Sheet.mdx +++ b/docs/docs/api/appkit-ui/ui/Sheet.mdx @@ -1,9 +1,8 @@ ---- -title: Sheet ---- - # Sheet +Sliding panel that overlays content from screen edges + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Sheet +Sliding panel that overlays content from screen edges + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -39,6 +40,8 @@ import { Sheet } from '@databricks/appkit-ui'; ## SheetClose +Button that closes the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -62,6 +65,8 @@ import { SheetClose } from '@databricks/appkit-ui'; ## SheetContent +Main content area of the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -93,6 +98,8 @@ import { SheetContent } from '@databricks/appkit-ui'; ## SheetDescription +Description text for the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -116,6 +123,8 @@ import { SheetDescription } from '@databricks/appkit-ui'; ## SheetFooter +Footer section of the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -137,6 +146,8 @@ import { SheetFooter } from '@databricks/appkit-ui'; ## SheetHeader +Header section of the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -158,6 +169,8 @@ import { SheetHeader } from '@databricks/appkit-ui'; ## SheetTitle +Title text for the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) @@ -181,6 +194,8 @@ import { SheetTitle } from '@databricks/appkit-ui'; ## SheetTrigger +Button that opens the sheet + **Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx) diff --git a/docs/docs/api/appkit-ui/components/Sidebar.mdx b/docs/docs/api/appkit-ui/ui/Sidebar.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/Sidebar.mdx rename to docs/docs/api/appkit-ui/ui/Sidebar.mdx index f5f5306e..df0ec1b9 100644 --- a/docs/docs/api/appkit-ui/components/Sidebar.mdx +++ b/docs/docs/api/appkit-ui/ui/Sidebar.mdx @@ -1,11 +1,12 @@ ---- -title: Sidebar ---- - # Sidebar +Collapsible navigation sidebar with mobile support + + ## Sidebar +Collapsible navigation sidebar with mobile support + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -31,6 +32,8 @@ import { Sidebar } from '@databricks/appkit-ui'; ## SidebarContent +Scrollable content area within the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -52,6 +55,8 @@ import { SidebarContent } from '@databricks/appkit-ui'; ## SidebarFooter +Footer section at the bottom of the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -73,6 +78,8 @@ import { SidebarFooter } from '@databricks/appkit-ui'; ## SidebarGroup +Container for grouping related sidebar items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -94,6 +101,8 @@ import { SidebarGroup } from '@databricks/appkit-ui'; ## SidebarGroupAction +Action button displayed next to a sidebar group label + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -117,6 +126,8 @@ import { SidebarGroupAction } from '@databricks/appkit-ui'; ## SidebarGroupContent +Content container for sidebar group items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -138,6 +149,8 @@ import { SidebarGroupContent } from '@databricks/appkit-ui'; ## SidebarGroupLabel +Label heading for a sidebar group + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -161,6 +174,8 @@ import { SidebarGroupLabel } from '@databricks/appkit-ui'; ## SidebarHeader +Header section at the top of the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -182,6 +197,8 @@ import { SidebarHeader } from '@databricks/appkit-ui'; ## SidebarInput +Input field styled for use within the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -203,6 +220,8 @@ import { SidebarInput } from '@databricks/appkit-ui'; ## SidebarInset +Main content area that adapts to sidebar state + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -224,6 +243,8 @@ import { SidebarInset } from '@databricks/appkit-ui'; ## SidebarMenu +Navigation menu list within the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -245,6 +266,8 @@ import { SidebarMenu } from '@databricks/appkit-ui'; ## SidebarMenuAction +Action button displayed alongside a menu item + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -269,6 +292,8 @@ import { SidebarMenuAction } from '@databricks/appkit-ui'; ## SidebarMenuBadge +Badge for displaying counts or status on menu items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -317,6 +342,8 @@ import { SidebarMenuButton } from '@databricks/appkit-ui'; ## SidebarMenuItem +Individual menu item within the sidebar + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -338,6 +365,8 @@ import { SidebarMenuItem } from '@databricks/appkit-ui'; ## SidebarMenuSkeleton +Loading skeleton placeholder for menu items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -361,6 +390,8 @@ import { SidebarMenuSkeleton } from '@databricks/appkit-ui'; ## SidebarMenuSub +Submenu list for nested navigation items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -382,6 +413,8 @@ import { SidebarMenuSub } from '@databricks/appkit-ui'; ## SidebarMenuSubButton +Button for submenu items + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -407,6 +440,8 @@ import { SidebarMenuSubButton } from '@databricks/appkit-ui'; ## SidebarMenuSubItem +Individual item within a sidebar submenu + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -453,6 +488,8 @@ import { SidebarProvider } from '@databricks/appkit-ui'; ## SidebarRail +Clickable rail element for toggling sidebar visibility + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -474,6 +511,8 @@ import { SidebarRail } from '@databricks/appkit-ui'; ## SidebarSeparator +Visual separator between sidebar sections + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -499,6 +538,8 @@ import { SidebarSeparator } from '@databricks/appkit-ui'; ## SidebarTrigger +Button that toggles the sidebar open and closed + **Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) @@ -521,3 +562,26 @@ import { SidebarTrigger } from '@databricks/appkit-ui'; ``` + +## useSidebar + +Hook to access sidebar state and controls + + +**Source:** [`packages/appkit-ui/src/react/ui/sidebar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sidebar.tsx) + + +### Props + +This component extends standard HTML element attributes. + + + +### Usage + +```tsx +import { useSidebar } from '@databricks/appkit-ui'; + + +``` + diff --git a/docs/docs/api/appkit-ui/components/Skeleton.mdx b/docs/docs/api/appkit-ui/ui/Skeleton.mdx similarity index 83% rename from docs/docs/api/appkit-ui/components/Skeleton.mdx rename to docs/docs/api/appkit-ui/ui/Skeleton.mdx index 9c396cf3..abb76630 100644 --- a/docs/docs/api/appkit-ui/components/Skeleton.mdx +++ b/docs/docs/api/appkit-ui/ui/Skeleton.mdx @@ -1,9 +1,8 @@ ---- -title: Skeleton ---- - # Skeleton +Loading placeholder with pulsing animation + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Skeleton +Loading placeholder with pulsing animation + **Source:** [`packages/appkit-ui/src/react/ui/skeleton.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/skeleton.tsx) diff --git a/docs/docs/api/appkit-ui/components/Slider.mdx b/docs/docs/api/appkit-ui/ui/Slider.mdx similarity index 84% rename from docs/docs/api/appkit-ui/components/Slider.mdx rename to docs/docs/api/appkit-ui/ui/Slider.mdx index 19d72a6f..0787a912 100644 --- a/docs/docs/api/appkit-ui/components/Slider.mdx +++ b/docs/docs/api/appkit-ui/ui/Slider.mdx @@ -1,9 +1,8 @@ ---- -title: Slider ---- - # Slider +Draggable input for selecting numeric values within a range + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Slider +Draggable input for selecting numeric values within a range + **Source:** [`packages/appkit-ui/src/react/ui/slider.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/slider.tsx) @@ -25,8 +26,8 @@ import { DocExample } from "@site/src/components/DocExample"; | `disabled` | `boolean` | | - | - | | `orientation` | `enum` | | - | - | | `dir` | `enum` | | - | - | -| `min` | `number` | | `0` | - | -| `max` | `number` | | `100` | - | +| `min` | `number` | | - | - | +| `max` | `number` | | - | - | | `step` | `number` | | - | - | | `minStepsBetweenThumbs` | `number` | | - | - | | `value` | `number[]` | | - | - | diff --git a/docs/docs/api/appkit-ui/components/Spinner.mdx b/docs/docs/api/appkit-ui/ui/Spinner.mdx similarity index 86% rename from docs/docs/api/appkit-ui/components/Spinner.mdx rename to docs/docs/api/appkit-ui/ui/Spinner.mdx index 91ae6ec6..00783381 100644 --- a/docs/docs/api/appkit-ui/components/Spinner.mdx +++ b/docs/docs/api/appkit-ui/ui/Spinner.mdx @@ -1,11 +1,12 @@ ---- -title: Spinner ---- - # Spinner +Animated loading indicator + + ## Spinner +Animated loading indicator + **Source:** [`packages/appkit-ui/src/react/ui/spinner.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/spinner.tsx) diff --git a/docs/docs/api/appkit-ui/components/Switch.mdx b/docs/docs/api/appkit-ui/ui/Switch.mdx similarity index 86% rename from docs/docs/api/appkit-ui/components/Switch.mdx rename to docs/docs/api/appkit-ui/ui/Switch.mdx index d9d63e04..8fb88078 100644 --- a/docs/docs/api/appkit-ui/components/Switch.mdx +++ b/docs/docs/api/appkit-ui/ui/Switch.mdx @@ -1,9 +1,8 @@ ---- -title: Switch ---- - # Switch +Toggle control for switching between on and off states + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Switch +Toggle control for switching between on and off states + **Source:** [`packages/appkit-ui/src/react/ui/switch.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/switch.tsx) diff --git a/docs/docs/api/appkit-ui/components/Table.mdx b/docs/docs/api/appkit-ui/ui/Table.mdx similarity index 96% rename from docs/docs/api/appkit-ui/components/Table.mdx rename to docs/docs/api/appkit-ui/ui/Table.mdx index 51341dcf..90b5c7d5 100644 --- a/docs/docs/api/appkit-ui/components/Table.mdx +++ b/docs/docs/api/appkit-ui/ui/Table.mdx @@ -1,9 +1,8 @@ ---- -title: Table ---- - # Table +Structured data display with rows and columns + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Table +Structured data display with rows and columns + **Source:** [`packages/appkit-ui/src/react/ui/table.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/table.tsx) diff --git a/docs/docs/api/appkit-ui/components/Tabs.mdx b/docs/docs/api/appkit-ui/ui/Tabs.mdx similarity index 92% rename from docs/docs/api/appkit-ui/components/Tabs.mdx rename to docs/docs/api/appkit-ui/ui/Tabs.mdx index f0c1e87b..dc18fcae 100644 --- a/docs/docs/api/appkit-ui/components/Tabs.mdx +++ b/docs/docs/api/appkit-ui/ui/Tabs.mdx @@ -1,9 +1,8 @@ ---- -title: Tabs ---- - # Tabs +Tabbed interface for organizing content into separate panels + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Tabs +Tabbed interface for organizing content into separate panels + **Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx) @@ -42,6 +43,8 @@ import { Tabs } from '@databricks/appkit-ui'; ## TabsContent +Content panel associated with a tab + **Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx) @@ -67,6 +70,8 @@ import { TabsContent } from '@databricks/appkit-ui'; ## TabsList +Container for tab trigger buttons + **Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx) @@ -91,6 +96,8 @@ import { TabsList } from '@databricks/appkit-ui'; ## TabsTrigger +Button that activates a tab panel + **Source:** [`packages/appkit-ui/src/react/ui/tabs.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tabs.tsx) diff --git a/docs/docs/api/appkit-ui/components/Textarea.mdx b/docs/docs/api/appkit-ui/ui/Textarea.mdx similarity index 88% rename from docs/docs/api/appkit-ui/components/Textarea.mdx rename to docs/docs/api/appkit-ui/ui/Textarea.mdx index b4a7004a..ed7c40c8 100644 --- a/docs/docs/api/appkit-ui/components/Textarea.mdx +++ b/docs/docs/api/appkit-ui/ui/Textarea.mdx @@ -1,9 +1,8 @@ ---- -title: Textarea ---- - # Textarea +Multi-line text input field + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Textarea +Multi-line text input field + **Source:** [`packages/appkit-ui/src/react/ui/textarea.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/textarea.tsx) diff --git a/docs/docs/api/appkit-ui/components/Sonner.mdx b/docs/docs/api/appkit-ui/ui/Toaster.mdx similarity index 90% rename from docs/docs/api/appkit-ui/components/Sonner.mdx rename to docs/docs/api/appkit-ui/ui/Toaster.mdx index 6649d003..5d156884 100644 --- a/docs/docs/api/appkit-ui/components/Sonner.mdx +++ b/docs/docs/api/appkit-ui/ui/Toaster.mdx @@ -1,8 +1,7 @@ ---- -title: Sonner ---- +# Toaster + +Toast notification system for displaying temporary messages -# Sonner ## Example @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Toaster +Toast notification system for displaying temporary messages + **Source:** [`packages/appkit-ui/src/react/ui/sonner.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sonner.tsx) diff --git a/docs/docs/api/appkit-ui/components/Toggle.mdx b/docs/docs/api/appkit-ui/ui/Toggle.mdx similarity index 89% rename from docs/docs/api/appkit-ui/components/Toggle.mdx rename to docs/docs/api/appkit-ui/ui/Toggle.mdx index 8215c4d9..45377ae7 100644 --- a/docs/docs/api/appkit-ui/components/Toggle.mdx +++ b/docs/docs/api/appkit-ui/ui/Toggle.mdx @@ -1,9 +1,8 @@ ---- -title: Toggle ---- - # Toggle +Button that toggles between pressed and unpressed states + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Toggle +Button that toggles between pressed and unpressed states + **Source:** [`packages/appkit-ui/src/react/ui/toggle.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/toggle.tsx) diff --git a/docs/docs/api/appkit-ui/components/ToggleGroup.mdx b/docs/docs/api/appkit-ui/ui/ToggleGroup.mdx similarity index 95% rename from docs/docs/api/appkit-ui/components/ToggleGroup.mdx rename to docs/docs/api/appkit-ui/ui/ToggleGroup.mdx index e7a26ea6..08fe028d 100644 --- a/docs/docs/api/appkit-ui/components/ToggleGroup.mdx +++ b/docs/docs/api/appkit-ui/ui/ToggleGroup.mdx @@ -1,9 +1,8 @@ ---- -title: ToggleGroup ---- - # ToggleGroup +Group of toggle buttons for selecting one or more options + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## ToggleGroup +Group of toggle buttons for selecting one or more options + **Source:** [`packages/appkit-ui/src/react/ui/toggle-group.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/toggle-group.tsx) diff --git a/docs/docs/api/appkit-ui/components/Tooltip.mdx b/docs/docs/api/appkit-ui/ui/Tooltip.mdx similarity index 96% rename from docs/docs/api/appkit-ui/components/Tooltip.mdx rename to docs/docs/api/appkit-ui/ui/Tooltip.mdx index fddd8e34..94d609d8 100644 --- a/docs/docs/api/appkit-ui/components/Tooltip.mdx +++ b/docs/docs/api/appkit-ui/ui/Tooltip.mdx @@ -1,9 +1,8 @@ ---- -title: Tooltip ---- - # Tooltip +Brief informational message that appears on hover + + ## Example import { DocExample } from "@site/src/components/DocExample"; @@ -13,6 +12,8 @@ import { DocExample } from "@site/src/components/DocExample"; ## Tooltip +Brief informational message that appears on hover + **Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx) @@ -78,6 +79,8 @@ import { TooltipContent } from '@databricks/appkit-ui'; ## TooltipProvider +Context provider for tooltip configuration + **Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx) diff --git a/docs/docs/api/appkit/Class.Plugin.md b/docs/docs/api/appkit/Class.Plugin.md index 5e0c4470..4908231a 100644 --- a/docs/docs/api/appkit/Class.Plugin.md +++ b/docs/docs/api/appkit/Class.Plugin.md @@ -1,6 +1,6 @@ # Abstract Class: Plugin\ -Defined in: [appkit/src/plugin/plugin.ts:58](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L58) +Base abstract class for creating AppKit plugins ## Type Parameters @@ -20,8 +20,6 @@ Defined in: [appkit/src/plugin/plugin.ts:58](https://github.com/databricks/appki new Plugin(config: TConfig): Plugin; ``` -Defined in: [appkit/src/plugin/plugin.ts:76](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L76) - #### Parameters | Parameter | Type | @@ -40,8 +38,6 @@ Defined in: [appkit/src/plugin/plugin.ts:76](https://github.com/databricks/appki protected app: AppManager; ``` -Defined in: [appkit/src/plugin/plugin.ts:64](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L64) - *** ### cache @@ -50,8 +46,6 @@ Defined in: [appkit/src/plugin/plugin.ts:64](https://github.com/databricks/appki protected cache: CacheManager; ``` -Defined in: [appkit/src/plugin/plugin.ts:63](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L63) - *** ### config @@ -60,8 +54,6 @@ Defined in: [appkit/src/plugin/plugin.ts:63](https://github.com/databricks/appki protected config: TConfig; ``` -Defined in: [appkit/src/plugin/plugin.ts:76](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L76) - *** ### devFileReader @@ -70,8 +62,6 @@ Defined in: [appkit/src/plugin/plugin.ts:76](https://github.com/databricks/appki protected devFileReader: DevFileReader; ``` -Defined in: [appkit/src/plugin/plugin.ts:65](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L65) - *** ### envVars @@ -80,8 +70,6 @@ Defined in: [appkit/src/plugin/plugin.ts:65](https://github.com/databricks/appki abstract protected envVars: string[]; ``` -Defined in: [appkit/src/plugin/plugin.ts:68](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L68) - *** ### isReady @@ -90,8 +78,6 @@ Defined in: [appkit/src/plugin/plugin.ts:68](https://github.com/databricks/appki protected isReady: boolean = false; ``` -Defined in: [appkit/src/plugin/plugin.ts:62](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L62) - *** ### name @@ -100,8 +86,6 @@ Defined in: [appkit/src/plugin/plugin.ts:62](https://github.com/databricks/appki name: string; ``` -Defined in: [appkit/src/plugin/plugin.ts:74](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L74) - #### Implementation of ```ts @@ -116,8 +100,6 @@ BasePlugin.name protected streamManager: StreamManager; ``` -Defined in: [appkit/src/plugin/plugin.ts:66](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L66) - *** ### telemetry @@ -126,8 +108,6 @@ Defined in: [appkit/src/plugin/plugin.ts:66](https://github.com/databricks/appki protected telemetry: ITelemetry; ``` -Defined in: [appkit/src/plugin/plugin.ts:67](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L67) - *** ### phase @@ -136,8 +116,6 @@ Defined in: [appkit/src/plugin/plugin.ts:67](https://github.com/databricks/appki static phase: PluginPhase = "normal"; ``` -Defined in: [appkit/src/plugin/plugin.ts:73](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L73) - ## Methods ### abortActiveOperations() @@ -146,8 +124,6 @@ Defined in: [appkit/src/plugin/plugin.ts:73](https://github.com/databricks/appki abortActiveOperations(): void; ``` -Defined in: [appkit/src/plugin/plugin.ts:101](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L101) - #### Returns `void` @@ -166,8 +142,6 @@ BasePlugin.abortActiveOperations asUser(req: Request): this; ``` -Defined in: [appkit/src/plugin/plugin.ts:134](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L134) - Execute operations using the user's identity from the request. Returns a scoped instance of this plugin where all method calls @@ -220,8 +194,6 @@ protected execute( userKey?: string): Promise; ``` -Defined in: [appkit/src/plugin/plugin.ts:263](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L263) - #### Type Parameters | Type Parameter | @@ -252,8 +224,6 @@ protected executeStream( userKey?: string): Promise; ``` -Defined in: [appkit/src/plugin/plugin.ts:201](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L201) - #### Type Parameters | Type Parameter | @@ -281,8 +251,6 @@ Defined in: [appkit/src/plugin/plugin.ts:201](https://github.com/databricks/appk getEndpoints(): PluginEndpointMap; ``` -Defined in: [appkit/src/plugin/plugin.ts:97](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L97) - #### Returns `PluginEndpointMap` @@ -301,8 +269,6 @@ BasePlugin.getEndpoints injectRoutes(_: Router): void; ``` -Defined in: [appkit/src/plugin/plugin.ts:91](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L91) - #### Parameters | Parameter | Type | @@ -327,8 +293,6 @@ BasePlugin.injectRoutes protected registerEndpoint(name: string, path: string): void; ``` -Defined in: [appkit/src/plugin/plugin.ts:288](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L288) - #### Parameters | Parameter | Type | @@ -348,8 +312,6 @@ Defined in: [appkit/src/plugin/plugin.ts:288](https://github.com/databricks/appk protected route<_TResponse>(router: Router, config: RouteConfig): void; ``` -Defined in: [appkit/src/plugin/plugin.ts:292](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L292) - #### Type Parameters | Type Parameter | @@ -375,8 +337,6 @@ Defined in: [appkit/src/plugin/plugin.ts:292](https://github.com/databricks/appk setup(): Promise; ``` -Defined in: [appkit/src/plugin/plugin.ts:95](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L95) - #### Returns `Promise`\<`void`\> @@ -395,8 +355,6 @@ BasePlugin.setup validateEnv(): void; ``` -Defined in: [appkit/src/plugin/plugin.ts:87](https://github.com/databricks/appkit/blob/main/packages/appkit/src/plugin/plugin.ts#L87) - #### Returns `void` diff --git a/docs/docs/api/appkit/Function.appKitTypesPlugin.md b/docs/docs/api/appkit/Function.appKitTypesPlugin.md index 9cbd64ce..9750c267 100644 --- a/docs/docs/api/appkit/Function.appKitTypesPlugin.md +++ b/docs/docs/api/appkit/Function.appKitTypesPlugin.md @@ -4,8 +4,6 @@ function appKitTypesPlugin(options?: AppKitTypesPluginOptions): Plugin$1; ``` -Defined in: [appkit/src/type-generator/vite-plugin.ts:22](https://github.com/databricks/appkit/blob/main/packages/appkit/src/type-generator/vite-plugin.ts#L22) - Vite plugin to generate types for AppKit queries. Calls generateFromEntryPoint under the hood. diff --git a/docs/docs/api/appkit/Function.createApp.md b/docs/docs/api/appkit/Function.createApp.md index 63c630b9..35128e0c 100644 --- a/docs/docs/api/appkit/Function.createApp.md +++ b/docs/docs/api/appkit/Function.createApp.md @@ -8,8 +8,6 @@ function createApp(config: { }): Promise>; ``` -Defined in: [appkit/src/core/appkit.ts:133](https://github.com/databricks/appkit/blob/main/packages/appkit/src/core/appkit.ts#L133) - Bootstraps AppKit with the provided configuration. ## Type Parameters diff --git a/docs/docs/api/appkit/Function.generateFromEntryPoint.md b/docs/docs/api/appkit/Function.generateFromEntryPoint.md new file mode 100644 index 00000000..90ac2fc1 --- /dev/null +++ b/docs/docs/api/appkit/Function.generateFromEntryPoint.md @@ -0,0 +1,26 @@ +# Function: generateFromEntryPoint() + +```ts +function generateFromEntryPoint(options: { + noCache?: boolean; + outFile: string; + queryFolder?: string; + warehouseId: string; +}): Promise; +``` + +Entry point for generating type declarations from all imported files + +## Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `options` | \{ `noCache?`: `boolean`; `outFile`: `string`; `queryFolder?`: `string`; `warehouseId`: `string`; \} | the options for the generation | +| `options.noCache?` | `boolean` | - | +| `options.outFile` | `string` | the output file | +| `options.queryFolder?` | `string` | - | +| `options.warehouseId` | `string` | - | + +## Returns + +`Promise`\<`void`\> diff --git a/docs/docs/api/appkit/Function.isSQLTypeMarker.md b/docs/docs/api/appkit/Function.isSQLTypeMarker.md index 08852d9e..f74ba050 100644 --- a/docs/docs/api/appkit/Function.isSQLTypeMarker.md +++ b/docs/docs/api/appkit/Function.isSQLTypeMarker.md @@ -4,8 +4,6 @@ function isSQLTypeMarker(value: any): value is SQLTypeMarker; ``` -Defined in: [shared/src/sql/helpers.ts:344](https://github.com/databricks/appkit/blob/main/packages/shared/src/sql/helpers.ts#L344) - Type guard to check if a value is a SQL type marker ## Parameters diff --git a/docs/docs/api/appkit/Interface.BasePluginConfig.md b/docs/docs/api/appkit/Interface.BasePluginConfig.md index d47a75cb..a7faffc6 100644 --- a/docs/docs/api/appkit/Interface.BasePluginConfig.md +++ b/docs/docs/api/appkit/Interface.BasePluginConfig.md @@ -1,6 +1,6 @@ # Interface: BasePluginConfig -Defined in: [shared/src/plugin.ts:17](https://github.com/databricks/appkit/blob/main/packages/shared/src/plugin.ts#L17) +Base configuration interface for AppKit plugins ## Indexable @@ -16,8 +16,6 @@ Defined in: [shared/src/plugin.ts:17](https://github.com/databricks/appkit/blob/ optional host: string; ``` -Defined in: [shared/src/plugin.ts:19](https://github.com/databricks/appkit/blob/main/packages/shared/src/plugin.ts#L19) - *** ### name? @@ -26,8 +24,6 @@ Defined in: [shared/src/plugin.ts:19](https://github.com/databricks/appkit/blob/ optional name: string; ``` -Defined in: [shared/src/plugin.ts:18](https://github.com/databricks/appkit/blob/main/packages/shared/src/plugin.ts#L18) - *** ### telemetry? @@ -35,5 +31,3 @@ Defined in: [shared/src/plugin.ts:18](https://github.com/databricks/appkit/blob/ ```ts optional telemetry: TelemetryOptions; ``` - -Defined in: [shared/src/plugin.ts:27](https://github.com/databricks/appkit/blob/main/packages/shared/src/plugin.ts#L27) diff --git a/docs/docs/api/appkit/Interface.CacheConfig.md b/docs/docs/api/appkit/Interface.CacheConfig.md index d1d26dd5..e1a62e23 100644 --- a/docs/docs/api/appkit/Interface.CacheConfig.md +++ b/docs/docs/api/appkit/Interface.CacheConfig.md @@ -1,7 +1,5 @@ # Interface: CacheConfig -Defined in: [shared/src/cache.ts:36](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L36) - Configuration for caching ## Indexable @@ -18,8 +16,6 @@ Configuration for caching optional cacheKey: (string | number | object)[]; ``` -Defined in: [shared/src/cache.ts:46](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L46) - Cache key *** @@ -30,8 +26,6 @@ Cache key optional cleanupProbability: number; ``` -Defined in: [shared/src/cache.ts:55](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L55) - Probability (0-1) of triggering cleanup on each get operation *** @@ -42,8 +36,6 @@ Probability (0-1) of triggering cleanup on each get operation optional enabled: boolean; ``` -Defined in: [shared/src/cache.ts:38](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L38) - Whether caching is enabled *** @@ -54,8 +46,6 @@ Whether caching is enabled optional evictionCheckProbability: number; ``` -Defined in: [shared/src/cache.ts:58](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L58) - Probability (0-1) of checking total bytes on each write operation *** @@ -66,8 +56,6 @@ Probability (0-1) of checking total bytes on each write operation optional maxBytes: number; ``` -Defined in: [shared/src/cache.ts:42](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L42) - Maximum number of bytes in the cache *** @@ -78,8 +66,6 @@ Maximum number of bytes in the cache optional maxEntryBytes: number; ``` -Defined in: [shared/src/cache.ts:61](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L61) - Maximum number of bytes per entry in the cache *** @@ -90,8 +76,6 @@ Maximum number of bytes per entry in the cache optional maxSize: number; ``` -Defined in: [shared/src/cache.ts:44](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L44) - Maximum number of entries in the cache *** @@ -102,8 +86,6 @@ Maximum number of entries in the cache optional storage: CacheStorage; ``` -Defined in: [shared/src/cache.ts:48](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L48) - Cache Storage provider instance *** @@ -114,8 +96,6 @@ Cache Storage provider instance optional strictPersistence: boolean; ``` -Defined in: [shared/src/cache.ts:50](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L50) - Whether to enforce strict persistence *** @@ -126,8 +106,6 @@ Whether to enforce strict persistence optional telemetry: TelemetryOptions; ``` -Defined in: [shared/src/cache.ts:52](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L52) - Telemetry configuration *** @@ -138,6 +116,4 @@ Telemetry configuration optional ttl: number; ``` -Defined in: [shared/src/cache.ts:40](https://github.com/databricks/appkit/blob/main/packages/shared/src/cache.ts#L40) - Time to live in seconds diff --git a/docs/docs/api/appkit/Interface.ITelemetry.md b/docs/docs/api/appkit/Interface.ITelemetry.md index 0478778f..fc931386 100644 --- a/docs/docs/api/appkit/Interface.ITelemetry.md +++ b/docs/docs/api/appkit/Interface.ITelemetry.md @@ -1,7 +1,5 @@ # Interface: ITelemetry -Defined in: [appkit/src/telemetry/types.ts:33](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L33) - Plugin-facing interface for OpenTelemetry instrumentation. Provides a thin abstraction over OpenTelemetry APIs for plugins. @@ -13,8 +11,6 @@ Provides a thin abstraction over OpenTelemetry APIs for plugins. emit(logRecord: LogRecord): void; ``` -Defined in: [appkit/src/telemetry/types.ts:57](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L57) - Emits a log record using the default logger. Respects the logs enabled/disabled config. @@ -36,8 +32,6 @@ Respects the logs enabled/disabled config. getLogger(options?: InstrumentConfig): Logger; ``` -Defined in: [appkit/src/telemetry/types.ts:50](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L50) - Gets a logger for emitting log records. #### Parameters @@ -58,8 +52,6 @@ Gets a logger for emitting log records. getMeter(options?: InstrumentConfig): Meter; ``` -Defined in: [appkit/src/telemetry/types.ts:44](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L44) - Gets a meter for recording metrics. #### Parameters @@ -80,8 +72,6 @@ Gets a meter for recording metrics. getTracer(options?: InstrumentConfig): Tracer; ``` -Defined in: [appkit/src/telemetry/types.ts:38](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L38) - Gets a tracer for creating spans. #### Parameters @@ -102,8 +92,6 @@ Gets a tracer for creating spans. registerInstrumentations(instrumentations: Instrumentation[]): void; ``` -Defined in: [appkit/src/telemetry/types.ts:81](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L81) - Register OpenTelemetry instrumentations. Can be called at any time, but recommended to call in plugin constructor. @@ -129,8 +117,6 @@ startActiveSpan( tracerOptions?: InstrumentConfig): Promise; ``` -Defined in: [appkit/src/telemetry/types.ts:69](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L69) - Starts an active span and executes a callback function within its context. Respects the traces enabled/disabled config. When traces are disabled, executes the callback with a no-op span. diff --git a/docs/docs/api/appkit/Interface.StreamExecutionSettings.md b/docs/docs/api/appkit/Interface.StreamExecutionSettings.md index 34d35697..dedcdd0d 100644 --- a/docs/docs/api/appkit/Interface.StreamExecutionSettings.md +++ b/docs/docs/api/appkit/Interface.StreamExecutionSettings.md @@ -1,6 +1,6 @@ # Interface: StreamExecutionSettings -Defined in: [shared/src/execute.ts:48](https://github.com/databricks/appkit/blob/main/packages/shared/src/execute.ts#L48) +Configuration for streaming execution with default and user-scoped settings ## Properties @@ -10,8 +10,6 @@ Defined in: [shared/src/execute.ts:48](https://github.com/databricks/appkit/blob default: PluginExecuteConfig; ``` -Defined in: [shared/src/execute.ts:49](https://github.com/databricks/appkit/blob/main/packages/shared/src/execute.ts#L49) - *** ### stream? @@ -20,8 +18,6 @@ Defined in: [shared/src/execute.ts:49](https://github.com/databricks/appkit/blob optional stream: StreamConfig; ``` -Defined in: [shared/src/execute.ts:51](https://github.com/databricks/appkit/blob/main/packages/shared/src/execute.ts#L51) - *** ### user? @@ -29,5 +25,3 @@ Defined in: [shared/src/execute.ts:51](https://github.com/databricks/appkit/blob ```ts optional user: PluginExecuteConfig; ``` - -Defined in: [shared/src/execute.ts:50](https://github.com/databricks/appkit/blob/main/packages/shared/src/execute.ts#L50) diff --git a/docs/docs/api/appkit/Interface.TelemetryConfig.md b/docs/docs/api/appkit/Interface.TelemetryConfig.md index 89b03fa5..132d8404 100644 --- a/docs/docs/api/appkit/Interface.TelemetryConfig.md +++ b/docs/docs/api/appkit/Interface.TelemetryConfig.md @@ -1,6 +1,6 @@ # Interface: TelemetryConfig -Defined in: [appkit/src/telemetry/types.ts:5](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L5) +OpenTelemetry configuration for AppKit applications ## Properties @@ -10,8 +10,6 @@ Defined in: [appkit/src/telemetry/types.ts:5](https://github.com/databricks/appk optional exportIntervalMs: number; ``` -Defined in: [appkit/src/telemetry/types.ts:9](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L9) - *** ### headers? @@ -20,8 +18,6 @@ Defined in: [appkit/src/telemetry/types.ts:9](https://github.com/databricks/appk optional headers: Record; ``` -Defined in: [appkit/src/telemetry/types.ts:10](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L10) - *** ### instrumentations? @@ -30,8 +26,6 @@ Defined in: [appkit/src/telemetry/types.ts:10](https://github.com/databricks/app optional instrumentations: Instrumentation[]; ``` -Defined in: [appkit/src/telemetry/types.ts:8](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L8) - *** ### serviceName? @@ -40,8 +34,6 @@ Defined in: [appkit/src/telemetry/types.ts:8](https://github.com/databricks/appk optional serviceName: string; ``` -Defined in: [appkit/src/telemetry/types.ts:6](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L6) - *** ### serviceVersion? @@ -49,5 +41,3 @@ Defined in: [appkit/src/telemetry/types.ts:6](https://github.com/databricks/appk ```ts optional serviceVersion: string; ``` - -Defined in: [appkit/src/telemetry/types.ts:7](https://github.com/databricks/appkit/blob/main/packages/appkit/src/telemetry/types.ts#L7) diff --git a/docs/docs/api/appkit/TypeAlias.IAppRouter.md b/docs/docs/api/appkit/TypeAlias.IAppRouter.md index 08197ba6..f458327c 100644 --- a/docs/docs/api/appkit/TypeAlias.IAppRouter.md +++ b/docs/docs/api/appkit/TypeAlias.IAppRouter.md @@ -4,4 +4,4 @@ type IAppRouter = express.Router; ``` -Defined in: [shared/src/plugin.ts:94](https://github.com/databricks/appkit/blob/main/packages/shared/src/plugin.ts#L94) +Express router type for plugin route registration diff --git a/docs/docs/api/appkit/Variable.sql.md b/docs/docs/api/appkit/Variable.sql.md index 8fc3e993..1b42dcd0 100644 --- a/docs/docs/api/appkit/Variable.sql.md +++ b/docs/docs/api/appkit/Variable.sql.md @@ -11,8 +11,6 @@ const sql: { }; ``` -Defined in: [shared/src/sql/helpers.ts:14](https://github.com/databricks/appkit/blob/main/packages/shared/src/sql/helpers.ts#L14) - SQL helper namespace ## Type Declaration diff --git a/docs/docs/api/appkit/index.md b/docs/docs/api/appkit/index.md index 415735d1..6b09eb29 100644 --- a/docs/docs/api/appkit/index.md +++ b/docs/docs/api/appkit/index.md @@ -1,26 +1,29 @@ # @databricks/appkit +Core library for building Databricks applications with type-safe SQL queries, +plugin architecture, and React integration. + ## Classes | Class | Description | | ------ | ------ | -| [Plugin](Class.Plugin.md) | - | +| [Plugin](Class.Plugin.md) | Base abstract class for creating AppKit plugins | ## Interfaces | Interface | Description | | ------ | ------ | -| [BasePluginConfig](Interface.BasePluginConfig.md) | - | +| [BasePluginConfig](Interface.BasePluginConfig.md) | Base configuration interface for AppKit plugins | | [CacheConfig](Interface.CacheConfig.md) | Configuration for caching | | [ITelemetry](Interface.ITelemetry.md) | Plugin-facing interface for OpenTelemetry instrumentation. Provides a thin abstraction over OpenTelemetry APIs for plugins. | -| [StreamExecutionSettings](Interface.StreamExecutionSettings.md) | - | -| [TelemetryConfig](Interface.TelemetryConfig.md) | - | +| [StreamExecutionSettings](Interface.StreamExecutionSettings.md) | Configuration for streaming execution with default and user-scoped settings | +| [TelemetryConfig](Interface.TelemetryConfig.md) | OpenTelemetry configuration for AppKit applications | ## Type Aliases | Type Alias | Description | | ------ | ------ | -| [IAppRouter](TypeAlias.IAppRouter.md) | - | +| [IAppRouter](TypeAlias.IAppRouter.md) | Express router type for plugin route registration | ## Variables @@ -34,4 +37,5 @@ | ------ | ------ | | [appKitTypesPlugin](Function.appKitTypesPlugin.md) | Vite plugin to generate types for AppKit queries. Calls generateFromEntryPoint under the hood. | | [createApp](Function.createApp.md) | Bootstraps AppKit with the provided configuration. | +| [generateFromEntryPoint](Function.generateFromEntryPoint.md) | Entry point for generating type declarations from all imported files | | [isSQLTypeMarker](Function.isSQLTypeMarker.md) | Type guard to check if a value is a SQL type marker | diff --git a/docs/docs/api/appkit/typedoc-sidebar.ts b/docs/docs/api/appkit/typedoc-sidebar.ts index 1b4302f6..a2735cf1 100644 --- a/docs/docs/api/appkit/typedoc-sidebar.ts +++ b/docs/docs/api/appkit/typedoc-sidebar.ts @@ -79,6 +79,11 @@ const typedocSidebar: SidebarsConfig = { id: "api/appkit/Function.createApp", label: "createApp" }, + { + type: "doc", + id: "api/appkit/Function.generateFromEntryPoint", + label: "generateFromEntryPoint" + }, { type: "doc", id: "api/appkit/Function.isSQLTypeMarker", diff --git a/docs/docs/app-management.mdx b/docs/docs/app-management.mdx index e2a59765..05f76d20 100644 --- a/docs/docs/app-management.mdx +++ b/docs/docs/app-management.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 2 --- import Prerequisites from './_prerequisites.mdx'; @@ -16,12 +16,10 @@ See the [Quick start](./index.md#quick-start-options) section to create a new Da ## Configuration -Before deploying your app, configure it according to your needs. See the [Databricks Apps Configuration](https://docs.databricks.com/aws/en/dev-tools/databricks-apps/configuration) documentation for details on: - -- App configuration file (`app.yaml`) -- Environment variables -- Authorization and permissions -- Networking configuration +Before deploying your app, you need to configure it. See the [Configuration guide](./configuration.mdx) for details on: +- `app.yaml` configuration and command specification +- Environment variables and SQL warehouse binding +- Local development authentication options ## Deploy app diff --git a/docs/docs/configuration.mdx b/docs/docs/configuration.mdx new file mode 100644 index 00000000..c7ca9a32 --- /dev/null +++ b/docs/docs/configuration.mdx @@ -0,0 +1,145 @@ +--- +sidebar_position: 5 +--- + +# Configuration + +This guide covers environment variables and configuration options for AppKit applications. + +## App deployment configuration + +### `app.yaml` file + +The `app.yaml` file configures your app's runtime environment in Databricks Apps. + +**Basic example:** + +```yaml +command: + - node + - build/index.mjs +env: + - name: DATABRICKS_WAREHOUSE_ID + valueFrom: sql-warehouse +``` + +### Command specification + +Specify how to start your app in the `command` field: + +```yaml +command: + - node + - build/index.mjs +``` + +This runs the production build of your AppKit server (created by `npm run build`). + +### Binding a SQL warehouse + +To use the analytics plugin, bind a SQL warehouse in your `app.yaml`: + +```yaml +env: + - name: DATABRICKS_WAREHOUSE_ID + valueFrom: sql-warehouse +``` + +This makes the warehouse ID available to your app at runtime. The `valueFrom: sql-warehouse` directive tells Databricks Apps to inject the configured warehouse ID. + +For advanced configuration options (authorization, networking, resource limits), see the [Databricks Apps Configuration](https://docs.databricks.com/aws/en/dev-tools/databricks-apps/configuration) documentation. + +## Environment variables + +### Required for Databricks Apps deployment + +These are typically **provided by Databricks Apps runtime** (exact set can vary by platform/version): + +| Variable | Description | +|----------|-------------| +| `DATABRICKS_HOST` | Workspace URL (e.g. `https://xxx.cloud.databricks.com`) | +| `DATABRICKS_APP_PORT` | Port to bind (default: `8000`) | +| `DATABRICKS_APP_NAME` | App name in Databricks | + +### Required for SQL queries (analytics plugin) + +| Variable | Description | How to Set | +|----------|-------------|------------| +| `DATABRICKS_WAREHOUSE_ID` | SQL warehouse ID | In `app.yaml`: `valueFrom: sql-warehouse` | + +See the [App deployment configuration](#app-deployment-configuration) section above for details on how to bind this variable. + +### Optional variables + +| Variable | Description | Default | +|----------|-------------|---------| +| `DATABRICKS_WORKSPACE_ID` | Workspace ID | Auto-fetched from API | +| `NODE_ENV` | `"development"` or `"production"` | — | +| `FLASK_RUN_HOST` | Host to bind | `0.0.0.0` | + +### Telemetry (optional) + +| Variable | Description | +|----------|-------------| +| `OTEL_EXPORTER_OTLP_ENDPOINT` | OpenTelemetry collector endpoint | +| `OTEL_SERVICE_NAME` | Service name for traces | + +## Local development authentication + +For local development, you need to authenticate with Databricks. Choose one of the following options: + +### Option 1: Databricks CLI authentication (recommended) + +Configure authentication once using the Databricks CLI: + +```bash +databricks auth login --host [host] --profile [profile-name] +``` + +If you use `DEFAULT` as the profile name, you can run your dev server directly: + +```bash +npm run dev +``` + +To run with a specific profile, set the `DATABRICKS_CONFIG_PROFILE` environment variable: + +```bash +DATABRICKS_CONFIG_PROFILE=my-profile npm run dev +``` + +Note: Some Databricks SDK versions use `DATABRICKS_PROFILE` instead of `DATABRICKS_CONFIG_PROFILE`. + +### Option 2: Environment variables + +```bash +export DATABRICKS_HOST="https://xxx.cloud.databricks.com" +export DATABRICKS_TOKEN="dapi..." +export DATABRICKS_WAREHOUSE_ID="abc123..." +npm run dev +``` + +### Option 3: `.env` file (auto-loaded by AppKit) + +Create a `.env` file in your project root (add to `.gitignore`!): + +```bash +DATABRICKS_HOST=https://xxx.cloud.databricks.com +DATABRICKS_TOKEN=dapi... +DATABRICKS_WAREHOUSE_ID=abc123... +``` + +Then run: + +```bash +npm run dev +``` + +## Advanced configuration + +For advanced Databricks Apps configuration (authorization, networking, resource limits), refer to the [Databricks Apps Configuration](https://docs.databricks.com/aws/en/dev-tools/databricks-apps/configuration) documentation. + +## See also + +- [App management](./app-management.mdx) - Deploying and managing apps +- [Plugins](./plugins.md) - Plugin configuration options diff --git a/docs/docs/development/_category_.json b/docs/docs/development/_category_.json new file mode 100644 index 00000000..a127caf5 --- /dev/null +++ b/docs/docs/development/_category_.json @@ -0,0 +1,11 @@ +{ + "label": "Development", + "position": 7, + "collapsible": true, + "collapsed": false, + "link": { + "type": "generated-index", + "title": "Development", + "description": "Guides for developing AppKit applications" + } +} diff --git a/docs/docs/development/llm-guide.mdx b/docs/docs/development/llm-guide.mdx new file mode 100644 index 00000000..6df10b17 --- /dev/null +++ b/docs/docs/development/llm-guide.mdx @@ -0,0 +1,82 @@ +--- +sidebar_position: 8 +--- + +# LLM Guide + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +export function LlmsTxtLink({ children = '`llms.txt`' }) { + const { siteConfig } = useDocusaurusContext(); + const llmsTxtUrl = `${siteConfig.baseUrl}llms.txt`; + return {children}; +} + +This document provides prescriptive guidance for AI coding assistants generating code with Databricks AppKit. It is intentionally opinionated to ensure consistent, production-ready code generation. + +:::note +This file contains just a subset of the LLM guidance. +To get the complete guidance, see the file for full guidance based on the AppKit documentation. +::: + +## High-level mission + +Build **full-stack TypeScript apps** on Databricks using: + +- **Backend**: `@databricks/appkit` +- **Frontend**: `@databricks/appkit-ui` +- **Analytics**: SQL files in `config/queries/*.sql` executed via the AppKit analytics plugin + +This guide is designed to work even when you *do not* have access to the AppKit source repo. Prefer only public package APIs and portable project structures. + +## Hard rules (LLM guardrails) + +- **Do not invent APIs**. If unsure, stick to the patterns shown in the documentation and only use documented exports from `@databricks/appkit` and `@databricks/appkit-ui`. +- **`createApp()` is async**. Prefer **top-level `await createApp(...)`**. If you can't, use `void createApp(...)` and do not ignore promise rejection. +- **Always memoize query parameters** passed to `useAnalyticsQuery` / charts to avoid refetch loops. +- **Always handle loading/error/empty states** in UI (use `Skeleton`, error text, empty state). +- **Always use `sql.*` helpers** for query parameters (do not pass raw strings/numbers unless the query expects none). +- **Never construct SQL strings dynamically**. Use parameterized queries with `:paramName`. +- **Never use `require()`**. Use ESM `import/export`. + +## TypeScript import rules + +If your `tsconfig.json` uses `"verbatimModuleSyntax": true`, **always use `import type` for type-only imports** (otherwise builds can fail in strict setups): + +```ts +import type { ReactNode } from "react"; +import { useMemo } from "react"; +``` + +## LLM checklist (before finalizing code) + +### Project setup + +- `package.json` has `"type": "module"` +- `tsx` is in devDependencies for dev server +- `dev` script uses `NODE_ENV=development tsx watch server/index.ts` +- `client/index.html` exists with `
` and script pointing to `client/src/main.tsx` + +### Backend + +- `await createApp({ plugins: [...] })` is used (or `void createApp` with intent) +- `server()` is included (always) +- If using SQL: `analytics({})` included + `config/queries/*.sql` present +- Queries use `:param` placeholders, and params are passed from UI using `sql.*` +- If query needs workspace scoping: uses `:workspaceId` + +### Frontend + +- `useMemo` wraps parameters objects +- Loading/error/empty states are explicit +- Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"` +- Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts) +- If using tooltips: root is wrapped with `` + +### Never + +- Don't build SQL strings manually +- Don't pass untyped raw params for annotated queries +- Don't ignore `createApp()`'s promise +- Don't invent UI components not listed in the documentation +- Don't pass Recharts children (``, ``, etc.) to AppKit chart components diff --git a/docs/docs/development/project-setup.mdx b/docs/docs/development/project-setup.mdx new file mode 100644 index 00000000..7f271ecb --- /dev/null +++ b/docs/docs/development/project-setup.mdx @@ -0,0 +1,235 @@ +--- +sidebar_position: 4 +--- + +# Project setup + +This guide covers the recommended project structure and scaffolding for AppKit applications. + +## Canonical project layout + +Recommended structure (client/server split): + +``` +my-app/ +├── server/ +│ ├── index.ts # backend entry point (AppKit) +│ └── .env # optional local dev env vars (do not commit) +├── client/ +│ ├── index.html +│ ├── vite.config.ts +│ └── src/ +│ ├── main.tsx +│ └── App.tsx +├── config/ +│ └── queries/ +│ └── my_query.sql +├── app.yaml +├── package.json +└── tsconfig.json +``` + +### Layout rationale + +The AppKit `server()` plugin automatically serves: +- **Dev**: Vite dev server (HMR) from `client/` +- **Prod**: static files from `client/dist` (built by Vite) + +## Project scaffolding + +### `package.json` + +```json +{ + "name": "my-app", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "NODE_ENV=development tsx watch server/index.ts", + "build": "npm run build:server && npm run build:client", + "build:server": "tsdown --out-dir build server/index.ts", + "build:client": "tsc -b && vite build --config client/vite.config.ts", + "start": "node build/index.mjs" + }, + "dependencies": { + "@databricks/appkit": "^0.1.2", + "@databricks/appkit-ui": "^0.1.2", + "react": "^19.2.3", + "react-dom": "^19.2.3" + }, + "devDependencies": { + "@types/node": "^20.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^5.1.1", + "tsdown": "^0.15.7", + "tsx": "^4.19.0", + "typescript": "~5.6.0", + "vite": "^7.2.4" + } +} +``` + +### `client/index.html` + +```html + + + + + + My App + + +
+ + + +``` + +### `client/src/main.tsx` + +```tsx +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; + +createRoot(document.getElementById("root")!).render( + + + , +); +``` + +### `client/src/App.tsx` (Minimal) + +```tsx +export default function App() { + return ( +
+

My App

+
+ ); +} +``` + +### `client/vite.config.ts` + +```ts +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; + +export default defineConfig({ + plugins: [react()], +}); +``` + +### `tsconfig.json` + +```json +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "strict": true, + "skipLibCheck": true, + "noEmit": true, + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true + }, + "include": ["server", "client/src"] +} +``` + +### `server/index.ts` + +```ts +import { createApp, server } from "@databricks/appkit"; + +await createApp({ + plugins: [server()], +}); +``` + +## Running the app + +```bash +# Install dependencies +npm install + +# Development (starts backend + Vite dev server) +npm run dev + +# Production build +npm run build +npm start +``` + +## Integrating into an existing app + +If you already have a React/Vite app and want to add AppKit: + +### 1. Install dependencies + +```bash +npm install @databricks/appkit @databricks/appkit-ui react react-dom +npm install -D tsx tsdown vite @vitejs/plugin-react typescript +``` + +If you don't already have a `client/` folder, create one and move your Vite app into it: +- Move `index.html` → `client/index.html` +- Move `vite.config.ts` → `client/vite.config.ts` +- Move `src/` → `client/src/` + +### 2. Create `server/index.ts` (New File) + +```ts +import { createApp, server } from "@databricks/appkit"; + +await createApp({ + plugins: [server()], +}); +``` + +### 3. Update `package.json` Scripts + +```json +{ + "scripts": { + "dev": "NODE_ENV=development tsx watch server/index.ts", + "build": "npm run build:server && npm run build:client", + "build:server": "tsdown --out-dir build server/index.ts", + "build:client": "tsc -b && vite build --config client/vite.config.ts", + "start": "node build/index.mjs" + } +} +``` + +### 4. Complete setup + +AppKit's server plugin will automatically serve your Vite app in dev mode and `client/dist` in production. If your Vite app must stay at the repo root (no `client/` folder), AppKit can still work, but the recommended layout is `client/` + `server/`. + +## Adding analytics to an existing app + +To add SQL query execution capabilities: + +```ts +// server/index.ts +import { createApp, server, analytics } from "@databricks/appkit"; + +await createApp({ + plugins: [server(), analytics()], +}); +``` + +Then create `config/queries/` and add your `.sql` files. + +## See also + +- [Local development](./local-development.mdx) - Running the dev server +- [Configuration](../configuration.mdx) - Environment variables +- [Plugins](../plugins.md) - Plugin configuration diff --git a/docs/docs/development/type-generation.mdx b/docs/docs/development/type-generation.mdx new file mode 100644 index 00000000..9703c128 --- /dev/null +++ b/docs/docs/development/type-generation.mdx @@ -0,0 +1,108 @@ +--- +sidebar_position: 5 +--- + +# Type generation + +AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI. + +## Goal + +Generate `client/src/appKitTypes.d.ts` so query keys, parameters, and result rows are type-safe. + +## Vite plugin: `appKitTypesPlugin` + +The recommended approach is to use the Vite plugin, which watches your SQL files and regenerates types automatically during development. + +### Configuration + +- `outFile?: string` - Output file path (default: `src/appKitTypes.d.ts`) +- `watchFolders?: string[]` - Folders to watch for SQL files (default: `["../config/queries"]`) + +### Example + +```ts +// client/vite.config.ts +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { appKitTypesPlugin } from "@databricks/appkit"; + +export default defineConfig({ + plugins: [ + react(), + appKitTypesPlugin({ + outFile: "src/appKitTypes.d.ts", + watchFolders: ["../config/queries"], + }), + ], +}); +``` + +### Important nuance + +When the frontend is served through AppKit in dev mode, AppKit's dev server already includes `appKitTypesPlugin()` internally. You still want it in your client build pipeline if you run `vite build` separately. + +## CLI: `appkit generate-types` + +For manual type generation or CI/CD pipelines, use the CLI command: + +```bash +# Requires DATABRICKS_WAREHOUSE_ID (or pass as 3rd arg) +npx appkit generate-types [rootDir] [outFile] [warehouseId] +``` + +### Examples + +- Generate types using warehouse ID from environment + + ```bash + npx appkit generate-types . client/src/appKitTypes.d.ts + ``` + +- Generate types using warehouse ID explicitly + + ```bash + npx appkit generate-types . client/src/appKitTypes.d.ts abc123... + ``` + +- Force regeneration (skip cache) + + ```bash + npx appkit generate-types --no-cache + ``` + +## How it works + +The type generator: + +1. Scans your `config/queries/` folder for `.sql` files +2. Parses SQL parameter annotations (e.g., `-- @param startDate DATE`) +3. Connects to your Databricks SQL Warehouse to infer result column types +4. Generates TypeScript interfaces for query parameters and results +5. Creates a `QueryRegistry` type for type-safe query execution + +## Using generated types + +Once types are generated, your IDE will provide autocomplete and type checking: + +```tsx +import { useAnalyticsQuery } from "@databricks/appkit-ui/react"; +import { sql } from "@databricks/appkit-ui/js"; + +// TypeScript knows "users_list" is a valid query key +// and what parameters it expects +const { data } = useAnalyticsQuery("users_list", { + status: sql.string("active"), + limit: sql.number(50), +}); + +// TypeScript knows the shape of the result rows +data?.forEach(row => { + console.log(row.email); // ✓ autocomplete works +}); +``` + +## See also + +- [Plugins](../plugins.md) - Analytics plugin configuration +- [API Reference](/docs/api/appkit-ui) - Complete UI components API documentation diff --git a/docs/docs/index.md b/docs/docs/index.md index b684f68c..3011f14d 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -4,6 +4,8 @@ sidebar_position: 1 # Getting started +Learn how to get started with AppKit. + import Prerequisites from './_prerequisites.mdx'; ## Introduction diff --git a/docs/docs/plugins.md b/docs/docs/plugins.md index f9159cbd..d93e9208 100644 --- a/docs/docs/plugins.md +++ b/docs/docs/plugins.md @@ -22,6 +22,63 @@ Provides HTTP server capabilities with development and production modes. The Server plugin uses the deferred initialization phase to access routes from other plugins. +#### What it does + +- Starts an Express server (default `host=0.0.0.0`, `port=8000`) +- Mounts plugin routes under `/api//...` +- Adds `/health` endpoint (returns `{ status: "ok" }`) +- Serves frontend: + - **Development** (`NODE_ENV=development`): runs a Vite dev server in middleware mode + - **Production**: auto-detects static frontend directory (checks `dist`, `client/dist`, `build`, `public`, `out`) + +#### Minimal server example + +The smallest valid AppKit server: + +```ts +// server/index.ts +import { createApp, server } from "@databricks/appkit"; + +await createApp({ + plugins: [server()], +}); +``` + +#### Manual server start example + +When you need to extend Express with custom routes: + +```ts +import { createApp, server } from "@databricks/appkit"; + +const appkit = await createApp({ + plugins: [server({ autoStart: false })], +}); + +appkit.server.extend((app) => { + app.get("/custom", (_req, res) => res.json({ ok: true })); +}); + +await appkit.server.start(); +``` + +#### Configuration options + +```ts +import { createApp, server } from "@databricks/appkit"; + +await createApp({ + plugins: [ + server({ + port: 8000, // default: Number(process.env.DATABRICKS_APP_PORT) || 8000 + host: "0.0.0.0", // default: process.env.FLASK_RUN_HOST || "0.0.0.0" + autoStart: true, // default: true + staticPath: "dist", // optional: force a specific static directory + }), + ], +}); +``` + ### Analytics plugin Enables SQL query execution against Databricks SQL Warehouses. @@ -33,7 +90,104 @@ Enables SQL query execution against Databricks SQL Warehouses. - Built-in caching and retry logic - Server-Sent Events (SSE) streaming -Store SQL queries in `config/queries/` directory and use parameterized queries with the [`sql`](api/appkit/Variable.sql.md) helper for type safety. +#### Basic usage + +```ts +import { analytics, createApp, server } from "@databricks/appkit"; + +await createApp({ + plugins: [server(), analytics({})], +}); +``` + +#### Where queries live + +- Put `.sql` files in `config/queries/` +- Query key is the filename without `.sql` (e.g. `spend_summary.sql` → `"spend_summary"`) + +#### SQL parameters + +Use `:paramName` placeholders and optionally annotate parameter types using SQL comments: + +```sql +-- @param startDate DATE +-- @param endDate DATE +-- @param limit NUMERIC +SELECT ... +WHERE usage_date BETWEEN :startDate AND :endDate +LIMIT :limit +``` + +**Supported `-- @param` types** (case-insensitive): +- `STRING`, `NUMERIC`, `BOOLEAN`, `DATE`, `TIMESTAMP`, `BINARY` + +#### Server-injected parameters + +`:workspaceId` is **injected by the server** and **must not** be annotated: + +```sql +WHERE workspace_id = :workspaceId +``` + +#### HTTP endpoints + +The analytics plugin exposes these endpoints (mounted under `/api/analytics`): + +- `POST /api/analytics/query/:query_key` +- `POST /api/analytics/users/me/query/:query_key` +- `GET /api/analytics/arrow-result/:jobId` +- `GET /api/analytics/users/me/arrow-result/:jobId` + +#### Format options + +- `format: "JSON"` (default) returns JSON rows +- `format: "ARROW"` returns an Arrow "statement_id" payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId` + +### Execution context and `asUser(req)` + +AppKit manages Databricks authentication via two contexts: + +- **ServiceContext** (singleton): Initialized at app startup with service principal credentials +- **ExecutionContext**: Determined at runtime - either service principal or user context + +#### Headers for user context + +- `x-forwarded-user`: required in production; identifies the user +- `x-forwarded-access-token`: required for user token passthrough + +#### Using `asUser(req)` for user-scoped operations + +The `asUser(req)` pattern allows plugins to execute operations using the requesting user's credentials: + +```ts +// In a custom plugin route handler +router.post("/users/me/data", async (req, res) => { + // Execute as the user (uses their Databricks permissions) + const result = await this.asUser(req).query("SELECT ..."); + res.json(result); +}); + +// Service principal execution (default) +router.post("/system/data", async (req, res) => { + const result = await this.query("SELECT ..."); + res.json(result); +}); +``` + +#### Context helper functions + +Exported from `@databricks/appkit`: + +- `getExecutionContext()`: Returns current context (user or service) +- `getCurrentUserId()`: Returns user ID in user context, service user ID otherwise +- `getWorkspaceClient()`: Returns the appropriate WorkspaceClient for current context +- `getWarehouseId()`: `Promise` (from `DATABRICKS_WAREHOUSE_ID` or auto-selected in dev) +- `getWorkspaceId()`: `Promise` (from `DATABRICKS_WORKSPACE_ID` or fetched) +- `isInUserContext()`: Returns `true` if currently executing in user context + +#### Development mode behavior + +In local development (`NODE_ENV=development`), if `asUser(req)` is called without a user token, it logs a warning and falls back to the service principal. ## Using plugins @@ -54,35 +208,40 @@ For complete configuration options, see [`createApp`](api/appkit/Function.create ## Creating custom plugins -Extend the [`Plugin`](api/appkit/Class.Plugin.md) class and export with `toPlugin()`: +If you need custom API routes or background logic, implement an AppKit plugin. -```typescript -import { Plugin, toPlugin } from "@databricks/app-kit"; +### Basic plugin example -interface MyPluginConfig { - apiKey?: string; -} +Extend the [`Plugin`](api/appkit/Class.Plugin.md) class and export with `toPlugin()`: -export class MyPlugin extends Plugin { - name = "myPlugin"; - envVars = ["MY_API_KEY"]; +```typescript +import { Plugin, toPlugin } from "@databricks/appkit"; +import type express from "express"; - async setup() { - // Initialize your plugin - } +class MyPlugin extends Plugin { + name = "my-plugin"; + envVars = []; // list required env vars here - async shutdown() { - // Clean up resources + injectRoutes(router: express.Router) { + this.route(router, { + name: "hello", + method: "get", + path: "/hello", + handler: async (_req, res) => { + res.json({ ok: true }); + }, + }); } } -export const myPlugin = toPlugin( +export const myPlugin = toPlugin, "my-plugin">( MyPlugin, - "myPlugin" + "my-plugin", ); ``` -**Key extension points:** +### Key extension points + - **Route injection**: Implement `injectRoutes()` to add custom endpoints using [`IAppRouter`](api/appkit/TypeAlias.IAppRouter.md) - **Lifecycle hooks**: Override `setup()`, `shutdown()`, and `validateEnv()` methods - **Shared services**: @@ -92,6 +251,38 @@ export const myPlugin = toPlugin( See the [`Plugin`](api/appkit/Class.Plugin.md) API reference for complete documentation. +## Caching + +AppKit provides both global and plugin-level caching capabilities. + +### Global cache configuration + +```ts +await createApp({ + plugins: [server(), analytics({})], + cache: { + enabled: true, + ttl: 3600, // seconds + strictPersistence: false, + }, +}); +``` + +Storage auto-selects **Lakebase persistent cache when healthy**, otherwise falls back to in-memory. + +### Plugin-level caching + +Inside a Plugin subclass: + +```ts +const value = await this.cache.getOrExecute( + ["my-plugin", "data", userId], + async () => expensiveWork(), + userKey, + { ttl: 300 }, +); +``` + ## Plugin phases Plugins initialize in three phases: diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 5aa932e7..cc93a3ab 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -3,6 +3,7 @@ import path from "node:path"; import type { Config } from "@docusaurus/types"; import type * as Preset from "@docusaurus/preset-classic"; import webpack from "webpack"; +import type { PluginOptions } from "@signalwire/docusaurus-plugin-llms-txt/public"; function appKitAliasPlugin() { return { @@ -123,6 +124,7 @@ const config: Config = { flattenOutputFiles: true, expandObjects: true, expandParameters: true, + disableSources: true, sidebar: { autoConfiguration: true, pretty: true, @@ -131,6 +133,35 @@ const config: Config = { }, ], appKitAliasPlugin, + [ + "@signalwire/docusaurus-plugin-llms-txt", + // docs: https://github.com/signalwire/docusaurus-plugins/blob/main/packages/docusaurus-plugin-llms-txt/README.md + { + id: "appkit", + markdown: { + enableFiles: true, + relativePaths: true, + includeDocs: true, + includeVersionedDocs: false, + includeBlog: false, + includePages: false, + includeGeneratedIndex: true, + }, + llmsTxt: { + siteTitle: "AppKit", + siteDescription: + "Node.js + React SDK for Databricks Apps. Built for humans and AI.", + enableLlmsFullTxt: true, + }, + ui: { + copyPageContent: { + display: { + docs: true, + }, + }, + }, + } satisfies PluginOptions, + ], ], themeConfig: { diff --git a/docs/package.json b/docs/package.json index 9bdca8f3..658df190 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,6 +24,7 @@ "@docusaurus/preset-classic": "3.9.2", "@docusaurus/theme-mermaid": "^3.9.2", "@mdx-js/react": "^3.0.0", + "@signalwire/docusaurus-plugin-llms-txt": "2.0.0-alpha.7", "@tailwindcss/postcss": "^4.1.18", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.6.0", diff --git a/docs/sidebars.ts b/docs/sidebars.ts index c295ed38..20821d4b 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -88,7 +88,17 @@ const sidebars: SidebarsConfig = { items: [ { type: "autogenerated", - dirName: "api/appkit-ui/components", + dirName: "api/appkit-ui/ui", + }, + ], + }, + { + type: "category", + label: "Data Components", + items: [ + { + type: "autogenerated", + dirName: "api/appkit-ui/data", }, ], }, diff --git a/docs/src/components/DocExample/examples.gen.ts b/docs/src/components/DocExample/examples.gen.ts index 3f363219..88f8cf7a 100644 --- a/docs/src/components/DocExample/examples.gen.ts +++ b/docs/src/components/DocExample/examples.gen.ts @@ -3,9 +3,11 @@ import type { ComponentType } from "react"; import AccordionExample from "../../../../packages/appkit-ui/src/react/ui/examples/accordion.example"; import AlertDialogExample from "../../../../packages/appkit-ui/src/react/ui/examples/alert-dialog.example"; import AlertExample from "../../../../packages/appkit-ui/src/react/ui/examples/alert.example"; +import AreaExample from "../../../../packages/appkit-ui/src/react/charts/area/examples/area.example"; import AspectRatioExample from "../../../../packages/appkit-ui/src/react/ui/examples/aspect-ratio.example"; import AvatarExample from "../../../../packages/appkit-ui/src/react/ui/examples/avatar.example"; import BadgeExample from "../../../../packages/appkit-ui/src/react/ui/examples/badge.example"; +import BarExample from "../../../../packages/appkit-ui/src/react/charts/bar/examples/bar.example"; import BreadcrumbExample from "../../../../packages/appkit-ui/src/react/ui/examples/breadcrumb.example"; import ButtonExample from "../../../../packages/appkit-ui/src/react/ui/examples/button.example"; import CalendarExample from "../../../../packages/appkit-ui/src/react/ui/examples/calendar.example"; @@ -15,20 +17,27 @@ import CheckboxExample from "../../../../packages/appkit-ui/src/react/ui/example import CollapsibleExample from "../../../../packages/appkit-ui/src/react/ui/examples/collapsible.example"; import CommandExample from "../../../../packages/appkit-ui/src/react/ui/examples/command.example"; import ContextMenuExample from "../../../../packages/appkit-ui/src/react/ui/examples/context-menu.example"; +import DataTableExample from "../../../../packages/appkit-ui/src/react/table/examples/data-table.example"; import DialogExample from "../../../../packages/appkit-ui/src/react/ui/examples/dialog.example"; +import DonutExample from "../../../../packages/appkit-ui/src/react/charts/pie/examples/donut.example"; import DrawerExample from "../../../../packages/appkit-ui/src/react/ui/examples/drawer.example"; import DropdownMenuExample from "../../../../packages/appkit-ui/src/react/ui/examples/dropdown-menu.example"; +import HeatmapExample from "../../../../packages/appkit-ui/src/react/charts/heatmap/examples/heatmap.example"; import HoverCardExample from "../../../../packages/appkit-ui/src/react/ui/examples/hover-card.example"; import InputOtpExample from "../../../../packages/appkit-ui/src/react/ui/examples/input-otp.example"; import InputExample from "../../../../packages/appkit-ui/src/react/ui/examples/input.example"; import LabelExample from "../../../../packages/appkit-ui/src/react/ui/examples/label.example"; +import LineExample from "../../../../packages/appkit-ui/src/react/charts/line/examples/line.example"; import MenubarExample from "../../../../packages/appkit-ui/src/react/ui/examples/menubar.example"; import NavigationMenuExample from "../../../../packages/appkit-ui/src/react/ui/examples/navigation-menu.example"; import PaginationExample from "../../../../packages/appkit-ui/src/react/ui/examples/pagination.example"; +import PieExample from "../../../../packages/appkit-ui/src/react/charts/pie/examples/pie.example"; import PopoverExample from "../../../../packages/appkit-ui/src/react/ui/examples/popover.example"; import ProgressExample from "../../../../packages/appkit-ui/src/react/ui/examples/progress.example"; +import RadarExample from "../../../../packages/appkit-ui/src/react/charts/radar/examples/radar.example"; import RadioGroupExample from "../../../../packages/appkit-ui/src/react/ui/examples/radio-group.example"; import ResizableExample from "../../../../packages/appkit-ui/src/react/ui/examples/resizable.example"; +import ScatterExample from "../../../../packages/appkit-ui/src/react/charts/scatter/examples/scatter.example"; import ScrollAreaExample from "../../../../packages/appkit-ui/src/react/ui/examples/scroll-area.example"; import SelectExample from "../../../../packages/appkit-ui/src/react/ui/examples/select.example"; import SeparatorExample from "../../../../packages/appkit-ui/src/react/ui/examples/separator.example"; @@ -147,6 +156,33 @@ export default function AlertExample() { ) } +`, + }, + "area": { + Component: AreaExample, + source: `"use client"; + +import { AreaChart } from "@databricks/appkit-ui/react"; + +export default function AreaChartExample() { + return ( + + ); +} `, }, "aspect-ratio": { @@ -191,6 +227,30 @@ export default function AvatarExample() { export default function BadgeExample() { return Badge } +`, + }, + "bar": { + Component: BarExample, + source: `"use client"; + +import { BarChart } from "@databricks/appkit-ui/react"; + +export default function BarChartExample() { + return ( + + ); +} `, }, "breadcrumb": { @@ -600,6 +660,25 @@ export default function ContextMenuExample() { ) } +`, + }, + "data-table": { + Component: DataTableExample, + source: `"use client"; + +import { DataTable } from "@databricks/appkit-ui/react"; + +export default function DataTableExample() { + return ( + + ); +} `, }, "dialog": { @@ -659,6 +738,27 @@ export default function DialogExample() { ) } +`, + }, + "donut": { + Component: DonutExample, + source: `"use client"; + +import { DonutChart } from "@databricks/appkit-ui/react"; + +export default function DonutChartExample() { + return ( + + ); +} `, }, "drawer": { @@ -923,6 +1023,39 @@ export default function DropdownMenuExample() { ) } +`, + }, + "heatmap": { + Component: HeatmapExample, + source: `"use client"; + +import { HeatmapChart } from "@databricks/appkit-ui/react"; + +export default function HeatmapChartExample() { + const data = []; + const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; + const hours = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"]; + + for (const day of days) { + for (const hour of hours) { + data.push({ + day, + hour, + count: Math.floor(Math.random() * 100), + }); + } + } + + return ( + + ); +} `, }, "hover-card": { @@ -1021,6 +1154,32 @@ export default function LabelExample() { ) } +`, + }, + "line": { + Component: LineExample, + source: `"use client"; + +import { LineChart } from "@databricks/appkit-ui/react"; + +export default function LineChartExample() { + return ( + + ); +} `, }, "menubar": { @@ -1319,6 +1478,27 @@ export default function PaginationExample() { ) } +`, + }, + "pie": { + Component: PieExample, + source: `"use client"; + +import { PieChart } from "@databricks/appkit-ui/react"; + +export default function PieChartExample() { + return ( + + ); +} `, }, "popover": { @@ -1405,6 +1585,31 @@ export default function ProgressExample() { return } +`, + }, + "radar": { + Component: RadarExample, + source: `"use client"; + +import { RadarChart } from "@databricks/appkit-ui/react"; + +export default function RadarChartExample() { + return ( + + ); +} `, }, "radio-group": { @@ -1469,6 +1674,33 @@ export default function ResizableExample() { ) } +`, + }, + "scatter": { + Component: ScatterExample, + source: `"use client"; + +import { ScatterChart } from "@databricks/appkit-ui/react"; + +export default function ScatterChartExample() { + return ( + + ); +} `, }, "scroll-area": { diff --git a/docs/static/appkit-ui/styles.gen.css b/docs/static/appkit-ui/styles.gen.css index 336bd67e..e497c06a 100644 --- a/docs/static/appkit-ui/styles.gen.css +++ b/docs/static/appkit-ui/styles.gen.css @@ -24,6 +24,8 @@ --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-7xl: 4.5rem; @@ -1455,6 +1457,10 @@ .font-sans { font-family: var(--font-sans); } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); @@ -1653,6 +1659,10 @@ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .ring-0 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); diff --git a/llms.txt b/llms.txt deleted file mode 100644 index b6484135..00000000 --- a/llms.txt +++ /dev/null @@ -1,1231 +0,0 @@ -# llms.txt — LLM Guide for Building Great Databricks Apps with AppKit -Project: Databricks AppKit - -This document is written *for LLMs* generating code in a brand-new project folder that installs AppKit from npm. It is intentionally prescriptive. - -## High-level mission - -Build **full-stack TypeScript apps** on Databricks using: - -- **Backend**: `@databricks/appkit` -- **Frontend**: `@databricks/appkit-ui` -- **Analytics**: SQL files in `config/queries/*.sql` executed via the AppKit analytics plugin - -This file is designed to work even when you *do not* have access to the AppKit source repo. Prefer only public package APIs and portable project structures. - -## Hard rules (LLM guardrails) - -- **Do not invent APIs**. If unsure, stick to the patterns shown in this file and only documented exports from `@databricks/appkit` and `@databricks/appkit-ui`. -- **`createApp()` is async**. Prefer **top-level `await createApp(...)`**. If you can’t, use `void createApp(...)` and do not ignore promise rejection. -- **Always memoize query parameters** passed to `useAnalyticsQuery` / charts to avoid refetch loops. -- **Always handle loading/error/empty states** in UI (use `Skeleton`, error text, empty state). -- **Always use `sql.*` helpers** for query parameters (do not pass raw strings/numbers unless the query expects none). -- **Never construct SQL strings dynamically**. Use parameterized queries with `:paramName`. -- **Never use `require()`**. Use ESM `import/export`. - -## TypeScript import rules (when using `verbatimModuleSyntax`) - -If your `tsconfig.json` uses `"verbatimModuleSyntax": true`, **always use `import type` for type-only imports** (otherwise builds can fail in strict setups): - -```ts -import type { ReactNode } from "react"; -import { useMemo } from "react"; -``` - -## Canonical project layout - -Recommended structure (client/server split): - -``` -my-app/ -├── server/ -│ ├── index.ts # backend entry point (AppKit) -│ └── .env # optional local dev env vars (do not commit) -├── client/ -│ ├── index.html -│ ├── vite.config.ts -│ └── src/ -│ ├── main.tsx -│ └── App.tsx -├── config/ -│ └── queries/ -│ └── my_query.sql -├── app.yaml -├── package.json -└── tsconfig.json -``` - -Why this layout: - -- The AppKit `server()` plugin automatically serves: - - **Dev**: Vite dev server (HMR) from `client/` - - **Prod**: static files from `client/dist` (built by Vite) - -## Project scaffolding (start here) - -### `package.json` - -```json -{ - "name": "my-app", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "NODE_ENV=development tsx watch server/index.ts", - "build": "npm run build:server && npm run build:client", - "build:server": "tsdown --out-dir build server/index.ts", - "build:client": "tsc -b && vite build --config client/vite.config.ts", - "start": "node build/index.mjs" - }, - "dependencies": { - "@databricks/appkit": "^0.1.2" - "@databricks/appkit-ui": "^0.1.2", - "react": "^19.2.3", - "react-dom": "^19.2.3" - }, - "devDependencies": { - "@types/node": "^20.0.0", - "@types/react": "^19.0.0", - "@types/react-dom": "^19.0.0", - "@vitejs/plugin-react": "^5.1.1", - "tsdown": "^0.15.7", - "tsx": "^4.19.0", - "typescript": "~5.6.0", - "vite": "^7.2.4" - } -} -``` - -### `client/index.html` - -```html - - - - - - My App - - -
- - - -``` - -### `client/src/main.tsx` - -```tsx -import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; -import App from "./App"; - -createRoot(document.getElementById("root")!).render( - - - , -); -``` - -### `client/src/App.tsx` (minimal) - -```tsx -export default function App() { - return ( -
-

My App

-
- ); -} -``` - -### `client/vite.config.ts` - -```ts -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; - -export default defineConfig({ - plugins: [react()], -}); -``` - -### `tsconfig.json` - -```json -{ - "compilerOptions": { - "target": "ES2022", - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "module": "ESNext", - "moduleResolution": "bundler", - "jsx": "react-jsx", - "strict": true, - "skipLibCheck": true, - "noEmit": true, - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true - }, - "include": ["server", "client/src"] -} -``` - -### `server/index.ts` - -```ts -import { createApp, server } from "@databricks/appkit"; - -await createApp({ - plugins: [server()], -}); -``` - -### Running the app - -```bash -# Install dependencies -npm install - -# Development (starts backend + Vite dev server) -npm run dev - -# Production build -npm run build -npm start -``` - -## Integrating into an existing app - -If you already have a React/Vite app and want to add AppKit: - -### 1. Install dependencies - -```bash -npm install @databricks/appkit @databricks/appkit-ui react react-dom -npm install -D tsx tsdown vite @vitejs/plugin-react typescript - -# If you don't already have a client/ folder, create one and move your Vite app into it: -# - move index.html -> client/index.html -# - move vite.config.ts -> client/vite.config.ts -# - move src/ -> client/src/ -# -``` - -### 2. Create `server/index.ts` (new file) - -```ts -import { createApp, server } from "@databricks/appkit"; - -await createApp({ - plugins: [server()], -}); -``` - -### 3. Update `package.json` scripts - -```json -{ - "scripts": { - "dev": "NODE_ENV=development tsx watch server/index.ts", - "build": "npm run build:server && npm run build:client", - "build:server": "tsdown --out-dir build server/index.ts", - "build:client": "tsc -b && vite build --config client/vite.config.ts", - "start": "node build/index.mjs" - } -} -``` - -### 4. That's it - -- AppKit's server plugin will automatically serve your Vite app in dev mode and `client/dist` in production. -- If your Vite app must stay at the repo root (no `client/` folder), AppKit can still work, but the recommended layout is `client/` + `server/`. - -### Adding analytics to an existing app - -```ts -// server/index.ts -import { createApp, server, analytics } from "@databricks/appkit"; - -await createApp({ - plugins: [server(), analytics()], -}); -``` - -Then create `config/queries/` and add your `.sql` files. - -## Environment variables - -### Required for Databricks Apps deployment - -These are typically **provided by Databricks Apps runtime** (exact set can vary by platform/version): - -| Variable | Description | -|----------|-------------| -| `DATABRICKS_HOST` | Workspace URL (e.g. `https://xxx.cloud.databricks.com`) | -| `DATABRICKS_APP_PORT` | Port to bind (default: `8000`) | -| `DATABRICKS_APP_NAME` | App name in Databricks | - -### Required for SQL queries (analytics plugin) - -| Variable | Description | How to set | -|----------|-------------|------------| -| `DATABRICKS_WAREHOUSE_ID` | SQL warehouse ID | In `app.yaml`: `valueFrom: sql-warehouse` | - -### Optional - -| Variable | Description | Default | -|----------|-------------|---------| -| `DATABRICKS_WORKSPACE_ID` | Workspace ID | Auto-fetched from API | -| `NODE_ENV` | `"development"` or `"production"` | — | -| `FLASK_RUN_HOST` | Host to bind | `0.0.0.0` | - -### Local development - -For local development, you need to authenticate with Databricks. Options: - -**Option 1: Databricks CLI Auth (recommended)** - -```bash -# Configure once -databricks auth login --host [host] --profile [profile-name] - -# If you used `DEFAULT` as the profile name then you can just run - -`npm run dev` - -# To run with a specific profile -DATABRICKS_CONFIG_PROFILE=my-profile npm run dev -# If your Databricks SDK expects a different variable name, try: -# DATABRICKS_PROFILE=my-profile npm run dev -``` - -**Option 2: Environment variables** - -```bash -export DATABRICKS_HOST="https://xxx.cloud.databricks.com" -export DATABRICKS_TOKEN="dapi..." -export DATABRICKS_WAREHOUSE_ID="abc123..." -npm run dev -``` - -**Option 3: `.env` file (auto-loaded by AppKit)** - -```bash -# .env (add to .gitignore!) -DATABRICKS_HOST=https://xxx.cloud.databricks.com -DATABRICKS_TOKEN=dapi... -DATABRICKS_WAREHOUSE_ID=abc123... -``` - -### Telemetry (optional) - -| Variable | Description | -|----------|-------------| -| `OTEL_EXPORTER_OTLP_ENDPOINT` | OpenTelemetry collector endpoint | -| `OTEL_SERVICE_NAME` | Service name for traces | - -## Backend: `@databricks/appkit` - -### Minimal server (golden template) - -The smallest valid AppKit server: - -```ts -// server/index.ts -import { createApp, server } from "@databricks/appkit"; - -await createApp({ - plugins: [server()], -}); -``` - -### Server plugin (`server()`) - -What it does: - -- Starts an Express server (default `host=0.0.0.0`, `port=8000`) -- Mounts plugin routes under `/api//...` -- Adds `/health` (returns `{ status: "ok" }`) -- Serves frontend: - - **Development** (`NODE_ENV=development`): runs a Vite dev server in middleware mode - - **Production**: auto-detects static frontend directory (checks `dist`, `client/dist`, `build`, `public`, `out`) - -Config (real options): - -```ts -import { createApp, server } from "@databricks/appkit"; - -await createApp({ - plugins: [ - server({ - port: 8000, // default: Number(process.env.DATABRICKS_APP_PORT) || 8000 - host: "0.0.0.0", // default: process.env.FLASK_RUN_HOST || "0.0.0.0" - autoStart: true, // default: true - staticPath: "dist", // optional: force a specific static directory - }), - ], -}); -``` - -Manual server start (when you need to `.extend()` Express): - -```ts -import { createApp, server } from "@databricks/appkit"; - -const appkit = await createApp({ - plugins: [server({ autoStart: false })], -}); - -appkit.server.extend((app) => { - app.get("/custom", (_req, res) => res.json({ ok: true })); -}); - -await appkit.server.start(); -``` - -### Analytics plugin (`analytics()`) - -Add SQL query execution backed by Databricks SQL Warehouses. - -```ts -import { analytics, createApp, server } from "@databricks/appkit"; - -await createApp({ - plugins: [server(), analytics({})], -}); -``` - -Where queries live: - -- Put `.sql` files in `config/queries/`. -- Query key is the filename without `.sql` (e.g. `spend_summary.sql` → `"spend_summary"`). - -SQL parameters: - -- Use `:paramName` placeholders. -- Optionally annotate parameter types using SQL comments: - -```sql --- @param startDate DATE --- @param endDate DATE --- @param limit NUMERIC -SELECT ... -WHERE usage_date BETWEEN :startDate AND :endDate -LIMIT :limit -``` - -Supported `-- @param` types (case-insensitive): - -- `STRING`, `NUMERIC`, `BOOLEAN`, `DATE`, `TIMESTAMP`, `BINARY` - -Server-injected params (important): - -- `:workspaceId` is **injected by the server** and **must not** be annotated. -- Example: - -```sql -WHERE workspace_id = :workspaceId -``` - -HTTP endpoints exposed (mounted under `/api/analytics`): - -- `POST /api/analytics/query/:query_key` -- `POST /api/analytics/users/me/query/:query_key` -- `GET /api/analytics/arrow-result/:jobId` -- `GET /api/analytics/users/me/arrow-result/:jobId` - -Formats: - -- `format: "JSON"` (default) returns JSON rows -- `format: "ARROW"` returns an Arrow “statement_id” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId` - -### Execution context and `asUser(req)` - -AppKit manages Databricks authentication via two contexts: - -- **ServiceContext** (singleton): Initialized at app startup with service principal credentials -- **ExecutionContext**: Determined at runtime - either service principal or user context - -**Headers used for user context:** - -- `x-forwarded-user`: required in production; identifies the user -- `x-forwarded-access-token`: required for user token passthrough - -**Using `asUser(req)` for user-scoped operations:** - -The `asUser(req)` pattern allows plugins to execute operations using the requesting user's credentials: - -```ts -// In a custom plugin route handler -router.post("/users/me/data", async (req, res) => { - // Execute as the user (uses their Databricks permissions) - const result = await this.asUser(req).query("SELECT ..."); - res.json(result); -}); - -// Service principal execution (default) -router.post("/system/data", async (req, res) => { - const result = await this.query("SELECT ..."); - res.json(result); -}); -``` - -**Context helper functions (exported from `@databricks/appkit`):** - -- `getExecutionContext()`: Returns current context (user or service) -- `getCurrentUserId()`: Returns user ID in user context, service user ID otherwise -- `getWorkspaceClient()`: Returns the appropriate WorkspaceClient for current context -- `getWarehouseId()`: `Promise` (from `DATABRICKS_WAREHOUSE_ID` or auto-selected in dev) -- `getWorkspaceId()`: `Promise` (from `DATABRICKS_WORKSPACE_ID` or fetched) -- `isInUserContext()`: Returns `true` if currently executing in user context - -**Development mode behavior:** - -In local development (`NODE_ENV=development`), if `asUser(req)` is called without a user token, it logs a warning and falls back to the service principal. - -### Custom plugins (backend) - -If you need custom API routes or background logic, implement an AppKit plugin. - -```ts -import { Plugin, toPlugin } from "@databricks/appkit"; -import type express from "express"; - -class MyPlugin extends Plugin { - name = "my-plugin"; - envVars = []; // list required env vars here - - injectRoutes(router: express.Router) { - this.route(router, { - name: "hello", - method: "get", - path: "/hello", - handler: async (_req, res) => { - res.json({ ok: true }); - }, - }); - } -} - -export const myPlugin = toPlugin, "my-plugin">( - MyPlugin, - "my-plugin", -); -``` - -### Caching (global + plugin-level) - -Global: - -```ts -await createApp({ - plugins: [server(), analytics({})], - cache: { - enabled: true, - ttl: 3600, // seconds - strictPersistence: false, - }, -}); -``` - -- Storage auto-selects **Lakebase persistent cache when healthy**, otherwise falls back to in-memory. - -Plugin-level: - -```ts -// inside a Plugin subclass: -const value = await this.cache.getOrExecute( - ["my-plugin", "data", userId], - async () => expensiveWork(), - userKey, - { ttl: 300 }, -); -``` - -## Frontend: `@databricks/appkit-ui` - -### Imports - -- React-facing APIs: `@databricks/appkit-ui/react` -- Non-React utilities (sql markers, arrow, SSE): `@databricks/appkit-ui/js` - -```tsx -import { useAnalyticsQuery, Card, Skeleton } from "@databricks/appkit-ui/react"; -import { sql } from "@databricks/appkit-ui/js"; -``` - -### `useAnalyticsQuery(queryKey, parameters, options?)` - -Facts: - -- Uses **SSE** under the hood (not `fetch()` polling). -- By default it hits `POST /api/analytics/query/:queryKey`. -- Returns `{ data, loading, error }` where `data` is `null` until loaded. -- `format` is `"JSON"` or `"ARROW"` (uppercase). - -When to use it: - -- Use `useAnalyticsQuery` **only** when you need a custom UI (cards/KPIs/forms/conditional rendering). -- If you just need a standard chart or table, prefer the built-in components (`BarChart`, `LineChart`, `DataTable`, etc.) so you don’t re-implement loading/error/empty states. - -Limitations (common LLM pitfall): - -- There is **no `enabled` option**. Use conditional rendering to mount/unmount the component. -- There is **no `refetch()`**. Change `parameters` (memoized) or re-mount to re-run the query. - -Recommended usage pattern (memoized params + explicit states): - -```tsx -import { useMemo } from "react"; -import { useAnalyticsQuery, Skeleton } from "@databricks/appkit-ui/react"; -import { sql } from "@databricks/appkit-ui/js"; - -export function Users() { - const params = useMemo( - () => ({ - status: sql.string("active"), - limit: sql.number(50), - }), - [], - ); - - const { data, loading, error } = useAnalyticsQuery("users_list", params); - - if (loading) return ; - if (error) return
Error: {error}
; - if (!data || data.length === 0) return
No results
; - - return 
{JSON.stringify(data[0], null, 2)}
; -} -``` - -Options: - -- `format?: "JSON" | "ARROW"` (default `"JSON"`) -- `autoStart?: boolean` (default `true`) -- `maxParametersSize?: number` (default `100 * 1024` bytes) - -### `useChartData({ queryKey, parameters, format, transformer })` - -- `format` here is **lowercase**: `"json" | "arrow" | "auto"` (default `"auto"`) -- Auto-selection heuristics: - - If `parameters._preferArrow === true` → Arrow - - If `parameters._preferJson === true` → JSON - - If `parameters.limit` is a number > 500 → Arrow - - If `parameters.startDate` and `parameters.endDate` exist → Arrow - -### Charts (unified query/data API) - -All charts support: - -- **Query mode**: `queryKey` + `parameters` -- **Data mode**: `data` (inline JSON, no server) - -Available chart components: - -- `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `DonutChart`, `HeatmapChart`, `ScatterChart`, `RadarChart` - -Avoid double-fetching: - -```tsx -// ❌ Wrong: fetches the same query twice -// const { data } = useAnalyticsQuery("spend_data", params); -// return ; - -// ✅ Correct: let the chart fetch -return ; -``` - -Query mode (recommended for Databricks-backed analytics): - -```tsx -import { LineChart } from "@databricks/appkit-ui/react"; -import { sql } from "@databricks/appkit-ui/js"; -import { useMemo } from "react"; - -export function SpendChart() { - const params = useMemo( - () => ({ - startDate: sql.date("2024-01-01"), - endDate: sql.date("2024-12-31"), - aggregationLevel: sql.string("day"), - }), - [], - ); - - return ( - - ); -} -``` - -**Chart props reference (important):** - -Charts are **self-contained ECharts components**. Configure via props, NOT children: - -```tsx -// ✅ Correct: use props for customization - - - -``` - -**❌ CRITICAL: Charts do NOT accept Recharts children** - -```tsx -// ❌ WRONG - AppKit charts are NOT Recharts wrappers -import { BarChart } from "@databricks/appkit-ui/react"; -import { Bar, XAxis, YAxis, CartesianGrid } from "recharts"; - - - // ❌ This will cause TypeScript errors - // ❌ Not supported - // ❌ Not supported - - -// ✅ CORRECT - use props instead - -``` - -### SQL helpers (`sql.*`) - -Use these to build typed parameters (they return marker objects: `{ __sql_type, value }`): - -- `sql.string(value)` → STRING (accepts string|number|boolean) -- `sql.number(value)` → NUMERIC (accepts number|string) -- `sql.boolean(value)` → BOOLEAN (accepts boolean|string("true"/"false")|number(1/0)) -- `sql.date(value)` → DATE (accepts Date or `"YYYY-MM-DD"`) -- `sql.timestamp(value)` → TIMESTAMP (accepts Date, ISO string, or unix time) - -Binary parameters (important): - -- Databricks SQL Warehouse doesn't support `BINARY` as a parameter type. -- `sql.binary(value)` returns a **STRING marker containing hex**, so use `UNHEX(:param)` in SQL. -- `sql.binary` accepts `Uint8Array`, `ArrayBuffer`, or a hex string. - -### SQL result types (important) - -Databricks SQL JSON results can return some numeric-like fields (especially `DECIMAL`) as strings. If a field behaves like a string at runtime, convert explicitly: - -```ts -const value = Number(row.amount); -``` - -If you need more reliable numeric fidelity for large datasets, prefer `format: "ARROW"` and process Arrow on the client. - -### `connectSSE` (custom SSE connections) - -For custom streaming endpoints (not analytics), use the `connectSSE` utility: - -```tsx -import { connectSSE } from "@databricks/appkit-ui/js"; -import { useEffect, useState } from "react"; - -function useCustomStream(endpoint: string) { - const [messages, setMessages] = useState([]); - const [connected, setConnected] = useState(false); - - useEffect(() => { - const controller = new AbortController(); - - connectSSE({ - url: endpoint, - payload: { key: "value" }, // optional: makes it a POST - onMessage: async ({ data }) => { - setConnected(true); - setMessages((prev) => [...prev, data]); - }, - onError: (error) => { - console.error("SSE error:", error); - setConnected(false); - }, - signal: controller.signal, - maxRetries: 3, // default: 3 - retryDelay: 2000, // default: 2000ms (exponential backoff) - timeout: 300000, // default: 5 minutes - maxBufferSize: 1048576, // default: 1MB - }); - - return () => controller.abort(); - }, [endpoint]); - - return { messages, connected }; -} -``` - -Options: - -- `url`: SSE endpoint URL (required) -- `payload`: Optional request body (if provided, uses POST; otherwise GET) -- `onMessage({ id, data })`: Called for each SSE message -- `onError(error)`: Called on connection errors -- `signal`: AbortSignal to cancel the connection -- `lastEventId`: Resume from a specific event ID -- `maxRetries`: Max retry attempts (default: 3) -- `retryDelay`: Base delay between retries in ms (default: 2000) -- `timeout`: Connection timeout in ms (default: 300000) -- `maxBufferSize`: Max buffer size in bytes (default: 1MB) - -### `ArrowClient` (advanced Arrow processing) - -For low-level Arrow data handling: - -```tsx -import { ArrowClient } from "@databricks/appkit-ui/js"; - -// Process Arrow buffer -const table = await ArrowClient.processArrowBuffer(buffer); - -// Fetch and process Arrow data in one call -const table = await ArrowClient.fetchAndProcessArrow(url, headers); - -// Extract fields from table -const fields = ArrowClient.extractArrowFields(table); -// → [{ name: "date", type: ... }, { name: "value", type: ... }] - -// Extract columns as arrays -const columns = ArrowClient.extractArrowColumns(table); -// → { date: [...], value: [...] } - -// Extract chart data -const { xData, yDataMap } = ArrowClient.extractChartData(table, "date", ["value", "count"]); -// → { xData: [...], yDataMap: { value: [...], count: [...] } } - -// Auto-detect chart fields from Arrow table -const detected = ArrowClient.detectFieldsFromArrow(table); -// → { xField: "date", yFields: ["value"], chartType: "timeseries" } -``` - -### DataTable - -`DataTable` is a production-ready table integrated with `useAnalyticsQuery`. - -Key behaviors: - -- `parameters` is required (use `{}` if none) -- Supports opinionated mode (auto columns) and full-control mode (`children(table)`) - -```tsx -import { DataTable } from "@databricks/appkit-ui/react"; - -export function UsersTable() { - return ( - - ); -} -``` - -### UI components (primitives) - -AppKit-UI ships shadcn-style primitives. Import from `@databricks/appkit-ui/react`. - -Note: Exact exports can vary by AppKit-UI version. Prefer using IDE auto-import/autocomplete to confirm what your installed version exports. - -Radix constraint (common bug): - -- `SelectItem` cannot have `value=""`. Use a sentinel value like `"all"` or `"none"`. - -**Available components:** - -`Accordion`, `Alert`, `AlertDialog`, `AspectRatio`, `Avatar`, `Badge`, `Breadcrumb`, `Button`, `ButtonGroup`, `Calendar`, `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `Carousel`, `Checkbox`, `Collapsible`, `Command`, `ContextMenu`, `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `Drawer`, `DropdownMenu`, `Empty`, `Field`, `Form`, `HoverCard`, `Input`, `InputGroup`, `InputOtp`, `Item`, `Kbd`, `Label`, `Menubar`, `NavigationMenu`, `Pagination`, `Popover`, `Progress`, `RadioGroup`, `Resizable`, `ScrollArea`, `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `Separator`, `Sheet`, `Sidebar`, `Skeleton`, `Slider`, `Sonner`, `Spinner`, `Switch`, `Table`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Textarea`, `Toggle`, `ToggleGroup`, `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` - -### Card pattern - -```tsx -import { - Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, -} from "@databricks/appkit-ui/react"; - -function MetricCard({ title, value, description }: Props) { - return ( - - - {description} - {value} - - - {/* Optional content */} - - - {/* Optional footer */} - - - ); -} -``` - -### Select pattern - -```tsx -import { - Select, - SelectTrigger, - SelectValue, - SelectContent, - SelectItem, -} from "@databricks/appkit-ui/react"; - -function DateRangeSelect({ value, onChange }: Props) { - return ( - - ); -} -``` - -### Tabs pattern - -```tsx -import { Tabs, TabsList, TabsTrigger, TabsContent } from "@databricks/appkit-ui/react"; - -function Dashboard() { - return ( - - - Overview - Analytics - - -

Overview content

- - -

Analytics content

- - - ); -} -``` - -### Dialog pattern - -```tsx -import { - Dialog, - DialogTrigger, - DialogContent, - DialogHeader, - DialogTitle, - DialogDescription, - DialogFooter, - Button, -} from "@databricks/appkit-ui/react"; - -function ConfirmDialog() { - return ( - - - - - - - Confirm deletion - - This action cannot be undone. - - - - - - - - - ); -} -``` - -### TooltipProvider requirement - -If using tooltips anywhere in your app, wrap your root component with `TooltipProvider`: - -```tsx -import { TooltipProvider } from "@databricks/appkit-ui/react"; - -function App() { - return ( - - {/* Your app content */} - - ); -} -``` - -### Button variants - -```tsx -import { Button } from "@databricks/appkit-ui/react"; - - - - - - - -``` - -### Loading skeleton pattern - -```tsx -import { Card, CardHeader, Skeleton } from "@databricks/appkit-ui/react"; - -function LoadingCard() { - return ( - - - - - - - - ); -} -``` - -## Stylesheet - -In the main css file import the following - -```css -@import "@databricks/appkit-ui/styles.css"; -``` - -That will provide a default theme for the app using css variables. - -### Customizing theme (light/dark mode) - -- Full list of variables to customize the theme. - -```css -@import "@databricks/appkit-ui/styles.css"; - -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.141 0.005 285.823); - --card: oklch(1 0 0); - --card-foreground: oklch(0.141 0.005 285.823); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.141 0.005 285.823); - --primary: oklch(0.21 0.006 285.885); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.967 0.001 286.375); - --secondary-foreground: oklch(0.21 0.006 285.885); - --muted: oklch(0.967 0.001 286.375); - --muted-foreground: oklch(0.552 0.016 285.938); - --accent: oklch(0.967 0.001 286.375); - --accent-foreground: oklch(0.21 0.006 285.885); - --destructive: oklch(0.577 0.245 27.325); - --destructive-foreground: oklch(0.985 0 0); - --success: oklch(0.603 0.135 166.892); - --success-foreground: oklch(1 0 0); - --warning: oklch(0.795 0.157 78.748); - --warning-foreground: oklch(0.199 0.027 238.732); - --border: oklch(0.92 0.004 286.32); - --input: oklch(0.92 0.004 286.32); - --ring: oklch(0.705 0.015 286.067); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.141 0.005 285.823); - --sidebar-primary: oklch(0.21 0.006 285.885); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.967 0.001 286.375); - --sidebar-accent-foreground: oklch(0.21 0.006 285.885); - --sidebar-border: oklch(0.92 0.004 286.32); - --sidebar-ring: oklch(0.705 0.015 286.067); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: oklch(0.141 0.005 285.823); - --foreground: oklch(0.985 0 0); - --card: oklch(0.21 0.006 285.885); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.21 0.006 285.885); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.92 0.004 286.32); - --primary-foreground: oklch(0.21 0.006 285.885); - --secondary: oklch(0.274 0.006 286.033); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.274 0.006 286.033); - --muted-foreground: oklch(0.705 0.015 286.067); - --accent: oklch(0.274 0.006 286.033); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --destructive-foreground: oklch(0.985 0 0); - --success: oklch(0.67 0.12 167); - --success-foreground: oklch(1 0 0); - --warning: oklch(0.83 0.165 85); - --warning-foreground: oklch(0.199 0.027 238.732); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.552 0.016 285.938); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.21 0.006 285.885); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.274 0.006 286.033); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.552 0.016 285.938); - } -} - -``` - -- If any variable is changed, it must be changed for both light and dark mode. - -## Type generation (QueryRegistry + IntelliSense) - -Goal: generate `client/src/appKitTypes.d.ts` so query keys, params, and result rows are type-safe. - -### Vite plugin: `appKitTypesPlugin` - -Correct option names: - -- `outFile?: string` (default `src/appKitTypes.d.ts`) -- `watchFolders?: string[]` (default `["../config/queries"]`) - -```ts -// client/vite.config.ts -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import { appKitTypesPlugin } from "@databricks/appkit"; - -export default defineConfig({ - plugins: [ - react(), - appKitTypesPlugin({ - outFile: "src/appKitTypes.d.ts", - watchFolders: ["../config/queries"], - }), - ], -}); -``` - -Important nuance: - -- When the frontend is served through AppKit in dev mode, AppKit’s dev server already includes `appKitTypesPlugin()` internally. -- You still want it in your client build pipeline if you run `vite build` separately. - -### CLI: `appkit-generate-types` - -```bash -# Requires DATABRICKS_WAREHOUSE_ID (or pass as 3rd arg) -npx appkit-generate-types [rootDir] [outFile] [warehouseId] - -# Example: -npx appkit-generate-types . client/src/appKitTypes.d.ts - -# Force regeneration (skip cache): -npx appkit-generate-types --no-cache -``` - -## Databricks Apps config: `app.yaml` - -Bind a SQL warehouse for Apps runtime: - -```yaml -env: - - name: DATABRICKS_WAREHOUSE_ID - valueFrom: sql-warehouse -``` - -Full example with command: - -```yaml -command: - - node - - build/index.mjs -env: - - name: DATABRICKS_WAREHOUSE_ID - valueFrom: sql-warehouse -``` - -## LLM checklist (before you "finalize" code) - -- **Project setup** - - `package.json` has `"type": "module"` - - `tsx` is in devDependencies for dev server - - `dev` script uses `NODE_ENV=development tsx watch server/index.ts` - - `client/index.html` exists with `
` and script pointing to `client/src/main.tsx` - -- **Backend** - - `await createApp({ plugins: [...] })` is used (or `void createApp` with intent) - - `server()` is included (always) - - If using SQL: `analytics({})` included + `config/queries/*.sql` present - - Queries use `:param` placeholders, and params are passed from UI using `sql.*` - - If query needs workspace scoping: uses `:workspaceId` - -- **Frontend** - - `useMemo` wraps parameters objects - - Loading/error/empty states are explicit - - Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"` - - Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts) - - If using tooltips: root is wrapped with `` - -- **Never** - - Don't build SQL strings manually - - Don't pass untyped raw params for annotated queries - - Don't ignore `createApp()`'s promise - - Don't invent UI components not listed in this file - - Don't pass Recharts children (``, ``, etc.) to AppKit chart components - diff --git a/packages/appkit-ui/package.json b/packages/appkit-ui/package.json index eb2714fd..919fa023 100644 --- a/packages/appkit-ui/package.json +++ b/packages/appkit-ui/package.json @@ -11,8 +11,8 @@ "dist", "bin", "scripts", + "docs", "CLAUDE.md", - "AGENTS.md", "llms.txt", "README.md", "DCO", @@ -38,8 +38,8 @@ "build:watch": "tsdown --config tsdown.config.ts --watch", "clean:full": "rm -rf dist node_modules tmp", "clean": "rm -rf dist tmp", - "dist": "tsx ../../tools/dist.ts", - "tarball": "rm -rf tmp && tsx ../../tools/dist.ts && npm pack ./tmp --pack-destination ./tmp", + "dist": "pnpm --filter=docs build && tsx ../../tools/dist.ts", + "tarball": "rm -rf tmp && pnpm dist && npm pack ./tmp --pack-destination ./tmp", "typecheck": "tsc --noEmit" }, "dependencies": { diff --git a/packages/appkit-ui/src/js/arrow/arrow-client.ts b/packages/appkit-ui/src/js/arrow/arrow-client.ts index 0188b390..eeab947b 100644 --- a/packages/appkit-ui/src/js/arrow/arrow-client.ts +++ b/packages/appkit-ui/src/js/arrow/arrow-client.ts @@ -40,6 +40,19 @@ export class ArrowClient { } } + /** + * Fetches Arrow data from a URL and processes it into a Table. + * Convenience method that combines fetchArrow and processArrowBuffer. + * + * @param url - URL to fetch Arrow data from + * @param headers - Optional HTTP headers to include in the request + * @returns Promise resolving to an Arrow Table + * @example + * ```typescript + * const table = await ArrowClient.fetchAndProcessArrow('/api/data/arrow'); + * console.log(`Loaded ${table.numRows} rows`); + * ``` + */ static async fetchAndProcessArrow( url: string, headers?: Record, @@ -57,6 +70,17 @@ export class ArrowClient { } } + /** + * Extracts field metadata (name and type) from an Arrow Table. + * + * @param table - Arrow Table to extract fields from + * @returns Array of field metadata objects + * @example + * ```typescript + * const fields = ArrowClient.extractArrowFields(table); + * // [{ name: "date", type: Date32 }, { name: "value", type: Float64 }] + * ``` + */ static extractArrowFields(table: Table) { return table.schema.fields.map((field: Field) => { return { @@ -66,6 +90,18 @@ export class ArrowClient { }); } + /** + * Extracts all columns from an Arrow Table as JavaScript arrays. + * Each column is converted to a native JavaScript array. + * + * @param table - Arrow Table to extract columns from + * @returns Object mapping column names to arrays + * @example + * ```typescript + * const columns = ArrowClient.extractArrowColumns(table); + * // { date: ["2024-01-01", "2024-01-02"], value: [100, 200] } + * ``` + */ static extractArrowColumns(table: Table): Record { const cols: Record = {}; @@ -254,6 +290,18 @@ export class ArrowClient { }; } + /** + * Fetches raw Arrow IPC data from a URL. + * + * @param url - URL to fetch Arrow data from + * @param headers - Optional HTTP headers to include in the request + * @returns Promise resolving to the raw Arrow buffer as Uint8Array + * @example + * ```typescript + * const buffer = await ArrowClient.fetchArrow('/api/data/arrow'); + * const table = await ArrowClient.processArrowBuffer(buffer); + * ``` + */ static async fetchArrow( url: string, headers?: Record, diff --git a/packages/appkit-ui/src/react/charts/area/examples/area.example.tsx b/packages/appkit-ui/src/react/charts/area/examples/area.example.tsx new file mode 100644 index 00000000..162cf34f --- /dev/null +++ b/packages/appkit-ui/src/react/charts/area/examples/area.example.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { AreaChart } from "@databricks/appkit-ui/react"; + +export default function AreaChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/area/index.tsx b/packages/appkit-ui/src/react/charts/area/index.tsx index f6a949a0..7e71a775 100644 --- a/packages/appkit-ui/src/react/charts/area/index.tsx +++ b/packages/appkit-ui/src/react/charts/area/index.tsx @@ -1,25 +1,28 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { AreaChartProps } from "../types"; /** - * Area Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Area Chart component for trend visualization with filled areas. * - * @example Simple usage - * ```tsx - * - * ``` + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. * - * @example Stacked area chart - * ```tsx - * - * ``` + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const AreaChart = createChart("area", "AreaChart"); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Area Chart component for trend visualization with filled areas. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function AreaChartDoc(props: AreaChartProps): JSX.Element { + return AreaChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/bar/examples/bar.example.tsx b/packages/appkit-ui/src/react/charts/bar/examples/bar.example.tsx new file mode 100644 index 00000000..7af68fbe --- /dev/null +++ b/packages/appkit-ui/src/react/charts/bar/examples/bar.example.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { BarChart } from "@databricks/appkit-ui/react"; + +export default function BarChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/bar/index.tsx b/packages/appkit-ui/src/react/charts/bar/index.tsx index 5b21dde1..ca9c8ab6 100644 --- a/packages/appkit-ui/src/react/charts/bar/index.tsx +++ b/packages/appkit-ui/src/react/charts/bar/index.tsx @@ -1,35 +1,28 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { BarChartProps } from "../types"; /** - * Bar Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Bar Chart component for categorical comparisons. * - * @example Query mode with auto format selection - * ```tsx - * - * ``` + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. * - * @example Query mode with explicit Arrow format - * ```tsx - * - * ``` + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. * - * @example Data mode with JSON array - * ```tsx - * - * ``` + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const BarChart = createChart("bar", "BarChart"); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Bar Chart component for categorical comparisons. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function BarChartDoc(props: BarChartProps): JSX.Element { + return BarChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/heatmap/examples/heatmap.example.tsx b/packages/appkit-ui/src/react/charts/heatmap/examples/heatmap.example.tsx new file mode 100644 index 00000000..762bec05 --- /dev/null +++ b/packages/appkit-ui/src/react/charts/heatmap/examples/heatmap.example.tsx @@ -0,0 +1,29 @@ +"use client"; + +import { HeatmapChart } from "@databricks/appkit-ui/react"; + +export default function HeatmapChartExample() { + const data = []; + const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; + const hours = ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"]; + + for (const day of days) { + for (const hour of hours) { + data.push({ + day, + hour, + count: Math.floor(Math.random() * 100), + }); + } + } + + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/heatmap/index.tsx b/packages/appkit-ui/src/react/charts/heatmap/index.tsx index 6602c6bc..457e6aba 100644 --- a/packages/appkit-ui/src/react/charts/heatmap/index.tsx +++ b/packages/appkit-ui/src/react/charts/heatmap/index.tsx @@ -1,37 +1,41 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { HeatmapChartProps } from "../types"; /** - * Heatmap Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Heatmap Chart component for matrix-style data visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. * * Data should be in "long format" with three fields: * - xKey: X-axis category (columns) * - yAxisKey: Y-axis category (rows) * - yKey: The numeric value for each cell * - * @example Simple usage - * ```tsx - * - * ``` - * - * @example With custom color scale - * ```tsx - * - * ``` + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const HeatmapChart = createChart( "heatmap", "HeatmapChart", ); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Heatmap Chart component for matrix-style data visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Data should be in "long format" with three fields: + * - xKey: X-axis category (columns) + * - yAxisKey: Y-axis category (rows) + * - yKey: The numeric value for each cell + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function HeatmapChartDoc(props: HeatmapChartProps): JSX.Element { + return HeatmapChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/line/examples/line.example.tsx b/packages/appkit-ui/src/react/charts/line/examples/line.example.tsx new file mode 100644 index 00000000..ea64ff8d --- /dev/null +++ b/packages/appkit-ui/src/react/charts/line/examples/line.example.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { LineChart } from "@databricks/appkit-ui/react"; + +export default function LineChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/line/index.tsx b/packages/appkit-ui/src/react/charts/line/index.tsx index fb82558d..e9d86ed5 100644 --- a/packages/appkit-ui/src/react/charts/line/index.tsx +++ b/packages/appkit-ui/src/react/charts/line/index.tsx @@ -1,26 +1,28 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { LineChartProps } from "../types"; /** - * Line Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Line Chart component for time-series and trend visualization. * - * @example Simple usage - * ```tsx - * - * ``` + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. * - * @example With custom styling - * ```tsx - * - * ``` + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const LineChart = createChart("line", "LineChart"); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Line Chart component for time-series and trend visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function LineChartDoc(props: LineChartProps): JSX.Element { + return LineChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/pie/examples/donut.example.tsx b/packages/appkit-ui/src/react/charts/pie/examples/donut.example.tsx new file mode 100644 index 00000000..462ae9c0 --- /dev/null +++ b/packages/appkit-ui/src/react/charts/pie/examples/donut.example.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { DonutChart } from "@databricks/appkit-ui/react"; + +export default function DonutChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/pie/examples/pie.example.tsx b/packages/appkit-ui/src/react/charts/pie/examples/pie.example.tsx new file mode 100644 index 00000000..f99ac430 --- /dev/null +++ b/packages/appkit-ui/src/react/charts/pie/examples/pie.example.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { PieChart } from "@databricks/appkit-ui/react"; + +export default function PieChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/pie/index.tsx b/packages/appkit-ui/src/react/charts/pie/index.tsx index be0a7b37..ca68d818 100644 --- a/packages/appkit-ui/src/react/charts/pie/index.tsx +++ b/packages/appkit-ui/src/react/charts/pie/index.tsx @@ -1,47 +1,52 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { DonutChartProps, PieChartProps } from "../types"; /** - * Pie Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. - * - * @example Simple usage - * ```tsx - * - * ``` - * - * @example With custom labels - * ```tsx - * - * ``` + * Pie Chart component for proportional data visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const PieChart = createChart("pie", "PieChart"); /** * Donut Chart component (Pie chart with inner radius). - * Supports both JSON and Arrow data formats with automatic format selection. - * - * @example Simple usage - * ```tsx - * - * ``` - * - * @example Custom inner radius - * ```tsx - * - * ``` + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const DonutChart = createChart("donut", "DonutChart"); + +// Type-only definitions for documentation generation (not used at runtime) +/** + * Pie Chart component for proportional data visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function PieChartDoc(props: PieChartProps): JSX.Element { + return PieChart(props); +} + +/** + * Donut Chart component (Pie chart with inner radius). + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function DonutChartDoc(props: DonutChartProps): JSX.Element { + return DonutChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/radar/examples/radar.example.tsx b/packages/appkit-ui/src/react/charts/radar/examples/radar.example.tsx new file mode 100644 index 00000000..172a48f1 --- /dev/null +++ b/packages/appkit-ui/src/react/charts/radar/examples/radar.example.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { RadarChart } from "@databricks/appkit-ui/react"; + +export default function RadarChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/radar/index.tsx b/packages/appkit-ui/src/react/charts/radar/index.tsx index ecd7be4e..db84b9fd 100644 --- a/packages/appkit-ui/src/react/charts/radar/index.tsx +++ b/packages/appkit-ui/src/react/charts/radar/index.tsx @@ -1,24 +1,28 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { RadarChartProps } from "../types"; /** - * Radar Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Radar Chart component for multi-dimensional data comparison. * - * @example Simple usage - * ```tsx - * - * ``` + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. * - * @example With custom styling - * ```tsx - * - * ``` + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const RadarChart = createChart("radar", "RadarChart"); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Radar Chart component for multi-dimensional data comparison. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function RadarChartDoc(props: RadarChartProps): JSX.Element { + return RadarChart(props); +} diff --git a/packages/appkit-ui/src/react/charts/scatter/examples/scatter.example.tsx b/packages/appkit-ui/src/react/charts/scatter/examples/scatter.example.tsx new file mode 100644 index 00000000..f22a70a9 --- /dev/null +++ b/packages/appkit-ui/src/react/charts/scatter/examples/scatter.example.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { ScatterChart } from "@databricks/appkit-ui/react"; + +export default function ScatterChartExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/charts/scatter/index.tsx b/packages/appkit-ui/src/react/charts/scatter/index.tsx index 66407af9..5368d9fb 100644 --- a/packages/appkit-ui/src/react/charts/scatter/index.tsx +++ b/packages/appkit-ui/src/react/charts/scatter/index.tsx @@ -1,27 +1,31 @@ +import type { JSX } from "react"; import { createChart } from "../create-chart"; import type { ScatterChartProps } from "../types"; /** - * Scatter Chart component. - * Supports both JSON and Arrow data formats with automatic format selection. + * Scatter Chart component for correlation and distribution visualization. * - * @example Simple usage - * ```tsx - * - * ``` + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. * - * @example With custom symbol size - * ```tsx - * - * ``` + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). */ export const ScatterChart = createChart( "scatter", "ScatterChart", ); + +// Type-only definition for documentation generation (not used at runtime) +/** + * Scatter Chart component for correlation and distribution visualization. + * + * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components. + * + * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`. + * + * Supports both query mode (queryKey + parameters) and data mode (static data). + */ +export function ScatterChartDoc(props: ScatterChartProps): JSX.Element { + return ScatterChart(props); +} diff --git a/packages/appkit-ui/src/react/table/data-table.tsx b/packages/appkit-ui/src/react/table/data-table.tsx index cb6f1280..91e8a5cc 100644 --- a/packages/appkit-ui/src/react/table/data-table.tsx +++ b/packages/appkit-ui/src/react/table/data-table.tsx @@ -29,6 +29,7 @@ import type { DataTableLabels, DataTableProps } from "./types"; /** * Production-ready data table with automatic data fetching and state management + * * Features: * - Automatic column generation from data structure * - Integrated with useAnalyticsQuery for data fetching @@ -36,9 +37,11 @@ import type { DataTableLabels, DataTableProps } from "./types"; * - Dynamic filtering, sorting and pagination * - Column visibility controls * - Responsive design + * - Supports opinionated mode (auto columns) and full-control mode (`children(table)`) + * * @param props - Props for the DataTable component * @param props.queryKey - The query key to fetch the data - * @param props.parameters - The parameters to pass to the query + * @param props.parameters - The parameters to pass to the query. Required - use `{}` if none. * @param props.filterColumn - The column to filter by * @param props.filterPlaceholder - The placeholder for the filter input * @param props.children - Optional children for full control mode diff --git a/packages/appkit-ui/src/react/table/examples/data-table.example.tsx b/packages/appkit-ui/src/react/table/examples/data-table.example.tsx new file mode 100644 index 00000000..5aca47c7 --- /dev/null +++ b/packages/appkit-ui/src/react/table/examples/data-table.example.tsx @@ -0,0 +1,15 @@ +"use client"; + +import { DataTable } from "@databricks/appkit-ui/react"; + +export default function DataTableExample() { + return ( + + ); +} diff --git a/packages/appkit-ui/src/react/ui/accordion.tsx b/packages/appkit-ui/src/react/ui/accordion.tsx index 771b9d48..48029eb2 100644 --- a/packages/appkit-ui/src/react/ui/accordion.tsx +++ b/packages/appkit-ui/src/react/ui/accordion.tsx @@ -4,12 +4,14 @@ import { ChevronDownIcon } from "lucide-react"; import { cn } from "../lib/utils"; +/** Collapsible content sections organized in a vertical stack */ function Accordion({ ...props }: React.ComponentProps) { return ; } +/** Individual collapsible section within an accordion */ function AccordionItem({ className, ...props @@ -23,6 +25,7 @@ function AccordionItem({ ); } +/** Clickable button that triggers accordion content visibility */ function AccordionTrigger({ className, children, @@ -45,6 +48,7 @@ function AccordionTrigger({ ); } +/** Content area that expands and collapses within an accordion item */ function AccordionContent({ className, children, diff --git a/packages/appkit-ui/src/react/ui/alert-dialog.tsx b/packages/appkit-ui/src/react/ui/alert-dialog.tsx index a0286d60..f9931233 100644 --- a/packages/appkit-ui/src/react/ui/alert-dialog.tsx +++ b/packages/appkit-ui/src/react/ui/alert-dialog.tsx @@ -5,12 +5,14 @@ import { cn } from "../lib/utils"; import { useResolvedPortalContainer } from "../portal-container-context"; import { buttonVariants } from "./button"; +/** Modal dialog that interrupts the user with critical information requiring immediate action */ function AlertDialog({ ...props }: React.ComponentProps) { return ; } +/** Button that triggers the alert dialog to open */ function AlertDialogTrigger({ ...props }: React.ComponentProps) { @@ -19,6 +21,7 @@ function AlertDialogTrigger({ ); } +/** Portal container for rendering alert dialog content outside the DOM hierarchy */ function AlertDialogPortal({ container, ...props @@ -32,6 +35,7 @@ function AlertDialogPortal({ ); } +/** Background overlay that dims content behind the alert dialog */ function AlertDialogOverlay({ className, ...props @@ -48,6 +52,7 @@ function AlertDialogOverlay({ ); } +/** Main content container for the alert dialog */ function AlertDialogContent({ className, ...props @@ -67,6 +72,7 @@ function AlertDialogContent({ ); } +/** Header section containing title and description */ function AlertDialogHeader({ className, ...props @@ -80,6 +86,7 @@ function AlertDialogHeader({ ); } +/** Footer section containing action buttons */ function AlertDialogFooter({ className, ...props @@ -96,6 +103,7 @@ function AlertDialogFooter({ ); } +/** Title heading for the alert dialog */ function AlertDialogTitle({ className, ...props @@ -109,6 +117,7 @@ function AlertDialogTitle({ ); } +/** Descriptive text explaining the alert */ function AlertDialogDescription({ className, ...props @@ -122,6 +131,7 @@ function AlertDialogDescription({ ); } +/** Primary action button that confirms the alert */ function AlertDialogAction({ className, ...props @@ -134,6 +144,7 @@ function AlertDialogAction({ ); } +/** Cancel button that dismisses the alert dialog */ function AlertDialogCancel({ className, ...props diff --git a/packages/appkit-ui/src/react/ui/alert.tsx b/packages/appkit-ui/src/react/ui/alert.tsx index 465767eb..6b067c02 100644 --- a/packages/appkit-ui/src/react/ui/alert.tsx +++ b/packages/appkit-ui/src/react/ui/alert.tsx @@ -19,6 +19,7 @@ const alertVariants = cva( }, ); +/** Displays important information with optional icon and multiple variants */ function Alert({ className, variant, @@ -34,6 +35,7 @@ function Alert({ ); } +/** Title text for an alert component */ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { return (
) { ); } +/** Descriptive text content for an alert component */ function AlertDescription({ className, ...props diff --git a/packages/appkit-ui/src/react/ui/aspect-ratio.tsx b/packages/appkit-ui/src/react/ui/aspect-ratio.tsx index c16d6bcb..c707a1a7 100644 --- a/packages/appkit-ui/src/react/ui/aspect-ratio.tsx +++ b/packages/appkit-ui/src/react/ui/aspect-ratio.tsx @@ -2,6 +2,7 @@ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; +/** Container that maintains a specific aspect ratio for its content */ function AspectRatio({ ...props }: React.ComponentProps) { diff --git a/packages/appkit-ui/src/react/ui/avatar.tsx b/packages/appkit-ui/src/react/ui/avatar.tsx index 7a5e11b3..a53b9aa1 100644 --- a/packages/appkit-ui/src/react/ui/avatar.tsx +++ b/packages/appkit-ui/src/react/ui/avatar.tsx @@ -3,6 +3,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cn } from "../lib/utils"; +/** Displays user profile picture or initials in a circular container */ function Avatar({ className, ...props @@ -19,6 +20,7 @@ function Avatar({ ); } +/** Image element for the avatar */ function AvatarImage({ className, ...props @@ -32,6 +34,7 @@ function AvatarImage({ ); } +/** Fallback content displayed when avatar image fails to load */ function AvatarFallback({ className, ...props diff --git a/packages/appkit-ui/src/react/ui/badge.tsx b/packages/appkit-ui/src/react/ui/badge.tsx index 6788fe73..438e934e 100644 --- a/packages/appkit-ui/src/react/ui/badge.tsx +++ b/packages/appkit-ui/src/react/ui/badge.tsx @@ -25,6 +25,7 @@ const badgeVariants = cva( }, ); +/** Small label for displaying status, categories, or counts */ function Badge({ className, variant, diff --git a/packages/appkit-ui/src/react/ui/breadcrumb.tsx b/packages/appkit-ui/src/react/ui/breadcrumb.tsx index fb17267b..d1c2b019 100644 --- a/packages/appkit-ui/src/react/ui/breadcrumb.tsx +++ b/packages/appkit-ui/src/react/ui/breadcrumb.tsx @@ -4,10 +4,12 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"; import { cn } from "../lib/utils"; +/** Navigation component showing the current page's location in the site hierarchy */ function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { return