@trackunit/react-components 0.0.47 → 0.0.50

package/README.md

@@ -1,36 +1,18 @@
-# React components
+# Trackunit React Components
+The `@trackunit/react-components` package is the home of Trackunits public UI library.
 
-The React Components library should be the home for reuseable React components in the manager.  
-This library is (going to be) exposed publibly and should therfore be treated accordingly. 
+This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
 
-### Component generation command example
-`yarn nx workspace-generator react-component MyTestComponent --directory=components --project=react-components --no-interactive`
+To browse all avaliable components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
 
-## Rules for this library
-_Not all current components lives up the these standards but any new component should_  
-_We are working on updating all existing components_
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
 
-All Components in this lib: 
-- Must be exposed in our storybook.  
-- Must have sufficient test coverage.  
-- Must extend CommonProps (Have ClassName and DataTestId).  
-- Must expose their styles in a .css file using @apply and be exposed in our css-components library.  
-- Should be reviewed by @patr2275.  
-- May only depend on other Buildable, Publishable and visibility:public tagged libs.
+## 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).
 
-## Stories for components
+## 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.
 
-**Component.stories.tsx**
-Used for holding the code for the individual stories and configuring the story parameters.  
-Keeping these in the .tsx file allows for Typescript and auto completion.
-
-Prefixing a story with Hidden removes it form the sidebar navigation, but they can still be referenced in the docs mdx.
-
-**Component.docs.mdx**
-Handles the layout of the docs page shown in storybook.
-References stories from the tsx file.
-
-## TODO: 
-1. Update Introduction and Fundamentals documentation.
-2. Enable docs autogen to generate props and controls from typescript and jsdocs.
-3. Update stories on existing components and move them away from Legacy Components.
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/common/CommonProps.d.ts

