@cryptlex/web-components 3.8.1 → 4.1.0

package/dist/index.es.d.ts

@@ -5,6 +5,7 @@ import { AnyFormApi } from '@tanstack/react-form';
 import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { ColumnDef } from '@tanstack/react-table';
 import { components } from '@cryptlex/web-api-types';
 import { ComponentType } from 'react';
 import { Context } from 'react';
@@ -18,6 +19,7 @@ import { Drawer as Drawer_2 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { FieldApi } from '@tanstack/react-form';
 import { FieldComponent } from '@tanstack/react-form';
+import { FilterConfig as FilterConfig_2 } from '../../index';
 import { FormApi } from '@tanstack/react-form';
 import { FormAsyncValidateOrFn } from '@tanstack/react-form';
 import { FormOptions } from '@tanstack/react-form';
@@ -26,9 +28,9 @@ import { ForwardRefExoticComponent } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { LucideIcon } from 'lucide-react';
+import { operations } from '@cryptlex/web-api-types';
 import { OTPInput } from 'input-otp';
 import { PaginationState } from '@tanstack/react-table';
-import { ParamsOption } from 'openapi-fetch';
 import { paths } from '@cryptlex/web-api-types';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PropsWithChildren } from 'react';
@@ -38,11 +40,12 @@ import { ReactFormApi } from '@tanstack/react-form';
 import { RefAttributes } from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { SortingState } from '@tanstack/react-table';
-import { TableOptions } from '@tanstack/react-table';
+import { Table as Table_2 } from '@tanstack/react-table';
 import { TableState } from '@tanstack/react-table';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { Toaster as Toaster_2 } from 'sonner';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { UseQueryResult } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 import { VisibilityState as VisibilityState_2 } from '@tanstack/react-table';
 
@@ -55,7 +58,7 @@ export declare function AccordionItem({ className, ...props }: React_2.Component
 export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Trigger>): JSX.Element;
 
 /** Reserved name for actions column */
