@pautena/react-design-system 0.5.0 → 0.6.0

package/dist/cjs/types/components/alerts/expandable-alert/expandable-alert.d.ts

@@ -8,4 +8,4 @@ export interface ExpandableAlertProps {
     metadata?: string | string[];
     onClose: () => void;
 }
-export declare const ExpandableAlert: ({ severity, iconMapping, title, message, metadata, onClose, }: ExpandableAlertProps) => JSX.Element;
+export declare const ExpandableAlert: React.ForwardRefExoticComponent<ExpandableAlertProps & React.RefAttributes<any>>;

package/dist/cjs/types/components/data-display/bullet/bullet.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from "@mui/material";
 export type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 export declare const bulletClasses: {
     root: string;
@@ -7,8 +8,12 @@ export interface BulletProps {
      * Color palette used to draw the component
      */
     variant?: BulletVariant;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Dot to attract the user attention
  */
-export declare const Bullet: ({ variant }: BulletProps) => JSX.Element;
+export declare const Bullet: ({ variant, sx }: BulletProps) => JSX.Element;

package/dist/cjs/types/components/data-display/label/label.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from "@mui/material";
 export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 export declare const labelClasses: {
     root: string;
@@ -11,8 +12,12 @@ export interface LabelProps {
      * Color palette used to draw the component
      */
     variant?: LabelVariant;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Compact element to represent a text
  */
-export declare const Label: ({ text, variant }: LabelProps) => JSX.Element;
+export declare const Label: ({ text, variant, sx }: LabelProps) => JSX.Element;

package/dist/cjs/types/components/data-display/link-card/link-card.d.ts

@@ -0,0 +1,11 @@
+import { SxProps, Theme } from "@mui/material";
+export type LinkCardVariant = "primary" | "secondary" | "info" | "warning" | "error";
+export interface LinkCardProps {
+    variant?: LinkCardVariant;
+    href: string;
+    title: string;
+    message: string;
+    linkText?: string;
+    sx?: SxProps<Theme>;
+}
+export declare const LinkCard: ({ variant, title, message, href, linkText, sx, }: LinkCardProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer/drawer.d.ts

@@ -1,2 +1,5 @@
-import { DrawerComponent } from "./drawer.types";
+import React from "react";
+import { Theme } from "@mui/material";
+import { DrawerComponent } from "../drawer.types";
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Drawer: DrawerComponent;

package/dist/cjs/types/components/drawers/drawer/index.d.ts

@@ -1,5 +1 @@
 export * from "./drawer";
-export * from "./drawer.types";
-export * from "./mini-drawer";
-export * from "./drawer.provider";
-export * from "./drawer.context";

package/dist/cjs/types/components/drawers/drawer-app-bar/drawer-app-bar.d.ts

@@ -0,0 +1,5 @@
+import { AppBarProps as MuiAppBarProps } from "@mui/material";
+export interface DrawerAppBarProps extends MuiAppBarProps {
+    title?: string;
+}
+export declare const DrawerAppBar: ({ title, sx, children, ...rest }: DrawerAppBarProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-app-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./drawer-app-bar";

package/dist/cjs/types/components/drawers/drawer-content/drawer-content.d.ts

@@ -1,4 +1,4 @@
-import { DrawerContentComponent } from "../drawer/drawer.types";
+import { DrawerContentComponent } from "../drawer.types";
 /**
  * Content to be shown inside a navigation
  */

package/dist/cjs/types/components/drawers/drawer-item/drawer-item-link.d.ts

@@ -0,0 +1,50 @@
+import { ReactElement } from "react";
+import { SxProps, Theme } from "@mui/material";
+import { DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerSize } from "../drawer.types";
+export interface DrawerItemLinkProps {
+    /**
+     * Item size. default to medium
+     */
+    size?: DrawerSize;
+    /**
+     * Text displayed inside the item
+     */
+    text: string;
+    /**
+     * Url where the user is going to be redirected
+     * if the item is clicked
+     */
+    href: string;
+    /**
+     * Icon displayed to the left
+     */
+    icon?: ReactElement;
+    /**
+     * Avatar displayed to the left
+     */
+    avatar?: DrawerItemAvatar;
+    /**
+     * Label with extra info displayed to the right
+     */
+    label?: DrawerItemLabel;
+    /**
+     * Bullet to attract the user attention displyed to the right
+     */
+    bullet?: DrawerItemBullet;
+    /**
+     * The item has to be marked as selected
+     */
+    selected?: boolean;
+    /**
+     * Deep level of this item inside the submenus
+     */
+    level: number;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Clicable item inside a drawer
+ */
+export declare const DrawerItemLink: ({ text, icon, avatar, label, bullet, href, selected, size, level, sx, }: DrawerItemLinkProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-item/drawer-item.d.ts

@@ -1,42 +1,16 @@
-import { ReactElement } from "react";
-import { SxProps, Theme } from "@mui/material";
-import { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
+import { DrawerNavigationItem, DrawerSize } from "../drawer.types";
 export interface DrawerItemProps {
     /**
-     * Text displayed inside the item
+     * Data to be rendered
      */
-    text: string;
+    item: DrawerNavigationItem;
     /**
-     * Url where the user is going to be redirected
-     * if the item is clicked
+     * Size of the item
      */
-    href: string;
+    size?: DrawerSize;
     /**
-     * Icon displayed to the left
+     * Deep level of this item inside the submenus
      */
-    icon?: ReactElement;
-    /**
-     * Avatar displayed to the left
-     */
-    avatar?: NavItemAvatar;
-    /**
-     * Label with extra info displayed to the right
-     */
-    label?: NavItemLabel;
-    /**
-     * Bullet to attract the user attention displyed to the right
-     */
-    bullet?: NavItemBullet;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Custom styles
-     */
-    sx?: SxProps<Theme>;
+    level?: number;
 }
-/**
- * Clicable item inside a drawer
- */
-export declare const DrawerItem: ({ text, icon, avatar, label, bullet, href, selected, sx, }: DrawerItemProps) => JSX.Element;
+export declare const DrawerItem: ({ item, size, level }: DrawerItemProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-item/drawer-menu-item.d.ts

@@ -0,0 +1,35 @@
+import { SxProps, Theme } from "@mui/material";
+import { ReactElement } from "react";
+import { DrawerNavigationItem, DrawerSize } from "../drawer.types";
+export interface DrawerMenuItemProps {
+    /**
+     * Item size. default to medium
+     */
+    size?: DrawerSize;
+    /**
+     * Text displayed inside the item
+     */
+    text: string;
+    /**
+     * Icon displayed to the left
+     */
+    icon?: ReactElement;
+    /**
+     * The item has to be marked as selected
+     */
+    selected?: boolean;
+    /**
+     * Items that are going to be displayed inside
+     * the collapsable
+     */
+    items: DrawerNavigationItem[];
+    /**
+     * Deep level of this item inside the submenus
+     */
+    level: number;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const DrawerMenuItem: ({ text, icon, selected, items, size, level, sx, }: DrawerMenuItemProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-item/index.d.ts

@@ -1 +1,3 @@
+export * from "./drawer-menu-item";
 export * from "./drawer-item";
+export * from "./drawer-item-link";

package/dist/cjs/types/components/drawers/drawer-main/drawer-main.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+export type DrawerMainProps = PropsWithChildren;
+export declare const DrawerMain: ({ children }: DrawerMainProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-main/index.d.ts

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

package/dist/{esm/types/components/drawers/drawer/drawer.context.d.ts → cjs/types/components/drawers/drawer-provider/drawer-context.d.ts}

@@ -1,8 +1,16 @@
 /// <reference types="react" />
+import { DrawerState, DrawerVariant } from "../drawer.types";
 export interface DrawerContextProps {
-    isOpen: boolean;
+    selectedItemId?: string;
+    state: DrawerState;
+    variant: DrawerVariant;
+    drawerWidth: number;
+    underAppBar: boolean;
+    switchState(): void;
     close(): void;
+    collapse(): void;
     open(): void;
+    setState: (state: DrawerState) => void;
 }
 export declare const DrawerContext: import("react").Context<DrawerContextProps | undefined>;
 export declare const UndefinedProvider: Error;

package/dist/cjs/types/components/drawers/drawer-provider/drawer.provider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { DrawerState, DrawerVariant } from "../drawer.types";
+export type DrawerProviderProps = PropsWithChildren<{
+    initialState?: DrawerState;
+    underAppBar?: boolean;
+    drawerWidth?: number;
+    variant?: DrawerVariant;
+    selectedItemId?: string;
+}>;
+export declare const DrawerProvider: ({ children, initialState: initialStateProp, variant, drawerWidth: drawerWidthProp, underAppBar, selectedItemId, }: DrawerProviderProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-provider/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../drawer/drawer";
+export * from "./drawer.provider";
+export * from "./drawer-context";

package/dist/cjs/types/components/drawers/drawer-section/drawer-section.d.ts

@@ -1,4 +1,4 @@
-import { NavItem } from "../drawer/drawer.types";
+import { DrawerNavigationItem, DrawerSize } from "../drawer.types";
 export interface DrawerSectionProps {
     /**
      * Section title
@@ -7,14 +7,14 @@ export interface DrawerSectionProps {
     /**
      * List of items of that section
      */
-    items: NavItem[];
+    items: DrawerNavigationItem[];
     /**
-     * Id of the item that has to be marked as selected
+     * Item size. default to medium
      */
-    selectedItem?: string;
+    size?: DrawerSize;
 }
 /**
  * Render a group of items inside the drawer
  * with an optional title
  */
-export declare const DrawerSection: ({ title, items, selectedItem }: DrawerSectionProps) => JSX.Element;
+export declare const DrawerSection: ({ title, items, size }: DrawerSectionProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-subheader/drawer-subheader.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ListSubheaderProps } from "@mui/material";
+import { DrawerSize } from "../drawer.types";
+export interface DrawerSubheaderProps extends ListSubheaderProps {
+    /**
+     * Item size. default to medium
+     */
+    size?: DrawerSize;
+}
+export declare const DrawerSubheader: import("@emotion/styled").StyledComponent<{
+    children?: any;
+    classes?: Partial<import("@mui/material").ListSubheaderClasses> | undefined;
+    color?: "default" | "inherit" | "primary" | undefined;
+    disableGutters?: boolean | undefined;
+    disableSticky?: boolean | undefined;
+    inset?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "color" | "inset" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "disableGutters" | "disableSticky"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & DrawerSubheaderProps, {}, {}>;

package/dist/cjs/types/components/drawers/drawer-subheader/index.d.ts

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

package/dist/cjs/types/components/drawers/drawer.mock.d.ts

@@ -0,0 +1,13 @@
+import { DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection } from "./drawer.types";
+export declare const mockLinkDrawerNavigationItem: DrawerNavigationItemLink;
+export declare const mockLinkNoIconDrawerNavigationItem: DrawerNavigationItemLink;
+export declare const mockLinkBulletDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockLinkLabelDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockLinkAvatarDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockListDrawerNavigationItems: DrawerNavigationItem[];
+export declare const mockMenuDrawerNavigationItem: DrawerNavigationItemCollapsable;
+export declare const mockMenuInsideMenuDrawerNavigationItem: DrawerNavigationItem;
+export declare const mockListDrawerNavigationSection: DrawerNavigationSection;
+export declare const mockMenuDrawerNavigationSection: DrawerNavigationSection;
+export declare const mockAvatarsDrawerNavigationSection: DrawerNavigationSection;
+export declare const mockDrawerNavigation: DrawerNavigation;

package/dist/cjs/types/components/drawers/drawer.types.d.ts

@@ -0,0 +1,61 @@
+import { FunctionComponent, ReactElement } from "react";
+import { BulletVariant, LabelVariant } from "../data-display";
+import { DrawerProps as MuiDrawerProps, Theme } from "@mui/material";
+import { DrawerAppBarProps } from "./drawer-app-bar";
+export type DrawerVariant = "temporary" | "mini" | "persistent" | "clipped";
+export type DrawerState = "open" | "collapse" | "close";
+export type DrawerSize = "small" | "medium";
+export interface DrawerItemAvatar {
+    src: string;
+    alt: string;
+}
+export interface DrawerItemLabel {
+    text: string;
+    variant: LabelVariant;
+}
+export interface DrawerItemBullet {
+    variant: BulletVariant;
+}
+export interface DrawerNavigationItemLink {
+    id: string;
+    text: string;
+    href: string;
+    icon?: ReactElement;
+    avatar?: DrawerItemAvatar;
+    label?: DrawerItemLabel;
+    bullet?: DrawerItemBullet;
+}
+export type DrawerNavigationItemCollapsable = Pick<DrawerNavigationItemLink, "id" | "text" | "icon"> & {
+    items: DrawerNavigationItem[];
+};
+export type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;
+export interface DrawerNavigationSection {
+    title?: string;
+    items: DrawerNavigationItem[];
+}
+export interface DrawerNavigation {
+    items: DrawerNavigationSection[];
+}
+export interface DrawerContentProps {
+    /**
+     * Object with the content that has to be rendered
+     */
+    nav: DrawerNavigation;
+    /**
+     * Item size. default to medium
+     */
+    size?: DrawerSize;
+}
+export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
+export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
+export interface DrawerProps extends MuiDrawerProps {
+    children: DrawerContentElement;
+}
+export type DrawerComponent = FunctionComponent<DrawerProps>;
+export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+export declare const getDrawerItemColors: (theme: Theme, selected: boolean | undefined) => {
+    color: string | undefined;
+    fontWeight: import("csstype").Property.FontWeight | undefined;
+};
+export type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
+export type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;

package/dist/cjs/types/components/drawers/index.d.ts

@@ -1,4 +1,8 @@
-export * from "./drawer";
+export * from "./drawer-provider";
 export * from "./drawer-content";
-export * from "./drawer-item";
 export * from "./drawer-section";
+export * from "./drawer.types";
+export * from "./drawer-subheader";
+export * from "./drawer-app-bar";
+export * from "./drawer";
+export * from "./drawer-main";

package/dist/cjs/types/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./value-displays";
 export * from "./feedback";
-export * from "./app-bars";
 export * from "./data-display";
 export * from "./containers";
 export * from "./drawers";

package/dist/cjs/types/components/inputs/autocomplete/autocomplete.d.ts

@@ -0,0 +1,10 @@
+import { AutocompleteProps as MuiAutocompleteProps, ChipTypeMap } from "@mui/material";
+import React from "react";
+export interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
+    label: string;
+    helperText?: string;
+    color?: string;
+    fetching?: boolean;
+    onChangeValue?: (value: T) => void;
+}
+export declare const Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType<any> = "div">(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;

package/dist/cjs/types/components/inputs/autocomplete/index.d.ts

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

package/dist/cjs/types/components/inputs/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./enhanced-select";
+export * from "./select";
 export * from "./sign-in";
-export * from "./enhanced-autocomplete";
+export * from "./autocomplete";

package/dist/cjs/types/components/inputs/search-input/index.d.ts

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

package/dist/cjs/types/components/inputs/search-input/search-input.d.ts

@@ -0,0 +1,19 @@
+import { SxProps, Theme } from "@mui/material";
+export type SearchInputSize = "small" | "medium";
+export interface SearchFilter {
+    id: string;
+    label: string;
+    type: "text" | "number" | "boolean" | "datetime";
+}
+export interface SearchInputProps<T> {
+    label?: string;
+    placeholder?: string;
+    fullWidth?: boolean;
+    helperText?: string;
+    size?: SearchInputSize;
+    filters?: SearchFilter[];
+    sx?: SxProps<Theme>;
+    dateFormat?: string;
+    onSearch: (data: T) => void;
+}
+export declare const SearchInput: <T>({ label, placeholder, helperText, size, fullWidth, dateFormat, filters, onSearch, sx, }: SearchInputProps<T>) => JSX.Element;

package/dist/cjs/types/components/inputs/select/index.d.ts

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

package/dist/cjs/types/components/inputs/select/select.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { SelectInputProps } from "@mui/material/Select/SelectInput";
+export type SelectSize = "small" | "medium";
+export interface SelectProps<T> {
+    label: string;
+    value: T;
+    loading?: boolean;
+    fetching?: boolean;
+    size?: SelectSize;
+    color?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+export declare const Select: <T extends any>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: SelectProps<T>) => JSX.Element;

package/dist/cjs/types/components/inputs/text-field/index.d.ts

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

package/dist/cjs/types/components/inputs/text-field/text-field.d.ts

@@ -0,0 +1,7 @@
+import { TextFieldProps as MuiTextFieldProps } from "@mui/material";
+export type TextFieldProps = MuiTextFieldProps & {
+    fetching?: boolean;
+    loading?: boolean;
+    hexColor?: string;
+};
+export declare const TextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: TextFieldProps) => JSX.Element;

package/dist/cjs/types/generators/model-router/stories/templates.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MockInstance } from "../../generators.mock";
 export declare const onRequestListAction: import("@storybook/addon-actions").HandlerFunction;
 export declare const onSubmitNewItemAction: import("@storybook/addon-actions").HandlerFunction;
@@ -9,7 +8,6 @@ export declare const onRequestDeleteAction: import("@storybook/addon-actions").H
 export declare const REQUEST_TIMEOUT = 2000;
 export declare const item1: MockInstance;
 export declare const data: MockInstance[];
-export declare const ModelRouterTemplate: import("@storybook/react").ComponentStory<import("react").JSXElementConstructor<import("../model-router").ModelRouterProps<import("../..").BasicModelInstance>>>;
 export declare const baseArgs: {
     modelName: string;
     model: import("../..").Model;

package/dist/cjs/types/layouts/drawer-layout/drawer-layout.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { DrawerAppBarElement, DrawerElement } from "../../components/drawers";
+import { DrawerProviderProps } from "../../components/drawers/drawer-provider/drawer.provider";
+export interface DrawerLayoutProps {
+    drawerProviderProps?: DrawerProviderProps;
+    children: [DrawerElement, DrawerAppBarElement, ReactNode];
+}
+export declare const DrawerLayoutProps: ({ drawerProviderProps, children: childrenProps, }: DrawerLayoutProps) => JSX.Element;

package/dist/cjs/types/layouts/drawer-layout/index.d.ts

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

package/dist/cjs/types/layouts/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./app-bar-with-drawer-layout";
+export * from "./drawer-layout";
 export * from "./header-layout";

package/dist/cjs/types/utils/arrays.d.ts

@@ -1,4 +1,4 @@
-export declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
+export declare const newArrayWithSize: <T>(size: number, fillValue: T) => any;
 export declare const getRandomItem: <T>(items: T[]) => {
     index: number;
     item: T;

package/dist/cjs/types/utils/forms.d.ts

@@ -0,0 +1,2 @@
+import { FormEvent } from "react";
+export declare const getFormData: <T>(e: FormEvent<HTMLFormElement>) => T;