27762221325

Committed 18 Jun 2026 01:17PM UTC coverage: 84.677% (+0.1%) from 84.533%

Build # 27762221325

Build Type

Pull #2724

github

Committed by

crishpeen

Commit Message

feat(codemods): introduce codemod to transfer Item to new structure #DS-2586

Pull Request Pull Request #2724: refactor(web,web-react)!: compose Item content with slots #DS-2586

Coverage Stats

2575 of 3504 branches covered (73.49%)

Branch coverage included in aggregate %.

157 of 177 new or added lines in 4 files covered. (88.7%)

117 existing lines in 11 files now uncovered.

7383 of 8256 relevant lines covered (89.43%)

198.49 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.53

/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts

import classNames from 'classnames';
import { type CSSProperties } from 'react';
import { type ObjectFit } from '../../constants';
import { useClassNamePrefix } from '../../hooks';
import { type FileMetadata, type FileUploaderQueueLimitBehaviorType, type Validation } from '../../types';
import { FileUploaderCropCSS, IMAGE_DIMENSION } from './constants';

export interface FileUploaderStyleProps extends Validation {
  imageObjectFit?: (typeof ObjectFit)[keyof typeof ObjectFit];
  isDisabled?: boolean;
  isDisabledByQueueLimitBehavior?: boolean;
  isDragAndDropSupported?: boolean;
  isDragging?: boolean;
  isDropZoneHidden?: boolean;
  isLabelHidden?: boolean;
  meta?: FileMetadata;
  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
}

type ImageCropCSS = {
  [FileUploaderCropCSS.TOP]?: string;
  [FileUploaderCropCSS.LEFT]?: string;
  [FileUploaderCropCSS.WIDTH]?: string;
  [FileUploaderCropCSS.HEIGHT]?: string;
} & CSSProperties;

type ImageObjectFit = {
  '--file-uploader-attachment-image-object-fit': string;
};

type ImageCropMeta = {
  x: number;
  y: number;
  cropWidth: number;
  cropHeight: number;
  originalWidth: number;
  originalHeight: number;
};

export interface FileUploaderStyleReturn {
  /** className props */
  classProps: {
    root: string;
    input: {
      root: string;
      input: string;
      dropLabel: string;
      link: string;
      dropZone: {
        root: string;
        label: string;
      };
    };
    list: string;
    attachment: {
      root: string;
      button: string;
      name: string;
      image: string;
      slot: string;
    };
    imageCropStyles?: ImageCropCSS;
    attachmentStyles?: ImageObjectFit;
  };
}

export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileUploaderStyleReturn => {
  const fileUploaderClass = useClassNamePrefix('FileUploader');
  const fileUploaderHasDragAndDropClass = 'has-drag-and-drop';
  const fileUploaderInputClass = `${fileUploaderClass}Input`;
  const fileUploaderInputDisabledClass = `${fileUploaderInputClass}--disabled`;
  const fileUploaderInputValidationClass = `${fileUploaderInputClass}--${props?.validationState}`;
  const fileUploaderInputDraggingClass = 'is-dragging';
  const fileUploaderInputDropLabelClass = `${fileUploaderInputClass}__dragAndDropLabel`;
  const fileUploaderInputDropZoneClass = `${fileUploaderInputClass}__dropZone`;
  const fileUploaderInputDropZoneLabelClass = `${fileUploaderInputDropZoneClass}Label`;
  const fileUploaderInputHiddenClass = 'd-none';
  const fileUploaderInputInputClass = `${fileUploaderInputClass}__input`;
  const fileUploaderInputLinkClass = `${fileUploaderInputClass}__link`;
  const fileUploaderInputLinkUtilityClasses = ['link-primary', 'link-underlined'];
  const fileUploaderListClass = `${fileUploaderClass}List`;
  const fileUploaderAttachmentClass = `${fileUploaderClass}Attachment`;
  const fileUploaderAttachmentNameClass = `${fileUploaderAttachmentClass}__name`;
  const fileUploaderAttachmentButtonClass = `${fileUploaderAttachmentClass}__action`;
  const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
  const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;

  const { meta, imageObjectFit } = props || {};
  let imageCropCSS: ImageCropCSS | undefined;
  let imageObjectFitCSS: ImageObjectFit | undefined;
  const hasCoordsInMeta =
    meta != null &&
    ['x', 'y', 'cropWidth', 'cropHeight', 'originalWidth', 'originalHeight'].every((coord) => meta[coord] != null);

  if (hasCoordsInMeta) {
    const { x, y, cropWidth, cropHeight, originalWidth, originalHeight } = meta as ImageCropMeta;
    const previewHeight = IMAGE_DIMENSION;
    let scale;
    if (cropHeight > cropWidth) {
      // scale for portrait images
      scale = previewHeight / cropWidth;
    } else {
      // scale for landscape images
      scale = previewHeight / cropHeight;
    }

    const cropX = Math.round(x * scale);
    const cropY = Math.round(y * scale);
    const imageWidth = Math.round(originalWidth * scale);
    const imageHeight = Math.round(originalHeight * scale);

    imageCropCSS = {
      [FileUploaderCropCSS.TOP]: `-${cropY}px`,
      [FileUploaderCropCSS.LEFT]: `-${cropX}px`,
      [FileUploaderCropCSS.WIDTH]: `${imageWidth}px`,
      [FileUploaderCropCSS.HEIGHT]: `${imageHeight}px`,
    };
  }

  if (imageObjectFit) {
    imageObjectFitCSS = {
      '--file-uploader-attachment-image-object-fit': imageObjectFit,
    };
  }

  return {
    classProps: {
      root: fileUploaderClass,
      input: {
        root: classNames(fileUploaderInputClass, {
          [fileUploaderHasDragAndDropClass]: props?.isDragAndDropSupported,
          [fileUploaderInputDisabledClass]:
            props?.isDisabled || (props?.isDisabledByQueueLimitBehavior && props?.queueLimitBehavior === 'disable'),
          [fileUploaderInputDraggingClass]: props?.isDragging,
          [fileUploaderInputHiddenClass]: props?.isDropZoneHidden && props.queueLimitBehavior === 'hide',
          [fileUploaderInputValidationClass]: props?.validationState,
        }),
        input: fileUploaderInputInputClass,
        dropLabel: fileUploaderInputDropLabelClass,
        link: classNames(fileUploaderInputLinkClass, ...fileUploaderInputLinkUtilityClasses),
        dropZone: {
          root: fileUploaderInputDropZoneClass,
          label: fileUploaderInputDropZoneLabelClass,
        },
      },
      list: fileUploaderListClass,
      attachment: {
        root: fileUploaderAttachmentClass,
        button: fileUploaderAttachmentButtonClass,
        name: fileUploaderAttachmentNameClass,
        image: fileUploaderAttachmentImageClass,
        slot: fileUploaderAttachmentSlotClass,
      },
      ...(hasCoordsInMeta && { imageCropStyles: imageCropCSS }),
      ...(imageObjectFit && { attachmentStyles: imageObjectFitCSS }),
    },
  };
};

