@atlaskit/media-card 77.11.3 → 77.12.1

package/example-helpers/developmentUseMessage.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import InlineMessage from '@atlaskit/inline-message';
 
 const DevelopmentUseMessage: React.FC = () => (
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  <div style={{ textAlign: 'center' }}>
-    <InlineMessage appearance="warning" title="Development use only">
-      The purpose of this example is to explore on edge cases for this
-      component's feature. Some ways of using the component in here might not be
-      the standard way. It is discouraged to use this code as a base for
-      consumers.
-    </InlineMessage>
-  </div>
+	// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+	<div style={{ textAlign: 'center' }}>
+		<InlineMessage appearance="warning" title="Development use only">
+			The purpose of this example is to explore on edge cases for this component's feature. Some
+			ways of using the component in here might not be the standard way. It is discouraged to use
+			this code as a base for consumers.
+		</InlineMessage>
+	</div>
 );
 export default DevelopmentUseMessage;

package/example-helpers/index.tsx

@@ -3,16 +3,14 @@
 import React, { type PropsWithChildren } from 'react';
 import { type FileItem, type Identifier } from '@atlaskit/media-client';
 import {
-  createPollingMaxAttemptsError,
-  createRateLimitedError,
-  createStorybookMediaClientConfig,
-  enableMediaUfoLogger,
-  FeatureFlagsWrapper,
+	createPollingMaxAttemptsError,
+	createRateLimitedError,
+	createStorybookMediaClientConfig,
+	enableMediaUfoLogger,
+	FeatureFlagsWrapper,
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import FabricAnalyticsListeners, {
-  type AnalyticsWebClient,
-} from '@atlaskit/analytics-listeners';
+import FabricAnalyticsListeners, { type AnalyticsWebClient } from '@atlaskit/analytics-listeners';
 import { payloadPublisher } from '@atlassian/ufo';
 
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
@@ -24,159 +22,137 @@ import DevelopmentUseMessage from './developmentUseMessage';
 const mediaClientConfig = createStorybookMediaClientConfig();
 
 export const clickHandler = (result: CardEvent) => {
-  result.event.preventDefault();
-  console.log('click', result.mediaItemDetails);
+	result.event.preventDefault();
+	console.log('click', result.mediaItemDetails);
 };
 
 export const mouseEnterHandler = (result: CardEvent) => {
-  result.event.preventDefault();
-  console.log('mouseEnter', result.mediaItemDetails);
+	result.event.preventDefault();
+	console.log('mouseEnter', result.mediaItemDetails);
 };
 
-export const createApiCards = (
-  appearance: CardAppearance,
-  identifier: Identifier,
-) => {
-  // API methods
-  const apiCards = [
-    {
-      title: 'not selectable',
-      content: (
-        <Card
-          mediaClientConfig={mediaClientConfig}
-          appearance={appearance}
-          identifier={identifier}
-          onClick={clickHandler}
-          onMouseEnter={mouseEnterHandler}
-        />
-      ),
-    },
-  ];
-
-  const selectableCard = {
-    title: 'selectable',
-    content: (
-      <SelectableCard
-        mediaClientConfig={mediaClientConfig}
-        identifier={identifier}
-      />
-    ),
-  };
-
-  if (appearance === 'image') {
-    return [...apiCards, selectableCard];
-  }
-
-  return apiCards;
+export const createApiCards = (appearance: CardAppearance, identifier: Identifier) => {
+	// API methods
+	const apiCards = [
+		{
+			title: 'not selectable',
+			content: (
+				<Card
+					mediaClientConfig={mediaClientConfig}
+					appearance={appearance}
+					identifier={identifier}
+					onClick={clickHandler}
+					onMouseEnter={mouseEnterHandler}
+				/>
+			),
+		},
+	];
+
+	const selectableCard = {
+		title: 'selectable',
+		content: <SelectableCard mediaClientConfig={mediaClientConfig} identifier={identifier} />,
+	};
+
+	if (appearance === 'image') {
+		return [...apiCards, selectableCard];
+	}
+
+	return apiCards;
 };
 
 export const openAction = {
-  label: 'Open',
-  handler: () => {
-    console.log('open');
-  },
+	label: 'Open',
+	handler: () => {
+		console.log('open');
+	},
 };
 export const closeAction = {
-  label: 'Close',
-  handler: () => {
-    console.log('close');
-  },
+	label: 'Close',
+	handler: () => {
+		console.log('close');
+	},
 };
 export const deleteAction = {
-  label: 'Delete',
-  handler: () => {
-    console.log('delete');
-  },
-  icon: <CrossIcon size="small" label="delete" />,
+	label: 'Delete',
+	handler: () => {
+		console.log('delete');
+	},
+	icon: <CrossIcon size="small" label="delete" />,
 };
 
 export const annotateCardAction: CardAction = {
-  label: 'Annotate',
-  handler: () => {
-    console.log('annotate');
-  },
-  icon: <AnnotateIcon size="small" label="annotate" />,
+	label: 'Annotate',
+	handler: () => {
+		console.log('annotate');
+	},
+	icon: <AnnotateIcon size="small" label="annotate" />,
 };
 
-export const actions = [
-  openAction,
-  closeAction,
-  annotateCardAction,
-  deleteAction,
-];
+export const actions = [openAction, closeAction, annotateCardAction, deleteAction];
 
 export const anotherAction: CardAction = {
-  label: 'Some other action',
-  handler: (item?: FileItem) => {
-    console.log('Some other action', item);
-  },
+	label: 'Some other action',
+	handler: (item?: FileItem) => {
+		console.log('Some other action', item);
+	},
 };
 
 export const annotateAction: CardAction = {
-  label: 'Annotate',
-  handler: (item?: FileItem) => {
-    console.log('annotate', item);
-  },
+	label: 'Annotate',
+	handler: (item?: FileItem) => {
+		console.log('annotate', item);
+	},
 };
 
 export const cardsActions = [anotherAction, annotateAction];
 export const wrongMediaClientConfig = createStorybookMediaClientConfig({
-  authType: 'client',
+	authType: 'client',
 });
 export const wrongCollection = 'adfasdf';
 
 export type MainWrapperProps = PropsWithChildren<{
-  developmentOnly?: boolean;
-  disableFeatureFlagWrapper?: boolean;
+	developmentOnly?: boolean;
+	disableFeatureFlagWrapper?: boolean;
 }>;
 
 export const MainWrapper = ({
-  children,
-  developmentOnly,
-  disableFeatureFlagWrapper = false,
+	children,
+	developmentOnly,
+	disableFeatureFlagWrapper = false,
 }: MainWrapperProps) => {
-  enableMediaUfoLogger(payloadPublisher);
-  return (
-    <>
-      {developmentOnly && <DevelopmentUseMessage />}
-      {!disableFeatureFlagWrapper ? (
-        <FeatureFlagsWrapper>{children}</FeatureFlagsWrapper>
-      ) : (
-        <>{children}</>
-      )}
-    </>
-  );
+	enableMediaUfoLogger(payloadPublisher);
+	return (
+		<>
+			{developmentOnly && <DevelopmentUseMessage />}
+			{!disableFeatureFlagWrapper ? (
+				<FeatureFlagsWrapper>{children}</FeatureFlagsWrapper>
+			) : (
+				<>{children}</>
+			)}
+		</>
+	);
 };
 
-export const mediaCardErrorState = (
-  error?: string,
-): MediaCardError | undefined => {
-  switch (error) {
-    case 'rateLimitedError':
-      return new MediaCardError('error-file-state', createRateLimitedError());
-    case 'pollingMaxAttemptsError':
-      return new MediaCardError(
-        'error-file-state',
-        createPollingMaxAttemptsError(),
-      );
-    case 'uploadError':
-      return new MediaCardError('upload');
-    default:
-      return undefined;
-  }
+export const mediaCardErrorState = (error?: string): MediaCardError | undefined => {
+	switch (error) {
+		case 'rateLimitedError':
+			return new MediaCardError('error-file-state', createRateLimitedError());
+		case 'pollingMaxAttemptsError':
+			return new MediaCardError('error-file-state', createPollingMaxAttemptsError());
+		case 'uploadError':
+			return new MediaCardError('upload');
+		default:
+			return undefined;
+	}
 };
 
 export const SSRAnalyticsWrapper = ({ children }: PropsWithChildren<{}>) => {
-  const mockClient: AnalyticsWebClient = {
-    sendUIEvent: (e) => console.debug('UI event', e),
-    sendOperationalEvent: (e) => console.debug('Operational event', e),
-    sendTrackEvent: (e) => console.debug('Track event', e),
-    sendScreenEvent: (e) => console.debug('Screen event', e),
-  };
-
-  return (
-    <FabricAnalyticsListeners client={mockClient}>
-      {children}
-    </FabricAnalyticsListeners>
-  );
+	const mockClient: AnalyticsWebClient = {
+		sendUIEvent: (e) => console.debug('UI event', e),
+		sendOperationalEvent: (e) => console.debug('Operational event', e),
+		sendTrackEvent: (e) => console.debug('Track event', e),
+		sendScreenEvent: (e) => console.debug('Screen event', e),
+	};
+
+	return <FabricAnalyticsListeners client={mockClient}>{children}</FabricAnalyticsListeners>;
 };

package/example-helpers/selectableCard.tsx

@@ -5,45 +5,42 @@ import { type Identifier } from '@atlaskit/media-client';
 import { Card } from '../src';
 
 export interface SelectableCardProps {
-  mediaClientConfig: MediaClientConfig;
-  identifier: Identifier;
+	mediaClientConfig: MediaClientConfig;
+	identifier: Identifier;
 }
 
-export class SelectableCard extends Component<
-  SelectableCardProps,
-  { selected: boolean }
-> {
-  constructor(props: SelectableCardProps) {
-    super(props);
-    this.state = { selected: false };
-  }
+export class SelectableCard extends Component<SelectableCardProps, { selected: boolean }> {
+	constructor(props: SelectableCardProps) {
+		super(props);
+		this.state = { selected: false };
+	}
 
-  render() {
-    const { mediaClientConfig, identifier } = this.props;
-    const { selected } = this.state;
+	render() {
+		const { mediaClientConfig, identifier } = this.props;
+		const { selected } = this.state;
 
-    if (!mediaClientConfig) {
-      return null;
-    }
+		if (!mediaClientConfig) {
+			return null;
+		}
 
-    return (
-      <Card
-        mediaClientConfig={mediaClientConfig}
-        identifier={identifier}
-        appearance="image"
-        selectable={true}
-        selected={selected}
-        onClick={this.onClick}
-        actions={[{ label: 'add', handler: () => {} }]}
-      />
-    );
-  }
+		return (
+			<Card
+				mediaClientConfig={mediaClientConfig}
+				identifier={identifier}
+				appearance="image"
+				selectable={true}
+				selected={selected}
+				onClick={this.onClick}
+				actions={[{ label: 'add', handler: () => {} }]}
+			/>
+		);
+	}
 
-  private onClick = (): void => {
-    this.setState((prevState) => {
-      return {
-        selected: !prevState.selected,
-      };
-    });
-  };
+	private onClick = (): void => {
+		this.setState((prevState) => {
+			return {
+				selected: !prevState.selected,
+			};
+		});
+	};
 }

package/example-helpers/ssrHelpers.tsx

@@ -4,40 +4,30 @@ import ReactDOMServer from 'react-dom/server';
 import { SSRAnalyticsWrapper } from '.';
 
 export interface SimulateSsrParams
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
-  serverPage: React.ReactNode;
-  hydratePage?: React.ReactNode;
+	extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+	serverPage: React.ReactNode;
+	hydratePage?: React.ReactNode;
 }
 
 const randomStr = () => Math.random().toString(36).substr(2, 9);
 const generateSsrPageId = () => `media-ssr-page-${randomStr()}-${randomStr()}`;
 
-export const SimulateSsr = ({
-  serverPage,
-  hydratePage,
-  ...divProps
-}: SimulateSsrParams) => {
-  const id = useMemo(generateSsrPageId, []);
+export const SimulateSsr = ({ serverPage, hydratePage, ...divProps }: SimulateSsrParams) => {
+	const id = useMemo(generateSsrPageId, []);
 
-  useEffect(() => {
-    const txt = ReactDOMServer.renderToString(
-      <SSRAnalyticsWrapper>{serverPage}</SSRAnalyticsWrapper>,
-    );
-    const elem = document.querySelector(`#${id}`);
-    if (elem) {
-      elem.innerHTML = txt;
-      if (hydratePage) {
-        ReactDOM.hydrate(
-          <SSRAnalyticsWrapper>{hydratePage}</SSRAnalyticsWrapper>,
-          elem,
-        );
-      }
-    }
-  }, [id, hydratePage, serverPage]);
+	useEffect(() => {
+		const txt = ReactDOMServer.renderToString(
+			<SSRAnalyticsWrapper>{serverPage}</SSRAnalyticsWrapper>,
+		);
+		const elem = document.querySelector(`#${id}`);
+		if (elem) {
+			elem.innerHTML = txt;
+			if (hydratePage) {
+				ReactDOM.hydrate(<SSRAnalyticsWrapper>{hydratePage}</SSRAnalyticsWrapper>, elem);
+			}
+		}
+	}, [id, hydratePage, serverPage]);
 
-  // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
-  return <div id={id} {...divProps}></div>;
+	// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+	return <div id={id} {...divProps}></div>;
 };

package/example-helpers/styles.ts

@@ -2,121 +2,121 @@ import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
 export const editableCardOptionsStyles = css({
-  padding: token('space.250', '20px'),
-  borderBottom: `1px solid ${token('color.border', '#ccc')}`,
-  maxWidth: '700px',
+	padding: token('space.250', '20px'),
+	borderBottom: `1px solid ${token('color.border', '#ccc')}`,
+	maxWidth: '700px',
 });
 
 export const sliderWrapperStyles = css({
-  display: 'flex',
-  width: '50%',
-  '> *': {
-    flex: 1,
-    margin: token('space.100', '8px'),
-  },
+	display: 'flex',
+	width: '50%',
+	'> *': {
+		flex: 1,
+		margin: token('space.100', '8px'),
+	},
 });
 
 export const editableCardContentStyles = css({
-  padding: token('space.250', '20px'),
-  border: '2px dashed',
-  margin: `${token('space.0', '0px')} ${token('space.150', '12px')} ${token(
-    'space.600',
-    '48px',
-  )} ${token('space.150', '12px')}`,
-  overflow: 'hidden',
-  background: token('color.background.accent.orange.subtlest', 'antiquewhite'),
-  boxSizing: 'border-box',
+	padding: token('space.250', '20px'),
+	border: '2px dashed',
+	margin: `${token('space.0', '0px')} ${token('space.150', '12px')} ${token(
+		'space.600',
+		'48px',
+	)} ${token('space.150', '12px')}`,
+	overflow: 'hidden',
+	background: token('color.background.accent.orange.subtlest', 'antiquewhite'),
+	boxSizing: 'border-box',
 });
 
 export const optionsWrapperStyles = css({
-  display: 'flex',
-  '> *': {
-    flex: 1,
-    margin: token('space.100', '8px'),
-  },
+	display: 'flex',
+	'> *': {
+		flex: 1,
+		margin: token('space.100', '8px'),
+	},
 });
 
 export const cardDimensionsWrapperStyles = css({
-  margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
-    'space.250',
-    '20px',
-  )} ${token('space.100', '8px')}`,
-  display: 'flex',
-  '> div': {
-    border: `1px solid ${token('color.border.bold', 'black')}`,
-    margin: token('space.075', '6px'),
-    padding: token('space.075', '6px'),
-    borderRadius: '3px',
-  },
+	margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
+		'space.250',
+		'20px',
+	)} ${token('space.100', '8px')}`,
+	display: 'flex',
+	'> div': {
+		border: `1px solid ${token('color.border.bold', 'black')}`,
+		margin: token('space.075', '6px'),
+		padding: token('space.075', '6px'),
+		borderRadius: '3px',
+	},
 });
 
 export const flexWrapperStyles = css({
-  display: 'flex',
+	display: 'flex',
 });
 export const cardPreviewWrapperStyles = css({
-  flex: 1,
+	flex: 1,
 });
 
 export const cardWrapperStyles = css({
-  border: `1px solid ${token('color.border.bold', 'black')}`,
-  padding: token('space.150', '12px'),
-  margin: token('space.075', '6px'),
-  flexDirection: 'column',
-  width: '310px',
-  height: '280px',
-  overflow: 'auto',
-  display: 'inline-block',
+	border: `1px solid ${token('color.border.bold', 'black')}`,
+	padding: token('space.150', '12px'),
+	margin: token('space.075', '6px'),
+	flexDirection: 'column',
+	width: '310px',
+	height: '280px',
+	overflow: 'auto',
+	display: 'inline-block',
 });
 
 export const cardFlowHeaderStyles = css({
-  margin: `${token('space.250', '20px')} auto`,
-  padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
+	margin: `${token('space.250', '20px')} auto`,
+	padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
 });
 
 export const externalIdentifierWrapperStyles = css({
-  display: 'flex',
-  justifyContent: 'space-around',
-  margin: `${token('space.0', '0px')} auto`,
-  h2: {
-    marginBottom: token('space.150', '12px'),
-  },
+	display: 'flex',
+	justifyContent: 'space-around',
+	margin: `${token('space.0', '0px')} auto`,
+	h2: {
+		marginBottom: token('space.150', '12px'),
+	},
 });
 
 export const unhandledErrorCardWrapperStyles = css({
-  padding: token('space.250', '20px'),
-  '> div:first-child': {
-    display: 'flex',
-    marginBottom: token('space.250', '20px'),
-  },
-  label: {
-    marginRight: token('space.250', '20px'),
-  },
+	padding: token('space.250', '20px'),
+	'> div:first-child': {
+		display: 'flex',
+		marginBottom: token('space.250', '20px'),
+	},
+	label: {
+		marginRight: token('space.250', '20px'),
+	},
 });
 
 export const inlineCardVideoWrapperItemStyles = css({
-  padding: token('space.150', '12px'),
-  border: `1px solid ${token('color.border.bold', 'black')}`,
-  margin: token('space.150', '12px'),
+	padding: token('space.150', '12px'),
+	border: `1px solid ${token('color.border.bold', 'black')}`,
+	margin: token('space.150', '12px'),
 });
 
 export const mediaViewerExampleColumnStyles = css({
-  flex: 1,
+	flex: 1,
 });
 
 export const mediaViewerExampleWrapperStyles = css({
-  display: 'flex',
+	display: 'flex',
 });
 
 export const mediaInlineWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  margin: token('space.1000', '80px'),
+	display: 'flex',
+	alignItems: 'center',
+	flexDirection: 'column',
+	margin: token('space.1000', '80px'),
 });
 
 export const mediaInlineTableStyles = css({
-  width: '800px',
-  'tr, td': {
-    border: `1px solid ${token('color.border', '#ddd')}`,
-  },
+	width: '800px',
+	'tr, td': {
+		border: `1px solid ${token('color.border', '#ddd')}`,
+	},
 });

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

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import React from 'react';
+
+import { jsx } from '@emotion/react';
+
+export const CardBox = ({ title, children }: { title: string; children: React.ReactNode }) => (
+	<div style={{ marginBottom: '10px' }}>
+		<h3 style={{ textAlign: 'center' }}>{title}</h3>
+		{children}
+	</div>
+);
+
+export const CardRow = ({ children }: { children: React.ReactNode }) => (
+	<div
+		style={{
+			display: 'flex',
+			flexWrap: 'wrap',
+			gap: '10px',
+			marginBottom: '10px',
+		}}
+	>
+		{children}
+	</div>
+);