@fattureincloud/fic-design-system 0.4.28 → 0.4.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/components/badge/Badge.d.ts +11 -1
  3. package/dist/components/badge/badge.stories.d.ts +3 -2
  4. package/dist/components/badge/badgePalette.d.ts +3 -0
  5. package/dist/components/badge/index.d.ts +3 -3
  6. package/dist/components/badge/types.d.ts +17 -1
  7. package/dist/components/banner/Banner.d.ts +10 -9
  8. package/dist/components/banner/banner.stories.d.ts +3 -4
  9. package/dist/components/banner/bannerPalette.d.ts +3 -0
  10. package/dist/components/banner/index.d.ts +3 -2
  11. package/dist/components/banner/styled.d.ts +5 -0
  12. package/dist/components/banner/types.d.ts +23 -0
  13. package/dist/components/chip/Chip.d.ts +13 -0
  14. package/dist/components/chip/chip.stories.d.ts +6 -0
  15. package/dist/components/chip/chipPalette.d.ts +3 -0
  16. package/dist/components/chip/index.d.ts +3 -0
  17. package/dist/components/chip/styled.d.ts +6 -0
  18. package/dist/components/chip/types.d.ts +25 -0
  19. package/dist/components/chips/chips.d.ts +2 -6
  20. package/dist/components/chips/index.d.ts +2 -2
  21. package/dist/components/chips/styled.d.ts +3 -0
  22. package/dist/components/floatingBadge/NotificationBadge.d.ts +9 -0
  23. package/dist/components/floatingBadge/floatingBadge.d.ts +7 -1
  24. package/dist/components/floatingBadge/floatingBadge.stories.d.ts +2 -1
  25. package/dist/components/floatingBadge/floatingBadgePalette.d.ts +3 -0
  26. package/dist/components/floatingBadge/index.d.ts +4 -2
  27. package/dist/components/floatingBadge/types.d.ts +24 -3
  28. package/dist/components/floatingBadge/withBadge.d.ts +5 -0
  29. package/dist/components/form/label/Label.d.ts +9 -8
  30. package/dist/components/form/label/index.d.ts +3 -2
  31. package/dist/components/form/label/labelPalette.d.ts +3 -0
  32. package/dist/components/form/label/styled.d.ts +2 -0
  33. package/dist/components/form/label/types.d.ts +21 -0
  34. package/dist/components/form/label/utils.d.ts +9 -0
  35. package/dist/components/layout/index.d.ts +1 -2
  36. package/dist/components/layout/sidebarItem/SidebarItem.d.ts +19 -26
  37. package/dist/components/layout/sidebarItem/components/SidebarItemDropdown.d.ts +2 -7
  38. package/dist/components/layout/sidebarItem/index.d.ts +5 -5
  39. package/dist/components/layout/sidebarItem/sidebarItem.stories.d.ts +2 -1
  40. package/dist/components/layout/sidebarItem/sidebarItemPalette.d.ts +1 -12
  41. package/dist/components/layout/sidebarItem/styled.d.ts +13 -0
  42. package/dist/components/layout/sidebarItem/types.d.ts +58 -2
  43. package/dist/components/layout/sidebarItem/utils.d.ts +2 -2
  44. package/dist/components/pagination/Pagination.d.ts +16 -0
  45. package/dist/components/pagination/index.d.ts +3 -3
  46. package/dist/components/pagination/pagination.stories.d.ts +2 -1
  47. package/dist/components/pagination/paginationPalette.d.ts +3 -0
  48. package/dist/components/pagination/styled.d.ts +5 -0
  49. package/dist/components/pagination/types.d.ts +15 -0
  50. package/dist/components/progressbar/index.d.ts +3 -2
  51. package/dist/components/progressbar/progressBarPalette.d.ts +3 -0
  52. package/dist/components/progressbar/progressbar.d.ts +9 -8
  53. package/dist/components/progressbar/progressbar.stories.d.ts +6 -4
  54. package/dist/components/progressbar/styled.d.ts +3 -0
  55. package/dist/components/progressbar/types.d.ts +15 -9
  56. package/dist/components/tip/index.d.ts +4 -3
  57. package/dist/components/tip/shortcutTip.d.ts +12 -1
  58. package/dist/components/tip/styled.d.ts +5 -0
  59. package/dist/components/tip/tip.d.ts +11 -1
  60. package/dist/components/tip/tip.stories.d.ts +4 -5
  61. package/dist/components/tip/tipPalette.d.ts +3 -0
  62. package/dist/components/tip/types.d.ts +24 -6
  63. package/dist/index.d.ts +10 -10
  64. package/dist/index.esm.js +5 -5
  65. package/dist/index.esm.js.map +1 -1
  66. package/dist/index.js +4 -4
  67. package/dist/index.js.map +1 -1
  68. package/dist/styles/theme.d.ts +16 -0
  69. package/package.json +1 -1
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { PaginationProps } from './types';
3
+ /**
4
+ * Component Props:
5
+ * @param {number} pageSize Define the page size to use in every page
6
+ * @param {number} listSize Define the total size of the list
7
+ * @param {function} changePageAction Callback called when the user changes the page
8
+ * @param {function} nextPageAction Callback called on next page button clicked
9
+ * @param {function} prevPageAction Callback called on previous page button clicked
10
+ * @param {number} currentPage Used to set the current page number
11
+ * @param {string} prevText Define previous label text
12
+ * @param {string} nextText Define next label text
13
+ * @param {PaginationType} color Used to set the theme of the component
14
+ */
15
+ declare const Pagination: (props: PaginationProps) => JSX.Element;
16
+ export default Pagination;
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- import { PaginationProps } from './types';
3
- export declare const Pagination: (props: PaginationProps) => JSX.Element;
1
+ export { default as Pagination } from './Pagination';
2
+ export { default as paginationPalette } from './paginationPalette';
3
+ export { PaginationType, PaginationPalette } from './types';
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { Meta } from '@storybook/react';
2
+ import { Meta, Story } from '@storybook/react';
3
3
  import { PaginationProps } from './types';
4
+ export declare const Template: Story<PaginationProps>;
4
5
  export declare const Normal: () => JSX.Element;
5
6
  declare const PaginationStories: Meta<PaginationProps>;
6
7
  export default PaginationStories;
@@ -0,0 +1,3 @@
1
+ import { PaginationPalette } from '.';
2
+ declare const paginationPalette: PaginationPalette;
3
+ export default paginationPalette;
@@ -0,0 +1,5 @@
1
+ import { PaginationType } from './';
2
+ export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const PaginationElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
4
+ color: PaginationType;
5
+ }, never>;
@@ -1,3 +1,11 @@
1
+ import { paletteColor } from '../../styles/types';
2
+ export declare enum PaginationType {
3
+ GREY = "grey",
4
+ RED = "red",
5
+ BLUE = "blue",
6
+ YELLOW = "yellow",
7
+ GREEN = "green"
8
+ }
1
9
  export declare type PaginationProps = {
2
10
  pageSize: number;
3
11
  listSize: number;
@@ -7,4 +15,11 @@ export declare type PaginationProps = {
7
15
  currentPage: number;
8
16
  prevText: string;
9
17
  nextText: string;
18
+ color?: PaginationType;
19
+ };
20
+ export declare type PaginationPalette = {
21
+ [key in PaginationType]: {
22
+ backgroundColor: paletteColor;
23
+ color: paletteColor;
24
+ };
10
25
  };
@@ -1,2 +1,3 @@
1
- import Progressbar from './progressbar';
2
- export { Progressbar };
1
+ export { default as ProgressBar } from './ProgressBar';
2
+ export { ProgressBarProps, ProgressBarPalette, ProgressBarType } from './types';
3
+ export { default as progressBarPalette } from './progressBarPalette';
@@ -0,0 +1,3 @@
1
+ import { ProgressBarPalette } from '.';
2
+ declare const progressBarPalette: ProgressBarPalette;
3
+ export default progressBarPalette;
@@ -1,8 +1,9 @@
1
- import { Component } from 'react';
2
- import { TProgressbar, UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface } from './types';
3
- export declare class UnstyledProgressbar extends Component<UnstyledProgressbarPropsInterface, UnstyledProgressbarStateInterface> {
4
- constructor(props: UnstyledProgressbarPropsInterface);
5
- render(): JSX.Element;
6
- }
7
- declare const Progressbar: TProgressbar;
8
- export default Progressbar;
1
+ /// <reference types="react" />
2
+ import { ProgressBarProps } from './types';
3
+ /**
4
+ * Component Props:
5
+ * @param {ProgressBarType} color Used to set the colors of the component
6
+ * @param {number} percentage Numeric value used to set the progress bar percentage value
7
+ */
8
+ declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
9
+ export default ProgressBar;
@@ -1,8 +1,10 @@
1
- import { Meta } from '@storybook/react';
1
+ import { Meta, Story } from '@storybook/react';
2
2
  import { ComponentProps } from 'react';
3
- import { Progressbar } from '.';
3
+ import { ProgressBar } from '.';
4
+ import { ProgressBarProps } from './';
5
+ export declare const Template: Story<ProgressBarProps>;
4
6
  export declare const Editable: () => JSX.Element;
5
7
  export declare const Autocomplete: () => JSX.Element;
6
8
  export declare const AllColors: () => JSX.Element;
7
- declare const ProgressbarStories: Meta<ComponentProps<typeof Progressbar>>;
8
- export default ProgressbarStories;
9
+ declare const ProgressBarStories: Meta<ComponentProps<typeof ProgressBar>>;
10
+ export default ProgressBarStories;
@@ -0,0 +1,3 @@
1
+ import { ProgressBarProps } from './types';
2
+ export declare const ProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const ProgressionBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressBarProps, never>;
@@ -1,11 +1,17 @@
1
- /// <reference types="react" />
2
- interface Props {
3
- color?: 'blue' | 'green' | 'red' | 'yellow' | 'grey';
4
- percentage: number;
5
- }
6
- export declare type TProgressbar = React.FunctionComponent<Props>;
7
- export interface UnstyledProgressbarPropsInterface extends Props {
1
+ import { paletteColor } from '../../styles/types';
2
+ export declare enum ProgressBarType {
3
+ GREY = "grey",
4
+ RED = "red",
5
+ BLUE = "blue",
6
+ YELLOW = "yellow",
7
+ GREEN = "green"
8
8
  }
9
- export interface UnstyledProgressbarStateInterface {
9
+ export interface ProgressBarProps {
10
+ color?: ProgressBarType;
11
+ percentage: number;
10
12
  }
11
- export {};
13
+ export declare type ProgressBarPalette = {
14
+ [key in ProgressBarType]: {
15
+ backgroundColor: paletteColor;
16
+ };
17
+ };
@@ -1,3 +1,4 @@
1
- import ShortcutTip from './shortcutTip';
2
- import Tip from './tip';
3
- export { Tip, ShortcutTip };
1
+ export { default as ShortcutTip } from './ShortcutTip';
2
+ export { default as Tip } from './Tip';
3
+ export { ShortcutTipProps, TipProps, TipPalette, TipType } from './types';
4
+ export { default as tipPalette } from './tipPalette';
@@ -1,4 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { ShortcutTipProps } from './types';
3
- declare const ShortcutTip: (props: ShortcutTipProps) => JSX.Element;
3
+ /**
4
+ * Component Props:
5
+ * @param {string} className To support styled-components customization
6
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
7
+ * @param {IconProps} leftIcon Configuration of the left icon
8
+ * @param {function} onClose Callback called on right icon click
9
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
10
+ * @param {string} shortcut Render a bold text beside the main text
11
+ * @param {string} text Component main text
12
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
13
+ */
14
+ declare const ShortcutTip: ({ shortcut, text, ...rest }: ShortcutTipProps) => JSX.Element;
4
15
  export default ShortcutTip;
@@ -0,0 +1,5 @@
1
+ import { TipWrapperProps } from './types';
2
+ export declare const TipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TipWrapperProps, never>;
3
+ export declare const TipLeftIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const TipText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
5
+ export declare const TipCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -1,4 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  import { TipProps } from './types';
3
- declare const Tip: (props: TipProps) => JSX.Element;
3
+ /**
4
+ * Component Props:
5
+ * @param {string} className To support styled-components customization
6
+ * @param {IconProps} closeIcon Configuration of the right icon, not rendered if onClose is not set
7
+ * @param {IconProps} leftIcon Configuration of the left icon
8
+ * @param {function} onClose Callback called on right icon click
9
+ * @param {function} renderCloseIcon Used to render a custom component instead of the right icon, not called if onClose is not set
10
+ * @param {string|ReactNode} text Component main content
11
+ * @param {TipType} type Used to set style and colors of the component among those present in the palette
12
+ */
13
+ declare const Tip: ({ className, closeIcon, leftIcon, onClose, renderCloseIcon, text, type }: TipProps) => JSX.Element;
4
14
  export default Tip;
@@ -1,7 +1,6 @@
1
- /// <reference types="react" />
2
- import { Meta } from '@storybook/react';
3
- import { TipProps } from './types';
4
- export declare const Normal: () => JSX.Element;
5
- export declare const Premade: () => JSX.Element;
1
+ import { Meta, Story } from '@storybook/react';
2
+ import { ShortcutTipProps, TipProps } from './types';
3
+ export declare const Normal: Story<TipProps>;
4
+ export declare const Shortcut: Story<ShortcutTipProps>;
6
5
  declare const TipStories: Meta<TipProps>;
7
6
  export default TipStories;
@@ -0,0 +1,3 @@
1
+ import { TipPalette } from '.';
2
+ declare const tipPalette: TipPalette;
3
+ export default tipPalette;
@@ -1,15 +1,33 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactChild } from 'react';
2
+ import { paletteColor } from '../..';
2
3
  import { IconProps } from '../icon';
4
+ export declare enum TipType {
5
+ STANDARD = "standard",
6
+ ERROR = "error",
7
+ INFO = "info",
8
+ WARNING = "warning",
9
+ SUCCESS = "success"
10
+ }
11
+ export interface TipWrapperProps {
12
+ className?: string;
13
+ type: TipType;
14
+ }
3
15
  export interface TipProps {
4
- text: string | ReactNode;
16
+ className?: string;
17
+ closeIcon?: IconProps;
5
18
  leftIcon?: IconProps;
6
19
  onClose?: () => void;
7
- closeIcon?: IconProps;
8
20
  renderCloseIcon?: () => JSX.Element;
9
- renderIcon?: () => JSX.Element;
10
- className?: string;
21
+ text: ReactChild;
22
+ type?: TipType;
11
23
  }
24
+ export declare type TipPalette = {
25
+ [key in TipType]: {
26
+ color: paletteColor;
27
+ backgroundColor: paletteColor;
28
+ };
29
+ };
12
30
  export interface ShortcutTipProps extends Omit<TipProps, 'text'> {
13
- text: string;
14
31
  shortcut: string;
32
+ text: string;
15
33
  }
package/dist/index.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import Spinner from 'common/components/Spinner';
1
+ import Spinner from './common/components/Spinner';
2
2
  import { Accordion } from './components/accordions';
3
3
  import { Avatar } from './components/avatar';
4
- import { Badge, BadgeProps } from './components/badge';
5
- import { Banner, BannerProps } from './components/banner';
4
+ export { Banner, BannerProps, BannerType } from './components/banner';
5
+ export { Badge, BadgeProps, BadgeType } from './components/badge';
6
6
  import { Button, ButtonProps, IconButton, IconButtonProps } from './components/buttons';
7
- import { Chip } from './components/chips';
7
+ export { Chip, ChipType } from './components/chip';
8
8
  import { Drawer } from './components/drawer';
9
9
  import { closeDropdownType, Dropdown, DropdownItemProps, DropdownPalette, renderContentType } from './components/dropdown';
10
- import { WithBadge } from './components/floatingBadge';
10
+ export { NotificationBadge, WithBadge, FloatingBadgeType } from './components/floatingBadge';
11
11
  import { Checkbox, CheckboxPalette, CheckboxProps, CheckboxStatus, useCheckboxValue } from './components/form/checkbox';
12
12
  import { DatePicker, DatePickerPalette, DatePickerProps, timeConversionOptions, useFormattedDate } from './components/form/datepicker';
13
13
  import { FileRejection, FileUploader, fileUploaderOnDrop, FileUploaderPalette, FileUploaderProps } from './components/form/fileUploader';
@@ -21,23 +21,23 @@ import { GroupedList, GroupType, ItemType } from './components/groupedList';
21
21
  import { Icon, IconPalette, IconProps } from './components/icon';
22
22
  import { IconBackground, IconBackgroundPalette } from './components/icon/components/iconBackground';
23
23
  import { InlineMessage, InlineMessagePalette, InlineMessageProps, InlineMessageType } from './components/inlineMessage';
24
- import { CustomSidebarItemProps, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps } from './components/layout';
24
+ export { CustomSidebarItemProps, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, SidebarBadgeConfigType, SidebarBadgeConfigProps, } from './components/layout';
25
25
  import { MicroTag, MicroTagPalette, MicroTagProps } from './components/microTag';
26
26
  import { Modal, ModalSearchable } from './components/modals';
27
27
  import { ConfirmationModal } from './components/modals/confirmationModal';
28
28
  import { ModalBody } from './components/modals/modalStyled';
29
29
  import { PageEmptySet } from './components/pageEmptySet';
30
- import { Pagination } from './components/pagination';
31
- import { Progressbar } from './components/progressbar';
30
+ export { Pagination, PaginationType } from './components/pagination';
31
+ export { ProgressBar, ProgressBarType } from './components/progressbar';
32
32
  import { Stepper, StepperPalette, StepperProps } from './components/stepper';
33
33
  import { Column, ManualPagination, OnSelectionChange, OnSort, Row, RowActions, Table, TableData, TablePalette, TableProps, useTableValues } from './components/table';
34
34
  import { DropdownTabs, ScrollableTabs, TabsItem } from './components/tabs';
35
35
  import { Tag, TagPalette, TagProps } from './components/tag';
36
36
  import { ThemeProvider } from './components/themeProvider';
37
- import { ShortcutTip, Tip } from './components/tip';
37
+ export { ShortcutTip, ShortcutTipProps, Tip, TipPalette, TipProps, TipType } from './components/tip';
38
38
  import { Toast, ToastPalette, toastPalette, ToastProps, ToastType } from './components/toast';
39
39
  import { Tooltip, TooltipPalette, TooltipProps } from './components/tooltip';
40
40
  import { autocompleteYellow } from './styles/defaultPalette/colors/others';
41
41
  import { Theme } from './styles/theme';
42
42
  import { Palette, paletteColor } from './styles/types';
43
- 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, };
43
+ 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, };