@lumx/react 2.1.9 → 2.2.1

package/src/stories/generated/Badge/Demos.stories.tsx

@@ -3,6 +3,7 @@
  */
 export default { title: 'LumX components/badge/Badge Demos' };
 
+export { App as Colors } from './colors';
 export { App as Icon } from './icon';
 export { App as Label } from './label';
 export { App as Thumbnail } from './thumbnail';

package/src/stories/generated/Flag/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/flag/Flag Demos' };
+
+export { App as Flag } from './flag';

package/src/stories/generated/List/Demos.stories.tsx

@@ -4,6 +4,8 @@
 export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
+export { App as Clickable } from './clickable';
 export { App as Huge } from './huge';
+export { App as Paddings } from './paddings';
 export { App as Regular } from './regular';
 export { App as Tiny } from './tiny';

package/src/stories/generated/Thumbnail/Demos.stories.tsx

@@ -4,6 +4,7 @@
 export default { title: 'LumX components/thumbnail/Thumbnail Demos' };
 
 export { App as Combined } from './combined';
+export { App as LoadingError } from './loading-error';
 export { App as Ratios } from './ratios';
 export { App as Sizes } from './sizes';
 export { App as Variants } from './variants';

package/src/stories/knobs/focusKnob.ts

@@ -1,3 +1,3 @@
 import { number } from '@storybook/addon-knobs';
 
-export const focusKnob = (name: string) => number(name, 0, { max: 1, min: -1, range: true, step: 0.01 });
+export const focusKnob = (name: string, value = 0) => number(name, value, { max: 1, min: -1, range: true, step: 0.01 });

package/src/stories/knobs/image.ts

@@ -6,18 +6,19 @@ const avatar3 = '/demo-assets/avatar3.jpg';
 const avatar4 = '/demo-assets/avatar4.jpg';
 const landscape1 = '/demo-assets/landscape1.jpg';
 const landscape2 = '/demo-assets/landscape2.jpg';
+const landscape1s200 = '/demo-assets/landscape1-s200.jpg';
 const landscape3 = '/demo-assets/landscape3.jpg';
 const portrait1 = '/demo-assets/portrait1.jpg';
+const portrait1s200 = '/demo-assets/portrait1-s200.jpg';
 const portrait2 = '/demo-assets/portrait2.jpg';
 const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
-
 export const SQUARE_IMAGES = { square1, square2 };
-export const LANDSCAPE_IMAGES = { landscape1, landscape2, landscape3 };
-export const PORTRAIT_IMAGES = { portrait1, portrait2, portrait3 };
+export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
+export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
 
 export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
 
