@popsure/dirty-swan 0.61.2 → 0.62.0

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

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { MultiDropzone, MultiDropzoneProps } from '.';
 import { UploadedFile } from './types';
 
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+// @ts-ignore
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 const story = {
   title: 'JSX/MultiDropzone',
@@ -78,48 +79,50 @@ const story = {
   },
 };
 
-export const MultiDropzoneStory = ({
-  onFileSelect,
-  onRemoveFile,
-  uploading,
-  uploadedFiles = [],
-  isCondensed,
-  maxFiles,
-  maxSize,
-  textOverrides,
-}: MultiDropzoneProps) => {
-  const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);
+export const MultiDropzoneStory = {
+  render: ({
+    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 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);
-  };
+    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}
-    />
-  );
-};
+    return (
+      <MultiDropzone
+        onFileSelect={handleOnFileSelect}
+        onRemoveFile={handleOnRemoveFile}
+        uploadedFiles={localFiles}
+        uploading={uploading}
+        isCondensed={isCondensed}
+        maxFiles={maxFiles}
+        maxSize={maxSize}
+        textOverrides={textOverrides}
+      />
+    );
+  },
 
-MultiDropzoneStory.storyName = 'MultiDropzone';
+  name: 'MultiDropzone',
+};
 
 export const UploadingState = () => (
   <MultiDropzone
@@ -283,24 +286,26 @@ export const I18nSupport = () => (
   />
 );
 
-export const NonDesktopDevice = () => (
-  <MultiDropzone
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-    textOverrides={{
-      instructionsTextMobile: 'Tippen Sie, um eine Datei auszuwählen',
-      currentlyUploadingText:
-        'Bitte warten, während die Datei hochgeladen wird...',
-    }}
-  />
-);
+export const NonDesktopDevice = {
+  render: () => (
+    <MultiDropzone
+      uploadedFiles={[]}
+      onFileSelect={() => {}}
+      uploading={false}
+      onRemoveFile={() => {}}
+      textOverrides={{
+        instructionsTextMobile: 'Tippen Sie, um eine Datei auszuwählen',
+        currentlyUploadingText:
+          'Bitte warten, während die Datei hochgeladen wird...',
+      }}
+    />
+  ),
 
-NonDesktopDevice.parameters = {
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-    defaultViewport: 'iphone6',
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6',
+    },
   },
 };
 

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

@@ -81,9 +81,7 @@ describe('MultiDropzone component', () => {
         fireEvent.change(input, { target: { files: [file] } });
       });
 
-      expect(
-        getByText('File type must be DOC, DOCX, PDF')
-      ).toBeInTheDocument();
+      expect(getByText('File type must be DOC, DOCX, PDF')).toBeInTheDocument();
     });
 
     it('should remove wrong filetype error message', async () => {
@@ -100,9 +98,7 @@ describe('MultiDropzone component', () => {
 
       await user.click(getByTestId('remove-button'));
 
-      expect(
-        queryByText('File type must be PDF')
-      ).not.toBeInTheDocument();
+      expect(queryByText('File type must be PDF')).not.toBeInTheDocument();
     });
   });
 
@@ -127,9 +123,7 @@ describe('MultiDropzone component', () => {
     it('should show image accept file type label', () => {
       const screen = setup({ accept: 'image' });
 
-      expect(
-        screen.getByText('Supports images')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Supports images')).toBeInTheDocument();
     });
 
     it('should show document accept file type label', () => {
@@ -146,7 +140,9 @@ describe('MultiDropzone component', () => {
         },
       });
 
-      expect(screen.getByText('Supports images, videos and documents')).toBeInTheDocument();
+      expect(
+        screen.getByText('Supports images, videos and documents')
+      ).toBeInTheDocument();
     });
 
     it('should show disabled text if is uploading', () => {
@@ -174,7 +170,7 @@ describe('MultiDropzone component', () => {
 
       screen.getByTestId('remove-button').click();
 
-      expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);
+      expect(mockOnRemoveFile).toHaveBeenCalledWith(uploadedFilesMock.id);
     });
 
     it('should show uploaded file with uploading label', () => {

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

@@ -8,8 +8,8 @@ const story = {
     values: {
       description: 'Array containing the text that needs to be displayed',
       table: {
-        type: { 
-          summary: 'string[] OR { title: string; subtitle: string;}[]'
+        type: {
+          summary: 'string[] OR { title: string; subtitle: string;}[]',
         },
       },
     },
@@ -19,7 +19,7 @@ const story = {
     onChange: {
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
   },
@@ -28,55 +28,52 @@ const story = {
     selectedIndex: 0,
   },
   parameters: {
-    componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
+    componentSubtitle:
+      'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
   },
 };
 
-export const SegmentedControlStory = ({
-  onChange,
-  selectedIndex,
-  values
-}: SegmentedControlProps) => {
-  const [index, setIndex] = useState(selectedIndex);
+export const SegmentedControlStory = {
+  render: ({ onChange, selectedIndex, values }: SegmentedControlProps) => {
+    const [index, setIndex] = useState(selectedIndex);
 
-  const handleOnChange = (newIndex: number) => {
-    onChange?.(newIndex);
-    setIndex(newIndex);
-  };
+    const handleOnChange = (newIndex: number) => {
+      onChange?.(newIndex);
+      setIndex(newIndex);
+    };
 
-  return (
-    <SegmentedControl
-      values={values}
-      selectedIndex={index}
-      onChange={handleOnChange}
-    />
-  );
-};
+    return (
+      <SegmentedControl
+        values={values}
+        selectedIndex={index}
+        onChange={handleOnChange}
+      />
+    );
+  },
 
-SegmentedControlStory.storyName = "SegmentedControl";
+  name: 'SegmentedControl',
+};
 
-export const SegmentedControlWithSubtitle = ({
-  onChange,
-  selectedIndex,
-  values
-}: SegmentedControlProps) => {
-  const [index, setIndex] = useState(selectedIndex);
+export const SegmentedControlWithSubtitle = {
+  render: ({ onChange, selectedIndex, values }: SegmentedControlProps) => {
+    const [index, setIndex] = useState(selectedIndex);
 
-  const handleOnChange = (newIndex: number) => {
-    onChange?.(newIndex);
-    setIndex(newIndex);
-  };
+    const handleOnChange = (newIndex: number) => {
+      onChange?.(newIndex);
+      setIndex(newIndex);
+    };
 
-  return (
-    <SegmentedControl
-      values={[
-        { title: 'Basic', subtitle: '€288,65' },
-        { title: 'Premium', subtitle: '€288,65' },
-      ]}
-      selectedIndex={index}
-      onChange={handleOnChange}
-    />
-  );
+    return (
+      <SegmentedControl
+        values={[
+          { title: 'Basic', subtitle: '€288,65' },
+          { title: 'Premium', subtitle: '€288,65' },
+        ]}
+        selectedIndex={index}
+        onChange={handleOnChange}
+      />
+    );
+  },
 };
 
 export default story;

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

@@ -7,29 +7,26 @@ const story = {
     onChange: {
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
   },
   parameters: {
-    componentSubtitle: 'Signature pad are user interface elements which allow user sign any legal document.',
+    componentSubtitle:
+      'Signature pad are user interface elements which allow user sign any legal document.',
   },
 };
 
-export const SignaturePadStory = ({
-  onChange,
-}: SignaturePadProps) => {
-  const handleOnChange = (newIndex: string) => {
-    onChange?.(newIndex);
-  };
+export const SignaturePadStory = {
+  render: ({ onChange }: SignaturePadProps) => {
+    const handleOnChange = (newIndex: string) => {
+      onChange?.(newIndex);
+    };
 
-  return (
-    <SignaturePad
-      onChange={handleOnChange}
-    />
-  );
-};
+    return <SignaturePad onChange={handleOnChange} />;
+  },
 
-SignaturePadStory.storyName = "SignaturePad";
+  name: 'SignaturePad',
+};
 
 export default story;

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

@@ -10,12 +10,13 @@ const story = {
     },
   },
   args: {
-    size: 's'
-  }
+    size: 's',
+  },
 };
 
-export const SpinnerStory = ({ size }: SpinnerProps) => <Spinner size={size} />;
-
-SpinnerStory.storyName = 'Spinner';
+export const SpinnerStory = {
+  render: ({ size }: SpinnerProps) => <Spinner size={size} />,
+  name: 'Spinner',
+};
 
 export default story;

package/src/lib/components/table/Table.stories.tsx

@@ -92,14 +92,15 @@ const initialData: TableData = [
         { text: '80%-100%' },
       ],
       [
-        { text: 'Operations',
+        {
+          text: 'Operations',
           modalContent: 'Operations info',
-          modalTitle: 'Custom operations modal title'
-         },
-        { 
+          modalTitle: 'Custom operations modal title',
+        },
+        {
           checkmarkValue: true,
           modalContent: 'Operations info column 2',
-          modalTitle: 'Custom operations modal title column 2'
+          modalTitle: 'Custom operations modal title column 2',
         },
         { checkmarkValue: false },
         { checkmarkValue: true },
@@ -257,59 +258,63 @@ const story = {
   },
 };
 
-export const TableStory = ({
-  collapsibleSections,
-  tableData,
-  hideColumns,
-  hideDetails,
-  hideRows,
-  stickyHeaderTopOffset,
-  textOverrides,
-  title,
-  activeSection,
-}: TableProps) => {
-  const [price, setPrice] = useState(999);
-  return (
-    <div>
-      <div className="d-flex fd-column p24 mb80 gap16 wmx5">
-        <label htmlFor="">Change price to see replacement in action: </label>
-        <Input
-          id="#stuff"
-          type="text"
-          onChange={(e) => setPrice(Number(e.target.value))}
-          value={price}
+export const TableStory = {
+  render: ({
+    collapsibleSections,
+    tableData,
+    hideColumns,
+    hideDetails,
+    hideRows,
+    stickyHeaderTopOffset,
+    textOverrides,
+    title,
+    activeSection,
+  }: TableProps) => {
+    const [price, setPrice] = useState(999);
+    return (
+      <div>
+        <div className="d-flex fd-column p24 mb80 gap16 wmx5">
+          <label htmlFor="">Change price to see replacement in action: </label>
+          <Input
+            id="#stuff"
+            type="text"
+            onChange={(e) => setPrice(Number(e.target.value))}
+            value={price}
+          />
+        </div>
+
+        <Table
+          cellReplacements={{
+            '#1': {
+              type: 'CTA',
+              title: 'Replaced!',
+              price: `€${price}`,
+              buttonCaption: 'I got replaced',
+              href: 'http://example.com',
+            },
+            '#2': {
+              type: 'BUTTON',
+              buttonCaption: 'I got replaced too',
+            },
+            '#3': {
+              description: 'per year',
+            },
+          }}
+          collapsibleSections={collapsibleSections}
+          tableData={tableData}
+          hideColumns={hideColumns}
+          hideDetails={hideDetails}
+          hideRows={hideRows}
+          stickyHeaderTopOffset={stickyHeaderTopOffset}
+          textOverrides={textOverrides}
+          title={title}
+          activeSection={activeSection}
         />
       </div>
+    );
+  },
 
-      <Table
-        cellReplacements={{
-          '#1': {
-            type: 'CTA',
-            title: 'Replaced!',
-            price: `€${price}`,
-            buttonCaption: 'I got replaced',
-            href: 'http://example.com',
-          },
-          '#2': {
-            type: 'BUTTON',
-            buttonCaption: 'I got replaced too',
-          },
-          '#3': {
-            description: 'per year',
-          },
-        }}
-        collapsibleSections={collapsibleSections}
-        tableData={tableData}
-        hideColumns={hideColumns}
-        hideDetails={hideDetails}
-        hideRows={hideRows}
-        stickyHeaderTopOffset={stickyHeaderTopOffset}
-        textOverrides={textOverrides}
-        title={title}
-        activeSection={activeSection}
-      />
-    </div>
-  );
+  name: 'Table',
 };
 
 export const TableDataType = () => {
@@ -339,6 +344,4 @@ type TableData = {
   );
 };
 
-TableStory.storyName = 'Table';
-
 export default story;

package/src/lib/components/table/Table.tsx

@@ -21,6 +21,8 @@ import {
   TableData,
 } from './types';
 
+export type { TableData } from './types';
+
 type TextOverrides = {
   showDetails?: string;
   hideDetails?: string;
@@ -64,7 +66,7 @@ const Table = ({
   tableData,
   textOverrides: definedTextOverrides,
   title,
-  activeSection: externalActiveSection
+  activeSection: externalActiveSection,
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
@@ -76,15 +78,17 @@ const Table = ({
 
   useScrollSync(headerRef, containerRef, !isMobile);
 
-  const { activeSection, navigateTable, setActiveSection } = useTableNavigation({
-    enabled: isMobile,
-    containerRef,
-    onSelectionChanged,
-  });
+  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(
+    {
+      enabled: isMobile,
+      containerRef,
+      onSelectionChanged,
+    }
+  );
 
   const titleCell = {
     text: '',
-    ...tableData?.[0]?.rows?.[0]?.[0] || {},
+    ...(tableData?.[0]?.rows?.[0]?.[0] || {}),
   };
   const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
   const currentActiveSectionReplacements =
@@ -115,7 +119,7 @@ const Table = ({
           {titleCell?.text && (
             <TableCell
               {...titleCell}
-              align='left'
+              align="left"
               isNavigation
               isTopLeftCell
               type={undefined}
@@ -214,7 +218,7 @@ const Table = ({
         title={infoModalData?.title}
         onClose={() => setInfoModalData(null)}
       >
-        <div className={classNames(styles.modalContent, "pt8 p24 wmn6")}>
+        <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>
           {modalContentRenderer
             ? modalContentRenderer(infoModalData?.body)
             : infoModalData?.body}

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.tsx

@@ -17,31 +17,33 @@ const story = {
   },
 };
 
-export const BaseCellStory = ({
-  text,
-  description,
-  modalContent,
-  checkmarkValue,
-  rating,
-  fontVariant,
-  align,
-  hideProgressBar,
-}: React.ComponentProps<typeof BaseCell>) => (
-  <div className="p48 d-flex fd-column gap16 bg-white">
-    <BaseCell
-      align={align}
-      checkmarkValue={checkmarkValue}
-      fontVariant={fontVariant}
-      description={description}
-      modalContent={modalContent}
-      hideProgressBar={hideProgressBar}
-      openModal={() => {}}
-      rating={rating}
-      text={text}
-    />
-  </div>
-);
+export const BaseCellStory = {
+  render: ({
+    text,
+    description,
+    modalContent,
+    checkmarkValue,
+    rating,
+    fontVariant,
+    align,
+    hideProgressBar,
+  }: React.ComponentProps<typeof BaseCell>) => (
+    <div className="p48 d-flex fd-column gap16 bg-white">
+      <BaseCell
+        align={align}
+        checkmarkValue={checkmarkValue}
+        fontVariant={fontVariant}
+        description={description}
+        modalContent={modalContent}
+        hideProgressBar={hideProgressBar}
+        openModal={() => {}}
+        rating={rating}
+        text={text}
+      />
+    </div>
+  ),
 
-BaseCellStory.storyName = 'BaseCell';
+  name: 'BaseCell',
+};
 
 export default story;

package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.tsx

@@ -18,12 +18,12 @@ const story = {
   },
 };
 
-export const MiniProgressBarStory = ({
-  nFilledBars,
-}: React.ComponentProps<typeof MiniProgressBar>) => (
-  <MiniProgressBar nFilledBars={nFilledBars} />
-);
+export const MiniProgressBarStory = {
+  render: ({ nFilledBars }: React.ComponentProps<typeof MiniProgressBar>) => (
+    <MiniProgressBar nFilledBars={nFilledBars} />
+  ),
 
-MiniProgressBarStory.storyName = 'MiniProgressBar';
+  name: 'MiniProgressBar',
+};
 
 export default story;