@trackunit/react-components 0.0.1-alpha-59a0a75488.0

package/README.md

@@ -0,0 +1,22 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit React Components
+The `@trackunit/react-components` package is the home of Trackunits public UI library.
+
+This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
+
+To browse all avaliable components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/common/CommonProps.d.ts

@@ -0,0 +1,12 @@
+export interface CommonProps {
+    /**
+     * A custom class name to be attached to root element
+     */
+    className?: string;
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+}
+export declare type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
+export declare type Size = "small" | "medium" | "large";

package/common/LegacyComponentStory.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Default story for legacy components.
+ *
+ *@returns {JSX.Element} Legacy Component Story
+ */
+export declare const LegacyComponentStory: () => JSX.Element;

package/common/StorybookProps.d.ts

@@ -0,0 +1,6 @@
+export declare const docs: {
+    source: {
+        type: string;
+        excludeDecorators: boolean;
+    };
+};

package/common/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CommonProps";
+export * from "./StorybookProps";
+export * from "./useContainerProps";

package/common/useContainerProps.d.ts

@@ -0,0 +1,16 @@
+export interface UseContainerProps {
+    className?: string;
+    dataTestId?: string;
+}
+/**
+ * Utility for common props on containers.
+ *
+ * @param {UseContainerProps} ContainerProps - Props for the utility
+ * @param {string} ContainerProps.className - Optional custom className
+ * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
+ * @returns {UseContainerProps} - Object with undefined values removed
+ */
+export declare const useContainerProps: ({ className, dataTestId }: UseContainerProps) => {
+    className: string | undefined;
+    "data-testid": string | undefined;
+};

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+declare type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+declare type FieldSize = "small" | "medium";
+interface ActionButtonProps extends CommonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: ActionType;
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+    /**
+     * The onClick event.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     *  The size of the icon.
+     */
+    iconSize?: FieldSize;
+}
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+export declare const ActionButton: ({ type, value, dataTestId, iconSize }: ActionButtonProps) => JSX.Element;
+export {};

package/components/ActionButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./ActionButton";

package/components/Alert/Alert.d.ts

@@ -0,0 +1,53 @@
+import { IntentColors } from "@trackunit/ui-design-tokens";
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type AlertActionType = "primary" | "secondary";
+export declare type AlertAction = {
+    label: string;
+    onClick: () => void;
+    loading?: boolean;
+};
+export interface AlertProps extends CommonProps {
+    /**
+     * Child nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Color of the alert component.
+     *
+     */
+    color?: IntentColors;
+    /**
+     * Title of the alert component.
+     */
+    title?: string;
+    /**
+     * Action to be performed on clicking the primary button.
+     */
+    primaryAction?: AlertAction;
+    /**
+     * Action to be performed on clicking the secondary button.
+     */
+    secondaryAction?: AlertAction;
+    /**
+     * OnClose Event.
+     */
+    onClose?: () => void;
+    /**
+     * Whether the contents should be displayed inline or not.
+     */
+    inline?: boolean;
+    /**
+     * A prop to enable autoscroll to alert element
+     *
+     * could be used for displaying errors on long scrollable forms
+     */
+    autoScroll?: boolean;
+}
+/**
+ * The Alert component should be used to inform the user of important information.
+ *
+ * @param {AlertProps} props - The props for the Alert component
+ * @returns {JSX.Element} Alert component
+ */
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;

package/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/components/Badge/Badge.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { CommonProps } from "../../common/CommonProps";
+export declare type BadgeSize = "medium" | "large";
+interface BaseBadgeProps extends CommonProps {
+    /**
+     * The color of the badge.
+     */
+    color?: ThemeColors;
+    /**
+     * Specifies whether the badge is subtle or not.
+     * Subtle badges have a light background color wither a darker text color.
+     */
+    subtle?: boolean;
+    /**
+     * Custom classNames can be added to make adjustments where needed.
+     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
+     * This will make the badge truncate the text if it is too long.
+     */
+    className?: string;
+    /**
+     * The count to be displayed on the badge.
+     */
+    count?: number;
+    /**
+     * The max value to be displayed in the badge.
+     * Any value above this will be appended with a +.
+     */
+    max?: number;
+    /**
+     * If enabled the badge is shown even if the count is 0.
+     */
+    hideZero?: boolean;
+    /**
+     * Size of the badge.
+     */
+    size?: BadgeSize;
+}
+export declare type BadgeProps = BaseBadgeProps;
+/**
+ * The Badge component is used to display a notification badge with an optional number value.
+ *
+ * @param {BadgeProps} props - The props for the Badge component
+ * @returns {JSX.Element} Badge component
+ */
+export declare const Badge: ({ color, subtle, className, count, max, hideZero, dataTestId, size, ...rest }: BadgeProps) => JSX.Element | null;
+export {};

