@famalabs/web-ui 1.0.0-beta.1

package/dist/components/tables/TableComponents/TableTypes.d.ts

@@ -0,0 +1,178 @@
+import { IconButtonOwnProps, ButtonProps, IconButtonProps } from '@mui/material';
+import { Dispatch, SetStateAction } from 'react';
+
+interface DynamicFilterOptions {
+    id: string | number | boolean;
+    label: string;
+}
+type ColumnType = 'string' | 'number' | 'action' | 'avatar' | 'boolean' | 'date' | 'image' | 'link' | 'status' | 'select';
+interface DynamicColumns<T> {
+    accessor: string;
+    label: string;
+    filterOptions?: {
+        type: FilterType;
+        options?: DynamicFilterOptions[];
+        singleDate?: boolean;
+        regex?: boolean;
+        priority?: boolean;
+        export?: boolean;
+    };
+    ColumnCell?: () => React.ReactNode;
+    Cell?: (props: {
+        cellValue: string;
+        currentColumn?: DynamicColumns<T>;
+        currentRow?: T;
+    }) => React.ReactNode;
+    Tooltip?: {
+        icon?: React.ReactNode;
+        color?: IconButtonOwnProps['color'];
+        label: string;
+    };
+    maxWidth?: number | string | 'stretch';
+    visible?: boolean;
+    locked?: boolean;
+}
+type FilterType = 'string' | 'number' | 'select' | 'date';
+type FilterValue = unknown;
+interface ActiveFilter {
+    filterIndex: number;
+    filterColumn: string;
+    filterValue?: FilterValue;
+    filterType?: FilterType;
+    filterComparator?: string;
+}
+/**
+ * Type for the action event.
+ */
+type ActionEvent<T> = (actionType: string, selectedRows: T[], activeFilters: ActiveFilter[], allSelected?: boolean) => void;
+/**
+ * Interface for an action event button.
+ * Only one of label or icon is required. Both can be provided.
+ * @param {ActionType} type - The type of the action.
+ * @param {string} label - Optional label of the button.
+ * @param {ButtonOwnProps['color']} color - Optional color of the button.
+ * @param {React.ReactNode} icon - Optional icon of the button.
+ * @param {boolean} isIconButton - Indicates whether the button is an icon button.
+ */
+interface ActionEventItem {
+    type: string;
+    label?: string;
+    color?: ButtonProps['color'];
+    icon?: React.ReactNode;
+    isIconButton?: boolean;
+    refetch?: boolean;
+}
+/**
+ * Interface for the props accepted by the TableInfo prop.
+ * @param {string} tableName - The name of the table.
+ * @param {Array<T>} tableData - The data of the table.
+ * @param {Dispatch<SetStateAction<T[]>>} setTableData - The function to set the table data.
+ * @param {DynamicColumns[]} columns - The columns of the table.
+ * @param {number} expectedRowCount - The expected row count.
+ * @param {boolean} static - Indicates whether the table is static.
+ * @param {boolean} showVisibleColumnsButton - Indicates whether the visible columns button is shown.
+ * @param {string} emptyTablePlaceholderSrc - The source of the empty table placeholder.
+ * @param {string} emptyTablePlaceholderText - The text of the empty table placeholder.
+ * @param {Object} paginationOptions - The options for the pagination.
+ */
+interface TableInfoProps<T> {
+    tableName: string;
+    tableData: Array<T>;
+    setTableData?: Dispatch<SetStateAction<T[]>>;
+    columns: DynamicColumns<T>[];
+    expectedRowCount: number;
+    variant?: 'standard' | 'dense' | 'compact';
+    filterMode?: 'single' | 'multiple';
+    defaultShowFilters?: boolean;
+    staticMode?: boolean;
+    showRefreshButton?: boolean;
+    showVisibleColumnsButton?: boolean;
+    emptyTablePlaceholderSrc?: string;
+    emptyTablePlaceholderText?: string;
+    paginationOptions?: {
+        stickyHeader?: boolean;
+        stickyFooter?: boolean;
+        customPageRowCount?: number;
+        customSelectPages?: number[];
+        autoSizeHeight?: boolean;
+        hideFooter?: boolean;
+        footerVariant?: 'standard' | 'simple';
+    };
+}
+interface FetchInfoProps {
+    fetchData: (limit: number, filters: ActiveFilter[], firstLoad?: boolean) => Promise<void>;
+    isFetching: boolean;
+}
+interface QueryInfoProps {
+    filtersQuery: ActiveFilter[] | string;
+}
+interface DefineActionsProps<T> {
+    actionList: ActionEventItem[];
+    onAction: ActionEvent<T>;
+}
+interface TableActions<T> {
+    quickActions?: DefineActionsProps<T>;
+    contextMenuActions?: DefineActionsProps<T>;
+}
+interface i18nStrings {
+    header?: {
+        quickActions: string;
+        lockedColumns: string;
+        visibleColumns: string;
+        hiddenColumns: string;
+        itemsSelected: string;
+        selectedAll: string;
+        deselectAll: string;
+        allItemsSelected: string;
+    };
+    filters?: {
+        addFilter: string;
+        removeFilter: string;
+        filterBy: string;
+        moreFilters: string;
+        date: string;
+        exact: string;
+        dateFrom: string;
+        dateTo: string;
+        range: string;
+        dateLanguage: string;
+        apply: string;
+        clear: string;
+        refresh: string;
+        showFilters: string;
+        hideFilters: string;
+    };
+    footer?: {
+        rowsPerPage: string;
+        of: string;
+        elements: string;
+    };
+}
+interface TableButton extends ButtonProps {
+    label: string;
+}
+interface TableIconButton extends IconButtonProps {
+    label?: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+}
+interface CustomTableButtons {
+    newItemButton?: TableButton;
+    columnsButton?: TableIconButton;
+    actionButton?: TableIconButton;
+    exportButton?: TableIconButton;
+    selectAllButton?: TableButton;
+    refreshButton?: TableIconButton;
+}
+interface DynamicTableProps<T> {
+    tableInfo: TableInfoProps<T>;
+    fetchInfo: FetchInfoProps;
+    queryInfo?: QueryInfoProps;
+    tableActions?: TableActions<T>;
+    tableButtons?: CustomTableButtons;
+    onRowClick?: (row: T) => void;
+    tableLocale?: 'en' | 'it';
+    localeStr?: i18nStrings;
+}
+
+export type { ActionEvent, ActionEventItem, ActiveFilter, ColumnType, CustomTableButtons, DefineActionsProps, DynamicColumns, DynamicFilterOptions, DynamicTableProps, FetchInfoProps, FilterType, FilterValue, QueryInfoProps, TableActions, TableButton, TableIconButton, TableInfoProps, i18nStrings };

