@evenicanpm/portal-table-ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/portal-table-ui",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"description": "",
 	"license": "ISC",
 	"author": "",
@@ -15,6 +15,9 @@
 		".": "./src/index.ts"
 	},
 	"types": "./dist/index.d.ts",
+	"files": [
+		"dist"
+	],
 	"devDependencies": {
 		"@emotion/react": "^11.11.3",
 		"@emotion/styled": "^11.11.0",
@@ -37,11 +40,11 @@
 	},
 	"dependencies": {
 		"@arrows/multimethod": "^2.1.0",
-		"@evenicanpm/storefront-portal-types-schemas": "*",
+		"@evenicanpm/portal-types-schemas": "^1.5.0",
 		"@evenicanpm/ui": "^1.4.0",
 		"@mui/lab": "^7.0.1-beta.19",
 		"@tanstack/react-query": "^5.90.11",
 		"date-fns": "^4.1.0"
 	},
-	"gitHead": "0614726ec6b7ce9564706514a6b756b390a13e96"
+	"gitHead": "5c5e3fe19b92a17cbaf897b4cee20ee59331603f"
 }

package/src/auth/auth-context.tsx

@@ -1,86 +0,0 @@
-import { createContext, type PropsWithChildren, useContext } from "react";
-
-// --- 1. Types --- //
-/**
- * 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;
-}
-
-/*
- * Session details returned from authentication
- *
- */
-interface Session {
-	email: string | null | undefined;
-	name: string | null | undefined;
-	token: string | null | undefined;
-}
-
-// --- 2. Context --- //
-const AuthContext = createContext<AuthContext>({
-	session: null,
-	logout: null,
-	isAuthenticated: null,
-});
-
-// --- 3. Hook --- //
-/**
- * Used to access auth details and callback handlers within the portal auth context
- */
-const useAuth = () => {
-	const context = useContext(AuthContext);
-	if (!context) {
-		// This error helps developers debug if they forget to wrap the component.
-		throw new Error("useAuth must be used within a PortalAuthProvider");
-	}
-	return context;
-};
-
-// --- Provider --- //
-/**
- *
- */
-const PortalAuthProvider = ({
-	session,
-	logout,
-	children,
-}: PropsWithChildren<AuthProviderProps>) => {
-	const isAuthenticated = !!session?.email;
-
-	const authValue = {
-		isAuthenticated,
-		session,
-		logout,
-	};
-
-	return (
-		<AuthContext.Provider value={{ ...authValue }}>
-			{children}
-		</AuthContext.Provider>
-	);
-};
-
-export {
-	PortalAuthProvider,
-	useAuth,
-	type AuthProviderProps,
-	AuthContext,
-	type Session,
-};

package/src/features/table/components/dashboard/table/actions.ts

@@ -1,59 +0,0 @@
-import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { UseMutationOptions, mutationOptions } from "@tanstack/react-query";
-
-/**
- *
- * Map of action types -> MUI Icons
- *
- */
-export const actionIconMap: Record<string, typeof FileDownloadOutlinedIcon> = {
-	download: FileDownloadOutlinedIcon,
-	archive: FileDownloadOutlinedIcon,
-};
-
-// Don't like this type but required for map below.
-type MutationFactory = (
-	resourceName: string,
-	docId: string,
-) => UseMutationOptions<any, any, any, any>;
-
-/**
- *
- */
-export const actionMutationMap: Record<string, MutationFactory> = {
-	download: (resourceName: string, docId: string) =>
-		mutationOptions({
-			mutationKey: [resourceName, "download", docId],
-			mutationFn: async (input: { docId: number }) => {
-				const res = await fetch(
-					`/api/resource/${resourceName}/download?docId=${encodeURIComponent(String(input.docId))}`,
-				);
-
-				if (!res.ok) {
-					const text = await res.text().catch(() => "");
-					throw new Error(text || `Download failed (${res.status})`);
-				}
-
-				const blob = await res.blob();
-
-				const disposition = res.headers.get("content-disposition") || "";
-				const match = /filename\*?=(?:UTF-8'')?["']?([^"';]+)["']?/i.exec(
-					disposition,
-				);
-				const filename = match
-					? decodeURIComponent(match[1])
-					: `${resourceName}-${input.docId}.pdf`;
-
-				const href = URL.createObjectURL(blob);
-				const a = document.createElement("a");
-				a.href = href;
-				a.download = filename;
-				document.body.appendChild(a);
-				a.click();
-				a.remove();
-				URL.revokeObjectURL(href);
-
-				return true;
-			},
-		}),
-};

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

