@transferwise/components 0.0.0-experimental-cb7b730 → 0.0.0-experimental-9463364

package/src/upload/Upload.spec.tsx

@@ -355,4 +355,10 @@ describe('Upload Component', () => {
     expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
     expect(props.onStart).not.toHaveBeenCalled();
   });
+
+  test('should handle when maxSize is the MAX_SAFE_INTEGER', async () => {
+    render(<Upload {...props} usPlaceholder={undefined} maxSize={Number.MAX_SAFE_INTEGER} />);
+    expect(await screen.findByText(/Drag and drop a file/i)).toBeInTheDocument();
+    expect(screen.queryByText(/less than/i)).not.toBeInTheDocument();
+  });
 });

package/src/upload/Upload.story.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';

package/src/upload/Upload.tests.story.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';

package/src/upload/Upload.tsx

@@ -10,7 +10,6 @@ import messages from './Upload.messages';
 import { UploadImageStep, ProcessingStep, CompleteStep } from './steps';
 import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';
 import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
-import { ProcessIndicatorStatus } from '../processIndicator';
 
 export const MAX_SIZE_DEFAULT = 5000000;
 
@@ -344,6 +343,8 @@ export class Upload extends Component<UploadProps, UploadState> {
       uploadedImage,
     } = this.state;
 
+    const placeholder = getPlaceholder(intl, usPlaceholder, maxSize);
+
     return (
       <div
         className={clsx('droppable-area', {
@@ -370,10 +371,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usDisabled={usDisabled}
             usHelpImage={usHelpImage}
             usLabel={usLabel}
-            usPlaceholder={
-              usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
-            }
+            usPlaceholder={placeholder}
           />
         )}
 
@@ -456,3 +454,17 @@ const roundFileSize = (bytes: number) => {
   }
   return megabytes.toFixed(3);
 };
+
+const getPlaceholder = (
+  intl: WrappedComponentProps['intl'],
+  usPlaceholder: string | undefined,
+  maxSize: number,
+): string => {
+  if (usPlaceholder) {
+    return usPlaceholder;
+  }
+  if (maxSize >= Number.MAX_SAFE_INTEGER) {
+    return intl.formatMessage(messages.usPlaceholderNoLimit);
+  }
+  return intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) });
+};

package/src/uploadInput/UploadInput.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
 import { Field } from '../field/Field';
 

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -1,10 +1,10 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent } from '@storybook/test';
+import { userEvent } from 'storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',

package/src/uploadInput/uploadButton/UploadButton.spec.tsx

@@ -96,6 +96,12 @@ describe('UploadButton', () => {
       expect(screen.getByText('All file types, less than 5MB')).toBeInTheDocument();
     });
 
+    it('should show no file size limit if sizeLimit is set to Number.MAX_SAFE_INTEGER', () => {
+      renderComponent({ ...props, fileTypes: ['*'], sizeLimit: Number.MAX_SAFE_INTEGER });
+      expect(screen.getByText('All file types')).toBeInTheDocument();
+      expect(screen.queryByText(/less than/i)).not.toBeInTheDocument();
+    });
+
     it('should show custom description if provided', () => {
       const description = 'Test description';
       renderComponent({ ...props, fileTypes: ['*'], description });

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -173,6 +173,10 @@ const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
       const derivedFileDescription =
         fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
 
+      if (sizeLimit >= Number.MAX_SAFE_INTEGER) {
+        return derivedFileDescription;
+      }
+
       return formatMessage(MESSAGES.instructions, {
         fileTypes: derivedFileDescription,
         size: Math.round(sizeLimit / 1000),

package/src/withId/withId.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { WithoutId, WithCustomId, WithEmptyId } from './withId.story';
 import { withIdSource } from './story/source';
 

package/src/withId/withId.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button, withId, type WithIdProps } from '..';
 
 type Story = StoryObj<typeof withId>;

package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponsivePanel on desktop renders Panel 1`] = `
-<div>
-  <div
-    class="np-panel np-panel--open"
-  >
-    children
-  </div>
-</div>
-`;
-
-exports[`ResponsivePanel on mobile renders bottomSheet 1`] = `
-<div>
-  <div
-    class="np-bottom-sheet"
-  >
-    children
-  </div>
-</div>
-`;