package/dist/components/theme/ThemeLoader/Loader.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material/styles';
+import React from 'react';
+
+interface ThemeLoaderProps {
+    loaded: () => void;
+    theme: Theme;
+    load: () => void | Promise<void>;
+    lang?: string;
+    children: any;
+}
+declare const ThemeLoader: React.FC<ThemeLoaderProps>;
+
+export { ThemeLoader };

package/dist/components/theme/ThemeLoader/Loader.js

@@ -0,0 +1 @@
+import e from"@mui/material/CssBaseline";import o from"@mui/material/GlobalStyles";import{ThemeProvider as m}from"@mui/material/styles";import{SnackbarProvider as t}from"notistack";import l from"react";import{jsxs as r,jsx as i}from"react/jsx-runtime";const a=({loaded:a,load:s,theme:c,children:f})=>(l.useEffect(()=>{const e=s();e instanceof Promise?e.then(a).catch(e=>{console.log("Couldn't load theme: ",e)}):a()},[]),r(m,{theme:c,children:[i(o,{styles:{"@keyframes mui-auto-fill":{from:{display:"block"}},"@keyframes mui-auto-fill-cancel":{from:{display:"block"}}}}),i(e,{}),i(t,{maxSnack:3,children:f})]}));export{a as ThemeLoader};

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export { PasswordField, PasswordFieldProps } from './components/auth/PasswordField.js';
+export { AuthSuccess, AuthSuccessProps } from './components/auth/AuthSuccess.js';
+export { IProps, MainDiv } from './components/common/MainDiv.js';
+export { ListType as MenuID, MenuItems, MenuItemsProps } from './components/common/MenuItems.js';
+export { Form, FormNodeType, FormNodeValidator, default as useFormState } from './components/forms/useFormState.js';
+export { InputString, InputStringProps, StringValidator } from './components/forms/InputString.js';
+export { InputNumber, InputNumberProps, NumberValidator } from './components/forms/InputNumber.js';
+export { AutocompleteField, AutocompleteFieldProps } from './components/forms/AutocompleteField.js';
+export { InputField, InputFieldProps } from './components/forms/InputField.js';
+export { RichTextField, RichTextFieldProps } from './components/forms/RichTextField.js';
+export { SelectField, SelectFieldProps } from './components/forms/SelectField.js';
+export { DateField, DateFieldProps } from './components/forms/DateField.js';
+export { TimeField, TimeFieldProps } from './components/forms/TimeField.js';
+export { RichTextEditor, RichTextEditorProps } from './components/forms/RichTextEditor/RichTextEditor.js';
+export { AiEditingProvider, useAiEditing } from './components/forms/AiEditingContext.js';
+export { SidebarItem, SidebarLayout, SidebarLayoutProps, SidebarLogo, SidebarProps } from './components/sidebar/SidebarLayout.js';
+export { FooterData, SidebarFooterProps } from './components/sidebar/SidebarFooter.js';
+export { ISnackbar, Notifier, NotifierProps } from './components/snackbar/Notifier/Notifier.js';
+export { RealtimeTable } from './components/tables/RealtimeTable/RealtimeTable.js';
+export { RealtimeTableProps } from './components/tables/RealtimeTable/RealtimeTableTypes.js';
+export { LegacyDynamicTable } from './components/tables/LegacyTable/LegacyTable.js';
+export { BooleanCell } from './components/tables/TableCells/BooleanCell.js';
+export { DateCell } from './components/tables/TableCells/DateCell.js';
+export { ActionCell } from './components/tables/TableCells/ActionCell.js';
+export { LinkCell } from './components/tables/TableCells/LinkCell.js';
+export { AvatarCell } from './components/tables/TableCells/AvatarCell.js';
+export { ALL_STATUS, IStatus, StatusCell } from './components/tables/TableCells/StatusCell.js';
+export { ImageCell } from './components/tables/TableCells/ImageCell.js';
+export { SelectCell, SelectCellOption } from './components/tables/TableCells/SelectCell.js';
+export { ActionEvent, ActionEventItem, ActiveFilter, ColumnType, TableButton as CustomButton, DefineActionsProps, DynamicColumns, DynamicFilterOptions, DynamicTableProps, FetchInfoProps, FilterType, FilterValue, QueryInfoProps, TableInfoProps, i18nStrings } from './components/tables/TableComponents/TableTypes.js';
+export { DynamicCardsTable } from './components/tables/CardsGrid/DynamicCardsTable.js';
+export { CardFilters, DynamicCardsProps, InfiniteViewType } from './components/tables/CardsGrid/DynamicCardsTypes.js';
+export { ThemeLoader } from './components/theme/ThemeLoader/Loader.js';

