@popsure/dirty-swan 0.33.4 → 0.33.5

package/dist/esm/lib/components/dateSelector/index.stories.d.ts

@@ -0,0 +1,65 @@
+import { DateSelectorProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ value, onChange, yearBoundaries, displayCalendar, placeholders, dayjsLocale, firstDayOfWeek, }: DateSelectorProps) => JSX.Element;
+    decorators: ((Story: any) => JSX.Element)[];
+    argTypes: {
+        yearBoundaries: {
+            description: string;
+            defaultValue: {
+                min: number;
+                max: number;
+            };
+        };
+        displayCalendar: {
+            description: string;
+            defaultValue: boolean;
+        };
+        onChange: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        dayjsLocale: {
+            description: string;
+        };
+        placeholders: {
+            description: string;
+        };
+        firstDayOfWeek: {
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        design: {
+            url: string;
+            type: string;
+        };
+        docs: {
+            source: {
+                excludeDecorators: boolean;
+            };
+        };
+    };
+};
+export declare const DateSelectorStory: {
+    ({ displayCalendar, onChange, yearBoundaries, value }: DateSelectorProps): JSX.Element;
+    storyName: string;
+};
+export declare const DateSelectorLocalisation: ({ onChange, value, yearBoundaries }: DateSelectorProps) => JSX.Element;
+export default story;

package/dist/esm/lib/components/multiDropzone/index.d.ts

@@ -1,15 +1,15 @@
 import { AcceptType, FileType, TextOverrides, UploadedFile, UploadStatus } from './types';
 interface MultiDropzoneProps {
-    accept?: AcceptType;
-    onFileSelect: (files: File[]) => void;
     uploadedFiles: UploadedFile[];
     uploading: boolean;
+    onFileSelect: (files: File[]) => void;
     onRemoveFile: (id: string) => void;
+    accept?: AcceptType;
     isCondensed?: boolean;
     maxFiles?: number;
     maxSize?: number;
     textOverrides?: TextOverrides;
 }
