@autoguru/overdrive 4.0.4 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @autoguru/overdrive
 
+## 4.1.0
+
+### Minor Changes
+
+-   af65bd3: New responsive Image component
+
 ## 4.0.4
 
 ### Patch Changes

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { ResponsiveImage } from './ResponsiveImage';
+interface Props extends ComponentProps<typeof ResponsiveImage> {
+    unoptimised?: boolean;
+}
+export declare const Image: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IAI7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAQ1C,CAAC"}

package/dist/components/Image/Image.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { useImageServer } from './ImageServerProvider';
+import { ResponsiveImage } from './ResponsiveImage';
+import { SimpleImage } from './SimpleImage';
+export const Image = ({ unoptimised = false, ...props }) => ((useImageServer() && !unoptimised) ? (React.createElement(ResponsiveImage, { ...props })) : (React.createElement(SimpleImage, { ...props })));

package/dist/components/Image/ImageServerProvider.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import { WidthScale } from './types';
+interface UrlParams {
+    src: string;
+    width: number;
+    quality: number;
+}
+interface ImageServerContext {
+    widthMap?: Record<WidthScale, number>;
+    getWidthValue?(width: WidthScale): number;
+    srcUrlMapper(params: UrlParams): string;
+    generateSrcSet(params: Omit<UrlParams, 'width'>): string;
+}
+export declare const widthMap: ImageServerContext['widthMap'];
+export declare const useImageServer: () => ImageServerContext;
+export declare const ImageServerProvider: FunctionComponent<Omit<ImageServerContext, 'generateSrcSet'>>;
+export {};
+//# sourceMappingURL=ImageServerProvider.d.ts.map

package/dist/components/Image/ImageServerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageServerProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ImageServerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,UAAU,SAAS;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACtC,aAAa,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAE1C,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IACxC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;CACzD;AAED,eAAO,MAAM,QAAQ,EAAC,kBAAkB,CAAC,UAAU,CAiBjD,CAAC;AAWH,eAAO,MAAM,cAAc,0BAAmC,CAAC;AAE/D,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAgC7F,CAAC"}

package/dist/components/Image/ImageServerProvider.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+export const widthMap = {
+    '1': 16,
+    '2': 32,
+    '3': 48,
+    '4': 64,
+    '5': 96,
+    '6': 128,
+    '7': 256,
+    '8': 384,
+    '9': 640,
+    '10': 750,
+    '11': 828,
+    '12': 1080,
+    '13': 1200,
+    '14': 1920,
+    '15': 2048,
+    '16': 3840,
+};
+const defaultValue = {
+    widthMap,
+    getWidthValue: (width) => widthMap[width],
+    srcUrlMapper: null,
+    generateSrcSet: null,
+};
+const imageServerCtx = createContext(null);
+export const useImageServer = () => useContext(imageServerCtx);
+export const ImageServerProvider = ({ children, srcUrlMapper = defaultValue.srcUrlMapper, getWidthValue = defaultValue.getWidthValue, widthMap = defaultValue.widthMap, }) => {
+    const generateSrcSet = useCallback(({ quality, src }) => (Object.keys(widthMap).map((key) => {
+        const width = getWidthValue(key);
+        return `${srcUrlMapper({ quality, src, width })} ${width}w`;
+    }).join(', ')), [widthMap, srcUrlMapper, getWidthValue]);
+    return (React.createElement(imageServerCtx.Provider, { value: useMemo(() => ({
+            widthMap,
+            srcUrlMapper,
+            getWidthValue,
+            generateSrcSet,
+        }), [
+            srcUrlMapper,
+            widthMap,
+            getWidthValue,
+            generateSrcSet,
+        ]) }, children));
+};

package/dist/components/Image/ResponsiveImage.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import { widthMap } from './ImageServerProvider';
+import { SimpleImage } from './SimpleImage';
+export interface Props extends Omit<ComponentProps<typeof SimpleImage>, 'sizes'> {
+    imageWidth?: ResponsiveProp<keyof typeof widthMap>;
+    sizes?: ResponsiveProp<string>;
+    quality?: number;
+}
+export declare const ResponsiveImage: FunctionComponent<Props>;
+//# sourceMappingURL=ResponsiveImage.d.ts.map

package/dist/components/Image/ResponsiveImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQ/E,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAanD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAgCpD,CAAC"}

package/dist/components/Image/ResponsiveImage.js

