@cryptlex/web-components 6.6.6-alpha45 → 6.6.6-alpha47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-table-filter.js +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/dialog.d.ts +1 -1
- package/dist/components/divider.d.ts +33 -0
- package/dist/components/divider.js +2 -0
- package/dist/components/divider.js.map +1 -0
- package/dist/components/id-search.js +1 -1
- package/dist/components/id-search.js.map +1 -1
- package/dist/utilities/ctx-client.d.ts +8 -0
- package/dist/utilities/ctx-client.js +2 -0
- package/dist/utilities/ctx-client.js.map +1 -0
- package/dist/utilities/resources.d.ts +2 -2
- package/dist/utilities/resources.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"react/jsx-runtime";import"react";import"./button.js";import{C as
|
|
1
|
+
import"react/jsx-runtime";import"react";import"./button.js";import{C as Z,D as $,F as rr}from"./data-table.js";import"./date-picker.js";import"./menu.js";import"./popover.js";import"../utilities/form-hook.js";import"../utilities/resources.js";import"../utilities/theme.js";import"./icons.js";import"./id-search.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"lodash-es";import"./badge.js";import"./dialog-menu.js";import"../utilities/string.js";import"./dialog-action-utils.js";import"./dialog.js";import"./list-box.js";import"./select.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./searchfield.js";import"./table.js";import"../utilities/countries.js";import"./select-options.js";import"../utilities/date.js";import"../utilities/numbers.js";import"zod";import"../utilities/duration.js";import"./checkbox.js";import"./table-actions.js";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/ctx-client.js";export{Z as COMPARISON_OPERATOR_LABELS,$ as DataTableFilter,rr as FILTER_COMPARISON_OPERATORS};
|
|
2
2
|
//# sourceMappingURL=data-table-filter.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as x,jsxs as c}from"react/jsx-runtime";import{createContext as me,useState as D,useMemo as ge,useEffect as pe,useContext as fe,useId as he,useRef as be}from"react";import{Button as C}from"./button.js";import{useSensors as Se,useSensor as U,PointerSensor as ye,KeyboardSensor as ve,DndContext as Ce,closestCenter as we,DragOverlay as Ie}from"@dnd-kit/core";import{sortableKeyboardCoordinates as xe,SortableContext as Ne,verticalListSortingStrategy as Te,arrayMove as Fe,useSortable as Ae}from"@dnd-kit/sortable";import{CSS as De}from"@dnd-kit/utilities";import{useQuery as Y,keepPreviousData as Pe}from"@tanstack/react-query";import{createColumnHelper as ee,useReactTable as Re,getCoreRowModel as Me,flexRender as $}from"@tanstack/react-table";import{useLocalStorage as K}from"@uidotdev/usehooks";import{merge as Oe}from"lodash-es";import{Badge as _e}from"./badge.js";import{TfDatePicker as ze}from"./date-picker.js";import{EasyMenu as V,MenuItem as _,Menu as Le}from"./menu.js";import{PopoverTrigger as te,Popover as Ee}from"./popover.js";import{useAppForm as qe}from"../utilities/form-hook.js";import{useResourceFormatter as B,RESOURCE_ENDPOINT_MAP as je}from"../utilities/resources.js";import{classNames as v}from"../utilities/theme.js";import{IcInfo as $e,IcMoreVertical as ke,IcRefresh as Ve,IcColumns as Be,IcGrip as He,IcFirst as Ue,IcLeft as Ke,IcRight as Qe,IcLast as Ge,IcSortAsc as We,IcSortDesc as Xe,IcSortNone as Ze,IcFilter as Je,IcRemove as Q,IcCheck as G,IcMinus as Ye,IcAccount as et,IcLicense as tt,IcDate as nt,IcFile as rt}from"./icons.js";import{Select as at,Autocomplete as it}from"react-aria-components";import ot from"openapi-fetch";import"./dialog.js";import"./toast.js";import{Loader as ne}from"./loader.js";import{SearchField as re}from"./searchfield.js";import{getFieldErrorMessage as q}from"../utilities/form.js";import{useFieldContext as ae}from"../utilities/form-context.js";import{FormField as lt}from"./form.js";import{SelectTrigger as st,SelectPopover as ct}from"./select.js";import{DialogMenu as ut}from"./dialog-menu.js";import{Table as dt,TableHeader as mt,TableRow as W,TableHead as gt,TableBody as pt,TableCell as ft}from"./table.js";import{CountryName as ht}from"../utilities/countries.js";import{formatDate as bt}from"../utilities/date.js";import{formatDays as St,formatFilesize as yt,formatNumber as vt}from"../utilities/numbers.js";import{Checkbox as X}from"./checkbox.js";import{TableActions as Ct}from"./table-actions.js";import"class-variance-authority";import"clsx";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"@tanstack/react-form";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";import"react-dom";import"./alert.js";import"./dialog-action-utils.js";import"./select-options.js";import"zod";import"../utilities/duration.js";function kn(e){const r=async(a,i,g,l)=>{const u={...l,page:a.pageIndex+1,limit:a.pageSize,sort:wt(i[0]),search:g},f=await e(u);return{total:Number.parseInt(f.response.headers.get("Pagination-Count")||"0"),data:f.data}},n=ee();return{callback:r,columnHelper:n}}function wt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const z=ee(),It=[z.accessor("checkbox",{header:({table:e})=>t(X,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(X,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],xt=[z.accessor("id",{header:"ID",meta:{displayType:"string"}})],Nt=[z.accessor("createdAt",{header:"Creation Date",meta:{displayType:"date"},enableHiding:!1}),z.accessor("updatedAt",{header:"Last Updated",meta:{displayType:"date"},enableHiding:!1})],I="TableActions",Tt=e=>e.length===0?[]:[z.accessor(I,{header:"Actions",id:I,enableHiding:!1,cell:({row:r})=>t(ut,{label:t(ke,{}),data:r.original,items:e}),enableSorting:!1})];function Vn({resourceName:e,columns:r,callback:n,filterConfig:a,columnsToHideByDefault:i={},allowSelection:g=!1,initialFilters:l=[],tableActions:u,rowActions:f}){const[d,y]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,s]=D({}),[h,p]=D(""),[b,P]=K(`${e}_ctx_column_order_preference`,[]),[T,j]=K(`${e}_ctx_column_visibility_preference`,{id:!1,...i}),[F,L]=D(l),A=ge(()=>F.map(o=>Array.isArray(o.value)?{[o.property]:{[o.operator]:o.value.join(",")}}:{[o.property]:{[o.operator]:o.value}}).reduce((o,O)=>Oe(o,O),{}),[F]),R=o=>{y(O=>({...O,...o}))},{sorting:S,pagination:w}=d,E=Y({queryKey:[e,w,S,h,A],queryFn:()=>n(w,S,h,A),placeholderData:Pe,retry:0,refetchOnWindowFocus:!1}),ue=[...g?It:[],...xt,...r,...Nt,...Tt(f??[])];function de(o){return typeof o=="function"}function M(o,O){return de(o)?o(O):o}const H=Re({data:E.data?.data??[],columns:ue,getCoreRowModel:Me(),rowCount:E.data?.total,manualPagination:!0,onPaginationChange:o=>{R({pagination:M(o,w)})},manualSorting:!0,onSortingChange:o=>{s({}),R({sorting:[...M(o,S)]})},manualFiltering:!0,onColumnVisibilityChange:o=>{j(M(o,T))},onRowSelectionChange:o=>{s(M(o,m))},onColumnOrderChange:o=>{P(M(o,b))},state:{sorting:S,columnVisibility:T,pagination:w,rowSelection:m,columnOrder:b},meta:{refetch:E.refetch}});return pe(()=>{P([...H.getAllLeafColumns().map(o=>o.id)])},[]),{tableState:d,updateTableState:R,query:E,setSearchQuery:p,searchQuery:h,tanTable:H,mergedFilters:A,filters:F,setFilters:L,filterConfig:a,tableActions:u}}const ie=me(null);function N(){const e=fe(ie);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Bn({children:e,...r}){return t(ie.Provider,{value:r,children:e})}function Hn({className:e,...r}){const{query:n,tanTable:a}=N();return t(x,{children:c("section",{...r,className:v("flex flex-col bg-elevation-1",e),children:[t(Pt,{}),c("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[n.isLoading&&t(Z,{className:"cursor-wait",children:t(ne,{})}),!n.isLoading&&a.getRowModel().rows.length===0&&t(Z,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[t($e,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(x,{children:"No results found."}):t(x,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&a.getRowModel().rows.length!==0&&t(Mt,{className:"w-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[t(Ft,{}),t(Dt,{})]}),t(At,{})]})]})})}function Z({children:e,className:r}){return c(x,{children:[t("span",{className:v(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function Ft(){const{tanTable:e}=N(),[r,n]=D(null),a=B(),i=Se(U(ye),U(ve,{coordinateGetter:xe}));return t(Ce,{sensors:i,collisionDetection:we,onDragStart:l=>{const{active:u}=l;n(u.id.toString())},onDragEnd:l=>{const{active:u,over:f}=l;if(f&&u.id!==f.id){const d=e.getState().columnOrder,y=d.indexOf(u.id.toString()),m=d.indexOf(f.id.toString());e.setColumnOrder([...Fe(d,y,m)])}n(null)},children:c(Ne,{items:e.getState().columnOrder,strategy:Te,children:[c(V,{label:c(x,{children:[t(Be,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(l=>l.id),children:[t(_,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(l=>{const u=e.getAllFlatColumns().find(f=>f.id===l);return!u||u.id==="checkbox"||u.id===I?null:t(g,{column:u},u.id)})]}),t(Ie,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:a(r)}):null})]})});function g({column:l}){const{attributes:u,listeners:f,setNodeRef:d,transform:y,transition:m}=Ae({id:l.id}),s={transform:De.Transform.toString(y),transition:m,zIndex:"999"};return c(_,{ref:d,style:s,...u,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[t(He,{...f,className:"size-icon cursor-grab"}),k(l),l.getIsSorted()&&t(oe,{className:"size-icon",direction:l.getIsSorted()})]})}}function At(){const{tanTable:e,query:r}=N(),n=r.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,n)} of ${n?.toLocaleString()}`}),t(C,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ue,{})}),t(C,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ke,{})}),t(C,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Qe,{})}),t(C,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(Ge,{})})]})}function Dt(){const{tanTable:e}=N(),r=[10,20,30,40,50];return t(V,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(_,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function Pt(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:a,tableActions:i}=N(),g=r.getSelectedRowModel().rows.length>0,l=r.getSelectedRowModel().rows.map(f=>f.original),u=i.filter(f=>f.bulk===g);return c("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[t(C,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(Ve,{})}),t(Ct,{items:u,rowsSelected:l,isFetching:e.isFetching})]}),c("div",{className:"flex gap-icon",children:[t($t,{}),t(re,{value:n,onChange:a})]})]})}function oe({direction:e,...r}){return e==="asc"?t(We,{className:"size-3.5",...r}):e==="desc"?t(Xe,{className:"size-3.5",...r}):t(Ze,{className:"size-3.5",...r})}function k(e){const r=B(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function Rt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return bt(n);case"number":return vt(n);case"boolean":case"badge":return t(_e,{className:"uppercase w-full",children:String(n)});case"country":return t(ht,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return yt(n);case"days":return St(n);default:return String(n)}}function J({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?k(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?k(e.column):$(r,e.getContext()):$(r,e.getContext())}function Mt({className:e}){const{tanTable:r}=N(),n=(a,i,g="z-50")=>v("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",a&&`bg-elevation-1 sticky right-0 ${g} text-center justify-center`,i);return c(dt,{className:v("table-auto",e),children:[t(mt,{className:"sticky top-0 z-10",children:r.getHeaderGroups().map(a=>t(W,{children:a.headers.map(i=>c(gt,{scope:"col",colSpan:i.colSpan,className:n(i.id===I,"bg-elevation-1"),children:[!i.column.getCanSort()&&!i.isPlaceholder&&t("div",{className:v("w-full py-1 inline-flex items-center gap-1 body-sm",i.id===I?"justify-center":"justify-start"),children:t(J,{header:i})}),i.column.getCanSort()&&c(C,{variant:"ghost",className:v("w-full p-1",i.id===I?"justify-center":"justify-start"),onPress:i.column.getToggleSortingHandler(),children:[t("span",{children:t(J,{header:i})}),t(oe,{direction:i.column.getIsSorted()})]})]},i.id))},a.id))}),t(pt,{children:r.getRowModel().rows.map(a=>t(W,{className:v("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":a.getIsSelected(),children:a.getVisibleCells().map(i=>{const g=i.column.id===I,l=i.column.columnDef.meta?.displayType?Rt(i):$(i.column.columnDef.cell,i.getContext());return t(ft,{className:v(n(g,void 0,"z-1"),g&&"flex justify-center items-center"),children:l},i.id)})},a.id))})]})}const le=ot({baseUrl:"https://api.dev.cryptlex.com"}),Ot={async onRequest({request:e}){return e},async onResponse({response:e}){if(!e.ok)throw await e.json();return e}};le.use(Ot);function _t(e){return Array.isArray(e)&&e.every(r=>r&&typeof r=="object"&&"id"in r&&"name"in r)}function se({label:e,description:r,errorMessage:n,requiredIndicator:a,isDisabled:i,isInvalid:g,onBlur:l,resource:u,onChange:f,value:d,renderLabel:y,accessor:m,defaultParams:s,className:h,...p}){if(u==="profile")throw Error('Resource "profile" is not supported with IdSearch since it is not a searchable resource.');const b=he(),P=p.id||b,[T,j]=D(""),{data:F,isError:L,isFetching:A,error:R}=Y({queryKey:[u,"id",T],queryFn:async()=>{const w=(await le.GET(je[u],{params:{query:{search:T,...s?.query},path:{...s?.path}}})).data;return w&&_t(w)?w:[]}});return t("div",{className:"group form-field","data-invalid":g?"":void 0,children:t(lt,{label:e,description:r,errorMessage:n,requiredIndicator:a,htmlFor:P,children:t(at,{isInvalid:g,children:c(te,{onOpenChange:S=>{S||l?.(d)},children:[t(st,{id:P,isDisabled:i,className:h??"w-full",children:y(d,F)}),t(ct,{placement:"bottom start",children:c(it,{inputValue:T,onInputChange:j,children:[t(re,{className:"p-2",autoFocus:!0}),A&&t("div",{className:"p-input",children:t(ne,{className:"mx-auto"})}),!A&&!L&&t(Le,{...p,className:"max-h-48",items:F,renderEmptyState:()=>t("div",{className:"body-sm p-2",children:"No results found."}),children:S=>t(_,{id:S[m],children:S.name},S[m])}),L&&t("div",{className:"text-destructive p-icon body-sm",children:R.message})]})})]})})})})}function zt({...e}){return t(se,{selectedKeys:[e.value],onSelectionChange:r=>e.onChange(Array.from(r).filter(n=>typeof n=="string")[0]),renderLabel:(r,n)=>n?.find(a=>a.id===r)?.name??r,selectionMode:"single",...e})}function Lt({...e}){return t(se,{selectedKeys:e.value,onSelectionChange:r=>e.onChange(Array.from(r).filter(n=>typeof n=="string")),selectionMode:"multiple",renderLabel:(r,n)=>r?.map(a=>n?.find(i=>i.id===a)?.name??a).join(","),...e})}function Un({isDisabled:e,...r}){const n=ae({disabled:e});return t(zt,{...r,isDisabled:e||n.form.state.isSubmitting,value:n.state.value,onBlur:a=>n.handleBlur(),onChange:a=>n.handleChange(a),isInvalid:!!q(n),errorMessage:q(n)})}function Et({isDisabled:e,...r}){const n=ae({disabled:e});return t(Lt,{...r,isDisabled:e||n.form.state.isSubmitting,value:n.state.value,onBlur:a=>n.handleBlur(),onChange:a=>n.handleChange(a),isInvalid:!!q(n),errorMessage:q(n)})}const Kn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],qt={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"};function jt(e,r){const n=`${r}-${Date.now()}`,a=ce[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:a,value:!0};case"string":return{id:n,type:e,property:r,operator:a,value:""};case"date":return{id:n,type:e,property:r,operator:a,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:a,value:""};case"id-search":return{id:n,type:e,property:r,operator:a,value:[]};case"enum":return{id:n,type:e,property:r,operator:a,value:new Set};case"number":return{id:n,type:e,property:r,operator:a,value:0}}}const ce={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function $t({className:e,...r}){const{filters:n,query:a,setFilters:i,filterConfig:g}=N(),l=be(null),u=B(),d=qe({defaultValues:{filters:n},onSubmit:({value:m})=>{i(m.filters)}}),y=Object.keys(g).sort();return t("section",{...r,className:v("flex gap-icon items-center",e),children:c(te,{onOpenChange:m=>{m?l.current?.focus():d.handleSubmit()},children:[c("div",{className:"relative",children:[n.length>0&&t("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),t(C,{"aria-label":"Filter",isDisabled:a.isPending||y.length===0,type:"button",size:"icon",variant:"neutral",children:t(Je,{})})]}),t(Ee,{className:"w-full p-icon",children:t("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:t(d.Field,{mode:"array",name:"filters",children:m=>c(x,{children:[m.state.value.map((s,h)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[t("span",{className:"body-sm",children:u(s.property)}),t(d.AppField,{name:`filters[${h}].operator`,children:p=>t(p.TfSingleSelect,{items:ce[s.type].map(b=>({id:b,label:t(x,{children:qt[b]})}))})},s.id),s.type==="bool"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfCheckbox,{autoFocus:!0})}),s.type==="date"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>t(ze,{autoFocus:!0})}),s.type==="id"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfTextField,{autoFocus:!0})}),s.type==="string"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfTextField,{autoFocus:!0})}),s.type==="number"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>t(p.TfNumberField,{autoFocus:!0})}),s.type==="enum"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>{const b=g[s.property];return b.type!=="enum"?null:t(p.TfMultiSelect,{items:b.options})}}),s.type==="id-search"&&t(d.AppField,{name:`filters[${h}].value`,children:p=>{const b=g[s.property];return b.type!=="id-search"?null:t(Et,{resource:b.resource,accessor:b.accessor})}}),t(C,{type:"button",variant:"neutral",size:"icon",onPress:()=>m.removeValue(h),children:t(Q,{})})]},s.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[t(V,{label:"Add filter",autoFocus:!0,children:y.sort().map(s=>{const h=g[s].type,p=kt[h];return c(_,{onAction:()=>{const b=jt(h,s);m.pushValue(b)},children:[u(s),t(p,{})]},s)})}),m.state.value.length>0?c(C,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:[t(Q,{}),"Reset"]}):null]})]})})})})]})})}const kt={"id-search":rt,bool:G,date:nt,enum:tt,id:et,number:Ye,string:G};export{qt as C,$t as D,Hn as DataTable,ie as DataTableContext,Bn as DataTableProvider,Kn as F,Lt as M,zt as S,Un as T,Et as a,kn as getTableCallback,N as useDataTable,Vn as useDataTableState};
|
|
1
|
+
"use client";import{jsx as t,Fragment as w,jsxs as s}from"react/jsx-runtime";import{createContext as ae,useState as N,useMemo as ie,useEffect as oe,useContext as le,useRef as se}from"react";import{Button as y}from"./button.js";import{useSensors as ce,useSensor as H,PointerSensor as ue,KeyboardSensor as de,DndContext as me,closestCenter as ge,DragOverlay as pe}from"@dnd-kit/core";import{sortableKeyboardCoordinates as fe,SortableContext as he,verticalListSortingStrategy as be,arrayMove as Se,useSortable as ye}from"@dnd-kit/sortable";import{CSS as ve}from"@dnd-kit/utilities";import{useQuery as Ce,keepPreviousData as we}from"@tanstack/react-query";import{createColumnHelper as X,useReactTable as xe,getCoreRowModel as Te,flexRender as L}from"@tanstack/react-table";import{useLocalStorage as V}from"@uidotdev/usehooks";import{merge as Ie}from"lodash-es";import{Badge as Ne}from"./badge.js";import{TfDatePicker as Fe}from"./date-picker.js";import{EasyMenu as E,MenuItem as R}from"./menu.js";import{PopoverTrigger as Ae,Popover as De}from"./popover.js";import{useAppForm as Pe}from"../utilities/form-hook.js";import{useResourceFormatter as $}from"../utilities/resources.js";import{classNames as S}from"../utilities/theme.js";import{IcInfo as Re,IcMoreVertical as Oe,IcRefresh as ze,IcColumns as _e,IcGrip as Le,IcFirst as Me,IcLeft as Ee,IcRight as $e,IcLast as qe,IcSortAsc as je,IcSortDesc as ke,IcSortNone as He,IcFilter as Ve,IcRemove as U,IcCheck as B,IcMinus as Ue,IcAccount as Be,IcLicense as Ke,IcDate as Qe,IcFile as Ge}from"./icons.js";import{TfMultipleIdSearchInput as We}from"./id-search.js";import{DialogMenu as Xe}from"./dialog-menu.js";import{Loader as Ze}from"./loader.js";import{SearchField as Je}from"./searchfield.js";import{Table as Ye,TableHeader as et,TableRow as K,TableHead as tt,TableBody as nt,TableCell as rt}from"./table.js";import{CountryName as at}from"../utilities/countries.js";import{formatDate as it}from"../utilities/date.js";import{formatDays as ot,formatFilesize as lt,formatNumber as st}from"../utilities/numbers.js";import{Checkbox as Q}from"./checkbox.js";import{TableActions as ct}from"./table-actions.js";import"class-variance-authority";import"react-aria-components";import"@internationalized/date";import"./calendar.js";import"./form.js";import"./datefield.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";import"clsx";import"../utilities/ctx-client.js";import"./dialog-action-utils.js";import"./dialog.js";import"./select-options.js";import"zod";import"../utilities/duration.js";function wn(e){const r=async(i,a,g,l)=>{const u={...l,page:i.pageIndex+1,limit:i.pageSize,sort:ut(a[0]),search:g},p=await e(u);return{total:Number.parseInt(p.response.headers.get("Pagination-Count")||"0"),data:p.data}},n=X();return{callback:r,columnHelper:n}}function ut(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}const F=X(),dt=[F.accessor("checkbox",{header:({table:e})=>t(Q,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>t(Q,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],mt=[F.accessor("id",{header:"ID",meta:{displayType:"string"}})],gt=[F.accessor("createdAt",{header:"Creation Date",meta:{displayType:"date"},enableHiding:!1}),F.accessor("updatedAt",{header:"Last Updated",meta:{displayType:"date"},enableHiding:!1})],C="TableActions",pt=e=>e.length===0?[]:[F.accessor(C,{header:"Actions",id:C,enableHiding:!1,cell:({row:r})=>t(Xe,{label:t(Oe,{}),data:r.original,items:e}),enableSorting:!1})];function xn({resourceName:e,columns:r,callback:n,filterConfig:i,columnsToHideByDefault:a={},allowSelection:g=!1,initialFilters:l=[],tableActions:u,rowActions:p}){const[d,v]=N({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,c]=N({}),[h,f]=N(""),[b,q]=V(`${e}_ctx_column_order_preference`,[]),[j,ee]=V(`${e}_ctx_column_visibility_preference`,{id:!1,...a}),[O,te]=N(l),z=ie(()=>O.map(o=>Array.isArray(o.value)?{[o.property]:{[o.operator]:o.value.join(",")}}:{[o.property]:{[o.operator]:o.value}}).reduce((o,I)=>Ie(o,I),{}),[O]),_=o=>{v(I=>({...I,...o}))},{sorting:A,pagination:D}=d,P=Ce({queryKey:[e,D,A,h,z],queryFn:()=>n(D,A,h,z),placeholderData:we,retry:0,refetchOnWindowFocus:!1}),ne=[...g?dt:[],...mt,...r,...gt,...pt(p??[])];function re(o){return typeof o=="function"}function T(o,I){return re(o)?o(I):o}const k=xe({data:P.data?.data??[],columns:ne,getCoreRowModel:Te(),rowCount:P.data?.total,manualPagination:!0,onPaginationChange:o=>{_({pagination:T(o,D)})},manualSorting:!0,onSortingChange:o=>{c({}),_({sorting:[...T(o,A)]})},manualFiltering:!0,onColumnVisibilityChange:o=>{ee(T(o,j))},onRowSelectionChange:o=>{c(T(o,m))},onColumnOrderChange:o=>{q(T(o,b))},state:{sorting:A,columnVisibility:j,pagination:D,rowSelection:m,columnOrder:b},meta:{refetch:P.refetch}});return oe(()=>{q([...k.getAllLeafColumns().map(o=>o.id)])},[]),{tableState:d,updateTableState:_,query:P,setSearchQuery:f,searchQuery:h,tanTable:k,mergedFilters:z,filters:O,setFilters:te,filterConfig:i,tableActions:u}}const Z=ae(null);function x(){const e=le(Z);if(!e)throw Error("DataTable should be used within DataTableProvider.");return e}function Tn({children:e,...r}){return t(Z.Provider,{value:r,children:e})}function In({className:e,...r}){const{query:n,tanTable:i}=x();return t(w,{children:s("section",{...r,className:S("flex flex-col bg-elevation-1",e),children:[t(St,{}),s("div",{className:"w-full overflow-auto border-x h-table relative",tabIndex:0,children:[n.isLoading&&t(G,{className:"cursor-wait",children:t(Ze,{})}),!n.isLoading&&i.getRowModel().rows.length===0&&t(G,{className:"cursor-not-allowed",children:!n.isFetching&&(n.isError?s("span",{className:"flex gap-3 justify-center items-center",children:[t(Re,{}),t("span",{children:n.error.message})]}):n.data?.data?.length===0?t(w,{children:"No results found."}):t(w,{children:"Unknown error. Please contact customer support."}))}),!n.isLoading&&i.getRowModel().rows.length!==0&&t(vt,{className:"w-full"})]}),s("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[s("div",{className:"flex gap-icon",children:[t(ft,{}),t(bt,{})]}),t(ht,{})]})]})})}function G({children:e,className:r}){return s(w,{children:[t("span",{className:S(r,"absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center"),children:e}),t("span",{className:"relative h-full w-0 block"})]})}function ft(){const{tanTable:e}=x(),[r,n]=N(null),i=$(),a=ce(H(ue),H(de,{coordinateGetter:fe}));return t(me,{sensors:a,collisionDetection:ge,onDragStart:l=>{const{active:u}=l;n(u.id.toString())},onDragEnd:l=>{const{active:u,over:p}=l;if(p&&u.id!==p.id){const d=e.getState().columnOrder,v=d.indexOf(u.id.toString()),m=d.indexOf(p.id.toString());e.setColumnOrder([...Se(d,v,m)])}n(null)},children:s(he,{items:e.getState().columnOrder,strategy:be,children:[s(E,{label:s(w,{children:[t(_e,{className:"inline align-bottom me-1"}),"Columns"]}),selectionMode:"multiple",items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(l=>l.id),children:[t(R,{onAction:()=>e.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),e.getState().columnOrder.map(l=>{const u=e.getAllFlatColumns().find(p=>p.id===l);return!u||u.id==="checkbox"||u.id===C?null:t(g,{column:u},u.id)})]}),t(pe,{children:r?t("div",{className:"opacity-70 border-2 border-primary",children:i(r)}):null})]})});function g({column:l}){const{attributes:u,listeners:p,setNodeRef:d,transform:v,transition:m}=ye({id:l.id}),c={transform:ve.Transform.toString(v),transition:m,zIndex:"999"};return s(R,{ref:d,style:c,...u,id:l.id,onAction:()=>l.toggleVisibility(),isDisabled:!l.getCanHide(),className:"flex items-center",children:[t(Le,{...p,className:"size-icon cursor-grab"}),M(l),l.getIsSorted()&&t(J,{className:"size-icon",direction:l.getIsSorted()})]})}}function ht(){const{tanTable:e,query:r}=x(),n=r.data?.total??0;return s("div",{className:"flex items-center gap-2",children:[t("span",{className:"whitespace-nowrap body-sm text-muted",children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,n)} of ${n?.toLocaleString()}`}),t(y,{"aria-label":"First page",onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Me,{})}),t(y,{"aria-label":"Previous page",onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:"neutral",size:"icon",children:t(Ee,{})}),t(y,{"aria-label":"Next page",onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t($e,{})}),t(y,{"aria-label":"Last page",onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:"neutral",size:"icon",children:t(qe,{})})]})}function bt(){const{tanTable:e}=x(),r=[10,20,30,40,50];return t(E,{label:e.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[e.getState().pagination.pageSize.toString()],items:r.map(n=>({id:n.toString(),value:n})),children:n=>t(R,{onAction:()=>e.setPageSize(n.value),children:n.value})})}function St(){const{query:e,tanTable:r,searchQuery:n,setSearchQuery:i,tableActions:a}=x(),g=r.getSelectedRowModel().rows.length>0,l=r.getSelectedRowModel().rows.map(p=>p.original),u=a.filter(p=>p.bulk===g);return s("section",{className:"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto",children:[s("div",{className:"flex gap-icon",children:[t(y,{"aria-label":"Refresh",isPending:e.isFetching,onClick:()=>e.refetch(),variant:"neutral",size:"icon",children:t(ze,{})}),t(ct,{items:u,rowsSelected:l,isFetching:e.isFetching})]}),s("div",{className:"flex gap-icon",children:[t(xt,{}),t(Je,{value:n,onChange:i})]})]})}function J({direction:e,...r}){return e==="asc"?t(je,{className:"size-3.5",...r}):e==="desc"?t(ke,{className:"size-3.5",...r}):t(He,{className:"size-3.5",...r})}function M(e){const r=$(),n=e.columnDef.header;return typeof n=="string"?n:r(e.id)}function yt(e){const r=e.column.columnDef.meta?.displayType,n=e.getValue();if(n==null)return null;switch(r){case"date":return it(n);case"number":return st(n);case"boolean":case"badge":return t(Ne,{className:"uppercase w-full",children:String(n)});case"country":return t(at,{value:n});case"enum":return t("span",{className:"uppercase w-full",children:String(n)});case"fileSize":return lt(n);case"days":return ot(n);default:return String(n)}}function W({header:e}){const r=e.column.columnDef.header;return typeof r=="string"||!r?M(e.column):typeof r=="function"?typeof r(e.getContext())=="string"?M(e.column):L(r,e.getContext()):L(r,e.getContext())}function vt({className:e}){const{tanTable:r}=x(),n=(i,a,g="z-50")=>S("px-icon py-2 text-left body-sm font-medium whitespace-nowrap",i&&`bg-elevation-1 sticky right-0 ${g} text-center justify-center`,a);return s(Ye,{className:S("table-auto",e),children:[t(et,{className:"sticky top-0 z-10",children:r.getHeaderGroups().map(i=>t(K,{children:i.headers.map(a=>s(tt,{scope:"col",colSpan:a.colSpan,className:n(a.id===C,"bg-elevation-1"),children:[!a.column.getCanSort()&&!a.isPlaceholder&&t("div",{className:S("w-full py-1 inline-flex items-center gap-1 body-sm",a.id===C?"justify-center":"justify-start"),children:t(W,{header:a})}),a.column.getCanSort()&&s(y,{variant:"ghost",className:S("w-full p-1",a.id===C?"justify-center":"justify-start"),onPress:a.column.getToggleSortingHandler(),children:[t("span",{children:t(W,{header:a})}),t(J,{direction:a.column.getIsSorted()})]})]},a.id))},i.id))}),t(nt,{children:r.getRowModel().rows.map(i=>t(K,{className:S("transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":i.getIsSelected(),children:i.getVisibleCells().map(a=>{const g=a.column.id===C,l=a.column.columnDef.meta?.displayType?yt(a):L(a.column.columnDef.cell,a.getContext());return t(rt,{className:S(n(g,void 0,"z-1"),g&&"flex justify-center items-center"),children:l},a.id)})},i.id))})]})}const Nn=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],Ct={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"};function wt(e,r){const n=`${r}-${Date.now()}`,i=Y[e][0];switch(e){case"bool":return{id:n,type:e,property:r,operator:i,value:!0};case"string":return{id:n,type:e,property:r,operator:i,value:""};case"date":return{id:n,type:e,property:r,operator:i,value:new Date().toISOString()};case"id":return{id:n,type:e,property:r,operator:i,value:""};case"id-search":return{id:n,type:e,property:r,operator:i,value:[]};case"enum":return{id:n,type:e,property:r,operator:i,value:new Set};case"number":return{id:n,type:e,property:r,operator:i,value:0}}}const Y={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"],number:["eq","ne","gt","gte","lt","lte"]};function xt({className:e,...r}){const{filters:n,query:i,setFilters:a,filterConfig:g}=x(),l=se(null),u=$(),d=Pe({defaultValues:{filters:n},onSubmit:({value:m})=>{a(m.filters)}}),v=Object.keys(g).sort();return t("section",{...r,className:S("flex gap-icon items-center",e),children:s(Ae,{onOpenChange:m=>{m?l.current?.focus():d.handleSubmit()},children:[s("div",{className:"relative",children:[n.length>0&&t("div",{className:"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),t(y,{"aria-label":"Filter",isDisabled:i.isPending||v.length===0,type:"button",size:"icon",variant:"neutral",children:t(Ve,{})})]}),t(De,{className:"w-full p-icon",children:t("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:t(d.Field,{mode:"array",name:"filters",children:m=>s(w,{children:[m.state.value.map((c,h)=>s("div",{className:"flex gap-icon items-center justify-normal",children:[t("span",{className:"body-sm",children:u(c.property)}),t(d.AppField,{name:`filters[${h}].operator`,children:f=>t(f.TfSingleSelect,{items:Y[c.type].map(b=>({id:b,label:t(w,{children:Ct[b]})}))})},c.id),c.type==="bool"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>t(f.TfCheckbox,{autoFocus:!0})}),c.type==="date"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>t(Fe,{autoFocus:!0})}),c.type==="id"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>t(f.TfTextField,{autoFocus:!0})}),c.type==="string"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>t(f.TfTextField,{autoFocus:!0})}),c.type==="number"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>t(f.TfNumberField,{autoFocus:!0})}),c.type==="enum"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>{const b=g[c.property];return b.type!=="enum"?null:t(f.TfMultiSelect,{items:b.options})}}),c.type==="id-search"&&t(d.AppField,{name:`filters[${h}].value`,children:f=>{const b=g[c.property];return b.type!=="id-search"?null:t(We,{resource:b.resource,accessor:b.accessor})}}),t(y,{type:"button",variant:"neutral",size:"icon",onPress:()=>m.removeValue(h),children:t(U,{})})]},c.id)),s("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[t(E,{label:"Add filter",autoFocus:!0,children:v.sort().map(c=>{const h=g[c].type,f=Tt[h];return s(R,{onAction:()=>{const b=wt(h,c);m.pushValue(b)},children:[u(c),t(f,{})]},c)})}),m.state.value.length>0?s(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:[t(U,{}),"Reset"]}):null]})]})})})})]})})}const Tt={"id-search":Ge,bool:B,date:Qe,enum:Ke,id:Be,number:Ue,string:B};export{Ct as C,xt as D,In as DataTable,Z as DataTableContext,Tn as DataTableProvider,Nn as F,wn as getTableCallback,x as useDataTable,xn as useDataTableState};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../stories/story-commons.tsx","../../lib/components/id-search.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnHelper,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { DialogMenu, type DialogMenuAction } from '../components/dialog-menu';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\nimport {\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\nimport { type TableAction, TableActions } from './table-actions';\n\nimport '@tanstack/react-table';\n\nimport type { Cell } from '@tanstack/react-table';\nexport type DisplayType = 'string' | 'boolean' | 'date' | 'number' | 'enum' | 'badge' | 'country' | 'fileSize' | 'days';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\n}\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableFetchFn<in out TData extends object> = (\n p: PaginationState,\n s: SortingState,\n q: string,\n f: Record<string, any>\n) => Promise<{\n total: number;\n data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n getter: (\n q: Record<string, any>\n ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n const query = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searching,\n };\n\n const _f = await getter(query);\n\n return {\n total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n data: _f.data,\n };\n };\n\n const columnHelper = createColumnHelper<T>();\n\n return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst TABLE_ID_COLUMN = [\n cH.accessor('id', {\n header: 'ID',\n meta: {\n displayType: 'string',\n },\n }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n cH.accessor('createdAt', {\n header: 'Creation Date',\n meta: {\n displayType: 'date',\n },\n enableHiding: false,\n }),\n cH.accessor('updatedAt', {\n header: 'Last Updated',\n meta: {\n displayType: 'date',\n },\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: DialogMenuAction<any>[]) => {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => <DialogMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />,\n enableSorting: false,\n }),\n ];\n};\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n resourceName: CtxResourceName;\n callback: TableFetchFn<T>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n rowActions?: DialogMenuAction<T>[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n resourceName,\n columns,\n callback,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n rowActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** Reflect in URL in host application */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n //\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [searchQuery, setSearchQuery] = useState('');\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${resourceName}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${resourceName}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n const [filters, setFilters] = useState(initialFilters);\n\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const { sorting, pagination } = tableState;\n\n const query = useQuery({\n queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n placeholderData: keepPreviousData, // Keep previous data while loading new data\n retry: 0,\n refetchOnWindowFocus: false,\n });\n\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...TABLE_ID_COLUMN,\n ...columns,\n ...TABLE_DEFAULT_DATE_COLUMNS,\n ...getActionColumn(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n {/* Table Actions Section */}\n <section {...props} className={classNames('flex flex-col bg-elevation-1', className)}>\n <Actions />\n {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n <div className=\"w-full overflow-auto border-x h-table relative\" tabIndex={0}>\n {/* Table overlay with loader */}\n {query.isLoading && (\n <TableOverlay className=\"cursor-wait\">\n <Loader />\n </TableOverlay>\n )}\n {/* Table overlay for empty table */}\n {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n // Empty table\n <TableOverlay className=\"cursor-not-allowed\">\n {!query.isFetching &&\n (query.isError ? (\n <span className=\"flex gap-3 justify-center items-center\">\n {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n {/* <span>{query.error}</span> */}\n <IcInfo />\n <span>{query.error.message}</span>\n </span>\n ) : query.data?.data?.length === 0 ? (\n <>No results found.</>\n ) : (\n <>Unknown error. Please contact customer support.</>\n ))}\n </TableOverlay>\n )}\n {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n <TableContent className=\"w-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n )}\n >\n {children}\n </span>\n {/* Keep something in document flow with the correct height */}\n <span className=\"relative h-full w-0 block\" />\n </>\n );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n const { tanTable } = useDataTable();\n const [activeId, setActiveId] = useState<string | null>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={event => {\n const { active } = event;\n setActiveId(active.id.toString());\n }}\n onDragEnd={event => {\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const columnOrder = tanTable.getState().columnOrder;\n const oldIndex = columnOrder.indexOf(active.id.toString());\n const newIndex = columnOrder.indexOf(over.id.toString());\n tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n }\n\n setActiveId(null);\n }}\n >\n <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n <EasyMenu\n label={\n <>\n <IcColumns className=\"inline align-bottom me-1\" />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable, query } = useDataTable();\n const rowCount = query.data?.total ?? 0;\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n aria-label=\"First page\"\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n aria-label=\"Previous page\"\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n aria-label=\"Next page\"\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n aria-label=\"Last page\"\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n\n const filteredActions = tableActions.filter(ta => ta.bulk === hasSelectedRows);\n\n return (\n <section className=\"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button\n aria-label=\"Refresh\"\n isPending={query.isFetching}\n onClick={() => query.refetch()}\n variant={'neutral'}\n size={'icon'}\n >\n <IcRefresh />\n </Button>\n\n <TableActions items={filteredActions} rowsSelected={selectedRows} isFetching={query.isFetching} />\n </div>\n <div className=\"flex gap-icon\">\n <DataTableFilter />\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return formatDate(value);\n\n case 'number':\n return formatNumber(value);\n case 'boolean':\n case 'badge':\n return <Badge className=\"uppercase w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-center`,\n className\n );\n return (\n <TableComponent className={classNames('table-auto', className)}>\n <TableHeader className=\"sticky top-0 z-10\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead\n scope=\"col\"\n key={header.id}\n colSpan={header.colSpan}\n className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n onPress={header.column.getToggleSortingHandler()}\n >\n <span>\n <HeaderText header={header} />\n </span>\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => {\n const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n","import type { paths } from '@cryptlex/web-api-types/develop';\nimport { useMutation } from '@tanstack/react-query';\nimport createClient, { type Middleware } from 'openapi-fetch';\nimport { Button } from '../lib/components/button';\nimport { DataTable, DataTableProvider, getTableCallback, useDataTableState } from '../lib/components/data-table';\nimport type { FiltersConfig } from '../lib/components/data-table-filter';\nimport { DialogFooter, DialogHeader, DialogTitle } from '../lib/components/dialog';\nimport { DialogMenuContentProps, type DialogMenuAction } from '../lib/components/dialog-menu';\nimport { IcCreate, IcDelete, IcExport, IcTag, IcUpdate } from '../lib/components/icons';\nimport type { TableAction, TableActionDialogContentProps } from '../lib/components/table-actions';\nimport { toast } from '../lib/components/toast';\nimport type { ApiSchema } from '../lib/utilities/resources';\nexport type PlanDto = ApiSchema<'PlanDto'>;\n// Create a client instance to interact with the API\nexport const ctxClient = createClient<paths>({\n baseUrl: 'https://api.dev.cryptlex.com',\n});\nconst authMiddleware: Middleware = {\n async onRequest({ request }) {\n return request;\n },\n async onResponse({ response }) {\n if (!response.ok) {\n throw await response.json();\n }\n return response;\n },\n};\nctxClient.use(authMiddleware);\n\nfunction DeleteDialog({ close, data }: Readonly<DialogMenuContentProps<PlanDto>>) {\n const deleteMutation = useMutation({\n mutationFn: async () =>\n await ctxClient.DELETE('/v3/plans/{id}', { params: { path: { id: data.id } } }).then(d => d.data),\n onSuccess: () => {\n toast({ title: 'Item deleted', variant: 'success' });\n close();\n },\n onError: error => {\n toast({ title: error.message, variant: 'destructive' });\n },\n });\n return (\n <>\n <DialogHeader>\n <DialogTitle>Delete</DialogTitle>\n </DialogHeader>\n <div className=\"py-icon\">\n <p> Are you sure you want to delete this item?</p>\n\n <div className=\"mt-2 body-sm text-muted\">Name: {data.name}</div>\n <div className=\"body-sm text-muted\">ID: {data.id}</div>\n </div>\n <DialogFooter>\n <Button onPress={close}>Cancel</Button>\n <Button\n variant=\"destructive\"\n onPress={() => deleteMutation.mutate()}\n isPending={deleteMutation.isPending}\n isDisabled={deleteMutation.isPending}\n >\n Delete\n </Button>\n </DialogFooter>\n </>\n );\n}\n\nfunction BulkDeleteDialog({ close, data }: Readonly<TableActionDialogContentProps<PlanDto>>) {\n const deleteMutation = useMutation({\n mutationFn: async () => {\n // Delete all selected plans\n await Promise.all(\n data.map(plan => ctxClient.DELETE('/v3/plans/{id}', { params: { path: { id: plan.id } } }))\n );\n },\n onSuccess: () => {\n toast({ title: `${data.length} item(s) deleted`, variant: 'success' });\n close();\n },\n onError: error => {\n toast({ title: error.message, variant: 'destructive' });\n },\n });\n return (\n <>\n <DialogHeader>\n <DialogTitle>Bulk Delete</DialogTitle>\n </DialogHeader>\n <div className=\"py-icon\">\n <p>Are you sure you want to delete {data.length} selected item(s)?</p>\n <div className=\"mt-2 body-sm text-muted\">\n This action cannot be undone. The following items will be deleted:\n </div>\n <ul className=\"mt-2 list-disc list-inside body-sm text-muted\">\n {data.map(plan => (\n <li key={plan.id}>\n {plan.name} (ID: {plan.id})\n </li>\n ))}\n </ul>\n </div>\n <DialogFooter>\n <Button onPress={close}>Cancel</Button>\n <Button\n variant=\"destructive\"\n onPress={() => deleteMutation.mutate()}\n isPending={deleteMutation.isPending}\n isDisabled={deleteMutation.isPending}\n >\n Delete {data.length} item(s)\n </Button>\n </DialogFooter>\n </>\n );\n}\nexport function DataTableUsage() {\n // Fetch function to get data from the API\n const { callback, columnHelper } = getTableCallback(query => ctxClient.GET('/v3/plans', { params: { query } }));\n\n // Define columns for the table\n const columns = [\n columnHelper.accessor('name', {}),\n\n columnHelper.accessor('displayName', {}),\n\n columnHelper.accessor('tier', {}),\n columnHelper.accessor('activationLogsRetentionPeriod', {}),\n columnHelper.accessor('allowActivationLogs', {\n meta: {\n displayType: 'boolean',\n },\n }),\n columnHelper.accessor('allowAuditLogs', {\n meta: {\n displayType: 'boolean',\n },\n }),\n columnHelper.accessor('allowedProductSpace', {\n meta: {\n displayType: 'fileSize',\n },\n }),\n columnHelper.accessor('allowCustomDomain', {\n meta: {\n displayType: 'boolean',\n },\n }),\n columnHelper.accessor('interval', {\n meta: {\n displayType: 'enum',\n },\n }),\n columnHelper.accessor('paddleId', {}),\n columnHelper.accessor('paddlePriceId', {}),\n columnHelper.accessor('allowedUsers', {\n meta: {\n displayType: 'number',\n },\n }),\n columnHelper.accessor('allowedActivations', {\n meta: {\n displayType: 'number',\n },\n }),\n columnHelper.accessor('allowedOrganizations', {\n meta: {\n displayType: 'number',\n },\n }),\n columnHelper.accessor('allowedAdmins', {\n meta: {\n displayType: 'number',\n },\n }),\n ];\n\n // Filterable fields for the table\n const filterConfig: FiltersConfig<'GetAllPlans'> = {\n id: {\n type: 'id-search',\n accessor: 'id',\n resource: 'plan',\n },\n createdAt: { type: 'date' },\n updatedAt: { type: 'date' },\n };\n\n const state = useDataTableState({\n resourceName: 'plan',\n columns,\n columnsToHideByDefault: {},\n allowSelection: true,\n callback: callback,\n filterConfig: filterConfig,\n rowActions,\n initialFilters: [],\n tableActions: [\n {\n type: 'action',\n label: 'Create',\n icon: IcCreate,\n onClick: () => alert('Create!'),\n bulk: false,\n tooltip: 'Create',\n },\n {\n type: 'action',\n label: 'Export',\n icon: IcExport,\n onClick: () => alert('Export!'),\n bulk: true,\n tooltip: 'Export',\n },\n {\n type: 'dialog',\n label: 'Delete',\n icon: IcDelete,\n component: BulkDeleteDialog,\n bulk: true,\n tooltip: 'Bulk Delete',\n variant: 'destructive',\n },\n {\n type: 'action',\n label: 'Tag',\n icon: IcTag,\n onClick: (_, t) => alert(`Tag! ${JSON.stringify(t.map(r => r.id))}`),\n bulk: true,\n tooltip: 'Tag',\n },\n ] satisfies TableAction<PlanDto>[],\n });\n\n return (\n <DataTableProvider {...state}>\n <DataTable className=\"[--spacing-table:20rem]\" />\n </DataTableProvider>\n );\n}\n\nexport const rowActions = [\n {\n type: 'action',\n label: 'Edit',\n icon: IcUpdate,\n onPress: (q: PlanDto) => alert(JSON.stringify(q)),\n },\n {\n type: 'dialog',\n label: 'Delete',\n icon: IcDelete,\n component: DeleteDialog,\n },\n] satisfies DialogMenuAction<PlanDto>[];\n","'use client';\nimport { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Select as AriaSelect, Autocomplete } from 'react-aria-components';\n\nimport { ctxClient } from '../../stories/story-commons';\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { RESOURCE_ENDPOINT_MAP } from '../utilities/resources';\nimport { FormField, type FormFieldProps } from './form';\nimport { SelectPopover, SelectTrigger } from './select';\n\n/**\n * Minimal resource shape used by the ID search inputs.\n * Only `id` and `name` are required.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name: string;\n};\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n return (\n Array.isArray(value) && value.every(item => item && typeof item === 'object' && 'id' in item && 'name' in item)\n );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible Autocomplete + Menu listbox\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n * - Automatically generates search function based on resource name using RESOURCE_ENDPOINT_MAP\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)\n * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)\n *\n * @param props - props object (see inline property JSDoc for the most important fields)\n *\n * @remarks\n * - Search is automatically handled based on the `resource` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `renderLabel` must convert `value` to a readable string for the control button.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * resource=\"user\"\n * value={ownerId}\n * onChange={setOwnerId}\n * renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n isInvalid,\n onBlur,\n resource,\n onChange,\n value,\n renderLabel,\n accessor,\n defaultParams,\n className,\n ...props\n}: FormFieldProps & {\n resource: CtxResourceName;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n /** Controlled value. */\n value: V;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: V) => void;\n /** Controlled change handler. */\n onChange: (v: V) => void;\n /** Render a human-readable label for the current value using the latest data. */\n renderLabel: (v: V, data: T[] | undefined) => string;\n /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n defaultParams?: Record<'path' | 'query', any>;\n /** Optional className to customize the trigger button styling. */\n className?: string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n if (resource === 'profile') {\n throw Error('Resource \"profile\" is not supported with IdSearch since it is not a searchable resource.');\n }\n\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n const [search, _setSearch] = useState('');\n const { data, isError, isFetching, error } = useQuery({\n queryKey: [resource, 'id', search],\n queryFn: async (): Promise<T[]> => {\n const result = await ctxClient.GET(RESOURCE_ENDPOINT_MAP[resource], {\n params: {\n query: {\n search,\n ...defaultParams?.query,\n },\n path: {\n ...defaultParams?.path,\n },\n },\n });\n\n // Type narrowing: result.data is inferred as never due to complex union types\n // We use unknown to bypass this and then validate with our type guard\n const responseData: unknown = result.data;\n if (responseData && isSearchableResourceArray<T>(responseData)) {\n return responseData;\n }\n return [];\n },\n });\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <AriaSelect isInvalid={isInvalid}>\n <PopoverTrigger\n onOpenChange={o => {\n if (!o) {\n // searchInputRef.current?.focus();\n onBlur?.(value);\n }\n }}\n >\n <SelectTrigger id={fieldId} isDisabled={isDisabled} className={className ?? 'w-full'}>\n {renderLabel(value, data)}\n </SelectTrigger>\n <SelectPopover placement=\"bottom start\">\n <Autocomplete inputValue={search} onInputChange={_setSearch}>\n <SearchField className={'p-2'} autoFocus />\n {isFetching && (\n <div className=\"p-input\">\n <Loader className=\"mx-auto\" />\n </div>\n )}\n {!isFetching && !isError && (\n <Menu\n {...props}\n className={'max-h-48'}\n items={data}\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <MenuItem key={item[accessor]} id={item[accessor]}>\n {item.name}\n </MenuItem>\n )}\n </Menu>\n )}\n {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n </Autocomplete>\n </SelectPopover>\n </PopoverTrigger>\n </AriaSelect>\n </FormField>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n 'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={[props.value]}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n selectionMode=\"single\"\n {...props}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n 'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={props.value}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n selectionMode=\"multiple\"\n renderLabel={(v, d) => v?.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { TfDatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utilities/form-hook';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { TfMultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V | undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string,and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n const id = `${property}-${Date.now()}`;\n const operator = FilterOperations[type][0];\n\n switch (type) {\n case 'bool':\n return { id, type, property, operator, value: true };\n case 'string':\n return { id, type, property, operator, value: '' };\n case 'date':\n return { id, type, property, operator, value: new Date().toISOString() };\n case 'id':\n return { id, type, property, operator, value: '' };\n case 'id-search':\n return { id, type, property, operator, value: [] };\n case 'enum':\n return { id, type, property, operator, value: new Set<string | number>() };\n case 'number':\n return { id, type, property, operator, value: 0 };\n }\n}\n\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter\n | NumberLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | ({ type: 'id-search' } & Pick<React.ComponentProps<typeof TfMultipleIdSearchInput>, 'accessor' | 'resource'>)\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\n | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n bool: ['eq'],\n enum: ['in', 'nin'],\n id: ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n date: ['lt', 'gt'],\n number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n ? Record<string, FilterConfig>\n : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: TableFilter[] } = {\n filters,\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n setFilters(value.filters);\n },\n });\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={classNames('flex gap-icon items-center', className)}>\n <PopoverTrigger\n onOpenChange={o => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}\n >\n <div className=\"relative\">\n {filters.length > 0 && (\n <div className=\"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n )}\n <Button\n aria-label=\"Filter\"\n isDisabled={query.isPending || filterKeys.length === 0}\n type=\"button\"\n size={'icon'}\n variant={'neutral'}\n >\n <IcFilter />\n </Button>\n </div>\n {/* TODO, icon maps with dynamic imports? */}\n {/* TODO open popover with form for property specific filter */}\n {/* TODO, icons here??? */}\n <Popover className=\"w-full p-icon\">\n <form\n onSubmit={e => {\n e.preventDefault();\n }}\n className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n >\n <form.Field mode=\"array\" name={'filters'}>\n {field => {\n return (\n <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n {sf => (\n <sf.TfSingleSelect\n items={FilterOperations[lf.type].map(op => ({\n id: op,\n label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n }))}\n />\n )}\n </form.AppField>\n\n {lf.type === 'bool' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfCheckbox autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'date' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => <TfDatePicker autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'id' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'string' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'number' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfNumberField autoFocus />}\n </form.AppField>\n )}\n\n {lf.type === 'enum' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => {\n const config = filterConfig[lf.property];\n if (config.type !== 'enum') return null;\n return <sf.TfMultiSelect items={config.options} />;\n }}\n </form.AppField>\n )}\n\n {lf.type === 'id-search' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => {\n const config = filterConfig[lf.property];\n if (config.type !== 'id-search') return null;\n return (\n <TfMultipleIdSearchInput\n resource={config.resource}\n accessor={config.accessor}\n />\n );\n }}\n </form.AppField>\n )}\n\n <Button\n type=\"button\"\n variant=\"neutral\"\n size=\"icon\"\n onPress={() => field.removeValue(i)}\n >\n <IcRemove />\n </Button>\n </div>\n );\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add filter\" autoFocus>\n {filterKeys.sort().map(k => {\n const type = filterConfig[k].type;\n const Icon = FilterIcon[type];\n return (\n <MenuItem\n key={k}\n onAction={() => {\n const newFilter = createNewFilter(type, k);\n field.pushValue(newFilter);\n }}\n >\n {resourceFormatter(k)}\n <Icon />\n </MenuItem>\n );\n })}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => {\n field.setValue([]);\n }}\n >\n <IcRemove />\n Reset\n </Button>\n ) : null}\n </div>\n </>\n );\n }}\n </form.Field>\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n 'id-search': IcFile,\n bool: IcCheck,\n date: IcDate,\n enum: IcLicense,\n id: IcAccount,\n number: IcMinus,\n string: IcCheck,\n};\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","ACTIONS_COLUMN_ID","getActionColumn","rowActions","DialogMenu","IcMoreVertical","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","selectedRows","r","filteredActions","ta","IcRefresh","TableActions","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","ctxClient","createClient","authMiddleware","request","response","isSearchableResourceArray","item","BaseIdSearchInput","label","description","errorMessage","requiredIndicator","isDisabled","isInvalid","onBlur","resource","onChange","renderLabel","accessor","defaultParams","generatedId","useId","fieldId","search","_setSearch","data","isError","isFetching","error","responseData","RESOURCE_ENDPOINT_MAP","FormField","AriaSelect","PopoverTrigger","o","SelectTrigger","SelectPopover","Autocomplete","Menu","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","filterKeys","IcFilter","Popover","lf","i","sf","op","TfDatePicker","config","IcRemove","k","Icon","FilterIcon","newFilter","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnHelper,\n type ColumnOrderState,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n type Header,\n type PaginationState,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { DialogMenu, type DialogMenuAction } from '../components/dialog-menu';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { useResourceFormatter } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { Checkbox } from './checkbox';\nimport {\n IcColumns,\n IcFirst,\n IcGrip,\n IcInfo,\n IcLast,\n IcLeft,\n IcMoreVertical,\n IcRefresh,\n IcRight,\n IcSortAsc,\n IcSortDesc,\n IcSortNone,\n} from './icons';\nimport { type TableAction, TableActions } from './table-actions';\n\nimport '@tanstack/react-table';\n\nimport type { Cell } from '@tanstack/react-table';\nexport type DisplayType = 'string' | 'boolean' | 'date' | 'number' | 'enum' | 'badge' | 'country' | 'fileSize' | 'days';\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n displayType: DisplayType;\n }\n}\n\n/** Reserved name for actions column */\n// export const ACTIONS_COLUMN_ID = 'tableActions';\n\nexport type TableFetchFn<in out TData extends object> = (\n p: PaginationState,\n s: SortingState,\n q: string,\n f: Record<string, any>\n) => Promise<{\n total: number;\n data: TData[] | undefined;\n}>;\nexport function getTableCallback<T extends object>(\n getter: (\n q: Record<string, any>\n ) => Promise<{ data?: T[]; error?: { code?: string | null; message: string }; response: Response }>\n): { callback: TableFetchFn<T>; columnHelper: ColumnHelper<T> } {\n const callback: TableFetchFn<T> = async (pagination, sorting, searching, filters) => {\n const query = {\n ...filters,\n page: pagination.pageIndex + 1,\n limit: pagination.pageSize,\n sort: generateSortParam(sorting[0]),\n search: searching,\n };\n\n const _f = await getter(query);\n\n return {\n total: Number.parseInt(_f.response.headers.get('Pagination-Count') || '0'),\n data: _f.data,\n };\n };\n\n const columnHelper = createColumnHelper<T>();\n\n return { callback, columnHelper };\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n if (sort) {\n if (sort.desc) {\n return `-${sort.id}`;\n } else {\n return `+${sort.id}`;\n }\n } else {\n return '-createdAt';\n }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n cH.accessor('checkbox', {\n header: ({ table }) => (\n <Checkbox\n isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n onChange={() => table.toggleAllPageRowsSelected()}\n aria-label=\"Select all\"\n />\n ),\n\n cell: ({ row }) => (\n <Checkbox isSelected={row.getIsSelected()} onChange={() => row.toggleSelected()} aria-label=\"Select row\" />\n ),\n enableSorting: false,\n enableHiding: false,\n }),\n];\n\nconst TABLE_ID_COLUMN = [\n cH.accessor('id', {\n header: 'ID',\n meta: {\n displayType: 'string',\n },\n }),\n];\nconst TABLE_DEFAULT_DATE_COLUMNS = [\n cH.accessor('createdAt', {\n header: 'Creation Date',\n meta: {\n displayType: 'date',\n },\n enableHiding: false,\n }),\n cH.accessor('updatedAt', {\n header: 'Last Updated',\n meta: {\n displayType: 'date',\n },\n enableHiding: false,\n }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nconst getActionColumn = (rowActions: DialogMenuAction<any>[]) => {\n if (rowActions.length === 0) return [];\n\n return [\n cH.accessor(ACTIONS_COLUMN_ID, {\n header: 'Actions',\n id: ACTIONS_COLUMN_ID,\n enableHiding: false,\n cell: ({ row }) => <DialogMenu label={<IcMoreVertical />} data={row.original} items={rowActions} />,\n enableSorting: false,\n }),\n ];\n};\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n resourceName: CtxResourceName;\n callback: TableFetchFn<T>;\n columns: ColumnDef<T, any>[];\n tableActions: TableAction<T>[];\n columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n allowSelection?: boolean;\n filterConfig: FiltersConfig<TOperation>;\n initialFilters: TableFilter[];\n rowActions?: DialogMenuAction<T>[];\n};\n\ntype DataTableState = {\n sorting: SortingState;\n pagination: PaginationState;\n};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n resourceName,\n columns,\n callback,\n filterConfig,\n columnsToHideByDefault = {},\n allowSelection = false,\n initialFilters = [],\n tableActions,\n rowActions,\n}: DataTableFactory<T, TOperation>) {\n const [tableState, _setTableState] = useState<DataTableState>({\n /** Reflect in URL in host application */\n pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n sorting: [], // Sorting state\n });\n //\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n /** Reflect in URL in host application */\n const [searchQuery, setSearchQuery] = useState('');\n\n const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(\n `${resourceName}_ctx_column_order_preference`,\n []\n );\n const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n `${resourceName}_ctx_column_visibility_preference`,\n {\n id: false,\n ...columnsToHideByDefault,\n }\n );\n\n const [filters, setFilters] = useState(initialFilters);\n\n const mergedFilters = useMemo(() => {\n // TODO, generic transform fn\n return filters\n .map(tf => {\n if (Array.isArray(tf.value)) {\n return {\n [tf.property]: {\n [tf.operator]: tf.value.join(','),\n },\n };\n }\n return {\n [tf.property]: {\n [tf.operator]: tf.value,\n },\n };\n })\n .reduce((acc, current) => {\n return merge(acc, current);\n }, {});\n }, [filters]);\n\n // Update table state with new values\n const updateTableState = (updates: Partial<DataTableState>) => {\n _setTableState(prev => ({ ...prev, ...updates }));\n };\n\n const { sorting, pagination } = tableState;\n\n const query = useQuery({\n queryKey: [resourceName, pagination, sorting, searchQuery, mergedFilters],\n queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n placeholderData: keepPreviousData, // Keep previous data while loading new data\n retry: 0,\n refetchOnWindowFocus: false,\n });\n\n /**\n * ID,createdAt and updatedAt will be added by default for all tables\n * If selection is allowed, checkbox will be added\n * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n * If there are actions for the table, they will be placed fixed at the right side of table.\n */\n const cols: ColumnDef<any, any>[] = [\n ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n ...TABLE_ID_COLUMN,\n ...columns,\n ...TABLE_DEFAULT_DATE_COLUMNS,\n ...getActionColumn(rowActions ?? []),\n ];\n\n // Type-guard for updater\n function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n return typeof updater === 'function';\n }\n // Utility function to resolve updater\n function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n if (isUpdaterFunction(updater)) {\n return updater(currentValue);\n }\n return updater;\n }\n\n // Use react-table's hook to create the table instance\n const tanTable = useReactTable({\n data: query.data?.data ?? [],\n columns: cols,\n getCoreRowModel: getCoreRowModel(),\n rowCount: query.data?.total,\n manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n onPaginationChange: updater => {\n updateTableState({ pagination: resolveUpdater(updater, pagination) });\n },\n manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n onSortingChange: updater => {\n setRowSelection({});\n updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n },\n manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n onColumnVisibilityChange: updater => {\n setColumnVisibility(resolveUpdater(updater, columnVisibility));\n },\n onRowSelectionChange: updater => {\n setRowSelection(resolveUpdater(updater, rowSelection));\n },\n onColumnOrderChange: updater => {\n setColumnOrder(resolveUpdater(updater, columnOrder));\n },\n state: {\n sorting: sorting,\n columnVisibility: columnVisibility,\n pagination: pagination,\n rowSelection: rowSelection,\n columnOrder: columnOrder,\n },\n meta: {\n refetch: query.refetch,\n },\n });\n\n // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n // This populates the columnIds in the columnOrder state\n useEffect(() => {\n setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n }, []);\n\n return {\n tableState,\n updateTableState,\n query,\n setSearchQuery,\n searchQuery,\n tanTable,\n mergedFilters,\n filters,\n setFilters,\n filterConfig,\n tableActions,\n } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n const ctx = useContext(DataTableContext);\n if (!ctx) {\n throw Error('DataTable should be used within DataTableProvider.');\n }\n return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n children,\n ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'>;\nexport function DataTable({ className, ...props }: DataTableProps) {\n const { query, tanTable } = useDataTable();\n\n return (\n <>\n {/* Table Actions Section */}\n <section {...props} className={classNames('flex flex-col bg-elevation-1', className)}>\n <Actions />\n {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n <div className=\"w-full overflow-auto border-x h-table relative\" tabIndex={0}>\n {/* Table overlay with loader */}\n {query.isLoading && (\n <TableOverlay className=\"cursor-wait\">\n <Loader />\n </TableOverlay>\n )}\n {/* Table overlay for empty table */}\n {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n // Empty table\n <TableOverlay className=\"cursor-not-allowed\">\n {!query.isFetching &&\n (query.isError ? (\n <span className=\"flex gap-3 justify-center items-center\">\n {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n {/* <span>{query.error}</span> */}\n <IcInfo />\n <span>{query.error.message}</span>\n </span>\n ) : query.data?.data?.length === 0 ? (\n <>No results found.</>\n ) : (\n <>Unknown error. Please contact customer support.</>\n ))}\n </TableOverlay>\n )}\n {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n <TableContent className=\"w-full\" />\n )}\n </div>\n\n {/* Table Footer Section with Pagination and Column Picker */}\n <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n <div className=\"flex gap-icon\">\n <ColumnPicker />\n <PageSize />\n </div>\n <Paginator />\n </div>\n </section>\n </>\n );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <>\n <span\n className={classNames(\n className,\n 'absolute top-0 bg-elevation-1 text-foreground z-20 size-full body-sm flex items-center justify-center'\n )}\n >\n {children}\n </span>\n {/* Keep something in document flow with the correct height */}\n <span className=\"relative h-full w-0 block\" />\n </>\n );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n const { tanTable } = useDataTable();\n const [activeId, setActiveId] = useState<string | null>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={event => {\n const { active } = event;\n setActiveId(active.id.toString());\n }}\n onDragEnd={event => {\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const columnOrder = tanTable.getState().columnOrder;\n const oldIndex = columnOrder.indexOf(active.id.toString());\n const newIndex = columnOrder.indexOf(over.id.toString());\n tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n }\n\n setActiveId(null);\n }}\n >\n <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n <EasyMenu\n label={\n <>\n <IcColumns className=\"inline align-bottom me-1\" />\n Columns\n </>\n }\n selectionMode=\"multiple\"\n items={tanTable.getAllFlatColumns()}\n // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n >\n <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n (select all)\n </MenuItem>\n {tanTable.getState().columnOrder.map(colId => {\n const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n // Don't show checkbox and actions columns in picker\n if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n return <SortableItem key={col.id} column={col} />;\n })}\n </EasyMenu>\n <DragOverlay>\n {activeId ? (\n <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n ) : null}\n </DragOverlay>\n </SortableContext>\n </DndContext>\n );\n\n function SortableItem({ column }: { column: Column<any, unknown> }) {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n zIndex: '999',\n };\n return (\n <MenuItem\n ref={setNodeRef}\n style={style}\n {...attributes}\n id={column.id}\n onAction={() => column.toggleVisibility()}\n isDisabled={!column.getCanHide()}\n className=\"flex items-center\"\n >\n <IcGrip {...listeners} className=\"size-icon cursor-grab\" />\n {getColumnHeaderText(column)}\n {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n </MenuItem>\n );\n }\n}\n\nfunction Paginator() {\n const { tanTable, query } = useDataTable();\n const rowCount = query.data?.total ?? 0;\n return (\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap body-sm text-muted\">\n {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n rowCount\n )} of ${rowCount?.toLocaleString()}`}\n </span>\n\n <Button\n aria-label=\"First page\"\n onPress={() => tanTable.firstPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcFirst />\n </Button>\n <Button\n aria-label=\"Previous page\"\n onPress={() => tanTable.previousPage()}\n isDisabled={!tanTable.getCanPreviousPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLeft />\n </Button>\n <Button\n aria-label=\"Next page\"\n onPress={() => tanTable.nextPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcRight />\n </Button>\n <Button\n aria-label=\"Last page\"\n onClick={() => tanTable.lastPage()}\n isDisabled={!tanTable.getCanNextPage()}\n variant=\"neutral\"\n size={'icon'}\n >\n <IcLast />\n </Button>\n </div>\n );\n}\n\nfunction PageSize() {\n const { tanTable } = useDataTable();\n const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n return (\n <EasyMenu\n label={tanTable.getState().pagination.pageSize.toString()}\n selectionMode=\"single\"\n selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n >\n {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n </EasyMenu>\n );\n}\n\nfunction Actions() {\n const { query, tanTable, searchQuery, setSearchQuery, tableActions } = useDataTable();\n const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n\n const filteredActions = tableActions.filter(ta => ta.bulk === hasSelectedRows);\n\n return (\n <section className=\"flex bg-elevation-1 justify-between my-0 p-icon border gap-icon overflow-auto\">\n <div className=\"flex gap-icon\">\n <Button\n aria-label=\"Refresh\"\n isPending={query.isFetching}\n onClick={() => query.refetch()}\n variant={'neutral'}\n size={'icon'}\n >\n <IcRefresh />\n </Button>\n\n <TableActions items={filteredActions} rowsSelected={selectedRows} isFetching={query.isFetching} />\n </div>\n <div className=\"flex gap-icon\">\n <DataTableFilter />\n {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n </div>\n </section>\n );\n}\n\nfunction SortIcon({\n direction,\n ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n const resourceFormatter = useResourceFormatter();\n const headerDef = column.columnDef.header;\n return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n const displayType = cell.column.columnDef.meta?.displayType;\n const value = cell.getValue();\n\n if (value === null || value === undefined) {\n return null;\n }\n\n switch (displayType) {\n case 'date':\n return formatDate(value);\n\n case 'number':\n return formatNumber(value);\n case 'boolean':\n case 'badge':\n return <Badge className=\"uppercase w-full\">{String(value)}</Badge>;\n case 'country':\n return <CountryName value={value} />;\n case 'enum':\n return <span className=\"uppercase w-full\">{String(value)}</span>;\n case 'fileSize':\n return formatFilesize(value);\n case 'days':\n return formatDays(value);\n default:\n return String(value);\n }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n const headerDef = header.column.columnDef.header;\n\n if (typeof headerDef === 'string' || !headerDef) {\n return getColumnHeaderText(header.column);\n }\n\n if (typeof headerDef === 'function') {\n const result = headerDef(header.getContext());\n if (typeof result === 'string') {\n return getColumnHeaderText(header.column);\n }\n return flexRender(headerDef, header.getContext());\n }\n\n return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n const { tanTable } = useDataTable();\n const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n classNames(\n 'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n isSticky && `bg-elevation-1 sticky right-0 ${zIndex} text-center justify-center`,\n className\n );\n return (\n <TableComponent className={classNames('table-auto', className)}>\n <TableHeader className=\"sticky top-0 z-10\">\n {tanTable.getHeaderGroups().map(headerGroup => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map(header => (\n <TableHead\n scope=\"col\"\n key={header.id}\n colSpan={header.colSpan}\n className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-elevation-1')}\n >\n {!header.column.getCanSort() && !header.isPlaceholder && (\n <div\n className={classNames(\n 'w-full py-1 inline-flex items-center gap-1 body-sm',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n >\n <HeaderText header={header} />\n </div>\n )}\n {header.column.getCanSort() && (\n <Button\n variant=\"ghost\"\n className={classNames(\n 'w-full p-1',\n header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n )}\n onPress={header.column.getToggleSortingHandler()}\n >\n <span>\n <HeaderText header={header} />\n </span>\n <SortIcon direction={header.column.getIsSorted()} />\n </Button>\n )}\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {tanTable.getRowModel().rows.map(row => (\n <TableRow\n className={classNames(\n 'transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n )}\n key={row.id}\n data-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map(cell => {\n const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n const cellContent = cell.column.columnDef.meta?.displayType\n ? renderCellByDisplayType(cell)\n : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n return (\n <TableCell\n key={cell.id}\n className={classNames(\n tableCellStyle(isActionsColumn, undefined, 'z-1'),\n isActionsColumn && 'flex justify-center items-center'\n )}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </TableRow>\n ))}\n </TableBody>\n </TableComponent>\n );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { TfDatePicker } from '../components/date-picker';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utilities/form-hook';\nimport { useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { IcAccount, IcCheck, IcDate, IcFile, IcFilter, IcLicense, IcMinus, IcRemove, type CtxIcon } from './icons';\nimport { TfMultipleIdSearchInput } from './id-search';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V | undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string,and converts it to a ZonedDateTime\ntype DateLocalFilter = BaseLocalFilter<'date', string>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(type: FilterType, property: string): TableFilter {\n const id = `${property}-${Date.now()}`;\n const operator = FilterOperations[type][0];\n\n switch (type) {\n case 'bool':\n return { id, type, property, operator, value: true };\n case 'string':\n return { id, type, property, operator, value: '' };\n case 'date':\n return { id, type, property, operator, value: new Date().toISOString() };\n case 'id':\n return { id, type, property, operator, value: '' };\n case 'id-search':\n return { id, type, property, operator, value: [] };\n case 'enum':\n return { id, type, property, operator, value: new Set<string | number>() };\n case 'number':\n return { id, type, property, operator, value: 0 };\n }\n}\n\nexport type TableFilter =\n | EnumLocalFilter\n | IdLocalFilter\n | BoolLocalFilter\n | StringLocalFilter\n | DateLocalFilter\n | IdSearchLocalFilter\n | NumberLocalFilter;\n\nexport type FilterConfig =\n | { type: 'enum'; options: MultiSelectProps['items'] }\n | ({ type: 'id-search' } & Pick<React.ComponentProps<typeof TfMultipleIdSearchInput>, 'accessor' | 'resource'>)\n | { type: 'id' }\n | { type: 'bool' }\n | { type: 'string' }\n | { type: 'date' }\n | { type: 'number' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n bool: ['eq'],\n enum: ['in', 'nin'],\n id: ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n date: ['lt', 'gt'],\n number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n ? Record<string, FilterConfig>\n : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: TableFilter[] } = {\n filters,\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n setFilters(value.filters);\n },\n });\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={classNames('flex gap-icon items-center', className)}>\n <PopoverTrigger\n onOpenChange={o => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}\n >\n <div className=\"relative\">\n {filters.length > 0 && (\n <div className=\"size-2 rounded-full absolute bg-primary/90 z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n )}\n <Button\n aria-label=\"Filter\"\n isDisabled={query.isPending || filterKeys.length === 0}\n type=\"button\"\n size={'icon'}\n variant={'neutral'}\n >\n <IcFilter />\n </Button>\n </div>\n {/* TODO, icon maps with dynamic imports? */}\n {/* TODO open popover with form for property specific filter */}\n {/* TODO, icons here??? */}\n <Popover className=\"w-full p-icon\">\n <form\n onSubmit={e => {\n e.preventDefault();\n }}\n className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n >\n <form.Field mode=\"array\" name={'filters'}>\n {field => {\n return (\n <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n {sf => (\n <sf.TfSingleSelect\n items={FilterOperations[lf.type].map(op => ({\n id: op,\n label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n }))}\n />\n )}\n </form.AppField>\n\n {lf.type === 'bool' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfCheckbox autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'date' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => <TfDatePicker autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'id' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'string' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfTextField autoFocus />}\n </form.AppField>\n )}\n {lf.type === 'number' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => <sf.TfNumberField autoFocus />}\n </form.AppField>\n )}\n\n {lf.type === 'enum' && (\n <form.AppField name={`filters[${i}].value`}>\n {sf => {\n const config = filterConfig[lf.property];\n if (config.type !== 'enum') return null;\n return <sf.TfMultiSelect items={config.options} />;\n }}\n </form.AppField>\n )}\n\n {lf.type === 'id-search' && (\n <form.AppField name={`filters[${i}].value`}>\n {_ => {\n const config = filterConfig[lf.property];\n if (config.type !== 'id-search') return null;\n return (\n <TfMultipleIdSearchInput\n resource={config.resource}\n accessor={config.accessor}\n />\n );\n }}\n </form.AppField>\n )}\n\n <Button\n type=\"button\"\n variant=\"neutral\"\n size=\"icon\"\n onPress={() => field.removeValue(i)}\n >\n <IcRemove />\n </Button>\n </div>\n );\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add filter\" autoFocus>\n {filterKeys.sort().map(k => {\n const type = filterConfig[k].type;\n const Icon = FilterIcon[type];\n return (\n <MenuItem\n key={k}\n onAction={() => {\n const newFilter = createNewFilter(type, k);\n field.pushValue(newFilter);\n }}\n >\n {resourceFormatter(k)}\n <Icon />\n </MenuItem>\n );\n })}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => {\n field.setValue([]);\n }}\n >\n <IcRemove />\n Reset\n </Button>\n ) : null}\n </div>\n </>\n );\n }}\n </form.Field>\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n 'id-search': IcFile,\n bool: IcCheck,\n date: IcDate,\n enum: IcLicense,\n id: IcAccount,\n number: IcMinus,\n string: IcCheck,\n};\n"],"names":["getTableCallback","getter","callback","pagination","sorting","searching","filters","query","generateSortParam","_f","columnHelper","createColumnHelper","sort","cH","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","ACTIONS_COLUMN_ID","getActionColumn","rowActions","DialogMenu","IcMoreVertical","useDataTableState","resourceName","columns","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","tableActions","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","useQuery","keepPreviousData","cols","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","className","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","IcInfo","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","IcColumns","MenuItem","colId","col","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","IcGrip","getColumnHeaderText","SortIcon","rowCount","Button","IcFirst","IcLeft","IcRight","IcLast","PAGE_SIZES","s","items","hasSelectedRows","selectedRows","r","filteredActions","ta","IcRefresh","TableActions","DataTableFilter","SearchField","direction","IcSortAsc","IcSortDesc","IcSortNone","headerDef","renderCellByDisplayType","cell","displayType","value","formatDate","formatNumber","Badge","CountryName","formatFilesize","formatDays","HeaderText","header","flexRender","tableCellStyle","isSticky","zIndex","TableComponent","TableHeader","headerGroup","TableRow","TableHead","TableBody","isActionsColumn","cellContent","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","createNewFilter","type","property","id","operator","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","filterKeys","PopoverTrigger","o","IcFilter","Popover","e","field","lf","i","sf","op","_","TfDatePicker","config","TfMultipleIdSearchInput","IcRemove","k","Icon","FilterIcon","newFilter","IcFile","IcCheck","IcDate","IcLicense","IcAccount","IcMinus"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as R}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{FormField as f,FieldGroup as g}from"./form.js";import{IcDate as p}from"./icons.js";import"class-variance-authority";import"./loader.js";import"
|
|
1
|
+
"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as R}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{FormField as f,FieldGroup as g}from"./form.js";import{IcDate as p}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...i})=>e(v,{className:c(r,t=>l("w-auto p-3 bg-elevation-2 border",t)),children:e(N,{className:l("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...i})});function w({label:a,description:r,errorMessage:i,requiredIndicator:t,className:n,...s}){return o(D,{className:c(n,x=>l("group flex flex-col gap-2",x)),...s,children:[e(f,{label:a,description:r,errorMessage:i,requiredIndicator:t,children:o(g,{children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function J({...a}){const r=R({disabled:a.isDisabled});return e(w,{hideTimeZone:!0,isDisabled:a.isDisabled||r.form.state.isSubmitting,value:r.state.value?P(r.state.value,k()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function K({label:a,description:r,errorMessage:i,className:t,...n}){return o(b,{className:c(t,s=>l("group flex flex-col gap-2",s)),...n,children:[e(f,{label:a,errorMessage:i,description:r,children:o(g,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{w as DatePicker,K as DateRangePicker,J as TfDatePicker};
|
|
2
2
|
//# sourceMappingURL=date-picker.js.map
|
|
@@ -7,7 +7,7 @@ import { DialogProps as AriaDialogProps, DialogTrigger as AriaDialogTrigger, Hea
|
|
|
7
7
|
* Internally used to style `<DialogContent side="...">`.
|
|
8
8
|
*/
|
|
9
9
|
declare const sheetVariants: (props?: ({
|
|
10
|
-
side?: "
|
|
10
|
+
side?: "top" | "bottom" | "left" | "right" | null | undefined;
|
|
11
11
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
12
12
|
/**
|
|
13
13
|
* Opens the dialog when interacted with (click/press).
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
/**
|
|
3
|
+
* Divider component - Visual separator between sections of content
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <Divider />
|
|
8
|
+
* <Divider orientation="vertical" />
|
|
9
|
+
* <Divider label="OR" />
|
|
10
|
+
* <Divider spacing="lg" />
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
declare const dividerVariants: (props?: ({
|
|
14
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
15
|
+
spacing?: "sm" | "md" | "lg" | null | undefined;
|
|
16
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
17
|
+
export interface DividerProps extends VariantProps<typeof dividerVariants> {
|
|
18
|
+
/**
|
|
19
|
+
* Optional label/text in the center (horizontal only)
|
|
20
|
+
*/
|
|
21
|
+
label?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Additional CSS classes
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
26
|
+
/**
|
|
27
|
+
* ARIA role
|
|
28
|
+
* @default 'separator'
|
|
29
|
+
*/
|
|
30
|
+
role?: 'separator' | 'presentation' | 'none';
|
|
31
|
+
}
|
|
32
|
+
export declare function Divider({ orientation, label, spacing, className, role, }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsxs as n,jsx as a}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{classNames as s}from"../utilities/theme.js";import"clsx";const m=l("shrink-0",{variants:{orientation:{horizontal:"w-full h-[1px] border-t border-border",vertical:"self-stretch w-[1px] border-l border-border"},spacing:{sm:"",md:"",lg:""}},compoundVariants:[{orientation:"horizontal",spacing:"sm",class:"my-2"},{orientation:"horizontal",spacing:"md",class:"my-4"},{orientation:"horizontal",spacing:"lg",class:"my-6"},{orientation:"vertical",spacing:"sm",class:"mx-2"},{orientation:"vertical",spacing:"md",class:"mx-4"},{orientation:"vertical",spacing:"lg",class:"mx-6"}],defaultVariants:{orientation:"horizontal",spacing:"md"}});function h({orientation:r="horizontal",label:i,spacing:o="md",className:t,role:e="separator"}){return i&&r==="horizontal"?n("div",{className:s("flex items-center gap-2 w-full",o==="sm"&&"my-2",o==="md"&&"my-4",o==="lg"&&"my-6",t),role:e,"aria-orientation":r,children:[a("div",{className:"flex-1 h-[1px] border-t border-border"}),a("span",{className:"body-sm text-muted-foreground px-2 select-none",children:i}),a("div",{className:"flex-1 h-[1px] border-t border-border"})]}):a("div",{className:s(m({orientation:r,spacing:o}),t),role:e,"aria-orientation":r??void 0})}export{h as Divider};
|
|
2
|
+
//# sourceMappingURL=divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"divider.js","sources":["../../lib/components/divider.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { classNames } from '../utilities/theme';\n\n/**\n * Divider component - Visual separator between sections of content\n *\n * @example\n * ```tsx\n * <Divider />\n * <Divider orientation=\"vertical\" />\n * <Divider label=\"OR\" />\n * <Divider spacing=\"lg\" />\n * ```\n */\n\nconst dividerVariants = cva('shrink-0', {\n variants: {\n orientation: {\n horizontal: 'w-full h-[1px] border-t border-border',\n vertical: 'self-stretch w-[1px] border-l border-border',\n },\n spacing: {\n sm: '',\n md: '',\n lg: '',\n },\n },\n compoundVariants: [\n // Horizontal spacing\n {\n orientation: 'horizontal',\n spacing: 'sm',\n class: 'my-2',\n },\n {\n orientation: 'horizontal',\n spacing: 'md',\n class: 'my-4',\n },\n {\n orientation: 'horizontal',\n spacing: 'lg',\n class: 'my-6',\n },\n // Vertical spacing\n {\n orientation: 'vertical',\n spacing: 'sm',\n class: 'mx-2',\n },\n {\n orientation: 'vertical',\n spacing: 'md',\n class: 'mx-4',\n },\n {\n orientation: 'vertical',\n spacing: 'lg',\n class: 'mx-6',\n },\n ],\n defaultVariants: {\n orientation: 'horizontal',\n spacing: 'md',\n },\n});\n\nexport interface DividerProps extends VariantProps<typeof dividerVariants> {\n /**\n * Optional label/text in the center (horizontal only)\n */\n label?: string;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * ARIA role\n * @default 'separator'\n */\n role?: 'separator' | 'presentation' | 'none';\n}\n\nexport function Divider({\n orientation = 'horizontal',\n label,\n spacing = 'md',\n className,\n role = 'separator',\n}: DividerProps) {\n // If label is provided and orientation is horizontal, use a different layout\n if (label && orientation === 'horizontal') {\n return (\n <div\n className={classNames(\n 'flex items-center gap-2 w-full',\n spacing === 'sm' && 'my-2',\n spacing === 'md' && 'my-4',\n spacing === 'lg' && 'my-6',\n className\n )}\n role={role}\n aria-orientation={orientation}\n >\n <div className=\"flex-1 h-[1px] border-t border-border\" />\n <span className=\"body-sm text-muted-foreground px-2 select-none\">{label}</span>\n <div className=\"flex-1 h-[1px] border-t border-border\" />\n </div>\n );\n }\n\n return (\n <div\n className={classNames(dividerVariants({ orientation, spacing }), className)}\n role={role}\n aria-orientation={orientation ?? undefined}\n />\n );\n}\n"],"names":["dividerVariants","cva","Divider","orientation","label","spacing","className","role","jsxs","classNames","jsx"],"mappings":"8KAgBA,MAAMA,EAAkBC,EAAI,WAAY,CACpC,SAAU,CACN,YAAa,CACT,WAAY,wCACZ,SAAU,6CAAA,EAEd,QAAS,CACL,GAAI,GACJ,GAAI,GACJ,GAAI,EAAA,CACR,EAEJ,iBAAkB,CAEd,CACI,YAAa,aACb,QAAS,KACT,MAAO,MAAA,EAEX,CACI,YAAa,aACb,QAAS,KACT,MAAO,MAAA,EAEX,CACI,YAAa,aACb,QAAS,KACT,MAAO,MAAA,EAGX,CACI,YAAa,WACb,QAAS,KACT,MAAO,MAAA,EAEX,CACI,YAAa,WACb,QAAS,KACT,MAAO,MAAA,EAEX,CACI,YAAa,WACb,QAAS,KACT,MAAO,MAAA,CACX,EAEJ,gBAAiB,CACb,YAAa,aACb,QAAS,IAAA,CAEjB,CAAC,EAkBM,SAASC,EAAQ,CACpB,YAAAC,EAAc,aACd,MAAAC,EACA,QAAAC,EAAU,KACV,UAAAC,EACA,KAAAC,EAAO,WACX,EAAiB,CAEb,OAAIH,GAASD,IAAgB,aAErBK,EAAC,MAAA,CACG,UAAWC,EACP,iCACAJ,IAAY,MAAQ,OACpBA,IAAY,MAAQ,OACpBA,IAAY,MAAQ,OACpBC,CAAA,EAEJ,KAAAC,EACA,mBAAkBJ,EAElB,SAAA,CAAAO,EAAC,MAAA,CAAI,UAAU,uCAAA,CAAwC,EACvDA,EAAC,OAAA,CAAK,UAAU,iDAAkD,SAAAN,EAAM,EACxEM,EAAC,MAAA,CAAI,UAAU,uCAAA,CAAwC,CAAA,CAAA,CAAA,EAM/DA,EAAC,MAAA,CACG,UAAWD,EAAWT,EAAgB,CAAE,YAAAG,EAAa,QAAAE,CAAA,CAAS,EAAGC,CAAS,EAC1E,KAAAC,EACA,mBAAkBJ,GAAe,MAAA,CAAA,CAG7C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"react/jsx-runtime";import"@tanstack/react-query";import"react";import"react-aria-components";import{
|
|
1
|
+
"use client";import{jsx as n,jsxs as C}from"react/jsx-runtime";import{useQuery as B}from"@tanstack/react-query";import{useId as _,useState as j}from"react";import{Select as q,Autocomplete as w}from"react-aria-components";import{useCtxClient as R}from"../utilities/ctx-client.js";import{Loader as K}from"./loader.js";import{Menu as L,MenuItem as O}from"./menu.js";import{PopoverTrigger as P}from"./popover.js";import{SearchField as D}from"./searchfield.js";import{getFieldErrorMessage as a}from"../utilities/form.js";import{useFieldContext as v}from"../utilities/form-context.js";import{RESOURCE_ENDPOINT_MAP as G}from"../utilities/resources.js";import{FormField as Q}from"./form.js";import{SelectTrigger as U,SelectPopover as V}from"./select.js";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./button.js";import"class-variance-authority";import"@tanstack/react-form";import"../utilities/string.js";import"lodash-es";function k(t){return Array.isArray(t)&&t.every(r=>r&&typeof r=="object"&&"id"in r&&"name"in r)}function b({label:t,description:r,errorMessage:e,requiredIndicator:i,isDisabled:l,isInvalid:c,onBlur:N,resource:s,onChange:J,value:u,renderLabel:M,accessor:p,defaultParams:h,className:F,...f}){if(s==="profile")throw Error('Resource "profile" is not supported with IdSearch since it is not a searchable resource.');const x=_(),g=f.id||x,E=R(),[d,A]=j(""),{data:y,isError:S,isFetching:I,error:T}=B({queryKey:[s,"id",d],queryFn:async()=>{const m=(await E.GET(G[s],{params:{query:{search:d,...h?.query},path:{...h?.path}}})).data;return m&&k(m)?m:[]}});return n("div",{className:"group form-field","data-invalid":c?"":void 0,children:n(Q,{label:t,description:r,errorMessage:e,requiredIndicator:i,htmlFor:g,children:n(q,{isInvalid:c,children:C(P,{onOpenChange:o=>{o||N?.(u)},children:[n(U,{id:g,isDisabled:l,className:F??"w-full",children:M(u,y)}),n(V,{placement:"bottom start",children:C(w,{inputValue:d,onInputChange:A,children:[n(D,{className:"p-2",autoFocus:!0}),I&&n("div",{className:"p-input",children:n(K,{className:"mx-auto"})}),!I&&!S&&n(L,{...f,className:"max-h-48",items:y,renderEmptyState:()=>n("div",{className:"body-sm p-2",children:"No results found."}),children:o=>n(O,{id:o[p],children:o.name},o[p])}),S&&n("div",{className:"text-destructive p-icon body-sm",children:T.message})]})})]})})})})}function z({...t}){return n(b,{selectedKeys:[t.value],onSelectionChange:r=>t.onChange(Array.from(r).filter(e=>typeof e=="string")[0]),renderLabel:(r,e)=>e?.find(i=>i.id===r)?.name??r,selectionMode:"single",...t})}function H({...t}){return n(b,{selectedKeys:t.value,onSelectionChange:r=>t.onChange(Array.from(r).filter(e=>typeof e=="string")),selectionMode:"multiple",renderLabel:(r,e)=>r?.map(i=>e?.find(l=>l.id===i)?.name??i).join(","),...t})}function Se({isDisabled:t,...r}){const e=v({disabled:t});return n(z,{...r,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}function Ie({isDisabled:t,...r}){const e=v({disabled:t});return n(H,{...r,isDisabled:t||e.form.state.isSubmitting,value:e.state.value,onBlur:i=>e.handleBlur(),onChange:i=>e.handleChange(i),isInvalid:!!a(e),errorMessage:a(e)})}export{H as MultipleIdSearchInput,z as SingleIdSearchInput,Ie as TfMultipleIdSearchInput,Se as TfSingleIdSearchInput};
|
|
2
2
|
//# sourceMappingURL=id-search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id-search.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"id-search.js","sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Select as AriaSelect, Autocomplete } from 'react-aria-components';\n\nimport { useCtxClient } from '../utilities/ctx-client';\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport type { CtxResourceName } from '../utilities/resources';\nimport { RESOURCE_ENDPOINT_MAP } from '../utilities/resources';\nimport { FormField, type FormFieldProps } from './form';\nimport { SelectPopover, SelectTrigger } from './select';\n\n/**\n * Minimal resource shape used by the ID search inputs.\n * Only `id` and `name` are required.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n */\ntype BaseSearchableResource = {\n /** Unique identifier used as the input value. */\n id: string;\n /** Human-readable label shown to users. */\n name: string;\n};\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n return (\n Array.isArray(value) && value.every(item => item && typeof item === 'object' && 'id' in item && 'name' in item)\n );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible Autocomplete + Menu listbox\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n * - Automatically generates search function based on resource name using RESOURCE_ENDPOINT_MAP\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)\n * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)\n *\n * @param props - props object (see inline property JSDoc for the most important fields)\n *\n * @remarks\n * - Search is automatically handled based on the `resource` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `renderLabel` must convert `value` to a readable string for the control button.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n * label=\"Owner\"\n * resource=\"user\"\n * value={ownerId}\n * onChange={setOwnerId}\n * renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n label,\n description,\n errorMessage,\n requiredIndicator,\n isDisabled,\n isInvalid,\n onBlur,\n resource,\n onChange,\n value,\n renderLabel,\n accessor,\n defaultParams,\n className,\n ...props\n}: FormFieldProps & {\n resource: CtxResourceName;\n /** Disable interactions. */\n isDisabled?: boolean;\n /** Whether the field is invalid. */\n isInvalid?: boolean;\n /** Key used to access an alternate display accessor on item (kept for compatibility). */\n accessor: keyof BaseSearchableResource;\n /** Controlled value. */\n value: V;\n /** Called when popover closes or the field blurs with the current value. */\n onBlur?: (v: V) => void;\n /** Controlled change handler. */\n onChange: (v: V) => void;\n /** Render a human-readable label for the current value using the latest data. */\n renderLabel: (v: V, data: T[] | undefined) => string;\n /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n defaultParams?: Record<'path' | 'query', any>;\n /** Optional className to customize the trigger button styling. */\n className?: string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n if (resource === 'profile') {\n throw Error('Resource \"profile\" is not supported with IdSearch since it is not a searchable resource.');\n }\n\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n const client = useCtxClient();\n\n const [search, _setSearch] = useState('');\n const { data, isError, isFetching, error } = useQuery({\n queryKey: [resource, 'id', search],\n queryFn: async (): Promise<T[]> => {\n const result = await client.GET(RESOURCE_ENDPOINT_MAP[resource], {\n params: {\n query: {\n search,\n ...defaultParams?.query,\n },\n path: {\n ...defaultParams?.path,\n },\n },\n });\n\n // Type narrowing: result.data is inferred as never due to complex union types\n // We use unknown to bypass this and then validate with our type guard\n const responseData: unknown = result.data;\n if (responseData && isSearchableResourceArray<T>(responseData)) {\n return responseData;\n }\n return [];\n },\n });\n\n return (\n <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <AriaSelect isInvalid={isInvalid}>\n <PopoverTrigger\n onOpenChange={o => {\n if (!o) {\n // searchInputRef.current?.focus();\n onBlur?.(value);\n }\n }}\n >\n <SelectTrigger id={fieldId} isDisabled={isDisabled} className={className ?? 'w-full'}>\n {renderLabel(value, data)}\n </SelectTrigger>\n <SelectPopover placement=\"bottom start\">\n <Autocomplete inputValue={search} onInputChange={_setSearch}>\n <SearchField className={'p-2'} autoFocus />\n {isFetching && (\n <div className=\"p-input\">\n <Loader className=\"mx-auto\" />\n </div>\n )}\n {!isFetching && !isError && (\n <Menu\n {...props}\n className={'max-h-48'}\n items={data}\n renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n >\n {item => (\n <MenuItem key={item[accessor]} id={item[accessor]}>\n {item.name}\n </MenuItem>\n )}\n </Menu>\n )}\n {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n </Autocomplete>\n </SelectPopover>\n </PopoverTrigger>\n </AriaSelect>\n </FormField>\n </div>\n );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n * label=\"Reporter\"\n * value={reporterId}\n * onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n 'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={[props.value]}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n selectionMode=\"single\"\n {...props}\n />\n );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n * label=\"Reviewers\"\n * value={reviewerIds}\n * onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n ...props\n}: Omit<\n React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n 'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n return (\n <BaseIdSearchInput\n selectedKeys={props.value}\n onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n selectionMode=\"multiple\"\n renderLabel={(v, d) => v?.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n {...props}\n />\n );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<string>({ disabled: isDisabled });\n return (\n <SingleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n const field = useFieldContext<string[]>({ disabled: isDisabled });\n return (\n <MultipleIdSearchInput\n {...props}\n isDisabled={isDisabled || field.form.state.isSubmitting}\n value={field.state.value}\n onBlur={_ => field.handleBlur()}\n onChange={e => field.handleChange(e)}\n isInvalid={!!getFieldErrorMessage(field)}\n errorMessage={getFieldErrorMessage(field)}\n />\n );\n}\n"],"names":["isSearchableResourceArray","value","item","BaseIdSearchInput","label","description","errorMessage","requiredIndicator","isDisabled","isInvalid","onBlur","resource","onChange","renderLabel","accessor","defaultParams","className","props","generatedId","useId","fieldId","client","useCtxClient","search","_setSearch","useState","data","isError","isFetching","error","useQuery","responseData","RESOURCE_ENDPOINT_MAP","jsx","FormField","AriaSelect","jsxs","PopoverTrigger","SelectTrigger","SelectPopover","Autocomplete","SearchField","Loader","Menu","MenuItem","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { paths } from '@cryptlex/web-api-types/develop';
|
|
2
|
+
import { default as createClient } from 'openapi-fetch';
|
|
3
|
+
export type CtxClientType = ReturnType<typeof createClient<paths>>;
|
|
4
|
+
export declare function CtxClientProvider({ client, children }: {
|
|
5
|
+
client: CtxClientType;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function useCtxClient(): CtxClientType;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{createContext as i,use as o}from"react";const e=i(null);function l({client:t,children:r}){return n(e.Provider,{value:t,children:r})}function x(){const t=o(e);if(!t)throw new Error("useCtxClient must be used within a CtxClientProvider.");return t}export{l as CtxClientProvider,x as useCtxClient};
|
|
2
|
+
//# sourceMappingURL=ctx-client.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ctx-client.js","sources":["../../lib/utilities/ctx-client.tsx"],"sourcesContent":["import type { paths } from '@cryptlex/web-api-types/develop';\nimport createClient from 'openapi-fetch';\nimport { createContext, use } from 'react';\n\nexport type CtxClientType = ReturnType<typeof createClient<paths>>;\n\nconst CtxClientContext = createContext<CtxClientType | null>(null);\n\nexport function CtxClientProvider({ client, children }: { client: CtxClientType; children?: React.ReactNode }) {\n return <CtxClientContext.Provider value={client}>{children}</CtxClientContext.Provider>;\n}\n\nexport function useCtxClient(): CtxClientType {\n const client = use(CtxClientContext);\n if (!client) {\n throw new Error('useCtxClient must be used within a CtxClientProvider.');\n }\n return client;\n}\n"],"names":["CtxClientContext","createContext","CtxClientProvider","client","children","useCtxClient","use"],"mappings":"uFAMA,MAAMA,EAAmBC,EAAoC,IAAI,EAE1D,SAASC,EAAkB,CAAE,OAAAC,EAAQ,SAAAC,GAAmE,CAC3G,SAAQJ,EAAiB,SAAjB,CAA0B,MAAOG,EAAS,SAAAC,EAAS,CAC/D,CAEO,SAASC,GAA8B,CAC1C,MAAMF,EAASG,EAAIN,CAAgB,EACnC,GAAI,CAACG,EACD,MAAM,IAAI,MAAM,uDAAuD,EAE3E,OAAOA,CACX"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { components, operations } from '@cryptlex/web-api-types/develop';
|
|
2
2
|
import { ClientPathsWithMethod } from 'openapi-fetch';
|
|
3
|
-
import {
|
|
3
|
+
import { CtxClientType } from './ctx-client';
|
|
4
4
|
export type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];
|
|
5
5
|
export type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;
|
|
6
6
|
export type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;
|
|
@@ -18,7 +18,7 @@ export declare function useProjectName(): CtxPortals;
|
|
|
18
18
|
* Mapping from resource names to their API endpoint paths.
|
|
19
19
|
* Based on the OpenAPI spec paths.
|
|
20
20
|
*/
|
|
21
|
-
export declare const RESOURCE_ENDPOINT_MAP: Record<CtxResourceName, ClientPathsWithMethod<
|
|
21
|
+
export declare const RESOURCE_ENDPOINT_MAP: Record<CtxResourceName, ClientPathsWithMethod<CtxClientType, 'get'>>;
|
|
22
22
|
export declare function useResourceFormatter(): (resourceName: string) => string;
|
|
23
23
|
/**
|
|
24
24
|
* Format multiple license parameters (expired, suspended, revoked) into a single status
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resources.js","sources":["../../lib/utilities/resources.tsx"],"sourcesContent":["import type { components, operations } from '@cryptlex/web-api-types/develop';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport { createContext, use } from 'react';\nimport type { ctxClient } from '../../stories/story-commons';\nimport { toTitleCase } from './string';\n\nexport type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];\nexport type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;\nexport type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;\nexport type ApiFilters<T extends keyof operations> = NonNullable<ApiFilter<T>>;\nexport type CtxPortals = 'customer-portal' | 'system-portal' | 'reseller-portal' | 'admin-portal';\n// Display names specific to customer and reseller portal\nconst OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {\n 'product.displayName': 'Product',\n // TanStack Table converts . -> _ TODO\n product_displayName: 'Product',\n};\n\n// TODO, this drifts quite a lot from the API, should be updated\n/** Resource Name should ALWAYS be in singular form */\nexport const RESOURCE_NAMES = [\n 'access-token',\n 'account',\n 'activation',\n 'activation-log',\n 'admin-role',\n 'audit-log',\n 'automated-email',\n 'automated-email-event-log',\n 'card',\n 'entitlement-set',\n 'feature-flag',\n 'feature',\n 'invoice',\n 'license',\n 'license-template',\n 'maintenance-policy',\n 'organization',\n 'plan',\n 'product',\n 'product-version',\n 'profile',\n 'release',\n 'release-channel',\n 'release-file',\n 'release-platform',\n 'role',\n 'role-claim',\n 'saml-configuration',\n 'segment',\n 'sending-domain',\n 'tag',\n 'trial',\n 'trial-policy',\n 'user',\n 'user-group',\n 'webhook',\n 'webhook-event-log',\n 'webhook-event',\n 'reseller',\n 'oidc-configuration',\n 'tenant-database-cluster',\n] as const;\nexport type CtxResourceName = (typeof RESOURCE_NAMES)[number];\n\n// TODO, use OpenAPI spec for resource definitions\n\nconst RESOURCE_DISPLAY_NAMES: Record<string, string> = {\n id: 'ID',\n createdAt: 'Creation Date',\n scopes: 'Permissions',\n updatedAt: 'Last Updated',\n expiresAt: 'Expiration Date',\n lastSeenAt: 'Last Seen',\n os: 'OS',\n osVersion: 'OS Version',\n key: 'License Key',\n vmName: 'VM Name',\n container: 'Container',\n allowedIpRange: 'Allowed IP Range',\n allowedIpRanges: 'Allowed IP Ranges',\n allowedIpAddresses: 'Allowed IP Addresses',\n disallowedIpAddresses: 'Disallowed IP Addresses',\n allowVmActivation: 'Allow VM Activation',\n disableGeoLocation: 'Disable Geolocation',\n 'user.id': 'User ID',\n userId: 'User',\n productId: 'Product',\n downloads: 'Total Downloads',\n claims: 'Permissions',\n googleSsoEnabled: 'Google Login Enabled',\n lastAttemptedAt: 'Last Attempt Date',\n url: 'URL',\n 'trialPolicy.name': 'Trial Policy Name',\n 'licensePolicy.name': 'License Template Name',\n licensePolicy: 'License Template',\n eventLog: 'Audit Log',\n cc: 'CC Recepients',\n bcc: 'BCC Recepients',\n ipAddress: 'IP Address',\n resellerId: 'Reseller',\n productVersionId: 'Product Version',\n releaseId: 'Release',\n maintenancePolicyId: 'Maintenance Policy',\n webhookId: 'Webhook',\n automatedEmailId: 'Automated Email',\n 'location.countryName': 'Country',\n 'location.ipAddress': 'IP Address',\n 'location.countryCode': 'Country',\n organizationId: 'Organization',\n 'address.country': 'Country',\n 'address.addressLine1': 'Address Line 1',\n 'address.addressLine2': 'Address Line 2',\n responseStatusCode: 'HTTP Status Code',\n resourceId: 'Resource ID',\n Sso: 'SAML SSO 2.0',\n 'reseller.name': 'Reseller',\n sendingDomain: 'Email Sending Domain',\n};\n\nfunction getResourceDisplayName(resourceName: string, portal: CtxPortals) {\n if (portal !== 'admin-portal' && resourceName in OTHER_PORTALS_DISPLAY_NAME) {\n return OTHER_PORTALS_DISPLAY_NAME[resourceName];\n } else if (resourceName in RESOURCE_DISPLAY_NAMES) {\n return RESOURCE_DISPLAY_NAMES[resourceName];\n } else {\n return toTitleCase(resourceName);\n }\n}\n\nconst ProjectContext = createContext<CtxPortals>('admin-portal');\n\nexport function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode }) {\n return <ProjectContext.Provider value={projectName}>{children}</ProjectContext.Provider>;\n}\n\nexport function useProjectName(): CtxPortals {\n const projectName = use(ProjectContext);\n return projectName;\n}\n\n/**\n * Mapping from resource names to their API endpoint paths.\n * Based on the OpenAPI spec paths.\n */\nexport const RESOURCE_ENDPOINT_MAP: Record<CtxResourceName, ClientPathsWithMethod<typeof ctxClient, 'get'>> = {\n 'access-token': '/v3/personal-access-tokens',\n account: '/v3/admin/accounts',\n activation: '/v3/activations',\n 'activation-log': '/v3/activation-logs',\n 'admin-role': '/v3/roles',\n 'audit-log': '/v3/event-logs',\n 'automated-email': '/v3/automated-emails',\n 'automated-email-event-log': '/v3/automated-email-event-logs',\n 'entitlement-set': '/v3/entitlement-sets',\n 'feature-flag': '/v3/feature-flags',\n feature: '/v3/features',\n license: '/v3/licenses',\n 'license-template': '/v3/license-templates',\n 'maintenance-policy': '/v3/maintenance-policies',\n organization: '/v3/organizations',\n plan: '/v3/plans',\n product: '/v3/products',\n 'product-version': '/v3/product-versions',\n release: '/v3/releases',\n 'release-channel': '/v3/release-channels',\n 'release-file': '/v3/release-files',\n 'release-platform': '/v3/release-platforms',\n reseller: '/v3/resellers',\n role: '/v3/roles',\n segment: '/v3/segments',\n 'sending-domain': '/v3/sending-domains',\n tag: '/v3/tags',\n trial: '/v3/trial-activations',\n 'trial-policy': '/v3/trial-policies',\n user: '/v3/users',\n 'user-group': '/v3/organizations/{organizationId}/user-groups',\n webhook: '/v3/webhooks',\n 'webhook-event-log': '/v3/webhook-event-logs',\n card: '/v3/billing/payment-methods/cards',\n invoice: '/v3/billing/invoices',\n /** This one is an exception, it does not return an array. DO NOT USE WITH IdSearch. */\n profile: '/v3/me',\n 'role-claim': '/v3/roles/claims',\n 'saml-configuration': '/v3/accounts/{id}/saml-configuration',\n 'webhook-event': '/v3/webhooks/events',\n 'oidc-configuration': '/v3/accounts/{id}/oidc-configuration',\n 'tenant-database-cluster': '/v3/admin/tenant-database-clusters',\n};\n\nexport function useResourceFormatter(): (resourceName: string) => string {\n const portal = useProjectName();\n return (resourceName: string) => getResourceDisplayName(resourceName, portal);\n}\n\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();\n // Status Column\n switch (true) {\n case license.revoked && license.suspended && licenseExpired:\n return 'Revoked, Suspended, Expired';\n case license.revoked && license.suspended:\n return 'Revoked, Suspended';\n case license.revoked && licenseExpired:\n return 'Revoked, Expired';\n case license.suspended && licenseExpired:\n return 'Suspended, Expired';\n case license.suspended:\n return 'Suspended';\n case license.revoked:\n return 'Revoked';\n case licenseExpired:\n return 'Expired';\n default:\n return 'Active';\n }\n}\ntype OsType = ApiSchema<'ActivationCreateRequestModel'>['os'];\nexport const ALL_OS: Record<OsType, string> = {\n windows: 'Windows',\n macos: 'macOS',\n linux: 'Linux',\n ios: 'iOS',\n android: 'Android',\n};\n"],"names":["OTHER_PORTALS_DISPLAY_NAME","RESOURCE_NAMES","RESOURCE_DISPLAY_NAMES","getResourceDisplayName","resourceName","portal","toTitleCase","ProjectContext","createContext","ProjectProvider","projectName","children","useProjectName","use","RESOURCE_ENDPOINT_MAP","useResourceFormatter","getLicenseStatus","license","licenseExpired","ALL_OS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"resources.js","sources":["../../lib/utilities/resources.tsx"],"sourcesContent":["import type { components, operations } from '@cryptlex/web-api-types/develop';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport { createContext, use } from 'react';\nimport type { CtxClientType } from './ctx-client';\nimport { toTitleCase } from './string';\n\nexport type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];\nexport type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;\nexport type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;\nexport type ApiFilters<T extends keyof operations> = NonNullable<ApiFilter<T>>;\nexport type CtxPortals = 'customer-portal' | 'system-portal' | 'reseller-portal' | 'admin-portal';\n// Display names specific to customer and reseller portal\nconst OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {\n 'product.displayName': 'Product',\n // TanStack Table converts . -> _ TODO\n product_displayName: 'Product',\n};\n\n// TODO, this drifts quite a lot from the API, should be updated\n/** Resource Name should ALWAYS be in singular form */\nexport const RESOURCE_NAMES = [\n 'access-token',\n 'account',\n 'activation',\n 'activation-log',\n 'admin-role',\n 'audit-log',\n 'automated-email',\n 'automated-email-event-log',\n 'card',\n 'entitlement-set',\n 'feature-flag',\n 'feature',\n 'invoice',\n 'license',\n 'license-template',\n 'maintenance-policy',\n 'organization',\n 'plan',\n 'product',\n 'product-version',\n 'profile',\n 'release',\n 'release-channel',\n 'release-file',\n 'release-platform',\n 'role',\n 'role-claim',\n 'saml-configuration',\n 'segment',\n 'sending-domain',\n 'tag',\n 'trial',\n 'trial-policy',\n 'user',\n 'user-group',\n 'webhook',\n 'webhook-event-log',\n 'webhook-event',\n 'reseller',\n 'oidc-configuration',\n 'tenant-database-cluster',\n] as const;\nexport type CtxResourceName = (typeof RESOURCE_NAMES)[number];\n\n// TODO, use OpenAPI spec for resource definitions\n\nconst RESOURCE_DISPLAY_NAMES: Record<string, string> = {\n id: 'ID',\n createdAt: 'Creation Date',\n scopes: 'Permissions',\n updatedAt: 'Last Updated',\n expiresAt: 'Expiration Date',\n lastSeenAt: 'Last Seen',\n os: 'OS',\n osVersion: 'OS Version',\n key: 'License Key',\n vmName: 'VM Name',\n container: 'Container',\n allowedIpRange: 'Allowed IP Range',\n allowedIpRanges: 'Allowed IP Ranges',\n allowedIpAddresses: 'Allowed IP Addresses',\n disallowedIpAddresses: 'Disallowed IP Addresses',\n allowVmActivation: 'Allow VM Activation',\n disableGeoLocation: 'Disable Geolocation',\n 'user.id': 'User ID',\n userId: 'User',\n productId: 'Product',\n downloads: 'Total Downloads',\n claims: 'Permissions',\n googleSsoEnabled: 'Google Login Enabled',\n lastAttemptedAt: 'Last Attempt Date',\n url: 'URL',\n 'trialPolicy.name': 'Trial Policy Name',\n 'licensePolicy.name': 'License Template Name',\n licensePolicy: 'License Template',\n eventLog: 'Audit Log',\n cc: 'CC Recepients',\n bcc: 'BCC Recepients',\n ipAddress: 'IP Address',\n resellerId: 'Reseller',\n productVersionId: 'Product Version',\n releaseId: 'Release',\n maintenancePolicyId: 'Maintenance Policy',\n webhookId: 'Webhook',\n automatedEmailId: 'Automated Email',\n 'location.countryName': 'Country',\n 'location.ipAddress': 'IP Address',\n 'location.countryCode': 'Country',\n organizationId: 'Organization',\n 'address.country': 'Country',\n 'address.addressLine1': 'Address Line 1',\n 'address.addressLine2': 'Address Line 2',\n responseStatusCode: 'HTTP Status Code',\n resourceId: 'Resource ID',\n Sso: 'SAML SSO 2.0',\n 'reseller.name': 'Reseller',\n sendingDomain: 'Email Sending Domain',\n};\n\nfunction getResourceDisplayName(resourceName: string, portal: CtxPortals) {\n if (portal !== 'admin-portal' && resourceName in OTHER_PORTALS_DISPLAY_NAME) {\n return OTHER_PORTALS_DISPLAY_NAME[resourceName];\n } else if (resourceName in RESOURCE_DISPLAY_NAMES) {\n return RESOURCE_DISPLAY_NAMES[resourceName];\n } else {\n return toTitleCase(resourceName);\n }\n}\n\nconst ProjectContext = createContext<CtxPortals>('admin-portal');\n\nexport function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode }) {\n return <ProjectContext.Provider value={projectName}>{children}</ProjectContext.Provider>;\n}\n\nexport function useProjectName(): CtxPortals {\n const projectName = use(ProjectContext);\n return projectName;\n}\n\n/**\n * Mapping from resource names to their API endpoint paths.\n * Based on the OpenAPI spec paths.\n */\nexport const RESOURCE_ENDPOINT_MAP: Record<CtxResourceName, ClientPathsWithMethod<CtxClientType, 'get'>> = {\n 'access-token': '/v3/personal-access-tokens',\n account: '/v3/admin/accounts',\n activation: '/v3/activations',\n 'activation-log': '/v3/activation-logs',\n 'admin-role': '/v3/roles',\n 'audit-log': '/v3/event-logs',\n 'automated-email': '/v3/automated-emails',\n 'automated-email-event-log': '/v3/automated-email-event-logs',\n 'entitlement-set': '/v3/entitlement-sets',\n 'feature-flag': '/v3/feature-flags',\n feature: '/v3/features',\n license: '/v3/licenses',\n 'license-template': '/v3/license-templates',\n 'maintenance-policy': '/v3/maintenance-policies',\n organization: '/v3/organizations',\n plan: '/v3/plans',\n product: '/v3/products',\n 'product-version': '/v3/product-versions',\n release: '/v3/releases',\n 'release-channel': '/v3/release-channels',\n 'release-file': '/v3/release-files',\n 'release-platform': '/v3/release-platforms',\n reseller: '/v3/resellers',\n role: '/v3/roles',\n segment: '/v3/segments',\n 'sending-domain': '/v3/sending-domains',\n tag: '/v3/tags',\n trial: '/v3/trial-activations',\n 'trial-policy': '/v3/trial-policies',\n user: '/v3/users',\n 'user-group': '/v3/organizations/{organizationId}/user-groups',\n webhook: '/v3/webhooks',\n 'webhook-event-log': '/v3/webhook-event-logs',\n card: '/v3/billing/payment-methods/cards',\n invoice: '/v3/billing/invoices',\n /** This one is an exception, it does not return an array. DO NOT USE WITH IdSearch. */\n profile: '/v3/me',\n 'role-claim': '/v3/roles/claims',\n 'saml-configuration': '/v3/accounts/{id}/saml-configuration',\n 'webhook-event': '/v3/webhooks/events',\n 'oidc-configuration': '/v3/accounts/{id}/oidc-configuration',\n 'tenant-database-cluster': '/v3/admin/tenant-database-clusters',\n};\n\nexport function useResourceFormatter(): (resourceName: string) => string {\n const portal = useProjectName();\n return (resourceName: string) => getResourceDisplayName(resourceName, portal);\n}\n\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();\n // Status Column\n switch (true) {\n case license.revoked && license.suspended && licenseExpired:\n return 'Revoked, Suspended, Expired';\n case license.revoked && license.suspended:\n return 'Revoked, Suspended';\n case license.revoked && licenseExpired:\n return 'Revoked, Expired';\n case license.suspended && licenseExpired:\n return 'Suspended, Expired';\n case license.suspended:\n return 'Suspended';\n case license.revoked:\n return 'Revoked';\n case licenseExpired:\n return 'Expired';\n default:\n return 'Active';\n }\n}\ntype OsType = ApiSchema<'ActivationCreateRequestModel'>['os'];\nexport const ALL_OS: Record<OsType, string> = {\n windows: 'Windows',\n macos: 'macOS',\n linux: 'Linux',\n ios: 'iOS',\n android: 'Android',\n};\n"],"names":["OTHER_PORTALS_DISPLAY_NAME","RESOURCE_NAMES","RESOURCE_DISPLAY_NAMES","getResourceDisplayName","resourceName","portal","toTitleCase","ProjectContext","createContext","ProjectProvider","projectName","children","useProjectName","use","RESOURCE_ENDPOINT_MAP","useResourceFormatter","getLicenseStatus","license","licenseExpired","ALL_OS"],"mappings":"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"}
|