// src/components/docs/libraries/LibrariesDataViewsPage.tsx
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesDataViewsPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "DataViews Runtime Library"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground text-lg",
            children: [
              "The ",
              /* @__PURE__ */ jsx("code", {
                children: "@contractspec/lib.contracts-spec/data-views"
              }),
              " and",
              " ",
              /* @__PURE__ */ jsx("code", {
                children: "@contractspec/lib.design-system"
              }),
              " libraries provide the runtime logic and UI components to render DataViews in your application."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: [
              "@contractspec/lib.contracts-spec",
              "@contractspec/lib.design-system"
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "DataViewRenderer"
          }),
          /* @__PURE__ */ jsx("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."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            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)}
    />
  );
}`
          }),
          /* @__PURE__ */ jsx("h3", {
            className: "text-xl font-semibold",
            children: "Props"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-disc space-y-2 pl-6",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "spec"
                  }),
                  ": The DataViewSpec definition."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "items"
                  }),
                  ": Array of data items to render."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "filters"
                  }),
                  ": Current filter state object."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "onFilterChange"
                  }),
                  ": Callback when filters change."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "pagination"
                  }),
                  ": Object with ",
                  /* @__PURE__ */ jsx("code", {
                    children: "page"
                  }),
                  ",",
                  " ",
                  /* @__PURE__ */ jsx("code", {
                    children: "pageSize"
                  }),
                  ", ",
                  /* @__PURE__ */ jsx("code", {
                    children: "total"
                  }),
                  "."
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    children: "onPageChange"
                  }),
                  ": Callback when page changes."
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Query Generation"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "The ",
              /* @__PURE__ */ jsx("code", {
                children: "DataViewQueryGenerator"
              }),
              " utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend."
            ]
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            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' }`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries",
            className: "btn-ghost",
            children: "Back to Libraries"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/data-backend",
            className: "btn-primary",
            children: [
              "Next: Data & Backend ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesDataViewsPage
};
