@trackunit/custom-field-components 0.0.1-alpha-59a0a75488.0

package/BooleanCustomField.d.ts

@@ -0,0 +1,75 @@
+import { CheckboxProps } from "@trackunit/react-components";
+import * as React from "react";
+import { FieldValues, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { ValidationRules } from "./getValidationRules";
+import { FormGroupExposedProps } from "./types";
+export interface BooleanCustomFieldProps extends Omit<CheckboxProps, "value" | "defaultValue" | "label">, FormGroupExposedProps {
+    /**
+     * A id for the field
+     *
+     * @memberof BooleanCustomFieldProps
+     *
+     */
+    id: string;
+    /**
+     * A value to be displayed by a input field
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    description?: string;
+    /**
+     * A text to be displayed under the input with a short description of field purpose
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    value?: boolean;
+    /**
+     * A default value to be displayed by a input field
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    defaultValue?: boolean;
+    /**
+     * A id that can be used in tests to get the component
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    dataTestId?: string;
+    /**
+     * A custom handler for onChange event
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    /**
+     * A flag that can be used to disable the input, default value is false
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    disabled?: boolean;
+    /**
+     * Used for field validation by React Hook Form library it dynamically set the value of a registered field and have the options to validate and update the form state. At the same time, it tries to avoid unnecessary rerender.
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    setValue?: UseFormSetValue<FieldValues>;
+    /**
+     * This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    register?: UseFormRegister<FieldValues>;
+    /**
+     * Validation rules that can be passed to the field, they can be pass along with error messages. Rules are described here https://react-hook-form.com/api/useform/register
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    validationRules?: ValidationRules;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     *
+     * @memberof BooleanCustomFieldProps
+     */
+    errorMessage?: string;
+}
+export declare const BooleanCustomField: ({ defaultValue, dataTestId, onChange, value, id, setValue, register, validationRules, disabled, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }: BooleanCustomFieldProps) => JSX.Element;

package/BooleanCustomField.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<({ defaultValue, dataTestId, onChange, value, id, setValue, register, validationRules, disabled, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText, ...rest }: import("./BooleanCustomField").BooleanCustomFieldProps) => JSX.Element>;
+export default _default;
+export declare const Playground: ({ id, label, color, defaultValue, value, dataTestId, disabled, description, ...props }: {
+    [x: string]: any;
+    id: any;
+    label: any;
+    color: any;
+    defaultValue: any;
+    value: any;
+    dataTestId: any;
+    disabled: any;
+    description: any;
+}) => JSX.Element;

package/CustomField.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { AbstractValueAndDefinition } from "@trackunit/iris-app-runtime-core";
+import { ValueAndDefinition } from "@trackunit/iris-app-runtime-core-api";
+import { FieldValues, FormState, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { UnitPreference } from "./UnitPreference";
+interface ICustomFieldProps {
+    field: AbstractValueAndDefinition;
+    register: UseFormRegister<FieldValues>;
+    formState: FormState<FieldValues>;
+    setValue: UseFormSetValue<FieldValues>;
+    unitPreference?: UnitPreference;
+    /**
+     * An optional Id to override the definition.key
+     */
+    fieldId?: string;
+}
+export interface ICustomFieldValidation {
+    register: UseFormRegister<FieldValues>;
+    setValue: UseFormSetValue<FieldValues>;
+    formState: FormState<FieldValues>;
+}
+export declare const useCustomFieldResolver: (field: ValueAndDefinition, validation: ICustomFieldValidation, unitPreference?: UnitPreference, fieldId?: string) => JSX.Element | null;
+export declare const CustomField: ({ field, register, formState, setValue, unitPreference, fieldId }: ICustomFieldProps) => JSX.Element | null;
+export {};

package/DateCustomField.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { DateFieldProps } from "@trackunit/react-components";
+import { FieldValues, RegisterOptions, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { FormGroupExposedProps } from "./types";
+export interface DateCustomFieldProps extends Omit<DateFieldProps, "label">, FormGroupExposedProps {
+    /**
+     * A id for the field
+     *
+     * @memberof DateCustomFieldProps
+     */
+    id: string;
+    /**
+     * Used for field validation by React Hook Form library it dynamically set the value of a registered field and have the options to validate and update the form state. At the same time, it tries to avoid unnecessary rerender.
+     *
+     * @memberof DateCustomFieldProps
+     */
+    setValue?: UseFormSetValue<FieldValues>;
+    /**
+     * This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.
+     *
+     * @memberof DateCustomFieldProps
+     */
+    register?: UseFormRegister<FieldValues>;
+    /**
+     * Validation rules that can be passed to the field, they can be pass along with error messages. Rules are described here https://react-hook-form.com/api/useform/register
+     *
+     * @memberof DateCustomFieldProps
+     */
+    validationRules?: RegisterOptions;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     *
+     * @memberof DateCustomFieldProps
+     */
+    errorMessage?: string;
+    /**
+     * A boolean flag to set a component into invalid state
+     * which means that selected value is breaking validation rules
+     *
+     * @memberof DateCustomFieldProps
+     */
+    isInvalid?: boolean;
+}
+export declare const DateCustomField: (props: DateCustomFieldProps) => JSX.Element;

package/DropdownCustomField.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { FieldValues, RegisterOptions, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { FormGroupExposedProps } from "./types";
+export interface DropdownCustomFieldProps extends FormGroupExposedProps {
+    /**
+     * A id for the field
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    id: string;
+    /**
+     * A text to be displayed under the input with a short description of field purpose
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    description?: string;
+    /**
+     * A default value to be displayed by a input field
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    defaultValue?: string[];
+    /**
+     * A id that can be used in tests to get the component
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    dataTestId?: string;
+    /**
+     * A custom handler for onChange event
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    onChange?: OnChange;
+    /**
+     * A flag that can be used to disable the dropdown, default value is false
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    disabled?: boolean;
+    /**
+     * A flag that can be used to enable multiselect mode, default value is false
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    multiSelect?: boolean;
+    /**
+     * An array of values to select for
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    allValues: string[] | undefined;
+    /**
+     * Used for field validation by React Hook Form library it dynamically set the value of a registered field and have the options to validate and update the form state. At the same time, it tries to avoid unnecessary rerender.
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    setValue?: UseFormSetValue<FieldValues>;
+    /**
+     * This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    register?: UseFormRegister<FieldValues>;
+    /**
+     * Validation rules that can be passed to the field, they can be pass along with error messages. Rules are described here https://react-hook-form.com/api/useform/register
+     *
+     * @memberof  DropdownCustomFieldProps
+     */
+    validationRules?: RegisterOptions;
+    /**
+     * A custom handler for the onBlur event
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    onBlur?: OnBlur;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    errorMessage?: string;
+    /**
+     * A boolean flag to set a component into invalid state
+     * which means that selected value is breaking validation rules
+     *
+     * @memberof DropdownCustomFieldProps
+     */
+    isInvalid?: boolean;
+}
+declare type OnChange = (event?: React.ChangeEvent<HTMLInputElement>) => void;
+declare type OnBlur = (event: React.FocusEvent<HTMLDivElement>) => void;
+export declare const DropdownCustomField: ({ defaultValue, dataTestId, onChange, onBlur, id, disabled, allValues, multiSelect, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }: DropdownCustomFieldProps) => JSX.Element;
+export {};

package/DropdownCustomField.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<({ defaultValue, dataTestId, onChange, onBlur, id, disabled, allValues, multiSelect, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }: import("./DropdownCustomField").DropdownCustomFieldProps) => JSX.Element>;
+export default _default;
+export declare const Playground: ({ id, label, color, defaultValue, dataTestId, disabled, description, multiSelect, ...props }: {
+    [x: string]: any;
+    id: any;
+    label: any;
+    color: any;
+    defaultValue: any;
+    dataTestId: any;
+    disabled: any;
+    description: any;
+    multiSelect: any;
+}) => JSX.Element;

package/README.md

@@ -0,0 +1,18 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit Custom Field Components
+
+The `@trackunit/custom-field-components` package contains UI components specifically for use with Custom Fields within [the Trackunit Manager platform](https://www.trackunit.com/services/manager/) and [`@trackunit/iris-app`](https://www.npmjs.com/package/@trackunit/iris-app).
+
+
+To browse all avaliable components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## 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.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/UnitPreference.d.ts

@@ -0,0 +1 @@
+export declare type UnitPreference = "SI" | "US_CUSTOMARY";

package/getValidationRules.d.ts

@@ -0,0 +1,11 @@
+import { BooleanFieldDefinition, DateFieldDefinition, DropDownFieldDefinition, EmailFieldDefinition, NumberFieldDefinition, PhoneNumberFieldDefinition, StringFieldDefinition, WebAddressFieldDefinition } from "@trackunit/iris-app-runtime-core-api";
+import { RegisterOptions } from "react-hook-form";
+export declare type ValidationRules = RegisterOptions;
+export declare const getWebAddressValidationRules: (definition: WebAddressFieldDefinition) => ValidationRules;
+export declare const getNumberValidationRules: (definition: NumberFieldDefinition) => ValidationRules;
+export declare const getStringValidationRules: (definition: StringFieldDefinition) => ValidationRules;
+export declare const getBooleanValidationRules: (definition: BooleanFieldDefinition) => ValidationRules;
+export declare const getDropdownValidationRules: (definition: DropDownFieldDefinition) => ValidationRules;
+export declare const getDateValidationRules: (definition: DateFieldDefinition) => ValidationRules;
+export declare const getEmailValidationRules: (definition: EmailFieldDefinition) => ValidationRules;
+export declare const getPhoneNumberValidationRules: (definition: PhoneNumberFieldDefinition) => ValidationRules;

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CustomField";
+export * from "./UnitPreference";