@luscii-healthtech/web-ui 2.3.0 → 2.4.1

package/dist/components/Form/Form.d.ts

@@ -1,9 +1,19 @@
 /// <reference types="react" />
-import { FormProps } from "./form.types";
+import { FormProps, GenericFormProps } from "./form.types";
 /**
- * Create a straight forward Form.
+ * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
- * TODO: wrap this in some Page component to style the div and buttons
- * WARNING: don't use this component before some styling errors are resolved.
+ * You will probably don't want to use this component for now, given that the button is hardcoded.
+ * This is an example for the Form for now, though it could be improved to enforce further unification.
+ *
+ * TODO: make the buttons configurable.
+ */
+export declare function GenericForm<TFieldValues>({ fields, onValid, onError, defaultValues, }: GenericFormProps<TFieldValues>): JSX.Element;
+/**
+ * Creates a Form based on the fields input.
+ *
+ * Expects the results of the useForm hook to be injected into the useFormReturn parameter.
+ *
+ * This allows you to use and modify the useFormReturn before injecting it here.
  */
-export declare function Form<TFieldValues>({ fields, onValid, onError, defaultValues, }: FormProps<TFieldValues>): JSX.Element;
+export declare function Form<TFieldValues, TContext>({ fields, useFormReturn, }: FormProps<TFieldValues, TContext>): JSX.Element;

package/dist/components/Form/form.types.d.ts

