@evenicanpm/portal-table-ui 1.4.1 → 1.6.0

package/dist/auth/auth-context.d.ts

@@ -0,0 +1,36 @@
+import { type PropsWithChildren } from "react";
+/**
+ * Powers the auth provider that portal is wrapped in
+ * Aggregates user and session related data that is needed
+ * within the portal
+ */
+interface AuthProviderProps {
+    /** The user details returned from auth framework eg. next-auth **/
+    session: Session;
+    /** how to handle logout **/
+    logout: () => void;
+}
+/**
+ * The context value
+ */
+interface AuthContext {
+    session: Session | null;
+    /** how to handle logout **/
+    logout: (() => void) | null;
+    isAuthenticated: boolean | null;
+}
+interface Session {
+    email: string | null | undefined;
+    name: string | null | undefined;
+    token: string | null | undefined;
+}
+declare const AuthContext: import("react").Context<AuthContext>;
+/**
+ * Used to access auth details and callback handlers within the portal auth context
+ */
+declare const useAuth: () => AuthContext;
+/**
+ *
+ */
+declare const PortalAuthProvider: ({ session, logout, children, }: PropsWithChildren<AuthProviderProps>) => import("react").JSX.Element;
+export { PortalAuthProvider, useAuth, type AuthProviderProps, AuthContext, type Session, };

package/dist/features/settings/index.d.ts

@@ -0,0 +1,2 @@
+declare const PortalSettings: () => import("react").JSX.Element;
+export { PortalSettings };

package/dist/features/table/components/dashboard/index.d.ts

@@ -0,0 +1 @@
+export { TableDashboard } from "./table-dashboard";

package/dist/features/table/components/dashboard/table/actions.d.ts

@@ -0,0 +1,14 @@
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import { UseMutationOptions } from "@tanstack/react-query";
+/**
+ *
+ * Map of action types -> MUI Icons
+ *
+ */
+export declare const actionIconMap: Record<string, typeof FileDownloadOutlinedIcon>;
+type MutationFactory = (resourceName: string, docId: string) => UseMutationOptions<any, any, any, any>;
+/**
+ *
+ */
+export declare const actionMutationMap: Record<string, MutationFactory>;
+export {};

package/dist/features/table/components/dashboard/table/data-mask-map.d.ts

@@ -0,0 +1,2 @@
+import * as Table from "../../../types/";
+export declare const dataMaskMap: Table.Handlers.DataMaskMap;

package/dist/features/table/components/dashboard/table/details/details.d.ts

@@ -0,0 +1,27 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import type * as Types from "../../../../types";
+import type { StatusColorMap, StatusTextMap } from "../../../../types/schemas";
+interface DetailsProps {
+    /** What do we do when use clicks back button? */
+    handleBack: () => void;
+    /** What is the id field name */
+    id: string | number;
+    /** The actual pojo of data from the API */
+    documentData: Types.Queries.Row;
+    documentTypeLabel: string;
+    /** Special instructions for how to render certain properties */
+    detailsRenderMap?: Types.Handlers.DetailsRenderMap;
+    /** Data mask map */
+    dataMaskMap: Types.Handlers.DataMaskMap;
+    /** Table columns **/
+    columns: Column[];
+    /** */
+    statusColorMap: StatusColorMap;
+    /** */
+    statusTextMap: StatusTextMap;
+}
+/**
+ * The Details Page
+ */
+declare const Details: ({ id, documentTypeLabel, documentData, handleBack, columns, dataMaskMap, statusColorMap, statusTextMap, }: DetailsProps) => import("react").JSX.Element;
+export { Details };

package/dist/features/table/components/dashboard/table/details/index.d.ts

@@ -0,0 +1 @@
+export { Details } from "./details";

package/dist/features/table/components/dashboard/table/details/label.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    label: string;
+}
+declare const DetailsRowLabel: (props: Props) => import("react").JSX.Element;
+export { DetailsRowLabel };

