@luscii-healthtech/web-ui 0.0.0-alpha.2fcd0e9

package/dist/components/Page/CRUDPage.types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import type { PageHeaderProps } from "../PageHeader";
+import type { StepsProps } from "../Steps/Steps";
+type CRUDPageButtonProps = Pick<BaseButtonProps, "onClick" | "text">;
+type CRUDPageTitle = {
+    text: string;
+    icon?: string;
+};
+type CRUDPageHeader = Omit<PageHeaderProps, "navigation" | "isPolling" | "accessories">;
+type CRUDPagePropsWithoutHeaderOrTitle = {
+    dataTestId?: string;
+    submitButtonProps?: CRUDPageButtonProps;
+    cancelButtonProps?: CRUDPageButtonProps;
+    className?: string;
+    isLoading?: boolean;
+    isSubmitting?: boolean;
+    children?: React.ReactNode;
+    steps?: {
+        titles: StepsProps["orderedStepTitles"];
+        currentStep: StepsProps["currentStep"];
+        localization: StepsProps["localization"];
+    };
+};
+export type CRUDPageProps = (CRUDPagePropsWithoutHeaderOrTitle & {
+    title: CRUDPageTitle;
+    header?: never;
+}) | (CRUDPagePropsWithoutHeaderOrTitle & {
+    header: CRUDPageHeader;
+    title?: never;
+});
+export {};

package/dist/components/Page/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Page } from "./Page";
+export { default as CRUDPage } from "./CRUDPage";
+export type { CRUDPageProps } from "./CRUDPage.types";

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PageHeaderProps } from "./PageHeader.types";
+declare const PageHeader: React.FC<PageHeaderProps>;
+export default PageHeader;

package/dist/components/PageHeader/PageHeader.types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { BreadcrumbProps } from "../Breadcrumbs";
+import { NotificationBannerColor } from "../NotificationBanner/NotificationBanner";
+import type { TabbarProps } from "../Tabbar/Tabbar";
+type Nil = null | undefined;
+type WithPageHeaderBanner = {
+    banner: Nil | {
+        title?: string;
+        text: {
+            content: string;
+            isHTML?: boolean;
+        };
+        color: NotificationBannerColor;
+        noBorder?: boolean | null;
+    };
+};
+export type PageHeaderProps = {
+    navigation?: Omit<TabbarProps, "withoutPadding">;
+    breadcrumbs?: BreadcrumbProps["crumbs"];
+    truncateBreadcrumbsAfter?: number;
+    dataTestId?: string;
+    title: string;
+    isPolling?: boolean;
+    className?: string;
+    contained?: boolean;
+    accessories?: React.ReactNode;
+} & WithPageHeaderBanner;
+export {};

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PageHeader } from "./PageHeader";
+export type { PageHeaderProps } from "./PageHeader.types";

package/dist/components/PaginationMenu/PaginationMenu.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PaginationMenuProps } from "./PaginationMenu.types";
+export declare const PaginationMenu: (props: PaginationMenuProps) => JSX.Element;

package/dist/components/PaginationMenu/PaginationMenu.types.d.ts

@@ -0,0 +1,37 @@
+export interface PaginationMenuProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+    localization?: Localization;
+    resultCount?: number;
+    small?: boolean;
+    className?: string;
+}
+export interface PaginationMenuSmallProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+}
+export interface PaginationMenuLargeProps {
+    pageCount: number;
+    currentPageNumber: number;
+    onChange: OnPaginationChange;
+    pageSize?: PageSize;
+    localization: Localization;
+    resultCount?: number;
+}
+export type OnPaginationChange = (pageNumber: number, pageSize?: PageSize) => void;
+export type PageSize = 25 | 50 | 75 | 100;
+export interface Localization {
+    display: string;
+    page: string;
+    previous: string;
+    next: string;
+    of: string;
+}
+export type Option = {
+    value: number;
+    label: string;
+};

package/dist/components/PaginationMenu/PaginationMenu.utils.d.ts

@@ -0,0 +1,15 @@
+import { Localization, Option, PageSize } from "./PaginationMenu.types";
+export declare const PAGE_SIZE_OPTIONS: {
+    label: string;
+    value: PageSize;
+}[];
+export declare const getPageNumberOptions: (pageCount: number) => Option[];
+/**
+ *
+ * @returns When the pageSize and resultCount params are present,
+ * this function returns a text indicating the range of elements that are being displayed,
+ * otherwise it returns a text indicating the current page and the page count.
+ * @example 1-50 of 100
+ *
+ */
+export declare const getSummaryText: (pageCount: number, currentPageNumber: number, localization: Localization, pageSize?: number, resultCount?: number) => string;

