@connectif/ui-components 0.0.1

package/dist/src/components/card/CardImage.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+declare const imageHeights: {
+    readonly sm: "104px";
+    readonly md: "130px";
+};
+export type CardImageProps = {
+    /**
+     * The URL of the image to display.
+     */
+    imageUrl: string;
+    /**
+     * The size of the image.
+     */
+    size?: keyof typeof imageHeights;
+};
+/**
+ * A component that displays an image within a Card.
+ * It should be placed as the first child of a Card.
+ * It should not be used along with CardTitleWithIcon.
+ */
+declare const CardImage: ({ imageUrl, size }: CardImageProps) => JSX.Element;
+export default CardImage;

package/dist/src/components/card/CardStatus.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type CardStatusProps = {
+    /**
+     * The status to display.
+     */
+    text: string;
+    /**
+     * The background color of the status.
+     */
+    backgroundColor?: string;
+    /**
+     * Whether the status must be displayed with a moving bars animation.
+     */
+    animated?: boolean;
+};
+/**
+ * A component that displays a status inside a Card.
+ * It should be placed immediately after the CardImage.
+ * By default, the status has the primary color, but it can be customized.
+ * Also, it can be animated (with a background moving bars animation).
+ */
+declare const CardStatus: ({ text, animated, backgroundColor }: CardStatusProps) => JSX.Element;
+export default CardStatus;

package/dist/src/components/card/CardTable.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type CardTableProps = {
+    /**
+     * The rows of the table to display.
+     */
+    rows: {
+        /**
+         * Left side of the table.
+         */
+        label: string;
+        /**
+         * Right side of the table.
+         */
+        value: string;
+    }[];
+};
+/**
+ * A component that displays a two column table inside a Card, so it can show key/value pairs.
+ * It should be placed just before the CardActions.
+ */
+declare const CardTable: ({ rows }: CardTableProps) => JSX.Element;
+export default CardTable;

package/dist/src/components/card/CardTitle.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+export type CardTitleProps = {
+    /**
+     * The title to display.
+     */
+    title: string;
+    /**
+     * Sets if the title can be multiline or single line.
+     * @variation false sets the title to be displayed on a single line, using ellipsis if necessary.
+     * @variation true sets the title to be displayed on multiple lines if necessary.
+     */
+    multiline?: boolean;
+    sx?: SxProps<Theme>;
+};
+/**
+ * A component that displays a card title inside a Card.
+ * It should be used in cards having a CardImage, being set after the CardImage (and CardStatus, if any).
+ * It should not be used along with CardTitleWithIcon.
+ */
+declare const CardTitle: ({ title, sx, multiline }: CardTitleProps) => JSX.Element;
+export default CardTitle;

package/dist/src/components/card/CardTitleWithIcon.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { IconId } from '../icon/Icon';
+export type CardTitleWithIconProps = {
+    /**
+     * The title to display.
+     */
+    title: string;
+    /**
+     * The subtitle to display.
+     */
+    subtitle?: string;
+    /**
+     * The icon to display.
+     */
+    iconId: IconId;
+    /**
+     * The background color of the icon.
+     * By default, it uses the primary color.
+     */
+    iconBgColor?: string;
+};
+/**
+ * A component that displays a title with an icon inside a Card, and optionally a subtitle.
+ * The title and subtitle are displayed in a single line each, using ellipsis if necessary.
+ * It should be placed as first child of a Card.
+ * It should not be used along with CardTitle and CardImage.
+ */
+declare const CardTitleWithIcon: ({ title, subtitle, iconId, iconBgColor }: CardTitleWithIconProps) => JSX.Element;
+export default CardTitleWithIcon;

package/dist/src/components/card/EnhancedCard.d.ts