@@ -1,26 +0,0 @@
-"use client";
-import * as Table from "../../../types/";
-import { format } from "date-fns";
-
-export const dataMaskMap: Table.Handlers.DataMaskMap = {
-	// DATE TIME HAS SPECIFIC MASK HANDLING
-	datetime: (value: string | number, _dataMask: string) => {
-		return format(new Date(value), "MM/dd/yyyy");
-	},
-	date: (value: string | number, _dataMask: string) => {
-		return format(new Date(value), "MM/dd/yyyy");
-	},
-	numeric: (value: string | number, dataMask: string) => {
-		// IS CURRENCY?
-		if (dataMask.includes("$")) {
-			// Very generic stub... project fill out.
-			return new Intl.NumberFormat("en-US", {
-				style: "currency",
-				currency: "USD",
-			}).format(Number(value));
-		}
-		// IS ...X?
-		// IS ...Y?
-		return String(value);
-	},
-};

package/src/features/table/components/dashboard/table/details/details.tsx

@@ -1,164 +0,0 @@
-"use client";
-import { method, multi } from "@arrows/multimethod";
-import type { Column } from "@evenicanpm/portal-types-schemas";
-import { FlexBox, H6, Subtitle } from "@evenicanpm/ui";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Box, Button } from "@mui/material";
-import Grid from "@mui/material/Grid2";
-import { resolvers, transformers } from "../../../../logic";
-import type * as Types from "../../../../types";
-import type { StatusColorMap, StatusTextMap } from "../../../../types/schemas";
-import { StatusPill } from "../status-pill";
-import { DetailsRowLabel } from "./label";
-import { DetailsDownloads, DetailsPrimitive, DetailsTable } from "./rows";
-
-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;
-	/* the label of the document type ie 'INVOICES' */
-	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
- */
-const Details = ({
-	id,
-	documentTypeLabel,
-	documentData,
-	handleBack,
-	columns,
-	dataMaskMap,
-	statusColorMap,
-	statusTextMap,
-}: DetailsProps) => {
-	const visibleDetails = transformers.getVisibleDetails(columns);
-
-	// Build Primtive Values (string or number)
-	const primtiveItems = visibleDetails?.map((col) => ({
-		key: col?.Data,
-		value: documentData?.[col?.Data],
-		maskFn: resolvers.resolveDataMask(col, dataMaskMap),
-		mask: col?.DataMask,
-		col: col,
-	}));
-
-	return (
-		<Box>
-			{/* Header */}
-			<Box height={48} sx={{ borderBottom: 1, borderColor: "divider" }}>
-				<FlexBox
-					alignItems="center"
-					justifyContent="space-between"
-					mb={2}
-					height={"100%"}
-				>
-					<Button onClick={handleBack} startIcon={<ArrowBackIcon />}>
-						{documentTypeLabel}
-					</Button>
-					<H6 color={"grey.800"}>
-						{documentTypeLabel}-{id}
-					</H6>
-					<Subtitle>DETAILS</Subtitle>
-				</FlexBox>
-			</Box>
-
-			<Grid container spacing={2} sx={{ mt: 2 }}>
-				{primtiveItems?.map((col) => {
-					const maskedValue = col.maskFn(col?.value, col?.mask);
-					const Component = getRowComponent(maskedValue, col?.key);
-					const sx = getRowLayout(maskedValue, col?.key);
-
-					return (
-						<Grid key={col?.key} {...sx}>
-							<DetailsRowLabel label={col?.col?.Label} />
-							<Component
-								key={col?.key}
-								value={maskedValue}
-								label={col?.key}
-								column={col?.col}
-								dataMaskMap={dataMaskMap}
-								statusColorMap={statusColorMap}
-								statusTextMap={statusTextMap}
-								status={col?.value}
-							/>
-						</Grid>
-					);
-				})}
-			</Grid>
-		</Box>
-	);
-};
-
-/**
- * Default renders.
- *
- * -- What do we render? --
- *
- */
-const detailsRenders = {
-	DOCUMENTS: DetailsDownloads,
-	PRIMITIVE: DetailsPrimitive,
-	OBJECT: DetailsTable,
-	STATUS: StatusPill,
-};
-
-/**
- * Multi-method to resolve the renders.
- *
- * -- How do we know what to render? --
- *
- */
-const detailTypeDispatch = (detail: Types.Queries.Row, col: string) => {
-	if (col === "Documents") return "DOCUMENTS";
-	if (col === "Status") return "STATUS";
-	if (typeof detail === "string" || typeof detail === "number")
-		return "PRIMITIVE";
-	if (Array.isArray(detail)) return "OBJECT";
-};
-
-/**
- * Multi-method to resolve the renders.
- *
- * -- what do we render? --
- *
- */
-const getRowComponent = multi(
-	detailTypeDispatch,
-	method("PRIMITIVE", () => detailsRenders.PRIMITIVE),
-	method("DOCUMENTS", () => detailsRenders.DOCUMENTS),
-	method("OBJECT", () => detailsRenders.OBJECT),
-	method("STATUS", () => detailsRenders.STATUS),
-);
-
-/**
- * Multi-method to resolve layout styles
- *
- * -- what do we render? --
- */
-const getRowLayout = multi(
-	detailTypeDispatch,
-	method("PRIMITIVE", () => ({ size: 6, display: "flex" })),
-	method("STATUS", () => ({ size: 6, display: "flex" })),
-	method("DOCUMENTS", () => ({ size: 12 })),
-	method("OBJECT", () => ({ size: 12 })),
-);
-
-// Note: another way to dispatch table is
-// if the column has a children property
-
-export { Details };

