@symply.io/basic-components 1.0.4 → 1.0.6-beta.1

package/BasicTable/TableBody.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { BasicTableBodyProps } from "./types";
-declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export default BasicTableBody;
+import { BasicTableBodyProps, KvProps } from "./types";
+declare const _default: import("react").ForwardRefExoticComponent<BasicTableBodyProps<KvProps, KvProps> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/BasicTable/TableBody.js

@@ -14,8 +14,8 @@ import { forwardRef } from "react";
 import Grid from "@mui/material/Grid";
 import useTheme from "@mui/material/styles/useTheme";
 import TableBodyRow from "./TableBodyRow";
-var BasicTableBody = forwardRef(function (props, ref) {
-    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
+function BasicTableBody(props, ref) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
     var theme = useTheme();
     return (_jsx(Grid, __assign({ item: true, sx: {
             maxHeight: "41vh",
@@ -26,8 +26,8 @@ var BasicTableBody = forwardRef(function (props, ref) {
             "&::-webkit-scrollbar": {
                 width: forFrozen ? 0 : "initial"
             }
-        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns }, "BasicTable_".concat(index)));
+        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
+                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
             })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
                     height: theme.spacing(7.5),
                     borderBottomWidth: "thin",
@@ -46,5 +46,5 @@ var BasicTableBody = forwardRef(function (props, ref) {
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625)
                     } }, { children: noDataText })) }))) })) })));
-});
-export default BasicTableBody;
+}
+export default forwardRef(BasicTableBody);

package/BasicTable/TableBodyRow.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableBodyRowProps } from "./types";
-declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
+import { BasicTableBodyRowProps, KvProps } from "./types";
+declare function BasicTableBodyRow<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableBodyRowProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableBodyRow;

package/BasicTable/TableBodyRow.js

@@ -9,33 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useMemo } from "react";
+import { cloneElement } from "react";
 import colorAlpha from "color-alpha";
 import Grid from "@mui/material/Grid";
 import useTheme from "@mui/material/styles/useTheme";
 function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen;
-    var onRowClick = row.onRowClick, rawRow = __rest(row, ["onRowClick"]);
+    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
     var theme = useTheme();
-    var rawRows = useMemo(function () {
-        return rows.map(function (r) {
-            var newRow = __assign({}, r);
-            delete newRow.onRowClick;
-            return newRow;
-        });
-    }, [rows]);
     return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
             height: theme.spacing(7.5),
             borderBottomWidth: "thin",
@@ -58,7 +39,7 @@ function BasicTableBodyRow(props) {
             }
         }, onClick: onRowClick
             ? function () {
-                onRowClick({ row: rawRow });
+                onRowClick(row);
             }
             : undefined }, { children: columns.map(function (col) {
             var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
@@ -67,7 +48,7 @@ function BasicTableBodyRow(props) {
                     width: width,
                     paddingLeft: theme.spacing(0.625),
                     paddingRight: theme.spacing(0.625)
-                } }, { children: cloneElement(Cell, { column: col, rows: rawRows, row: rawRow }) }), accessor));
+                } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
         }) })));
 }
 export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableFooterProps } from "./types";
-declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
+import { BasicTableFooterProps, KvProps } from "./types";
+declare function BasicTableFooter<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableFooterProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableHeaderProps } from "./types";
-declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
+import { BasicTableHeaderProps, KvProps } from "./types";
+declare function BasicTableHeader<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableHeaderProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableHeader;

package/BasicTable/index.d.ts

@@ -1,5 +1,5 @@
-import { BasicTableProps } from "./types";
-declare function BasicTable(props: BasicTableProps): JSX.Element;
+import { BasicTableProps, KvProps } from "./types";
+declare function BasicTable<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTable;
 export * from "./types";
 export { default as useTable } from "./useTable";

package/BasicTable/index.js

@@ -22,7 +22,7 @@ import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function BasicTable(props) {
     var _a;
-    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
@@ -63,7 +63,11 @@ function BasicTable(props) {
                             zIndex: 999,
                             backgroundColor: "Menu",
                             boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
                             width: "100%",
                             marginLeft: canFreeze ? frozenWidth || 0 : 0,
                             overflow: "auto"
@@ -71,7 +75,11 @@ function BasicTable(props) {
                                         return isUpMd ? !header.canBeFrozen : true;
                                     }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
                                         return isUpMd ? !col.canBeFrozen : true;
-                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                    }), onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
                                         return isUpMd ? !footer.canBeFrozen : true;
                                     }) })] })) }))] })) })) })));
 }

