@atlaskit/media-card 77.11.3 → 77.12.1

package/example-helpers/svg-helpers/controls.tsx

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+import { media } from '@atlaskit/primitives/responsive';
+
+const controlsBoxStyles = xcss({
+	maxWidth: '1500px',
+	width: '90%',
+	margin: 'auto',
+	padding: 'space.100',
+	[media.above.sm]: {
+		width: '70%',
+	},
+	[media.above.lg]: {
+		width: '50%',
+	},
+});
+
+export const ControlsBox = ({ children }: { children: ReactNode }) => (
+	<Box xcss={controlsBoxStyles}>{children}</Box>
+);

package/example-helpers/svg-helpers/delayApiResponses.ts

@@ -0,0 +1,31 @@
+import { type MediaApi } from '@atlaskit/media-client';
+import { sleep } from '@atlaskit/media-test-helpers';
+
+type Endpoints = {
+	getImage: number;
+	getItems: number;
+	getFileBinary: number;
+};
+
+export const delayApiResponses = (
+	mediaApi: MediaApi,
+	{ getImage, getItems, getFileBinary }: Endpoints,
+) => {
+	const baseGetImage = mediaApi.getImage;
+	mediaApi.getImage = async (...params) => {
+		await sleep(getImage);
+		return baseGetImage(...params);
+	};
+
+	const baseGetItems = mediaApi.getItems;
+	mediaApi.getItems = async (...params) => {
+		await sleep(getItems);
+		return baseGetItems(...params);
+	};
+
+	const baseGetFileBinary = mediaApi.getFileBinary;
+	mediaApi.getFileBinary = async (...params) => {
+		await sleep(getFileBinary);
+		return baseGetFileBinary(...params);
+	};
+};

package/example-helpers/svg-helpers/dimensionPicker.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Label } from '@atlaskit/form';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Range from '@atlaskit/range';
+
+import { ToggleBox } from './toggle';
+
+const boxStyles = xcss({ width: '25%', padding: 'space.025' });
+const wrapperStyles = xcss({ padding: 'space.025' });
+
+const pixelRange = [1, 1600];
+const percentRange = [1, 100];
+
+type OnValue = (value: string | undefined) => void;
+
+const defaultVlue = 500;
+
+export const DimensionPicker = ({
+	targetName,
+	dimensionName,
+	onChange,
+	initialValue,
+	initialUnit,
+}: {
+	initialValue?: number;
+	initialUnit?: '%' | 'px';
+	targetName: string;
+	dimensionName: string;
+	onChange: OnValue;
+}) => {
+	const rangeId = `range-${targetName}-${dimensionName}`;
+
+	const [isPercent, setIsPercent] = useState(initialUnit === '%');
+	const [rawValue, setRawValue] = useState<number | undefined>(initialValue);
+	const rangeValues = useMemo(() => (isPercent ? percentRange : pixelRange), [isPercent]);
+
+	const value = useMemo(
+		() => (isPercent && !!rawValue && rawValue > 100 ? 100 : rawValue),
+		[isPercent, rawValue],
+	);
+	const unit = useMemo(() => (isPercent ? '%' : 'px'), [isPercent]);
+
+	useEffect(() => {
+		onChange(value === undefined ? value : `${value}${unit}`);
+	}, [value, unit, onChange]);
+
+	return (
+		<Box xcss={boxStyles}>
+			<Label htmlFor={rangeId}>
+				{targetName} {dimensionName}: {value ? `${value} ${isPercent ? '%' : 'px'}` : 'Not set'}
+			</Label>
+			<ToggleBox label="Use %" defaultChecked={initialUnit === '%'} onChange={setIsPercent} />
+			<ToggleBox
+				label="Unset"
+				defaultChecked={!initialValue}
+				onChange={(value) => {
+					value ? setRawValue(undefined) : setRawValue(defaultVlue);
+				}}
+			/>
+			{rawValue && (
+				<Range
+					id={rangeId}
+					step={1}
+					min={rangeValues[0]}
+					max={rangeValues[1]}
+					onChange={setRawValue}
+					value={value}
+				/>
+			)}
+		</Box>
+	);
+};
+
+export const DimensionsPicker = ({
+	onContainerWidth,
+	onContainerHeight,
+	onImageWidth,
+	onImageHeight,
+}: {
+	onContainerWidth: OnValue;
+	onContainerHeight: OnValue;
+	onImageWidth: OnValue;
+	onImageHeight: OnValue;
+}) => {
+	return (
+		<Flex alignItems="stretch" direction="row" xcss={wrapperStyles}>
+			<DimensionPicker
+				targetName="Container"
+				dimensionName="width"
+				onChange={onContainerWidth}
+				initialValue={defaultVlue}
+			/>
+			<DimensionPicker
+				targetName="Container"
+				dimensionName="height"
+				onChange={onContainerHeight}
+				initialValue={defaultVlue}
+			/>
+			<DimensionPicker
+				targetName="Image"
+				dimensionName="width"
+				onChange={onImageWidth}
+				initialValue={80}
+				initialUnit="%"
+			/>
+			<DimensionPicker
+				targetName="Image"
+				dimensionName="height"
+				onChange={onImageHeight}
+				initialValue={80}
+				initialUnit="%"
+			/>
+		</Flex>
+	);
+};

package/example-helpers/svg-helpers/index.ts

@@ -0,0 +1,7 @@
+export { ControlsBox } from './controls';
+export { DimensionsPicker } from './dimensionPicker';
+export { ToggleBox } from './toggle';
+export { SvgContainer } from './svgContainer';
+export { useSvgUploader } from './uploader';
+export { CardBox, CardRow } from './cardContainer';
+export { delayApiResponses } from './delayApiResponses';

package/example-helpers/svg-helpers/svgContainer.tsx

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import React from 'react';
+
+import { jsx } from '@emotion/react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+
+const containerStyles = xcss({
+	boxSizing: 'border-box',
+	borderColor: 'color.border.accent.orange',
+	borderStyle: 'solid',
+	borderWidth: 'border.width.indicator',
+	margin: 'auto',
+	marginTop: 'space.100',
+	backgroundColor: 'color.background.accent.green.subtler',
+});
+
+export const SvgContainer = ({
+	children,
+	width,
+	height,
+}: {
+	children: React.ReactNode;
+	width?: string;
+	height?: string;
+}) => {
+	return (
+		<Box xcss={containerStyles} style={{ width, height }}>
+			{children}
+		</Box>
+	);
+};

package/example-helpers/svg-helpers/toggle.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import { Label } from '@atlaskit/form';
+import { Box } from '@atlaskit/primitives';
+import Toggle from '@atlaskit/toggle';
+
+function makeid(length = 12) {
+	let result = '';
+	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	const charactersLength = characters.length;
+	let counter = 0;
+	while (counter < length) {
+		result += characters.charAt(Math.floor(Math.random() * charactersLength));
+		counter += 1;
+	}
+	return result;
+}
+
+export const ToggleBox = ({
+	label,
+	onChange,
+	...props
+}: Omit<React.ComponentProps<typeof Toggle>, 'onChange'> & {
+	label: string;
+	onChange: (val: boolean) => void;
+}) => {
+	const [id] = useState(makeid());
+
+	return (
+		<Box>
+			<Label htmlFor={id}>{label}</Label>
+			<Toggle
+				onChange={(evt) => {
+					const { checked } = evt.target;
+					onChange(checked);
+				}}
+				{...props}
+				id={id}
+			/>
+		</Box>
+	);
+};

package/example-helpers/svg-helpers/uploader.ts

@@ -0,0 +1,44 @@
+import { type SyntheticEvent, useState } from 'react';
+
+import { type FileIdentifier } from '@atlaskit/media-client';
+import { useMediaClient } from '@atlaskit/media-client-react';
+
+export const useSvgUploader = (collectionName?: string) => {
+	const mediaClient = useMediaClient();
+	const [identifier, setIdentifier] = useState<FileIdentifier>();
+	const [status, setStatus] = useState<string>('');
+
+	const uploadFn = async (event: SyntheticEvent<HTMLInputElement>) => {
+		if (!event.currentTarget.files || !event.currentTarget.files.length) {
+			return;
+		}
+		setStatus('Uploading');
+
+		const file = event.currentTarget.files[0];
+		const uplodableFile = {
+			content: file,
+			name: file.name,
+			collection: collectionName,
+		};
+
+		mediaClient.file.upload(uplodableFile).subscribe({
+			next: ({ status, id }) => {
+				if (status === 'error') {
+					setStatus('Error while uploading');
+					return;
+				}
+				setStatus(status);
+				setIdentifier({
+					id,
+					mediaItemType: 'file' as const,
+					collectionName,
+				});
+			},
+			error: () => {
+				setStatus('Error while uploading');
+			},
+		});
+	};
+
+	return { status, identifier, uploadFn };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.11.3",
+  "version": "77.12.1",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,18 +37,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/dropdown-menu": "^12.10.0",
-    "@atlaskit/editor-shared-styles": "^2.11.0",
+    "@atlaskit/dropdown-menu": "^12.11.0",
+    "@atlaskit/editor-shared-styles": "^2.12.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/media-client": "^27.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.2.0",
     "@atlaskit/media-file-preview": "^0.5.0",
+    "@atlaskit/media-svg": "^0.1.3",
     "@atlaskit/media-ui": "^25.10.0",
     "@atlaskit/media-viewer": "^48.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/spinner": "^16.1.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
@@ -69,15 +70,19 @@
     "@af/integration-testing": "*",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
+    "@atlaskit/form": "^10.2.0",
     "@atlaskit/inline-message": "^12.1.0",
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-picker": "^66.4.0",
     "@atlaskit/media-state": "^1.1.0",
     "@atlaskit/media-test-data": "^2.3.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/primitives": "^6.4.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/range": "^7.2.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
+    "@atlassian/feature-flags-test-utils": "^0.2.0",
     "@atlassian/ufo": "^0.2.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
@@ -100,6 +105,9 @@
     },
     "platform.media-experience.card-views-refactor_b91lr": {
       "type": "boolean"
+    },
+    "platform.media-card-svg-rendering_6tdbv": {
+      "type": "boolean"
     }
   },
   "techstack": {