@swan-io/shared-business 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/DatePicker.d.ts

@@ -47,12 +47,10 @@ export type DatePickerProps = {
     error?: string;
     format: DateFormat;
     firstWeekDay: keyof typeof weekDayIndex;
-    monthNames: MonthNames;
-    weekDayNames: WeekDayNames;
     isSelectable?: (date: DatePickerDate) => boolean;
     onChange: (date: string) => void;
 };
-export declare const DatePicker: ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ label, value, error, format, firstWeekDay, isSelectable, onChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 type DatePickerModalProps = Except<DatePickerProps, "error"> & {
     visible: boolean;
     cancelLabel: string;
@@ -60,7 +58,7 @@ type DatePickerModalProps = Except<DatePickerProps, "error"> & {
     validate?: (value: string) => ValidatorResult;
     onDissmiss: () => void;
 };
-export declare const DatePickerModal: ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerModal: ({ value, format, firstWeekDay, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;
 export type DateRangePickerProps = {
     value: {
         start: string;
@@ -71,20 +69,18 @@ export type DateRangePickerProps = {
     startLabel: string;
     endLabel: string;
     firstWeekDay: keyof typeof weekDayIndex;
-    monthNames: MonthNames;
-    weekDayNames: WeekDayNames;
     isSelectable?: (date: DatePickerDate) => boolean;
     onChange: (date: {
         start: string;
         end: string;
     }) => void;
 };
-export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, isSelectable, onChange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 type DateRangePickerModalProps = DateRangePickerProps & {
     visible: boolean;
     cancelLabel: string;
     confirmLabel: string;
     onDissmiss: () => void;
 };
-export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }: DateRangePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }: DateRangePickerModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/DatePicker.js

@@ -111,6 +111,29 @@ const MODALE_MOBILE_THRESHOLD = 600;
 const DATE_PICKER_MOBILE_THRESHOLD = 400;
 const DATE_RANGE_PICKER_THRESHOLD = 800;
 const NB_DAYS_IN_WEEK = 7;
+const weekDayNames = [
+    t("datePicker.day.sunday"),
+    t("datePicker.day.monday"),
+    t("datePicker.day.tuesday"),
+    t("datePicker.day.wednesday"),
+    t("datePicker.day.thursday"),
+    t("datePicker.day.friday"),
+    t("datePicker.day.saturday"),
+];
+const monthNames = [
+    t("datePicker.month.january"),
+    t("datePicker.month.february"),
+    t("datePicker.month.march"),
+    t("datePicker.month.april"),
+    t("datePicker.month.may"),
+    t("datePicker.month.june"),
+    t("datePicker.month.july"),
+    t("datePicker.month.august"),
+    t("datePicker.month.september"),
+    t("datePicker.month.october"),
+    t("datePicker.month.november"),
+    t("datePicker.month.december"),
+];
 const weekDayIndex = {
     sunday: 0,
     monday: 1,
@@ -395,8 +418,8 @@ const YearMonthSelect = ({ monthNames, value, arrowsPosition = "right", hideArro
         : value.year >= maxValue.year && value.month >= maxValue.month;
     return (_jsxs(Box, { direction: "row", alignItems: "center", children: [arrowsPosition === "around" && hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth, ariaLabel: t("datePicker.month.previous") }), _jsx(Fill, { minWidth: 12 })] })), _jsx(LakeSelect, { items: monthItems, value: value.month, onValueChange: selectMonth, mode: "borderless", size: "small", hideErrors: true, style: styles.monthSelect }), _jsx(LakeSelect, { items: yearItems, value: value.year, onValueChange: selectYear, mode: "borderless", size: "small", hideErrors: true, style: styles.yearSelect }), hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 12 }), arrowsPosition === "right" && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth, ariaLabel: t("datePicker.month.previous") }), _jsx(Space, { width: 12 })] })), _jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-right-filled", disabled: isNextDisabled, onPress: setNextMonth, ariaLabel: t("datePicker.month.next") })] }))] }));
 };
