@popsure/dirty-swan 0.61.2 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -36,7 +36,7 @@
     "react-focus-lock": "^2.13.2",
     "react-hot-toast": "^2.4.1",
     "react-scroll-sync": "^0.11.2",
-    "sass": "^1.35.1",
+    "sass": "^1.94.2",
     "signature_pad": "^3.0.0-beta.3"
   },
   "scripts": {
@@ -74,22 +74,22 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/manager-api": "^8.1.10",
-    "@storybook/preview-api": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/react-vite": "^8.1.10",
-    "@storybook/storybook-deployer": "^2.8.10",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/mdx2-csf": "^1.0.0",
+    "@storybook/react": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
+    "@storybook/storybook-deployer": "^2.8.16",
     "@svgr/cli": "^8.0.1",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.3.0",
     "@types/google.maps": "^3.43.3",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^30.0.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "^20.14.5",
@@ -102,8 +102,9 @@
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "cross-env": "^7.0.3",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "glob": "^13.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "postcss": "^8.3.5",
     "postcss-custom-properties": "^12.1.10",
     "prettier": "^2.3.1",
@@ -111,20 +112,23 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "remark-gfm": "^4.0.0",
-    "rollup": "^2.52.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup": "^4.53.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-url": "^3.0.1",
-    "storybook": "^8.1.10",
-    "storybook-dark-mode": "^4.0.1",
+    "storybook": "^10.0.8",
+    "storybook-dark-mode": "^4.0.2",
     "ts-jest": "^29.1.5",
     "tslib": "^2.3.0",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^7.2.4",
     "yargs": "^17.0.1"
   },
   "resolutions": {
-    "babel-loader": "8.2.3"
+    "babel-loader": "8.2.3",
+    "jest/**/js-yaml": "^3.14.2",
+    "jest/**/brace-expansion": "^1.1.12",
+    "jest/**/ansi-regex": "5.0.1",
+    "jest/**/braces": "3.0.3"
   }
 }

package/src/intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 # Dirty Swan
 

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

@@ -6,7 +6,8 @@ const story = {
   component: Accordion,
   argTypes: {
     classNames: {
-      description: 'Class names for the Accordion component and its children elements',
+      description:
+        'Class names for the Accordion component and its children elements',
     },
     variant: {
       description: 'Variant that defines the style of the Accordion',
@@ -15,10 +16,12 @@ const story = {
       description: 'Allow multiple items to be open at the same time',
     },
     items: {
-      description: 'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \n\nThe answer property accepts markdown.',
+      description:
+        'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \n\nThe answer property accepts markdown.',
     },
     renderAnswer: {
-      description: 'Function that allows you to render the answer in a custom way',
+      description:
+        'Function that allows you to render the answer in a custom way',
       action: true,
     },
     onClick: {
@@ -35,7 +38,7 @@ const story = {
         id: '1',
         question: 'What is the meaning of life?',
         answer: '42',
-        icon: <CpuIcon size={24} />
+        icon: <CpuIcon size={24} />,
       },
       {
         id: '2',
@@ -52,7 +55,8 @@ const story = {
       {
         id: '4',
         question: 'Who painted the Mona Lisa?',
-        answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        answer:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
         icon: <ArthritisIcon size={24} />,
       },
     ],
@@ -65,25 +69,22 @@ const story = {
       icon: '',
       question: '',
       answer: '',
-      markdown: ''
+      markdown: '',
     },
-  }
+  },
+};
+
+export const AccordionStory = {
+  render: ({ items, multiple, onClick, variant }: AccordionProps) => (
+    <Accordion
+      items={items}
+      multiple={multiple}
+      variant={variant}
+      onClick={onClick}
+    />
+  ),
+
+  name: 'Accordion',
 };
- 
-export const AccordionStory = ({
-  items,
-  multiple,
-  onClick,
-  variant
-}: AccordionProps) => (
-  <Accordion
-    items={items}
-    multiple={multiple}
-    variant={variant}
-    onClick={onClick}
-  />
-);
 
-AccordionStory.storyName = "Accordion";
- 
 export default story;

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

@@ -61,90 +61,92 @@ const story = {
         component:
           'This component is for now only restricted to "address" types and will restrict every query to Germany.',
       },
-    }
+    },
   },
 };
 