@@ -0,0 +1,97 @@
+import { BoxProps } from '@mui/material';
+import * as React from 'react';
+import { IconId } from '../icon/Icon';
+import { EnhancedCardImageProps } from './EnhancedCardImage';
+import { EnhancedCardTitleProps } from './EnhancedCardTitle';
+import { EnhancedCardSubtitleProps } from './EnhancedCardSubtitle';
+import { EnhancedCardRowProps } from './EnhancedCardRow';
+export interface EnhancedCardCompound extends React.ForwardRefExoticComponent<EnhancedCardProps & React.RefAttributes<HTMLDivElement>> {
+    Image: React.FC<EnhancedCardImageProps>;
+    Title: React.FC<EnhancedCardTitleProps>;
+    Subtitle: React.FC<EnhancedCardSubtitleProps>;
+    Row: React.FC<EnhancedCardRowProps>;
+}
+export type EnhancedCardSize = 'S' | 'M' | 'L' | 'XL' | 'XXL';
+type Action = {
+    iconId: IconId;
+    text?: string;
+    onClick: (event?: React.MouseEvent) => void;
+    enableAuxClick?: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string;
+};
+export type EnhancedCardProps = React.PropsWithChildren<{
+    /**
+     * Variant of the card.'
+     */
+    variant?: 'default' | 'selectable';
+    /**
+     * Tooltip of the card
+     */
+    tooltip?: string;
+    /**
+     * Size of the card. Default is 'M'.
+     */
+    size?: EnhancedCardSize;
+    /**
+     * Left icon of the card.
+     */
+    leftIconId?: IconId;
+    /**
+     * Right icon of the card.
+     */
+    rightIconId?: IconId;
+    /**
+     * Disables hover effect. Default is false.
+     */
+    disableHover?: boolean;
+    /**
+     * Cursor style for the card.
+     */
+    cursor?: string;
+    /**
+     * Define properties for the action button. Button will be rendered if actionProps is defined.
+     */
+    actionProps?: Action | Action[];
+    /**
+     * Show action button on hover. Default is false.
+     */
+    showActionOnHover?: boolean;
+    /**
+     * Component to show in hover.
+     */
+    hoverComponent?: React.ReactNode;
+    /**
+     * Define properties for the badge button. Button will be rendered if badgeProps is defined.
+     */
+    badgeProps?: {
+        text: string;
+        onClick?: () => void;
+    };
+    /**
+     * Disables border around the content.
+     */
+    borderless?: boolean;
+    /**
+     * Apply selected card styles.
+     */
+    selected?: boolean;
+    /**
+     * Data test.
+     */
+    dataTest?: string;
+    /**
+     * Disable padding around the content.
+     */
+    disablePadding?: boolean;
+    /**
+     * Disable gap between children.
+     */
+    disableGap?: boolean;
+    /**
+     * If `true` the onClick callback will also be triggered on aux click. Default is `false`.
+     */
+    enableAuxClick?: boolean;
+} & Pick<BoxProps, 'onClick' | 'onMouseDown'>>;
+declare const _default: EnhancedCardCompound;
+export default _default;

package/dist/src/components/card/EnhancedCardImage.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { EnhancedCardSize } from './EnhancedCard';
+import { AvatarProps } from '../avatar';
+export interface EnhancedCardImageProps {
+    /**
+     * Image source. It can be a URL or a base64 string.
+     */
+    src: string;
+    /**
+     * Variant of the image. Default is 'rounded'
+     */
+    variant?: AvatarProps['variant'];
+    /**
+     * Custom styles for the image container.
+     */
+    sx?: SxProps;
+    /**
+     * Size of the image. Default is determined by the parent EnhancedCard size.
+     * Use it carefully, it can break the layout.
+     */
+    size?: EnhancedCardSize;
+    /**
+     * If true, the image will be displayed without border. Default is defined by the parent EnhancedCard.
+     */
+    borderless?: boolean;
+    /**
+     * If true, the image will keep its aspect ratio. Default is false.
+     */
+    keepAspectRatio?: boolean;
+    /**
+     * Extra width for the image container. Default is determined by the parent EnhancedCard.
+     * This prop is only used when borderless is false.
+     * Use it carefully, it can break the layout.
+     */
+    extraWidth?: number;
+}
+/**
+ * EnhancedCardImage component is used to display an image in an EnhancedCard.
+ * It must be used as a child of EnhancedCard.
+ */
+declare const EnhancedCardImage: React.FC<EnhancedCardImageProps>;
+export default EnhancedCardImage;

package/dist/src/components/card/EnhancedCardRow.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { EnhancedCardSubtitleProps } from './EnhancedCardSubtitle';
+import { EnhancedCardTitleProps } from './EnhancedCardTitle';
+export interface EnhancedCardRowProps {
+    gap?: string;
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    titleProps?: EnhancedCardTitleProps;
+    subtitleProps?: EnhancedCardSubtitleProps;
+}
+declare const EnhancedCardRow: React.FC<EnhancedCardRowProps>;
+export default EnhancedCardRow;

package/dist/src/components/card/EnhancedCardSubtitle.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TypographyProps } from '../typography';
+export interface EnhancedCardSubtitleProps {
+    /**
+     * Text to be displayed.
+     */
+    text: string;
+    /**
+     * Justify the text. Default is 'center'.
+     */
+    justify?: 'left' | 'center' | 'right';
+    /**
+     * Cursor style. Default is the same as the parent EnhancedCard.
+     */
+    cursor?: 'pointer' | 'default';
+    /**
+     * Typography variant. Default is 'body2'.
+     */
+    variant?: TypographyProps['variant'];
+    /**
+     * Data test id. By default the dataTest of parent EnhancedCard is used to compose a dataTest string.
+     */
+    dataTest?: string;
+}
+declare const EnhancedCardSubtitle: React.FC<EnhancedCardSubtitleProps>;
+export default EnhancedCardSubtitle;

package/dist/src/components/card/EnhancedCardTitle.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TypographyProps } from '../typography';
+export interface EnhancedCardTitleProps {
+    /**
+     * Text to be displayed.
+     */
+    text: string;
+    /**
+     * Justify the text. Default is 'center'.
+     */
+    justify?: 'left' | 'center' | 'right';
+    /**
+     * If true, the title will have a fixed height according to its variant and size. Default is false.
+     */
+    forceHeight?: boolean;
+    /**
+     * Cursor style. Default is the same as the parent EnhancedCard.
+     */
+    cursor?: 'pointer' | 'default';
+    /**
+     * Typography variant. Default is 'body2'.
+     */
+    variant?: TypographyProps['variant'];
+    /**
+     * Size of the title. By default the size is determined according to parent EnhancedCard size.
+     */
+    size?: 'S' | 'M';
+    /**
+     * Data test id. By default the dataTest of parent EnhancedCard is used to compose a dataTest string.
+     */
+    dataTest?: string;
+}
+/**
+ * EnhancedCardTitle component is used to display a title in an EnhancedCard.
+ * It must be used as a child of EnhancedCard.
+ */
+declare const EnhancedCardTitle: React.FC<EnhancedCardTitleProps>;
+export default EnhancedCardTitle;

package/dist/src/components/card/index.d.ts

@@ -0,0 +1,14 @@
+export { default as Card, CardProps } from './Card';
+export { default as CardActions, CardActionsProps } from './CardActions';
+export { default as CardChips, CardChipsProps } from './CardChips';
+export { default as CardDescription, CardDescriptionProps } from './CardDescription';
+export { default as CardImage, CardImageProps } from './CardImage';
+export { default as CardStatus, CardStatusProps } from './CardStatus';
+export { default as CardTable, CardTableProps } from './CardTable';
+export { default as CardTitle, CardTitleProps } from './CardTitle';
+export { default as CardTitleWithIcon, CardTitleWithIconProps } from './CardTitleWithIcon';
+export { default as EnhancedCard, EnhancedCardProps } from './EnhancedCard';
+export { EnhancedCardImageProps } from './EnhancedCardImage';
+export { EnhancedCardTitleProps } from './EnhancedCardTitle';
+export { EnhancedCardSubtitleProps } from './EnhancedCardSubtitle';
+export { EnhancedCardRowProps } from './EnhancedCardRow';

