@trackunit/react-form-components 0.0.1

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@trackunit/react-form-components",
+  "version": "0.0.1",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "@trackunit/react-components": "0.1.77",
+    "@trackunit/tailwind-styled-components": "0.0.55",
+    "react": "18.2.0",
+    "uuid": "8.3.2",
+    "date-fns": "2.29.3",
+    "libphonenumber-js": "1.10.24",
+    "react-select": "5.7.0",
+    "@trackunit/i18n-library-translation": "0.0.37"
+  },
+  "module": "./index.js",
+  "main": "./index.cjs",
+  "type": "module",
+  "types": "./src/index.d.ts",
+  "peerDependencies": {}
+}

package/src/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
+type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+type FieldSize = "small" | "medium";
+interface ActionButtonProps extends ButtonCommonProps, CommonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: ActionType;
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+    /**
+     *  The size of the icon.
+     */
+    iconSize?: FieldSize;
+}
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
+export {};

package/src/components/ActionButton/index.d.ts

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

package/src/components/BaseInput/BaseInput.d.ts

@@ -0,0 +1,62 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
+type FieldSize = "small" | "medium";
+export interface BaseInputProps extends FilteredInputProps, CommonProps {
+    /**
+     * A React element to render before the text in the input.
+     * This is typically used to render an icon.
+     * For elements other than icons, please consider using the addonBefore prop.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * A React element to render after the text in the input.
+     * This is typically used to render an icon.
+     * For other elements than icons, please consider using the addonAfter prop.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * A React element to render in a separate container before the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the prefix prop.
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * A React element to render in a separate container after the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the suffix prop.
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * A 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;
+    /**
+     *  The size of the input.
+     *  Default == 40px, Small == 32px.
+     */
+    fieldSize?: FieldSize;
+    /**
+     * If true the field is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * The Placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * 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/src/components/BaseInput/index.d.ts

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

package/src/components/Checkbox/CheckIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+interface CheckIconProps extends CommonProps {
+}
+/**
+ * The CheckIcon component is used by the checkbox to display the checked state.
+ *
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
+ */
+export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => JSX.Element;
+export {};

package/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,48 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A string element to be displayed as a label
+     */
+    label?: React.ReactNode;
+    /**
+     * Children to be displayed
+     */
+    children?: React.ReactNode;
+    /**
+     * An boolean flag to set checkbox to checked state
+     */
+    checked?: boolean;
+    /**
+     * An boolean flag to set checkbox to disabled state
+     */
+    disabled?: boolean;
+    /**
+     * An boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+    /**
+     * An boolean flag to set checkbox to readonly mode
+     */
+    readOnly?: boolean;
+    /**
+     * An boolean flag to set checkbox to intermediate state
+     */
+    indeterminate?: boolean;
+}
+/**
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/Checkbox/IndeterminateIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
+ *
+ * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
+ * @returns {JSX.Element} IndeterminateIcon component
+ */
+export declare const IndeterminateIcon: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

package/src/components/Checkbox/index.d.ts

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

package/src/components/DateField/DateField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    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/src/components/DateInput/DateInput.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A min value with type Date added
+     */
+    min?: Date | string | number;
+    /**
+     * A max value with type Date added
+     */
+    max?: Date | string | number;
+    /**
+     * A default value with type Date added
+     */
+    defaultValue?: Date | string | number;
+    /**
+     * A value with type Date added
+     */
+    value?: Date | string | number;
+}
+/**
+ * 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/src/components/DropZone/DropZone.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { CommonProps, Size } from "@trackunit/react-components";
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
+export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
+    /**
+     * A string to set the label in Drop Zone.
+     */
+    label: string;
+    /**
+     * A flag to disable the drop zone.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the dropZone
+     * small - padding:8px, medium - padding:16px large - padding:32px
+     */
+    size?: Size;
+    /**
+     * The files dropped can be accessed within filesSelected
+     *
+     * @param file
+     * @returns
+     */
+    filesSelected: (file: FileList) => void;
+}
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, ...rest }: DropZoneProps) => JSX.Element;
+export {};

package/src/components/EmailField/EmailField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+export declare const EmailField: import("react").ForwardRefExoticComponent<EmailFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/EmailInput/EmailInput.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { BaseInputProps } from "../BaseInput";
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/EmailInput/index.d.ts

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

package/src/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,39 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export interface FormGroupProps extends CommonProps {
+    /**
+     * The label for the form group.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Content to display in the tooltip when hovering the ? icon next to the label.
+     */
+    tip?: string | React.ReactNode;
+    htmlFor?: string;
+    /**
+     * A string to display under the input element to help the user understand the input.
+     */
+    helpText?: string | null;
+    /**
+     * An addon element to render to the right under the input element.
+     * Used for displaying maxLength etc.
+     */
+    helpAddon?: string | React.ReactNode;
+    /**
+     * If true the input is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * If true interactions are disabled
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ *
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
+ */
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled, }: FormGroupProps) => JSX.Element;

package/src/components/Label/Label.d.ts

@@ -0,0 +1,34 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./Label.css";
+export interface LabelProps extends CommonProps {
+    /**
+     * ID of the label.
+     */
+    id?: string;
+    /**
+     * Specifies the element to which the label belongs to.
+     */
+    htmlFor?: string;
+    /**
+     * The label value.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the label is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;

package/src/components/Label/index.d.ts

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

package/src/components/NumberField/NumberField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { NumberInputProps } from "../NumberInput/NumberInput";
+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.
+     */
+    errorMessage?: string;
+}
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface NumberInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around 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/src/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { PhoneInputProps } from "../PhoneInput/PhoneInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from "react";
+import { CountryCode } from "./CountryCodes";
+interface CountryCodeSelectProps {
+    excludedCountries?: CountryCode;
+    countryCode?: string;
+    setCountryCode: Dispatch<SetStateAction<string | undefined>>;
+    isInvalid?: boolean;
+}
+/**
+ * The CountryCodeSelect component is used to select a country code for a phone number.
+ *
+ * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
+ * @returns {JSX.Element} CountryCodeSelect component
+ */
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, setCountryCode, }: CountryCodeSelectProps) => JSX.Element;
+export {};

package/src/components/PhoneInput/CountryCodes.d.ts

@@ -0,0 +1,5 @@
+export declare const countryCodes: {
+    label: string;
+    value: string;
+}[];
+export type CountryCode = typeof countryCodes;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
+export interface PhoneInputProps extends BaseInputExposedProps {
+    /**
+     * To disable the action button.
+     *
+     * @default false
+     * @memberof PhoneInputProps
+     * @example
+     * <PhoneInput disableAction />
+     */
+    disableAction?: boolean;
+}
+/**
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
+ *
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneInput component.
+ */
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/index.d.ts

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

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,57 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./RadioGroup.css";
+export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     */
+    children: React.ReactNode;
+    /**
+     * The id of the radio group.
+     */
+    id: string;
+    /**
+     * onChange handler for the radio group.
+     */
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * The value of the radio group.
+     */
+    value: string | number;
+    /**
+     * The name of the radio group.
+     */
+    name?: string;
+    /**
+     * The label of the radio group.
+     */
+    label?: string;
+    /**
+     * Whether the radiogroup is inline or not.
+     */
+    inline?: boolean;
+    /**
+     * Whether the radio group is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {JSX.Element} RadioGroup component
+ */
+export declare const RadioGroup: {
+    ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};

package/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface RadioGroupContextProps {
+    id: string;
+    name: string;
+    value: string | number;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
+export {};

package/src/components/RadioGroup/RadioItem.d.ts

@@ -0,0 +1,23 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export interface RadioItemProps extends CommonProps {
+    /**
+     * The label of the radio item.
+     */
+    label: React.ReactNode;
+    /**
+     * The value of the radio item.
+     */
+    value: string | number;
+    /**
+     * The description of the radio item.
+     */
+    description?: string;
+}
+/**
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
+ */
+export declare const RadioItem: ({ label, value, dataTestId, className, description }: RadioItemProps) => JSX.Element;

package/src/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioGroup";
+export * from "./RadioItem";