@trackunit/react-components 0.0.36

package/components/textField/TextField.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { FormGroupProps } from "../formGroup/FormGroup";
+import { TextInputProps } from "../TextInput/TextInput";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
+    /**
+     * Set the Maximal length of the value for the input.
+     * Adds a TextLenghtIndicator to the right of the helpText.
+     *
+     * @type number
+     * @memberof TextFieldProps
+     */
+    maxLength?: number;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     *
+     * @type string
+     * @memberof TextFieldProps
+     */
+    errorMessage?: string;
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/textField/TextLenghtIndicator.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface TextLengthIndicatorProps {
+    length: number;
+    maxLength: number;
+}
+export declare const TextLengthIndicator: React.FC<TextLengthIndicatorProps>;

package/components/textField/index.d.ts

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

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/components/tip/Tip.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { IIconProps } from "../icon/Icon";
+import { TooltipProps } from "../tooltip";
+export interface TipProps extends CommonProps {
+    children: React.ReactNode;
+    iconProps?: Partial<IIconProps>;
+    tooltipProps?: Partial<TooltipProps>;
+}
+export declare const Tip: {
+    ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps): JSX.Element;
+    displayName: string;
+};

package/components/tip/index.d.ts

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

package/components/toggle/Toggle.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type ToggleSize = "small" | "default";
+export interface ToggleProps extends CommonProps {
+    id: string;
+    toggled: boolean;
+    onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    size?: ToggleSize;
+    tabIndex?: number;
+    required?: boolean;
+    name?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/components/toggle/index.d.ts

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

package/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { PopoverPlacement } from "../popover";
+import { TextType } from "../text";
+export interface TooltipProps {
+    /**
+     * The text to be displayed in the tooltip.
+     *
+     * @type {(string | React.ReactNode)}
+     * @memberof TooltipProps
+     */
+    label: string | React.ReactNode;
+    /**
+     * Where the tooltip should be placed.
+     *
+     * @type {PopoverPlacement}
+     * @memberof TooltipProps
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Child nodes
+     *
+     * @type React.ReactNode
+     * @memberof TooltipProps
+     */
+    children?: React.ReactNode;
+    /**
+     * Id of test component.
+     *
+     * @type string
+     * @memberof TooltipProps
+     */
+    dataTestId?: string;
+    /**
+     * Whether the tooltip is disabled or not.
+     *
+     * @type {boolean}
+     * @memberof TooltipProps
+     */
+    disabled?: boolean;
+    /**
+     *  To select either "light" or "dark" mode.
+     *
+     * @type {("light" | "dark")}
+     * @memberof TooltipProps
+     */
+    mode?: "light" | "dark";
+    /**
+     * Offset value of the tooltip.
+     *
+     * @type {[number, number]}
+     * @memberof TooltipProps
+     */
+    offset?: [number, number];
+    /**
+     * Additional classes to the component.
+     *
+     * @type string
+     * @memberof TooltipProps
+     */
+    className?: string;
+    /**
+     * Type of content.
+     *
+     * @type {TextType}
+     * @memberof TooltipProps
+     */
+    contentTextType?: TextType;
+}
+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/constants/colors.d.ts

@@ -0,0 +1,65 @@
+/**
+ * ? A collection of all the types and tokens related to the named colors in the default theme.
+ */
+/**
+ * The general color palette
+ * Should be available in most if not all colored components
+ */
+export declare const generalColors: {
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly NEUTRAL: "neutral";
+};
+export declare type GeneralColors = typeof colors[keyof typeof generalColors];
+/**
+ * The intent color palette
+ * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
+ */
+export declare const intentColors: {
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+};
+export declare type IntentColors = typeof colors[keyof typeof intentColors];
+/**
+ * The Criticality color palette
+ * Should be available in any component that could be used to display the criticality of an asset or event
+ */
+export declare const criticalityColors: {
+    readonly GOOD: "good";
+    readonly LOW: "low";
+    readonly CRITICAL: "critical";
+};
+export declare type CriticalityColors = typeof colors[keyof typeof criticalityColors];
+/**
+ * The Activity color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+export declare const activityColors: {
+    readonly WORKING: "working";
+    readonly IDLE: "idle";
+    readonly STOPPED: "stopped";
+    readonly UNKNOWN: "unknown";
+};
+export declare type ActivityColors = typeof colors[keyof typeof activityColors];
+/**
+ * The full color palette
+ */
+export declare const colors: {
+    readonly WORKING: "working";
+    readonly IDLE: "idle";
+    readonly STOPPED: "stopped";
+    readonly UNKNOWN: "unknown";
+    readonly GOOD: "good";
+    readonly LOW: "low";
+    readonly CRITICAL: "critical";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly PRIMARY: "primary";
+    readonly ACCENT: "accent";
+    readonly NEUTRAL: "neutral";
+};
+export declare type Colors = typeof colors[keyof typeof colors];

package/constants/index.d.ts

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

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 @@
+export declare const useDebounce: <T>(value: T, delay?: number) => T;

package/hooks/useLocalStorage.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+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,9 @@
+interface UseTimeoutProps {
+    onTimeout: () => void;
+    duration: number;
+}
+export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
+    startTimeout: () => void;
+    stopTimeout: () => void;
+};
+export {};

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./common";
+export * from "./components";
+export * from "./constants";
+export * from "./hooks";
+export * from "./layout";