@fattureincloud/fic-design-system 0.6.5 → 0.7.0

package/dist/components/oldTable/hooks/useRowsSelection.d.ts

@@ -0,0 +1,4 @@
+import { Row } from 'react-table';
+import { OnSelectionChange, TableData } from '../types';
+declare const useRowsSelection: <T extends TableData>(selectedFlatRows: Row<T>[], preSelectAllRows: boolean, onSelectionChange: OnSelectionChange<T> | undefined, allRows: Row<T>[]) => string[];
+export default useRowsSelection;

package/dist/components/oldTable/hooks/useTableHooks.d.ts

@@ -0,0 +1,6 @@
+import { PluginHook } from 'react-table';
+import { TableProps } from '../Table';
+import { TableData } from '../types';
+declare type Props<T extends TableData> = Pick<TableProps<T>, 'actions' | 'withCheckbox' | 'renderActions' | 'selectableRows' | 'actionsHeader'>;
+declare const useTableHooks: <T extends TableData>({ actions, renderActions, withCheckbox, selectableRows, actionsHeader, }: Props<T>) => PluginHook<T>[];
+export default useTableHooks;

package/dist/components/oldTable/hooks/useTableValues.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Row } from 'react-table';
+import { TableData } from '../types';
+interface Props {
+    initialFilter?: string;
+}
+interface ReturnType<DataType extends TableData> {
+    filter: string;
+    setFilter: Dispatch<SetStateAction<string>>;
+    selection: Row<DataType>[];
+    setSelection: Dispatch<SetStateAction<Row<DataType>[]>>;
+}
+declare const useTableValues: <DataType extends TableData>({ initialFilter }?: Props) => ReturnType<DataType>;
+export default useTableValues;

package/dist/components/oldTable/index.d.ts

@@ -0,0 +1,7 @@
+import { Column, Row } from 'react-table';
+import useTableValues from './hooks/useTableValues';
+import Table from './Table';
+import { TableProps } from './Table';
+import tablePalette, { TablePalette } from './tablePalette';
+import { ManualPagination, OnSelectionChange, OnSort, RowActions, TableData } from './types';
+export { Table, TableProps, TableData, tablePalette, useTableValues, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Row, Column, };

package/dist/components/oldTable/stories/columns.d.ts

@@ -0,0 +1,3 @@
+import { Column } from 'react-table';
+import { DataType } from './components/types';
+export declare const columns: Column<DataType>[];

package/dist/components/oldTable/stories/components/CustomPerson.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CustomPersonData } from './types';
+interface Props {
+    value: CustomPersonData;
+}
+declare const CustomPerson: ({ value: { img, name, role } }: Props) => JSX.Element;
+export default CustomPerson;

package/dist/components/oldTable/stories/components/Role.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const rolesArray: readonly ["master", "admin", undefined];
+export declare type roleType = typeof rolesArray[number];
+interface Props {
+    role: roleType;
+}
+declare const Role: ({ role }: Props) => JSX.Element | null;
+export default Role;

package/dist/components/oldTable/stories/components/types.d.ts

@@ -0,0 +1,14 @@
+import { roleType } from './Role';
+export interface CustomPersonData {
+    img: string;
+    name: string;
+    role?: roleType;
+}
+export interface DataType {
+    person: CustomPersonData;
+    name: string;
+    address: string;
+    date: string;
+    order: number;
+    isDisabled?: boolean;
+}

package/dist/components/oldTable/stories/data.d.ts

@@ -0,0 +1,2 @@
+import { DataType } from './components/types';
+export declare const getRandomUsers: (n: number) => DataType[];

package/dist/components/oldTable/table.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { DataType } from './stories/components/types';
+import { TableProps } from './Table';
+export declare const Template: Story<TableProps<DataType>>;
+declare const TableStories: Meta<TableProps<DataType>>;
+export default TableStories;

package/dist/components/oldTable/tablePalette.d.ts