@@ -2,14 +2,12 @@ export interface CommonProps {
     /**
      * A custom class name to be attached to root element
      *
-     * @type string
      * @memberof CommonProps
      */
     className?: string;
     /**
      * A id that can be used in tests to get the component
      *
-     * @type string
      * @memberof CommonProps
      */
     dataTestId?: string;

package/common/useContainerProps.d.ts

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

package/components/NumberField/NumberField.d.ts

@@ -6,7 +6,6 @@ export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProp
     /**
      * If a value is set, the field is rendered in its invalid state.
      *
-     * @type string
      * @memberof NumberFieldProps
      */
     errorMessage?: string;

package/components/NumberInput/NumberInput.d.ts

@@ -4,9 +4,9 @@ declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface NumberInputProps extends BaseInputExposedProps {
 }
 /**
- * A thin wrapper arround the `BaseInput` component for number input fields.
+ * A thin wrapper around the `BaseInput` component for number input fields.
  *
- * *NOTE: If shown with a label, please use the `NumberField` component instead.*
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/TextInput/TextInput.d.ts

@@ -4,9 +4,9 @@ declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface TextInputProps extends BaseInputExposedProps {
 }
 /**
- * A thin wrapper arround the `BaseInput` component for text input fields.
+ * A thin wrapper around the `BaseInput` component for text input fields.
  *
- * *NOTE: If shown with a label, please use the `TextField` component instead.*
+ * NOTE: If shown with a label, please use the `TextField` component instead.
  */
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/alert/Alert.d.ts

@@ -11,13 +11,11 @@ export interface AlertProps extends CommonProps {
     /**
      * Child nodes.
      *
-     * @type React.ReactNode
      * @memberof AlertProps
      */
     children: React.ReactNode;
     /**
      * Intent of the alert component.
-     * @type "info" | "warning" | "danger" | "success"
      *
      * @memberof AlertProps
      */
@@ -25,21 +23,18 @@ export interface AlertProps extends CommonProps {
     /**
      * Title of the alert component.
      *
-     * @type string
      * @memberof AlertProps
      */
     title?: string;
     /**
      * Action to be performed on clicking the primary button.
      *
-     * @type AlertAction
      * @memberof AlertProps
      */
     primaryAction?: AlertAction;
     /**
      * Action to be performed on clicking the secondary button.
      *
-     * @type {AlertAction}
      * @memberof AlertProps
      */
     secondaryAction?: AlertAction;
@@ -52,7 +47,6 @@ export interface AlertProps extends CommonProps {
     /**
      * Whether the contents should be displayed inline or not.
      *
-     * @type boolean
      * @memberof AlertProps
      */
     inline?: boolean;
@@ -61,9 +55,14 @@ export interface AlertProps extends CommonProps {
      *
      * could be used for displaying errors on long scrollable forms
      *
-     * @type boolean
      * @memberof AlertProps
      */
     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: ({ intent, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;

package/components/badge/Badge.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
 declare type BadgeVariant = "badge" | "pill" | "tag";
-export interface TagProps extends BaseBadgeProps {
+interface TagProps extends BaseBadgeProps {
     /**
      * The name of the variant.
      *
@@ -14,16 +14,14 @@ export interface TagProps extends BaseBadgeProps {
      * A handler for a click event triggered on x icon
      * if not passed then x icon won't be visible
      *
-     * @type () => void
      * @memberof TagProps
      */
     onClose?: () => void;
 }
-export interface BaseBadgeProps extends CommonProps {
+interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      *
-     * @type "primary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown"
      * @memberof BadgeProps
      */
     color?: Colors;
@@ -31,7 +29,6 @@ export interface BaseBadgeProps extends CommonProps {
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.
      *
-     * @type boolean
      * @memberof BadgeProps
      */
     subtle?: boolean;
@@ -41,7 +38,6 @@ export interface BaseBadgeProps extends CommonProps {
      * Tag will display x icon if you provide onClose handler.
      * Badge is subtle by default.
      *
-     * @type "badge" | "pill" | "tag"
      * @memberof BadgeProps
      */
     variant?: BadgeVariant;
@@ -50,25 +46,28 @@ export interface BaseBadgeProps extends CommonProps {
      * 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.
      *
-     * @type string
      * @memberof BadgeProps
      */
     className?: string;
     /**
      * Child nodes of the Badge.
      *
-     * @type React.ReactNode
      * @memberof BadgeProps
      */
     children?: React.ReactNode;
     /**
      * Size of the badge.
      *
-     * @type "default" | "large"
      * @memberof BadgeProps
      */
     size?: BadgeSize;
 }
 export declare type BadgeProps = BaseBadgeProps | TagProps;
+/**
+ * The Badge component us used to display states or similar short form information.
+ *
+ * @param {BadgeProps} props - The props for the Badge component
+ * @returns {JSX.Element} Badge component
+ */
 export declare const Badge: ({ color, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
 export {};

package/components/baseInput/BaseInput.d.ts

@@ -8,7 +8,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * This is typically used to render an icon.
      * For other elements than icons, please concider using the addonBefore prop.
      *
-     * @type React.ReactNode
      * @memberof BaseInputProps
      */
     prefix?: React.ReactNode;
@@ -17,7 +16,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * This is typically used to render an icon.
      * For other elements than icons, please concider using the addonAfter prop.
      *
-     * @type React.ReactNode
      * @memberof BaseInputProps
      */
     suffix?: React.ReactNode;
@@ -26,7 +24,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * This is typically used to render text.
      * For icons, please concider using the prefix prop.
      *
-     * @type React.ReactNode
      * @memberof BaseInputProps
      */
     addonBefore?: React.ReactNode;
@@ -35,7 +32,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * This is typically used to render text.
      * For icons, please concider using the suffix prop.
      *
-     * @type React.ReactNode
      * @memberof BaseInputProps
      */
     addonAfter?: React.ReactNode;
@@ -43,7 +39,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * An ReactNode to render at the end of the input field befire the addonAfter.
      * Mainly meant for the icon button actions for special input types.
      *
-     * @type React.ReactNode
      * @memberof BaseInputProps
      */
     actions?: React.ReactNode;
@@ -51,21 +46,18 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      *  The size of the input.
      *  Default == 40px, Small == 32px.
      *
-     * @type "small" | "default"
      * @memberof BaseInputProps
      */
     fieldSize?: FieldSize;
     /**
      * If ture the field is rendered in its invalid state.
      *
-     * @type boolean
      * @memberof BaseInputProps
      */
     isInvalid?: boolean;
     /**
      * The Placeholder text for the input.
      *
-     * @type string
      * @memberof BaseInputProps
      */
     placeholder?: string;

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

@@ -12,44 +12,42 @@ export interface ButtonProps extends ButtonCommonProps {
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
      *
-     * @type React.ReactNode
      * @memberof ButtonProps
      */
     children?: React.ReactNode;
     /**
      * Whether button is fullWidth or not.
      *
-     * @type boolean
      * @memberof ButtonProps
      */
     fullWidth?: boolean;
     /**
      * The button prefix.
      *
-     * @type React.ReactNode
      * @memberof ButtonProps
      */
     prefix?: React.ReactNode;
     /**
      * The button suffix.
      *
-     * @type React.ReactNode
      * @memberof ButtonProps
      */
     suffix?: React.ReactNode;
     /**
      * The type of the button. Values can be "submit" or "button".
      *
-     * @type "submit" | "button"
      * @memberof ButtonProps
      */
     type?: ButtonType;
     /**
      * The element type the button will be rendered as.
      *
-     * @type {(keyof JSX.IntrinsicElements | React.ComponentType<any>)}
      * @memberof ButtonProps
      */
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /**
+     * The Id of the form to submit, for button type submit
+     */
+    form?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/buttons/icon-button/IconButton.d.ts

@@ -4,14 +4,12 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
      *
-     * @type React.ReactNode
      * @memberof IconButtonProps
      */
     icon: React.ReactNode;
     /**
      * Whether the button is circular or not.
      *
-     * @type boolean
      * @memberof IconButtonProps
      */
     circular?: boolean;
@@ -25,7 +23,6 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The size of the button. Defaults to "small".
      *
-     * @type "small" | "normal" | "large"
      * @memberof IconButtonProps
      */
     size?: ButtonSize;

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

@@ -9,49 +9,42 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * Whether the button is loading.
      *
-     * @type boolean
      * @memberof ButtonCommonProps
      */
     loading?: boolean;
     /**
      * Whether the button is disabled.
      *
-     * @type boolean
      * @memberof ButtonCommonProps
      */
     disabled?: boolean;
     /**
      * Button with square aspect ratio.
      *
-     * @type boolean
      * @memberof ButtonCommonProps
      */
     square?: boolean;
     /**
      * The button's variant. Values are filled, transparent, plain.
      *
-     * @type "primary" | "secondary" | "danger" | "warning" | "tertiary"
      * @memberof ButtonCommonProps
      */
     intent?: ButtonIntent;
     /**
      * The variant of the button.
      *
-     * @type "filled" | "transparent"
      * @memberof ButtonCommonProps
      */
     variant?: ButtonVariant;
     /**
      * The size of the button.
      *
-     * @type "small" | "normal" | "large"
      * @memberof ButtonCommonProps
      */
     size?: ButtonSize;
     /**
      * The link to be used for the button.
      *
-     * @type string
      * @memberof ButtonCommonProps
      */
     to?: string;

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

@@ -4,6 +4,16 @@ interface ButtonProps {
     $variant: ButtonVariant;
     $size: ButtonSize;
 }
+/**
+ * Helper to get the needed classname from buttonProps.
+ *
+ * @returns {string} - Classnames for the button
+ */
 export declare const getStyles: () => ({ $intent, $variant }: ButtonProps) => string;
+/**
+ * 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/buttons/star-button/StarButton.d.ts

@@ -3,5 +3,11 @@ 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/card/Card.d.ts

@@ -10,24 +10,28 @@ export interface CardProps extends CommonProps {
     /**
      * Whether the card should have full height or not.
      *
-     * @type boolean
      * @memberof CardProps
      */
     fullHeight?: boolean;
     /**
      * Whether the card should overflow contents.
      *
-     * @type "visible" | "hidden" | "scroll" | "auto"
      * @memberof CardProps
      */
     overflow?: Overflow;
     /**
      *
      * @deprecated Use tailwind based grid layouts instead.
-     * @type string
      * @memberof CardProps
      */
     gridArea?: string;
 }
+/**
+ * The Card component is a container for ui elements.
+ * Is also used for modals etc.
+ *
+ * @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

@@ -11,11 +11,12 @@ interface CardContentProps extends CommonProps {
     children: React.ReactNode | null;
 }
 /**
- * @summary
- * For applying padding and gap to a Card.
+ * The CardBody component should be used to inform the user of important information.
  *
- * @description
- * The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
+ * @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
+ * @returns {JSX.Element} CardBody component
  */
 export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardContentProps) => JSX.Element;
 export {};

package/components/card/CardFooter.d.ts

@@ -9,8 +9,8 @@ interface CardFooterProps extends CommonProps {
  * 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} { dataTestId, className, children, density }
- * @return {*}
+ * @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;
 export {};

package/components/card/CardHeader.d.ts

@@ -7,6 +7,7 @@ interface CardHeaderProps extends CommonProps {
     /**
      * The variant/size of the heading.
      * Same as the `Heading` component.
+     *
      * @default "primary"
      */
     headingVariant?: HeadingVariant;
@@ -20,20 +21,10 @@ interface CardHeaderProps extends CommonProps {
     showSeparator?: boolean;
 }
 /**
- * Header for Cards and Models.
+ * Header for Cards and Modals.
  *
- *
- * @param {CardHeaderProps} {
- *   heading,
- *   headingVariant = "primary",
- *   subHeading,
- *   onClose,
- *   dataTestId,
- *   className,
- *   children,
- *   density,
- * }
- * @return {*}
+ * @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;
 export {};

package/components/card/DensityContainer.d.ts

@@ -1,13 +1,5 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
-/**
- * @summary
- * For applying auto padding and gap to a Card or Modal or whatever.
- *
- * @description
- * Density 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.
- */
 interface ContainerProps extends CommonProps {
     /**
      * The density of the card components.
@@ -15,23 +7,30 @@ interface ContainerProps extends CommonProps {
      * "comfortable" = 16px gap and padding.
      * "spacious" = 16px gap, 26px padding.
      *
-     * @type "none" | "compact" | "comfortable" | "spacious" | "auto"
      * @memberof ContainerProps
      */
     $density?: Density;
     /**
      * Set gap to be 0px (not preferable)
-     * @type boolean
+     *
+     * @memberof ContainerProps
      */
     $disableGap?: boolean;
     /**
      * The flex direction of the Card. Defaults to "column".
      *
-     * @type "row" | "row-reverse" | "column" | "column-reverse"
      * @memberof ContainerProps
      */
     $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 {};