@homefile/components-v2 2.60.2 → 2.62.0

package/dist/assets/locales/en/index.json

@@ -266,7 +266,8 @@
       "placeholderDescription": "Enter a description",
       "title": "Files",
       "errorSize": "Please select a file less than 25MB",
-      "errorType": "File type must be .jpeg, .jpg, .pdf, .txt, .doc or .docx"
+      "errorType": "File type must be .jpeg, .jpg, .pdf, .txt, .doc or .docx",
+      "errorTypeWithSpreadsheets": "File type must be .jpeg, .jpg, .pdf, .txt, .doc, .docx, .xlsx, .xls or .csv"
     },
     "fileThumbnail": "File Thumbnail",
     "filters": {
@@ -688,7 +689,8 @@
   "newPassword": {
     "confirm": "Confirm Password",
     "create": "Create Password",
-    "title": "Please enter your new password."
+    "title": "Please enter your new password.",
+    "support": "Still stuck? Email"
   },
   "notifications": {
     "noNotifications": "You currently have no notifications.",
@@ -1131,7 +1133,7 @@
   "signin": {
     "forgotBt": "Forgot Password?",
     "title": "Please Log in",
-    "titleSocial": "Please login with",
+    "titleSocial": "Please login",
     "signinBt": "Log in",
     "signupBt": "Sign up",
     "signup": "Don’t have a Homefile account?",

package/dist/components/folderPanel/folderDetails/FilesUploader.js

@@ -6,6 +6,7 @@ export const FilesUploader = ({ displayType, initialHeight, onUpload, totalFiles
     const { acceptedFiles, errorMessage, getInputProps, getRootProps } = useFilesUploader({
         onUpload,
         uploading,
+        acceptSpreadsheets: true,
     });
     const isGrid = displayType === 'grid';
     const hasFiles = totalFiles > 0;

package/dist/components/notifications/NotificationCard.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Flex, IconButton, Stack, Text } from '@chakra-ui/react';
+import { Box, Container, Flex, IconButton, Stack, Text } from '@chakra-ui/react';
 import { Close } from '../../components';
-import { formatDateWithAt } from '../../utils';
+import { formatNotificationDate } from '../../utils';
+// Matt's notification design (2026-10): a soft shadow, the title in Poppins
+// semibold caps, "11:35 AM · Wed, Oct 12, 2024" in grey, the message in
+// Assistant 16px / 20px line height, 20px padding under it, 13px left and
+// right, a 16px close X, a 12px title (Matt, 2026-10-05). Every line height
+// is at most font size + 4px (his rule): title 16px, date 14px, message 20px.
+// Each kind keeps its own colour.
+const DATE_GREY = '#707070';
+const MESSAGE_COLOR = '#3E4045';
+const CLOSE_BLUE = '#3C80BA';
 export const NotificationCard = ({ _id, createdAt, label, message, onDismiss, status, }) => {
     const bgColors = {
         added: 'lightGreen.3',
@@ -15,5 +24,6 @@ export const NotificationCard = ({ _id, createdAt, label, message, onDismiss, st
         shared: 'yellow.1',
         updated: 'lightBlue.9',
     };
-    return (_jsx(Container, { p: "2", bg: bgColors[status], children: _jsxs(Stack, { spacing: "3", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "10px", fontWeight: "semibold", textTransform: "uppercase", color: colors[status], children: label }), _jsxs(Flex, { gap: "1", align: "center", children: [_jsx(Text, { variant: "date", children: formatDateWithAt({ date: createdAt }) }), _jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onDismiss(_id), icon: _jsx(Close, { size: 11 }) })] })] }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: message })] }) }));
+    const { time, day } = formatNotificationDate({ date: createdAt });
+    return (_jsx(Container, { pt: "2", pb: "20px", px: "13px", bg: bgColors[status], boxShadow: "0 3px 6px rgba(0, 0, 0, 0.16)", children: _jsxs(Stack, { spacing: "3", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "12px", lineHeight: "16px", fontFamily: "primary", fontWeight: "semibold", textTransform: "uppercase", color: colors[status], children: label }), _jsxs(Flex, { gap: "2", align: "center", children: [_jsxs(Flex, { gap: "1.5", align: "center", children: [_jsx(Text, { variant: "date", lineHeight: "14px", color: DATE_GREY, children: time }), _jsx(Box, { "aria-hidden": true, w: "2px", h: "2px", borderRadius: "full", bg: DATE_GREY }), _jsx(Text, { variant: "date", lineHeight: "14px", color: DATE_GREY, children: day })] }), _jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onDismiss(_id), icon: _jsx(Close, { size: 16, stroke: CLOSE_BLUE }) })] })] }), _jsx(Text, { fontSize: "16px", lineHeight: "20px", fontFamily: "secondary", color: MESSAGE_COLOR, children: message })] }) }));
 };

package/dist/components/onboarding/pages/EmailValidation.js

@@ -4,5 +4,5 @@ import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/reac
 import { Logo, ButtonLoader, BasePageWrapper } from '../../../components';
 import { Confirmation } from '../../../assets/images';
 export const EmailValidation = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
 };