package/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from "./Badge";

package/components/BaseInput/BaseInput.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
+declare type FieldSize = "small" | "medium";
+export interface BaseInputProps extends FilteredInputProps, CommonProps {
+    /**
+     * A React element to render before the text in the input.
+     * This is typically used to render an icon.
+     * For elements other than icons, please consider using the addonBefore prop.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * A React element to render after the text in the input.
+     * This is typically used to render an icon.
+     * For other elements than icons, please consider using the addonAfter prop.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * A React element to render in a separate container before the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the prefix prop.
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * A React element to render in a separate container after the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the suffix prop.
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * A ReactNode to render at the end of the input field before the addonAfter.
+     * Mainly meant for the icon button actions for special input types.
+     */
+    actions?: React.ReactNode;
+    /**
+     *  The size of the input.
+     *  Default == 40px, Small == 32px.
+     */
+    fieldSize?: FieldSize;
+    /**
+     * If true the field is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * The Placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * A base input component that can be used for text inputs, password inputs, etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ *
+ * For specific input types make sure to use the corresponding input component.
+ * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
+ */
+export declare const BaseInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/BaseInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./BaseInput";

package/components/Card/Card.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare const ROLE_CARD = "region";
+declare type Overflow = "visible" | "hidden" | "scroll" | "auto";
+export interface CardProps extends CommonProps {
+    /**
+     * Whether the card should have full height or not.
+     */
+    fullHeight?: boolean;
+    /**
+     * Whether the card should overflow contents.
+     */
+    overflow?: Overflow;
+    /**
+     * The css grid area to place the card.
+     *
+     * @deprecated Use tailwind based grid layouts instead.
+     */
+    gridArea?: string;
+    /**
+     * Children to show in the card
+     */
+    children?: React.ReactNode;
+    /**
+     * A Click handler function
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseEnter handler function
+     */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseLEave handler function
+     */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+/**
+ * The Card component is a container for UI elements, and is the main component of the modal.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
+ *
+ * @param {CardProps} props - The props for the Card component
+ * @returns {JSX.Element} Card component
+ */
+export declare const Card: ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, dataTestId, overflow, gridArea, }: CardProps) => JSX.Element;
+export {};

package/components/Card/CardBody.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+declare type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
+export interface CardBodyProps extends CommonProps {
+    /**
+     * Tells the body how to handle overflowing elements.
+     * Directly mapped to the overflow css property.
+     */
+    overflow?: Overflow;
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    disableGap?: boolean;
+    /**
+     * Child elements to render in the body
+     */
+    children: React.ReactNode | null;
+}
+/**
+ * The CardBody component should be used to inform the user of important information.
+ *
+ * @summary For applying padding and gap to a Card.
+ * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
+ * @param {CardBodyProps} props - The props for the CardBody component
+ * @returns {JSX.Element} CardBody component
+ */
+export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardBodyProps) => JSX.Element;
+export {};

package/components/Card/CardFooter.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+export interface CardFooterProps extends CommonProps {
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Element to render in the footer
+     */
+    children?: React.ReactNode | null;
+}
+/**
+ * A simple footer intended to use with Cards and Modals.
+ * Currently only intended to contain Buttons.
+ * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
+ *
+ * @param {CardFooterProps} props - The props for the CardFooter component
+ * @returns {JSX.Element} CardFooter component
+ */
+export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;

package/components/Card/CardHeader.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+import { HeadingVariant } from "../Heading/Heading";
+export interface CardHeaderProps extends CommonProps {
+    /**
+     * The text to show in the Cards main heading
+     */
+    heading: string;
+    /**
+     * The variant/size of the heading.
+     * Same as the `Heading` component.
+     *
+     * @default "primary"
+     */
+    headingVariant?: HeadingVariant;
+    /** Adds an extra heading below the main heading. */
+    subHeading?: string | React.ReactNode;
+    /**
+     * Items to render next to the heading
+     */
+    accessories?: React.ReactNode;
+    /**
+     * Sets gap, padding and margin.
+     */
+    density?: Density;
+    /**
+     * Wether or not a seperator line should be rendered
+     */
+    showSeparator?: boolean;
+    /** Function to call when the close button is clicked */
+    onClose?: () => void;
+    /**
+     * Children to render in the header
+     */
+    children?: React.ReactNode | null;
+}
+/**
+ * Header for Cards and Modals.
+ *
+ * @param {CardHeaderProps} props - The props for the CardHeader component
+ * @returns {JSX.Element} CardHeader component
+ */
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;