package/src/features/table/components/dashboard/table/details/label.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { Typography } from "@mui/material";
-
-interface Props {
-	label: string;
-}
-
-const DetailsRowLabel = (props: Props) => {
-	const { label } = props;
-	return (
-		<Typography
-			variant="subtitle2"
-			color="text.secondary"
-			sx={{
-				minWidth: 150,
-				fontWeight: 600,
-				alignSelf: "flex-start",
-			}}
-		>
-			{label}:
-		</Typography>
-	);
-};
-
-export { DetailsRowLabel };

package/src/features/table/components/dashboard/table/details/rows/downloads.tsx

@@ -1,26 +0,0 @@
-import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { Button, Stack } from "@mui/material";
-
-interface Props {
-	label: string;
-	value: string[];
-}
-
-const DetailsDownloads = ({ value }: Props) => (
-	<Stack spacing={1} sx={{ mt: 1 }}>
-		{value?.map((doc: string) => (
-			<Button
-				key={doc}
-				variant="outlined"
-				size="small"
-				startIcon={<FileDownloadOutlinedIcon />}
-				onClick={() => window.open(doc, "_blank")}
-				sx={{ justifyContent: "flex-start" }}
-			>
-				Download Document
-			</Button>
-		))}
-	</Stack>
-);
-
-export { DetailsDownloads };

package/src/features/table/components/dashboard/table/details/rows/primitive.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { Box } from "@mui/material";
-
-interface Props {
-	label: string;
-	value: string | number;
-}
-
-const DetailsPrimitive = (props: Props) => {
-	const { value } = props;
-	return (
-		<Box
-			sx={{
-				mb: 2,
-				display: "flex",
-				alignItems: "flex-start",
-				gap: 2,
-			}}
-		>
-			<Box sx={{ flex: 1 }}>{value}</Box>
-		</Box>
-	);
-};
-
-export { DetailsPrimitive };

package/src/features/table/components/dashboard/table/details/rows/table.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import type { Column } from "@evenicanpm/portal-types-schemas";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableContainer,
-	TableHead,
-	TableRow,
-} from "@mui/material";
-import { resolvers } from "../../../../../logic";
-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
- */
-const DetailsTable = (props: Props) => {
-	const { value: rows, dataMaskMap, column } = props;
-
-	// call resolvers ahead of time on each column once
-	// then they are pre-resolved and ready to be used
-	// in render body.
-	const preparedCols = column?.Children?.map((col) => ({
-		key: col?.Data,
-		maskFn: resolvers.resolveDataMask(col, dataMaskMap),
-		mask: col?.DataMask,
-	}));
-
-	return (
-		<TableContainer sx={{ my: 2 }}>
-			<Table size="small" sx={{ mt: 1, p: 0 }}>
-				<TableHead>
-					<TableRow>
-						{Object.keys(rows[0])?.map((key) => (
-							<TableCell key={key} sx={{ fontWeight: 600 }}>
-								{key}
-							</TableCell>
-						))}
-					</TableRow>
-				</TableHead>
-				<TableBody>
-					{rows.map((row) => {
-						return (
-							<TableRow key={row?.key + row?.value}>
-								{preparedCols?.map((col) => (
-									<TableCell
-										key={col?.key + row?.key + row?.value}
-										align={"left"}
-									>
-										{col.maskFn(row?.[col?.key], col.mask)}
-									</TableCell>
-								))}
-							</TableRow>
-						);
-					})}
-				</TableBody>
-			</Table>
-		</TableContainer>
-	);
-};
-
-export { DetailsTable };