package/dist/components/onboarding/pages/NewPassword.d.ts

@@ -1,2 +1,2 @@
 import { NewPasswordI } from '../../../interfaces';
-export declare const NewPassword: ({ isLoading, handleReset, userEmail, }: NewPasswordI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPassword: ({ isLoading, handleReset, userEmail, errorMessage, errorActionText, handleErrorAction, supportEmail, }: NewPasswordI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/onboarding/pages/NewPassword.js

@@ -4,15 +4,17 @@ import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react';
 import { Logo, Footer, ButtonLoader, PasswordInput, BasePageWrapper, } from '../../../components';
 import { isValidPassword, passwordMatch } from '../../../utils';
 import { useNewPassword } from '../../../hooks';
-export const NewPassword = ({ isLoading, handleReset, userEmail, }) => {
+export const NewPassword = ({ isLoading, handleReset, userEmail, errorMessage, errorActionText, handleErrorAction, supportEmail, }) => {
     const { inputs, handleInputChange, handleSubmit, isValidated } = useNewPassword(handleReset);
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "blue.2", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
-                                                ? t('forms.errorPasswordLength')
-                                                : t('forms.errorPasswordMatch'), hasError: isValidated &&
-                                                (!isValidPassword(inputs.password) ||
-                                                    !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('newPassword.create'), value: inputs.password || '', handleChange: handleInputChange }), _jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.confirmPassword)
-                                                ? t('forms.errorPasswordLength')
-                                                : t('forms.errorPasswordMatch'), hasError: isValidated &&
-                                                (!isValidPassword(inputs.confirmPassword) ||
-                                                    !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] }), _jsx(Footer, {})] }));
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "gray.3", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: errorMessage ? 'base' : 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), Boolean(errorMessage) && (
+                                        // Faint magenta box behind the whole message (Matt, 2026-10-06).
+                                        _jsxs(Stack, { spacing: 2, align: "center", bg: "status.errorBg", borderRadius: "sm", px: 4, py: 3, children: [_jsx(Text, { variant: "error", textAlign: "center", children: errorMessage }), Boolean(errorActionText) && handleErrorAction && (_jsx(Button, { variant: "text", fontSize: "xs", lineHeight: "13px", h: "auto", onClick: handleErrorAction, children: errorActionText })), Boolean(supportEmail) && (_jsxs(Text, { textAlign: "center", variant: "hint", children: [t('newPassword.support'), ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] }))] })), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
+                                                        ? t('forms.errorPasswordLength')
+                                                        : t('forms.errorPasswordMatch'), hasError: isValidated &&
+                                                        (!isValidPassword(inputs.password) ||
+                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('newPassword.create'), value: inputs.password || '', handleChange: handleInputChange }), _jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.confirmPassword)
+                                                        ? t('forms.errorPasswordLength')
+                                                        : t('forms.errorPasswordMatch'), hasError: isValidated &&
+                                                        (!isValidPassword(inputs.confirmPassword) ||
+                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] }), _jsx(Footer, {})] }));
 };

package/dist/components/onboarding/pages/ResendResetPassword.js

@@ -4,5 +4,5 @@ import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/reac
 import { BasePageWrapper, ButtonLoader, Logo } from '../../../components';
 import { ResendPassword } from '../../../assets/images';
 export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, handleBack }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
 };

package/dist/hooks/folderPanel/useFilesUploader.d.ts

@@ -3,8 +3,9 @@ interface FilesUploaderHookI {
     onUpload?: (files: FolderFileI[]) => void;
     uploading: boolean;
     displayImages?: string[];
+    acceptSpreadsheets?: boolean;
 }