-const MonthCalendar = ({ month, year, value, firstWeekDay, weekDayNames, isSelectable, onChange, }) => {
-    const dayNames = useMemo(() => getWeekDayNames(weekDayNames, firstWeekDay), [weekDayNames, firstWeekDay]);
+const MonthCalendar = ({ month, year, value, firstWeekDay, isSelectable, onChange, }) => {
+    const dayNames = useMemo(() => getWeekDayNames(weekDayNames, firstWeekDay), [firstWeekDay]);
     const weeks = useMemo(() => getMonthWeeks(month, year, firstWeekDay), [month, year, firstWeekDay]);
     return (_jsxs(View, { children: [_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: dayNames.map(dayName => (_jsx(View, { style: styles.dayName, children: _jsx(LakeText, { variant: "medium", color: colors.gray[600], children: dayName.substring(0, 1) }) }, dayName))) }), weeks.map((week, weekIndex) => (_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: week.map((date, dateIndex) => {
                     const isDisabled = date.match({
@@ -434,7 +457,7 @@ const MonthCalendar = ({ month, year, value, firstWeekDay, weekDayNames, isSelec
                                                     : colors.gray[900], children: date.match({ Some: ({ day }) => day.toString(), None: () => " " }) }), isToday && _jsx(View, { style: styles.todayIndicator })] })] }, dateIndex));
                 }) }, weekIndex)))] }));
 };
-const DatePickerPopoverContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, isSelectable, onChange, }) => {
+const DatePickerPopoverContent = ({ value, format, firstWeekDay, desktop, isSelectable, onChange, }) => {
     const [monthYear, setMonthYear] = useState(() => getYearMonth(value, format).getWithDefault(getTodayYearMonth()));
     // Automatically change displayed year and month when user change the value with text input
     useEffect(() => {
@@ -447,16 +470,16 @@ const DatePickerPopoverContent = ({ value, format, firstWeekDay, monthNames, wee
         const formatted = stringifyDate(date, format);
         onChange(formatted);
     }, [format, onChange]);
-    return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: monthYear, hideArrows: !desktop, onChange: setMonthYear }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: monthYear.month, year: monthYear.year, value: isNotNullishOrEmpty(value) ? parseDate(value, format) : Option.None(), firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleChange })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: monthYear, hideArrows: !desktop, onChange: setMonthYear }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: monthYear.month, year: monthYear.year, value: isNotNullishOrEmpty(value) ? parseDate(value, format) : Option.None(), firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleChange })] }));
 };
-export const DatePicker = ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
+export const DatePicker = ({ label, value, error, format, firstWeekDay, isSelectable, onChange, }) => {
     const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
     const ref = useRef(null);
     const [isOpened, { open, close }] = useDisclosure(false);
     const popoverId = useId();
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") }), render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") }), render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
 };
-export const DatePickerModal = ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }) => {
+export const DatePickerModal = ({ value, format, firstWeekDay, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }) => {
     const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
     const { Field, submitForm, setFieldValue, resetField } = useForm({
         date: {
@@ -481,7 +504,7 @@ export const DatePickerModal = ({ value, format, firstWeekDay, monthNames, weekD
             resetField("date");
         }
     }, [visible, resetField]);
-    return (_jsxs(DateModal, { visible: visible, maxWidth: 500, onPressClose: handleCancel, children: [_jsx(Field, { name: "date", children: ({ ref, value, error, onBlur, onChange }) => (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: label, render: id => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onBlur: onBlur, onChange: onChange })) })) }), _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange })] })) }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
+    return (_jsxs(DateModal, { visible: visible, maxWidth: 500, onPressClose: handleCancel, children: [_jsx(Field, { name: "date", children: ({ ref, value, error, onBlur, onChange }) => (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: label, render: id => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onBlur: onBlur, onChange: onChange })) })) }), _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, isSelectable: isSelectable, onChange: onChange })] })) }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
 };
 const DateModal = ({ children, visible, maxWidth, withCloseButton, onPressClose, }) => {
     const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
@@ -490,7 +513,7 @@ const DateModal = ({ children, visible, maxWidth, withCloseButton, onPressClose,
     }
     return (_jsx(BottomPanel, { visible: visible, onPressClose: onPressClose, children: _jsx(View, { style: styles.popover, children: children }) }));
 };
-const DateRangePickerModalContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, displayTwoCalendar, isSelectable, onChange, }) => {
+const DateRangePickerModalContent = ({ value, format, firstWeekDay, desktop, displayTwoCalendar, isSelectable, onChange, }) => {
     const isFirstMount = useFirstMountState();
     const [periods, setPeriods] = useState(() => {
         const startYearMonth = getYearMonth(value.start, format).getWithDefault(getTodayYearMonth());
@@ -578,11 +601,11 @@ const DateRangePickerModalContent = ({ value, format, firstWeekDay, monthNames,
         onChange(newValue);
     };
     if (!displayTwoCalendar) {
-        return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, hideArrows: !desktop, onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, hideArrows: !desktop, onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] }));
     }
-    return (_jsx(View, { children: _jsxs(Box, { direction: "row", alignItems: "start", children: [_jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, maxValue: decrementYearMonth(periods.end), arrowsPosition: "around", onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }), _jsx(Separator, { space: 24, horizontal: true }), _jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.end, minValue: incrementYearMonth(periods.start), arrowsPosition: "around", onChange: setEndPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.end.month, year: periods.end.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] })] }) }));
+    return (_jsx(View, { children: _jsxs(Box, { direction: "row", alignItems: "start", children: [_jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, maxValue: decrementYearMonth(periods.end), arrowsPosition: "around", onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] }), _jsx(Separator, { space: 24, horizontal: true }), _jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.end, minValue: incrementYearMonth(periods.start), arrowsPosition: "around", onChange: setEndPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.end.month, year: periods.end.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] })] }) }));
 };
