@fattureincloud/fic-design-system 0.15.4 → 0.15.7

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/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/table/tablePalette.d.ts

@@ -0,0 +1,33 @@
+import { colorsPalette } from '../../common/types/colorsPalette';
+import { ButtonProps, IconButtonProps } from '../buttons';
+import { DropdownItemType } from '../dropdown/types';
+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/table/types.d.ts

@@ -0,0 +1,28 @@
+import { Row, SortingRule } from 'react-table';
+import { DropdownItemType } from '../dropdown/types';
+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/table/typings/main.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { checkboxStatus } from '../../form/checkbox/types';
+import { IconProps } from '../../icon';
+export interface PropertyInterface {
+    id: string;
+    label: string;
+    columnStyle?: React.CSSProperties;
+    render?: (val: string | number, id?: string | number) => JSX.Element;
+    deactivateActive?: boolean;
+    sortable?: boolean;
+}
+export declare type TControlledProperty = PropertyInterface & {
+    active: checkboxStatus;
+    position: number;
+};
+export declare type TControlledProperties = TControlledProperty[];
+export declare type ActionType = {
+    label: string;
+    action: (element: {
+        id: number;
+        [key: string]: string | number;
+    }, selectedRows: Array<number>) => void;
+    color?: string;
+};
+export interface TablePropsInterface {
+    className?: string;
+    properties: Array<PropertyInterface>;
+    data: Array<{
+        id: number;
+        [key: string]: string | number;
+    }>;
+    actions?: Array<ActionType>;
+    listSize: number;
+    pageSize: number;
+    changePageAction: (pageNumber: number) => void;
+    nextPageAction?: () => void;
+    prevPageAction?: () => void;
+    currentPage: number;
+    customizeModalTitle: string;
+    isLoading?: boolean;
+    selectionCallback?: (newData: Array<number>) => void;
+    selectedList?: Array<number>;
+    disableSelection?: boolean;
+    emptySetIcon?: IconProps;
+    emptySetTitle?: string;
+    emptySetText?: string;
+    emptySetAction?: {
+        text: string;
+        icon?: IconProps;
+        action: () => void;
+    };
+    renderMobileRow?: (o: {
+        [key: string]: React.ReactText;
+        id: number;
+    }) => JSX.Element;
+    persistencyId?: string;
+    isHeaderFixed?: boolean;
+}
+export interface PropertyFilterInterface {
+    id: string;
+    type: 'asc' | 'desc' | boolean;
+}
+export interface TableStateInterface {
+    propertiesFilter: Array<PropertyFilterInterface>;
+    showModalCustomize: boolean;
+    controlledProperties: TControlledProperties;
+    currentActionsPopUp?: number;
+}
+export declare type TTable = React.FunctionComponent<TablePropsInterface>;
+export declare type TSortIcon = React.FC<{
+    property: string;
+    propertiesFilter: Array<PropertyFilterInterface>;
+    handleSortOnProperty: (id: string, type: 'asc' | 'desc' | boolean) => void;
+}>;
+export declare type TPagination = React.FC<{
+    pageSize: number;
+    listSize: number;
+    changePageAction: (pageNumber: number) => void;
+    nextPageAction?: () => void;
+    prevPageAction?: () => void;
+    currentPage: number;
+}>;
+export interface CustomizationsModalPropsInterface {
+    show?: boolean;
+    close: () => void;
+    title: string;
+    properties: TControlledProperties;
+    modifyControlledPropertiesHandler: (properties: TControlledProperties) => void;
+}
+export interface CustomizationsModalStateInterface {
+    localProperties: TControlledProperties;
+}

package/dist/components/table/utils/configPersistency.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { PropertyInterface, TControlledProperties } from '../typings/main';
+export declare const getConfig: (persistencyId?: string | undefined) => TControlledProperties | undefined;
+export declare const modifyConfig: (properties: TControlledProperties, persistencyId?: string | undefined) => void;
+export declare const mergePropertiesPersistency: (properties: PropertyInterface[], persistency: TControlledProperties) => {
+    id: string;
+    label: string;
+    columnStyle?: import("react").CSSProperties | undefined;
+    render?: ((val: string | number, id?: string | number | undefined) => JSX.Element) | undefined;
+    deactivateActive?: boolean | undefined;
+    sortable?: boolean | undefined;
+    active: import("../../form/checkbox/types").checkboxStatus;
+    position: number;
+}[];