package/dist/components/PaginationMenu/PaginationMenuLarge.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PaginationMenuLargeProps } from "./PaginationMenu.types";
+export declare const PaginationMenuLarge: (props: PaginationMenuLargeProps) => JSX.Element;

package/dist/components/PaginationMenu/PaginationMenuSmall.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PaginationMenuSmallProps } from "./PaginationMenu.types";
+export declare const PaginationMenuSmall: (props: PaginationMenuSmallProps) => JSX.Element;

package/dist/components/PreviewPhone/PreviewPhone.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PreviewPhoneProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const PreviewPhone: ({ className, children, }: PreviewPhoneProps) => JSX.Element;
+export default PreviewPhone;

package/dist/components/Radio/RadioV2.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./RadioV2.css";
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+    value: string | number;
+    text?: string;
+    info?: string;
+    isError?: boolean;
+    innerRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * TODO: The CSS styling is all messed up, including isError
+ * Warning: don't use this prop before this is resolved
+ * Issue to track: https://github.com/Luscii/web-ui/issues/57
+ * TODO: remove this comment once this is resolved
+ */
+export declare const RadioV2: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/RadioGroup/RadioGroupV2.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { RadioProps } from "../Radio/RadioV2";
+export interface RadioGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "checked"> {
+    name: string;
+    isError?: boolean;
+    options: Omit<RadioProps, "name">[];
+    innerRef?: React.Ref<HTMLInputElement>;
+    title?: string;
+}
+export declare const RadioGroupV2: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { ButtonProps } from "../Button/Button.types";
+import { LoadingIndicatorProps } from "../LoadingIndicator/LoadingIndicator";
+import { RestPropped } from "../../types/general.types";
+import "./Section.scss";
+export interface SectionProps extends RestPropped {
+    title?: string;
+    /**
+     * @deprecated
+     * Use the `headerAside` prop to render any button(s)
+     * or other component(s) automatically in the correct area.
+     */
+    buttons?: ButtonProps[];
+    footer?: React.ReactNode;
+    className?: string;
+    isLoading?: boolean;
+    loadingIndicatorProps?: LoadingIndicatorProps;
+    children?: React.ReactNode;
+    /**
+     * Rendered opposite of the `title`.
+     */
+    headerAside?: React.ReactNode;
+}
+export declare function Section({ title, buttons, footer, children, headerAside, className, isLoading, loadingIndicatorProps, ...restProps }: SectionProps): JSX.Element;
+export default Section;

package/dist/components/Section/SectionItem.d.ts

@@ -0,0 +1,9 @@
+import React, { SyntheticEvent } from "react";
+import "./SectionItem.scss";
+export interface SectionItemProps {
+    className?: string;
+    onClick?: (event: SyntheticEvent) => void;
+    children?: React.ReactNode;
+}
+export declare const SectionItem: React.FC<SectionItemProps>;
+export default SectionItem;

package/dist/components/Section/SectionItemWithContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SectionItemProps } from "./SectionItem";
+interface SectionItemWithContentProps extends Omit<SectionItemProps, "children"> {
+    text: string;
+    icon?: string;
+    iconClass?: string;
+}
+declare function SectionItemWithContent(props: SectionItemWithContentProps): JSX.Element;
+export default SectionItemWithContent;

