@itaptec/form_components 0.0.1-beta.31

package/README.md

@@ -0,0 +1,29 @@
+# README #
+
+This README would normally document whatever steps are necessary to get your application up and running.
+
+### What is this repository for? ###
+
+* Quick summary
+* Version
+* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+
+### How do I get set up? ###
+
+* Summary of set up
+* Configuration
+* Dependencies
+* Database configuration
+* How to run tests
+* Deployment instructions
+
+### Contribution guidelines ###
+
+* Writing tests
+* Code review
+* Other guidelines
+
+### Who do I talk to? ###
+
+* Repo owner or admin
+* Other community or team contact

package/dist/index.css

@@ -0,0 +1,16 @@
+/* src/components/forms/date-pickers/styles/ControlledDateRangePicker.css */
+@media (max-width: 600px) {
+  .rdrMonths {
+    flex-direction: column;
+  }
+  .rdrMonth {
+    width: 100%;
+  }
+  .rdrDateRangePickerWrapper {
+    flex-direction: column-reverse;
+  }
+  .rdrDefinedRangesWrapper {
+    width: 100% !important;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/date-pickers/styles/ControlledDateRangePicker.css"],"sourcesContent":["@media (max-width: 600px) {\r\n    .rdrMonths {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .rdrMonth {\r\n        width: 100%;\r\n    }\r\n\r\n    .rdrDateRangePickerWrapper {\r\n        flex-direction: column-reverse;\r\n    }\r\n\r\n    .rdrDefinedRangesWrapper {\r\n        width: 100% !important;\r\n    }\r\n}"],"mappings":";AAAA,QAAO,WAAY;AACf,GAAC;AACG,oBAAgB;AACpB;AAEA,GAAC;AACG,WAAO;AACX;AAEA,GAAC;AACG,oBAAgB;AACpB;AAEA,GAAC;AACG,WAAO;AACX;AACJ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,163 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, ButtonGroupProps, PopoverProps, MenuListProps, StandardTextFieldProps, AutocompleteProps, TextFieldProps, ChipProps, ToggleButtonProps, ToggleButtonGroupProps } from '@mui/material';
+import React$1, { ComponentType } from 'react';
+import { FieldValues, ControllerProps, Control, Path } from 'react-hook-form';
+import { useIMask } from 'react-imask';
+import { DateRangeProps } from 'react-date-range';
+
+interface ItaptecButtonProps<TPromise = void> extends Omit<ButtonProps, "onClick"> {
+    onClick?: ((event: React$1.MouseEvent) => void) | ((event: React$1.MouseEvent) => Promise<TPromise>);
+}
+declare function ItaptecButton({ startIcon, color, onClick, ...rest }: ItaptecButtonProps): react_jsx_runtime.JSX.Element;
+
+type SelectionOption = {
+    value: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options that the SplitButton can display.
+ */
+type SplitButtonProps<TOption extends SelectionOption> = {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    loadOptions: (() => Promise<TOption[]>) | (() => TOption[]) | TOption[];
+    /**
+     * A function that is called when an option is selected, or a Promise that resolves when the function is done.
+     * @param selected - The selected option.
+     */
+    onClick: ((event: React$1.MouseEvent, selected: TOption) => void) | ((event: React$1.MouseEvent, selected: TOption) => Promise<void>);
+    ButtonGroupProps?: Omit<ButtonGroupProps, "onClick">;
+    /**
+     * Props del popover.
+     *
+     * Por defecto el menú de opciones se despliega respecto al botón de dropdown,
+     * alineado a la derecha, hacia abajo. Se puede jugar con esto en:
+     * https://mui.com/material-ui/react-popover/#anchor-playground
+     */
+    PopoverProps?: Omit<PopoverProps, "ref" | "anchorEl" | "open" | "onClose">;
+    MenuListProps?: MenuListProps;
+};
+declare function SplitButton<TOption extends SelectionOption>(props: SplitButtonProps<TOption>): react_jsx_runtime.JSX.Element;
+
+type ControlledTextFieldProps<TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & StandardTextFieldProps & {
+    ControllerProps?: Omit<ControllerProps<TForm>, "control" | "name" | "render">;
+    mask?: Parameters<typeof useIMask>["0"];
+    debounce?: boolean;
+    debounceTime?: number;
+};
+declare function ControlledTextField<TForm extends FieldValues = FieldValues>({ control, name, mask, ControllerProps, debounce, debounceTime, ...rest }: ControlledTextFieldProps<TForm>): react_jsx_runtime.JSX.Element;
+
+/**
+ * ControlledDateRangePickerProps interface
+ *
+ * @template T - A generic parameter that extends FieldValues from react-hook-form
+ *
+ * @property {Control<T>} control - The control object from react-hook-form
+ * @property {Path<T>} startDateName - The field name for the start date
+ * @property {Path<T>} endDateName - The field name for the end date
+ * @property {string} [label] - An optional label for the date range picker
+ * @property {(date: Date | string | null) => string} [dateFormatter] - An optional function to format the date. If provided, it will be used instead of the default formatter (dd/MM/yyyy)
+ *
+ */
+interface ControlledDateRangePickerProps<T extends FieldValues> extends DateRangeProps {
+    control: Control<T>;
+    startDateName: Path<T>;
+    endDateName: Path<T>;
+    label?: string;
+    dateFormatter?: (date: Date | string | null) => string;
+}
+/**
+ * ControlledDateRangePicker component to be used in react-hook-form forms
+ *
+ * @template T - A generic parameter that extends FieldValues from react-hook-form
+ *
+ * @param {ControlledDateRangePickerProps<T>} props - The props that define the ControlledDateRangePicker component
+ */
+declare const ControlledDateRangePicker: <T extends FieldValues>({ control, startDateName, endDateName, label, dateFormatter }: ControlledDateRangePickerProps<T>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options.
+ */
+type ControlledSelectProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & Omit<AutocompleteProps<TOption, false, undefined, false>, "options" | "renderInput"> & {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    getOptions: TOption[] | (() => TOption[]) | (() => Promise<TOption[]>);
+    searchable?: boolean;
+} & Pick<TextFieldProps, "required" | "label" | "variant" | "size">;
+declare function ControlledSelect<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledSelectProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options.
+ */
+type ControlledMultiselectProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & Omit<AutocompleteProps<TOption, true, undefined, false>, "options" | "renderInput"> & {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    getOptions: TOption[] | (() => TOption[]) | (() => Promise<TOption[]>);
+    TagComponent?: ComponentType<ChipProps & {
+        value: TOption;
+    }>;
+    searchable?: boolean;
+} & Pick<TextFieldProps, "required" | "label" | "variant" | "size">;
+declare function ControlledMultiselect<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledMultiselectProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+type ItecToggleButtonGroupProps<TOption extends SelectionOption> = {
+    options: TOption[];
+    onChange: (value: number | null) => void;
+    renderOption?: (value: TOption) => React$1.ReactNode;
+    toggleButtonProps?: Omit<ToggleButtonProps, "value" | "key"> | ((value: TOption) => Omit<ToggleButtonProps, "value" | "key">);
+    value: number | undefined;
+} & Omit<ToggleButtonGroupProps, "onChange">;
+declare function ItecToggleButtonGroup<TOption extends SelectionOption>(props: ItecToggleButtonGroupProps<TOption>): react_jsx_runtime.JSX.Element;
+
+type ControlledToggleButtonGroupProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & {
+    /**
+     * TODO: async options
+     */
+    /**
+     * At least one value must be selected at all times.
+     */
+    enforceValueSet?: boolean;
+    helperText?: string;
+    label?: string;
+} & Omit<ItecToggleButtonGroupProps<TOption>, "onChange" | "value">;
+declare function ControlledToggleButtonGroup<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledToggleButtonGroupProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+type ItecToggleButtonGroupMultipleProps<TOption extends SelectionOption> = {
+    options: TOption[];
+    onChange: (value: number[]) => void;
+    renderOption?: (value: TOption) => React$1.ReactNode;
+    toggleButtonProps?: Omit<ToggleButtonProps, "value" | "key"> | ((value: TOption) => Omit<ToggleButtonProps, "value" | "key">);
+    value: number[] | undefined;
+} & Omit<ToggleButtonGroupProps, "onChange">;
+
+type ControlledToggleButtonGroupMultipleProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & {
+    /**
+     * TODO: async options
+     */
+    /**
+     * At least one value must be selected at all times.
+     */
+    enforceValueSet?: boolean;
+    helperText?: string;
+    label?: string;
+} & Omit<ItecToggleButtonGroupMultipleProps<TOption>, "onChange" | "value">;
+declare function ControlledToggleButtonGroupMultiple<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledToggleButtonGroupMultipleProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+export { ItaptecButton as Button, type ItaptecButtonProps as ButtonProps, ControlledDateRangePicker, type ControlledDateRangePickerProps, ItecToggleButtonGroup, type ItecToggleButtonGroupProps, ControlledMultiselect as Multiselect, type ControlledMultiselectProps as MultiselectProps, ControlledSelect as Select, type ControlledSelectProps as SelectProps, type SelectionOption, SplitButton, type SplitButtonProps, ControlledTextField as TextField, type ControlledTextFieldProps as TextFieldProps, ControlledToggleButtonGroup as ToggleButtonGroup, ControlledToggleButtonGroupMultiple as ToggleButtonGroupMultiple, type ControlledToggleButtonGroupMultipleProps as ToggleButtonGroupMultipleProps, type ControlledToggleButtonGroupProps as ToggleButtonGroupProps };

package/dist/index.d.ts

@@ -0,0 +1,163 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, ButtonGroupProps, PopoverProps, MenuListProps, StandardTextFieldProps, AutocompleteProps, TextFieldProps, ChipProps, ToggleButtonProps, ToggleButtonGroupProps } from '@mui/material';
+import React$1, { ComponentType } from 'react';
+import { FieldValues, ControllerProps, Control, Path } from 'react-hook-form';
+import { useIMask } from 'react-imask';
+import { DateRangeProps } from 'react-date-range';
+
+interface ItaptecButtonProps<TPromise = void> extends Omit<ButtonProps, "onClick"> {
+    onClick?: ((event: React$1.MouseEvent) => void) | ((event: React$1.MouseEvent) => Promise<TPromise>);
+}
+declare function ItaptecButton({ startIcon, color, onClick, ...rest }: ItaptecButtonProps): react_jsx_runtime.JSX.Element;
+
+type SelectionOption = {
+    value: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options that the SplitButton can display.
+ */
+type SplitButtonProps<TOption extends SelectionOption> = {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    loadOptions: (() => Promise<TOption[]>) | (() => TOption[]) | TOption[];
+    /**
+     * A function that is called when an option is selected, or a Promise that resolves when the function is done.
+     * @param selected - The selected option.
+     */
+    onClick: ((event: React$1.MouseEvent, selected: TOption) => void) | ((event: React$1.MouseEvent, selected: TOption) => Promise<void>);
+    ButtonGroupProps?: Omit<ButtonGroupProps, "onClick">;
+    /**
+     * Props del popover.
+     *
+     * Por defecto el menú de opciones se despliega respecto al botón de dropdown,
+     * alineado a la derecha, hacia abajo. Se puede jugar con esto en:
+     * https://mui.com/material-ui/react-popover/#anchor-playground
+     */
+    PopoverProps?: Omit<PopoverProps, "ref" | "anchorEl" | "open" | "onClose">;
+    MenuListProps?: MenuListProps;
+};
+declare function SplitButton<TOption extends SelectionOption>(props: SplitButtonProps<TOption>): react_jsx_runtime.JSX.Element;
+
+type ControlledTextFieldProps<TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & StandardTextFieldProps & {
+    ControllerProps?: Omit<ControllerProps<TForm>, "control" | "name" | "render">;
+    mask?: Parameters<typeof useIMask>["0"];
+    debounce?: boolean;
+    debounceTime?: number;
+};
+declare function ControlledTextField<TForm extends FieldValues = FieldValues>({ control, name, mask, ControllerProps, debounce, debounceTime, ...rest }: ControlledTextFieldProps<TForm>): react_jsx_runtime.JSX.Element;
+
+/**
+ * ControlledDateRangePickerProps interface
+ *
+ * @template T - A generic parameter that extends FieldValues from react-hook-form
+ *
+ * @property {Control<T>} control - The control object from react-hook-form
+ * @property {Path<T>} startDateName - The field name for the start date
+ * @property {Path<T>} endDateName - The field name for the end date
+ * @property {string} [label] - An optional label for the date range picker
+ * @property {(date: Date | string | null) => string} [dateFormatter] - An optional function to format the date. If provided, it will be used instead of the default formatter (dd/MM/yyyy)
+ *
+ */
+interface ControlledDateRangePickerProps<T extends FieldValues> extends DateRangeProps {
+    control: Control<T>;
+    startDateName: Path<T>;
+    endDateName: Path<T>;
+    label?: string;
+    dateFormatter?: (date: Date | string | null) => string;
+}
+/**
+ * ControlledDateRangePicker component to be used in react-hook-form forms
+ *
+ * @template T - A generic parameter that extends FieldValues from react-hook-form
+ *
+ * @param {ControlledDateRangePickerProps<T>} props - The props that define the ControlledDateRangePicker component
+ */
+declare const ControlledDateRangePicker: <T extends FieldValues>({ control, startDateName, endDateName, label, dateFormatter }: ControlledDateRangePickerProps<T>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options.
+ */
+type ControlledSelectProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & Omit<AutocompleteProps<TOption, false, undefined, false>, "options" | "renderInput"> & {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    getOptions: TOption[] | (() => TOption[]) | (() => Promise<TOption[]>);
+    searchable?: boolean;
+} & Pick<TextFieldProps, "required" | "label" | "variant" | "size">;
+declare function ControlledSelect<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledSelectProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the SplitButton component.
+ * @template TOption - The type of the options.
+ */
+type ControlledMultiselectProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & Omit<AutocompleteProps<TOption, true, undefined, false>, "options" | "renderInput"> & {
+    /**
+     * Can be:
+     * - An array of options.
+     * - A function that returns an array of options.
+     * - A function that returns a Promise that resolves to an array of options.
+     */
+    getOptions: TOption[] | (() => TOption[]) | (() => Promise<TOption[]>);
+    TagComponent?: ComponentType<ChipProps & {
+        value: TOption;
+    }>;
+    searchable?: boolean;
+} & Pick<TextFieldProps, "required" | "label" | "variant" | "size">;
+declare function ControlledMultiselect<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledMultiselectProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+type ItecToggleButtonGroupProps<TOption extends SelectionOption> = {
+    options: TOption[];
+    onChange: (value: number | null) => void;
+    renderOption?: (value: TOption) => React$1.ReactNode;
+    toggleButtonProps?: Omit<ToggleButtonProps, "value" | "key"> | ((value: TOption) => Omit<ToggleButtonProps, "value" | "key">);
+    value: number | undefined;
+} & Omit<ToggleButtonGroupProps, "onChange">;
+declare function ItecToggleButtonGroup<TOption extends SelectionOption>(props: ItecToggleButtonGroupProps<TOption>): react_jsx_runtime.JSX.Element;
+
+type ControlledToggleButtonGroupProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & {
+    /**
+     * TODO: async options
+     */
+    /**
+     * At least one value must be selected at all times.
+     */
+    enforceValueSet?: boolean;
+    helperText?: string;
+    label?: string;
+} & Omit<ItecToggleButtonGroupProps<TOption>, "onChange" | "value">;
+declare function ControlledToggleButtonGroup<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledToggleButtonGroupProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+type ItecToggleButtonGroupMultipleProps<TOption extends SelectionOption> = {
+    options: TOption[];
+    onChange: (value: number[]) => void;
+    renderOption?: (value: TOption) => React$1.ReactNode;
+    toggleButtonProps?: Omit<ToggleButtonProps, "value" | "key"> | ((value: TOption) => Omit<ToggleButtonProps, "value" | "key">);
+    value: number[] | undefined;
+} & Omit<ToggleButtonGroupProps, "onChange">;
+
+type ControlledToggleButtonGroupMultipleProps<TOption extends SelectionOption, TForm extends FieldValues> = Required<Pick<ControllerProps<TForm>, "control" | "name">> & {
+    /**
+     * TODO: async options
+     */
+    /**
+     * At least one value must be selected at all times.
+     */
+    enforceValueSet?: boolean;
+    helperText?: string;
+    label?: string;
+} & Omit<ItecToggleButtonGroupMultipleProps<TOption>, "onChange" | "value">;
+declare function ControlledToggleButtonGroupMultiple<TOption extends SelectionOption, TForm extends FieldValues>(props: ControlledToggleButtonGroupMultipleProps<TOption, TForm>): react_jsx_runtime.JSX.Element;
+
+export { ItaptecButton as Button, type ItaptecButtonProps as ButtonProps, ControlledDateRangePicker, type ControlledDateRangePickerProps, ItecToggleButtonGroup, type ItecToggleButtonGroupProps, ControlledMultiselect as Multiselect, type ControlledMultiselectProps as MultiselectProps, ControlledSelect as Select, type ControlledSelectProps as SelectProps, type SelectionOption, SplitButton, type SplitButtonProps, ControlledTextField as TextField, type ControlledTextFieldProps as TextFieldProps, ControlledToggleButtonGroup as ToggleButtonGroup, ControlledToggleButtonGroupMultiple as ToggleButtonGroupMultiple, type ControlledToggleButtonGroupMultipleProps as ToggleButtonGroupMultipleProps, type ControlledToggleButtonGroupProps as ToggleButtonGroupProps };