Add TypeScript declaration files and update .gitignore

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
-dist/
 coverage/
 
 # Logs

dist/components/IconHelper.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Position } from './tooltip/Tooltip.component';
+type IconHelpProps = {
+    tooltipMessage: ReactNode;
+    placement?: Position;
+    overlayStyle?: CSSProperties;
+};
+export declare const IconHelp: ({ tooltipMessage, overlayStyle, placement, }: IconHelpProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconHelper.d.ts.map

dist/components/IconHelper.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from './icon/Icon.component';
+import { Tooltip } from './tooltip/Tooltip.component';
+export const IconHelp = ({ tooltipMessage, overlayStyle, placement = 'right', }) => (_jsx(Tooltip, { overlay: tooltipMessage, placement: placement, overlayStyle: overlayStyle, children: _jsx(Icon, { name: "Info", color: "buttonSecondary" }) }));

dist/components/UnsuccessfulResult.component.d.ts

@@ -0,0 +1,28 @@
+import { TableHeightKeyType, TableLocalType } from './tablev2/TableUtils';
+export declare const NoResult: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BordersProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    gap?: string | number;
+} & {
+    height: number | string;
+}, never>;
+export type UnsuccessfulResultProps = {
+    name?: {
+        en: {
+            singular: string;
+            plural: string;
+        };
+        fr?: {
+            singular: string;
+            plural: string;
+        };
+    };
+    locale?: TableLocalType;
+    status: 'error' | 'loading' | 'idle' | 'noResult';
+} & ({
+    rowHeight: TableHeightKeyType;
+    heightInRem?: never;
+} | {
+    rowHeight?: never;
+    heightInRem?: number | string;
+});
+export declare const UnsuccessfulResult: (props: UnsuccessfulResultProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UnsuccessfulResult.component.d.ts.map

dist/components/UnsuccessfulResult.component.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Icon } from './icon/Icon.component';
+import { Loader } from './loader/Loader.component';
+import { tableRowHeight, translatedMessages, } from './tablev2/TableUtils';
+import { Text } from './text/Text.component';
+import { Box } from './box/Box';
+import { spacing } from '../spacing';
+export const NoResult = styled(Box) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${(props) => props.theme.textSecondary};
+  height: ${(props) => props.height}rem;
+  gap: ${spacing.r8};
+`;
+export const UnsuccessfulResult = (props) => {
+    const { heightInRem = 5, name, locale, status, rowHeight } = props;
+    const height = rowHeight ? tableRowHeight[rowHeight] : heightInRem;
+    return (_jsxs(NoResult, { height: height, children: [(status === 'loading' || status === 'idle') && _jsx(Loader, {}), status === 'error' && (_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" })), _jsx(Text, { color: "textSecondary", children: translatedMessages(status, name, locale) })] }));
+};

dist/components/accordion/Accordion.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type AccordionProps = {
+    title: string;
+    id: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+};
+export declare const Accordion: ({ title, id, style, children }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.component.d.ts.map

dist/components/accordion/Accordion.component.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { spacing, Stack } from '../../spacing';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+import styled from 'styled-components';
+import { Text } from '../text/Text.component';
+const AccordionContainer = styled(Box) `
+  width: 100%;
+  height: auto;
+`;
+const AccordionHeader = styled.button `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  background-color: transparent;
+  color: ${(props) => props.theme.textPrimary};
+  padding: 0;
+  font-family: 'Lato';
+`;
+const AccordionContent = styled.div `
+  overflow: hidden;
+  opacity: ${(props) => (props.isOpen ? 1 : 0)};
+  transition:
+    height 0.3s ease-in,
+    opacity 0.3s ease-in,
+    visibility 0.3s;
+  visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')};
+`;
+const Wrapper = styled.div `
+  padding: ${spacing.r8} 0 ${spacing.r8} 0;
+`;
+export const Accordion = ({ title, id, style, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleToggleContent = (e) => {
+        setIsOpen((prev) => !prev);
+    };
+    return (_jsxs(AccordionContainer, { children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
+                                    transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+                                    transition: 'transform 0.3s ease-in',
+                                } }), _jsx(Text, { isEmphazed: true, children: title })] }) }) }), _jsx(AccordionContent, { ref: (element) => {
+                    if (isOpen) {
+                        element === null || element === void 0 ? void 0 : element.style.setProperty('height', element.scrollHeight + 'px');
+                    }
+                    else {
+                        element === null || element === void 0 ? void 0 : element.style.setProperty('height', '0px');
+                    }
+                }, isOpen: isOpen, id: id, "aria-labelledby": `Accordion-header-${id}`, role: "region", children: _jsx(Wrapper, { style: style, children: children }) })] }));
+};

dist/components/areachart/AreaChart.component.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    id: string;
+    data: Array<Record<string, any>>;
+    xAxis: Record<string, any>;
+    yAxis: Array<Record<string, any>>;
+    color?: Record<string, any>;
+    areas: Array<Record<string, any>>;
+    width?: number;
+    height?: number;
+};
+declare function AreaChart({ id, data, xAxis, yAxis, color, height, width, areas, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export { AreaChart };
+//# sourceMappingURL=AreaChart.component.d.ts.map

dist/components/areachart/AreaChart.component.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VegaChart } from '../vegachart/VegaChart.component';
+function AreaChart({ id, data, xAxis, yAxis, color, height = 300, width = 1000, areas = [], ...rest }) {
+    const lines = yAxis.map((y) => ({
+        mark: {
+            type: 'line',
+        },
+        encoding: {
+            y,
+        },
+    }));
+    const spec = {
+        data: {
+            values: data,
+        },
+        encoding: {
+            x: xAxis,
+            color,
+        },
+        layer: [...lines, ...areas],
+        height,
+        width,
+        ...rest,
+    };
+    return _jsx(VegaChart, { className: "sc-areachart", id: id, spec: spec });
+}
+export { AreaChart };

dist/components/banner/Banner.component.d.ts

@@ -0,0 +1,10 @@
+import { Variant } from '../constants';
+export type Props = {
+    icon?: React.ReactNode;
+    title?: string;
+    children: React.ReactNode;
+    variant: Variant;
+};
+declare function Banner({ icon, title, children, variant, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export { Banner };
+//# sourceMappingURL=Banner.component.d.ts.map

dist/components/banner/Banner.component.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemeVariantSelector } from '../../utils';
+const BannerContainer = styled.div `
+  ${(props) => css `
+    color: ${props.theme.textPrimary};
+    background-color: ${props.theme.backgroundLevel1};
+    display: flex;
+    padding: ${spacing.r8};
+    align-items: center;
+    font-size: ${fontSize.small};
+    border: 1px solid;
+    border-left: 5px solid;
+    border-radius: 3px;
+    border-color: ${getThemeVariantSelector()};
+    i {
+      display: flex;
+      align-items: center;
+      margin-left: ${spacing.r8};
+      color: ${getThemeVariantSelector()};
+    }
+  `}
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const Text = styled.span `
+  margin-left: ${spacing.r16};
+`;
+const Title = styled.div `
+  margin-left: ${spacing.r16};
+  font-weight: ${fontWeight.bold};
+`;
+function Banner({ icon, title, children, variant, ...rest }) {
+    return (_jsxs(BannerContainer, { className: "sc-banner", variant: variant, children: [icon, _jsxs(TextContainer, { children: [title && _jsx(Title, { children: title }), _jsx(Text, { children: children })] })] }));
+}
+export { Banner };

dist/components/barchart/BarChart.component.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    id: string;
+    data: Array<Record<string, any>>;
+    xAxis: Record<string, any>;
+    yAxis: Record<string, any>;
+    color?: Record<string, any>;
+    height?: number;
+    barConfig?: Record<string, any>;
+};
+declare function BarChart({ id, data, xAxis, yAxis, color, height, barConfig, }: Props): import("react/jsx-runtime").JSX.Element;
+export { BarChart };
+//# sourceMappingURL=BarChart.component.d.ts.map

dist/components/barchart/BarChart.component.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VegaChart } from '../vegachartv2/VegaChartV2.component';
+function BarChart({ id, data, xAxis, yAxis, color, height = 200, barConfig, }) {
+    const spec = {
+        mark: {
+            type: 'bar',
+            ...barConfig,
+        },
+        width: 'container',
+        height,
+        data: {
+            values: data,
+        },
+        encoding: {
+            x: xAxis,
+            y: yAxis,
+            color,
+        },
+    };
+    return (_jsx(VegaChart, { id: id, spec: spec }, `barchart-${id}-${data.length}`));
+}
+export { BarChart };

dist/components/box/Box.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutProps, FlexboxProps, ColorProps, SpaceProps, PositionProps, GridProps, BackgroundProps, BordersProps, TypographyProps, ShadowProps } from 'styled-system';
+export type BoxComponentProps = LayoutProps & FlexboxProps & GridProps & SpaceProps & PositionProps & ColorProps & BackgroundProps & BordersProps & TypographyProps & ShadowProps & {
+    gap?: string | number;
+};
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxComponentProps, never>;
+export { Box };
+//# sourceMappingURL=Box.d.ts.map

dist/components/box/Box.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { layout, flexbox, grid, space, position, color, background, border, typography, shadow, system, } from 'styled-system';
+const Box = styled.div `
+  ${layout}
+  ${flexbox}
+  ${grid}
+  ${space}
+  ${position}
+  ${color}
+  ${background}
+  ${border}
+  ${typography}
+  ${shadow}
+  ${system({
+    gap: {
+        property: 'gap',
+        scale: 'space',
+    },
+})}
+`;
+export { Box };

dist/components/breadcrumb/Breadcrumb.component.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    paths: Array<JSX.Element>;
+};
+declare const Breadcrumb: ({ paths, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.component.d.ts.map