package/BasicTable/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement, CSSProperties } from "react";
+export declare type KvProps = Record<string, unknown>;
 interface SortByProps {
     id: string;
     desc: boolean;
@@ -6,7 +7,15 @@ interface SortByProps {
 interface InitialStateProps {
     sortBy?: SortByProps;
 }
-export interface IColumn {
+export interface SortingProps {
+    field: string;
+    isSorted?: boolean;
+    descending?: boolean;
+}
+export interface UseScrollProps {
+    canFreeze?: boolean;
+}
+export declare type ColumnBaseProps = {
     Header: ReactElement;
     headerTip?: string;
     Body: ReactElement;
@@ -17,63 +26,55 @@ export interface IColumn {
     canBeFrozen?: boolean;
     minWidth?: number;
     width?: number;
-    [name: string]: any;
-}
-interface IHeader extends IColumn {
+};
+export declare type UseTableBaseProps<RowProps extends KvProps> = {
+    data: Array<RowProps>;
+    columns: Array<ColumnBaseProps>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+};
+export declare type UseTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = UseTableBaseProps<RowProps> & ExtraProps;
+export declare type HeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
     title: string;
     canSort?: boolean;
     onSort: (props: SortingProps) => unknown;
-}
-interface IFooter extends IColumn {
+};
+export declare type FooterProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
-}
-interface IBodyColumn extends IColumn {
+};
+export declare type ColumnProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>>;
+export declare type ColumnWithCellProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnProps<RowProps, ExtraProps> & {
     Cell: ReactElement;
+};
+export declare type UserTableReturns<RowProps extends KvProps, ExtraProps extends KvProps> = {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+};
+export interface BasicTableHeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
 }
-export interface IRow {
-    [name: string]: any;
-}
-interface RowClickProps {
-    onRowClick?: (props: {
-        row: IRow;
-    }) => unknown;
-}
-export interface SortingProps {
-    field: string;
-    isSorted?: boolean;
-    descending?: boolean;
-}
-export interface UseTableProps extends RowClickProps {
-    data: Array<IRow>;
-    columns: Array<IColumn>;
-    initialState?: InitialStateProps;
-    disableSortBy?: boolean;
-    onSort?: (props: SortingProps) => unknown;
-    [name: string]: any;
-}
-export interface UseScrollProps {
-    canFreeze?: boolean;
-}
-export interface BasicTableHeaderProps {
-    headers: Array<IHeader>;
-}
-export interface BasicTableFooterProps {
-    footers: Array<IFooter>;
+export interface BasicTableFooterProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
 }
-export interface BasicTableBodyProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow & RowClickProps>;
+export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
     noDataText?: string;
     forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export interface BasicTableBodyRowProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow & RowClickProps>;
-    row: IRow & RowClickProps;
+export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+    row: RowProps;
     forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
+export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };

package/BasicTable/useTable.d.ts