-export const AutocompleteAddressStory = ({
-  address: defaultAddress,
-  apiKey,
-  manualAddressEntryTexts,
-  onAddressChange,
-  placeholders,
-  countryCode
-}: AutocompleteAddressProps) => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>(
-    defaultAddress
-  );
-  const handleOnAddressChange = (newAddress: Partial<Address>) => {
-    onAddressChange?.(newAddress);
-    setAddress(newAddress);
-  };
+export const AutocompleteAddressStory = {
+  render: ({
+    address: defaultAddress,
+    apiKey,
+    manualAddressEntryTexts,
+    onAddressChange,
+    placeholders,
+    countryCode,
+  }: AutocompleteAddressProps) => {
+    const [address, setAddress] = useState<Partial<Address> | undefined>(
+      defaultAddress
+    );
+    const handleOnAddressChange = (newAddress: Partial<Address>) => {
+      onAddressChange?.(newAddress);
+      setAddress(newAddress);
+    };
 
-  return (
+    return (
+      <AutocompleteAddress
+        address={address}
+        apiKey={apiKey}
+        manualAddressEntryTexts={manualAddressEntryTexts}
+        onAddressChange={handleOnAddressChange}
+        placeholders={placeholders}
+        countryCode={countryCode}
+      />
+    );
+  },
+
+  name: 'AutocompleteAddress',
+};
+
+export const WithAddress = {
+  render: ({
+    apiKey,
+    onAddressChange,
+    placeholders,
+  }: AutocompleteAddressProps) => (
     <AutocompleteAddress
-      address={address}
+      address={{
+        street: 'Lohmuehlenstraße',
+        houseNumber: '65',
+        city: 'Berlin',
+        country: 'DE',
+        additionalInformation: 'c/o Factory',
+      }}
       apiKey={apiKey}
-      manualAddressEntryTexts={manualAddressEntryTexts}
-      onAddressChange={handleOnAddressChange}
-      placeholders={placeholders}
-      countryCode={countryCode}
+      onAddressChange={onAddressChange}
     />
-  );
+  ),
 };
 
-AutocompleteAddressStory.storyName = 'AutocompleteAddress';
-
-export const WithAddress = ({
-  apiKey,
-  onAddressChange,
-  placeholders,
-}: AutocompleteAddressProps) => (
-  <AutocompleteAddress
-    address={{
-      street: 'Lohmuehlenstraße',
-      houseNumber: '65',
-      city: 'Berlin',
-      country: 'DE',
-      additionalInformation: 'c/o Factory',
-    }}
-    apiKey={apiKey}
-    onAddressChange={onAddressChange}
-  />
-);
-
-export const WithLocalisationEntryText = ({
-  apiKey,
-  onAddressChange,
-}: AutocompleteAddressProps) => (
-  <AutocompleteAddress
-    apiKey={apiKey}
-    manualAddressEntryTexts={{
-      preText: 'Oder ',
-      cta: 'Adresse direkt eingeben',
-    }}
-    onAddressChange={onAddressChange}
-  />
-);
+export const WithLocalisationEntryText = {
+  render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => (
+    <AutocompleteAddress
+      apiKey={apiKey}
+      manualAddressEntryTexts={{
+        preText: 'Oder ',
+        cta: 'Adresse direkt eingeben',
+      }}
+      onAddressChange={onAddressChange}
+    />
+  ),
+};
 