@@ -0,0 +1,33 @@
+import { colorsPalette } from '../../common/types/colorsPalette';
+import { ButtonProps, IconButtonProps } from '../buttons';
+import { DropdownItemType } from '../dropdown';
+declare type TableHeaderPalette = colorsPalette;
+declare type rowStatus = 'normal' | 'hover' | 'selected' | 'disabled';
+declare type TableRowsPalette = {
+    [k in rowStatus]: colorsPalette;
+};
+interface SelectedRowsCountPalette extends colorsPalette {
+    resetButtonColor: ButtonProps['color'];
+}
+declare type paginationItemStatus = 'normal' | 'hover' | 'active';
+declare type PaginationPalette = {
+    numbers: {
+        [k in paginationItemStatus]: colorsPalette;
+    };
+    buttons: ButtonProps['color'];
+};
+declare type ActionsPalette = {
+    colors: {
+        [k in DropdownItemType]: ButtonProps['color'];
+    };
+    dropdownTriggerColor: IconButtonProps['color'];
+};
+export interface TablePalette {
+    header: TableHeaderPalette;
+    rows: TableRowsPalette;
+    selectedRowsCount: SelectedRowsCountPalette;
+    actions: ActionsPalette;
+    pagination: PaginationPalette;
+}
+declare const tablePalette: TablePalette;
+export default tablePalette;

package/dist/components/oldTable/types.d.ts

@@ -0,0 +1,28 @@
+import { Row, SortingRule } from 'react-table';
+import { DropdownItemType } from '../dropdown';
+import { IconProps } from '../icon';
+export interface TableData {
+    isDisabled?: boolean;
+}
+export interface CustomColumn {
+    align?: 'left' | 'center' | 'right';
+}
+export interface RowActions<T extends TableData> {
+    primary?: RowAction<T>;
+    dropdown?: RowAction<T>[];
+}
+export interface RowAction<T extends TableData> {
+    icon?: IconProps;
+    type?: DropdownItemType;
+    text: string;
+    onClick: (row: Row<T>) => void;
+    isDisabled?: boolean;
+}
+interface ManualPaginationConfig {
+    pageCount: number;
+    setCurrentPage: (page: number) => void;
+}
+export declare type ManualPagination = ManualPaginationConfig | undefined;
+export declare type OnSort<T extends TableData> = (sortBy: Array<SortingRule<T>>) => void;
+export declare type OnSelectionChange<T extends TableData> = (rows: Row<T>[], addedRows: Row<T>[], removedRows: Row<T>[]) => void;
+export {};

package/dist/components/oldTable/utils.d.ts

@@ -0,0 +1,16 @@
+import { Row, TableData } from 'index';
+import { DefaultTheme } from 'styled-components';
+import { paletteColor } from '../../styles/types';
+import { TableBodyTrProps } from './components/tableBody/TableBodyTr';
+interface GetTableBodyTrStylesParams extends TableBodyTrProps {
+    theme: DefaultTheme;
+}
+export interface TableBodyTrStyles {
+    background: paletteColor;
+    color: paletteColor;
+    hoverColor: paletteColor;
+    hoverBackground: paletteColor;
+}
+export declare const getTableBodyTrStyles: ({ theme, isDisabled, isSelected, }: GetTableBodyTrStylesParams) => TableBodyTrStyles;
+export declare const getIdsFromRows: <T extends TableData>(rows: Row<T>[] | undefined) => string[];
+export {};

package/dist/components/pagination/Pagination.d.ts

@@ -10,7 +10,6 @@ import { PaginationProps } from './types';
  * @param {number} currentPage Used to set the current page number
  * @param {string} prevText Define previous label text
  * @param {string} nextText Define next label text
- * @param {PaginationType} color Used to set the theme of the component
  */
 declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

package/dist/components/pagination/pagination.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { PaginationProps } from './types';
 export declare const Template: Story<PaginationProps>;
-export declare const Normal: () => JSX.Element;
+export declare const Normal: Story<PaginationProps>;
 declare const PaginationStories: Meta<PaginationProps>;
 export default PaginationStories;

package/dist/components/pagination/styled.d.ts

@@ -1,5 +1,4 @@
-import { PaginationType } from './';
 export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    color: PaginationType;
-}, never>;
+export declare const PaginationElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationNumberElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationButtonElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/pagination/types.d.ts

@@ -15,11 +15,21 @@ export declare type PaginationProps = {
     currentPage: number;
     prevText: string;
     nextText: string;
-    color?: PaginationType;
 };