-export const DateRangePicker = ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
+export const DateRangePicker = ({ value, error, format, startLabel, endLabel, firstWeekDay, isSelectable, onChange, }) => {
     const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
     const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
     const ref = useRef(null);
@@ -593,9 +616,9 @@ export const DateRangePicker = ({ value, error, format, startLabel, endLabel, fi
     const handleEndChange = useCallback((end) => {
         onChange({ start: value.start, end });
     }, [value, onChange]);
-    return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), _jsx(DateModal, { visible: isOpened, maxWidth: 900, withCloseButton: true, onPressClose: close, children: _jsx(DateRangePickerModalContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: onChange }) })] }));
+    return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), _jsx(DateModal, { visible: isOpened, maxWidth: 900, withCloseButton: true, onPressClose: close, children: _jsx(DateRangePickerModalContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: onChange }) })] }));
 };
-export const DateRangePickerModal = ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }) => {
+export const DateRangePickerModal = ({ value, error, format, firstWeekDay, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }) => {
     const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
     const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
     const [localeValue, setLocaleValue] = useState(value);
@@ -616,5 +639,5 @@ export const DateRangePickerModal = ({ value, error, format, firstWeekDay, month
         onChange(localeValue);
         onDissmiss();
     };
-    return (_jsxs(DateModal, { visible: visible, maxWidth: 900, onPressClose: handleCancel, children: [_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })] }), _jsx(DateRangePickerModalContent, { value: localeValue, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: setLocaleValue }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
+    return (_jsxs(DateModal, { visible: visible, maxWidth: 900, onPressClose: handleCancel, children: [_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })] }), _jsx(DateRangePickerModalContent, { value: localeValue, format: format, firstWeekDay: firstWeekDay, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: setLocaleValue }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
 };

package/src/components/UploadArea.d.ts

@@ -1,3 +1,4 @@
+import { AsyncData } from "@swan-io/boxed";
 import { IconName } from "@swan-io/lake/src/components/Icon";
 import { DropzoneOptions } from "react-dropzone";
 export type UploadFileStatus = ({
@@ -16,9 +17,10 @@ export type UploadFileStatus = ({
 type Props = {
     icon: IconName;
     documents?: UploadFileStatus[];
-    onRemoveFile?: (fileId: string) => void;
+    onRemoveDocument?: (fileId: string) => void;
+    onRemoveFile?: () => void;
     accept: string[];
-    value?: File | Element;
+    value?: AsyncData<File>;
     disabled?: boolean;
     onDropAccepted?: DropzoneOptions["onDropAccepted"];
     onDropRejected?: DropzoneOptions["onDropRejected"];
@@ -27,5 +29,5 @@ type Props = {
     error?: string;
     maxSize?: number;
 };
-export declare const UploadArea: ({ icon, accept, value, documents, disabled, onRemoveFile, onDropAccepted, onDropRejected, layout, description, error, maxSize, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const UploadArea: ({ icon, accept, value, documents, disabled, onRemoveFile, onRemoveDocument, onDropAccepted, onDropRejected, layout, description, error, maxSize, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/UploadArea.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
 import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
 import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
 import { backgroundColor, colors, gray75, radii, shadows, spacings, } from "@swan-io/lake/src/constants/design";
@@ -10,7 +12,7 @@ import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
 import { getIconNameFromFilename } from "@swan-io/lake/src/utils/file";
 import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { FileTile } from "@swan-io/shared-business/src/components/FileTile";
-import { Fragment, useLayoutEffect, useRef } from "react";
+import { Fragment, useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 import { StyleSheet, Text, View } from "react-native";
 import { match } from "ts-pattern";
@@ -103,32 +105,23 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
     preview: {
-        aspectRatio: 16 / 4,
+        aspectRatio: 16 / 5,
         width: "50%",
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+    },
+    deleteButton: {
+        position: "absolute",
+        right: spacings[20],
+        top: spacings[20],
     },
 });
-const UploadAreaPreview = ({ value }) => {
-    const containerRef = useRef(null);
-    useLayoutEffect(() => {
-        const element = containerRef.current;
-        if (element != null) {
-            while (element.firstChild) {
-                element.firstChild.remove();
-            }
-            const previewElement = value.cloneNode(true);
-            element.append(previewElement);
-            previewElement.style.position = "absolute";
-            previewElement.style.top = "0";
-            previewElement.style.left = "0";
-            previewElement.style.width = "100%";
-            previewElement.style.height = "100%";
-            previewElement.style.objectFit = "contain";
-            previewElement.style.objectPosition = "50% 50%";
-        }
-    }, [value]);
-    return _jsx(View, { ref: containerRef, style: styles.preview });
+const UploadAreaPreview = ({ file }) => {
+    const url = useMemo(() => URL.createObjectURL(file), [file]);
+    return _jsx(View, { style: [styles.preview, { backgroundImage: `url("${url}")` }] });
 };
-export const UploadArea = ({ icon, accept, value, documents = [], disabled = false, onRemoveFile, onDropAccepted, onDropRejected, layout = "vertical", description, error, maxSize, }) => {
+export const UploadArea = ({ icon, accept, value, documents = [], disabled = false, onRemoveFile, onRemoveDocument, onDropAccepted, onDropRejected, layout = "vertical", description, error, maxSize, }) => {
     const [isHovered, setIsHovered] = useBoolean(false);
     const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
         accept: accept.reduce((acc, item) => ({ ...acc, [item]: [] }), {}),
@@ -137,6 +130,18 @@ export const UploadArea = ({ icon, accept, value, documents = [], disabled = fal
         disabled,
         maxSize,
     });
+    const browseElement = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.icon, children: [_jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                            styles.decorativeIconLeft,
+                            (isDragActive || isHovered) && styles.decorativeIconLeftHovered,
+                        ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                            styles.decorativeIconRight,
+                            (isDragActive || isHovered) && styles.decorativeIconRightHovered,
+                        ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500] })] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", color: disabled ? colors.gray[200] : undefined, children: disabled
+                            ? t("uploadArea.noValue")
+                            : formatNestedMessage("uploadArea.dropFile", {
+                                browse: _jsx(Text, { style: styles.browse, children: t("uploadArea.browse") }),
+                            }) }), isNotNullish(error) ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { color: colors.negative[400], align: layout === "horizontal" ? "left" : "center", children: error })] })) : (!disabled &&
+                        isNotNullish(description) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { align: layout === "horizontal" ? "left" : "center", children: description })] })))] })] }));
     return (_jsxs(View, { style: commonStyles.fill, children: [_jsx("div", { ...getRootProps(), onMouseEnter: setIsHovered.on, onMouseLeave: setIsHovered.off, children: _jsxs(View, { "aria-errormessage": error ?? fileRejections[0]?.errors.join(", "), style: [
                         styles.container,
                         disabled && styles.disabled,
@@ -144,21 +149,16 @@ export const UploadArea = ({ icon, accept, value, documents = [], disabled = fal
                         !disabled && isHovered && styles.hoveredContainer,
                         isDragActive && styles.activeContainer,
                         (error != null || fileRejections.length > 0) && styles.errorContainer,
-                    ], children: [_jsx("input", { ...getInputProps() }), isNotNullish(value) ? (value instanceof Element ? (_jsx(UploadAreaPreview, { value: value })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: getIconNameFromFilename(value.name), size: 48, color: disabled ? colors.gray[200] : colors.current[500] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", children: t("uploadArea.droppedFile") }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[200], children: value.name })] })] }))) : (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.icon, children: [_jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
-                                                styles.decorativeIconLeft,
-                                                (isDragActive || isHovered) && styles.decorativeIconLeftHovered,
-                                            ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
-                                                styles.decorativeIconRight,
-                                                (isDragActive || isHovered) && styles.decorativeIconRightHovered,
-                                            ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500] })] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", color: disabled ? colors.gray[200] : undefined, children: disabled
-                                                ? t("uploadArea.noValue")
-                                                : formatNestedMessage("uploadArea.dropFile", {
-                                                    browse: _jsx(Text, { style: styles.browse, children: t("uploadArea.browse") }),
-                                                }) }), isNotNullish(error) ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { color: colors.negative[400], align: layout === "horizontal" ? "left" : "center", children: error })] })) : (!disabled &&
-                                            isNotNullish(description) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { align: layout === "horizontal" ? "left" : "center", children: description })] })))] })] }))] }) }), documents.map(({ ...document }, index) => {
+                    ], children: [_jsx("input", { ...getInputProps() }), isNotNullish(value)
+                            ? value.match({
+                                NotAsked: () => browseElement,
+                                Loading: () => _jsx(LoadingView, {}),
+                                Done: value => value.type.startsWith("image/") ? (_jsxs(_Fragment, { children: [_jsx(UploadAreaPreview, { file: value }), onRemoveFile != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onRemoveFile, style: styles.deleteButton, ariaLabel: t("common.remove") })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: getIconNameFromFilename(value.name), size: 48, color: disabled ? colors.gray[200] : colors.current[500] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", children: t("uploadArea.droppedFile") }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[200], children: value.name })] }), onRemoveFile != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", style: styles.deleteButton, onPress: onRemoveFile, ariaLabel: t("common.remove") })) : null] })),
+                            })
+                            : browseElement] }) }), documents.map(({ ...document }, index) => {
                 return (_jsxs(Fragment, { children: [_jsx(Space, { height: index === 0 ? 8 : 4 }), match(document)
-                            .with({ status: "finished" }, () => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: onRemoveFile ? () => onRemoveFile(document.id) : undefined })))
-                            .with({ status: "failed" }, ({ error }) => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: () => (onRemoveFile ? onRemoveFile(document.id) : undefined), variant: "refused", title: error })))
+                            .with({ status: "finished" }, () => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: onRemoveDocument ? () => onRemoveDocument(document.id) : undefined })))
+                            .with({ status: "failed" }, ({ error }) => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: () => (onRemoveDocument ? onRemoveDocument(document.id) : undefined), variant: "refused", title: error })))
                             .with({ status: "uploading" }, ({ progress }) => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.item, children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], children: t("uploadArea.uploading") }), _jsx(Space, { width: 20 }), _jsx(View, { role: "progressbar", style: styles.progressBar, children: _jsx(View, { style: [styles.progress, { width: `${progress}%` }] }) })] })))
                             .exhaustive()] }, document.id));
             })] }));