package/dist/components/table/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/textButton/TextButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface Props extends WrapperProps {
+    text: string;
+}
+declare const TextButton: ({ isDisabled, onClick, text, ...rest }: Props) => JSX.Element;
+interface WrapperProps {
+    color?: 'blue' | 'red' | 'green' | 'yellow' | 'white';
+    isDisabled?: boolean;
+    onClick: () => void;
+    className?: string;
+}
+export default TextButton;

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

@@ -0,0 +1,2 @@
+import TextButton from './TextButton';
+export { TextButton };

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

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

package/dist/components/tip/components/styledTip.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLeftIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastContainerProps } from './typings/toast';
+export declare const ToastContainer: import("styled-components").StyledComponent<import("react").FC<import("react-toastify").ToastContainerProps>, import("styled-components").DefaultTheme, {
+    hideProgressBar: true;
+    newestOnTop: true;
+    closeOnClick: false;
+    draggable: false;
+    rtl: false;
+} & ToastContainerProps, "draggable" | "rtl" | "closeOnClick" | "newestOnTop" | "hideProgressBar">;

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

@@ -0,0 +1,32 @@
+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 interface ToastProps {
+    type?: toastType;
+    content?: ReactNode;
+    icon?: IconProps;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    autoClose?: false;
+}
+export interface ToastContentProps {
+    title: ReactNode;
+    content?: ReactNode;
+    icon: IconProps;
+    actionLabel?: string;
+    onActionClick?: () => void;
+}
+export interface ToastInterface {
+    Container: React.FC<ToastContainerProps>;
+    show: (title: ReactNode, options: ToastProps) => string | undefined;
+    dismiss: (toastId: string | undefined) => void;
+    success: (title: ReactNode, options?: ToastProps) => string | undefined;
+    error: (title: ReactNode, options?: ToastProps) => string | undefined;
+    info: (title: ReactNode, options?: ToastProps) => string | undefined;
+    warning: (title: ReactNode, options?: ToastProps) => string | undefined;
+    standard: (title: ReactNode, options?: ToastProps) => string | undefined;
+}
+export interface ToastContainerProps {
+    position: ToastPosition;
+}

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

@@ -1,6 +1,7 @@
 import { Meta, Story } from '@storybook/react';
 import { ComponentProps } from 'react';
-import Tooltip, { TooltipProps } from './Tooltip';
+import Tooltip from './Tooltip';
+import { TooltipProps } from './types';
 export declare const Template: Story<TooltipProps>;
 export declare const WithIcon: Story<TooltipProps>;
 export declare const WithButton: Story<TooltipProps>;

package/dist/components/tooltips/components/message.d.ts

@@ -0,0 +1,12 @@
+import { TPlacement } from '../types';
+interface MessageInterface {
+    messageHeight: number;
+    messageWidth: number;
+    placement: TPlacement;
+    triggerDimension: {
+        width: number;
+        height: number;
+    };
+}
+export declare const Message: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MessageInterface, never>;
+export {};

package/dist/components/tooltips/components/styledTooltipWrapper.d.ts

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

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

@@ -0,0 +1,2 @@
+import Tooltip from './tooltips';
+export { Tooltip };

package/dist/components/tooltips/tooltips.d.ts

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { TTooltip, UnstyledTooltipPropsInterface, UnstyledTooltipStateInterface } from './types';
+export declare class UnstyledTooltip extends Component<UnstyledTooltipPropsInterface, UnstyledTooltipStateInterface> {
+    constructor(props: UnstyledTooltipPropsInterface);
+    messageRef: React.RefObject<HTMLDivElement>;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: UnstyledTooltipPropsInterface): void;
+    handleMouseLeave: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    handleMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    updateStateDimensions: (width: number, height: number) => void;
+    render(): JSX.Element;
+}
+declare const Tooltip: TTooltip;
+export default Tooltip;

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

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

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare type TPlacement = 'top' | 'left' | 'right' | 'bottom';
+export declare type TTooltip = React.FunctionComponent<{
+    message?: string;
+    renderMessage?: () => JSX.Element;
+    placement: TPlacement;
+    isMessageVisible?: boolean;
+    isFullWidth?: boolean;
+}>;
+export interface UnstyledTooltipPropsInterface {
+    message?: string;
+    renderMessage?: () => JSX.Element;
+    placement: TPlacement;
+    isMessageVisible?: boolean;
+    isFullWidth?: boolean;
+}
+export interface UnstyledTooltipStateInterface {
+    show: boolean;
+    messageHeight?: number;
+    messageWidth?: number;
+    triggerDimension: {
+        width: number;
+        height: number;
+    };
+}