-declare const MultiDropZone: ({ accept, uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
+declare const MultiDropzone: ({ uploadedFiles, onFileSelect, onRemoveFile, uploading, isCondensed, accept, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
 export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
-export default MultiDropZone;
+export { MultiDropzone };

package/dist/esm/lib/components/multiDropzone/index.stories.d.ts

@@ -0,0 +1,72 @@
+import { MultiDropzoneProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ uploadedFiles, onFileSelect, onRemoveFile, uploading, isCondensed, accept, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
+    argTypes: {
+        uploadedFiles: {
+            defaultValue: {
+                id: string;
+                name: string;
+            }[];
+            description: string;
+        };
+        uploading: {
+            defaultValue: boolean;
+            description: string;
+        };
+        isCondensed: {
+            defaultValue: boolean;
+            description: string;
+        };
+        maxFiles: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        maxSize: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        accept: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onRemoveFile: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        onFileSelect: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        textOverrides: {
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const MultiDropzoneStory: {
+    ({ onFileSelect, onRemoveFile, uploading, uploadedFiles, isCondensed, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps): JSX.Element;
+    storyName: string;
+};
+export declare const UploadingState: () => JSX.Element;
+export declare const CondensedView: () => JSX.Element;
+export declare const ErrorState: () => JSX.Element;
+export declare const AcceptingOnlyImages: () => JSX.Element;
+export declare const AcceptingOnlyDocuments: () => JSX.Element;
+export declare const LimitingFileSizeTo2MB: () => JSX.Element;
+export declare const I18nSupport: () => JSX.Element;
+export default story;

package/dist/esm/lib/index.d.ts

@@ -1,8 +1,8 @@
-import DateSelector from './components/dateSelector';
+import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
-import MultiDropzone, { FileType, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
+import { MultiDropzone, FileType, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';

package/dist/esm/lib/util/images/index.d.ts

@@ -6,11 +6,18 @@ declare const images: {
         readonly dogLiability: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon.png";
         readonly dogLiability2x: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon2x.png";
         readonly dogLiability3x: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon3x.png";
+        readonly lifeIcon: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon.png";
+        readonly lifeIcon2x: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon2x.png";
+        readonly lifeIcon3x: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon3x.png";
     };
     readonly brokenAquarium: "https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg";
     readonly brokenGlass: "https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg";
     readonly damagedLaptop: "https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg";
     readonly moneyIncome: "https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg";
     readonly washingMachine: "https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg";
+    readonly bill: "https://assets.cdn.feather-insurance.com/assets/images/bill.svg";
+    readonly books: "https://assets.cdn.feather-insurance.com/assets/images/books.svg";
+    readonly finalExpenses: "https://assets.cdn.feather-insurance.com/assets/images/finalExpenses.svg";
+    readonly mortgage: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
 };
 export { images };

package/dist/esm/util/images/index.stories.js

@@ -1,6 +1,6 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { i as images } from '../../index-e81a1766.js';
+import { i as images } from '../../index-31224f74.js';
 
 var story = {
     title: 'Utils/Images',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.33.4",
+  "version": "0.33.5",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './lib/scss/index.scss';
 
-import DateSelector from './lib/components/dateSelector';
+import { DateSelector } from './lib/components/dateSelector';
 import { SignaturePad } from './lib/components/signaturePad';
 import { CardWithLeftIcon } from './lib/components/cards';
 

package/src/lib/components/dateSelector/index.stories.tsx

@@ -0,0 +1,104 @@
+import { DateSelector, DateSelectorProps } from '.';
+import de from 'dayjs/locale/de';
+
+const story = {
+  title: 'JSX/DateSelector',
+  component: DateSelector,
+  decorators: [
+    (Story: any) => (
+      <div style={{ minHeight: '320px', paddingTop: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    yearBoundaries: {
+      description: 'Object containing the min and max year boundaries to show.',
+      defaultValue: {
+        min: 1920, 
+        max: 2001
+      }
+    },
+    displayCalendar: {
+      description: 'Whether the calendar icon/button trigger should show',
+      defaultValue: false
+    },
+    onChange: {
+      description: 'Called when the value is changed. Must be a valid date to be triggered',
+      action: true,
+      table: {
+        category: 'Callbacks',
+        type: { 
+          summary: '(date: YYYY-MM-DD) => void'
+        },
+      },
+    },
+    value: {
+      defaultValue: '2000-12-12',
+      description: 'Value of the input',
+      table: {
+        type: { 
+          summary: 'YYYY-MM-DD'
+        },
+      },
+    },
+    dayjsLocale: {
+      description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`
+    },
+    placeholders: {
+      description: 'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.'
+    },
+    firstDayOfWeek: {
+      description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',
+    design: {
+      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D293%253A169',
+      type: 'figma'
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+export const DateSelectorStory = ({
+  displayCalendar,
+  onChange,
+  yearBoundaries,
+  value
+}: DateSelectorProps) => (
+  <DateSelector
+    onChange={onChange}
+    displayCalendar={displayCalendar}
+    yearBoundaries={yearBoundaries}
+    value={value}
+  />
+);
+
+DateSelectorStory.storyName = "DateSelector";
+
+export const DateSelectorLocalisation = ({ onChange, value, yearBoundaries }: DateSelectorProps) => (
+  <>
+    {/** import de from 'dayjs/locale/de'; */}
+    <DateSelector
+      value={value}
+      yearBoundaries={yearBoundaries}
+      onChange={onChange}
+      displayCalendar={true}
+      placeholders={{
+        day: 'Tag',
+        month: 'Monat',
+        year: 'Jahr',
+      }}
+      dayjsLocale={de}
+      firstDayOfWeek={2}
+    />
+  </>
+);
+
+export default story;

package/src/lib/components/dateSelector/index.test.tsx

@@ -1,6 +1,6 @@
-import { render, fireEvent } from '../../util/testUtils';
+import { render } from '../../util/testUtils';
 
-import DateSelector from '.';
+import { DateSelector } from '.';
 
 const setup = (date: string, onChange: (date: string) => void = () => {}) => {
   return render(

package/src/lib/components/dateSelector/index.tsx

@@ -51,27 +51,29 @@ export const daysInMonthOfYear = ({
   return dayjs(`${year}-${month}`).daysInMonth();
 };
 
-const DateSelector = ({
-  value,
-  onChange,
-  yearBoundaries,
-  displayCalendar,
-  placeholders,
-  dayjsLocale,
-  firstDayOfWeek = 0,
-}: {
+export interface DateSelectorProps {
   value?: string;
   onChange: (date: string) => void;
   yearBoundaries: { min: number; max: number };
   displayCalendar?: boolean;
+  dayjsLocale?: ILocale;
   placeholders?: {
     day?: string;
     month?: string;
     year?: string;
   };
-  dayjsLocale?: ILocale;
   firstDayOfWeek?: number;
-}) => {
+}
+
+export const DateSelector = ({
+  value,
+  onChange,
+  yearBoundaries,
+  displayCalendar,
+  placeholders,
+  dayjsLocale,
+  firstDayOfWeek = 0,
+}: DateSelectorProps) => {
   const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
   const daysInSelectedDate = calendarDateValue
     ? daysInMonthOfYear({
@@ -277,6 +279,4 @@ const DateSelector = ({
       )}
     </div>
   );
-};
-
-export default DateSelector;
+};

package/src/lib/components/multiDropzone/index.stories.tsx

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import { MultiDropzone, MultiDropzoneProps } from '.';
+import { UploadedFile } from './types';
+
+const story = {
+  title: 'JSX/MultiDropzone',
+  component: MultiDropzone,
+  argTypes: {
+    uploadedFiles: {
+      defaultValue: [{
+        id: '123456789',
+        name: 'dummyfile.png'
+      }],
+      description: 'List of files to be displayed on the component.',
+    },
+    uploading: {
+      defaultValue: false,
+      description: 'Property that allows to display component in an uploading state',
+    },
+    isCondensed: {
+      defaultValue: false,
+      description: 'Property that allows to display component in a smaller layout',
+    },
+    maxFiles: {
+      description: 'Property that allows to display the maximum number of files allowed',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    maxSize: {
+      description: 'Property that allows to display the maximum size of files allowed',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    accept: {
+      description: 'Property that allows to define which file types are accepted',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    onRemoveFile: {
+      description: 'Called when a file remove button is clicked',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    onFileSelect: {
+      description: 'Called when a file is uploaded',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    textOverrides: {
+      description: 'Properties that allow to localise component',
+    },
+  },
+  parameters: {
+    componentSubtitle: 'MultiDropzone component allows upload of multiple documents / files.',
+  },
+};
+
+export const MultiDropzoneStory = ({
+  onFileSelect,
+  onRemoveFile,
+  uploading,
+  uploadedFiles = [],
+  isCondensed,
+  maxFiles,
+  maxSize,
+  textOverrides,
+}: MultiDropzoneProps) => {
+  const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);
+
+  const handleOnRemoveFile = (id: string) => {
+    onRemoveFile(id);
+    setLocalFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));
+  };
+
+  const handleOnFileSelect = (files: File[]) => {
+    const newFiles = files.map((newFile) => ({
+      id: String(new Date().getTime()),
+      name: newFile.name,
+      progress: 100,
+    }));
+    setLocalFiles((prevFiles) => [...prevFiles, ...newFiles]);
+    onFileSelect(files);
+  };
+
+  return (
+    <MultiDropzone 
+      onFileSelect={handleOnFileSelect} 
+      onRemoveFile={handleOnRemoveFile} 
+      uploadedFiles={localFiles} 
+      uploading={uploading} 
+      isCondensed={isCondensed}
+      maxFiles={maxFiles}
+      maxSize={maxSize}
+      textOverrides={textOverrides}
+    />
+  );
+};
+
+MultiDropzoneStory.storyName = "MultiDropzone";
+
+export const UploadingState = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+      {
+        id: '124',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+        showProgressBar: false,
+      },
+      {
+        id: '125',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+      },
+      {
+        id: '456',
+        progress: 100,
+        name: 'test_file_name2.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name2.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={true}
+    onRemoveFile={() => {}}
+  />
+);
+
+
+export const CondensedView = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 100,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    isCondensed
+  />
+);
+
+export const ErrorState = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 0,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        error: 'File is too big!',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const AcceptingOnlyImages = () => (
+  <MultiDropzone
+    accept="image"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const AcceptingOnlyDocuments = () => (
+  <MultiDropzone
+    accept="document"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const LimitingFileSizeTo2MB = () => (
+  <MultiDropzone
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    maxSize={2096000}
+  />
+);
+
+export const I18nSupport = () => (
+  <MultiDropzone
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    textOverrides={{
+      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
+      supportsTextShort: 'Unterstützt werden',
+      currentlyUploadingText:
+        'Bitte warten während die Datei hochgeladen wird...'
+    }}
+  />
+);
+
+export default story;

package/src/lib/components/multiDropzone/index.test.tsx

@@ -1,7 +1,7 @@
 import { act, fireEvent, render } from '../../util/testUtils';
 import '@testing-library/jest-dom';
 
-import MultiDropzone, { MultiDropzoneProps } from '.';
+import { MultiDropzone, MultiDropzoneProps } from '.';
 
 const mockOnFileSelect = jest.fn();
 const mockOnRemoveFile = jest.fn();

package/src/lib/components/multiDropzone/index.tsx

@@ -25,24 +25,24 @@ import {
 import { formatBytes } from '../../util/formatBytes';
 
 interface MultiDropzoneProps {
-  accept?: AcceptType;
-  onFileSelect: (files: File[]) => void;
   uploadedFiles: UploadedFile[];
   uploading: boolean;
+  onFileSelect: (files: File[]) => void;
   onRemoveFile: (id: string) => void;
+  accept?: AcceptType;
   isCondensed?: boolean;
   maxFiles?: number;
   maxSize?: number;
   textOverrides?: TextOverrides;
 }
 
-const MultiDropZone = ({
-  accept,
+const MultiDropzone = ({
   uploadedFiles,
   onFileSelect,
-  uploading,
   onRemoveFile,
+  uploading,
   isCondensed = false,
+  accept,
   maxFiles = 0,
   maxSize,
   textOverrides,
@@ -157,4 +157,4 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
 };
 
 export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
-export default MultiDropZone;
+export { MultiDropzone };

package/src/lib/index.tsx

@@ -1,8 +1,9 @@
-import DateSelector from './components/dateSelector';
+import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
-import MultiDropzone, { 
+import { 
+  MultiDropzone,
   FileType,
   MultiDropzoneProps,
   UploadedFile,

package/src/lib/util/images/index.ts

@@ -8,12 +8,19 @@ const images = {
     dogLiability: `${basePath}/dogLiabilityIcon.png`,
     dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,
     dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,
+    lifeIcon: `${basePath}/lifeIcon.png`,
+    lifeIcon2x: `${basePath}/lifeIcon2x.png`,
+    lifeIcon3x: `${basePath}/lifeIcon3x.png`,
   },
   brokenAquarium: `${basePath}/brokenAquarium.svg`,
   brokenGlass: `${basePath}/brokenGlass.svg`,
   damagedLaptop: `${basePath}/damagedLaptop.svg`,
   moneyIncome: `${basePath}/moneyIncome.svg`,
   washingMachine: `${basePath}/washingMachine.svg`,
+  bill: `${basePath}/bill.svg`,
+  books: `${basePath}/books.svg`,
+  finalExpenses: `${basePath}/finalExpenses.svg`,
+  mortgage: `${basePath}/mortgage.svg`,
 } as const;
 
 export { images };