-export declare const useFilesUploader: ({ onUpload, uploading, displayImages, }: FilesUploaderHookI) => {
+export declare const useFilesUploader: ({ onUpload, uploading, displayImages, acceptSpreadsheets, }: FilesUploaderHookI) => {
     acceptedFiles: FolderFileI[];
     errorMessage: string;
     getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T) => T;

package/dist/hooks/folderPanel/useFilesUploader.js

@@ -2,19 +2,21 @@ import { handleMapFile } from '../../utils';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-export const useFilesUploader = ({ onUpload, uploading, displayImages = [], }) => {
+const SPREADSHEETS = {
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
+        '.xlsx',
+    ],
+    'application/vnd.ms-excel': ['.xls'],
+    'text/csv': ['.csv'],
+};
+export const useFilesUploader = ({ onUpload, uploading, displayImages = [], acceptSpreadsheets = false, }) => {
     const [isUploading, setIsUploading] = useState(false);
     const [thumbnails, setThumbnails] = useState(displayImages);
     const [acceptedFiles, setAcceptedFiles] = useState([]);
     const [errorMessage, setErrorMessage] = useState('');
     const hasError = errorMessage !== '';
     const { getRootProps, getInputProps } = useDropzone({
-        accept: {
-            'image/*': ['.jpeg', '.jpg', '.pdf', '.txt', '.doc', '.docx', '.heic'],
-            'video/mp4': ['.mp4', '.MP4'],
-            'video/mov': ['.mov', '.MOV'],
-            'video/quicktime': ['.mov', '.MOV'],
-        },
+        accept: Object.assign({ 'image/*': ['.jpeg', '.jpg', '.pdf', '.txt', '.doc', '.docx', '.heic'], 'video/mp4': ['.mp4', '.MP4'], 'video/mov': ['.mov', '.MOV'], 'video/quicktime': ['.mov', '.MOV'] }, (acceptSpreadsheets ? SPREADSHEETS : {})),
         disabled: isUploading,
         maxSize: 25000000,
         onDrop: (uploadedFiles) => {
@@ -24,7 +26,9 @@ export const useFilesUploader = ({ onUpload, uploading, displayImages = [], }) =
         onDropRejected: (rejectFiles) => {
             setErrorMessage(rejectFiles[0].errors[0].code === 'file-too-large'
                 ? t('folderSharing.details.errorSize')
-                : t('folderSharing.details.errorType'));
+                : t(acceptSpreadsheets
+                    ? 'folderSharing.details.errorTypeWithSpreadsheets'
+                    : 'folderSharing.details.errorType'));
         },
     });
     useEffect(() => {

package/dist/interfaces/pages/NewPassword.interface.d.ts

@@ -6,4 +6,11 @@ export interface NewPasswordI {
     isLoading: boolean;
     handleReset: (form: NewPasswordFormI) => void;
     userEmail: string;
+    /** Shown above the password fields, in the same error style as sign-in. */
+    errorMessage?: string;
+    /** Optional button under the error line (for example "Send a new link"). */
+    errorActionText?: string;
+    handleErrorAction?: () => void;
+    /** Optional support address under the error line, shown as an email link. */
+    supportEmail?: string;
 }

package/dist/stories/onboarding/pages/NewPassword.stories.d.ts

@@ -9,3 +9,22 @@ export declare const NewPasswordPage: {
         userEmail: string;
     };
 };
+export declare const NewPasswordLinkExpired: {
+    (args: NewPasswordI): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isLoading: boolean;
+        userEmail: string;
+        errorMessage: string;
+        errorActionText: string;
+        handleErrorAction: () => void;
+    };
+};
+export declare const NewPasswordNoAnswer: {
+    (args: NewPasswordI): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isLoading: boolean;
+        userEmail: string;
+        errorMessage: string;
+        supportEmail: string;
+    };
+};

package/dist/stories/onboarding/pages/NewPassword.stories.js

@@ -11,3 +11,20 @@ NewPasswordPage.args = {
     isLoading: true,
     userEmail: 'user@user.com',
 };
+// The reset link was refused (expired, already used, or too many tries).
+export const NewPasswordLinkExpired = (args) => (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
+NewPasswordLinkExpired.args = {
+    isLoading: false,
+    userEmail: 'user@user.com',
+    errorMessage: 'This link has expired.',
+    errorActionText: 'Send a new link',
+    handleErrorAction: () => { },
+};
+// The request got no answer (offline, or the server didn't respond).
+export const NewPasswordNoAnswer = (args) => (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
+NewPasswordNoAnswer.args = {
+    isLoading: false,
+    userEmail: 'user@user.com',
+    errorMessage: "We couldn't reach Homefile. Check your connection, then press Reset Password.",
+    supportEmail: 'support@homefile.com',
+};

package/dist/utils/Formaters.utils.d.ts

@@ -6,6 +6,10 @@ interface FormatDateI {
 export declare const formatDate: ({ date, locale }: FormatDateI) => string;
 export declare const formatDateWithAt: ({ date, locale, }: FormatDateI) => string;
 export declare const formatLongDateWithAt: ({ date }: FormatDateI) => string;
+export declare const formatNotificationDate: ({ date }: FormatDateI) => {
+    time: string;
+    day: string;
+};
 export declare const shortFormatDate: ({ date, locale, }: FormatDateI) => string;
 export declare const monthAndYearFormatDate: ({ date, locale, }: FormatDateI) => string;
 export declare const dayAndMonthFormatDate: ({ date, locale, }: FormatDateI) => string;

package/dist/utils/Formaters.utils.js

@@ -43,6 +43,16 @@ export const formatLongDateWithAt = ({ date }) => {
     const timeFormat = format(parsedDate, 'h:mm a');
     return `${dateFormat}  @${timeFormat}`;
 };
+// Notification cards (Matt's design, 2026-10): "11:35 AM" · "Wed, Oct 12, 2024".
+export const formatNotificationDate = ({ date }) => {
+    if (!date)
+        return { time: '', day: '' };
+    const parsedDate = new Date(date);
+    return {
+        time: format(parsedDate, 'h:mm a'),
+        day: format(parsedDate, 'EEE, MMM d, yyyy'),
+    };
+};
 export const shortFormatDate = ({ date, locale = 'en-US', }) => {
     if (!date)
         return '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.60.2",
+  "version": "2.62.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",