@@ -0,0 +1,22 @@
+import { invariant } from '@autoguru/utilities';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
+import { useImageServer } from './ImageServerProvider';
+import { SimpleImage } from './SimpleImage';
+export const ResponsiveImage = ({ imageWidth: imageWidthList, sizes: sizesList = '100vw', quality = 70, src: incomingSrc, ...imgProps }) => {
+    invariant(quality > 0 && quality <= 100, 'Image must be a number between 1 and 100.');
+    const imageWidth = useResponsiveValue(imageWidthList);
+    const sizes = useResponsiveValue(sizesList);
+    const { srcUrlMapper, getWidthValue, generateSrcSet } = useImageServer();
+    const src = useMemo(() => srcUrlMapper({
+        src: incomingSrc,
+        width: getWidthValue(imageWidth),
+        quality,
+    }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
+    const srcset = useMemo(() => imageWidth ? void 0 : generateSrcSet({
+        src: incomingSrc,
+        quality,
+    }), [incomingSrc, quality]);
+    return (React.createElement(SimpleImage, { sizes: sizes, srcSet: srcset, src: src, ...imgProps }));
+};

package/dist/components/Image/SimpleImage.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+export interface Props extends Omit<HTMLImageElement, 'loading' | 'className' | 'width' | 'height'> {
+    src: string;
+    eager?: boolean;
+    srcSet: string;
+    syncDecoding?: boolean;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+export declare const SimpleImage: FunctionComponent<Props>;
+//# sourceMappingURL=SimpleImage.d.ts.map

package/dist/components/Image/SimpleImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClG,GAAG,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,MAAM,EAAE,MAAM,CAAC;IAMf,YAAY,CAAC,EAAE,OAAO,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;CAEnB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAiBhD,CAAC"}

package/dist/components/Image/SimpleImage.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export const SimpleImage = ({ eager = 'false', syncDecoding = 'false', className = '', src, srcSet, ...imgProps }) => (React.createElement("img", { loading: eager ? 'eager' : 'lazy', decoding: syncDecoding ? 'sync' : 'async', className: className, srcSet: srcSet, src: src, ...imgProps }));

package/dist/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Image/index.js

@@ -0,0 +1 @@
+export { Image } from './Image';

package/dist/components/Image/stories.js

@@ -0,0 +1,194 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { ImageServerProvider, widthMap } from "./ImageServerProvider.js";
+import { Image } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const sizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
+export default {
+  title: 'Foundation/Image/Image',
+  component: Image,
+  argTypes: {
+    imageWidth: {
+      options: [].concat(sizeOptions, ['full']),
+      defaultValue: 8,
+      control: {
+        type: 'select'
+      }
+    },
+    width: {
+      options: [].concat(sizeOptions, ['full']),
+      defaultValue: 8,
+      control: {
+        type: 'select'
+      }
+    },
+    quality: {
+      defaultValue: void 0,
+      control: {
+        type: 'number',
+        min: 1,
+        max: 100
+      }
+    },
+    eager: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    unoptimised: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+
+const calcWidth = width => width === 'full' ? '100%' : widthMap[width];
+
+const SimpleTemplate = args => _jsx("div", {
+  style: {
+    width: '100%',
+    overflow: 'auto'
+  },
+  children: _jsx(Image, _objectSpread(_objectSpread({}, args), {}, {
+    width: calcWidth(args.width)
+  }))
+});
+
+const standardProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-og.jpg'
+};
+export const standard = SimpleTemplate.bind(standardProps);
+standard.args = standardProps;
+
+const srcUrlMapper = _ref => {
+  let {
+    src,
+    width,
+    quality
+  } = _ref;
+  return "https://images.autoguru.com.au/?url=".concat(src, "&w=").concat(width, "&q=").concat(quality);
+};
+
+const WidthProviderTemplate = args => _jsx(ImageServerProvider, {
+  srcUrlMapper: srcUrlMapper,
+  children: _jsx("div", {
+    style: {
+      width: '100%',
+      overflow: 'auto'
+    },
+    children: _jsx(Image, _objectSpread(_objectSpread({}, args), {}, {
+      width: calcWidth(args.width)
+    }))
+  })
+});
+
+const withImageServerUnoptimisedProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-test-highres-image.jpg',
+  unoptimised: true
+};
+export const withImageServerUnoptimised = WidthProviderTemplate.bind(withImageServerUnoptimisedProps);
+withImageServerUnoptimised.args = withImageServerUnoptimisedProps;
+const withImageServerProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-test-highres-image.jpg',
+  quality: 60,
+  imageWidth: 8,
+  sizes: ['100vh',, '60vh', '40vh']
+};
+export const withImageServer = WidthProviderTemplate.bind(withImageServerProps);
+withImageServer.args = withImageServerProps;
+const withResponsiveImageWidthProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-test-highres-image.jpg',
+  width: 'full',
+  sizes: ['100vw', '70vw', '50vw', '40vw'],
+  imageWidth: [5, 8,, 12]
+};
+export const withResponsiveImageWidth = WidthProviderTemplate.bind(withResponsiveImageWidthProps);
+withResponsiveImageWidth.args = withResponsiveImageWidthProps;
+const withResponsiveSizesProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-test-highres-image.jpg',
+  width: 'full',
+  sizes: ['100vw', '70vw', '50vw', '40vw']
+};
+export const withResponsiveSizes = WidthProviderTemplate.bind(withResponsiveSizesProps);
+withResponsiveSizes.args = withResponsiveSizesProps;
+
+const AllQualityTemplate = args => _jsx(ImageServerProvider, {
+  srcUrlMapper: srcUrlMapper,
+  children: _jsx("div", {
+    style: {
+      width: '100%',
+      overflow: 'auto'
+    },
+    children: _jsx(Stack, {
+      space: "5",
+      children: [1, 20, 40, 60, 80, 100].map(quality => _jsxs(Stack, {
+        space: "1",
+        children: [_jsxs(Text, {
+          children: ["Quality: ", _jsx(Text, {
+            strong: true,
+            children: quality
+          })]
+        }), _jsx(Image, _objectSpread(_objectSpread({}, args), {}, {
+          width: calcWidth(args.width),
+          imageWidth: args.width,
+          quality: quality
+        }), quality)]
+      }, quality))
+    })
+  })
+});
+
+export const withImageServerQualities = AllQualityTemplate.bind(withImageServerProps);
+withImageServerQualities.args = withImageServerProps;
+
+const AllSizeTemplate = args => _jsx(ImageServerProvider, {
+  srcUrlMapper: srcUrlMapper,
+  children: _jsx("div", {
+    style: {
+      width: '100%',
+      overflow: 'auto'
+    },
+    children: _jsx(Stack, {
+      width: "full",
+      space: "5",
+      children: sizeOptions.map(width => _jsxs(Stack, {
+        space: "1",
+        children: [_jsxs(Text, {
+          children: ["Quality: ", _jsx(Text, {
+            strong: true,
+            children: args.quality
+          })]
+        }), _jsxs(Text, {
+          children: ["Width: ", _jsxs(Text, {
+            strong: true,
+            children: [width, ": ", calcWidth(width), "px"]
+          })]
+        }), _jsx(Image, _objectSpread(_objectSpread({}, args), {}, {
+          width: calcWidth(width),
+          imageWidth: width
+        }))]
+      }, width))
+    })
+  })
+});
+
+const withImageServerResizingProps = {
+  src: 'https://cdn.autoguru.com.au/images/autoguru-test-highres-image.jpg',
+  quality: 20,
+  sizes: ['100vh',, '60vh', '40vh']
+};
+export const withImageServerResizing = AllSizeTemplate.bind(withImageServerResizingProps);
+withImageServerResizing.args = withImageServerResizingProps;