package/dist/components/Section/subcomponents/SectionActions.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * Use in the aside of a header section. Spaces out the action
+ * components correctly in relation to the styling of the Section component.
+ *
+ * @usage
+ * ```tsx
+ * <Section
+ *   title="My section title"
+ *   headerAside={
+ *     <SectionActions>
+ *       <PrimaryButton />
+ *       <SecondaryButton />
+ *     </SectionActions>
+ *   }
+ * >
+ *   <Text>Content that is shown in the expandable "body" of the section.</Text>
+ * </Section>
+ * ```
+ */
+export declare const SectionActions: React.FC<React.PropsWithChildren>;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,46 @@
+import { GroupBase, Props } from "react-select";
+import React from "react";
+/**
+ * Exceptional case for this file:
+ * We use postcss-url to inline and base64 our image assets.
+ * But the library can only see as far as css files.
+ * When javascript gets in the way (react-select uses a package called `emotion` for styles), postcss-url cannot
+ * bundle the svg assets used here, and we end up with some broken style.
+ */
+import "./Select.scss";
+import { FormFieldWidth } from "../Form/form.types";
+interface OptionMinimal {
+    value: any;
+    label?: string;
+}
+export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
+    /**
+     * Whether to show the component in error state.
+     */
+    isError?: boolean;
+    /**
+     * The maximum width the component will take.
+     */
+    width?: FormFieldWidth;
+    /**
+     * REASON: this could be a ticket to fix later on, but react-select has some tricky types to navigate
+     * imo there's little to no value spending time on fixing it properly since it already works.
+     *
+     * This change is protected by policy: https://app.glassfrog.com/organizations/13950/orgnav/policies/12870328
+     */
+    value?: any;
+}
+/**
+ * A wrapper around react-select to style it according to our design specification.
+ *
+ * In addition, the value is taken out of the option instead of returning the complete option.
+ *
+ * Care when using grouped options: The value of the options spanning all groups needs to be unique!
+ * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
+ * This is a problem within react-select itself, not our wrapper.
+ *
+ * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
+ * So far there wasn't a use case for this.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<OptionMinimal, boolean, GroupBase<OptionMinimal>> & React.RefAttributes<unknown>>;
+export {};

package/dist/components/Select/SelectDropdownIndicator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DropdownIndicatorProps } from "react-select";
+export declare const SelectDropdownIndicator: (props: DropdownIndicatorProps) => JSX.Element;

package/dist/components/Select/SelectLoadingIndicator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LoadingIndicatorProps } from "react-select";
+export declare const SelectLoadingIndicator: (props: LoadingIndicatorProps) => JSX.Element;

package/dist/components/SettingsMenuButton/SettingsMenuButton.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { IconProps } from "../Icons/types/IconProps.type";
+interface ConfigurationItem<ExtraDataType extends object> {
+    itemId: string;
+    itemName: string;
+    on: boolean;
+    /** Additional info that can be used by the parent component */
+    extra?: ExtraDataType;
+}
+export interface SettingsMenuButtonProps<ExtraDataType extends object = Record<string, unknown>> {
+    configuration: ConfigurationItem<ExtraDataType>[];
+    onConfigurationChange: (newConfig: ConfigurationItem<ExtraDataType>) => void;
+    shiftMenuTo?: "right" | "right-md" | "left" | "left-md";
+    buttonTitle?: string;
+    menuTitle?: string;
+    iconComponent: React.FunctionComponent<IconProps>;
+}
+export declare const SettingsMenuButton: <ExtraDataType extends object = Record<string, unknown>>(props: SettingsMenuButtonProps<ExtraDataType>) => React.ReactElement;
+export {};

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SpinnerProps {
+    className?: string;
+}
+export declare const Spinner: (props: SpinnerProps) => React.JSX.Element;
+export {};

package/dist/components/Steps/Step.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface StepProps {
+    title: string;
+    stepNumber: number;
+    active: boolean;
+    localization: {
+        step: string;
+    };
+}
+export declare const Step: ({ title, stepNumber, active, localization, }: StepProps) => JSX.Element;

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface StepsProps {
+    orderedStepTitles: Array<string>;
+    currentStep: number;
+    className?: string;
+    localization: {
+        step: string;
+    };
+}
+export declare const Steps: ({ orderedStepTitles, currentStep, className, localization, }: StepsProps) => JSX.Element;

package/dist/components/TabLinks/TabLinks.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { NavigateFn, WindowLocation } from "@reach/router";
+interface TabLinkItem {
+    url: URL;
+    text: string;
+}
+interface TabLinksProps {
+    patientUuid: string;
+    items: Array<TabLinkItem>;
+    navigate: NavigateFn;
+    location: WindowLocation;
+}
+declare const TabLinks: ({ patientUuid, items, navigate, location, }: TabLinksProps) => JSX.Element;
+export default TabLinks;

package/dist/components/Tabbar/Tabbar.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TabItemDetails } from "./TabbarItem";
+export interface TabbarProps<T extends object = Record<string, unknown>> {
+    tabs?: TabItemDetails<T>[];
+    selectedIndex?: number;
+    onSelect?: (params: {
+        index: number;
+        selectedTab: TabItemDetails<T>;
+    }) => void;
+    className?: string;
+    /**
+     * If this component is being used on a container that will handle spacing, this option disables the padding, allowing the container to take over spacing.
+     */
+    withoutPadding?: boolean;
+}
+export { TabItemDetails };
+export declare const Tabbar: <T extends object = Record<string, unknown>>({ tabs, selectedIndex, onSelect, className, withoutPadding, }: TabbarProps<T>) => JSX.Element;
+export default Tabbar;