package/dist/src/components/chart/BarChart.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import './EchartsConfig';
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
+type YAxisLabelFormatter = (value: number) => string;
+export type BarChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The categories to display on the x axis.
+     */
+    categories: string[];
+    /**
+     * Optional callback to be called when the chart is clicked.
+     */
+    onClick?: (data: any) => void;
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+    /**
+     * Formatter used to format yAxis values.
+     */
+    yAxisLabelFormatter?: YAxisLabelFormatter;
+    /**
+     * Formatter function used to format values shown in tooltip.
+     */
+    tooltipEntryFormatter?: ChartTooltipEntryFormatter;
+    /**
+     * The series to display in the chart.
+     */
+    series: {
+        /**
+         * The color to use for this item.
+         */
+        color: string;
+        /**
+         * The text to use for this item as name in tooltip.
+         */
+        tooltipName: string;
+        /**
+         * The comparisonColor to use for this item.
+         */
+        comparisonColor?: string;
+        /**
+         * The text to use for this item as name in tooltip.
+         */
+        comparisonTooltipName?: string;
+        data: {
+            /**
+             * The value to display in the chart for this serie item.
+             */
+            value: number;
+            /**
+             * The text shown in label to represent the increment value of this item.
+             */
+            incrementLabelValue?: string;
+            /**
+             * The style to use to represent the label for this serie.
+             */
+            incrementLabelType?: IncrementLabelType;
+            /**
+             * The text to use for this item as value in tooltip.
+             */
+            tooltipValue: string;
+            /**
+             * The comparison value to display in the chart for this serie item.
+             */
+            comparisonValue?: number;
+            /**
+             * The text to use for this item as value in tooltip.
+             */
+            comparisonTooltipValue?: string;
+        }[];
+    }[];
+};
+/**
+ * A bar chart component to display numeric data grouped by categories and series.
+ */
+declare const BarChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, tooltipEntryFormatter, onClick }: BarChartProps) => JSX.Element;
+export default BarChart;

package/dist/src/components/chart/CategorizedChartProps.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
+type YAxisLabelFormatter = (value: number) => string;
+export type CategorizedChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The categories to display on the x axis.
+     */
+    categories: string[];
+    /**
+     * Optional callback to be called when the chart is clicked.
+     */
+    onClick?: (data: any) => void;
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+    /**
+     * Formatter used to format yAxis values.
+     */
+    yAxisLabelFormatter?: YAxisLabelFormatter;
+    /**
+     * Formatter used to format ySecondaryAxis values.
+     */
+    ySecondaryAxisLabelFormatter?: YAxisLabelFormatter;
+    /**
+     * Formatter function used to format values shown in tooltip.
+     */
+    tooltipEntryFormatter?: ChartTooltipEntryFormatter;
+};
+export {};

package/dist/src/components/chart/ChartUtils.d.ts

@@ -0,0 +1,8 @@
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+import { IconId } from '../icon/Icon';
+import { TooltipComponentOption } from 'echarts';
+/**
+ * Get an icon as a base64 image
+ */
+export declare const getIconDataUri: (iconId: IconId, iconType?: IncrementLabelType) => string;
+export declare const tooltipOptions: TooltipComponentOption;