@@ -35,3 +36,34 @@ export const squareImageKnob = (name = 'Image', value = Object.values(SQUARE_IMA
 
 export const imageKnob = (name = 'Image', value = Object.values(IMAGES)[0], groupId?: string) =>
     select(name, IMAGES, value, groupId);
+
+type Size = { width: number; height: number };
+
+export const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size> = {
+    avatar1: { width: 128, height: 128 },
+    avatar2: { width: 150, height: 150 },
+    avatar3: { width: 128, height: 128 },
+    avatar4: { width: 128, height: 128 },
+};
+export const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size> = {
+    square1: { width: 72, height: 72 },
+    square2: { width: 300, height: 300 },
+};
+export const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size> = {
+    landscape1: { width: 800, height: 546 },
+    landscape1s200: { width: 200, height: 150 },
+    landscape2: { width: 800, height: 600 },
+    landscape3: { width: 640, height: 480 },
+};
+export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> = {
+    portrait1: { width: 275, height: 500 },
+    portrait1s200: { width: 200, height: 364 },
+    portrait2: { width: 350, height: 500 },
+    portrait3: { width: 300, height: 500 },
+};
+export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
+    ...LANDSCAPE_IMAGE_SIZES,
+    ...PORTRAIT_IMAGE_SIZES,
+    ...SQUARE_IMAGE_SIZES,
+    ...AVATAR_IMAGE_SIZES,
+};

package/src/stories/utils/CustomLink.tsx

@@ -0,0 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-has-content,jsx-a11y/anchor-is-valid */
+import React from 'react';
+
+/**
+ * Example custom link that can be used in linkAs props.
+ */
+export const CustomLink: any = ({ ...props }) => <a href="#" data-custom-link {...props} />;

package/types.d.ts

@@ -430,6 +430,10 @@ export interface AvatarProps extends GenericProps {
 	badge?: ReactElement;
 	/** Image URL. */
 	image: string;
+	/** Props to pass to the link wrapping the thumbnail. */
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+	/** Custom react component for the link (can be used to inject react router Link). */
+	linkAs?: "a" | any;
 	/** On click callback. */
 	onClick?: MouseEventHandler<HTMLDivElement>;
 	/** On key press callback. */
@@ -1233,6 +1237,8 @@ export interface ThumbnailProps extends GenericProps {
 	imgProps?: ImgHTMLProps;
 	/** Reference to the native <img> element. */
 	imgRef?: Ref<HTMLImageElement>;
+	/** Set to true to force the display of the loading skeleton. */
+	isLoading?: boolean;
 	/** Size variant of the component. */
 	size?: ThumbnailSize;
 	/** Image loading mode. */
@@ -1245,6 +1251,10 @@ export interface ThumbnailProps extends GenericProps {
 	theme?: Theme;
 	/** Variant of the component. */
 	variant?: ThumbnailVariant;
+	/** Props to pass to the link wrapping the thumbnail. */
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+	/** Custom react component for the link (can be used to inject react router Link). */
+	linkAs?: "a" | any;
 }
 /**
  * Thumbnail component.
@@ -2427,6 +2437,7 @@ export interface TextFieldProps extends GenericProps {
  * @return React element.
  */
 export declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
+export declare const useFocusPointStyle: ({ image, aspectRatio, focusPoint, imgProps: { width, height } }: ThumbnailProps, element: HTMLImageElement | undefined, isLoaded: boolean) => CSSProperties;
 /**
  * Defines the props of the component.
  */
@@ -2521,16 +2532,22 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
 	avatarProps?: AvatarProps;
-	/** Simple action toolbar content. */
-	simpleAction?: ReactNode;
-	/** Multiple action toolbar content. */
-	multipleActions?: ReactNode;
 	/** Additional fields used to describe the user. */
 	fields?: string[];
+	/** Props to pass to the link wrapping the avatar thumbnail. */
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+	/** Custom react component for the link (can be used to inject react router Link). */
+	linkAs?: "a" | any;
+	/** Multiple action toolbar content. */
+	multipleActions?: ReactNode;
 	/** User name. */
 	name?: string;
+	/** Props to pass to the name block. */
+	nameProps?: GenericProps;
 	/** Orientation. */
 	orientation?: Orientation;
+	/** Simple action toolbar content. */
+	simpleAction?: ReactNode;
 	/** Size variant. */
 	size?: UserBlockSize;
 	/** Theme adapting the component to light or dark background. */

package/esm/_internal/clamp.js

@@ -1,22 +0,0 @@
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-var clamp = function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-
-  if (value > max) {
-    return max;
-  }
-
-  return value;
-};
-
-export { clamp as c };
-//# sourceMappingURL=clamp.js.map

package/esm/_internal/clamp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp.ts"],"sourcesContent":["/**\n * Clamp value in range.\n *\n * @param value Value to clamp.\n * @param min   Minimum value.\n * @param max   Maximum value.\n * @return Clamped value.\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n"],"names":["clamp","value","min","max"],"mappings":"AAAA;;;;;;;;IAQaA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAgBC,GAAhB,EAA6BC,GAA7B,EAAqD;AACtE,MAAIF,KAAK,GAAGC,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,MAAID,KAAK,GAAGE,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,SAAOF,KAAP;AACH;;;;"}

package/src/components/thumbnail/useClickable.ts

@@ -1,26 +0,0 @@
-import { KeyboardEventHandler, MouseEventHandler, useMemo } from 'react';
-
-interface Props {
-    role: 'button';
-    tabIndex: 0;
-    onClick: MouseEventHandler;
-    onKeyPress: KeyboardEventHandler;
-}
-
-export const useClickable = ({ onClick, onKeyPress }: { onClick?: any; onKeyPress?: any }): Props | undefined => {
-    return useMemo(() => {
-        if (!onClick) return undefined;
-
-        return {
-            role: 'button',
-            tabIndex: 0,
-            onClick,
-            onKeyPress(event) {
-                onKeyPress?.(event);
-                if (event.key === 'Enter' || event.key === ' ') {
-                    onClick?.();
-                }
-            },
-        };
-    }, [onClick, onKeyPress]);
-};

package/src/components/thumbnail/useFocusPoint.ts

@@ -1,154 +0,0 @@
-import { CSSProperties, MutableRefObject, RefObject, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useOnResize } from '@lumx/react/hooks/useOnResize';
-import { AspectRatio } from '@lumx/react';
-import { clamp } from '@lumx/react/utils/clamp';
-import { LoadingState } from '@lumx/react/components/thumbnail/useImageLoad';
-import { Callback } from '@lumx/react/utils';
-import { isEqual } from 'lodash';
-import { FocusPoint } from './types';
-
-const IMG_STYLES: CSSProperties = {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    minHeight: '100%',
-    minWidth: '100%',
-};
-
-const WRAPPER_STYLES: CSSProperties = {
-    overflow: 'hidden',
-    position: 'relative',
-};
-
-type Sizes = {
-    imgWidth?: number;
-    imgHeight?: number;
-    containerWidth?: number;
-    containerHeight?: number;
-    aspectRatio?: AspectRatio;
-};
-
-function calculateSizes(
-    imageElement?: HTMLImageElement | null | undefined,
-    parentElement?: HTMLElement | null,
-    aspectRatio?: AspectRatio,
-): Sizes | undefined {
-    if (!imageElement || !parentElement || !aspectRatio || aspectRatio === AspectRatio.original) return undefined;
-    const { naturalWidth: imgWidth, naturalHeight: imgHeight } = imageElement || { naturalWidth: 0, naturalHeight: 0 };
-    const { width: containerWidth, height: containerHeight } = parentElement?.getBoundingClientRect() || {
-        width: 0,
-        height: 0,
-    };
-    return { imgWidth, imgHeight, containerWidth, containerHeight, aspectRatio };
-}
-
-const parseFocusPoint = (point: FocusPoint = {}): Required<FocusPoint> => {
-    return { x: point.x ? clamp(point.x, -1, 1) : 0, y: point.y ? clamp(point.y, -1, 1) : 0 };
-};
-
-function calculateImageShift(
-    containerToImageSizeRatio: number,
-    containerSize: number,
-    imageSize: number,
-    focusSize: number,
-    toMinus?: boolean,
-) {
-    const containerCenter = Math.floor(containerSize / 2); // Container center in px
-    const focusFactor = (focusSize + 1) / 2; // Focus point of resize image in px
-    const scaledImage = Math.floor(imageSize / containerToImageSizeRatio); // Can't use width() as images may be display:none
-    let focus = Math.floor(focusFactor * scaledImage);
-    if (toMinus) {
-        focus = scaledImage - focus;
-    }
-    let focusOffset = focus - containerCenter; // Calculate difference between focus point and center
-    const remainder = scaledImage - focus; // Reduce offset if necessary so image remains filled
-    const containerRemainder = containerSize - containerCenter;
-    if (remainder < containerRemainder) {
-        focusOffset -= containerRemainder - remainder;
-    }
-    if (focusOffset < 0) {
-        focusOffset = 0;
-    }
-    return (focusOffset * -100) / containerSize;
-}
-
-type Styles = { wrapper: CSSProperties; image: CSSProperties };
-
-function calculateImageStyle(sizes: Sizes, point: Required<FocusPoint>): Styles | undefined {
-    if (!sizes.imgWidth || !sizes.imgHeight || !sizes.containerWidth || !sizes.containerHeight) {
-        return undefined;
-    }
-
-    // Which is over by more?
-    const widthRatio = sizes.imgWidth / sizes.containerWidth;
-    const heightRatio = sizes.imgHeight / sizes.containerHeight;
-
-    const image: CSSProperties = { ...IMG_STYLES };
-
-    // Minimize image while still filling space
-    if (sizes.imgWidth > sizes.containerWidth && sizes.imgHeight > sizes.containerHeight) {
-        image[widthRatio > heightRatio ? 'maxHeight' : 'maxWidth'] = '100%';
-    }
-
-    if (widthRatio > heightRatio) {
-        image.left = `${calculateImageShift(heightRatio, sizes.containerWidth, sizes.imgWidth, point.x)}%`;
-    } else if (widthRatio < heightRatio) {
-        image.top = `${calculateImageShift(widthRatio, sizes.containerHeight, sizes.imgHeight, point.y, true)}%`;
-    }
-
-    return {
-        image,
-        wrapper: WRAPPER_STYLES,
-    };
-}
-
-/**
- * Hook that calculate CSS style to shift the image in it's container according to the focus point.
- */
-export const useFocusPoint = (options: {
-    image: string;
-    focusPoint?: FocusPoint;
-    aspectRatio?: AspectRatio;
-    imgRef: RefObject<HTMLImageElement>;
-    loadingState: LoadingState;
-    wrapper?: HTMLElement;
-}): Styles | undefined => {
-    const { image, aspectRatio, focusPoint, imgRef, loadingState, wrapper } = options;
-
-    const point = parseFocusPoint(focusPoint);
-
-    const previousPoint = useRef<Required<FocusPoint>>();
-    const previousSizes = useRef<Sizes>({});
-    const [style, setStyle] = useState<Styles>();
-
-    // Update style.
-    const updateRef = useRef<Callback>(null);
-    const update = useMemo(
-        () => {
-            const updateFunction = () => {
-                const sizes = calculateSizes(imgRef?.current, wrapper, aspectRatio);
-                if (!sizes || (isEqual(sizes, previousSizes.current) && isEqual(point, previousPoint.current))) {
-                    // Nothing changed.
-                    return;
-                }
-                setStyle(calculateImageStyle(sizes, point));
-                previousPoint.current = point;
-                previousSizes.current = sizes;
-            };
-            (updateRef as MutableRefObject<Callback>).current = updateFunction;
-            return updateFunction;
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [...Object.values(point), imgRef, wrapper, aspectRatio],
-    );
-
-    // Update on image loaded.
-    useLayoutEffect(update, [image, update, loadingState]);
-
-    // Update on parent resize.
-    useOnResize(wrapper, updateRef);
-
-    return style;
-};