package/dist/components/Image/types.d.ts

@@ -0,0 +1,2 @@
+export declare type WidthScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Image/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/types.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,GACnB,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC"}

package/dist/components/Image/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/private/InputBase/withEnhancedInput.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,IAAI;;;CAGhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CA+BjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC"}
+{"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,IAAI;;;CAGhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CA+BjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC"}

package/dist/hooks/useResponsiveValue/useResponsiveValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,EACrE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,YAAY,UAAQ,GAClB,CAAC,CAYH"}
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,EACrE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,YAAY,UAAQ,GAClB,CAAC,CAYH"}

package/dist/hooks/useResponsiveValue/useResponsiveValue.js

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useMedia } from '../..';
 import { getEarliestKnownToken } from '../../utils/resolveResponsiveProps';
 export function useResponsiveValue(responsiveValue, fallbackCase = false) {
@@ -10,5 +11,5 @@ export function useResponsiveValue(responsiveValue, fallbackCase = false) {
             activeBreakPoint = index + 1;
         return activeBreakPoint;
     }, 1);
-    return getEarliestKnownToken(responsiveValue, activeBP);
+    return useMemo(() => getEarliestKnownToken(responsiveValue, activeBP), [responsiveValue, activeBP]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.0.4",
+	"version": "4.1.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",