package/dist/index.js

@@ -0,0 +1 @@
+export{PasswordField}from"./components/auth/PasswordField.js";export{AuthSuccess}from"./components/auth/AuthSuccess.js";export{MainDiv}from"./components/common/MainDiv.js";export{MenuItems}from"./components/common/MenuItems.js";export{default as useFormState}from"./components/forms/useFormState.js";export{InputString}from"./components/forms/InputString.js";export{InputNumber}from"./components/forms/InputNumber.js";export{AutocompleteField}from"./components/forms/AutocompleteField.js";export{InputField}from"./components/forms/InputField.js";export{RichTextField}from"./components/forms/RichTextField.js";export{SelectField}from"./components/forms/SelectField.js";export{DateField}from"./components/forms/DateField.js";export{TimeField}from"./components/forms/TimeField.js";export{RichTextEditor}from"./components/forms/RichTextEditor/RichTextEditor.js";export{AiEditingProvider,useAiEditing}from"./components/forms/AiEditingContext.js";export{SidebarLayout}from"./components/sidebar/SidebarLayout.js";export{Notifier}from"./components/snackbar/Notifier/Notifier.js";export{RealtimeTable}from"./components/tables/RealtimeTable/RealtimeTable.js";export{LegacyDynamicTable}from"./components/tables/LegacyTable/LegacyTable.js";export{BooleanCell}from"./components/tables/TableCells/BooleanCell.js";export{DateCell}from"./components/tables/TableCells/DateCell.js";export{ActionCell}from"./components/tables/TableCells/ActionCell.js";export{LinkCell}from"./components/tables/TableCells/LinkCell.js";export{AvatarCell}from"./components/tables/TableCells/AvatarCell.js";export{ALL_STATUS,StatusCell}from"./components/tables/TableCells/StatusCell.js";export{ImageCell}from"./components/tables/TableCells/ImageCell.js";export{SelectCell}from"./components/tables/TableCells/SelectCell.js";export{DynamicCardsTable}from"./components/tables/CardsGrid/DynamicCardsTable.js";export{ThemeLoader}from"./components/theme/ThemeLoader/Loader.js";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@famalabs/web-ui",
+  "version": "1.0.0-beta.1",
+  "author": " Fama Labs <info@famalabs.com>",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@blocknote/core": "^0.46.1",
+    "@blocknote/mantine": "^0.46.1",
+    "@blocknote/react": "^0.46.1",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@mui/material": "^7.3.7",
+    "@mui/x-date-pickers": ">=8.20.0 <9.0.0",
+    "dayjs": "^1.11.19",
+    "lucide-react": ">=0.552.0 <1.0.0",
+    "notistack": "^3.0.2",
+    "qs": "^6.14.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "^7.71.1"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "nx": {
+    "targets": {
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "options": {
+          "cwd": "packages/web-ui",
+          "command": "tsc -p tsconfig.lib.json --noEmit"
+        }
+      },
+      "build": {
+        "dependsOn": [
+          "typecheck",
+          "test",
+          "^build"
+        ]
+      }
+    }
+  }
+}