-export const WithLocalisationPlaceholders = ({
-  apiKey,
-  onAddressChange,
-}: AutocompleteAddressProps) => (
-  <AutocompleteAddress
-    address={{}}
-    apiKey={apiKey}
-    placeholders={{
-      manualAddressEntry: 'Adresse suchen',
-      street: 'Straße',
-      houseNumber: 'Hausnummer',
-      additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
-      postcode: 'PLZ',
-      city: 'Stadt',
-    }}
-    onAddressChange={onAddressChange}
-  />
-);
+export const WithLocalisationPlaceholders = {
+  render: ({ apiKey, onAddressChange }: AutocompleteAddressProps) => (
+    <AutocompleteAddress
+      address={{}}
+      apiKey={apiKey}
+      placeholders={{
+        manualAddressEntry: 'Adresse suchen',
+        street: 'Straße',
+        houseNumber: 'Hausnummer',
+        additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
+        postcode: 'PLZ',
+        city: 'Stadt',
+      }}
+      onAddressChange={onAddressChange}
+    />
+  ),
+};
 
 export const AddressType = () => {
   return (
@@ -158,7 +160,7 @@ export const AddressType = () => {
           country: string;
       }`}
     </pre>
-  )
-}
+  );
+};
 
 export default story;

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

@@ -10,7 +10,7 @@ const story = {
     },
     className: {
       description: 'Class name for the most parent element',
-      control: 'text'
+      control: 'text',
     },
     size: {
       description: 'Define the size of the badge',
@@ -20,35 +20,31 @@ const story = {
     },
     showDot: {
       description: 'Whether to show a dot indicator',
-    }
+    },
   },
   args: {
     children: 'Value',
     className: '',
     size: 'medium',
     variant: 'information',
-    showDot: false
-  }
+    showDot: false,
+  },
 };
- 
-export const BadgeStory = ({
-  children,
-  className,
-  size,
-  variant,
-  showDot,
-}: BadgeProps) => (
-  <Badge
-    className={className}
-    size={size}
-    variant={variant}
-    showDot={showDot}
-  >
-    {children}
-  </Badge>
-);
 
-BadgeStory.storyName = "Badge";
+export const BadgeStory = {
+  render: ({ children, className, size, variant, showDot }: BadgeProps) => (
+    <Badge
+      className={className}
+      size={size}
+      variant={variant}
+      showDot={showDot}
+    >
+      {children}
+    </Badge>
+  ),
+
+  name: 'Badge',
+};
 
 const variants: BadgeProps['variant'][] = [
   'white',
@@ -65,19 +61,14 @@ const variants: BadgeProps['variant'][] = [
 ];
 
 export const Variants = () => (
-  <div className='d-flex fd-column gap16'>
+  <div className="d-flex fd-column gap16">
     {variants.map((variant) => (
-      <div key={variant} className='d-flex'>
-        <div className='ws3'>
-          <Badge variant={variant}>
-            {variant}
-          </Badge>
+      <div key={variant} className="d-flex">
+        <div className="ws3">
+          <Badge variant={variant}>{variant}</Badge>
         </div>
-        <div className='ws3 ml32'>
-          <Badge
-            variant={variant}
-            showDot
-          >
+        <div className="ws3 ml32">
+          <Badge variant={variant} showDot>
             {variant}
           </Badge>
         </div>
@@ -89,15 +80,13 @@ export const Variants = () => (
 const sizes: BadgeProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
 
 export const Sizes = () => (
-  <div className='d-flex fd-column gap16'>
+  <div className="d-flex fd-column gap16">
     {sizes.map((size) => (
-      <div key={size} className='d-flex'>
-        <div className='ws3'>
-          <Badge size={size}>
-            {size}
-          </Badge>
+      <div key={size} className="d-flex">
+        <div className="ws3">
+          <Badge size={size}>{size}</Badge>
         </div>
-        <div className='ws3 ml32'>
+        <div className="ws3 ml32">
           <Badge size={size} showDot>
             {size}
           </Badge>
@@ -107,6 +96,4 @@ export const Sizes = () => (
   </div>
 );
 
-BadgeStory.storyName = "Badge";
-
 export default story;