@homefile/components-v2 2.60.2 → 2.61.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": {
@@ -1131,7 +1132,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/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/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.61.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",