@fattureincloud/fic-design-system 0.4.28 → 0.4.30

package/dist/components/layout/sidebarItem/utils.d.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from 'styled-components';
-import { WrapperProps } from './SidebarItem';
-import { SidebarItemStyles } from './sidebarItemPalette';
+import { WrapperProps } from './styled';
+import { SidebarItemStyles } from './types';
 interface GetSidebarItemStylesParams extends WrapperProps {
     theme: DefaultTheme;
 }

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PaginationProps } from './types';
+/**
+ * Component Props:
+ * @param {number} pageSize Define the page size to use in every page
+ * @param {number} listSize Define the total size of the list
+ * @param {function} changePageAction Callback called when the user changes the page
+ * @param {function} nextPageAction Callback called on next page button clicked
+ * @param {function} prevPageAction Callback called on previous page button clicked
+ * @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/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { PaginationProps } from './types';
-export declare const Pagination: (props: PaginationProps) => JSX.Element;
+export { default as Pagination } from './Pagination';
+export { default as paginationPalette } from './paginationPalette';
+export { PaginationType, PaginationPalette } from './types';

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

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

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

@@ -0,0 +1,3 @@
+import { PaginationPalette } from '.';
+declare const paginationPalette: PaginationPalette;
+export default paginationPalette;

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

@@ -0,0 +1,5 @@
+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>;

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

@@ -1,3 +1,11 @@
+import { paletteColor } from '../../styles/types';
+export declare enum PaginationType {
+    GREY = "grey",
+    RED = "red",
+    BLUE = "blue",
+    YELLOW = "yellow",
+    GREEN = "green"
+}
 export declare type PaginationProps = {
     pageSize: number;
     listSize: number;
@@ -7,4 +15,11 @@ export declare type PaginationProps = {
     currentPage: number;
     prevText: string;
     nextText: string;
+    color?: PaginationType;
+};
+export declare type PaginationPalette = {
+    [key in PaginationType]: {
+        backgroundColor: paletteColor;
+        color: paletteColor;
+    };
 };

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

@@ -1,2 +1,3 @@
-import Progressbar from './progressbar';
-export { Progressbar };
+export { default as ProgressBar } from './ProgressBar';
+export { ProgressBarProps, ProgressBarPalette, ProgressBarType } from './types';
+export { default as progressBarPalette } from './progressBarPalette';

package/dist/components/progressbar/progressBarPalette.d.ts

@@ -0,0 +1,3 @@
+import { ProgressBarPalette } from '.';
+declare const progressBarPalette: ProgressBarPalette;
+export default progressBarPalette;

package/dist/components/progressbar/progressbar.d.ts

@@ -1,8 +1,9 @@
-import { Component } from 'react';
-import { TProgressbar, UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface } from './types';
-export declare class UnstyledProgressbar extends Component<UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface> {
-    constructor(props: UnstyledProgressbarPropsInterface);
-    render(): JSX.Element;
-}
-declare const Progressbar: TProgressbar;
-export default Progressbar;
+/// <reference types="react" />
+import { ProgressBarProps } from './types';
+/**
+ * Component Props:
+ * @param {ProgressBarType} color Used to set the colors of the component
+ * @param {number} percentage Numeric value used to set the progress bar percentage value
+ */
+declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
+export default ProgressBar;

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

@@ -1,8 +1,10 @@
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { ComponentProps } from 'react';
-import { Progressbar } from '.';
+import { ProgressBar } from '.';
+import { ProgressBarProps } from './';
+export declare const Template: Story<ProgressBarProps>;
 export declare const Editable: () => JSX.Element;
 export declare const Autocomplete: () => JSX.Element;
 export declare const AllColors: () => JSX.Element;
-declare const ProgressbarStories: Meta<ComponentProps<typeof Progressbar>>;
-export default ProgressbarStories;
+declare const ProgressBarStories: Meta<ComponentProps<typeof ProgressBar>>;
+export default ProgressBarStories;

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

@@ -0,0 +1,3 @@
+import { ProgressBarProps } from './types';
+export declare const ProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ProgressionBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressBarProps, never>;

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