@@ -1,15 +1,19 @@
-import { Control, DeepPartial, FieldErrors, FieldPath, FieldValues, RegisterOptions, SubmitErrorHandler, SubmitHandler } from "react-hook-form";
+import { Control, DeepPartial, FieldErrors, FieldPath, FieldValues, RegisterOptions, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
 import React, { HTMLInputTypeAttribute } from "react";
 import { InputProps } from "../Input/Input";
 import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
 import { SelectProps } from "../Select/SelectV2";
 export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
-export interface FormProps<TFieldValues extends FieldValues> {
+export interface GenericFormProps<TFieldValues extends FieldValues> {
     fields: (FormFieldProps<TFieldValues> | FormFieldRowProps<TFieldValues>)[];
     onValid: SubmitHandler<TFieldValues>;
     onError?: SubmitErrorHandler<TFieldValues>;
     defaultValues?: DeepPartial<TFieldValues>;
 }
+export interface FormProps<TFieldValues extends FieldValues, TContext> {
+    fields: (FormFieldProps<TFieldValues> | FormFieldRowProps<TFieldValues>)[];
+    useFormReturn: UseFormReturn<TFieldValues, TContext>;
+}
 interface FormFieldGenericProps<TFieldType, TFieldValues> extends FormFieldDecoratorProps {
     name: FieldPath<TFieldValues>;
     options?: RegisterOptions;

package/dist/components/Icons/WarningIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IconProps } from "./types/IconProps.type";
+export declare const WarningIcon: React.VoidFunctionComponent<IconProps>;

package/dist/components/Icons/types/IconProps.type.d.ts

@@ -2,4 +2,5 @@
 export interface IconProps {
     className?: string;
     onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
+    "data-test-id"?: string;
 }

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Toaster.scss";
+export interface ToasterProps {
+    type: "success" | "failure";
+    message: string;
+    title: string;
+    isVisible?: boolean;
+    /** if you need to reposition the toaster for whatever reason you can use these props */
+    styleOverwrite?: Pick<React.CSSProperties, "top" | "bottom" | "left" | "right">;
+}
+export declare const TOASTER_TYPE_OPTIONS: {
+    readonly SUCCESS: "success";
+    readonly FAILURE: "failure";
+};
+export declare type ToasterType = typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
+declare const Toaster: React.VoidFunctionComponent<ToasterProps>;
+export default Toaster;

package/dist/components/Toaster/toast-elements-getter.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="node" />
+interface GetToasterElementsParams {
+    timeoutId: NodeJS.Timeout;
+    progressBarAnimationFrameHandler: number;
+}
+interface GetToasterElementsReturn {
+    toasterElementMessage: HTMLElement;
+    toasterProgressBar: HTMLElement;
+    toasterElementTitle: HTMLElement;
+    toasterElementSuccessIcon: HTMLElement;
+    toasterElementFailureIcon: HTMLElement;
+    toasterElementContainer: HTMLElement;
+    toasterCloseButton: HTMLElement;
+}
+/**
+ *
+ * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
+ * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
+ * @returns a collection of html elements to be manipulated by the animation
+ */
+export declare const getToasterElements: (params: GetToasterElementsParams) => GetToasterElementsReturn;
+export {};

package/dist/components/Toaster/toast-progress-animator.d.ts

@@ -0,0 +1,12 @@
+interface AnimateProgressParams {
+    animationDuration: number;
+    progressBarElement: HTMLElement;
+}
+/**
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+ * @param params.animationDuration - the amount of seconds the duration will take
+ * @param params.progressBarElement - the html element for the progress bar
+ * @returns the animation frame id
+ */
+export declare const animateProgress: (params: AnimateProgressParams) => number;
+export {};

package/dist/components/Toaster/toast.d.ts

@@ -0,0 +1,12 @@
+declare type ToastParams = {
+    message: string;
+    title?: string;
+    showIcon?: boolean;
+    type: "success" | "failure";
+} | string;
+export declare const toast: {
+    (params: ToastParams): void;
+    error(message: string): void;
+    info(message: string): void;
+};
+export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { default as Acknowledgement, ACKNOWLEDGEMENT_TYPE_OPTIONS, } from "./components/Acknowledgement/Acknowledgement";
+export { default as Toaster, TOASTER_TYPE_OPTIONS, } from "./components/Toaster/Toaster";
+export { toast } from "./components/Toaster/toast";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
 export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition, } from "./components/ButtonV2/ButtonProps.type";
@@ -34,9 +35,12 @@ export { PageSize as PaginationMenuPageSize, OnPaginationChange as OnPaginationM
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { RadioProps, RadioV2 } from "./components/Radio/RadioV2";
+export { RadioGroupProps, RadioGroupV2, } from "./components/RadioGroup/RadioGroupV2";
 export { default as Section } from "./components/Section/Section";
 export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { default as SectionItem, SectionItemProps, } from "./components/Section/SectionItem";
+export { SelectProps, Select } from "./components/Select/SelectV2";
 export { SettingsMenuButton, SettingsMenuButtonProps, } from "./components/SettingsMenuButton/SettingsMenuButton";
 export { Spinner } from "./components/Spinner/Spinner";
 export { Steps } from "./components/Steps/Steps";
@@ -56,8 +60,8 @@ export { Timeline } from "./components/Timeline/Timeline";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
-export { Form } from "./components/Form/Form";
-export { FormProps } from "./components/Form/form.types";
+export { GenericForm, Form } from "./components/Form/Form";
+export { GenericFormProps, FormProps } from "./components/Form/form.types";
 export { IconProps } from "./components/Icons/types/IconProps.type";
 export { AddIcon } from "./components/Icons/AddIcon";
 export { AlertsIcon } from "./components/Icons/AlertsIcon";

package/dist/web-ui-tailwind.css

@@ -969,6 +969,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1001,6 +1005,11 @@ video {
   border-bottom-left-radius: 0.25rem;
 }
 
+.rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1449,6 +1458,10 @@ video {
   margin-right: 0;
 }
 
+.max-h-19 {
+  max-height: 4.75rem;
+}
+
 .max-h-78 {
   max-height: 19.5rem;
 }
@@ -1461,6 +1474,10 @@ video {
   max-width: 48rem;
 }
 
+.min-h-13 {
+  min-height: 3.25rem;
+}
+
 .min-w-24 {
   min-width: 1.5rem;
 }
@@ -1693,6 +1710,10 @@ video {
   right: 0;
 }
 
+.bottom-0 {
+  bottom: 0;
+}
+
 .left-0 {
   left: 0;
 }
@@ -2041,6 +2062,10 @@ video {
   width: 20rem;
 }
 
+.w-104 {
+  width: 26rem;
+}
+
 .w-200 {
   width: 50rem;
 }
@@ -2108,6 +2133,10 @@ video {
   transition-property: opacity;
 }
 
+.transition-transform {
+  transition-property: transform;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }