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

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { PopoverPlacement } from "../Popover";
+import { TextType } from "../Text";
+export interface TooltipProps {
+    /**
+     * The text to be displayed in the tooltip.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Where the tooltip should be placed.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Child nodes
+     */
+    children?: React.ReactNode;
+    /**
+     * Id of test component.
+     */
+    dataTestId?: string;
+    /**
+     * Whether the tooltip is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     *  To select either "light" or "dark" mode.
+     */
+    mode?: "light" | "dark";
+    /**
+     * Offset value of the tooltip.
+     */
+    offset?: [number, number];
+    /**
+     * Additional classes to the component.
+     */
+    className?: string;
+    /**
+     * Type of content.
+     */
+    contentTextType?: TextType;
+}
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+export declare const Tooltip: ({ label, placement, children, dataTestId, disabled, mode, offset, className, contentTextType, }: TooltipProps) => JSX.Element;

package/components/Tooltip/index.d.ts

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

package/components/ValueBar/ValueBar.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+import { LevelColors } from "./ValueBarTypes";
+export interface ValueBarProps extends CommonProps {
+    /**
+     * Value to display.
+     */
+    value: number;
+    /**
+     * Minimum value visible on the bar.
+     */
+    min?: number;
+    /**
+     * Maximum value visible on the bar.
+     */
+    max?: number;
+    /**
+     * Value unit. Visible only together with value if showValue parameter is set to true.
+     */
+    unit?: string;
+    /**
+     * Size of the tooltip
+     */
+    size?: "small" | "large";
+    /**
+     * Custom level colors. If this param is not provided then default values are used.
+     */
+    levelColors?: LevelColors;
+    /**
+     * Custom value color. If this param is not provided then default value is used.
+     */
+    valueColor?: string;
+    /**
+     * Show value with unit (if provided) on the bar in large version or after the bar in the small version.
+     */
+    showValue?: boolean;
+}
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ *
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {JSX.Element} ValueBar component
+ */
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId, }: ValueBarProps) => JSX.Element;

package/components/ValueBar/ValueBarHelper.d.ts

@@ -0,0 +1,35 @@
+import { LevelColors } from "./ValueBarTypes";
+/**
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ *
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @returns {number} normalized score
+ */
+export declare const getScore: (value: number, min: number, max: number) => number;
+/**
+ * Helper function to get default color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+export declare const getDefaultFillColor: (score: number) => string;
+/**
+ * Helper function to get custom color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+export declare const getFillColor: (score: number, levelColors: LevelColors) => string;
+/**
+ * Helper function to get color used by the ValueBar
+ *
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {JSX.Element} ValueBar component
+ */
+export declare const getValueBarColorByValue: (value: number, min: number, max: number, levelColors: LevelColors) => string;

package/components/ValueBar/ValueBarTypes.d.ts

@@ -0,0 +1,9 @@
+export interface LevelColor {
+    level?: number;
+    color: string;
+}
+export interface LevelColors {
+    low?: LevelColor;
+    medium?: LevelColor;
+    high?: LevelColor;
+}

package/components/ValueBar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ValueBar";
+export * from "./ValueBarTypes";
+export { getValueBarColorByValue } from "./ValueBarHelper";

package/components/buttons/Button/Button.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Size } from "../../../common";
+import { ButtonColor, ButtonCommonProps, ButtonType, ButtonVariant } from "../shared/ButtonProps";
+export interface StyledButtonProps {
+    $variant: ButtonVariant;
+    $size: Size;
+    $square: boolean;
+    $color: ButtonColor;
+    $fullWidth: boolean;
+}
+export interface ButtonProps extends ButtonCommonProps {
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Child nodes. Can be used to pass in text to be displayed on the button.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether button is fullWidth or not.
+     */
+    fullWidth?: boolean;
+    /**
+     * The button prefix.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * The button suffix.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * The type of the button. Values can be "submit" or "button".
+     */
+    type?: ButtonType;
+    /**
+     * The element type the button will be rendered as.
+     */
+    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /**
+     * The Id of the form to submit, for button type submit
+     */
+    form?: string;
+}
+/**
+ * Buttons allow users to perform an action when triggered.
+ *
+ * @param {ButtonProps} props - The props for the Button component
+ * @returns {JSX.Element} Button component
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/buttons/IconButton/IconButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Size } from "../../../common";
+import "../shared/Button.css";
+import { ButtonCommonProps } from "../shared/ButtonProps";
+export interface IconButtonProps extends ButtonCommonProps {
+    /**
+     * The icon to display.
+     */
+    icon: React.ReactNode;
+    /**
+     * Whether the button is circular or not.
+     */
+    circular?: boolean;
+    /**
+     * The element type the button will be rendered as.
+     *
+     * @memberof IconButtonProps
+     */
+    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /**
+     * The size of the button. Defaults to "small".
+     */
+    size?: Size;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/buttons/StarButton/StarButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface StarButtonProps {
+    starred: boolean;
+    onClick: (e: React.MouseEvent) => void;
+}
+/**
+ * The StarButton component is used for favorite actions or similar.
+ *
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {JSX.Element} StarButton component
+ */
+export declare const StarButton: ({ starred, onClick }: StarButtonProps) => JSX.Element;
+export {};

