New Image component

packages/hydrogen-react/src/ExternalVideo.test.helpers.ts

@@ -1,7 +1,7 @@
 import {PartialDeep} from 'type-fest';
 import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';
 import {faker} from '@faker-js/faker';
-import {getPreviewImage} from './Image.test.helpers.js';
+import {getPreviewImage} from './ImageLegacy.test.helpers.js';
 
 export function getExternalVideoData(
   externalVideo: Partial<ExternalVideoType> = {},

packages/hydrogen-react/src/Image.stories.tsx

@@ -1,45 +1,77 @@
 import * as React from 'react';
 import type {Story} from '@ladle/react';
-import {Image, type ShopifyImageProps} from './Image.js';
-import {IMG_SRC_SET_SIZES} from './image-size.js';
+import {Image, ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';
+import type {PartialDeep} from 'type-fest';
+import type {Image as ImageType} from './storefront-api-types.js';
+
+type Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';
+
+type ImageConfig = {
+  intervals: number;
+  startingWidth: number;
+  incrementSize: number;
+  placeholderWidth: number;
+};
+
+type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 
 const Template: Story<{
-  'data.url': ShopifyImageProps['data']['url'];
-  'data.width': ShopifyImageProps['data']['width'];
-  'data.height': ShopifyImageProps['data']['height'];
-  width: ShopifyImageProps['width'];
-  height: ShopifyImageProps['height'];
-  widths: ShopifyImageProps['widths'];
-  loaderOptions: ShopifyImageProps['loaderOptions'];
+  as?: 'img' | 'source';
+  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;
+  loader?: (params: ShopifyLoaderParams) => string;
+  src: string;
+  width?: string | number;
+  height?: string | number;
+  crop?: Crop;
+  sizes?: string;
+  aspectRatio?: string;
+  config?: ImageConfig;
+  alt?: string;
+  loading?: 'lazy' | 'eager';
+  loaderOptions?: ShopifyLoaderOptions;
+  widths?: (HtmlImageProps['width'] | ImageType['width'])[];
 }> = (props) => {
-  const finalProps: ShopifyImageProps = {
-    data: {
-      url: props['data.url'],
-      width: props['data.width'],
-      height: props['data.height'],
-      id: 'testing',
-    },
-    width: props.width,
-    height: props.height,
-    widths: props.widths,
-    loaderOptions: props.loaderOptions,
-  };
-  return <Image {...finalProps} />;
+  return (
+    <>
+      {/* Standard Usage */}
+      <Image
+        {...props}
+        width="100%"
+        loading="eager"
+        aspectRatio="1/1"
+        sizes="100vw"
+      />
+      {/*  */}
+      <Image
+        {...props}
+        src="https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg"
+        width="100%"
+        aspectRatio="1/1"
+        sizes="100vw"
+      />
+      <Image {...props} sizes="50vw" width="50vw" />
+      <Image {...props} aspectRatio="4/3" width="50vw" sizes="50vw" />
+      <Image {...props} width="30vw" sizes="30vw" />
+      <Image {...props} width={100} height={200} />
+      <Image {...props} width="5rem" />
+      <Image {...props} widths={[100, 200, 300]} />
+      <Image
+        {...props}
+        loaderOptions={{
+          crop: 'center',
+        }}
+        widths={[200, 300]}
+      />
+    </>
+  );
 };
 
 export const Default = Template.bind({});
 Default.args = {
-  'data.url':
-    'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg',
-  'data.width': 100,
-  'data.height': 100,
-  width: 500,
-  height: 500,
-  widths: IMG_SRC_SET_SIZES,
-  loaderOptions: {
-    crop: 'center',
-    scale: 2,
-    width: 500,
-    height: 500,
+  data: {
+    url: 'https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg',
+    altText: 'alt text',
+    width: 3908,
+    height: 3908,
   },
 };