@@ -1,51 +1,3 @@
-/// <reference types="react" />
-import { UseTableProps, SortingProps } from "./types";
-declare function useTable(props: UseTableProps): {
-    headers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: JSX.Element;
-        title: string;
-        onSort: ({ field }: Pick<SortingProps, "field">) => void;
-    }[];
-    footers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").FunctionComponentElement<any>;
-    }[];
-    columns: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    }[];
-    rows: {
-        onRowClick: ((props: {
-            row: import("./types").IRow;
-        }) => unknown) | undefined;
-    }[];
-};
+import { UseTableProps, KvProps, UserTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
 export default useTable;

package/BasicTable/useTable.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState, useMemo, useCallback } from "react";
 function useTable(props) {
-    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, onRowClick = props.onRowClick, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort", "onRowClick"]);
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
     if (!data) {
         throw new Error('"data" is required but got null or undefined');
     }
@@ -66,7 +66,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return (__assign(__assign({}, d), { onRowClick: onRowClick })); }); }, [data]);
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
     var cols = useMemo(function () {
         return columns.map(function (col) {
             var Body = col.Body;

package/FileUploader/index.d.ts

@@ -0,0 +1,4 @@
+import { FileUploaderProps } from "./types";
+declare function FileUploader(props: FileUploaderProps): JSX.Element;
+export default FileUploader;
+export * from "./types";

package/FileUploader/index.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import CircularProgress from "@mui/material/CircularProgress";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function FileUploader(props) {
+    var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, loading = props.loading, disabled = props.disabled, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    var _c = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _c.alertArgs, rootProps = _c.rootProps, onCloseAlert = _c.onCloseAlert, onSelectFile = _c.onSelectFile, getRootProps = _c.getRootProps, getInputProps = _c.getInputProps;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
+                        fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                        cursor: disabled ? "not-allowed" : "pointer"
+                    } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
+                border: "1px dashed #0099a7",
+                borderRadius: "5px",
+                outline: "none",
+                backgroundColor: "#F2F2F2",
+                maxWidth: maxWidth,
+                height: height,
+                width: "100%"
+            } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
+                            fontSize: ".875rem",
+                            textAlign: "center"
+                        } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
+                            backgroundColor: "white !important",
+                            color: disabled
+                                ? theme.palette.grey[400]
+                                : theme.palette.primary.main,
+                            fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                            cursor: disabled ? "not-allowed" : "pointer"
+                        }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))) })));
+}
+export default FileUploader;
+export * from "./types";

package/FileUploader/types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from "react";
+import { DropzoneProps } from "react-dropzone";
+export interface InterfaceProps {
+    sizeExceededErrorText?: string;
+    wrongFileTypeErrorText?: string;
+    onUpload: (files: Array<File>) => void;
+    disabled?: boolean;
+    maxSize?: number;
+    accept?: DropzoneProps["accept"];
+    maxFiles?: DropzoneProps["maxFiles"];
+    multiple?: DropzoneProps["multiple"];
+}
+export interface FileUploaderProps extends InterfaceProps {
+    loading?: boolean;
+    dropFileText?: string;
+    chooseFileText?: string;
+    height?: CSSProperties["height"];
+    maxWidth?: CSSProperties["maxWidth"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/FileUploader/types.js

@@ -0,0 +1 @@
+export {};

package/FileUploader/useInteractions.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { InterfaceProps } from "./types";
+declare function useInteractions(props: InterfaceProps): {
+    alertArgs: {
+        open: boolean;
+        message: string;
+    };
+    rootProps: {
+        onClick: (e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
+        onKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+    };
+    onCloseAlert: () => void;
+    onSelectFile: () => void;
+    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
+    getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
+};
+export default useInteractions;

package/FileUploader/useInteractions.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useState, useCallback, useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+function useInteractions(props) {
+    var multiple = props.multiple, disabled = props.disabled, maxFiles = props.maxFiles, _a = props.maxSize, maxSize = _a === void 0 ? 1024 * 1024 * 5 : _a, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
+    var ERROR_TYPE_MSG = useMemo(function () {
+        return wrongFileTypeErrorText ||
+            "The type of the file you uploaded is not accepted, please reupload!";
+    }, [wrongFileTypeErrorText]);
+    var ERROR_SIZE_MSG = useMemo(function () {
+        return sizeExceededErrorText ||
+            "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
+    }, [sizeExceededErrorText, maxSize]);
+    var _b = useState({ open: false, message: "" }), alertArgs = _b[0], setAlertArgs = _b[1];
+    var onOpenAlert = useCallback(function (message) {
+        setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
+    }, []);
+    var onCloseAlert = useCallback(function () {
+        setAlertArgs({ open: false, message: "" });
+    }, []);
+    var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
+        if (rejectedFiles && rejectedFiles.length > 0) {
+            rejectedFiles.some(function (rejectedFile) {
+                var file = rejectedFile.file, errors = rejectedFile.errors;
+                if (accept && !Object.keys(accept).includes(file.type)) {
+                    onOpenAlert(ERROR_TYPE_MSG);
+                    return true;
+                }
+                if (file.size > maxSize) {
+                    onOpenAlert(ERROR_SIZE_MSG);
+                    return true;
+                }
+                if (errors.length > 0) {
+                    onOpenAlert(errors.join("; "));
+                    return true;
+                }
+                return false;
+            });
+        }
+        else {
+            onUpload(acceptedFiles);
+        }
+    }, [accept, onUpload]);
+    var _c = useDropzone({
+        onDrop: onDrop,
+        accept: accept,
+        multiple: multiple,
+        disabled: disabled,
+        maxSize: maxSize,
+        maxFiles: maxFiles
+    }), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, onSelectFile = _c.open;
+    var rootProps = getRootProps({
+        onClick: function (e) { return e.stopPropagation(); },
+        onKeyDown: function (e) {
+            if (e.key === "Space" || e.key === "Enter") {
+                e.stopPropagation();
+            }
+        }
+    });
+    return {
+        alertArgs: alertArgs,
+        rootProps: rootProps,
+        onCloseAlert: onCloseAlert,
+        onSelectFile: onSelectFile,
+        getRootProps: getRootProps,
+        getInputProps: getInputProps
+    };
+}
+export default useInteractions;

package/README.md

@@ -214,7 +214,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
 import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
 ```
 
-<h5>Column Props (IColumn)</h5>
+<h5>Column Props (ColumnBaseProps)</h5>
 
 | Name        | Type                        | Default | Required | Description                                           |
 | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -231,33 +231,33 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
 
 <h5>Hook Props</h5>
 
-| Name          | Type                       | Default | Required | Description                                 |
-| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
-| columns       | Array\<IColumn\>           |         | true     | table columns                               |
-| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
-| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
-| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
-| onRowClick    | func                       |         | false    | The function for row clicking.              |
-| onSort        | func                       |         | false    | The function for sorting rows.              |
+| Name          | Type                               | Default | Required | Description                                 |
+| ------------- | ---------------------------------- | ------- | -------- | ------------------------------------------- |
+| columns       | Array\<ColumnBaseProps\>           |         | true     | table columns                               |
+| data          | Array<{ [name: string]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                               |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }           |         | false    | Set the initial states                      |
+| onSort        | func                               |         | false    | The function for sorting rows.              |
 
 <h5>Hook Returns</h5>
 
-| Name    | Type                 | Description               |
-| ------- | -------------------- | ------------------------- |
-| headers | Array\<IHeader\>     | The cells for the header. |
-| columns | Array\<IBodyColumn\> | The cells for the body.   |
-| footers | Array\<IFooter>      | The cells for the footer. |
-| rows    | Array<IRow\>         | The rows for the table.   |
+| Name    | Type                         | Description               |
+| ------- | ---------------------------- | ------------------------- |
+| headers | Array\<HeaderProps\>         | The cells for the header. |
+| columns | Array\<ColumnWithCellProps\> | The cells for the body.   |
+| footers | Array\<FooterProps>          | The cells for the footer. |
+| rows    | Array<RowProps\>             | The rows for the table.   |
 
 <h5>Component Props</h5>
 
-| Name       | Type                 | Default    | Required | Description                               |
-| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
-| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
-| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
-| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
-| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
-| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+| Name       | Type                         | Default    | Required | Description                               |
+| ---------- | ---------------------------- | ---------- | -------- | ----------------------------------------- |
+| headers    | Array\<HeaderProps\>         |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<ColumnWithCellProps\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<FooterProps>          | []         | false    | The cells for the footer. (from the hook) |
+| onRowClick | func                         |            | false    | The function for row clicking.            |
+| noDataText | string                       | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<RowProps\>             |            | true     | The rows for the table. (from the hook)   |
 
 
 

package/index.d.ts

@@ -10,6 +10,7 @@ export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FeinInput";
+export * from "./FileUploader";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";
+export { default as FileUploader } from "./FileUploader";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/index.js

@@ -10,6 +10,7 @@ export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FeinInput";
+export * from "./FileUploader";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";
+export { default as FileUploader } from "./FileUploader";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.4",
+  "version": "1.0.6-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -58,6 +58,7 @@
     "@mui/system": "~5.4.2",
     "@reach/router": "^1.3.4",
     "color-alpha": "^1.1.3",
+    "react-dropzone": "~14.2.3",
     "react-player": "^2.9.0",
     "rifm": "^0.12.1"
   },