@contractspec/bundle.library 3.9.8 → 3.9.9

package/dist/components/docs/specs/SpecsDataViewsPage.js

@@ -1,5 +1,5 @@
 // @bun
-var K=Object.defineProperty;var N=(F)=>F;function O(F,G){this[F]=N.bind(null,G)}var Y=(F,G)=>{for(var J in G)K(F,J,{get:G[J],enumerable:!0,configurable:!0,set:O.bind(G,J)})};var Z=(F,G)=>()=>(F&&(G=F(F=0)),G);import H from"@contractspec/lib.ui-link";import{ChevronRight as Q}from"lucide-react";import{jsx as z,jsxs as B}from"react/jsx-runtime";var U=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
+var v=Object.defineProperty;var D=(K)=>K;function M(K,N){this[K]=D.bind(null,N)}var B=(K,N)=>{for(var Y in N)v(K,Y,{get:N[Y],enumerable:!0,configurable:!0,set:M.bind(N,Y)})};var _=(K,N)=>()=>(K&&(N=K(K=0)),N);import{CodeBlock as Z}from"@contractspec/lib.design-system";import{HStack as R,VStack as z}from"@contractspec/lib.design-system/layout";import{List as $,ListItem as J}from"@contractspec/lib.design-system/list";import{Code as F,H1 as W,H2 as O,H3 as Q,P as G,Text as w}from"@contractspec/lib.design-system/typography";import U from"@contractspec/lib.ui-link";import{ChevronRight as X}from"lucide-react";import{jsx as f,jsxs as q}from"react/jsx-runtime";var b=`import { defineDataView } from '@contractspec/lib.contracts-spec/data-views';
 import { ListDataGridShowcaseRowsQuery } from '@contractspec/example.data-grid-showcase/contracts/data-grid-showcase.operation';
 
 export const DataGridShowcaseDataView = defineDataView({
@@ -62,8 +62,41 @@ export const DataGridShowcaseDataView = defineDataView({
         dataPath: 'lastActivityAt',
         format: { type: 'datetime', dateStyle: 'medium', timeStyle: 'short' },
       },
-      { key: 'notes', label: 'Notes', dataPath: 'notes' },
+      {
+        key: 'notes',
+        label: 'Notes',
+        dataPath: 'notes',
+        visibility: { minDataDepth: 'detailed' },
+      },
     ],
+    collection: {
+      viewModes: {
+        defaultMode: 'table',
+        allowedModes: ['list', 'grid', 'table'],
+      },
+      pagination: {
+        pageSize: 25,
+        pageSizeOptions: [10, 25, 50],
+      },
+      toolbar: {
+        search: true,
+        viewMode: true,
+        filters: true,
+        density: true,
+        dataDepth: true,
+      },
+      density: 'comfortable',
+      dataDepth: 'standard',
+      personalization: {
+        enabled: true,
+        persist: {
+          viewMode: true,
+          density: true,
+          dataDepth: true,
+          pageSize: true,
+        },
+      },
+    },
     filters: [
       { key: 'status', label: 'Status', field: 'status', type: 'enum' },
       {
@@ -82,4 +115,17 @@ export const DataGridShowcaseDataView = defineDataView({
       },
     ],
   },
-});`;function q(){return B("div",{className:"space-y-8",children:[B("div",{className:"space-y-4",children:[z("h1",{className:"font-bold text-4xl",children:"DataViews"}),B("p",{className:"text-muted-foreground",children:["A ",z("strong",{children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Core concepts"}),B("div",{className:"space-y-3",children:[B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Data sources"}),z("p",{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Filtering"}),z("p",{className:"text-muted-foreground",children:"Define filters that users can apply to narrow down results. Filters are typed as search, enum, number, percent, currency, date, time, datetime, duration, or boolean so renderers and query helpers can validate values before execution."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Sorting"}),z("p",{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Pagination"}),z("p",{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),B("div",{children:[z("h3",{className:"font-semibold text-lg",children:"Aggregations"}),z("p",{className:"text-muted-foreground",children:"Compute aggregates like counts, sums, averages, and group-by operations. These are useful for dashboards and summary views."})]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Example DataViewSpec"}),B("p",{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",z(H,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),":"]}),z("div",{className:"overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm",children:z("pre",{children:U})}),z("p",{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Policy integration"}),B("p",{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",z(H,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:"PolicySpecs"}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),z("p",{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Served outputs"}),z("p",{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[B("li",{children:[z("strong",{children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]}),B("li",{children:[z("strong",{children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]}),B("li",{children:[z("strong",{children:"UI components"})," \u2013 List views, tables, cards, and detail views"]}),B("li",{children:[z("strong",{children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]}),B("li",{children:[z("strong",{children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})]})]}),B("div",{className:"space-y-4",children:[z("h2",{className:"font-bold text-2xl",children:"Best practices"}),B("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[z("li",{children:"Only expose fields that users actually need\u2014this improves performance and security."}),z("li",{children:"Use appropriate indexes for sortable and filterable fields."}),z("li",{children:"Set reasonable pagination limits to prevent performance issues."}),z("li",{children:"Use aggregations sparingly\u2014they can be expensive on large datasets."}),z("li",{children:"Test DataViews with realistic data volumes to ensure they perform well."})]})]}),B("div",{className:"flex items-center gap-4 pt-4",children:[z(H,{href:"/docs/specs/capabilities",className:"btn-ghost",children:"Previous: Capabilities"}),B(H,{href:"/docs/specs/workflows",className:"btn-primary",children:["Next: Workflows ",z(Q,{size:16})]})]})]})}export{q as SpecsDataViewsPage};
+});`;function l(){return q(z,{className:"space-y-8",children:[q(z,{className:"space-y-4",children:[f(W,{className:"font-bold text-4xl",children:"DataViews"}),q(G,{className:"text-muted-foreground",children:["A ",f(w,{className:"font-semibold",children:"DataViewSpec"})," describes how data should be queried, filtered, sorted, and presented to users. Runtime adapters execute optimized database queries and serve list views, detail views, and search interfaces while respecting policy constraints."]})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Core concepts"}),q(z,{className:"space-y-3",children:[q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Data sources"}),f(G,{className:"text-muted-foreground",children:"A DataView connects to one or more data sources\u2014databases, APIs, or other capabilities. You specify the source and the fields you want to expose."})]}),q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Filtering"}),f(G,{className:"text-muted-foreground",children:"Define filters that users can apply to narrow down results. Filters are typed as search, enum, number, percent, currency, date, time, datetime, duration, or boolean so renderers and query helpers can validate values before execution."})]}),q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Sorting"}),f(G,{className:"text-muted-foreground",children:"Specify which fields can be sorted and the default sort order. ContractSpec generates efficient database queries with proper indexes."})]}),q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Pagination"}),f(G,{className:"text-muted-foreground",children:"DataViews automatically support pagination to handle large datasets. You can configure page size limits and cursor-based or offset-based pagination."})]}),q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Collection modes and data depth"}),q(G,{className:"text-muted-foreground",children:["List, grid, and table views can share a single"," ",f(F,{children:"view.collection"})," contract. It declares allowed view modes, toolbar controls, page-size defaults, density, data depth, and persistence hints. Fields can use"," ",f(F,{children:"visibility.minDataDepth"})," so summary views stay light while detailed views expose richer context."]})]}),q(z,{children:[f(Q,{className:"font-semibold text-lg",children:"Personalization hints"}),q(G,{className:"text-muted-foreground",children:["The contract layer stays neutral: it can opt into persistence with"," ",f(F,{children:"view.collection.personalization"}),", but it does not import the personalization runtime. Host apps resolve preferences and behavior insights into renderer props."]})]})]})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Example DataViewSpec"}),q(G,{className:"text-muted-foreground",children:["Here is the canonical table contract used by the live"," ",f(U,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:f(w,{children:"Data Grid Showcase"})}),":"]}),f(Z,{language:"typescript",code:b}),f(G,{className:"text-muted-foreground text-sm",children:"This one contract drives the DataView lane, while the same rows and controller also feed the raw web primitive, native-first primitive, and composed design-system demos."})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Policy integration"}),q(G,{className:"text-muted-foreground",children:["DataViews automatically enforce"," ",f(U,{href:"/docs/specs/policy",className:"text-violet-400 hover:text-violet-300",children:f(w,{children:"PolicySpecs"})}),". If a user doesn't have permission to see certain fields, those fields are automatically filtered out or redacted. If a user can only see their own data, the query is automatically scoped."]}),f(G,{className:"text-muted-foreground",children:"This means you define the data view once, and it works correctly for all users based on their permissions\u2014no need to write separate queries for different roles."})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Personalized Rendering Pattern"}),q(G,{className:"text-muted-foreground",children:["To personalize a DataView, keep the spec declarative and resolve user-specific defaults at the app boundary. Use"," ",f(F,{children:"resolveDataViewPreferences"})," from"," ",f(F,{children:"@contractspec/lib.personalization/data-view-preferences"}),"to compute ",f(F,{children:"viewMode"}),", ",f(F,{children:"density"}),","," ",f(F,{children:"dataDepth"}),", and ",f(F,{children:"pageSize"}),". Pass those values to ",f(F,{children:"DataViewRenderer"})," as controlled or default props, then record UI changes with ",f(F,{children:"trackDataViewInteraction"}),"."]}),f(Z,{language:"tsx",code:`const resolved = resolveDataViewPreferences({
+  spec: DataGridShowcaseDataView,
+  preferences: profile.canonical,
+  insights,
+  record: savedPreference,
+});
+
+<DataViewRenderer
+  spec={DataGridShowcaseDataView}
+  items={rows}
+  defaultViewMode={resolved.viewMode}
+  defaultDensity={resolved.density}
+  defaultDataDepth={resolved.dataDepth}
+/>;`})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Served outputs"}),f(G,{className:"text-muted-foreground",children:"From a DataViewSpec, ContractSpec serves:"}),q($,{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"Database queries"})," \u2013 Optimized SQL or NoSQL queries executed at runtime"]})}),f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"API endpoints"})," \u2013 RESTful or GraphQL endpoints for fetching data"]})}),f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"UI components"})," \u2013 List views, tables, cards, and detail views"]})}),f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"Personalized defaults"})," \u2013 Plain renderer props for preferred mode, density, data depth, and page size"]})}),f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"Search interfaces"})," \u2013 Full-text search with autocomplete"]})}),f(J,{children:q(w,{children:[f(w,{className:"font-semibold",children:"Export functions"})," \u2013 CSV, JSON, or Excel exports"]})})]})]}),q(z,{className:"space-y-4",children:[f(O,{className:"font-bold text-2xl",children:"Best practices"}),q($,{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[f(J,{children:f(w,{children:"Only expose fields that users actually need\u2014this improves performance and security."})}),f(J,{children:f(w,{children:"Use appropriate indexes for sortable and filterable fields."})}),f(J,{children:f(w,{children:"Set reasonable pagination limits to prevent performance issues."})}),f(J,{children:q(w,{children:["Use ",f(F,{children:"allowedModes"})," to constrain mode switching to layouts that the fields and row actions can support."]})}),f(J,{children:q(w,{children:["Store preferences only for dimensions enabled by"," ",f(F,{children:"view.collection.personalization.persist"}),"."]})}),f(J,{children:f(w,{children:"Test DataViews with realistic data volumes to ensure they perform well."})})]})]}),q(R,{className:"items-center gap-4 pt-4",children:[f(U,{href:"/docs/specs/capabilities",className:"btn-ghost",children:f(w,{children:"Previous: Capabilities"})}),q(U,{href:"/docs/specs/workflows",className:"btn-primary",children:[f(w,{children:"Next: Workflows"})," ",f(X,{size:16})]})]})]})}export{l as SpecsDataViewsPage};