package/dist/components/verticalTab/VerticalTab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { VerticalTabProps } from './types';
+declare const VerticalTab: ({ width, renderLeftContent, renderRightContent, }: VerticalTabProps) => JSX.Element;
+export default VerticalTab;

package/dist/components/verticalTab/components/VerticalTabSelector/VerticalTabSelector.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent } from 'react';
+import { IconProps } from '../../../icon';
+import { VerticalTabSelectorStatus } from './types';
+export interface VerticalTabSelectorProps {
+    leftIcon?: IconProps;
+    text: string;
+    counter?: number;
+    active?: boolean;
+    status: VerticalTabSelectorStatus;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+declare const VerticalTabSelector: ({ leftIcon, text, status, counter, active, onClick, }: VerticalTabSelectorProps) => JSX.Element;
+export default VerticalTabSelector;

package/dist/components/verticalTab/components/VerticalTabSelector/index.d.ts

@@ -0,0 +1,5 @@
+export { default as verticalTabSelectorPalette } from './verticalTabSelectorPalette';
+import { VerticalTabSelectorStatus } from './types';
+import VerticalTabSelector from './VerticalTabSelector';
+export { VerticalTabSelector, VerticalTabSelectorStatus };
+export { VerticalTabSelectorPalette } from './types';

package/dist/components/verticalTab/components/VerticalTabSelector/styled.d.ts

@@ -0,0 +1,11 @@
+import { DefaultTheme } from 'styled-components';
+import { VerticalTabSelectorProps } from './VerticalTabSelector';
+export declare const VerticalTabSelectorWrapper: import("styled-components").StyledComponent<"button", DefaultTheme, {
+    active: VerticalTabSelectorProps['active'];
+    status: VerticalTabSelectorProps['status'];
+}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StatusContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    status: VerticalTabSelectorProps['status'];
+}, never>;

package/dist/components/verticalTab/components/VerticalTabSelector/types.d.ts

@@ -0,0 +1,37 @@
+import { paletteColor } from '../../../../styles/types';
+export declare enum VerticalTabSelectorStatus {
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    EDIT = "edit",
+    WARNING = "warning"
+}
+export type VerticalTabSelectorPalette = {
+    default: {
+        active: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+        inactive: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+    };
+    warning: {
+        active: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+        inactive: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+    };
+};

package/dist/components/verticalTab/components/VerticalTabSelector/verticalTabSelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { VerticalTabSelectorProps } from './VerticalTabSelector';
+export declare const Template: Story<VerticalTabSelectorProps>;
+declare const VerticalTabSelectorStories: Meta<VerticalTabSelectorProps>;
+export default VerticalTabSelectorStories;

package/dist/components/verticalTab/components/VerticalTabSelector/verticalTabSelectorPalette.d.ts

@@ -0,0 +1,3 @@
+import { VerticalTabSelectorPalette } from './types';
+declare const verticalTabSelectorPalette: VerticalTabSelectorPalette;
+export default verticalTabSelectorPalette;

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

@@ -0,0 +1,2 @@
+export { default as VerticalTab } from './VerticalTab';
+export { VerticalTabSelector, VerticalTabSelectorPalette, VerticalTabSelectorStatus, } from './components/VerticalTabSelector';

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

@@ -0,0 +1,6 @@
+import { VerticalTabProps } from './types';
+export declare const VerticalTabWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    width: VerticalTabProps['width'];
+}, never>;
+export declare const VerticalTabSelectorsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const VerticalTabContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface VerticalTabProps {
+    width?: string | number;
+    renderLeftContent: () => JSX.Element | JSX.Element[];
+    renderRightContent: () => JSX.Element | JSX.Element[];
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Meta, Story } from '@storybook/react';
+import { VerticalTabProps } from './types';
+export declare const Template: Story<VerticalTabProps>;
+export declare const WithVerticalTabSelectors: () => JSX.Element;
+export declare const WithVerticalTabSelectorsEdit: () => JSX.Element;
+declare const VerticalTabStories: Meta<VerticalTabProps>;
+export default VerticalTabStories;