@trackunit/react-components 0.0.99 → 0.0.102

package/components/BaseInput/BaseInput.d.ts

@@ -16,19 +16,19 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     suffix?: React.ReactNode;
     /**
-     * An React element to render in a seperate container before the text in the input.
+     * An React element to render in a separate container before the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the prefix prop.
      */
     addonBefore?: React.ReactNode;
     /**
-     * An React element to render in a seperate container after the text in the input.
+     * An React element to render in a separate container after the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the suffix prop.
      */
     addonAfter?: React.ReactNode;
     /**
-     * An ReactNode to render at the end of the input field befire the addonAfter.
+     * An 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;
@@ -38,7 +38,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     fieldSize?: FieldSize;
     /**
-     * If ture the field is rendered in its invalid state.
+     * If true the field is rendered in its invalid state.
      */
     isInvalid?: boolean;
     /**

package/components/Card/Card.d.ts

@@ -3,10 +3,6 @@ import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
 declare type Overflow = "visible" | "hidden" | "scroll" | "auto";
 export interface CardProps extends CommonProps {
-    children?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * Whether the card should have full height or not.
      */
@@ -16,15 +12,31 @@ export interface CardProps extends CommonProps {
      */
     overflow?: Overflow;
     /**
+     * The css grid area to place the card.
      *
      * @deprecated Use tailwind based grid layouts instead.
-     * @memberof CardProps
      */
     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.
- * Is also used for modals etc.
+ * 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

package/components/Card/CardBody.d.ts

@@ -1,13 +1,23 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
 declare type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
-interface CardContentProps extends CommonProps {
+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;
 }
 /**
@@ -15,8 +25,8 @@ interface CardContentProps extends CommonProps {
  *
  * @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 {CardContentProps} props - The props for the CardBody component
+ * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardContentProps) => JSX.Element;
+export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardBodyProps) => JSX.Element;
 export {};

package/components/Card/CardFooter.d.ts

@@ -1,8 +1,14 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
-interface CardFooterProps extends CommonProps {
-    children?: React.ReactNode | null;
+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.
@@ -13,4 +19,3 @@ interface CardFooterProps extends CommonProps {
  * @returns {JSX.Element} CardFooter component
  */
 export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;
-export {};

package/components/Card/CardHeader.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
 import { HeadingVariant } from "../Heading/Heading";
-interface CardHeaderProps extends CommonProps {
-    /** The text to show in the modal main heading */
+export interface CardHeaderProps extends CommonProps {
+    /**
+     * The text to show in the Cards main heading
+     */
     heading: string;
     /**
      * The variant/size of the heading.
@@ -13,12 +15,24 @@ interface CardHeaderProps extends CommonProps {
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */
     subHeading?: string;
-    /** Function to call when the close button is clicked */
-    onClose?: () => void;
-    children?: React.ReactNode | null;
+    /**
+     * 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.
@@ -27,4 +41,3 @@ interface CardHeaderProps extends CommonProps {
  * @returns {JSX.Element} CardHeader component
  */
 export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;
-export {};

package/components/Chart/Chart.d.ts

@@ -61,8 +61,11 @@ export interface ChartProps extends CommonProps {
 }
 /**
  * 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
  */

package/components/CopyableText/CopyableText.d.ts

@@ -13,7 +13,7 @@ export interface CopyableTextProps extends CommonProps {
     alternativeText?: string;
 }
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component

package/components/DateField/DateField.d.ts

@@ -1,30 +1,19 @@
 /// <reference types="react" />
-import { Matcher } from "react-day-picker";
-import { BaseInputProps } from "../BaseInput";
-export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange" | "readOnly"> {
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
     /**
-     * A text label to be displayed next to the indicator
+     * If a value is set, the field is rendered in its invalid state.
      */
-    label?: string;
-    /**
-     * A text to be displayed under the input with a short description of field purpose
-     */
-    description?: string;
-    /**
-     * A default value to be displayed by a input field
-     */
-    defaultValue?: string;
-    /**
-     * A flag that can be used to disable the input, default value is false
-     */
-    disabled?: boolean;
-    /**
-     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
-     */
-    disabledDays?: Matcher | Matcher[] | undefined;
-    /**
-     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
-     */
-    preventDeselect?: boolean;
+    errorMessage?: string;
 }
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
 export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { BaseInputProps } from "../BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "onChange">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A default value to be displayed by a input field
+     */
+    defaultValue?: Date;
+    /**
+     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
+     */
+    disabledDays?: Matcher | Matcher[] | undefined;
+    /**
+     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
+     */
+    preventDeselect?: boolean;
+    /**
+     * onChange function returning the date instead of input event
+     */
+    onChange?: (date: Date) => void;
+}
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/Spacer/Spacer.d.ts

@@ -1,21 +1,20 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common";
-interface SpacerProps extends CommonProps {
+export interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
      */
-    minHeight?: string;
+    minHeight?: "normal" | "large";
     /**
      * The border of the spacer.
      */
     border?: boolean;
 }
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
-export {};

package/components/Tag/Tag.d.ts

@@ -25,11 +25,13 @@ export interface TagProps extends CommonProps {
     size?: TagSize;
 }
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
  *
- * Multiple or single tags can be used to categorise items.
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component

package/components/Text/Text.d.ts

@@ -47,7 +47,11 @@ export interface TextProps extends CommonProps {
     underline?: boolean;
 }
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component

package/components/TextArea/TextArea.d.ts

@@ -1,73 +1,16 @@
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps } from "../../common";
 export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
-export interface TextAreaProps extends CommonProps {
-    /**
-     * ID of the text area.
-     */
-    id?: string;
-    /**
-     * Name of the text area.
-     */
-    name?: string;
-    /**
-     * Label of the text area.
-     */
-    label?: string;
-    /**
-     * Description of the text area.
-     */
-    description?: string;
-    /**
-     * Information about the text area.
-     */
-    info?: React.ReactNode;
-    /**
-     * Error message of the text area.
-     */
-    error?: React.ReactNode;
-    /**
-     * Value of the text area.
-     */
-    value?: React.ReactText;
-    /**
-     * Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
-     */
-    tabIndex?: number;
-    /**
-     * Whether the text area is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the text area is readonly or not.
-     */
-    readOnly?: boolean;
+declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
+export interface TextAreaProps extends FilteredInputProps, CommonProps {
     /**
      * Number of rows in the text area.
      */
     rows?: number;
-    /**
-     * Placeholder text for the text area.
-     */
-    placeholder?: string;
-    /**
-     * onChange handler of the text area.
-     */
-    onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * onFocus handler of the text area.
-     */
-    onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * onBlur handler of the text area.
-     */
-    onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Maximum length of the text area.
-     */
-    maxLength?: number;
     /**
      * Resize of the text area.
+     *
+     * @default "vertical"
      */
     resize?: TextAreaResize;
     /**
@@ -75,8 +18,13 @@ export interface TextAreaProps extends CommonProps {
      */
     defaultValue?: React.ReactText;
     /**
-     * Whether the text area is required or not.
+     * If true the field is rendered in its invalid state.
      */
-    required?: boolean;
+    isInvalid?: boolean;
 }
+/**
+ * The TextArea is a base component, and should not be used very often.
+ * For most cases the TextAreaField is the correct component.
+ */
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/TextAreaField/TextAreaField.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { TextAreaProps } from "../TextArea/TextArea";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
+    /**
+     * Set the Maximal length of the value for the input.
+     * Adds a TextLengthIndicator to the right of the helpText.
+     */
+    maxLength?: number;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/TextAreaField/index.d.ts

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

package/components/TextField/TextField.d.ts

@@ -5,7 +5,7 @@ declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "hel
 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.
+     * Adds a TextLengthIndicator to the right of the helpText.
      */
     maxLength?: number;
     /**

package/components/index.d.ts

@@ -7,7 +7,8 @@ export * from "./Chart";
 export * from "./Checkbox";
 export * from "./Collapse";
 export * from "./CopyableText";
-export * from "./DateField";
+export * from "./DateField/DateField";
+export * from "./DateInput/DateInput";
 export * from "./DayPicker";
 export * from "./FormGroup/FormGroup";
 export * from "./Heading";
@@ -30,6 +31,7 @@ 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";