@atlaskit/media-card 77.11.3 → 77.12.0

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

@@ -0,0 +1,124 @@
+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,43 @@
+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.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,12 +38,13 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/dropdown-menu": "^12.10.0",
-    "@atlaskit/editor-shared-styles": "^2.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",
@@ -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": "^6.5.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-svg-rendering": {
+      "type": "boolean"
     }
   },
   "techstack": {