+declare type PaginationNumbersStatus = 'normal' | 'hover' | 'active';
+declare type PaginationButtonsStatus = 'normal' | 'disabled';
 export declare type PaginationPalette = {
-    [key in PaginationType]: {
-        backgroundColor: paletteColor;
-        color: paletteColor;
+    numbers: {
+        [k in PaginationNumbersStatus]: {
+            backgroundColor: paletteColor;
+            color: paletteColor;
+        };
+    };
+    buttons: {
+        [k in PaginationButtonsStatus]: {
+            backgroundColor: paletteColor;
+            color: paletteColor;
+        };
     };
 };
+export {};

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { Row, UseTableOptions } from 'react-table';
+import { EmptyTablePageProps } from './components/EmptyState';
+import { ManualPagination, OnSelectionChange, OnSort, RowActions, TableData } from './types';
+export interface TableProps<T extends TableData> extends UseTableOptions<T> {
+    sortable?: boolean;
+    onSort?: OnSort<T>;
+    noPagination?: boolean;
+    manualPagination?: ManualPagination;
+    onScroll?: () => void;
+    pageSize?: number;
+    selectableRows?: boolean;
+    preSelectAllRows?: boolean;
+    onSelectionChange?: OnSelectionChange<T>;
+    onRowClick?: (row: Row<T>) => void;
+    globalFilter?: string;
+    hideHeader?: boolean;
+    EmptyPage?: EmptyTablePageProps['EmptyPage'];
+    Footer?: JSX.Element;
+    withCheckbox?: boolean;
+    isLoading?: boolean;
+    actions?: RowActions<T>;
+    renderActions?: () => JSX.Element;
+    actionsHeader?: string | JSX.Element;
+    bodyHeight?: number | string;
+    headerHeight?: number | string;
+    rowHeight?: number | string;
+    disableArrowNavigation?: boolean;
+}
+/**
+ * Component Props:
+ * @param {boolean} sortable Makes all columns sortable, sort can be disabled for a single column inside columns definition
+ * @param {function} onSort Callback called on column sort change
+ * @param {boolean} noPagination Hide table paginator and disabled pagination
+ * @param {number} pageSize Define the page size to use in every page
+ * @param {object} manualPagination If you want to manage the pagination by yourself
+ * @param {function} onScroll If pagination is disabled, this callback is called when user scroll to the bottom of the table
+ * @param {boolean} selectableRows Allow to select rows
+ * @param {boolean} preSelectAllRows Pre-select all rows
+ * @param {function} onSelectionChange Callback called when rows selection changes
+ * @param {function} onRowClick Callback called on row click
+ * @param {string} globalFilter Filter all columns by value
+ * @param {boolean} hideHeader Hide the table header
+ * @param {object} EmptyPage Configuration to show a custom component when table has no rows
+ * @param {JSX.Element} Footer Custom footer component
+ * @param {boolean} withCheckbox Show a column with checkboxes on left side of the table
+ * @param {boolean} isLoading Apply loading style to all cells
+ * @param {object} actions Configuration to render actions column
+ * @param {function} renderActions Used to customize actions column
+ * @param {string | JSX.Element} actionsHeader Used to customize actions header
+ * @param {number|string} bodyHeight Set tbody height, default 300px
+ * @param {number|string} headerHeight Set thead and th height, default 40px
+ * @param {number|string} rowHeight Set row height, default 40px
+ * @param {boolean} disableArrowNavigation Used to turn off Up/Down row selection and Enter click
+ */
+declare const Table: <T extends TableData>({ actions, bodyHeight, columns, data, EmptyPage, Footer, globalFilter: externalGlobalFilter, headerHeight, hideHeader, isLoading, manualPagination, noPagination, onRowClick, onScroll, onSelectionChange, onSort, preSelectAllRows, renderActions, actionsHeader, rowHeight, selectableRows, sortable, withCheckbox, pageSize, disableArrowNavigation, }: TableProps<T>) => JSX.Element;
+export default Table;

package/dist/components/table/components/ActionsCell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Row } from 'react-table';
+import { RowActions, TableData } from '../types';
+interface Props<T extends TableData> {
+    row: Row<T>;
+    actions?: RowActions<T>;
+    renderActions?: () => JSX.Element;
+}
+declare const ActionsCell: <T extends TableData>({ row, actions, renderActions }: Props<T>) => JSX.Element;
+export default ActionsCell;