1	import classNames from 'classnames';	174✔
2	import { type CSSProperties } from 'react';
3	import { type ObjectFit } from '../../constants';
4	import { useClassNamePrefix } from '../../hooks';	174✔
5	import { type FileMetadata, type FileUploaderQueueLimitBehaviorType, type Validation } from '../../types';
6	import { FileUploaderCropCSS, IMAGE_DIMENSION } from './constants';	174✔
7
8	export interface FileUploaderStyleProps extends Validation {
9	imageObjectFit?: (typeof ObjectFit)[keyof typeof ObjectFit];
10	isDisabled?: boolean;
11	isDisabledByQueueLimitBehavior?: boolean;
12	isDragAndDropSupported?: boolean;
13	isDragging?: boolean;
14	isDropZoneHidden?: boolean;
15	isLabelHidden?: boolean;
16	meta?: FileMetadata;
17	queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
18	}
19
20	type ImageCropCSS = {
21	[FileUploaderCropCSS.TOP]?: string;
22	[FileUploaderCropCSS.LEFT]?: string;
23	[FileUploaderCropCSS.WIDTH]?: string;
24	[FileUploaderCropCSS.HEIGHT]?: string;
25	} & CSSProperties;
26
27	type ImageObjectFit = {
28	'--file-uploader-attachment-image-object-fit': string;
29	};
30
31	type ImageCropMeta = {
32	x: number;
33	y: number;
34	cropWidth: number;
35	cropHeight: number;
36	originalWidth: number;
37	originalHeight: number;
38	};
39
40	export interface FileUploaderStyleReturn {
41	/** className props */
42	classProps: {
43	root: string;
44	input: {
45	root: string;
46	input: string;
47	dropLabel: string;
48	link: string;
49	dropZone: {
50	root: string;
51	label: string;
52	};
53	};
54	list: string;
55	attachment: {
56	root: string;
57	button: string;
58	name: string;
59	image: string;
60	slot: string;
61	};
62	imageCropStyles?: ImageCropCSS;
63	attachmentStyles?: ImageObjectFit;
64	};
65	}
66
67	export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileUploaderStyleReturn => {	174✔
68	const fileUploaderClass = useClassNamePrefix('FileUploader');	68✔
69	const fileUploaderHasDragAndDropClass = 'has-drag-and-drop';	68✔
70	const fileUploaderInputClass = `${fileUploaderClass}Input`;	68✔
71	const fileUploaderInputDisabledClass = `${fileUploaderInputClass}--disabled`;	68✔
72	const fileUploaderInputValidationClass = `${fileUploaderInputClass}--${props?.validationState}`;	68✔
73	const fileUploaderInputDraggingClass = 'is-dragging';	68✔
74	const fileUploaderInputDropLabelClass = `${fileUploaderInputClass}__dragAndDropLabel`;	68✔
75	const fileUploaderInputDropZoneClass = `${fileUploaderInputClass}__dropZone`;	68✔
76	const fileUploaderInputDropZoneLabelClass = `${fileUploaderInputDropZoneClass}Label`;	68✔
77	const fileUploaderInputHiddenClass = 'd-none';	68✔
78	const fileUploaderInputInputClass = `${fileUploaderInputClass}__input`;	68✔
79	const fileUploaderInputLinkClass = `${fileUploaderInputClass}__link`;	68✔
80	const fileUploaderInputLinkUtilityClasses = ['link-primary', 'link-underlined'];	68✔
81	const fileUploaderListClass = `${fileUploaderClass}List`;	68✔
82	const fileUploaderAttachmentClass = `${fileUploaderClass}Attachment`;	68✔
83	const fileUploaderAttachmentNameClass = `${fileUploaderAttachmentClass}__name`;	68✔
84	const fileUploaderAttachmentButtonClass = `${fileUploaderAttachmentClass}__action`;	68✔
85	const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;	68✔
86	const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;	68✔
87
88	const { meta, imageObjectFit } = props \|\| {};	68✔
89	let imageCropCSS: ImageCropCSS \| undefined;
90	let imageObjectFitCSS: ImageObjectFit \| undefined;
91	const hasCoordsInMeta =
92	meta != null &&	68✔
93	['x', 'y', 'cropWidth', 'cropHeight', 'originalWidth', 'originalHeight'].every((coord) => meta[coord] != null);	6✔
94
95	if (hasCoordsInMeta) {	68✔
96	const { x, y, cropWidth, cropHeight, originalWidth, originalHeight } = meta as ImageCropMeta;	1✔
97	const previewHeight = IMAGE_DIMENSION;	1✔
98	let scale;
99	if (cropHeight > cropWidth) {	1!
100	// scale for portrait images
UNCOV 101	scale = previewHeight / cropWidth;	×
102	} else {
103	// scale for landscape images
104	scale = previewHeight / cropHeight;	1✔
105	}
106
107	const cropX = Math.round(x * scale);	1✔
108	const cropY = Math.round(y * scale);	1✔
109	const imageWidth = Math.round(originalWidth * scale);	1✔
110	const imageHeight = Math.round(originalHeight * scale);	1✔
111
112	imageCropCSS = {	1✔
113	[FileUploaderCropCSS.TOP]: `-${cropY}px`,
114	[FileUploaderCropCSS.LEFT]: `-${cropX}px`,
115	[FileUploaderCropCSS.WIDTH]: `${imageWidth}px`,
116	[FileUploaderCropCSS.HEIGHT]: `${imageHeight}px`,
117	};
118	}
119
120	if (imageObjectFit) {	68!
UNCOV 121	imageObjectFitCSS = {	×
122	'--file-uploader-attachment-image-object-fit': imageObjectFit,
123	};
124	}
125
126	return {	68✔
127	classProps: {
128	root: fileUploaderClass,
129	input: {
130	root: classNames(fileUploaderInputClass, {
131	[fileUploaderHasDragAndDropClass]: props?.isDragAndDropSupported,
132	[fileUploaderInputDisabledClass]:
133	props?.isDisabled \|\| (props?.isDisabledByQueueLimitBehavior && props?.queueLimitBehavior === 'disable'),	130✔
134	[fileUploaderInputDraggingClass]: props?.isDragging,
135	[fileUploaderInputHiddenClass]: props?.isDropZoneHidden && props.queueLimitBehavior === 'hide',	69✔
136	[fileUploaderInputValidationClass]: props?.validationState,
137	}),
138	input: fileUploaderInputInputClass,
139	dropLabel: fileUploaderInputDropLabelClass,
140	link: classNames(fileUploaderInputLinkClass, ...fileUploaderInputLinkUtilityClasses),
141	dropZone: {
142	root: fileUploaderInputDropZoneClass,
143	label: fileUploaderInputDropZoneLabelClass,
144	},
145	},
146	list: fileUploaderListClass,
147	attachment: {
148	root: fileUploaderAttachmentClass,
149	button: fileUploaderAttachmentButtonClass,
150	name: fileUploaderAttachmentNameClass,
151	image: fileUploaderAttachmentImageClass,
152	slot: fileUploaderAttachmentSlotClass,
153	},
154	...(hasCoordsInMeta && { imageCropStyles: imageCropCSS }),	69✔
155	...(imageObjectFit && { attachmentStyles: imageObjectFitCSS }),	68!
156	},
157	};
158	};

alma-oss / spirit-design-system / 27762221325

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous