@transferwise/components 46.100.1 → 46.101.0

package/src/tooltip/Tooltip.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
 
 import Button from '../button';
 import { storyConfig } from '../test-utils';

package/src/typeahead/Typeahead.story.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search as SearchIcon } from '@transferwise/icons';
-import { userEvent, within, fn } from '@storybook/test';
+import { userEvent, within, fn } from 'storybook/test';
 
 import Typeahead, { type TypeaheadOption } from './Typeahead';
 import { Size } from '../common';

package/src/upload/Upload.messages.ts

@@ -17,6 +17,10 @@ export default defineMessages({
     id: 'neptune.Upload.csTooLargeMessage',
     defaultMessage: 'Please provide a file smaller than {maxSize}MB',
   },
+  csTooLargeNoLimitMessage: {
+    id: 'neptune.Upload.csTooLargeNoLimitMessage',
+    defaultMessage: 'Please provide a smaller file',
+  },
   csWrongTypeMessage: {
     id: 'neptune.Upload.csWrongTypeMessage',
     defaultMessage: 'File type not supported. Please try again with a different file',
@@ -41,6 +45,10 @@ export default defineMessages({
     id: 'neptune.Upload.usPlaceholder',
     defaultMessage: 'Drag and drop a file less than {maxSize}MB',
   },
+  usPlaceholderNoLimit: {
+    id: 'neptune.Upload.usPlaceholderNoLimit',
+    defaultMessage: 'Drag and drop a file',
+  },
   retry: {
     id: 'neptune.Upload.retry',
     defaultMessage: 'Retry',

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 remove max size limit, when maxSize is the `null`', async () => {
+    render(<Upload {...props} usPlaceholder={undefined} maxSize={null} />);
+    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,20 +1,136 @@
-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';
-import { Field } from '../field/Field';
 
 const meta = {
   component: Upload,
   title: 'Forms/Upload',
-
+  args: {
+    // Set all props to undefined so Storybook can auto-detect them
+    animationDelay: undefined,
+    csButtonText: undefined,
+    csFailureText: undefined,
+    csSuccessText: undefined,
+    csTooLargeMessage: undefined,
+    csWrongTypeMessage: undefined,
+    httpOptions: undefined,
+    fetcher: undefined,
+    maxSize: undefined,
+    psButtonText: undefined,
+    psButtonDisabled: undefined,
+    psProcessingText: undefined,
+    size: undefined,
+    usAccept: undefined,
+    usButtonText: undefined,
+    usButtonRetryText: undefined,
+    usDisabled: undefined,
+    usDropMessage: undefined,
+    usHelpImage: undefined,
+    usLabel: undefined,
+    usPlaceholder: undefined,
+    errorIconLabel: undefined,
+    onCancel: undefined,
+    onFailure: undefined,
+    onStart: undefined,
+    onSuccess: undefined,
+    uploadStep: undefined,
+  },
   argTypes: {
     maxSize: {
       control: {
         type: 'number',
         min: 0,
       },
+      description:
+        'Filesize expressed in Bytes.<br />If set to `null`, no size limit will be applied.',
+      table: {
+        type: {
+          summary: 'number | null',
+        },
+        defaultValue: {
+          summary: MAX_SIZE_DEFAULT.toString(),
+          detail: '5 MB',
+        },
+      },
+    },
+    fetcher: {
+      description:
+        'You can provide a fetcher function with the same interface as the global fetch function, which is used by default.',
+      table: {
+        type: {
+          summary: 'PostDataFetcher',
+        },
+      },
+      control: false,
+    },
+    usAccept: {
+      description:
+        'You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".\nUsing "*" will allow every file type to be uploaded.',
+    },
+    errorIconLabel: {
+      description:
+        "Override for the InlineAlert icon's default, accessible name announced by the screen readers",
+    },
+    usHelpImage: {
+      control: false,
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+      },
+    },
+    httpOptions: {
+      table: {
+        type: {
+          summary:
+            'PostDataHTTPOptions & { fileInputName?: string; data?: Record<string, string | Blob>; }',
+        },
+      },
+    },
+    size: {
+      table: {
+        type: {
+          summary: `Size.SMALL | Size.MEDIUM | Size.LARGE`,
+        },
+      },
+    },
+    uploadStep: {
+      description: '**@deprecated** Only a single variant exists, please remove this prop.',
+      table: {
+        type: {
+          summary: '"uploadImageStep"',
+        },
+      },
+    },
+    onCancel: {
+      table: {
+        type: {
+          summary: '() => void',
+        },
+      },
+    },
+    onFailure: {
+      table: {
+        type: {
+          summary: '(error: unknown) => void',
+        },
+      },
+    },
+    onStart: {
+      table: {
+        type: {
+          summary: '(file: File) => void',
+        },
+      },
+    },
+    onSuccess: {
+      table: {
+        type: {
+          summary: '(response: string | Response, fileName: string) => void',
+        },
+      },
     },
   },
 } satisfies Meta<typeof Upload>;
@@ -24,7 +140,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   args: {
-    maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',
     usLabel: 'Front of your ID document',
     usDisabled: false,

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

@@ -1,8 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta } from '@storybook/react-webpack5';
 
 import Upload from '.';
-import { MAX_SIZE_DEFAULT } from './Upload';
 import { Field } from '../field/Field';
 
 const meta = {
@@ -59,6 +57,10 @@ export const MaxSizes = () => {
             <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
           </Field>
         ))}
+
+        <Field label="Max size: null (no limit)">
+          <Upload usLabel="Pick a file, any file" maxSize={null} />
+        </Field>
       </div>
       <div style={{ flex: 1 }}>
         {decimalSizes.map((maxSize) => (

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;
 
@@ -31,10 +30,14 @@ export interface UploadProps extends WrappedComponentProps {
   };
   /**
    * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
-   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
+   * `function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>`
    */
   fetcher?: PostDataFetcher;
-  maxSize?: number;
+  /**
+   * Filesize expressed in B.<br />If set to `null`, no size limit will be applied.
+   * @default 5000000 (5 MB)
+   */
+  maxSize?: number | null;
   psButtonText?: string;
   psButtonDisabled?: boolean;
   psProcessingText?: string;
@@ -114,9 +117,9 @@ export class Upload extends Component<UploadProps, UploadState> {
       case 413:
         return (
           csTooLargeMessage ||
-          intl.formatMessage(messages.csTooLargeMessage, {
-            maxSize: roundFileSize(maxSize),
-          })
+          (typeof maxSize === 'number'
+            ? intl.formatMessage(messages.csTooLargeMessage, { maxSize: roundFileSize(maxSize) })
+            : intl.formatMessage(messages.csTooLargeNoLimitMessage))
         );
       case 415:
         return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);
@@ -279,7 +282,7 @@ export class Upload extends Component<UploadProps, UploadState> {
       return false;
     }
 
-    if (!isSizeValid(file, maxSize)) {
+    if (typeof maxSize === 'number' && !isSizeValid(file, maxSize)) {
       this.asyncResponse(
         new ResponseError(
           new Response(null, {
@@ -344,6 +347,18 @@ export class Upload extends Component<UploadProps, UploadState> {
       uploadedImage,
     } = this.state;
 
+    const placeholder = ((): string => {
+      if (usPlaceholder) {
+        return usPlaceholder;
+      }
+
+      if (typeof maxSize === 'number') {
+        return intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) });
+      }
+
+      return intl.formatMessage(messages.usPlaceholderNoLimit);
+    })();
+
     return (
       <div
         className={clsx('droppable-area', {
@@ -370,10 +385,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}
           />
         )}
 
@@ -400,10 +412,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usDisabled={usDisabled}
             usHelpImage={null}
             usLabel={usLabel}
-            usPlaceholder={
-              usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
-            }
+            usPlaceholder={placeholder}
             errorMessage={this.getErrorMessage(
               response != null &&
                 typeof response === 'object' &&

package/src/upload/utils/isTypeValid/isTypeValid.spec.ts

@@ -12,7 +12,9 @@ const data64Img = 'data:image/png;something';
 
 describe('isTypeValid', () => {
   describe('when type is provided', () => {
-    it.each([pdfFile, pngFile])('returns true for wildcard rule %s', (file) => {
+    const files = [pdfFile, pngFile] as const;
+
+    it.each(files)('returns true for wildcard rule %s', (file: (typeof files)[number]) => {
       expect(isTypeValid(file, '*')).toBe(true);
     });
 

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',
@@ -233,6 +233,13 @@ export const WithFileSizeErrorMessage: Story = {
   },
 };
 
+export const WithNoSizeLimit: Story = {
+  args: {
+    ...props,
+    sizeLimit: null,
+  },
+};
+
 export const WithCustomUploadButtonTitle: Story = {
   args: {
     ...props,

package/src/uploadInput/UploadInput.tsx

@@ -91,7 +91,7 @@ export type UploadInputProps = {
   maxFilesErrorMessage?: string;
 
   /**
-   * Error message to show when files over a allowed size limit are uploaded
+   * Error message to show when files over allowed size limit are uploaded
    */
   sizeLimitErrorMessage?: string;
 } & Pick<
@@ -269,7 +269,7 @@ const UploadInput = ({
           continue;
         }
 
-        if (!isSizeValid(file, sizeLimit * 1000)) {
+        if (typeof sizeLimit === 'number' && !isSizeValid(file, sizeLimit * 1000)) {
           const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
           handleFileUploadFailure(file, failureMessage);
           continue;

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 `null`', () => {
+      renderComponent({ ...props, fileTypes: ['*'], sizeLimit: null });
+      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

@@ -42,9 +42,11 @@ export type UploadButtonProps = {
   fileTypes?: AllowedFileTypes;
 
   /**
-   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)
+   * Size limit in KBs (1000 KB = 1 MB).
+   * If set to `null`, no size limit will be applied.
+   * @default 5000
    */
-  sizeLimit?: number;
+  sizeLimit?: number | null;
 
   /**
    * Description for the upload button
@@ -173,10 +175,14 @@ const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
       const derivedFileDescription =
         fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
 
-      return formatMessage(MESSAGES.instructions, {
-        fileTypes: derivedFileDescription,
-        size: Math.round(sizeLimit / 1000),
-      });
+      if (typeof sizeLimit === 'number') {
+        return formatMessage(MESSAGES.instructions, {
+          fileTypes: derivedFileDescription,
+          size: Math.round(sizeLimit / 1000),
+        });
+      }
+
+      return derivedFileDescription;
     }
 
     function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {

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>
-`;