package/dist/components/table/components/Pagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { UsePaginationInstanceProps } from 'react-table';
+import { TableData } from '../types';
+interface Props<T extends TableData> extends Omit<UsePaginationInstanceProps<T>, 'page' | 'pageOptions' | 'setPageSize'> {
+    pageIndex: number;
+}
+declare const Pagination: <T extends TableData>({ canPreviousPage, nextPage, previousPage, canNextPage, gotoPage, pageCount, pageIndex, }: Props<T>) => JSX.Element;
+export default Pagination;

package/dist/components/table/components/SortIndicator.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    isSorted: boolean;
+    isSortedDesc?: boolean;
+}
+declare const SortIndicator: ({ isSorted, isSortedDesc }: Props) => JSX.Element;
+export default SortIndicator;

package/dist/components/table/components/TableBody.d.ts

@@ -0,0 +1,14 @@
+import { Row, UseTableInstanceProps } from 'react-table';
+import { TableData } from '../types';
+interface Props<T extends TableData> {
+    rows: Row<T>[];
+    prepareRow: UseTableInstanceProps<T>['prepareRow'];
+    selectedRowsIds: string[];
+    isLoading: boolean;
+}
+declare const TableBody: <T extends TableData>({ isLoading, rows, prepareRow, selectedRowsIds }: Props<T>) => JSX.Element;
+export interface TableBodyTrProps {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+export default TableBody;

package/dist/components/table/components/TableFoot.d.ts

@@ -0,0 +1,2 @@
+declare const TableFoot: import("styled-components").StyledComponent<"tfoot", import("styled-components").DefaultTheme, {}, never>;
+export default TableFoot;

package/dist/components/table/components/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { HeaderGroup } from 'react-table';
+import { TableData } from '../types';
+interface Props<T extends TableData> {
+    headerGroups: HeaderGroup<T>[];
+}
+declare const TableHeader: <T extends TableData>({ headerGroups }: Props<T>) => JSX.Element;
+export default TableHeader;

package/dist/components/table/components/tableBody/TableBodyLoader.d.ts

@@ -0,0 +1,7 @@
+import { ColumnInstance } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    allColumns: ColumnInstance<T>[];
+}
+declare const TableBodyLoader: <T extends TableData>({ allColumns }: Props<T>) => JSX.Element;
+export default TableBodyLoader;

package/dist/components/table/components/tableBody/styled.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyTrStyles } from '../../utils';
+import { TableBodyTrProps } from '../TableBody';
+export declare const TableBodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, import("../tableParts/styled").TrProps & TableBodyTrStyles & TableBodyTrProps, keyof TableBodyTrStyles>;

package/dist/components/toast/typings/toast.d.ts

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 import { ToastPosition } from 'react-toastify/dist/types';
 import { IconProps } from '../../icon';
 export declare type toastType = 'standard' | 'error' | 'info' | 'warning' | 'success';