package/components/Card/DensityContainer.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+interface ContainerProps extends CommonProps {
+    /**
+     * The density of the card components.
+     * "compact" = 12px gap and padding.
+     * "comfortable" = 16px gap and padding.
+     * "spacious" = 16px gap, 26px padding.
+     */
+    $density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    $disableGap?: boolean;
+    /**
+     * The flex direction of the Card. Defaults to "column".
+     */
+    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    children?: React.ReactNode;
+}
+/**
+ * The DensityContainer component applies gap and padding.
+ * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
+ *
+ * @summary For applying auto padding and gap to a Card or Modal or whatever.
+ * @param {ContainerProps} props - The props for the DensityContainer component
+ * @returns {JSX.Element} DensityContainer component
+ */
+export declare const DensityContainer: ({ children, className, dataTestId, $density, $disableGap, $direction, }: ContainerProps) => JSX.Element;
+export {};

package/components/Card/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Card";
+export * from "./CardBody";
+export * from "./CardFooter";
+export * from "./CardHeader";
+export * from "./DensityContainer";

package/components/Chart/Chart.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { EChartsType } from "echarts";
+export interface IOptionsType {
+    [key: string]: any;
+}
+export interface ChartProps extends CommonProps {
+    /**
+     * Option values for EChart.
+     */
+    options: IOptionsType;
+    /**
+     * Whether or not to low the preloader.
+     */
+    showLoading?: boolean;
+    /**
+     * onClick event.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * onDataZoom event.
+     */
+    onDataZoom?: (event: any) => void;
+    /**
+     * onBrush event.
+     */
+    onBrush?: (event: any) => void;
+    /**
+     * Event fired when brush is selected.
+     */
+    onBrushSelected?: (event: any) => void;
+    /**
+     * Event fired when mouse leaves the chart.
+     */
+    mouseLeaveChart?: () => void;
+    /**
+     * Event fired when mouse is moving over the chart.
+     */
+    mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
+    /**
+     * CSS styles for the chart.
+     */
+    style?: Record<string, string | number>;
+    /**
+     * To denote of chart is ready or not.
+     */
+    onChartReady?: (chart: any) => void;
+    /**
+     * Whether to merge with previous option.
+     */
+    merge?: boolean;
+    /**
+     * Values for the loading component.
+     */
+    loadingOption?: {
+        text: string;
+    };
+    /**
+     * Time-zone label.
+     */
+    timezoneLabel?: React.ReactNode;
+    /**
+     * Type of rendered used. Either "svg" or "canvas".
+     */
+    renderer?: "svg" | "canvas";
+    /**
+     * Value used to find element by `data-testid` attribute.
+     */
+    dataTestId?: string;
+}
+/**
+ * The Chart component is a wrapper component for ECharts.
+ *
+ * Handles events and click functionality.
+ *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
+ * @param {ChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

package/components/Chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./Chart";

package/components/Checkbox/CheckIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+interface CheckIconProps extends CommonProps {
+}
+/**
+ * The CheckIcon component is used by the checkbox to display the checked state.
+ *
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
+ */
+export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => JSX.Element;
+export {};

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A string element to be displayed as a label
+     */
+    label?: React.ReactNode;
+    /**
+     * An boolean flag to set checkbox to disabled state
+     */
+    disabled?: boolean;
+    /**
+     * An boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+    /**
+     * An boolean flag to set checkbox to readonly mode
+     */
+    readOnly?: boolean;
+    /**
+     * An boolean flag to set checkbox to intermediate state
+     */
+    indeterminate?: boolean;
+}
+/**
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/Checkbox/IndeterminateIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
+ *
+ * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
+ * @returns {JSX.Element} IndeterminateIcon component
+ */
+export declare const IndeterminateIcon: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

package/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/components/Collapse/Collapse.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface CollapseProps extends CommonProps {
+    id: string;
+    /**
+     * Expands the collapse component during initialization.
+     */
+    initialExpanded?: boolean;
+    /**
+     * onToggle event.
+     */
+    onToggle?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;
+    /**
+     * Child nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Label to be displayed.
+     */
+    label: React.ReactNode;
+}
+/**
+ * The Collapse component is used to condense non-important information.
+ *
+ * @param {CollapseProps} props - The props for the Collapse component
+ * @returns {JSX.Element} Collapse component
+ */
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, dataTestId, }: CollapseProps) => JSX.Element;

package/components/Collapse/index.d.ts

@@ -0,0 +1 @@
+export * from "./Collapse";