@fattureincloud/fic-design-system 1.0.0 → 1.0.2

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 (32) hide show
  1. package/dist/components/chart/Chart.d.ts +4 -0
  2. package/dist/components/chart/chart.stories.d.ts +7 -0
  3. package/dist/components/chart/components/ChartButton.d.ts +8 -0
  4. package/dist/components/chart/components/ChartIndicators.d.ts +14 -0
  5. package/dist/components/chart/components/ChartLegend.d.ts +9 -0
  6. package/dist/components/chart/index.d.ts +2 -0
  7. package/dist/components/chart/stories/data.d.ts +2 -0
  8. package/dist/components/chart/stories/styled.d.ts +4 -0
  9. package/dist/components/chart/styled.d.ts +3 -0
  10. package/dist/components/chart/types.d.ts +52 -0
  11. package/dist/components/chart/utils.d.ts +6 -0
  12. package/dist/components/closableCard/ClosableCard.d.ts +4 -0
  13. package/dist/components/closableCard/closableCard.stories.d.ts +6 -0
  14. package/dist/components/closableCard/closableCardPalette.d.ts +3 -0
  15. package/dist/components/closableCard/index.d.ts +3 -0
  16. package/dist/components/closableCard/styled.d.ts +5 -0
  17. package/dist/components/closableCard/types.d.ts +13 -0
  18. package/dist/components/dropdown/types.d.ts +1 -0
  19. package/dist/components/modals/modals.stories.d.ts +1 -0
  20. package/dist/components/modals/stepModal/components/styled.d.ts +1 -0
  21. package/dist/components/newTable/Table.d.ts +1 -1
  22. package/dist/components/newTable/types.d.ts +1 -0
  23. package/dist/components/tooltip/Tooltip.d.ts +4 -1
  24. package/dist/components/tooltip/styled.d.ts +4 -0
  25. package/dist/components/tooltip/tooltip.stories.d.ts +7 -5
  26. package/dist/index.d.ts +2 -1
  27. package/dist/index.esm.js +8 -8
  28. package/dist/index.esm.js.map +1 -1
  29. package/dist/index.js +8 -8
  30. package/dist/index.js.map +1 -1
  31. package/dist/styles/theme.d.ts +2 -0
  32. package/package.json +4 -1