+export declare type toastLibraryType = 'dark' | 'error' | 'info' | 'warning' | 'success';
+export declare const typeMap: Record<toastType, toastLibraryType>;
 export interface ToastProps {
     type?: toastType;
     content?: ReactNode;

package/dist/components/tooltip/Tooltip.d.ts

@@ -11,7 +11,9 @@ export interface TooltipProps extends MessageProps {
     onMouseLeave?: MouseEventHandler;
     showAlways?: boolean;
     hideAfterSeconds?: number;
+    showAfterSeconds?: number;
     callbackAfterTimeout?: () => void;
+    onOpen?: (isOpen: boolean) => void;
 }
-declare const Tooltip: ({ message, placement, className, children, type, onMouseEnter, onMouseLeave, showAlways, hideAfterSeconds, callbackAfterTimeout, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ message, placement, className, children, type, onMouseEnter, onMouseLeave, showAlways, showAfterSeconds, hideAfterSeconds, callbackAfterTimeout, onOpen, }: TooltipProps) => JSX.Element;
 export default Tooltip;

package/dist/index.d.ts

@@ -22,9 +22,10 @@ import { MicroTag, MicroTagPalette, MicroTagProps } from './components/microTag'
 import { Modal, ModalSearchable, StepModal, StepModalBody, StepModalCommonProps, StepModalFooter, StepModalFooterProps, StepModalHeader, StepModalHeaderProps, StepModalProps } from './components/modals';
 import { ConfirmationModal } from './components/modals/confirmationModal';
 import { ModalBody } from './components/modals/modalStyled';
+import { BulkAction, CellProps, ColumnDefType, ColumnsType, NewTable, RowAction, RowActions as NewRowActions } from './components/newTable';
+import { Column, ManualPagination, OnSelectionChange, OnSort, Row, RowActions, Table, TableData, TablePalette, TableProps, useTableValues } from './components/oldTable';
 import { PageEmptySet } from './components/pageEmptySet';
 import { Stepper, StepperPalette, StepperProps } from './components/stepper';
-import { Column, ManualPagination, OnSelectionChange, OnSort, Row, RowActions, Table, TableData, TablePalette, TableProps, useTableValues } from './components/table';
 import { DropdownTabs, ScrollableTabs, TabsItem } from './components/tabs';
 import { Tag, TagPalette, TagProps, tagTypes } from './components/tag';
 import { ThemeProvider } from './components/themeProvider';
@@ -45,4 +46,4 @@ export { Segment, SegmentButton, SegmentButtonPalette, SegmentButtonProps } from
 export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
 export { bwColor } from './styles/types';
 export { Card, CardColor, CardPalette, CardProps, CardElevation, CardType } from './components/card';
-export { autocompleteYellow, paletteColor, Avatar, Button, ButtonProps, ButtonPalette, IconButton, IconButtonProps, IconButtonPalette, Icon, IconProps, IconPalette, iconColors, IconBackground, IconBackgroundPalette, Table, TableProps, TableData, useTableValues, Row, Column, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Checkbox, useCheckboxValue, CheckboxProps, CheckboxPalette, CheckboxStatus, Select, CreatableSelect, AsyncSelect, AsyncCreatableSelect, SelectProps, AsyncSelectProps, AsyncCreatableSelectProps, useSelectSimpleValue, isSimpleValue, simpleValue, CreatableSelectProps, useSelectValue, useSelectMultiValues, SelectPalette, SelectComponentsType, OptionType, PageEmptySet, Modal, ModalBody, ModalSearchable, StepModal, StepModalBody, StepModalCommonProps, StepModalFooter, StepModalFooterProps, StepModalHeader, StepModalHeaderProps, StepModalProps, Tooltip, TooltipProps, TooltipPalette, Accordion, Drawer, Radio, useRadioValue, RadioProps, RadioPalette, RadioStatus, RadioGroup, RadioGroupProps, RadioGroupOptions, InlineMessage, InlineMessageProps, InlineMessagePalette, InlineMessageType, Dropdown, DropdownItemProps, DropdownPalette, DropdownItemType, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, TabsItem, Stepper, StepperProps, StepperPalette, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, Toast, ToastProps, toastPalette, ToastPalette, ToastType, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, tagTypes, InputText, InputCode, InputTelephone, InputTextProps, InputCodeProps, InputTelephoneProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };
+export { NewTable, Table, ColumnsType, ColumnDefType, CellProps, BulkAction, NewRowActions, RowAction, autocompleteYellow, paletteColor, Avatar, Button, ButtonProps, ButtonPalette, IconButton, IconButtonProps, IconButtonPalette, Icon, IconProps, IconPalette, iconColors, IconBackground, IconBackgroundPalette, TableProps, TableData, useTableValues, Row, Column, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Checkbox, useCheckboxValue, CheckboxProps, CheckboxPalette, CheckboxStatus, Select, CreatableSelect, AsyncSelect, AsyncCreatableSelect, SelectProps, AsyncSelectProps, AsyncCreatableSelectProps, useSelectSimpleValue, isSimpleValue, simpleValue, CreatableSelectProps, useSelectValue, useSelectMultiValues, SelectPalette, SelectComponentsType, OptionType, PageEmptySet, Modal, ModalBody, ModalSearchable, StepModal, StepModalBody, StepModalCommonProps, StepModalFooter, StepModalFooterProps, StepModalHeader, StepModalHeaderProps, StepModalProps, Tooltip, TooltipProps, TooltipPalette, Accordion, Drawer, Radio, useRadioValue, RadioProps, RadioPalette, RadioStatus, RadioGroup, RadioGroupProps, RadioGroupOptions, InlineMessage, InlineMessageProps, InlineMessagePalette, InlineMessageType, Dropdown, DropdownItemProps, DropdownPalette, DropdownItemType, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, TabsItem, Stepper, StepperProps, StepperPalette, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, Toast, ToastProps, toastPalette, ToastPalette, ToastType, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, tagTypes, InputText, InputCode, InputTelephone, InputTextProps, InputCodeProps, InputTelephoneProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };