@connectif/ui-components 0.0.1

package/dist/components/chart/IncrementLabel.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import { IconId } from '../icon/Icon';
+import { TypographyProps } from '../typography/Typography';
+export type IncrementLabelProps = {
+    label: string;
+    typographyVariant: Extract<TypographyProps['variant'], 'h5' | 'caption' | 'body2' | 'overline'>;
+    color?: string;
+    backgroundColor?: string;
+    iconId?: IconId;
+    iconSize?: 'XS' | 'S' | 'M';
+    /**
+     * The `SxProps` can be either object or function
+     */
+    sx?: SxProps;
+};
+declare const IncrementLabel: ({ label, typographyVariant, color, backgroundColor, iconId, iconSize, sx }: IncrementLabelProps) => JSX.Element;
+export default IncrementLabel;

package/dist/components/chart/LineChart.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import './EchartsConfig';
+import { CategorizedChartProps } from './CategorizedChartProps';
+import { IconId } from '../icon/Icon';
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export type LineChartProps = CategorizedChartProps & {
+    /**
+     * The series to display in the chart.
+     */
+    series: {
+        /**
+         * The name of the series.
+         */
+        name: string;
+        comparisonName?: string;
+        /**
+         * 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 main value to display in the chart for this serie.
+             */
+            value: number;
+            /**
+             * The value as text to be shown in tooltip
+             */
+            tooltipValue: string;
+            /**
+             * The category label to be shown in tooltip. If not supplied, it will use the X axis label
+             */
+            tooltipCategoryLabel?: string;
+            /**
+             * The type of increment to format the styles of increment in tooltip
+             */
+            tooltipIncrementType?: IncrementLabelType;
+            /**
+             * The label to be used as increment in tooltip
+             */
+            tooltipIncrementLabel?: string;
+            /**
+             * The comparison value to be used in this series. It will display a second line with dashed style.
+             */
+            comparisonValue?: number;
+            /**
+             * The value as text for comparison value to be shown in tooltip
+             */
+            tooltipComparisonValue?: string;
+        }[];
+        /**
+         * The color to use for the main serie.
+         */
+        color: string;
+        /**
+         * The identifier and text of the group for this serie to be used in tooltip
+         */
+        tooltipGroupTitle?: string;
+        tooltipIconId?: IconId;
+        /**
+         * The yAxis for this serie
+         */
+        yAxisIndex: number;
+    }[];
+    /**
+     * Option to disable the display of series names.
+     */
+    disableSeriesNames?: boolean;
+    /**
+     * Option to disable the display of axes.
+     */
+    disableAxes?: boolean;
+    /**
+     * Option to disable split lines on X axe.
+     */
+    disableSplitLine?: boolean;
+    /**
+     * Option to enable full grid on the chart.
+     */
+    fullGrid?: boolean;
+    /**
+     * Font size to format the label of the Y axis.
+     */
+    axisFontSize?: string;
+    /**
+     * Color to format the label of the Y axis.
+     */
+    axisFontColor?: string;
+    /**
+     * Option to set the position of the Y axis when there is only one.
+     */
+    yAxisPosition?: 'left' | 'right';
+};
+/**
+ * A line chart component to display numeric data grouped by categories and series.
+ * Commonly, categories use to be sorted dates.
+ */
+declare const LineChart: ({ style, isLoading, series, categories, yAxisLabelFormatter, ySecondaryAxisLabelFormatter, onClick, disableSeriesNames, disableAxes, disableSplitLine, fullGrid, axisFontSize, axisFontColor, yAxisPosition }: LineChartProps) => JSX.Element;
+export default LineChart;

package/dist/components/chart/MicroPieChart.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import './EchartsConfig';
+export type MicroPieChartProps = {
+    /**
+     * The color of the pie chart
+     */
+    color?: string;
+    /**
+     * A value between 0 and 100. Any value less than 0 will be represented as an empty pie chart,
+     * and any value greater than 100 will be represented as full pie chart
+     */
+    percentage: number;
+};
+/**
+ * A minimum pie chart component to adorn a single percentage.
+ */
+declare const MicroPieChart: ({ color, percentage }: MicroPieChartProps) => JSX.Element;
+export default MicroPieChart;

package/dist/components/chart/RankingChart.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './EchartsConfig';
+import { RankingChartItemProps } from './RankingChartItem';
+export type RankingChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The groups of items to show in the chart. Every group will display
+     * all its items together.
+     */
+    series: {
+        /**
+         * The name of the group of items.
+         */
+        name: string;
+        /**
+         * The items for this group.
+         */
+        items: Omit<RankingChartItemProps, 'isLoading'>[];
+    }[];
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+};
+/**
+ * A ranking chart component to display groups of series of data displayed from top down to bottom.
+ */
+declare const RankingChart: ({ style, series, isLoading }: RankingChartProps) => JSX.Element;
+export default RankingChart;

package/dist/components/chart/RankingChartItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { RankingChartTooltipProps } from './RankingChartTooltip';
+export type RankingChartItemProps = RankingChartTooltipProps & {
+    value: string;
+};
+declare const RankingChartItem: ({ label, value, incrementLabelValue, incrementLabelType, metrics }: RankingChartItemProps) => JSX.Element;
+export default RankingChartItem;

package/dist/components/chart/RankingChartTooltip.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export type RankingChartTooltipProps = {
+    label: string;
+    incrementLabelValue?: string;
+    incrementLabelType?: IncrementLabelType;
+    metrics: {
+        percentage: number;
+        color: string;
+        label: string;
+        value: string;
+    }[];
+};
+declare const RankingChartTooltip: ({ label, metrics, incrementLabelType, incrementLabelValue }: RankingChartTooltipProps) => JSX.Element;
+export default RankingChartTooltip;

package/dist/components/chart/WeekChart.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import './EchartsConfig';
+import { WeekChartItemProps } from './WeekChartItem';
+export type WeekChartProps = {
+    /**
+     * The css style to apply to the chart container.
+     * Use this to set specific with, padding, background color, etc.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The days to show in the chart.
+     */
+    days: {
+        /**
+         * The name of the day.
+         */
+        label: string;
+        /**
+         * The list of hours in this day
+         */
+        hours: {
+            /**
+             * The label to represent the hour of the day
+             */
+            label: string;
+            /**
+             * The metric related data for this individual hour of day
+             */
+            metrics: WeekChartItemProps['metrics'];
+        }[];
+    }[];
+    /**
+     * Whether to show the skeleton or not.
+     */
+    isLoading?: boolean;
+};
+/**
+ * A week chart component to display data grouped by day of week and hour of day.
+ */
+declare const WeekChart: ({ style, days, isLoading }: WeekChartProps) => JSX.Element;
+export default WeekChart;

package/dist/components/chart/WeekChartItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WeekChartTooltipProps } from './WeekChartTooltip';
+export type WeekChartItemProps = WeekChartTooltipProps;
+declare const WeekChartItem: ({ label, metrics }: WeekChartItemProps) => JSX.Element;
+export default WeekChartItem;

package/dist/components/chart/WeekChartTooltip.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export type WeekChartTooltipProps = {
+    label: string;
+    metrics: {
+        percentage: number;
+        color: string;
+        label: string;
+        value: string;
+        comparisonPercentage?: number;
+        comparisonColor?: string;
+        comparisonLabel?: string;
+        comparisonValue?: string;
+        incrementLabelType?: IncrementLabelType;
+        incrementLabelValue?: string;
+    }[];
+};
+declare const WeekChartTooltip: ({ label, metrics }: WeekChartTooltipProps) => JSX.Element;
+export default WeekChartTooltip;

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

@@ -0,0 +1,8 @@
+export { default as BarChart, BarChartProps } from './BarChart';
+export { default as LineChart, LineChartProps } from './LineChart';
+export { default as RankingChart, RankingChartProps } from './RankingChart';
+export { default as DonutChart, DonutChartProps } from './DonutChart';
+export { default as FunnelChart, FunnelChartProps } from './FunnelChart';
+export { default as WeekChart, WeekChartProps } from './WeekChart';
+export { default as MicroPieChart, MicroPieChartProps } from './MicroPieChart';
+export { default as IncrementLabel, IncrementLabelProps } from './IncrementLabel';

package/dist/components/chat/Chat.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type ChatProps = React.PropsWithChildren<{
+    /**
+     * Header to place at the beginning of the chat
+     */
+    header?: React.ReactNode;
+}>;
+/**
+ * Shows a list of chat message, in a vertical layout.
+ *
+ */
+declare const Chat: ({ children, header }: ChatProps) => JSX.Element;
+export default Chat;

package/dist/components/chat/ChatMessage.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export type ChatMessageProps = {
+    /**
+     * Message type, messages send by user will be outgoing and responses will be incoming.
+     *
+     */
+    messageType: 'incoming' | 'outgoing';
+    /**
+     * Chat message children.
+     */
+    children: React.ReactNode;
+    /**
+     * Adornment components to be placed at the right of the chat when messageType is incoming
+     * or at the left of the chat message when messageType is outgoing
+     */
+    adornment?: React.ReactNode;
+    /**
+     * If supplied some text, an InputHelperText component will be shown just after the input.
+     */
+    errorText?: string;
+    /**
+     * Elements to show on options
+     */
+    optionsBar?: React.ReactNode;
+    /**
+     * Text to the cancelable button tooltip. If not provided, cancelable button will not display
+     */
+    cancelableButtonText?: string;
+    /**
+     * When cancelable button is clicked
+     */
+    onCancelableButtonClicked?: () => void;
+};
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<unknown>>;
+export default ChatMessage;

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

@@ -0,0 +1,2 @@
+export { default as ChatMessage, ChatMessageProps } from '../chat/ChatMessage';
+export { default as Chat, ChatProps } from '../chat/Chat';