package/dist/src/components/chart/DonutChart.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import './EchartsConfig';
+import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export type DonutChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional callback to be called when the chart is clicked.
+     */
+    onClick?: (data: any) => void;
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+    /**
+     * Formatter function used to format values shown in tooltip.
+     */
+    tooltipEntryFormatter?: ChartTooltipEntryFormatter;
+    /**
+     * The series to display in the chart.
+     */
+    series: {
+        /**
+         * The name of the series.
+         */
+        name: string;
+        /**
+         * The name of the comparison series.
+         */
+        comparisonName?: string;
+        /**
+         * Formatted value to be shown in the center.
+         */
+        value: string;
+        /**
+         * Formatted increment to be shown in the center.
+         */
+        incrementLabelValue?: string;
+        /**
+         * The style to show the increment at the center of donut.
+         */
+        incrementLabelType?: IncrementLabelType;
+        /**
+         * The values to display in the chart for this series.
+         * The values must be in the same order and quantity as the categories.
+         */
+        data: {
+            /**
+             * The value for this data item. It should be greater than 0.
+             */
+            value: number;
+            /**
+             * The label for this data item.
+             */
+            label: string;
+            /**
+             * The comparison value for this data item. It should be greater or equal than 0.
+             */
+            comparisonValue?: number;
+            /**
+             * The comparison label for this data item.
+             */
+            comparisonLabel?: string;
+            /**
+             * The color for this data item.
+             */
+            color: string;
+        }[];
+    }[];
+};
+/**
+ * A donut chart component to display numeric data grouped by categories and series.
+ */
+declare const DonutChart: ({ style, isLoading, series, tooltipEntryFormatter, onClick }: DonutChartProps) => JSX.Element;
+export default DonutChart;

package/dist/src/components/chart/DonutChartLegendItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TypographyProps } from '../typography';
+export type DonutChartLegendItemProps = {
+    label: string;
+    variant: Extract<TypographyProps['variant'], 'body2' | 'caption'>;
+    colors: string[];
+};
+declare const DonutChartLegendItem: ({ label, variant, colors }: DonutChartLegendItemProps) => JSX.Element;
+export default DonutChartLegendItem;

package/dist/src/components/chart/EchartsConfig.d.ts

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

package/dist/src/components/chart/FunnelChart.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import './EchartsConfig';
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+import { ChartTooltipEntryFormatter } from '../../utils/ChartUtils';
+type YAxisLabelFormatter = (value: number) => string;
+export type FunnelChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The categories to display on the x axis.
+     */
+    categories: string[];
+    /**
+     * Optional callback to be called when the chart is clicked.
+     */
+    onClick?: (data: any) => void;
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+    /**
+     * Formatter used to format yAxis values.
+     */
+    yAxisLabelFormatter?: YAxisLabelFormatter;
+    /**
+     * Formatter function used to format values shown in tooltip.
+     */
+    tooltipEntryFormatter?: ChartTooltipEntryFormatter;
+    /**
+     * The series to display in the chart.
+     */
+    series: {
+        /**
+         * The values to display in the chart for this series.
+         * The values must be in the same order and quantity as the categories.
+         */
+        data: {
+            /**
+             * The value to display in the chart for this serie item.
+             */
+            value: number;
+            /**
+             * The color to use for this item.
+             */
+            color: string;
+            /**
+             * The label to display in the chart for this series.
+             */
+            incrementLabelValue?: string;
+            /**
+             * The style to use to represent the label for this serie.
+             */
+            incrementLabelType?: IncrementLabelType;
+            /**
+             * The name to use for this item in tooltip.
+             */
+            tooltipName: string;
+            /**
+             * The label to use in the transition between this item an the following. If this is the last item, it will be ignored.
+             */
+            differenceToNextStepLabel?: string;
+            /**
+             * The comparison value to display in the chart for this serie item.
+             */
+            comparisonValue?: number;
+            /**
+             * The comparisonColor to use for this item.
+             */
+            comparisonColor?: string;
+            /**
+             * The comparison name to use for this item in tooltip.
+             */
+            comparisonTooltipName?: string;
+        }[];
+    }[];
+};
+/**
+ * A funnel chart component to display numeric data grouped by steps and series.
+ */
+declare const FunnelChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, tooltipEntryFormatter, onClick }: FunnelChartProps) => JSX.Element;
+export default FunnelChart;