@simoncomputing/mui-bueno-v2 0.14.7

package/dist/components/SingleActionCard/SingleActionCard.d.ts

@@ -0,0 +1,26 @@
+import { SxProps, Theme } from '@mui/material';
+import { PropsWithChildren, ReactNode } from 'react';
+/**
+ * Interface for table props.
+ * @property {string} tableKey - The key of the table.
+ * @property {{label: string; fieldName: string}[]} columns - An array of column definitions.
+ * @property {T[]} data - Array of objects that will be displayed in the table
+ * @property {(id?: number | string) => void} onSelect - Function to call when a row is selected.
+ * @property {boolean} canSort - Whether or not this table supports sorting (depends on your API)
+ * @property {boolean} stackWhenMobile - If true, on mobile screens, table is replaced with list of cards,
+ *                                       where each card represents 1 row. NOTE: sorting is not available when using mobile stack.
+ */
+export interface SingleActionCardProps extends PropsWithChildren {
+    title: string;
+    titleIcon?: ReactNode;
+    fullWidthIcon?: boolean;
+    children?: ReactNode;
+    actionLabel: string;
+    action: () => void;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Full-page component for displaying simple messages with a single action (button).
+ */
+export declare const SingleActionCard: (props: SingleActionCardProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleActionCard;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,28 @@
+import { AlertProps } from '../Alerts/Alert';
+import * as React from 'react';
+export type SnackbarProps = {
+    title: string;
+    message?: string;
+    type: SnackbarType;
+    onClose: () => void;
+    /**
+     * milliseconds before the snackbar auto-hides
+     * @default 8000 (8 seconds)
+     */
+    autoHideDuration?: number;
+    variant?: AlertProps['variant'];
+    elevation?: number;
+};
+/**
+ * Type for the message snackbar.
+ * @typedef {'success' | 'error' | 'warning' | 'info' | 'timeout' | 'logout'} MessageSnackbarType
+ */
+export type SnackbarType = 'success' | 'error' | 'warning' | 'info' | 'timeout' | 'logout';
+/**
+ * Snackbar
+ *
+ * TODO documentation
+ *
+ */
+export declare const Snackbar: React.FC<SnackbarProps>;
+export default Snackbar;

package/dist/components/Table/ExpandableRow/ExpandableRow.d.ts

@@ -0,0 +1,16 @@
+import { ObjectWithId } from '../../../@types';
+export type ExpandableRowProps<T> = {
+    colSpan: number;
+    isExpanded?: boolean;
+    obj: T;
+    renderExpand: (obj: T) => React.ReactNode;
+    asMobileCard?: boolean;
+};
+/**
+ * This component is intended to be used internally by `Table` to allow rows to expand when clicked and
+ * is not currently exported by the library.
+ *
+ * This component contains the content for the expanded section as well as the expand/collapse functionality.
+ */
+declare const ExpandableRow: <T extends ObjectWithId>(props: ExpandableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ExpandableRow;

package/dist/components/Table/PaginatedTable.d.ts

@@ -0,0 +1,44 @@
+import { TableProps } from './Table';
+import { ObjectWithId, PaginationState } from '../../@types';
+/**
+ * Paginated Table Props
+ */
+type BasePaginatedTableProps = {
+    /**
+     * Current state of the pagination (page number, page size, etc.)
+     * This is intended to be used with Redux -- set your redux slice value here.
+     */
+    paginationState: PaginationState;
+    /**
+     * Callback when the user changes the page number.
+     * This is intended to be used with Redux -- call your dispatch here.
+     */
+    onPageChange: (newPage: number) => void;
+    /**
+     * Callback when the user changes the number of rows per page.
+     * This is intended to be used with Redux -- call your dispatch here.
+     */
+    onRowsPerPageChange: (newPage: number) => void;
+    /**
+     * Hides the pagination controls when true. NOTE: pagination controls will always auto-hide when the table is empty.
+     *
+     * IMPORTANT: Make sure this is not changed after the page loads. Otherwise the pagination controls could disappear
+     * when the user changes the pagination settings (Ex. changing page size from 5 to 25 when only 15 records exist).
+     */
+    hidePaginationControls?: boolean;
+    /**
+     * The options available to the user representing the Number of rows per page
+     * @default [5, 10, 25]
+     */
+    rowsPerPageOptions?: Array<number>;
+};
+export type PaginatedTableProps<T> = BasePaginatedTableProps & Omit<TableProps<T>, 'sortField' | 'sortOrder'>;
+/**
+ * Table with Pagination.
+ *
+ * This is a barebones paginated table. For additional functionality, see {@link file://./ListPage.tsx}
+ *
+ * Pagination controls will auto-hide when the table is empty or hidePaginationControls is true
+ */
+export declare const PaginatedTable: <T extends ObjectWithId>(props: PaginatedTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default PaginatedTable;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,129 @@
+import { TableProps as MuiTableProps } from '@mui/material';
+import { SystemStyleObject, Theme } from '@mui/system';
+import { SortOrder, TableConfig } from '../../@types';
+import { default as React } from 'react';
+/**
+ * Interface for table props.
+ */
+export type BaseTableProps<T> = {
+    /**
+     * Optional identifier for your table; useful when overriding styles for only a single table (NOTE: will render as "mobile-table-{id}" and "table-{id}")
+     */
+    id?: string;
+    /**
+     * If the data in your table does not have an id OR your the id is undefined, use `getRowKey` to tell Table how to uniquely identify each row.
+     */
+    getRowKey?: (row: T) => string | number;
+    /**
+     * An array of column definitions
+     */
+    columns: TableConfig<T>;
+    /**
+     * Array of objects that will be displayed in the table
+     */
+    data: T[] | undefined;
+    /**
+     * Function to call when a row is clicked
+     */
+    onRowClick?: (id?: number | string) => void;
+    /**
+     * Define which columns (fieldName) to hide on mobile/small screens
+     */
+    hideColumnsOnMobile?: string[];
+    /**
+     * fieldName of field to be sorted (can be provided via redux)
+     */
+    sortField?: string;
+    /**
+     * Sorting order for sortField (can be provided via redux)
+     */
+    sortOrder?: string;
+    /**
+     * Callback when sortField or sortOrder is changed (can be provided via redux)
+     */
+    onSortChange?: (field: string, order: SortOrder) => void;
+    /**
+     * Define which columns are able to be sorted. Use this when not all columns can be sorted.
+     */
+    allowSortCols?: string[];
+    /**
+     * Sets tableLayout on Material UI table to 'fixed'.
+     * Expects 'true' for same-width columns, or an array of widths for non-same-width columns
+     */
+    fixedLayout?: string[] | boolean;
+    /**
+     * Adds CSS classes to top-level component (TableContainer)
+     */
+    className?: string;
+    /**
+     * Message that displays when the number of items in the table is 0
+     *
+     * Note: This is lower priorty than isLoading & errorTableMsg, so this will not display if the table has an error or is loading.
+     */
+    emptyTableMsg?: string;
+    /**
+     * Message that displays when the table could not successfully load data (ex. from an API).
+     *
+     * Note: This is lower priorty than isLoading, so this will not display if the table is loading.
+     */
+    errorTableMsg?: string;
+    /**
+     * When defined, renders a "Retry?" button that the user can click which will trigger this callback. Intended for allowing the user
+     * to trigger a re-fetch in an attempt to populate the table with data from an API when the previous attempt failed.
+     *
+     * Only displays when `errorTableMsg` is defined.
+     */
+    retryCallback?: () => void;
+    /**
+     * Displays a loading spinner in the table body when true. Use this when you have an API call for loading the table data.
+     *
+     */
+    isLoading?: boolean;
+    /**
+     * Function called when a row is clicked. Expands the row and displays the content returned by the function.
+     *
+     * NOTE: not supported for mobile stack currently.
+     */
+    renderExpand?: (item: T) => React.ReactNode;
+    /**
+     * Renders Table render as a Table, instead of cards, on Mobile/small screens
+     * @default false
+     */
+    disableMobileCards?: boolean;
+    /**
+     * Defines highlight color for a selected row.
+     * - Set to 'true' to have the selected row highlighted when clicked on (must have `onRowClicked` defined).
+     * - Set to string (color) to define your own color.
+     * @default false
+     */
+    highlightSelectedRow?: boolean | string;
+    /**
+     * Allows overriding of default header row style settings (table only -- this has no effect on the card list for mobile)
+     *
+     * NOTE: Use this if you want to style a specific table differently from other tables in your app. If you want all tables
+     * to have a specific header style, add the following override to your theme(s) in `theme.ts`:
+     * components: {
+     *    MuiTableCell: {
+     *      styleOverrides: {
+     *          head: {
+     *             // YOUR STYLE SETTINGS HERE
+     *        },
+     *     },
+     *   },
+     * }
+     * (More details on this in Storybook on the `Getting Started/Global Styling` page)
+     */
+    headerRowStyle?: SystemStyleObject<Theme>;
+    /**
+     * Enables sticky header row. Set to a valid height (ex. "400px") to define the table's max height.
+     */
+    stickyHeader?: string;
+};
+export type TableProps<T> = BaseTableProps<T> & Omit<MuiTableProps, 'stickyHeader'>;
+/**
+ * The Table is a reusable component for displaying data in a table.
+ * It includes sorting (optional).
+ * If you're looking for a paginated table, use see {@link file://../PagingTable/PagingTable.tsx} or
+ * {@link file://../ListPage/ListPage.tsx} which includes add & search functionality.
+ */
+export declare const Table: <T extends object>(props: BaseTableProps<T>) => import("react/jsx-runtime").JSX.Element;