package/src/utils/date.d.ts

@@ -1,5 +1,2 @@
-import { MonthNames, WeekDayNames } from "@swan-io/shared-business/src/components/DatePicker";
 export declare const decodeBirthDate: (value: string) => string;
 export declare const encodeBirthDate: (value: string) => string;
-export declare const weekDayNames: WeekDayNames;
-export declare const monthNames: MonthNames;

package/src/utils/date.js

@@ -1,5 +1,4 @@
 import dayjs from "dayjs";
-import { t } from "./i18n";
 export const decodeBirthDate = (value) => {
     const date = dayjs.utc(value, "YYYY-MM-DD");
     return date.isValid() ? date.format("DD/MM/YYYY") : "";
@@ -8,26 +7,3 @@ export const encodeBirthDate = (value) => {
     const date = dayjs.utc(value, "DD/MM/YYYY");
     return date.isValid() ? date.format("YYYY-MM-DD") : "";
 };
-export const weekDayNames = [
-    t("datePicker.day.sunday"),
-    t("datePicker.day.monday"),
-    t("datePicker.day.tuesday"),
-    t("datePicker.day.wednesday"),
-    t("datePicker.day.thursday"),
-    t("datePicker.day.friday"),
-    t("datePicker.day.saturday"),
-];
-export const monthNames = [
-    t("datePicker.month.january"),
-    t("datePicker.month.february"),
-    t("datePicker.month.march"),
-    t("datePicker.month.april"),
-    t("datePicker.month.may"),
-    t("datePicker.month.june"),
-    t("datePicker.month.july"),
-    t("datePicker.month.august"),
-    t("datePicker.month.september"),
-    t("datePicker.month.october"),
-    t("datePicker.month.november"),
-    t("datePicker.month.december"),
-];