// @bun
import{CodeBlock as t,InstallCommand as o}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as r}from"lucide-react";import{jsx as e,jsxs as a}from"react/jsx-runtime";function d(){return a("div",{className:"space-y-8",children:[a("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"DataViews Runtime Library"}),a("p",{className:"text-lg text-muted-foreground",children:["The ",e("code",{children:"@contractspec/lib.contracts-spec/data-views"})," and"," ",e("code",{children:"@contractspec/lib.design-system"})," libraries provide the runtime logic and UI components to render DataViews in your application."]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(o,{package:["@contractspec/lib.contracts-spec","@contractspec/lib.design-system"]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"DataViewRenderer"}),e("p",{className:"text-muted-foreground",children:"The primary component for rendering any DataView. It automatically selects the correct layout (List, Table, Grid, Detail) based on the spec."}),e(t,{language:"tsx",code:`import { DataViewRenderer } from '@contractspec/lib.design-system';
import { MyUserList } from './specs/users.data-view';

export function UserPage() {
  return (
    <DataViewRenderer
      spec={MyUserList}
      items={users}
      pagination={{ page: 1, pageSize: 20, total: 100 }}
      onPageChange={(page) => fetchPage(page)}
    />
  );
}`}),e("h3",{className:"font-semibold text-xl",children:"Props"}),a("ul",{className:"list-disc space-y-2 pl-6 text-muted-foreground",children:[a("li",{children:[e("code",{children:"spec"}),": The DataViewSpec definition."]}),a("li",{children:[e("code",{children:"items"}),": Array of data items to render."]}),a("li",{children:[e("code",{children:"filters"}),": Current filter state object."]}),a("li",{children:[e("code",{children:"onFilterChange"}),": Callback when filters change."]}),a("li",{children:[e("code",{children:"pagination"}),": Object with ",e("code",{children:"page"}),","," ",e("code",{children:"pageSize"}),", ",e("code",{children:"total"}),"."]}),a("li",{children:[e("code",{children:"onPageChange"}),": Callback when page changes."]})]})]}),a("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Query Generation"}),a("p",{className:"text-muted-foreground",children:["The ",e("code",{children:"DataViewQueryGenerator"})," utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."]}),e(t,{language:"typescript",code:`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';

const generator = new DataViewQueryGenerator(MyUserList);
const query = generator.generate({
  pagination: { page: 1, pageSize: 20 },
  filters: { role: 'admin' }
});

// query.input contains { skip: 0, take: 20, role: 'admin' }`})]}),a("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries",className:"btn-ghost",children:"Back to Libraries"}),a(i,{href:"/docs/libraries/data-backend",className:"btn-primary",children:["Next: Data & Backend ",e(r,{size:16})]})]})]})}export{d as LibrariesDataViewsPage};