package/components/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Button/Button";
+export * from "./IconButton/IconButton";
+export * from "./shared/ButtonProps";
+export * from "./StarButton/StarButton";

package/components/buttons/shared/ButtonProps.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { CommonProps, Size } from "../../../common/CommonProps";
+export declare type ButtonVariant = "filled" | "transparent";
+export declare type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
+export declare type ButtonType = "button" | "submit";
+export interface ButtonCommonProps extends CommonProps {
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Whether the button is loading.
+     */
+    loading?: boolean;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Button with square aspect ratio.
+     */
+    square?: boolean;
+    /**
+     * The button's variant. Values are filled, transparent, plain.
+     */
+    color?: ButtonColor;
+    /**
+     * The variant of the button.
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button.
+     */
+    size?: Size;
+    /**
+     * The link to be used for the button.
+     */
+    to?: string;
+    title?: string;
+    tabIndex?: number;
+    role?: string;
+}

package/components/buttons/shared/helpers.d.ts

@@ -0,0 +1,20 @@
+import { Size } from "../../../common";
+import { ButtonColor, ButtonVariant } from "./ButtonProps";
+interface ButtonProps {
+    $color: ButtonColor;
+    $variant: ButtonVariant;
+    $size: Size;
+}
+/**
+ * Helper to get the needed classname from buttonProps.
+ *
+ * @returns {string} - Classnames for the button
+ */
+export declare const getStyles: () => ({ $color, $variant }: ButtonProps) => any;
+/**
+ * Helper to get the needed classname for padding.
+ *
+ * @returns {string} - The correct class for setting padding.
+ */
+export declare const getPadding: () => ({ $size }: ButtonProps) => string;
+export {};

package/components/index.d.ts

@@ -0,0 +1,44 @@
+export * from "./ActionButton";
+export * from "./Alert";
+export * from "./Badge";
+export * from "./BaseInput";
+export * from "./buttons";
+export * from "./Card";
+export * from "./Chart";
+export * from "./Checkbox";
+export * from "./Collapse";
+export * from "./CopyableText";
+export * from "./DateField/DateField";
+export * from "./DateInput/DateInput";
+export * from "./DayPicker";
+export * from "./FormGroup/FormGroup";
+export * from "./Heading";
+export * from "./Icon/Icon";
+export * from "./Indicator";
+export * from "./Label";
+export * from "./LegendItem";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./NumberField/NumberField";
+export * from "./NumberInput/NumberInput";
+export * from "./PageHeader";
+export * from "./Pagination/Pagination";
+export * from "./Popover";
+export * from "./Prompt";
+export * from "./RadioGroup";
+export * from "./SectionHeader";
+export * from "./Select";
+export * from "./SkeletonLines";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Tag";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextAreaField";
+export * from "./TextField";
+export * from "./TextInput/TextInput";
+export * from "./Timeline/Timeline";
+export * from "./Tip";
+export * from "./Toggle";
+export * from "./Tooltip";
+export * from "./ValueBar";

package/components/theme/DefaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { Tokens } from "@trackunit/ui-design-tokens";
+export declare const defaultTheme: Tokens;

package/components/theme/index.d.ts

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

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useDebounce";
+export * from "./useLocalStorage";
+export * from "./useTimeout";

package/hooks/useDebounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ *
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @returns {any} value The latest values received
+ */
+export declare const useDebounce: <T>(value: T, delay?: number) => T;

package/hooks/useLocalStorage.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react";
+/**
+ * The useLocalStorage hook works like useState, but saves to localstorage.
+ *
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @returns {string | null | undefined} value
+ */
+export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];

package/hooks/useTimeout.d.ts

@@ -0,0 +1,15 @@
+interface UseTimeoutProps {
+    onTimeout: () => void;
+    duration: number;
+}
+/**
+ * The useTimeout hook.
+ *
+ * @param {UseTimeoutProps} props The props
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ */
+export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
+    startTimeout: () => void;
+    stopTimeout: () => void;
+};
+export {};