@payfit/unity-illustrations 2.51.3 → 2.51.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "2.51.3",
+  "version": "2.51.4",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -66,13 +66,13 @@
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-themes": "2.51.3",
+    "@payfit/unity-themes": "2.51.4",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@payfit/unity-themes": "2.51.3"
+    "@payfit/unity-themes": "2.51.4"
   },
   "keywords": [
     "tanstack-intent"

package/src/components/illustration/Illustration.stories.tsx

@@ -1,5 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
 import { UnityThemeProvider } from '@payfit/unity-themes'
 
 // Animated illustrations - import directly from individual files
@@ -12,6 +10,7 @@ import FAQWithBackground from '../../generated/FAQWithBackground'
 import VisuallyImpaired from '../../generated/VisuallyImpaired'
 import WriteBook from '../../generated/WriteBook'
 import { Illustration } from './Illustration'
+import preview from '../../../.storybook/preview'
 
 function transformIllustrationSource(code: string) {
   // Find all src props with name values
@@ -58,7 +57,7 @@ function transformIllustrationSource(code: string) {
  *
  * See the [usage page](/docs/introduction-3-usage--docs) for complete examples and best practices.
  */
-const meta = {
+const meta = preview.meta({
   title: 'Components/Illustration',
   component: Illustration,
   tags: ['autodocs'],
@@ -140,82 +139,64 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Illustration>
-
-export default meta
-
-type Story = StoryObj<typeof Illustration>
+})
 
-export const Primary: Story = {
-  args: {
-    variant: 'picture',
-    src: Binoculars,
-    className: 'uy:size-[150px]',
-    alt: 'Binoculars illustration',
-  },
-}
+export const Primary = meta.story({
+  render: () => (
+    <Illustration
+      variant="picture"
+      src={Binoculars}
+      className="uy:size-[150px]"
+      alt="Binoculars illustration"
+    />
+  ),
+})
 
 /**
  * You can create responsive illustrations that adapt to different screen sizes by using responsive
  * Tailwind classes in the `className` prop. Set the `alt` prop to provide accessible descriptions
  * for screen readers when using the picture variant.
  */
-export const IllustratedPicture: Story = {
-  args: {
-    variant: 'picture',
-    src: VisuallyImpaired,
-    className: 'uy:size-[50vmin]',
-  },
-}
+export const IllustratedPicture = meta.story({
+  render: () => (
+    <Illustration
+      variant="picture"
+      src={VisuallyImpaired}
+      className="uy:size-[50vmin]"
+      alt="Visually impaired illustration"
+    />
+  ),
+})
 
 /**
  * You can display illustrations as smaller icons by setting the `variant` prop to `"icon"`.
  * Use the `size` prop to choose from predefined sizes: `"sm"`, `"md"`, or `"lg"`. This is ideal for illustrations that are meant to be used as illustrated icons.
  */
-export const IllustratedIcon: Story = {
-  args: {
-    variant: 'icon',
-  },
-  render: function Render(args) {
+export const IllustratedIcon = meta.story({
+  render: function Render() {
     return (
       <div className="uy:grid uy:grid-cols-3 uy:items-center uy:gap-200">
+        <Illustration variant="icon" size="sm" src={FAQ} alt="FAQ icon small" />
         <Illustration
-          {...args}
-          variant="icon"
-          size="sm"
-          src={FAQ}
-          alt="FAQ icon small"
-        />
-        <Illustration
-          {...args}
           variant="icon"
           size="md"
           src={FAQ}
           alt="FAQ icon medium"
         />
+        <Illustration variant="icon" size="lg" src={FAQ} alt="FAQ icon large" />
         <Illustration
-          {...args}
-          variant="icon"
-          size="lg"
-          src={FAQ}
-          alt="FAQ icon large"
-        />
-        <Illustration
-          {...args}
           variant="icon"
           size="sm"
           src={FAQWithBackground}
           alt="FAQ with background icon small"
         />
         <Illustration
-          {...args}
           variant="icon"
           size="md"
           src={FAQWithBackground}
           alt="FAQ with background icon medium"
         />
         <Illustration
-          {...args}
           variant="icon"
           size="lg"
           src={FAQWithBackground}
@@ -224,13 +205,13 @@ export const IllustratedIcon: Story = {
       </div>
     )
   },
-}
+})
 
 /**
  * You can render one logical illustration asset under different Unity themes.
  * The Illustration component reads the active Unity theme and resolves the matching asset URL when a legacy or rebrand variant exists.
  */
-export const ThemeVariants: Story = {
+export const ThemeVariants = meta.story({
   render: () => {
     return (
       <div className="uy:flex uy:flex-wrap uy:items-start uy:gap-400">
@@ -274,27 +255,29 @@ export const ThemeVariants: Story = {
       </div>
     )
   },
-}
+})
 
 /**
  * You can make the illustration decorative by setting the `isDecorative` prop to `true`.
  * When `isDecorative` is `true`, `alt` becomes optional. Screen readers will ignore the illustration and not read the `alt` or the `description` attributes. Use this when the illustration is purely decorative or visual appeal, and does not provide any information.
  */
-export const IsDecorative: Story = {
-  args: {
-    variant: 'picture',
-    src: VisuallyImpaired,
-    className: 'uy:size-[50vmin]',
-    isDecorative: true,
-  },
-}
+export const IsDecorative = meta.story({
+  render: () => (
+    <Illustration
+      src={VisuallyImpaired}
+      variant="picture"
+      isDecorative
+      className="uy:size-[50vmin]"
+    />
+  ),
+})
 
 /**
  * You can create responsive layouts where illustrations adapt to different viewport sizes
  * by combining responsive Tailwind classes with the illustration component (with media and container queries). Use Unity theme
  * classes to configure how the illustration behaves across breakpoints.
  */
-export const Responsive: Story = {
+export const Responsive = meta.story({
   render: () => {
     return (
       <div className="uy:rounded-150 uy:bg-surface-neutral uy:border-border-neutral uy:shadow-floating uy:p-300 uy:flex uy:flex-col uy:gap-200 uy:sm:flex-row uy:max-w-[50vmax]">
@@ -314,13 +297,13 @@ export const Responsive: Story = {
       </div>
     )
   },
-}
+})
 
 /**
  * Unity illustrations supports animated illustrations in WEBP format. All the animated illustrations have the `Animation` suffix on their name
  * Animated illustrations will grow fluidly depending on its container size but are capped at their original dimensions to prevent oversizing.
  */
-export const AnimatedIllustrations: Story = {
+export const AnimatedIllustrations = meta.story({
   parameters: {
     chromatic: { disableSnapshot: true },
   },
@@ -376,4 +359,4 @@ export const AnimatedIllustrations: Story = {
       </div>
     )
   },
-}
+})

package/src/components/lazy-illustration/LazyIllustration.stories.tsx

@@ -1,15 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
 import { UnityThemeProvider } from '@payfit/unity-themes'
 
 import { LazyIllustration } from './LazyIllustration'
+import preview from '../../../.storybook/preview'
 
 /**
  * The LazyIllustration component dynamically imports illustrations based on their name.
  * It uses the lazyIllustrationsMap from the generated illustrationAssets file to load
  * the corresponding illustration and pass it to the Illustration component.
  */
-const meta = {
+const meta = preview.meta({
   title: 'Components/LazyIllustration',
   component: LazyIllustration,
   tags: ['autodocs'],
@@ -94,57 +93,53 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof LazyIllustration>
-
-export default meta
-
-type Story = StoryObj<typeof LazyIllustration>
+})
 
 /**
  * Basic usage of the LazyIllustration component with a picture variant.
  * Simply provide the name of the illustration you want to load.
  */
-export const Primary: Story = {
+export const Primary = meta.story({
   args: {
     variant: 'picture',
     name: 'Binoculars',
     className: 'uy:size-[150px]',
     alt: 'Binoculars Illustration',
   },
-}
+})
 
 /**
  * You can create responsive illustrations that adapt to different screen sizes by using responsive
  * Tailwind classes in the `className` prop. Set the `alt` prop to provide accessible descriptions
  * for screen readers when using the picture variant.
  */
-export const IllustratedPicture: Story = {
+export const IllustratedPicture = meta.story({
   args: {
     variant: 'picture',
     name: 'VisuallyImpaired',
     className: 'uy:size-[50vmin]',
     alt: 'Visually impaired person illustration',
   },
-}
+})
 
 /**
  * You can use the LazyIllustration component with the icon variant as well.
  * Specify the size prop to control the dimensions of the icon.
  */
-export const IconVariant: Story = {
+export const IconVariant = meta.story({
   args: {
     variant: 'icon',
     name: 'Binoculars',
     size: 'md',
     alt: 'Binoculars Illustration',
   },
-}
+})
 
 /**
  * LazyIllustration keeps the same logical name API while still resolving theme-aware illustration URLs.
  * The loaded asset is delegated to Illustration, so switching the active Unity theme updates the rendered source when a themed variant exists.
  */
-export const ThemeVariants: Story = {
+export const ThemeVariants = meta.story({
   render: () => {
     return (
       <div className="uy:flex uy:flex-wrap uy:items-start uy:gap-400">
@@ -177,27 +172,27 @@ export const ThemeVariants: Story = {
       </div>
     )
   },
-}
+})
 
 /**
  * You can create responsive illustrations that adapt to different screen sizes
  * by using responsive Tailwind classes in the className prop.
  */
-export const Responsive: Story = {
+export const Responsive = meta.story({
   args: {
     variant: 'picture',
     name: 'WriteBook',
     className: 'uy:size-[50vmin]',
     alt: 'Write Book Illustration',
   },
-}
+})
 
 /**
  * You can use animated illustrations with the LazyIllustration component. Animated illustrations
  * have the `Animation` suffix and are automatically loaded with their fluid sizing behavior.
  * The component detects animated assets and applies maximum dimension constraints to prevent oversizing.
  */
-export const AnimatedIllustrations: Story = {
+export const AnimatedIllustrations = meta.story({
   parameters: {
     chromatic: { disableSnapshot: true },
   },
@@ -206,4 +201,4 @@ export const AnimatedIllustrations: Story = {
     name: 'AccountingAnimation',
     alt: 'Accounting animation showing financial calculations',
   },
-}
+})