@fattureincloud/fic-design-system 1.0.0 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/chart/Chart.d.ts +4 -0
- package/dist/components/chart/chart.stories.d.ts +7 -0
- package/dist/components/chart/components/ChartButton.d.ts +8 -0
- package/dist/components/chart/components/ChartIndicators.d.ts +14 -0
- package/dist/components/chart/components/ChartLegend.d.ts +9 -0
- package/dist/components/chart/index.d.ts +2 -0
- package/dist/components/chart/stories/data.d.ts +2 -0
- package/dist/components/chart/stories/styled.d.ts +4 -0
- package/dist/components/chart/styled.d.ts +3 -0
- package/dist/components/chart/types.d.ts +52 -0
- package/dist/components/chart/utils.d.ts +6 -0
- package/dist/components/closableCard/ClosableCard.d.ts +4 -0
- package/dist/components/closableCard/closableCard.stories.d.ts +6 -0
- package/dist/components/closableCard/closableCardPalette.d.ts +3 -0
- package/dist/components/closableCard/index.d.ts +3 -0
- package/dist/components/closableCard/styled.d.ts +5 -0
- package/dist/components/closableCard/types.d.ts +13 -0
- package/dist/components/dropdown/types.d.ts +1 -0
- package/dist/components/modals/modals.stories.d.ts +1 -0
- package/dist/components/modals/stepModal/components/styled.d.ts +1 -0
- package/dist/components/newTable/Table.d.ts +1 -1
- package/dist/components/newTable/types.d.ts +1 -0
- package/dist/components/tooltip/Tooltip.d.ts +4 -1
- package/dist/components/tooltip/styled.d.ts +4 -0
- package/dist/components/tooltip/tooltip.stories.d.ts +7 -5
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +8 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/styles/theme.d.ts +2 -0
- 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,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,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,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,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
|
+
};
|
@@ -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
|
3
|
-
import { TooltipProps } from './Tooltip';
|
4
|
-
export declare const
|
5
|
-
declare const
|
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 {
|
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';
|