-export declare const ACTIONS_COLUMN_ID = "Actions";
+export declare const ACTIONS_COLUMN_ID = "tableActions";
 
 export declare function Alert({ children, className, variant, icon: Icon, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
     icon?: LucideIcon;
@@ -69,6 +72,21 @@ export declare const ALL_OS: {
     [key: string]: string;
 };
 
+export declare type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;
+
+export declare type ApiFilters<T extends keyof operations> = NonNullable<Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>>;
+
+export declare type ApiGetAllParameters = {
+    page: number;
+    limit: number;
+    search?: string;
+    sort?: string;
+};
+
+export declare type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;
+
+export declare type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];
+
 export declare function Avatar({ className, initials, ...props }: AvatarProps): JSX.Element;
 
 export declare interface AvatarProps extends Omit<React_2.ComponentProps<"div">, "children">, InitialString {
@@ -97,16 +115,17 @@ export declare function BreadcrumbPage({ className, ...props }: React_2.Componen
 
 export declare function BreadcrumbSeparator({ children, className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
 
-export declare function Button({ className, variant, size, loading, disabled, icon, trailingIcon, children, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ className, variant, size, loading, disabled, icon, trailingIcon, active, children, ...props }: ButtonProps): JSX.Element;
 
 export declare interface ButtonProps extends React_2.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
     loading?: boolean;
     icon?: () => LucideIcon;
     trailingIcon?: () => LucideIcon;
+    active?: boolean;
 }
 
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "neutral" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "icon" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -170,27 +189,50 @@ declare interface CopyProps {
 
 export declare function CountrySelect({ ...props }: Omit<MultiSelectProps, "options">): JSX.Element;
 
-export declare function createTableFetchFn<_any, Return>(ctxclient: Client, path: GetPaths, params?: ParamsOption<any>): TableFetchFn<Return>;
+export declare function createTableFetchFn<Return, Operation extends keyof operations>(ctxclient: Client, path: GetPaths): TableFetchFn<Return, Operation>;
 
 export declare type CtxPortals = "customer-portal" | "system-portal" | "reseller-portal" | "admin-portal";
 
 /** Application Names */
 export declare type CtxProjectName = "admin-portal" | "customer-portal" | "internal-portal" | "reseller-portal";
 
-export declare function DataTable<TData extends object>({ columns, fetchFn, tableActions, columnsToHideByDefault, allowSelection, className, ...props }: DataTableProps<TData>): JSX.Element;
+export declare function DataTable({ tableActions, className, ...props }: DataTableProps): JSX.Element;
 
-export declare interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, default_2.ComponentProps<'section'> {
-    fetchFn: TableFetchFn<TData>;
-    tableActions: TableActions;
+export declare const DataTableContext: default_2.Context<{
+    tableState: DataTableState;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: UseQueryResult<    {
+    total: number;
+    data: Schemas[] | undefined;
+    }, Error>;
+    tanTable: Table_2<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: default_2.Dispatch<default_2.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, FilterConfig_2>>;
+} | null>;
+
+declare type DataTableFactory<TData extends Schemas> = {
+    fetchFn: TableFetchFn<TData, OperationKeys>;
+    columns: ColumnDef<TData, any>[];
     allowSelection?: boolean;
     columnsToHideByDefault?: VisibilityState_2;
-}
+    filterConfig: FiltersConfig<OperationKeys>;
+};
 
-export declare type DataTableState = Pick<TableState, 'sorting' | 'columnFilters' | 'columnVisibility' | 'rowSelection' | 'pagination'> & {
-    search: string;
+export declare function DataTableFilter({ className, ...props }: TableFilterProps): JSX.Element;
+
+export declare type DataTableProps = default_2.ComponentProps<'section'> & {
+    tableActions: TableActions;
 };
 
-export declare const DEFAULT_FILTERABLE_FIELDS: FilterableProperties<any>;
+export declare function DataTableProvider({ children, ...props }: {
+    children: default_2.ReactNode;
+} & ReturnType<typeof useDataTableState>): JSX.Element;
+
+declare type DataTableState = Pick<TableState, 'sorting' | 'columnVisibility' | 'rowSelection' | 'pagination' | 'columnOrder'> & {
+    search: string;
+};
 
 /*** Type for hide some of the columns based on the dto of the particular page
  ** `id`, `updatedAt` are by default hidden
@@ -254,6 +296,7 @@ export declare function DropdownMenuContent({ className, sideOffset, ...props }:
 
 export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** TODO, is this  */
 export declare function DropdownMenuItem({ className, ...props }: React_2.ComponentProps<typeof DropdownMenuPrimitive.Item>): JSX.Element;
 
 export declare function DropdownMenuLabel({ className, ...props }: React_2.ComponentProps<typeof DropdownMenuPrimitive.Label>): JSX.Element;
@@ -288,24 +331,39 @@ export declare enum DYNAMIC_INPUT_TARGET {
 
 export declare const fieldContext: Context<AnyFieldApi>;
 
-export declare type fieldsToDisplay = {
-    display: string;
-    accessor: string;
-};
-
 export declare const FILTER_COMPARISON_OPERATORS: readonly ["eq", "ne", "cn", "nc", "sw", "ew", "in", "nin", "gt", "gte", "lt", "lte"];
 
-export declare const FILTERABLE_PROPERTY_TYPES: readonly ["objectString", "string", "number", "objectNumber", "boolean", "objectDate", "licenseType", "product", "product-version", "user", "webhook", "automated-email", "organization", "country", "tag", "resource", "resourceId", "reseller", "role", "note", "os", "action"];
+export declare type FilterComp<T> = ComponentType<{
+    value: T;
+    onChange: (value: T) => void;
+}>;
+
+export declare type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];
 
-export declare type FilterableProperties<T> = {
-    [K in keyof T]?: FilterablePropertyType;
+export declare type FilterConfig = {
+    type: 'enum';
+    component: React.FC<MultiSelectProps>;
+} | {
+    type: 'id';
+} | {
+    type: 'bool';
+} | {
+    type: 'string';
+} | {
+    type: 'date';
+} | {
+    type: 'id-search';
+    search: UseQueryResult<{
+        id: string;
+        name: string;
+    }, Error>;
 };
 
-export declare type FilterablePropertyType = (typeof FILTERABLE_PROPERTY_TYPES)[number];
+export declare type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;
 
-export declare type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];
+export declare type FilterType = FilterConfig['type'];
 
-export declare function FormatDate(date: string | null | undefined): string | null;
+export declare function formatDate(date: string | null | undefined): string | null;
 
 export declare const formContext: Context<AnyFormApi>;
 
@@ -400,8 +458,6 @@ declare interface LoaderProps {
 
 export declare function logout(): void;
 
-export declare type MetadataDto = components["schemas"]["MetadataDto"];
-
 export declare function MultiSelect({ options, value, setValue, buttonLabel, className, ...props }: MultiSelectProps): JSX.Element;
 
 export declare interface MultiSelectProps extends SelectionProps<string[]> {
@@ -411,9 +467,7 @@ declare type NestedKeyOf<T> = T extends object ? {
     [K in keyof T]: K extends string | number ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : never;
 }[keyof T] : never;
 
-export declare const OPERATORS_FOR_FILTER_TYPE: OperatorsForFilterType;
-
-export declare type OperatorsForFilterType = Record<FilterablePropertyType, FilterComparisonOperator[]>;
+export declare type OperationKeys = keyof operations;
 
 export declare function Pagination({ className, ...props }: React_2.ComponentProps<"nav">): JSX.Element;
 
@@ -449,6 +503,8 @@ export declare function RadioGroup({ className, ...props }: React_2.ComponentPro
 
 export declare function RadioGroupItem({ className, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Item>): JSX.Element;
 
+export declare function replaceAt<T>(array: readonly T[], index: number, updater: (item: T) => T): T[];
+
 export declare const RESOURCE_DEFINITIONS: Record<ResourceName, string>;
 
 /** Resource Name should ALWAYS be in singular form */
@@ -456,6 +512,8 @@ export declare const RESOURCE_NAMES: readonly ["access-token", "account", "activ
 
 export declare type ResourceName = (typeof RESOURCE_NAMES)[number];
 
+export declare type Schemas = ApiSchema<keyof components['schemas']>;
+
 export declare function SearchInput({ onChange, ...props }: SearchInputProps): JSX.Element;
 
 declare interface SearchInputProps extends Omit<InputProps, "onChange"> {
@@ -613,7 +671,12 @@ export declare const TABLE_DEFAULT_DATE_COLUMNS: AccessorKeyColumnDef<any, any>[
 
 export declare const TABLE_ID_COLUMN: AccessorKeyColumnDef<any, any>[];
 
-export declare type TableActions = Required<Pick<React.ComponentProps<typeof Button>, 'onClick' | 'children' | 'variant' | 'id' | 'icon'>>[];
+export declare type TableActions = ({
+    onClick: (e: React.MouseEvent<HTMLButtonElement>, t: Table_2<any>) => void;
+    bulk: boolean;
+    icon: LucideIcon;
+    tooltip?: string;
+})[];
 
 export declare function TableBody({ className, ...props }: React_2.ComponentProps<"tbody">): JSX.Element;
 
@@ -621,11 +684,13 @@ export declare function TableCaption({ className, ...props }: React_2.ComponentP
 
 export declare function TableCell({ className, ...props }: React_2.ComponentProps<"td">): JSX.Element;
 
-export declare type TableFetchFn<TData> = (p: PaginationState, s: SortingState, q: string) => Promise<{
+export declare type TableFetchFn<TData, TOperation extends keyof operations> = (p: PaginationState, s: SortingState, q: string, f: ApiFilters<TOperation>) => Promise<{
     total: number;
     data: TData[] | undefined;
 }>;
 
+declare type TableFilterProps = React.ComponentProps<'section'>;
+
 export declare function TableFooter({ className, ...props }: React_2.ComponentProps<"tfoot">): JSX.Element;
 
 export declare function TableHead({ className, ...props }: React_2.ComponentProps<"th">): JSX.Element;
@@ -718,6 +783,37 @@ export declare const useAppForm: <TFormData, TOnMount extends FormValidateOrFn<T
     AppForm: ComponentType<PropsWithChildren>;
 };
 
+export declare const useDataTable: () => {
+    tableState: DataTableState;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: UseQueryResult<    {
+    total: number;
+    data: Schemas[] | undefined;
+    }, Error>;
+    tanTable: Table_2<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: default_2.Dispatch<default_2.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, FilterConfig_2>>;
+};
+
+/**
+ * Hook for handling all data-table state. Used in DataTableContext
+ */
+export declare function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault, allowSelection, filterConfig }: DataTableFactory<TData>): {
+    tableState: DataTableState;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: UseQueryResult<    {
+    total: number;
+    data: TData[] | undefined;
+    }, Error>;
+    tanTable: Table_2<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: default_2.Dispatch<default_2.SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, FilterConfig_2>>;
+};
+
 export declare const useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
 
 export declare function useIsMobile(): boolean;