@@ -1,11 +1,17 @@
-/// <reference types="react" />
-interface Props {
-    color?: 'blue' | 'green' | 'red' | 'yellow' | 'grey';
-    percentage: number;
-}
-export declare type TProgressbar = React.FunctionComponent<Props>;
-export interface UnstyledProgressbarPropsInterface extends Props {
+import { paletteColor } from '../../styles/types';
+export declare enum ProgressBarType {
+    GREY = "grey",
+    RED = "red",
+    BLUE = "blue",
+    YELLOW = "yellow",
+    GREEN = "green"
 }
-export interface UnstyledProgressbarStateInterface {
+export interface ProgressBarProps {
+    color?: ProgressBarType;
+    percentage: number;
 }
-export {};
+export declare type ProgressBarPalette = {
+    [key in ProgressBarType]: {
+        backgroundColor: paletteColor;
+    };
+};

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

@@ -21,6 +21,7 @@ export interface TableProps<T extends TableData> extends UseTableOptions<T> {
     isLoading?: boolean;
     actions?: RowActions<T>;
     renderActions?: () => JSX.Element;
+    actionsHeader?: string | JSX.Element;
     bodyHeight?: number | string;
     headerHeight?: number | string;
     rowHeight?: number | string;
@@ -46,10 +47,11 @@ export interface TableProps<T extends TableData> extends UseTableOptions<T> {
  * @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, rowHeight, selectableRows, sortable, withCheckbox, pageSize, disableArrowNavigation, }: TableProps<T>) => JSX.Element;
+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/hooks/useTableHooks.d.ts

@@ -1,6 +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'>;
-declare const useTableHooks: <T extends TableData>({ actions, renderActions, withCheckbox, selectableRows, }: Props<T>) => PluginHook<T>[];
+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/tabs/common/Item.d.ts

@@ -3,5 +3,5 @@ import { TabsItem } from './types';
 interface Props extends TabsItem {
     tabRef?: () => RefObject<HTMLDivElement>;
 }
-declare const Item: ({ active, handleClick, tabRef, text, tooltip }: Props) => JSX.Element;
+declare const Item: ({ active, handleClick, tabRef, text, tooltip, badge }: Props) => JSX.Element;
 export default Item;

package/dist/components/tabs/common/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { WithBadgeProps } from '../../floatingBadge/types';
 import { TooltipProps } from '../../tooltip';
 export interface TabsProps {
     className?: string;
@@ -6,9 +7,11 @@ export interface TabsProps {
     distance?: number;
     lateralPadding?: number;
 }
+export declare type TabsBadgeProps = Omit<WithBadgeProps, 'children'>;
 export interface TabsItem {
     text: string | JSX.Element;
     active?: boolean;
     handleClick?: () => void;
     tooltip?: TooltipProps;
+    badge?: TabsBadgeProps;
 }

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

@@ -1,3 +1,4 @@
-import ShortcutTip from './shortcutTip';
-import Tip from './tip';
-export { Tip, ShortcutTip };
+export { default as ShortcutTip } from './ShortcutTip';
+export { default as Tip } from './Tip';
+export { ShortcutTipProps, TipProps, TipPalette, TipType } from './types';
+export { default as tipPalette } from './tipPalette';

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

@@ -1,4 +1,15 @@
 /// <reference types="react" />
 import { ShortcutTipProps } from './types';
-declare const ShortcutTip: (props: ShortcutTipProps) => JSX.Element;
+/**
+ * Component Props:
+ * @param {string} className To support styled-components customization
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
+ * @param {IconProps} leftIcon Configuration of the left icon
+ * @param {function} onClose Callback called on right icon click
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
+ * @param {string} shortcut Render a bold text beside the main text
+ * @param {string} text Component main text
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
+ */
+declare const ShortcutTip: ({ shortcut, text, ...rest }: ShortcutTipProps) => JSX.Element;
 export default ShortcutTip;

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

@@ -0,0 +1,5 @@
+import { TipWrapperProps } from './types';
+export declare const TipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TipWrapperProps, never>;
+export declare const TipLeftIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TipCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,14 @@
 /// <reference types="react" />
 import { TipProps } from './types';
-declare const Tip: (props: TipProps) => JSX.Element;
+/**
+ * Component Props:
+ * @param {string} className To support styled-components customization
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
+ * @param {IconProps} leftIcon Configuration of the left icon
+ * @param {function} onClose Callback called on right icon click
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
+ * @param {string|ReactNode} text Component main content
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
+ */
+declare const Tip: ({ className, closeIcon, leftIcon, onClose, renderCloseIcon, text, type }: TipProps) => JSX.Element;
 export default Tip;

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

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

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

@@ -0,0 +1,3 @@
+import { TipPalette } from '.';
+declare const tipPalette: TipPalette;
+export default tipPalette;

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

@@ -1,15 +1,33 @@
-import { ReactNode } from 'react';
+import { ReactChild } from 'react';
+import { paletteColor } from '../..';
 import { IconProps } from '../icon';
+export declare enum TipType {
+    STANDARD = "standard",
+    ERROR = "error",
+    INFO = "info",
+    WARNING = "warning",
+    SUCCESS = "success"
+}
+export interface TipWrapperProps {
+    className?: string;
+    type: TipType;
+}
 export interface TipProps {
-    text: string | ReactNode;
+    className?: string;
+    closeIcon?: IconProps;
     leftIcon?: IconProps;
     onClose?: () => void;
-    closeIcon?: IconProps;
     renderCloseIcon?: () => JSX.Element;
-    renderIcon?: () => JSX.Element;
-    className?: string;
+    text: ReactChild;
+    type?: TipType;
 }
+export declare type TipPalette = {
+    [key in TipType]: {
+        color: paletteColor;
+        backgroundColor: paletteColor;
+    };
+};
 export interface ShortcutTipProps extends Omit<TipProps, 'text'> {
-    text: string;
     shortcut: string;
+    text: string;
 }

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-import Spinner from 'common/components/Spinner';
+import Spinner from './common/components/Spinner';
 import { Accordion } from './components/accordions';
 import { Avatar } from './components/avatar';
-import { Badge, BadgeProps } from './components/badge';
-import { Banner, BannerProps } from './components/banner';
+export { Banner, BannerProps, BannerType } from './components/banner';
+export { Badge, BadgeProps, BadgeType } from './components/badge';
 import { Button, ButtonProps, IconButton, IconButtonProps } from './components/buttons';
-import { Chip } from './components/chips';
+export { Chip, ChipType } from './components/chip';
 import { Drawer } from './components/drawer';
 import { closeDropdownType, Dropdown, DropdownItemProps, DropdownPalette, renderContentType } from './components/dropdown';
-import { WithBadge } from './components/floatingBadge';
+export { NotificationBadge, WithBadge, FloatingBadgeType } from './components/floatingBadge';
 import { Checkbox, CheckboxPalette, CheckboxProps, CheckboxStatus, useCheckboxValue } from './components/form/checkbox';
 import { DatePicker, DatePickerPalette, DatePickerProps, timeConversionOptions, useFormattedDate } from './components/form/datepicker';
 import { FileRejection, FileUploader, fileUploaderOnDrop, FileUploaderPalette, FileUploaderProps } from './components/form/fileUploader';
@@ -21,23 +21,23 @@ import { GroupedList, GroupType, ItemType } from './components/groupedList';
 import { Icon, IconPalette, IconProps } from './components/icon';
 import { IconBackground, IconBackgroundPalette } from './components/icon/components/iconBackground';
 import { InlineMessage, InlineMessagePalette, InlineMessageProps, InlineMessageType } from './components/inlineMessage';
-import { CustomSidebarItemProps, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps } from './components/layout';
+export { CustomSidebarItemProps, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, SidebarBadgeConfigType, SidebarBadgeConfigProps, } from './components/layout';
 import { MicroTag, MicroTagPalette, MicroTagProps } from './components/microTag';
 import { Modal, ModalSearchable } from './components/modals';
 import { ConfirmationModal } from './components/modals/confirmationModal';
 import { ModalBody } from './components/modals/modalStyled';
 import { PageEmptySet } from './components/pageEmptySet';
-import { Pagination } from './components/pagination';
-import { Progressbar } from './components/progressbar';
+export { Pagination, PaginationType } from './components/pagination';
+export { ProgressBar, ProgressBarType } from './components/progressbar';
 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 } from './components/tag';
 import { ThemeProvider } from './components/themeProvider';
-import { ShortcutTip, Tip } from './components/tip';
+export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
 import { Toast, ToastPalette, toastPalette, ToastProps, ToastType } from './components/toast';
 import { Tooltip, TooltipPalette, TooltipProps } from './components/tooltip';
 import { autocompleteYellow } from './styles/defaultPalette/colors/others';
 import { Theme } from './styles/theme';
 import { Palette, paletteColor } from './styles/types';
-export { autocompleteYellow, paletteColor, Avatar, Banner, BannerProps, Button, ButtonProps, IconButton, IconButtonProps, Icon, IconProps, IconPalette, 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, Tooltip, TooltipProps, TooltipPalette, Accordion, Progressbar, Drawer, Chip, Radio, useRadioValue, RadioProps, RadioPalette, RadioStatus, RadioGroup, RadioGroupProps, RadioGroupOptions, InlineMessage, InlineMessageProps, InlineMessagePalette, InlineMessageType, Badge, BadgeProps, Dropdown, DropdownItemProps, DropdownPalette, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, CustomSidebarItemProps, TabsItem, Stepper, StepperProps, StepperPalette, Tip, ShortcutTip, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, WithBadge, Pagination, Toast, ToastProps, toastPalette, ToastPalette, ToastType, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };
+export { autocompleteYellow, paletteColor, Avatar, Button, ButtonProps, IconButton, IconButtonProps, Icon, IconProps, IconPalette, 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, Tooltip, TooltipProps, TooltipPalette, Accordion, Drawer, Radio, useRadioValue, RadioProps, RadioPalette, RadioStatus, RadioGroup, RadioGroupProps, RadioGroupOptions, InlineMessage, InlineMessageProps, InlineMessagePalette, InlineMessageType, Dropdown, DropdownItemProps, DropdownPalette, 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, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };