@pautena/react-design-system 0.4.7 → 0.5.0

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

@@ -0,0 +1,11 @@
+import { AlertColor } from "@mui/material";
+import React from "react";
+export interface ExpandableAlertProps {
+    severity: AlertColor;
+    iconMapping?: Partial<Record<AlertColor, React.ReactNode>>;
+    title?: string;
+    message: string;
+    metadata?: string | string[];
+    onClose: () => void;
+}
+export declare const ExpandableAlert: ({ severity, iconMapping, title, message, metadata, onClose, }: ExpandableAlertProps) => JSX.Element;

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { SxProps, Theme } from "@mui/material";
+import { PropsWithChildren } from "react";
+export type BoardProps = PropsWithChildren<{
+    markdown?: string;
+    content?: string | string[];
+    spacing?: 0 | 1 | 2 | 3 | 4 | 5;
+    timeoutCopyText?: number;
+    sx?: SxProps<Theme>;
+}>;
+export declare const Board: ({ markdown: markdownProps, content: contentProp, spacing, timeoutCopyText, children, sx, }: BoardProps) => JSX.Element;

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

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

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

@@ -1,3 +1,5 @@
 export * from "./bullet";
 export * from "./label";
 export * from "./header";
+export * from "./board";
+export * from "./markdown";

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

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

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

@@ -0,0 +1,7 @@
+import { MarkdownToJSX } from "markdown-to-jsx";
+export interface MarkdownProps {
+    content: string;
+    options?: MarkdownToJSX.Options;
+}
+export declare const markdownDefaultOptions: MarkdownToJSX.Options;
+export declare const Markdown: ({ content, options }: MarkdownProps) => JSX.Element;

package/dist/cjs/types/components/dialogs/bootstrap-dialog/bootstrap-dialog.d.ts

@@ -0,0 +1,2 @@
+import { BootstrapDialogDialogProps } from "../dialog.types";
+export declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => JSX.Element;

package/dist/cjs/types/components/dialogs/bootstrap-dialog/index.d.ts

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

package/dist/cjs/types/components/dialogs/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,10 @@
+import { BootstrapDialogDialogProps } from "../dialog.types";
+type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
+export interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+    confirmText?: string;
+    canceText?: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+export declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, children, onConfirm, onCancel, }: ConfirmDialogProps) => JSX.Element;
+export {};

package/dist/cjs/types/components/dialogs/confirm-dialog/index.d.ts

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

package/dist/cjs/types/components/dialogs/dialog-hooks/index.d.ts

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

package/dist/cjs/types/components/dialogs/dialog-hooks/use-dialog.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useDialog: (intialOpen?: boolean) => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/cjs/types/components/dialogs/dialog.types.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from "react";
+export interface DialogAction {
+    id: string;
+    text: string;
+    type?: "button" | "submit";
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    onClick?: () => void;
+}
+export type BootstrapDialogDialogProps = PropsWithChildren<{
+    open: boolean;
+    title: string;
+    loading?: boolean;
+    disabled?: boolean;
+    cancelable?: boolean;
+    acceptable?: boolean;
+    callCloseWhenCancel?: boolean;
+    actions?: DialogAction[];
+    cancelText?: string;
+    acceptText?: string;
+    acceptType?: "button" | "submit";
+    onClose: () => void;
+    onCancel?: () => void;
+    onAccept?: () => void;
+    component?: React.ElementType;
+    componentProps?: any;
+}>;

package/dist/cjs/types/components/dialogs/form-dialog/form-dialog.d.ts

@@ -0,0 +1,10 @@
+import { BootstrapDialogDialogProps } from "../dialog.types";
+type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
+export interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+    submitText?: string;
+    canceText?: string;
+    onCancel: () => void;
+    onSubmit: (data: T) => void;
+}
+export declare const FormDialog: <T>({ open, title, loading, disabled, submitText, cancelText, children, onSubmit, onCancel, }: FormDialogProps<T>) => JSX.Element;
+export {};

package/dist/cjs/types/components/dialogs/form-dialog/index.d.ts

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

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

@@ -0,0 +1,5 @@
+export * from "./confirm-dialog";
+export * from "./form-dialog";
+export * from "./bootstrap-dialog";
+export * from "./dialog-hooks";
+export * from "./dialog.types";

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

@@ -8,3 +8,5 @@ export * from "./inputs";
 export * from "./navigation";
 export * from "./tables";
 export * from "./placeholders";
+export * from "./alerts";
+export * from "./dialogs";

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/types/components/value-displays/index.d.ts

@@ -3,5 +3,6 @@ export * from "./value-card";
 export * from "./value-boolean";
 export * from "./value-datetime";
 export * from "./group-value-card";
-export * from "./value-displays.types";
+export * from "./value-base/value-displays.types";
 export * from "./value-rating";
+export * from "./value-base";

package/dist/cjs/types/components/value-displays/value-base/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./value-edit";
+export * from "./value-displays.types";

package/dist/cjs/types/components/value-displays/{value-displays.types.d.ts → value-base/value-displays.types.d.ts}

@@ -12,4 +12,14 @@ export interface BaseValueProps<T> {
      */
     placeholder?: string;
 }
+export interface EditableValueProps<T> {
+    /**
+     * This field can be edited or not
+     */
+    editable?: boolean;
+    /**
+     * Callback executed when the value is edited
+     */
+    onEdit?: (value?: T) => void;
+}
 export declare const DefaultPlaceholder = "-";

package/dist/cjs/types/components/value-displays/value-base/value-edit.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { SxProps, Theme } from "@mui/material";
+export interface ValueEditButtonsProps {
+    onClickCancel: () => void;
+    onSubmitEdit: () => void;
+    sx?: SxProps<Theme>;
+}
+export declare const ValueEditButtons: ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => JSX.Element;
+/**
+ * Hook to manage the editing behaviour
+ */
+export declare const useEditableValueDisplay: <T>(initialValue: T | undefined, onEdit: (value?: T | undefined) => void) => {
+    isEditing: boolean;
+    cancelEdit: () => void;
+    editValue: T | undefined;
+    setEditValue: React.Dispatch<React.SetStateAction<T | undefined>>;
+    startEdit: () => void;
+    submitEdit: () => void;
+};

package/dist/cjs/types/components/value-displays/value-boolean/value-boolean.d.ts

@@ -1,6 +1,6 @@
-import { BaseValueProps } from "../value-displays.types";
-export type ValueBooleanProps = BaseValueProps<boolean>;
+import { BaseValueProps, EditableValueProps } from "../value-base";
+export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 /**
  * Displays a boolean value with a label
  */
-export declare const ValueBoolean: ({ label, value, placeholder, }: ValueBooleanProps) => JSX.Element;
+export declare const ValueBoolean: ({ label, value, placeholder, editable, onEdit, }: ValueBooleanProps) => JSX.Element;

package/dist/cjs/types/components/value-displays/value-datetime/value-datetime.d.ts

@@ -1,11 +1,16 @@
-import { BaseValueProps } from "../value-displays.types";
-export interface ValueDatetimeProps extends BaseValueProps<Date> {
+import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
+export type EditInputType = "datetime" | "date" | "time";
+export interface ValueDatetimeProps extends BaseValueProps<Date>, EditableValueProps<Date> {
     /**
      * Datetime format
      */
     format: string;
+    /**
+     * Edit input type
+     */
+    editInputType?: EditInputType;
 }
 /**
  * Displays a formated datetime with a label
  */
-export declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, }: ValueDatetimeProps) => JSX.Element;
+export declare const ValueDatetime: ({ label, value: valueProp, format: fmt, placeholder, editable, editInputType, onEdit, }: ValueDatetimeProps) => JSX.Element;

package/dist/cjs/types/components/value-displays/value-image/value-image.d.ts

@@ -1,4 +1,4 @@
-import { BaseValueProps } from "../value-displays.types";
+import { BaseValueProps } from "../value-base/value-displays.types";
 export interface ValueImageProps extends BaseValueProps<string> {
     /**
      * Image size

package/dist/cjs/types/components/value-displays/value-rating/value-rating.d.ts

@@ -1,8 +1,8 @@
-import { BaseValueProps } from "../value-displays.types";
+import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
 export type ValueRatingProps = BaseValueProps<number> & {
     maxRating?: number;
-};
+} & EditableValueProps<number>;
 /**
  * Displays a number using stars
  */
-export declare const ValueRating: ({ label, value, maxRating }: ValueRatingProps) => JSX.Element;
+export declare const ValueRating: ({ label, value, maxRating, editable, onEdit, }: ValueRatingProps) => JSX.Element;

package/dist/cjs/types/components/value-displays/value-text/value-text.d.ts

@@ -1,20 +1,6 @@
-import { BaseValueProps } from "../value-displays.types";
-export type TextValue = string | number;
-export interface ValueTextProps<T extends TextValue> extends BaseValueProps<T> {
-    /**
-     * This field can be edited or not
-     */
-    editable?: boolean;
-    /**
-     * Callback executed when the value is edited
-     */
-    onEdit?: (value?: string) => void;
-    /**
-     * Callback called when the user cancels an edition
-     */
-    onCancelEdit?: () => void;
-}
+import { BaseValueProps, EditableValueProps } from "../value-base";
+export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
 /**
  * Displays a string value with a label
  */
-export declare const ValueText: <T extends TextValue>({ label, value: valueProp, placeholder, editable, onEdit, onCancelEdit, }: ValueTextProps<T>) => JSX.Element;
+export declare const ValueText: ({ label, value: valueProp, placeholder, editable, onEdit, }: ValueTextProps) => JSX.Element;