@simoncomputing/mui-bueno-v3 0.1.12

package/dist/components/Navigation/Header/Header.d.ts

@@ -0,0 +1,63 @@
+import { SxProps, Theme } from '@mui/material';
+import { EnvironmentInfo, MenuOption } from '../../../@types';
+import * as React from 'react';
+export type HeaderProps = {
+    /**
+     * Provides environment info for lower environments. Automatically hidden when `isProd` is true.
+     */
+    envInfo?: EnvironmentInfo;
+    headerRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * App logo image. Can be a path to an image (string) or a ReactNode for more fine-tuned control.
+     */
+    logo: string | React.ReactNode;
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * User Actions that will appear on the user profile dropdown button.
+     * These are for logged in users so they only display when `displayName` is not undefined
+     */
+    userMenuOptions?: MenuOption[];
+    onToggleDarkMode?: () => void;
+    /**
+     * Appear directly in header on the right side. Useful for quick-access general links such as FAQ
+     * Recommend no more than 3.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    quickLinks?: MenuOption[];
+    /**
+     * Display Name for the user that is currently logged in. Set as undefined if no user is logged in.
+     * Ex: `displayName={isAuthenticated ? userName : undefined}
+     */
+    displayName?: string;
+    /**
+     * Appears above the app header. Useful for simple announcements/etc.
+     */
+    banner?: React.ReactNode;
+    position?: 'absolute' | 'sticky' | 'relative' | 'static' | 'fixed';
+    /**
+     * Children will be rendered in between quickLinks & user dropdown.
+     *
+     * IMPORTANT: Children will NOT display on mobile, so if you render any navigation links here, you will need to
+     * add logic to pass those links to `userActions` when screen size is less than or equal to `sm` (default is <=600 px).
+     */
+    children?: React.ReactNode;
+    /**
+     * Style overrides for Mui's AppBar
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Style overrides for the NavBar
+     */
+    navBarSx?: SxProps<Theme>;
+};
+export declare const Header: React.FC<HeaderProps>;
+export default Header;

package/dist/components/Navigation/Header/ProfileMenu.d.ts

@@ -0,0 +1,8 @@
+import { MenuOption, ObjectWithId } from '../../../@types';
+import * as React from 'react';
+export interface ProfileMenuProps extends ObjectWithId {
+    displayName: string;
+    userMenuOptions: MenuOption[];
+}
+export declare const ProfileMenu: React.FC<ProfileMenuProps>;
+export default ProfileMenu;

package/dist/components/Navigation/MenuButton/MenuButton.d.ts

@@ -0,0 +1,9 @@
+import { MenuOption, ObjectWithId } from '../../../@types';
+import * as React from 'react';
+export interface MenuButtonProps extends ObjectWithId {
+    label: string;
+    menuOptions?: MenuOption[];
+    icon?: React.ReactElement;
+}
+export declare const MenuButton: React.FC<MenuButtonProps>;
+export default MenuButton;

package/dist/components/Navigation/NavBar/FloatingNavBar/FloatingNavBar.d.ts

@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../../@types';
+export type FloatingNavBarProps = {
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Index of the active tab, starts at 0. Default is undefined (no active tab marked)
+     */
+    activeTabIdx?: number;
+    /**
+     * Style overrides
+     */
+    sx?: SxProps<Theme>;
+};
+/**
+ * Primary navigation. For an alternative style, see `NavBar`.
+ *
+ * @deprecated Will remove soon, switch to NavBar
+ */
+export declare const FloatingNavBar: (props: FloatingNavBarProps) => false | import("react/jsx-runtime").JSX.Element;
+export default FloatingNavBar;

package/dist/components/Navigation/NavBar/NavBar.d.ts

@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../@types';
+export type NavBarProps = {
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Index of the active tab, starts at 0. Default is undefined (no active tab marked)
+     */
+    activeTabIdx?: number;
+    /**
+     * Style overrides
+     */
+    sx?: SxProps<Theme>;
+};
+/**
+ * Primary navigation. For an alternative style, see `FloatingNavBar`.
+ *
+ * We recommend using the `Header` component, which already has a `NavBar` built in.
+ */
+export declare const NavBar: (props: NavBarProps) => false | import("react/jsx-runtime").JSX.Element;
+export default NavBar;

package/dist/components/Navigation/Sidebar/Sidebar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../@types';
+export type SidebarProps = {
+    menuOptions?: MenuOption[];
+    sx?: SxProps<Theme>;
+};
+/**
+ * Intended for secondary navigation.
+ *
+ * This component does NOT render on mobile.
+ */
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/components/Navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,19 @@
+import { TabsProps as MuiTabsProps } from '@mui/material';
+import { MenuOption } from '../../../@types';
+import * as React from 'react';
+type TabsBaseProps = {
+    /**
+     * Array of navigation items to show
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button._
+     */
+    menuOptions: MenuOption[];
+    /**
+     * Index of the active tab in `menuOptions`
+     */
+    activeTabIdx?: number;
+};
+export type TabsProps = TabsBaseProps & Omit<MuiTabsProps, 'value' | 'onChange'>;
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,27 @@
+import { BreadcrumbInfo } from '../Breadcrumbs/Breadcrumbs';
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+/**
+ * Interface for PageHeader props.
+ * @property {string} tableKey - The key of the table.
+ * @property {string} title - Title for the table
+ * @property {string} createButtonLabel - Label for the Create/Add button (to add new objects to the table)
+ * @property {string} createPermission - Permission required to give the user permission to edit this table
+ * @property {(id?: number | string) => void} onAdd - callback when the create/add button is clicked
+ * @property {BreadcrumbInfo[]} breadcrumbs - breadcrumbs to be displayed above the title (optional)
+ * @property {React.ReactNode} children - additional components to display on the right side of the component (or below, on mobile screens)
+ */
+export type PageHeaderProps = {
+    title: string | ReactNode;
+    createButtonLabel: string;
+    showAddButton?: boolean;
+    onAdd?: (id?: number | string) => void;
+    breadcrumbs?: BreadcrumbInfo[];
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Header for PagingTable. Includes Title, Add Button, breadcrumbs (optional). Additional components can be added via children (ex. SearchField) if desired.
+ */
+export declare const PageHeader: (props: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;

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;