@trackunit/react-components 0.0.36

package/README.md

@@ -0,0 +1,36 @@
+# React components
+
+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. 
+
+### Component generation command example
+`yarn nx workspace-generator react-component MyTestComponent --directory=components --project=react-components --no-interactive`
+
+## 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_
+
+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.
+
+## Stories for components
+
+**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.

package/common/CommonProps.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+export declare type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";

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,8 @@
+export interface IUseContainerProps {
+    className?: string;
+    dataTestId?: string;
+}
+export declare const useContainerProps: ({ className, dataTestId }: IUseContainerProps) => {
+    className: string | undefined;
+    "data-testid": string | undefined;
+};

package/components/NumberField/NumberField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../formGroup/FormGroup";
+import { NumberInputProps } from "../NumberInput/NumberInput";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     *
+     * @type string
+     * @memberof NumberFieldProps
+     */
+    errorMessage?: string;
+}
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../baseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface NumberInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper arround the `BaseInput` component for number input fields.
+ *
+ * *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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../baseInput/BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface TextInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper arround the `BaseInput` component for text input fields.
+ *
+ * *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

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type AlertIntent = "info" | "warning" | "danger" | "success";
+export declare type AlertActionType = "primary" | "secondary";
+export declare type AlertAction = {
+    label: string;
+    onClick: () => void;
+    loading?: boolean;
+};
+export interface AlertProps extends CommonProps {
+    /**
+     * Child nodes.
+     *
+     * @type React.ReactNode
+     * @memberof AlertProps
+     */
+    children: React.ReactNode;
+    /**
+     * Intent of the alert component.
+     *
+     * @type {AlertIntent}
+     * @memberof AlertProps
+     */
+    intent?: AlertIntent;
+    /**
+     * 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;
+    /**
+     * OnClose Event.
+     *
+     * @memberof AlertProps
+     */
+    onClose?: () => void;
+    /**
+     * Whether the contents should be displayed inline or not.
+     *
+     * @type boolean
+     * @memberof AlertProps
+     */
+    inline?: boolean;
+    /**
+     * A prop to enable autoscroll to alert element
+     *
+     * could be used for displaying errors on long scrollable forms
+     *
+     * @type boolean
+     * @memberof AlertProps
+     */
+    autoScroll?: boolean;
+}
+export declare const Alert: ({ intent, 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,74 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type BadgeIntent = "primary" | "secondary" | "success" | "danger" | "warning";
+export declare type BadgeSize = "default" | "large";
+declare type BadgeVariant = "badge" | "pill" | "tag";
+export interface TagProps extends BaseBadgeProps {
+    /**
+     * The name of the variant.
+     *
+     * @type string}
+     * @memberof TagProps
+     */
+    variant: "tag";
+    /**
+     * 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 {
+    /**
+     * The intent of the badge.
+     *
+     * @type {BadgeIntent}
+     * @memberof BadgeProps
+     */
+    intent?: BadgeIntent;
+    /**
+     * Specifies whether the intent style should be subtle or not.
+     *
+     * @type {boolean}
+     * @memberof BadgeProps
+     */
+    subtle?: boolean;
+    /**
+     * Whether badge should be displayed as a pill, tag or badge
+     * pill numeric values above 99 will be displayed as 99+.
+     * tag will display x icon, you have to provide onClose handler
+     *
+     * Badge will use subtle intent by default.
+     *
+     * @type {BadgeVariant}
+     * @memberof BadgeProps
+     */
+    variant?: BadgeVariant;
+    /**
+     * 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.
+     *
+     * @type string
+     * @memberof BadgeProps
+     */
+    className?: string;
+    /**
+     * Child nodes of the Badge.
+     *
+     * @type React.ReactNode
+     * @memberof BadgeProps
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the badge.
+     *
+     * @type {BadgeSize}
+     * @memberof BadgeProps
+     */
+    size?: BadgeSize;
+}
+export declare type BadgeProps = BaseBadgeProps | TagProps;
+export declare const Badge: ({ intent, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
+export {};

package/components/badge/index.d.ts

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

package/components/baseInput/BaseInput.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
+declare type FieldSize = "small" | "default";
+export interface BaseInputProps extends FilteredInputProps, CommonProps {
+    /**
+     * An React element to render before the text in the input.
+     * 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;
+    /**
+     * An React element to render after the text in the input.
+     * 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;
+    /**
+     * An React element to render in a seperate container before the text in the input.
+     * This is typically used to render text.
+     * For icons, please concider using the prefix prop.
+     *
+     * @type React.ReactNode
+     * @memberof BaseInputProps
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * An React element to render in a seperate container after the text in the input.
+     * This is typically used to render text.
+     * For icons, please concider using the suffix prop.
+     *
+     * @type React.ReactNode
+     * @memberof BaseInputProps
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     *  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;
+}
+/**
+ * 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/buttons/button/Button.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { ButtonCommonProps, ButtonIntent, ButtonSize, ButtonType, ButtonVariant } from "../shared/ButtonProps";
+export interface StyledButtonProps {
+    $variant: ButtonVariant;
+    $size: ButtonSize;
+    $square: boolean;
+    $intent: ButtonIntent;
+    $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.
+     *
+     * @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 {ButtonType}
+     * @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>;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { ButtonCommonProps, ButtonSize } from "../shared/ButtonProps";
+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;
+    /**
+     * The element type the button will be rendered as.
+     *
+     * @type {(keyof JSX.IntrinsicElements | React.ComponentType<any>)}
+     * @memberof IconButtonProps
+     */
+    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /**
+     * The size of the button. Defaults to "small".
+     *
+     * @type {("small" | "normal" | "large")}
+     * @memberof IconButtonProps
+     */
+    size?: ButtonSize;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/buttons/index.d.ts

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

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { CommonProps } from "../../../common/CommonProps";
+export declare type ButtonVariant = "filled" | "transparent";
+export declare type ButtonIntent = "primary" | "secondary" | "danger" | "warning" | "tertiary";
+export declare type ButtonType = "button" | "submit";
+export declare type ButtonSize = "small" | "normal" | "large";
+export interface ButtonCommonProps extends CommonProps {
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * 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;
+    title?: string;
+    tabIndex?: number;
+    role?: string;
+}

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

@@ -0,0 +1,9 @@
+import { ButtonIntent, ButtonSize, ButtonVariant } from "../shared/ButtonProps";
+interface ButtonProps {
+    $intent: ButtonIntent;
+    $variant: ButtonVariant;
+    $size: ButtonSize;
+}
+export declare const getStyles: () => ({ $intent, $variant }: ButtonProps) => string;
+export declare const getPadding: () => ({ $size }: ButtonProps) => string;
+export {};

package/components/buttons/star-button/StarButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface StarButtonProps {
+    starred: boolean;
+    onClick: (e: React.MouseEvent) => void;
+}
+export declare const StarButton: ({ starred, onClick }: StarButtonProps) => JSX.Element;
+export {};

package/components/card/Card.d.ts

@@ -0,0 +1,33 @@
+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 {
+    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.
+     *
+     * @type {boolean}
+     * @memberof CardProps
+     */
+    fullHeight?: boolean;
+    /**
+     * Whether the card should overflow contents.
+     *
+     * @type {Overflow}
+     * @memberof CardProps
+     */
+    overflow?: Overflow;
+    /**
+     *
+     * @deprecated Use tailwind based grid layouts instead.
+     * @type {string}
+     * @memberof CardProps
+     */
+    gridArea?: string;
+}
+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,21 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+declare type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
+interface CardContentProps extends CommonProps {
+    overflow?: Overflow;
+    density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    disableGap?: boolean;
+    children: React.ReactNode | null;
+}
+/**
+ * @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
+ */
+export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardContentProps) => JSX.Element;
+export {};

package/components/card/CardFooter.d.ts

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

package/components/card/CardHeader.d.ts

@@ -0,0 +1,39 @@
+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 */
+    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;
+    /** Function to call when the close button is clicked */
+    onClose?: () => void;
+    children?: React.ReactNode | null;
+    accessories?: React.ReactNode;
+    density?: Density;
+    showSeparator?: boolean;
+}
+/**
+ * Header for Cards and Models.
+ *
+ *
+ * @param {CardHeaderProps} {
+ *   heading,
+ *   headingVariant = "primary",
+ *   subHeading,
+ *   onClose,
+ *   dataTestId,
+ *   className,
+ *   children,
+ *   density,
+ * }
+ * @return {*}
+ */
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;
+export {};