package/src/features/table/components/dashboard/table/filter-render-map.tsx

@@ -1,9 +0,0 @@
-"use client";
-import * as Table from "../../../types/";
-import { DateFilter } from "./filters/date-filter";
-import { StatusFilter } from "./filters/status-filter";
-
-export const filterRenderMapFallback: Table.Handlers.FilterRenderMap = {
-	select: (props: Table.Handlers.FilterProps) => <StatusFilter {...props} />,
-	date: (props: Table.Handlers.FilterProps) => <DateFilter {...props} />,
-};

package/src/features/table/components/dashboard/table/filters/date-filter.tsx

@@ -1,31 +0,0 @@
-"use client";
-import * as Table from "../../../../types";
-import MenuItem from "@mui/material/MenuItem";
-import Select, { type SelectChangeEvent } from "@mui/material/Select";
-
-export const DateFilter = (props: Table.Handlers.FilterProps) => {
-	const { value, filterName, filterOptions, setValue } = props;
-	return (
-		<Select
-			labelId="demo-simple-select-label"
-			id="demo-simple-select"
-			value={value?.[filterName] || "all"}
-			label={filterName}
-			sx={{
-				height: "100%",
-				border: "none",
-				backgroundColor: "background.paper",
-			}}
-			onChange={(e: SelectChangeEvent) => {
-				setValue((prev) => ({ ...prev, [filterName]: e.target.value }));
-			}}
-		>
-			<MenuItem value={"all"}>All Transaction Dates</MenuItem>
-			{filterOptions?.map((value, i) => (
-				<MenuItem key={value?.label + i} value={value.label}>
-					{value.label}
-				</MenuItem>
-			))}
-		</Select>
-	);
-};

package/src/features/table/components/dashboard/table/filters/status-filter.tsx

@@ -1,36 +0,0 @@
-"use client";
-import * as Table from "../../../../types/";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
-
-export const StatusFilter = (props: Table.Handlers.FilterProps) => {
-	const { value, filterName, setValue, resetPagination, filterOptions } = props;
-
-	const selectedValue = value?.[filterName] ?? "all";
-
-	return (
-		<Select
-			value={selectedValue}
-			sx={{
-				height: "100%",
-				border: "none",
-				backgroundColor: "background.paper",
-			}}
-			onChange={(e) => {
-				resetPagination();
-				setValue((prev) => ({
-					...prev,
-					[filterName]: e.target.value,
-				}));
-			}}
-		>
-			<MenuItem value="all">All Statuses</MenuItem>
-
-			{filterOptions.map((status) => (
-				<MenuItem key={status.label} value={String(status.value)}>
-					{status.label}
-				</MenuItem>
-			))}
-		</Select>
-	);
-};

package/src/features/table/components/dashboard/table/no-results.tsx

@@ -1,26 +0,0 @@
-"use client";
-import * as Table from "../../../types/";
-import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
-import { Typography } from "@mui/material";
-
-export const NoResultsComponent: Table.Handlers.NoResultsComponent = ({
-	label,
-}: {
-	label: string;
-}) => {
-	return (
-		<Typography
-			variant="body2"
-			color="text.secondary"
-			sx={{
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				gap: 1,
-			}}
-		>
-			<ArticleOutlinedIcon fontSize="small" />
-			No {label.toLowerCase()} found matching your criteria.
-		</Typography>
-	);
-};

package/src/features/table/components/dashboard/table/status-pill.tsx

@@ -1,18 +0,0 @@
-import { Chip } from "@mui/material";
-import type { StatusColorMap, StatusTextMap } from "../../../types/schemas";
-
-interface Props {
-	status: number | string | string[];
-	statusTextMap: StatusTextMap;
-	statusColorMap: StatusColorMap;
-}
-
-const StatusPill = (props: Props) => {
-	const { statusColorMap, statusTextMap, status } = props;
-	if (typeof status !== "string" && typeof status !== "number") return null;
-	return (
-		<Chip label={statusTextMap?.[status]} color={statusColorMap[status]} />
-	);
-};
-
-export { StatusPill };