@ftdata/ui 0.0.19 → 0.0.21

package/dist/components/DateRangePicker/constants/index.d.ts

@@ -0,0 +1,477 @@
+import type { LocaleCode } from "../types/dataRange";
+export declare const RSUITE_LOCALES: {
+    readonly "pt-BR": {
+        code: string;
+        common: {
+            loading: string;
+            emptyMessage: string;
+            remove: string;
+            clear: string;
+        };
+        Plaintext: {
+            unfilled: string;
+            notSelected: string;
+            notUploaded: string;
+        };
+        Pagination: {
+            more: string;
+            prev: string;
+            next: string;
+            first: string;
+            last: string;
+            limit: string;
+            total: string;
+            skip: string;
+        };
+        DateTimeFormats: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Calendar: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DatePicker: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DateRangePicker: {
+            last7Days: string;
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Combobox: {
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        InputPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        TagPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        Uploader: {
+            inited: string;
+            progress: string;
+            error: string;
+            complete: string;
+            emptyFile: string;
+            upload: string;
+            removeFile: string;
+        };
+        CloseButton: {
+            closeLabel: string;
+        };
+        Breadcrumb: {
+            expandText: string;
+        };
+        Toggle: {
+            on: string;
+            off: string;
+        };
+        Dialog: {
+            alert: string;
+            confirm: string;
+            ok: string;
+            cancel: string;
+        };
+    };
+    readonly "en-US": {
+        code: string;
+        common: {
+            loading: string;
+            emptyMessage: string;
+            remove: string;
+            clear: string;
+        };
+        Plaintext: {
+            unfilled: string;
+            notSelected: string;
+            notUploaded: string;
+        };
+        Pagination: {
+            more: string;
+            prev: string;
+            next: string;
+            first: string;
+            last: string;
+            limit: string;
+            total: string;
+            skip: string;
+        };
+        DateTimeFormats: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Calendar: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DatePicker: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DateRangePicker: {
+            last7Days: string;
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Combobox: {
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        InputPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        TagPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        Uploader: {
+            inited: string;
+            progress: string;
+            error: string;
+            complete: string;
+            emptyFile: string;
+            upload: string;
+            removeFile: string;
+        };
+        CloseButton: {
+            closeLabel: string;
+        };
+        Breadcrumb: {
+            expandText: string;
+        };
+        Toggle: {
+            on: string;
+            off: string;
+        };
+        Dialog: {
+            alert: string;
+            confirm: string;
+            ok: string;
+            cancel: string;
+        };
+    };
+    readonly "es-ES": {
+        code: string;
+        common: {
+            loading: string;
+            emptyMessage: string;
+            remove: string;
+            clear: string;
+        };
+        Plaintext: {
+            unfilled: string;
+            notSelected: string;
+            notUploaded: string;
+        };
+        Pagination: {
+            more: string;
+            prev: string;
+            next: string;
+            first: string;
+            last: string;
+            limit: string;
+            total: string;
+            skip: string;
+        };
+        DateTimeFormats: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Calendar: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DatePicker: {
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        DateRangePicker: {
+            last7Days: string;
+            sunday: string;
+            monday: string;
+            tuesday: string;
+            wednesday: string;
+            thursday: string;
+            friday: string;
+            saturday: string;
+            ok: string;
+            today: string;
+            yesterday: string;
+            now: string;
+            hours: string;
+            minutes: string;
+            seconds: string;
+            formattedMonthPattern: string;
+            formattedDayPattern: string;
+            shortDateFormat: string;
+            shortTimeFormat: string;
+            dateLocale: any;
+        };
+        Combobox: {
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        InputPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        TagPicker: {
+            newItem: string;
+            createOption: string;
+            noResultsText: string;
+            placeholder: string;
+            searchPlaceholder: string;
+            checkAll: string;
+        };
+        Uploader: {
+            inited: string;
+            progress: string;
+            error: string;
+            complete: string;
+            emptyFile: string;
+            upload: string;
+            removeFile: string;
+        };
+        CloseButton: {
+            closeLabel: string;
+        };
+        Breadcrumb: {
+            expandText: string;
+        };
+        Toggle: {
+            on: string;
+            off: string;
+        };
+        Dialog: {
+            alert: string;
+            confirm: string;
+            ok: string;
+            cancel: string;
+        };
+    };
+};
+export declare const DATE_FNS_LOCALES: {
+    readonly "pt-BR": import("date-fns").Locale;
+    readonly "en-US": import("date-fns").Locale;
+    readonly "es-ES": import("date-fns").Locale;
+};
+export declare const CLEAR_BUTTON_LABELS: Record<LocaleCode, string>;

package/dist/components/DateRangePicker/constants/index.js

@@ -0,0 +1,22 @@
+import { ptBR } from "date-fns/locale/pt-BR";
+import { enUS } from "date-fns/locale/en-US";
+import { es } from "date-fns/locale/es";
+import pt_BR from "rsuite/locales/pt_BR";
+import en_US from "rsuite/locales/en_US";
+import es_ES from "rsuite/locales/es_ES";
+const RSUITE_LOCALES = {
+    "pt-BR": pt_BR,
+    "en-US": en_US,
+    "es-ES": es_ES
+};
+const DATE_FNS_LOCALES = {
+    "pt-BR": ptBR,
+    "en-US": enUS,
+    "es-ES": es
+};
+const CLEAR_BUTTON_LABELS = {
+    "pt-BR": "Limpar",
+    "en-US": "Clear",
+    "es-ES": "Limpiar"
+};
+export { CLEAR_BUTTON_LABELS, DATE_FNS_LOCALES, RSUITE_LOCALES };

package/dist/components/DateRangePicker/helpers/createFormatDate.d.ts

@@ -0,0 +1,2 @@
+import { LocaleCode } from "../types/dataRange";
+export declare const createFormatDate: (localeCode: LocaleCode) => (date: Date | number, formatStr: string) => string;

package/dist/components/DateRangePicker/helpers/createFormatDate.js

@@ -0,0 +1,9 @@
+import { formatDate } from "date-fns";
+import { DATE_FNS_LOCALES } from "../constants/index.js";
+const createFormatDate = (localeCode)=>{
+    const locale = DATE_FNS_LOCALES[localeCode];
+    return (date, formatStr)=>formatDate(date, formatStr, {
+            locale
+        });
+};
+export { createFormatDate };

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

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+import { IconsNames } from "@ftdata/f-icons";
+import { FieldFeedbackType } from "../../types/feedback";
+import { LocaleCode } from "./types/dataRange";
+import "../../style/rsuite.css";
+import type { DateRangePickerProps as RsuiteDateRangePickerProps } from "rsuite";
+export type { DateRange, LocaleCode } from "./types/dataRange";
+export interface DateRangePickerProps extends Omit<RsuiteDateRangePickerProps, "locale"> {
+    /** Idioma/localização do componente. */
+    locale?: LocaleCode;
+    /** Texto de ajuda exibido abaixo do campo. */
+    helpText?: string;
+    /** Ícone exibido junto ao texto de ajuda. */
+    helpIcon?: IconsNames;
+    /** Estado de feedback visual do campo (ex.: erro, sucesso, aviso). */
+    feedback?: FieldFeedbackType;
+    /** Texto do label exibido acima do campo. */
+    label?: string;
+    /** Texto auxiliar exibido abaixo do label. */
+    sublabel?: string;
+    /** Define se o campo é obrigatório. */
+    required?: boolean;
+    /** Ícone exibido à esquerda do input. Pode ser `IconName` ou JSX. */
+    icon?: IconsNames | JSX.Element;
+}
+export default function DateRangePicker({ label, sublabel, helpText, helpIcon, feedback, disabled, required, locale, icon, value, onChange, onOpen, onClose, name, placement, ...rest }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/index.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CustomProvider, DateRangePicker } from "rsuite";
+import { Icon } from "@ftdata/f-icons";
+import { COLOR_NEUTRAL_MEDIUM } from "@ftdata/f-tokens";
+import HelpText from "../fields/components/HelpText/index.js";
+import Label from "../fields/components/Label/index.js";
+import RotateButton from "../fields/components/RotateButton/index.js";
+import { CLEAR_BUTTON_LABELS, RSUITE_LOCALES } from "./constants/index.js";
+import { createFormatDate } from "./helpers/createFormatDate.js";
+import { DateRangePickerContainer, DateRangePickerGlobalStyles, DateRangePickerWrapper, IconContainer, LabelContainer } from "./styles.js";
+import "../../style/rsuite.css";
+function DateRangePicker_DateRangePicker({ label, sublabel, helpText, helpIcon, feedback, disabled, required, locale = "pt-BR", icon, value, onChange, onOpen, onClose, name, placement, ...rest }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleOpen = ()=>{
+        setIsOpen(true);
+        onOpen?.();
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        onClose?.();
+    };
+    const handleClear = ()=>{
+        onChange?.(null, {});
+    };
+    const rsuiteLocale = RSUITE_LOCALES[locale];
+    const customFormatDate = createFormatDate(locale);
+    const clearLabel = CLEAR_BUTTON_LABELS[locale];
+    const showClearButton = value && !disabled;
+    return /*#__PURE__*/ jsxs(DateRangePickerWrapper, {
+        children: [
+            /*#__PURE__*/ jsx(DateRangePickerGlobalStyles, {
+                placement: placement
+            }),
+            /*#__PURE__*/ jsxs(LabelContainer, {
+                children: [
+                    label && /*#__PURE__*/ jsx(Label, {
+                        text: label,
+                        subtext: sublabel,
+                        required: required,
+                        htmlFor: name
+                    }),
+                    showClearButton && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: handleClear,
+                        children: clearLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DateRangePickerContainer, {
+                feedback: feedback,
+                disabled: disabled,
+                $active: isOpen,
+                $icon: !!icon,
+                children: [
+                    !!icon && /*#__PURE__*/ jsx(IconContainer, {
+                        children: "string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
+                            name: icon,
+                            color: COLOR_NEUTRAL_MEDIUM
+                        }) : icon
+                    }),
+                    /*#__PURE__*/ jsx(CustomProvider, {
+                        locale: rsuiteLocale,
+                        formatDate: customFormatDate,
+                        children: /*#__PURE__*/ jsx(DateRangePicker, {
+                            disabled: disabled,
+                            onOpen: handleOpen,
+                            onClose: handleClose,
+                            value: value,
+                            onChange: onChange,
+                            placement: placement,
+                            ...rest
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(RotateButton, {
+                        rotate: isOpen,
+                        disabled: disabled,
+                        className: "rs_rotate"
+                    })
+                ]
+            }),
+            helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText,
+                feedback: feedback,
+                icon: helpIcon
+            })
+        ]
+    });
+}
+export { DateRangePicker_DateRangePicker as default };

package/dist/components/DateRangePicker/styles.d.ts

@@ -0,0 +1,16 @@
+import { FieldFeedbackType } from "../../types/feedback";
+interface DateRangePickerGlobalStylesProps {
+    placement?: string;
+}
+export declare const DateRangePickerGlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & DateRangePickerGlobalStylesProps>;
+export declare const DateRangePickerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface DateRangePickerContainerProps {
+    feedback?: FieldFeedbackType;
+    disabled?: boolean;
+    $active?: boolean;
+    $icon?: boolean;
+}
+export declare const DateRangePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DateRangePickerContainerProps>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};