@@ -0,0 +1,4 @@
1
+ import { ReactElement } from 'react';
2
+ import { ChartProps } from './types';
3
+ declare const Chart: ({ data, showIndicators, graphicSettingsContent, periodContent, renderYearDropdownContent, yearDropdownButtonText, renderEmptyFilters, }: ChartProps) => ReactElement;
4
+ export default Chart;
@@ -0,0 +1,7 @@
1
+ import { Meta, Story } from '@storybook/react';
2
+ import { ComponentProps } from 'react';
3
+ import { Chart, ChartProps } from './index';
4
+ export declare const Template: Story<ChartProps>;
5
+ export declare const EmptyFilters: Story<ChartProps>;
6
+ declare const ChartStories: Meta<ComponentProps<typeof Chart>>;
7
+ export default ChartStories;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from '../../icon';
3
+ interface GraphButtonProps {
4
+ text?: string;
5
+ icon?: IconProps;
6
+ }
7
+ declare const ChartButton: ({ text, icon }: GraphButtonProps) => JSX.Element;
8
+ export default ChartButton;
@@ -0,0 +1,14 @@
1
+ import { ReactElement } from 'react';
2
+ import { DropdownItemProps, renderContentType } from '../../dropdown';
3
+ import { Legend, LegendItem } from '../types';
4
+ interface ChartIndicatorsProps {
5
+ legend: Legend[];
6
+ setToggleLegendItem: (elem: LegendItem) => void;
7
+ toggleLegendItem: LegendItem;
8
+ graphicSettingsContent?: DropdownItemProps[];
9
+ periodContent?: DropdownItemProps[];
10
+ renderYearDropdownContent?: renderContentType;
11
+ yearDropdownButtonText?: string;
12
+ }
13
+ declare const ChartIndicators: ({ legend, setToggleLegendItem, toggleLegendItem, graphicSettingsContent, renderYearDropdownContent, yearDropdownButtonText, periodContent, }: ChartIndicatorsProps) => ReactElement;
14
+ export default ChartIndicators;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { Legend, LegendItem } from '../types';
3
+ interface ChartLegendProps {
4
+ legend: Legend[];
5
+ setToggleLegendItem: (elem: LegendItem) => void;
6
+ toggleLegendItem: LegendItem;
7
+ }
8
+ declare const ChartLegend: ({ legend, setToggleLegendItem, toggleLegendItem }: ChartLegendProps) => JSX.Element;
9
+ export default ChartLegend;
@@ -0,0 +1,2 @@
1
+ export { default as Chart } from './Chart';
2
+ export { ChartProps, Legend, ChartData, LegendItem } from './types';
@@ -0,0 +1,2 @@
1
+ import { ChartData } from '../types';
2
+ export declare const data: ChartData[];
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const DropdownText: import("styled-components").StyledComponent<({ children, type, ...otherProps }: import("../../../common/components/typography/types").TextProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const DropdownParagraph: import("styled-components").StyledComponent<({ children, type, ...otherProps }: import("../../../common/components/typography/types").TextProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const ChartTooltip: import("styled-components").StyledComponent<({ message, placement, className, children, type, onMouseEnter, onMouseLeave, showAlways, showAfterSeconds, hideAfterSeconds, callbackAfterTimeout, onOpen, icon, renderButton, }: import("../tooltip").TooltipProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,52 @@
1
+ import { OrdinalColorScaleConfig } from '@nivo/colors/dist/types/scales/ordinalColorScale';
2
+ import { DatumValue } from '@nivo/line';
3
+ import { Serie } from '@nivo/line';
4
+ import { ReactElement } from 'react';
5
+ import { paletteColor } from '../../styles/types';
6
+ import { DropdownItemProps, renderContentType } from '../dropdown';
7
+ export type OrdinalColorScale = OrdinalColorScaleConfig & {
8
+ color: string;
9
+ };
10
+ export interface ChartData extends Serie {
11
+ prevTooltipLabel?: string;
12
+ afterTooltipLabel?: string;
13
+ color?: paletteColor;
14
+ }
15
+ export interface ChartProps {
16
+ data: ChartData[];
17
+ showIndicators: boolean;
18
+ graphicSettingsContent?: DropdownItemProps[];
19
+ periodContent?: DropdownItemProps[];
20
+ yearContent?: DropdownItemProps[];
21
+ renderYearDropdownContent?: renderContentType;
22
+ yearDropdownButtonText?: string;
23
+ renderEmptyFilters?: () => ReactElement;
24
+ }
25
+ export type Legend = {
26
+ text: string | number;
27
+ color?: paletteColor;
28
+ };
29
+ export type LegendItem = {
30
+ [index: number]: boolean;
31
+ };
32
+ export interface Point {
33
+ point: {
34
+ id: string;
35
+ index: number;
36
+ serieId: string | number;
37
+ serieColor: string;
38
+ x: number;
39
+ y: number;
40
+ color: string;
41
+ borderColor: string;
42
+ data: {
43
+ x: DatumValue;
44
+ xFormatted: string | number;
45
+ y: DatumValue;
46
+ yFormatted: string | number;
47
+ yStacked?: number;
48
+ prevTooltipLabel?: string | number;
49
+ afterTooltipLabel?: string | number;
50
+ };
51
+ };
52
+ }
@@ -0,0 +1,6 @@
1
+ import { DropdownItemProps } from '../dropdown';
2
+ import { ChartData, Legend, LegendItem } from './types';
3
+ export declare const getLegendValues: (data: ChartData[]) => Legend[];
4
+ export declare const getInitialLegendValues: (data: ChartData[]) => LegendItem;
5
+ export declare const getDropdownLabel: (content: DropdownItemProps[]) => string;
6
+ export declare const getDisabledLegendItem: (elemIndex: number, toggleLegendItem: LegendItem) => boolean;
@@ -0,0 +1,4 @@
1
+ import { ReactElement } from 'react';
2
+ import { ClosableCardProps } from './types';
3
+ declare const ClosableCard: ({ title, subtitle, renderSubtitleElement, onClose, className, }: ClosableCardProps) => ReactElement;
4
+ export default ClosableCard;
@@ -0,0 +1,6 @@
1
+ import { Meta, Story } from '@storybook/react';
2
+ import { ComponentProps } from 'react';
3
+ import { ClosableCard, ClosableCardProps } from './index';
4
+ export declare const Template: Story<ClosableCardProps>;
5
+ declare const ClosableCardStories: Meta<ComponentProps<typeof ClosableCard>>;
6
+ export default ClosableCardStories;
@@ -0,0 +1,3 @@
1
+ import { ClosableCardPalette } from './types';
2
+ declare const closableCardPalette: ClosableCardPalette;
3
+ export default closableCardPalette;
@@ -0,0 +1,3 @@
1
+ export { ClosableCardProps, ClosableCardPalette } from './types';
2
+ export { default as ClosableCard } from './ClosableCard';
3
+ export { default as closableCardPalette } from './closableCardPalette';
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const Title: import("styled-components").StyledComponent<({ children, type, ...otherProps }: import("../../common/components/typography/types").TextProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const Subtitle: import("styled-components").StyledComponent<({ children, type, ...otherProps }: import("../../common/components/typography/types").TextProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
5
+ export declare const CloseIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,13 @@
1
+ import { ReactElement } from 'react';
2
+ import { paletteColor } from '../../styles/types';
3
+ export interface ClosableCardProps {
4
+ title: string;
5
+ subtitle?: string;
6
+ renderSubtitleElement?: () => ReactElement;
7
+ onClose?: () => void;
8
+ className?: string;
9
+ }
10
+ export type ClosableCardPalette = {
11
+ background: paletteColor;
12
+ border: paletteColor;
13
+ };
@@ -42,6 +42,7 @@ export interface DropdownItemProps {
42
42
  isDisabled?: boolean;
43
43
  type?: DropdownItemType;
44
44
  onMouseEnter?: () => void;
45
+ label?: string;
45
46
  }
46
47
  export interface UserListItemProps {
47
48
  img?: string;
@@ -10,5 +10,6 @@ export declare const FirstTime: () => React.JSX.Element;
10
10
  export declare const WithTips: () => React.JSX.Element;
11
11
  export declare const _ConfirmationModal: () => React.JSX.Element;
12
12
  export declare const StepModalExample: () => React.JSX.Element;
13
+ export declare const StepModalFullScreen: () => React.JSX.Element;
13
14
  declare const ModalStories: Meta<ModalPropsInterface>;
14
15
  export default ModalStories;
@@ -7,5 +7,6 @@ export type BodyProps = {
7
7
  minHeight?: number;
8
8
  withoutFooter?: boolean;
9
9
  withoutHeader?: boolean;
10
+ isFullscreen?: boolean;
10
11
  };
11
12
  export declare const StyledBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").ModalPropsInterface & MappedHeight & BodyProps, keyof MappedHeight>;
@@ -30,5 +30,5 @@ import { TableProps } from './types';
30
30
  * @param {number} rowIdHighlight id of the row that will be highlighted
31
31
  * @param {string | number} actionColumnWidth used to determine the width of the action column
32
32
  */
33
- declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, }: TableProps<T>) => JSX.Element;
33
+ declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, }: TableProps<T>) => JSX.Element;
34
34
  export default Table;
@@ -53,6 +53,7 @@ export interface TableProps<T> {
53
53
  onChangeTableSettings?: onChangeTableSettings;
54
54
  actionColumnWidth?: string | number;
55
55
  disableScrollX?: boolean;
56
+ resetPageIndex?: boolean;
56
57
  }
57
58
  export type onChangeTableSettings = (key: keyof PreSettedTableSettings, valueChange: Pick<PreSettedTableSettings, 'orderColumns' | 'dimensionRow' | 'notVisibleColumns'>) => void;
58
59
  export interface PreSettedTableSettings {
@@ -1,5 +1,6 @@
1
1
  import { BasePlacement } from '@popperjs/core';
2
2
  import { MouseEventHandler, ReactNode } from 'react';
3
+ import { IconProps } from '../icon';
3
4
  import { MessageProps } from './components/Message';
4
5
  export declare const defaultTooltipProps: TooltipProps;
5
6
  export interface TooltipProps extends MessageProps {
@@ -14,6 +15,8 @@ export interface TooltipProps extends MessageProps {
14
15
  showAfterSeconds?: number;
15
16
  callbackAfterTimeout?: () => void;
16
17
  onOpen?: (isOpen: boolean) => void;
18
+ icon?: IconProps;
19
+ renderButton?: () => JSX.Element;
17
20
  }
18
- declare const Tooltip: ({ message, placement, className, children, type, onMouseEnter, onMouseLeave, showAlways, showAfterSeconds, hideAfterSeconds, callbackAfterTimeout, onOpen, }: TooltipProps) => JSX.Element;
21
+ declare const Tooltip: ({ message, placement, className, children, type, onMouseEnter, onMouseLeave, showAlways, showAfterSeconds, hideAfterSeconds, callbackAfterTimeout, onOpen, icon, renderButton, }: TooltipProps) => JSX.Element;
19
22
  export default Tooltip;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const BodyAnimationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const MessageIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -1,6 +1,8 @@
1
- import { Meta } from '@storybook/react';
2
- import React from 'react';
3
- import { TooltipProps } from './Tooltip';
4
- export declare const Top: () => React.JSX.Element;
5
- declare const TooltipStories: Meta<TooltipProps>;
1
+ import { Meta, Story } from '@storybook/react';
2
+ import { ComponentProps } from 'react';
3
+ import Tooltip, { TooltipProps } from './Tooltip';
4
+ export declare const Template: Story<TooltipProps>;
5
+ export declare const WithIcon: Story<TooltipProps>;
6
+ export declare const WithButton: Story<TooltipProps>;
7
+ declare const TooltipStories: Meta<ComponentProps<typeof Tooltip>>;
6
8
  export default TooltipStories;
package/dist/index.d.ts CHANGED
@@ -5,9 +5,10 @@ export { Avatar } from './components/avatar';
5
5
  export { Badge, BadgeProps, BadgeType, BadgePalette } from './components/badge';
6
6
  export { Banner, BannerProps, BannerType, BannerPalette } from './components/banner';
7
7
  export { Button, ButtonPalette, ButtonProps, IconButton, IconButtonPalette, IconButtonProps, } from './components/buttons';
8
- export { Card, CardColor, CardPalette, CardProps, CardElevation, CardType } from './components/card';
8
+ export { Chart, ChartProps } from './components/chart';
9
9
  export { Chip, ChipType, ChipPalette, ChipProps } from './components/chip';
10
10
  export { CircularProgressBar, circularProgressBarPalette, CircularProgressBarProps, CircularProgressBarType, } from './components/circularProgressBar';
11
+ export { ClosableCard, ClosableCardPalette, ClosableCardProps } from './components/closableCard';
11
12
  export { Drawer } from './components/drawer';
12
13
  export { closeDropdownType, Dropdown, DropdownItemProps, DropdownItemType, DropdownPalette, renderContentType, } from './components/dropdown';
13
14
  export { EditableInput } from './components/editableInput';