package/dist/components/Tabbar/TabbarItem.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface TabItemDetails<T extends object = Record<string, unknown>> {
+    title: string | JSX.Element;
+    badgeCount?: number;
+    isLoading?: boolean;
+    dataTestId?: string;
+    extra?: T;
+}
+export interface TabbarItemProps<T extends object = Record<string, unknown>> extends TabItemDetails<T> {
+    index: number;
+    isSelected?: boolean;
+    onSelect?: (index: number) => void;
+    className?: string;
+}
+declare const TabbarItem: <T extends object = Record<string, unknown>>({ title, index, isSelected, onSelect, className, badgeCount, isLoading, dataTestId, }: TabbarItemProps<T>) => JSX.Element;
+export default TabbarItem;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
+import { TableFieldConfig } from "./Table.types";
+export interface TableProps<Item> extends React.HTMLAttributes<HTMLTableElement> {
+    items?: Item[];
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyRowsText: string;
+    emptyFieldContentText?: string;
+    isLoading?: boolean;
+    showHeader?: boolean;
+    paginationMenuProps?: PaginationMenuProps;
+    onRowClick?: (item: Item) => void;
+    className?: string;
+    dataTestId?: string;
+}
+export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, ...otherAttributes }: TableProps<Item>): JSX.Element;

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import { TagColorTheme } from "../Tag/Tag";
+type TableFieldConfigBase = {
+    key: string;
+    headerText?: string;
+    onlyShowContentOnHovering?: boolean;
+};
+type TableFieldConfigWithContent<Item> = TableFieldConfigBase & {
+    content: (item: Item) => TableFieldContent<Item>;
+    render?: never;
+};
+type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
+    render: (item: Item) => JSX.Element;
+    content?: never;
+};
+/**
+ * By adding the `content` property, it will use an opinionated layout with the <Text /> and optionally the <Tag /> component.
+ * By adding the `render` property, it will render any component returned in the function, based on the item (with type) passed.
+ */
+export type TableFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
+export type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
+export interface TableFieldText {
+    text: string;
+    description?: {
+        content: string;
+        breakAllWord?: boolean;
+    };
+    breakAllWord?: boolean;
+    tag?: {
+        text: string;
+        color: TagColorTheme;
+    };
+}
+export type TableFieldAction<Item> = Pick<BaseButtonProps, "isDisabled" | "title" | "icon"> & {
+    key: string;
+    /**
+     * @param item - the data in the row when this clicked
+     * @returns void
+     */
+    handleClick: (item: Item) => void;
+};
+export {};

package/dist/components/Table/Table.utils.d.ts

@@ -0,0 +1,3 @@
+import { TableFieldText, TableFieldAction, TableFieldContent } from "./Table.types";
+export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
+export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBody<Item> {
+    items?: Item[];
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyItemsText: string;
+    emptyFieldContentText?: string;
+    isLoading: boolean;
+    showEmptyView: boolean;
+    onRowClick?: (item: Item) => void;
+    className?: string;
+}
+export declare function TableBody<Item>(props: TableBody<Item>): JSX.Element;

package/dist/components/Table/TableBodyRow.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBodyRowProps<Item> {
+    item: Item;
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyFieldContentText?: string;
+    onClick?: (item: Item) => void;
+    className?: string;
+}
+export declare function TableBodyRow<Item>(props: TableBodyRowProps<Item>): JSX.Element;

package/dist/components/Table/TableBodyRowDataCell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBodyRowDataCellProps<Item> {
+    item: Item;
+    fieldConfig: TableFieldConfig<Item>;
+    emptyFieldContentText?: string;
+}
+export declare function TableBodyRowDataCell<Item>(props: TableBodyRowDataCellProps<Item>): JSX.Element;

package/dist/components/Table/TableFooter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
+interface TableFooterProps {
+    colSpan: number;
+    paginationMenuProps: PaginationMenuProps;
+}
+export declare const TableFooter: (props: TableFooterProps) => JSX.Element;
+export {};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableHeaderProps<Item> {
+    fieldConfigurations: TableFieldConfig<Item>[];
+    className?: string;
+}
+export declare function TableHeader<Item>(props: TableHeaderProps<Item>): JSX.Element;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagSize } from "./Tag.utils";
+export declare enum TagColorTheme {
+    Red = "red",
+    Amber = "amber",
+    Green = "green",
+    Gray = "gray",
+    Blue = "blue"
+}
+export interface TagProps {
+    text: string;
+    colorTheme?: TagColorTheme;
+    size?: TagSize;
+    className?: string;
+}
+declare const Tag: ({ text, colorTheme, className, size, }: TagProps) => JSX.Element;
+export default Tag;

package/dist/components/Tag/Tag.utils.d.ts

@@ -0,0 +1,4 @@
+export declare enum TagSize {
+    "small" = "small",
+    "base" = "base"
+}

package/dist/components/Tag/TagGroup.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TagProps } from "./Tag";
+import { TagSize } from "./Tag.utils";
+interface TagGroupProps {
+    tags: TagProps[];
+    tagSize?: TagSize;
+    className?: string;
+}
+declare const TagGroup: ({ tags, tagSize, className, }: TagGroupProps) => JSX.Element;
+export default TagGroup;