package/dist/features/table/components/dashboard/table/details/rows/downloads.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    label: string;
+    value: string[];
+}
+declare const DetailsDownloads: ({ value }: Props) => import("react").JSX.Element;
+export { DetailsDownloads };

package/dist/features/table/components/dashboard/table/details/rows/index.d.ts

@@ -0,0 +1,3 @@
+export { DetailsDownloads } from "./downloads";
+export { DetailsPrimitive } from "./primitive";
+export { DetailsTable } from "./table";

package/dist/features/table/components/dashboard/table/details/rows/primitive.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    label: string;
+    value: string | number;
+}
+declare const DetailsPrimitive: (props: Props) => import("react").JSX.Element;
+export { DetailsPrimitive };

package/dist/features/table/components/dashboard/table/details/rows/table.d.ts

@@ -0,0 +1,17 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import type { DataMaskMap } from "../../../../../types/handlers";
+interface Props {
+    column: Column;
+    value: Record<string, string>[];
+    label: string;
+    dataMaskMap: DataMaskMap;
+}
+/**
+ * Simple table that takes an array of records,
+ * builds array of columns from first index and then loops
+ * builds table values from rest of the indexes.
+ * @param props
+ * @returns
+ */
+declare const DetailsTable: (props: Props) => import("react").JSX.Element;
+export { DetailsTable };

package/dist/features/table/components/dashboard/table/details/styles.d.ts

@@ -0,0 +1,10 @@
+import type { StyledComponent } from "@emotion/styled";
+import { type BoxProps } from "@mui/material";
+/**
+ * Explicit type annotation is required here to prevent TS2742.
+ * Without it, TypeScript tries to infer complex internal types from nested
+ * node_modules (@mui/system), which leads to non-portable type definitions
+ * in monorepo or library builds.
+ */
+declare const DetailsRowBox: StyledComponent<BoxProps>;
+export { DetailsRowBox };

package/dist/features/table/components/dashboard/table/filter-render-map.d.ts

@@ -0,0 +1,2 @@
+import * as Table from "../../../types/";
+export declare const filterRenderMapFallback: Table.Handlers.FilterRenderMap;

package/dist/features/table/components/dashboard/table/filters/date-filter.d.ts

@@ -0,0 +1,2 @@
+import * as Table from "../../../../types";
+export declare const DateFilter: (props: Table.Handlers.FilterProps) => import("react").JSX.Element;

package/dist/features/table/components/dashboard/table/filters/status-filter.d.ts

@@ -0,0 +1,2 @@
+import * as Table from "../../../../types/";
+export declare const StatusFilter: (props: Table.Handlers.FilterProps) => import("react").JSX.Element;

package/dist/features/table/components/dashboard/table/index.d.ts

@@ -0,0 +1,2 @@
+import Table from "./table";
+export { Table };

package/dist/features/table/components/dashboard/table/no-results.d.ts

@@ -0,0 +1,2 @@
+import * as Table from "../../../types/";
+export declare const NoResultsComponent: Table.Handlers.NoResultsComponent;

package/dist/features/table/components/dashboard/table/status-pill.d.ts

@@ -0,0 +1,8 @@
+import type { StatusColorMap, StatusTextMap } from "../../../types/schemas";
+interface Props {
+    status: number | string | string[];
+    statusTextMap: StatusTextMap;
+    statusColorMap: StatusColorMap;
+}
+declare const StatusPill: (props: Props) => import("react").JSX.Element | null;
+export { StatusPill };

package/dist/features/table/components/dashboard/table/table-header.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+import { Column } from "@evenicanpm/portal-types-schemas";
+interface TableHeaderProps {
+    hasActions: boolean;
+    columns: (Column & {
+        ColumnOrder: number;
+    })[] | undefined;
+    loading: boolean;
+}
+/**
+ *
+ * Table handles display and caches it's own data.
+ *
+ */
+export default function TableHeader({ hasActions, columns, loading, }: Readonly<TableHeaderProps>): React.JSX.Element;
+export {};

package/dist/features/table/components/dashboard/table/table-input.d.ts

@@ -0,0 +1,11 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import React from "react";
+interface SearchProps {
+    searchTerm: string;
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+    setColumn: React.Dispatch<React.SetStateAction<string>>;
+    selectedColumn: string;
+    searchCols: Column[];
+}
+declare const SearchField: React.MemoExoticComponent<({ searchTerm, setSearchTerm, searchCols, selectedColumn, setColumn, }: SearchProps) => React.JSX.Element>;
+export { SearchField };

package/dist/features/table/components/dashboard/table/table-row/action-button.d.ts

@@ -0,0 +1,8 @@
+import { Action } from "@evenicanpm/portal-types-schemas";
+interface ActionButtonProps {
+    docId: string;
+    action: Action;
+    resourceName: string;
+}
+export declare function ActionButton({ action, resourceName, docId, }: Readonly<ActionButtonProps>): import("react").JSX.Element;
+export {};

package/dist/features/table/components/dashboard/table/table-row/table-row.d.ts

@@ -0,0 +1,32 @@
+import type React from "react";
+import type * as Types from "../../../../types";
+import { Action } from "@evenicanpm/portal-types-schemas";
+/**
+ * This is what we transorm the column data into for convenient rendering.
+ */
+type ColumnLogic = {
+    id: string;
+    mask: string | undefined;
+    maskFn: any;
+    cellFn: ((value: string | number | string[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | ((value: string | number) => string | number);
+}[] | undefined;
+export type DocumentTableProps = {
+    /** The row to render */
+    row: Types.Queries.Row;
+    /** The render logic for each column ie data mask functions, cell maps*/
+    columnLogic: ColumnLogic;
+    /** */
+    handleClick: React.Dispatch<React.SetStateAction<string | number | null>>;
+    /** Actions renderer */
+    actions: Action[];
+    /** Does this view config have actions? */
+    /** The id field for the document (used for knowing what to set selected id to) */
+    idField: string;
+};
+/**
+ * A single row (document) in the table. Takes the pre-constructed column logic
+ * and executes all of the cell renders and data map functions. Also handles
+ * rendering the action icons.
+ */
+export default function DataTableRow({ row, columnLogic, handleClick: handleSelectDocument, actions, idField, }: Readonly<DocumentTableProps>): React.JSX.Element;
+export {};

package/dist/features/table/components/dashboard/table/table-row-skeleton.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+export type TableRowSkeletonProps = {
+    pageSize: number;
+    colSpan: number;
+};
+export default function TableRowSkeleton({ pageSize, colSpan, }: Readonly<TableRowSkeletonProps>): React.JSX.Element;

package/dist/features/table/components/dashboard/table/table.d.ts

@@ -0,0 +1,18 @@
+import { type QueryKey } from "@tanstack/react-query";
+import type React from "react";
+import type * as Types from "../../../types";
+export type DocumentTableProps = {
+    resource: Types.Schemas.Resource;
+    pageSize: number;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    viewConfigQuery: (resourceName: string) => {
+        queryKey: QueryKey;
+        queryFn: () => Promise<Types.Queries.TableConfig>;
+    };
+};
+/**
+ *
+ * Table handles display and caches it's own data.
+ *
+ */
+export default function DocumentTable({ resource, pageSize, setPageSize, viewConfigQuery, }: Readonly<DocumentTableProps>): React.JSX.Element;

package/dist/features/table/components/dashboard/table-dashboard.d.ts

@@ -0,0 +1,22 @@
+import type * as Types from "../../types";
+import { QueryKey } from "@tanstack/react-query";
+/**
+ * The main props for top-level table entry-point
+ *
+ *
+ */
+export interface TableProps {
+    viewConfigQuery: (resourceName: string) => {
+        queryKey: QueryKey;
+        queryFn: () => Promise<Types.Queries.TableConfig>;
+    };
+    resources: Types.Schemas.Resource[];
+}
+/**
+ *
+ * The TableDashboard is the main view component for the table feature.
+ * Holds state for the tabs and global pagination for all tables.
+ *
+ * @params props
+ */
+export declare const TableDashboard: ({ resources, viewConfigQuery }: TableProps) => import("react").JSX.Element;

package/dist/features/table/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author Sam Forderer
+
+ * @packageDocumentation
+ */
+export type { DocumentTableProps } from "./components/dashboard/table/table";
+export { TableDashboard, type TableProps, } from "./components/dashboard/table-dashboard";
+export * as Table from "./types";

package/dist/features/table/logic/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ * Purpose of resolvers is to resolve the handlers
+ * (filters, datamasks, and cell renders) these
+ * resolvers allow multiple ways of calling handlers
+ *
+ * eg:
+ * datamasks -> 1. column name
+ *              2. datatype
+ *
+ * {
+ *   Status: () => value
+ *   DateTime: () => value
+ * }
+ *
+ * Keeps system flexible
+ *
+ * Row Value -> Resolver -> UI
+ *
+ * @packageDocumentation
+ */
+export * as resolvers from "./resolvers";
+export * as transformers from "./transformers";

package/dist/features/table/logic/resolvers.d.ts

@@ -0,0 +1,21 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import type * as Types from "../types";
+/** MULTIMETHOD FOR FILTERS
+ * Allows multiple implementations
+ * based on multiple column properties.
+ * Priotizes column name, but also can
+ * use data type
+ * @internal
+ */
+export declare const resolveFilterUI: import("@arrows/multimethod/internal/types").Multimethod;
+/**
+ * Dispatch identifies which properties are
+ * in handler, then provides corresponding method
+ * @internal
+ */
+export declare const resolveDataMask: import("@arrows/multimethod/internal/types").Multimethod;
+/**
+ * Simpler, doesn't need multimethod cause only dispatches on column name
+ * @internal
+ */
+export declare const resolveCellUI: (col: Column, handlers: Types.Handlers.CellRenderMap) => ((value: string | number | string[]) => React.ReactElement) | ((value: string | number) => string | number);

package/dist/features/table/logic/transformers.d.ts

@@ -0,0 +1,35 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+/**
+ * These are pure static functions that include business rules
+ * and data manipulation to get the data into the correct
+ * form for rendering.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Gets filters and returns an array of the
+ * active filters and corresponding options
+ * in FilterRequest
+ */
+export declare const getActiveFilters: (columns: Column[] | undefined) => ({
+    filterName: string;
+    filterOptions: {
+        value: string | number;
+        label: string;
+    }[];
+    filterType: string;
+} | undefined)[] | undefined;
+/**
+ * Filters and sorts visible cols
+ */
+export declare const getVisibleColumns: (columns: Column[] | undefined) => (Column & {
+    ColumnOrder: number;
+})[] | undefined;
+/**
+ *
+ */
+export declare const getVisibleDetails: (columns: Column[] | undefined) => Column[] | undefined;
+/**
+ * Filters and sorts visible cols
+ */
+export declare const getSearchableColumns: (columns: Column[] | undefined) => Column[] | undefined;

package/dist/features/table/logic/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * FILTER REQUEST to RESOLVER
+ */
+export interface FilterRequest {
+    filterName: string;
+    filterOptions: string[];
+    filterType: string;
+}

package/dist/features/table/types/handlers.d.ts

@@ -0,0 +1,53 @@
+import type { FilterOption } from "@evenicanpm/portal-types-schemas";
+/**
+ *
+ * @group View Handlers
+ */
+export type DataMaskMap = Record<string, MaskingFunction>;
+export type MaskingFunction = (value: string | number, dataMask: string) => string;
+/**
+ * Uses column names as keys and maps out
+ * value with specific JSX for specific column names.
+ *
+ *
+ * e.g. Status -> MUIChip
+ *
+ * @group View Handlers
+ */
+export interface CellRenderMap {
+    [ColumnName: string]: (value: string | number | string[]) => React.ReactElement;
+}
+export interface FilterProps {
+    filterName: string;
+    filterOptions: FilterOption[];
+    value: Record<string, string>;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    resetPagination: () => void;
+}
+/**
+ *
+ * Provides render methods for particular filter
+ * types. Filter types currently come from DataTypes.
+ *
+ * Note: Naive solution is to trust that project injects filter
+ * render methods for all columns with filters.We can then have a fallback for
+ * general data types.
+ *
+ * @group View Handlers
+ */
+export interface FilterRenderMap {
+    [ColumnName: string]: (props: FilterProps) => React.ReactElement;
+}
+/**
+ *
+ * @group View Handlers
+ */
+export interface EmptyStateProps {
+    label: string;
+}
+export type NoResultsComponent = (props: EmptyStateProps) => React.ReactElement;
+export interface DetailsRenderMap {
+    [columnName: string]: (props: {
+        [columnName: string]: string | number | object | string[] | number[] | object[];
+    }) => React.ReactNode;
+}

package/dist/features/table/types/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * # Table System: Module Registry
+ *
+ * This registry defines the structural blueprints for the Table system modules.
+ * Architecture driven by an array of Resource types which are equipped with
+ * configuration and render handlers responsible for rendering a table.
+ *
+ * ---
+ *
+ * ### 1. Queries (queries.ts)
+ * API Contracts. The raw shapes of server responses. These act as the transport
+ * layer for data before it is mapped into the system's primary models.
+ *
+ * ### 2. Schemas (schemas.ts)
+ * System Models. The primary blueprints—such as Column, Filter, and Resource—often
+ * derived from API definitions. These are the vocabulary used to drive the module.
+ *
+ * ### 3. State (state.ts)
+ * View Configuration. The dynamic parameters tracking how resources are
+ * filtered, sorted, and paginated in the current view.
+ *
+ * ### 4. Handlers (handlers.ts)
+ * Logic Registries. Objects indexed by column or resource type that map
+ * logic (like filtering and data masking) to specific parts of the system.
+ *
+ * ---
+ *
+ * @remarks
+ * ## File descriptions
+ * ```
+ * ├── components                        // UI
+ * │   └── dashboard                     // displays multiple tables with tabs
+ * │       ├── index.tsx
+ * │       ├── table                     // individual table component
+ * │       │   ├── details
+ * │       │   │   ├── details.tsx       // the details page
+ * │       │   │   ├── index.ts
+ * │       │   │   ├── label.tsx         // labels used on details page
+ * │       │   │   ├── rows              // individual rows for different details
+ * │       │   │   │   ├── downloads.tsx // download button for "documents" field
+ * │       │   │   │   ├── index.ts
+ * │       │   │   │   ├── primitive.tsx // simple text or number details field
+ * │       │   │   │   └── table.tsx     // for complex object data (displays in table)
+ * │       │   │   └── styles.ts
+ * │       │   ├── status-pill.tsx       // status pill used across table and details
+ * │       │   ├── table-input.tsx       // table search bar
+ * │       │   └── table.tsx             // actual table component
+ * │       └── table-dashboard.tsx       // actual dashboard component
+ * ├── index.ts
+ * ├── logic                             // handles data transformations
+ * │   ├── index.ts
+ * │   ├── resolvers.ts                  // multi methods that just handle resolving the maps
+ * │   ├── transformers.ts               // pure functions just for simple data transformations
+ * │   └── types.ts                      // types specifically for the transformations
+ * ├── queries                           // handles data fetching with react-query
+ * │   └── useTableQueries.tsx
+ * └── types                             // global types for feature
+ * ├── handlers.ts                   // types for handler maps (masks, renders, filters)
+ * ├── index.ts
+ * ├── queries.ts                    // types for data coming over the wire
+ * ├── schemas.ts                    // core system types (Resource)
+ * └── state.ts                      // types for transient state data (filter state)
+ * ```
+ *
+ * @packageDocumentation
+ */
+export * as Handlers from "./handlers";
+export * as Queries from "./queries";
+export * as Schemas from "./schemas";

package/dist/features/table/types/queries.d.ts

@@ -0,0 +1,27 @@
+import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
+/**
+ *
+ * These are data types returned from API Backend
+ *
+ */
+/**
+ *
+ * A single row in the data table response object.
+ *
+ */
+export type Row = Record<string, string | number | string[] | Record<string, string>[] | unknown>;
+/**
+ *
+ * The response type defined in TDD for row data.
+ *
+ */
+export interface TableRows {
+    items: number;
+    data: Row[];
+}
+/**
+ *
+ * Response type of data from table config
+ *
+ */
+export type TableConfig = ViewConfig;

package/dist/features/table/types/schemas.d.ts

@@ -0,0 +1,31 @@
+import type { TableViewParams } from "@evenicanpm/portal-types-schemas";
+import type { CellRenderMap, DataMaskMap, DetailsRenderMap, FilterRenderMap, NoResultsComponent } from "./handlers";
+import type { TableRows } from "./queries";
+/**
+ * These are primary domain models and the source of truth for table system.
+ */
+/**
+ * Status maps
+ */
+export type StatusTextMap = Record<number | string, string>;
+export type StatusColor = "success" | "primary" | "warning" | "error";
+export type StatusColorMap = Record<number | string, StatusColor>;
+/**
+ * Resource Definition
+ */
+export interface Resource {
+    name: string;
+    label: string;
+    idField: string;
+    rowsQueryFn: (displaySettings: TableViewParams) => {
+        queryKey: readonly unknown[];
+        queryFn: () => Promise<TableRows>;
+    };
+    cellRenderMap?: CellRenderMap;
+    dataMaskMap?: DataMaskMap;
+    filterRenderMap?: FilterRenderMap;
+    noResultsComponent?: NoResultsComponent;
+    detailsRenderMap?: DetailsRenderMap;
+    statusTextMap: StatusTextMap;
+    statusColorMap: StatusColorMap;
+}

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Main entry point for the **e4Portal** library.
+ * All public functions are exported from here.
+ *
+ * The primary export of this package is the `Portal` React compound-component.
+ * The `Portal` component is the top-level that contains the auth, rbac and any other
+ * functionality that is not related to specific features. Specific features (e.g. `Table`)
+ * are modularized and exported as compond components attached to the main `Portal` component.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ *
+ * import { Portal } from "@evenicanpm/portal";
+ *
+ * return (
+ * 	<Portal>
+ * 		<Portal.Table resources={resources}/>
+ * 	</Portal>
+ * );
+ *```
+ * To explore package hierarchy, navigate to the `Portal` link in the components group below.
+ * `TableProps` will be the main interface used to setup the `Table` feature for Copperstate implementation.
+ *
+ * ## Table Feature Usage
+ * ```tsx
+ * const PortalView = () => {
+ *	const { data: session, status } = useSession(); // authentication + token
+ *	const { data: userData, isPending } = getUser.useData(); // D365 User Info
+ *	const { mutateAsync } = useSessionLogout();
+ *
+ *
+ *	const invoicesResource = {
+ *		name: "invoices",
+ *		label: "Invoices",
+ *		detailsFields: ["Code", "AccountName", "Total", "Status"],
+ *		rowsQueryFn: getInvoices,
+ *		configQueryFn: getInvoicesTable,
+ *		idField: "Code",
+ *		dataMaskHandlers,
+ *		columnRenderHandlers: fieldRenderMap,
+ *		filterRenderHandlers: filterRenderHandlers,
+ *	};
+ *
+ *	const resources = [
+ *		invoicesResource,
+ *		// DEFINE MORE RESOURCES HERE
+ *	];
+ *
+ *	return (
+ *		<Container>
+ *			<Portal session={authObject} logout={handleLogout}>
+ *				<Portal.Table resources={resources} />
+ *			</Portal>
+ *		</Container>
+ *  )
+ *};
+ * ```
+ * @module e4 Portal
+ */
+export type { Session } from "./auth/auth-context";
+export { Portal, type PortalProps } from "./portal";
+export { Table } from "./features/table";