@atlaskit/media-client 27.2.1 → 27.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/compass.yml +0 -1
- package/dist/cjs/models/artifacts.js +7 -2
- package/dist/es2019/client/media-store/resolveAuth.js +6 -6
- package/dist/es2019/models/artifacts.js +7 -2
- package/dist/esm/models/artifacts.js +7 -2
- package/dist/types/client/file-fetcher/index.d.ts +1 -1
- package/dist/types/index.d.ts +5 -5
- package/dist/types/models/errors/index.d.ts +1 -1
- package/dist/types/utils/mediaSubscribable/index.d.ts +1 -1
- package/dist/types/utils/mobileUpload/index.d.ts +1 -1
- package/dist/types/utils/request/index.d.ts +1 -1
- package/dist/types-ts4.5/client/file-fetcher/index.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +5 -5
- package/dist/types-ts4.5/models/errors/index.d.ts +1 -1
- package/dist/types-ts4.5/utils/mediaSubscribable/index.d.ts +1 -1
- package/dist/types-ts4.5/utils/mobileUpload/index.d.ts +1 -1
- package/dist/types-ts4.5/utils/request/index.d.ts +1 -1
- package/example-helpers/styles.ts +72 -59
- package/example-helpers/stylesWrapper.tsx +42 -35
- package/package.json +93 -93
- package/report.api.md +908 -986
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/media-client
|
|
2
2
|
|
|
3
|
+
## 27.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 27.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#112714](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112714)
|
|
14
|
+
[`2a85dbbc4bc4f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a85dbbc4bc4f) -
|
|
15
|
+
CXP-3328 Safeguard getArtifactUrl output with CDN feature flag
|
|
16
|
+
|
|
3
17
|
## 27.2.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/compass.yml
CHANGED
|
@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getArtifactUrl = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
7
8
|
var getArtifactUrl = exports.getArtifactUrl = function getArtifactUrl(artifacts, prop) {
|
|
8
|
-
var _artifacts$
|
|
9
|
-
|
|
9
|
+
var _artifacts$prop3;
|
|
10
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery')) {
|
|
11
|
+
var _artifacts$prop, _artifacts$prop2;
|
|
12
|
+
return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
|
|
13
|
+
}
|
|
14
|
+
return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
|
|
10
15
|
};
|
|
@@ -16,12 +16,12 @@ export const resolveAuth = async (authProvider, authContext, authProviderTimeout
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/*
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
We added a token expiration check here in the past, and then we had to revert due to edge cases in the client that we can't control.
|
|
20
|
+
Token expiration check in the frontend is a bad idea. Don't do it!
|
|
21
|
+
More info:
|
|
22
|
+
https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13080
|
|
23
|
+
https://gist.github.com/timvisee/fcda9bbdff88d45cc9061606b4b923ca
|
|
24
|
+
*/
|
|
25
25
|
|
|
26
26
|
return auth;
|
|
27
27
|
};
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
export const getArtifactUrl = (artifacts, prop) => {
|
|
2
|
-
var _artifacts$
|
|
3
|
-
|
|
3
|
+
var _artifacts$prop3;
|
|
4
|
+
if (getBooleanFF('platform.media-cdn-delivery')) {
|
|
5
|
+
var _artifacts$prop, _artifacts$prop2;
|
|
6
|
+
return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
|
|
7
|
+
}
|
|
8
|
+
return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
|
|
4
9
|
};
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
export var getArtifactUrl = function getArtifactUrl(artifacts, prop) {
|
|
2
|
-
var _artifacts$
|
|
3
|
-
|
|
3
|
+
var _artifacts$prop3;
|
|
4
|
+
if (getBooleanFF('platform.media-cdn-delivery')) {
|
|
5
|
+
var _artifacts$prop, _artifacts$prop2;
|
|
6
|
+
return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
|
|
7
|
+
}
|
|
8
|
+
return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
|
|
4
9
|
};
|
|
@@ -10,7 +10,7 @@ import { type MediaSubscribable } from '../../utils/mediaSubscribable';
|
|
|
10
10
|
import { type Dimensions } from '../../utils/getDimensionsFromBlob';
|
|
11
11
|
import { type MediaTraceContext } from '@atlaskit/media-common';
|
|
12
12
|
import { type FilePreview, type FileState, type MediaStore } from '@atlaskit/media-state';
|
|
13
|
-
export type { FileFetcherErrorAttributes, FileFetcherErrorReason
|
|
13
|
+
export type { FileFetcherErrorAttributes, FileFetcherErrorReason } from './error';
|
|
14
14
|
export { isFileFetcherError, FileFetcherError } from './error';
|
|
15
15
|
export interface CopySourceFile {
|
|
16
16
|
id: string;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -19,11 +19,11 @@ export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes,
|
|
|
19
19
|
export { isAbortedRequestError, createUrl } from './utils/request/helpers';
|
|
20
20
|
export { PollingFunction } from './utils/polling';
|
|
21
21
|
export { isPollingError, PollingError } from './utils/polling/errors';
|
|
22
|
-
export type { Executor, PollingErrorAttributes, PollingErrorReason
|
|
22
|
+
export type { Executor, PollingErrorAttributes, PollingErrorReason } from './utils/polling/types';
|
|
23
23
|
export type { RequestMethod, RequestParams, RequestHeaders, RetryOptions, ClientOptions, RequestMetadata, RequestOptions, CreateUrlOptions, } from './utils/request/types';
|
|
24
24
|
export type { ImageResizeMode } from './utils/imageResizeModeToFileImageMode';
|
|
25
25
|
export { imageResizeModeToFileImageMode } from './utils/imageResizeModeToFileImageMode';
|
|
26
|
-
export { FileFetcherImpl, FileFetcherError, isFileFetcherError
|
|
26
|
+
export { FileFetcherImpl, FileFetcherError, isFileFetcherError } from './client/file-fetcher';
|
|
27
27
|
export type { CopySourceFile, CopyDestination, CopyFileOptions, FileFetcher, FileFetcherErrorAttributes, FileFetcherErrorReason, } from './client/file-fetcher';
|
|
28
28
|
export { MediaClient } from './client/media-client';
|
|
29
29
|
export { StargateClient } from './client/stargate-client';
|
|
@@ -32,14 +32,14 @@ export { checkWebpSupport } from './utils/checkWebpSupport';
|
|
|
32
32
|
export { getDimensionsFromBlob } from './utils/getDimensionsFromBlob';
|
|
33
33
|
export type { Dimensions } from './utils/getDimensionsFromBlob';
|
|
34
34
|
export { createMediaSubject } from './utils/createMediaSubject';
|
|
35
|
-
export { isFileIdentifier, isExternalImageIdentifier, isDifferentIdentifier
|
|
36
|
-
export type { Identifier, FileIdentifier, ExternalImageIdentifier
|
|
35
|
+
export { isFileIdentifier, isExternalImageIdentifier, isDifferentIdentifier } from './identifier';
|
|
36
|
+
export type { Identifier, FileIdentifier, ExternalImageIdentifier } from './identifier';
|
|
37
37
|
export type { EventPayloadListener, UploadEventPayloadMap, MediaViewedEventPayload, } from './client/events';
|
|
38
38
|
export type { MediaClientConfig } from '@atlaskit/media-core';
|
|
39
39
|
export { globalMediaEventEmitter } from './globalMediaEventEmitter';
|
|
40
40
|
export { isMediaBlobUrl, getAttrsFromUrl, addFileAttrsToUrl, objectToQueryString, } from './utils/url';
|
|
41
41
|
export type { MediaBlobUrlAttrs } from './utils/url';
|
|
42
|
-
export { createMediaSubscribable, fromObservable
|
|
42
|
+
export { createMediaSubscribable, fromObservable } from './utils/mediaSubscribable';
|
|
43
43
|
export type { MediaSubscribable, MediaSubscription, MediaObserver, } from './utils/mediaSubscribable';
|
|
44
44
|
export { RECENTS_COLLECTION, MAX_RESOLUTION } from './constants';
|
|
45
45
|
export { getFileStreamsCache } from './file-streams-cache';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MediaClientError, type MediaClientErrorAttributes } from './types';
|
|
2
|
-
export type { MediaClientError, MediaClientErrorReason, MediaClientErrorAttributes
|
|
2
|
+
export type { MediaClientError, MediaClientErrorReason, MediaClientErrorAttributes } from './types';
|
|
3
3
|
export { isMediaClientError, getMediaClientErrorReason } from './helpers';
|
|
4
4
|
/**
|
|
5
5
|
* Base class for media errors
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type { MediaSubscribable, MediaObserver, MediaSubscription
|
|
1
|
+
export type { MediaSubscribable, MediaObserver, MediaSubscription } from './types';
|
|
2
2
|
export { toPromise } from './toPromise';
|
|
3
3
|
export { createMediaSubscribable, fromObservable } from './fromObservable';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { isMobileUploadError, MobileUploadError } from './error';
|
|
2
2
|
export { createServicesCache } from './servicesCache';
|
|
3
|
-
export { createMobileUploadService, createMobileUploadStateMachine
|
|
3
|
+
export { createMobileUploadService, createMobileUploadStateMachine } from './stateMachine';
|
|
4
4
|
export { createMobileFileStateSubject } from './helpers';
|
|
5
5
|
export type { StateMachineContext, StateMachineSchema, StateMachineEvent, StateMachineTypestate, } from './stateMachine/types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RequestOptions } from './types';
|
|
2
|
-
export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes
|
|
2
|
+
export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes } from './types';
|
|
3
3
|
export { RequestError, isRequestError } from './errors';
|
|
4
4
|
export { isRateLimitedError, createRequestErrorReason } from './helpers';
|
|
5
5
|
export declare function request(url: string, options?: RequestOptions, controller?: AbortController): Promise<Response>;
|
|
@@ -10,7 +10,7 @@ import { type MediaSubscribable } from '../../utils/mediaSubscribable';
|
|
|
10
10
|
import { type Dimensions } from '../../utils/getDimensionsFromBlob';
|
|
11
11
|
import { type MediaTraceContext } from '@atlaskit/media-common';
|
|
12
12
|
import { type FilePreview, type FileState, type MediaStore } from '@atlaskit/media-state';
|
|
13
|
-
export type { FileFetcherErrorAttributes, FileFetcherErrorReason
|
|
13
|
+
export type { FileFetcherErrorAttributes, FileFetcherErrorReason } from './error';
|
|
14
14
|
export { isFileFetcherError, FileFetcherError } from './error';
|
|
15
15
|
export interface CopySourceFile {
|
|
16
16
|
id: string;
|
|
@@ -19,11 +19,11 @@ export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes,
|
|
|
19
19
|
export { isAbortedRequestError, createUrl } from './utils/request/helpers';
|
|
20
20
|
export { PollingFunction } from './utils/polling';
|
|
21
21
|
export { isPollingError, PollingError } from './utils/polling/errors';
|
|
22
|
-
export type { Executor, PollingErrorAttributes, PollingErrorReason
|
|
22
|
+
export type { Executor, PollingErrorAttributes, PollingErrorReason } from './utils/polling/types';
|
|
23
23
|
export type { RequestMethod, RequestParams, RequestHeaders, RetryOptions, ClientOptions, RequestMetadata, RequestOptions, CreateUrlOptions, } from './utils/request/types';
|
|
24
24
|
export type { ImageResizeMode } from './utils/imageResizeModeToFileImageMode';
|
|
25
25
|
export { imageResizeModeToFileImageMode } from './utils/imageResizeModeToFileImageMode';
|
|
26
|
-
export { FileFetcherImpl, FileFetcherError, isFileFetcherError
|
|
26
|
+
export { FileFetcherImpl, FileFetcherError, isFileFetcherError } from './client/file-fetcher';
|
|
27
27
|
export type { CopySourceFile, CopyDestination, CopyFileOptions, FileFetcher, FileFetcherErrorAttributes, FileFetcherErrorReason, } from './client/file-fetcher';
|
|
28
28
|
export { MediaClient } from './client/media-client';
|
|
29
29
|
export { StargateClient } from './client/stargate-client';
|
|
@@ -32,14 +32,14 @@ export { checkWebpSupport } from './utils/checkWebpSupport';
|
|
|
32
32
|
export { getDimensionsFromBlob } from './utils/getDimensionsFromBlob';
|
|
33
33
|
export type { Dimensions } from './utils/getDimensionsFromBlob';
|
|
34
34
|
export { createMediaSubject } from './utils/createMediaSubject';
|
|
35
|
-
export { isFileIdentifier, isExternalImageIdentifier, isDifferentIdentifier
|
|
36
|
-
export type { Identifier, FileIdentifier, ExternalImageIdentifier
|
|
35
|
+
export { isFileIdentifier, isExternalImageIdentifier, isDifferentIdentifier } from './identifier';
|
|
36
|
+
export type { Identifier, FileIdentifier, ExternalImageIdentifier } from './identifier';
|
|
37
37
|
export type { EventPayloadListener, UploadEventPayloadMap, MediaViewedEventPayload, } from './client/events';
|
|
38
38
|
export type { MediaClientConfig } from '@atlaskit/media-core';
|
|
39
39
|
export { globalMediaEventEmitter } from './globalMediaEventEmitter';
|
|
40
40
|
export { isMediaBlobUrl, getAttrsFromUrl, addFileAttrsToUrl, objectToQueryString, } from './utils/url';
|
|
41
41
|
export type { MediaBlobUrlAttrs } from './utils/url';
|
|
42
|
-
export { createMediaSubscribable, fromObservable
|
|
42
|
+
export { createMediaSubscribable, fromObservable } from './utils/mediaSubscribable';
|
|
43
43
|
export type { MediaSubscribable, MediaSubscription, MediaObserver, } from './utils/mediaSubscribable';
|
|
44
44
|
export { RECENTS_COLLECTION, MAX_RESOLUTION } from './constants';
|
|
45
45
|
export { getFileStreamsCache } from './file-streams-cache';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MediaClientError, type MediaClientErrorAttributes } from './types';
|
|
2
|
-
export type { MediaClientError, MediaClientErrorReason, MediaClientErrorAttributes
|
|
2
|
+
export type { MediaClientError, MediaClientErrorReason, MediaClientErrorAttributes } from './types';
|
|
3
3
|
export { isMediaClientError, getMediaClientErrorReason } from './helpers';
|
|
4
4
|
/**
|
|
5
5
|
* Base class for media errors
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type { MediaSubscribable, MediaObserver, MediaSubscription
|
|
1
|
+
export type { MediaSubscribable, MediaObserver, MediaSubscription } from './types';
|
|
2
2
|
export { toPromise } from './toPromise';
|
|
3
3
|
export { createMediaSubscribable, fromObservable } from './fromObservable';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { isMobileUploadError, MobileUploadError } from './error';
|
|
2
2
|
export { createServicesCache } from './servicesCache';
|
|
3
|
-
export { createMobileUploadService, createMobileUploadStateMachine
|
|
3
|
+
export { createMobileUploadService, createMobileUploadStateMachine } from './stateMachine';
|
|
4
4
|
export { createMobileFileStateSubject } from './helpers';
|
|
5
5
|
export type { StateMachineContext, StateMachineSchema, StateMachineEvent, StateMachineTypestate, } from './stateMachine/types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RequestOptions } from './types';
|
|
2
|
-
export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes
|
|
2
|
+
export type { RequestErrorReason, RequestErrorMetadata, RequestErrorAttributes } from './types';
|
|
3
3
|
export { RequestError, isRequestError } from './errors';
|
|
4
4
|
export { isRateLimitedError, createRequestErrorReason } from './helpers';
|
|
5
5
|
export declare function request(url: string, options?: RequestOptions, controller?: AbortController): Promise<Response>;
|
|
@@ -1,104 +1,117 @@
|
|
|
1
1
|
import { token } from '@atlaskit/tokens';
|
|
2
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
3
|
import { css } from '@emotion/react';
|
|
3
4
|
import { type FileStatus } from '../src';
|
|
4
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
5
7
|
export const wrapperStyles = css({
|
|
6
|
-
|
|
8
|
+
display: 'flex',
|
|
7
9
|
});
|
|
8
10
|
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
9
12
|
export const imagePreviewStyles = css({
|
|
10
|
-
|
|
13
|
+
width: '300px',
|
|
11
14
|
});
|
|
12
15
|
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
13
17
|
export const previewWrapperStyles = css({
|
|
14
|
-
|
|
18
|
+
flex: 1,
|
|
15
19
|
});
|
|
16
20
|
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
17
22
|
export const metadataWrapperStyles = css({
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
23
|
+
width: '400px',
|
|
24
|
+
overflow: 'scroll',
|
|
25
|
+
flex: 1,
|
|
21
26
|
});
|
|
22
27
|
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
23
29
|
export const fileInputStyles = css({
|
|
24
|
-
|
|
30
|
+
color: 'transparent',
|
|
25
31
|
});
|
|
26
32
|
|
|
27
33
|
export interface FilesWrapperProps {
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
status: FileStatus;
|
|
35
|
+
key: number;
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
const statusColorMap: { [key in FileStatus]: string } = {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
uploading: token('color.background.accent.blue.subtle', 'cornflowerblue'),
|
|
40
|
+
processing: token('color.background.accent.orange.subtler', 'peachpuff'),
|
|
41
|
+
processed: token('color.background.accent.green.subtle', 'darkseagreen'),
|
|
42
|
+
error: token('color.background.accent.red.subtle', 'indianred'),
|
|
43
|
+
'failed-processing': token('color.background.accent.red.subtle', 'indianred'),
|
|
38
44
|
};
|
|
39
45
|
|
|
40
46
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
41
47
|
export const fileWrapperStyles = (status: FileStatus) =>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
css({
|
|
49
|
+
padding: '5px',
|
|
50
|
+
margin: '10px',
|
|
51
|
+
display: 'inline-block',
|
|
52
|
+
width: '315px',
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
54
|
+
backgroundColor: statusColorMap[status],
|
|
55
|
+
});
|
|
49
56
|
|
|
50
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
57
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
51
58
|
export const cardsWrapperStyles = css({
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
width: '900px',
|
|
60
|
+
padding: '10px',
|
|
61
|
+
borderRight: `1px solid ${token('color.border', '#ccc')}`,
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
63
|
+
h1: {
|
|
64
|
+
textAlign: 'center',
|
|
65
|
+
borderBottom: `1px solid ${token('color.border', '#ccc')}`,
|
|
66
|
+
},
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
68
|
+
'> div': {
|
|
69
|
+
width: 'auto',
|
|
70
|
+
display: 'inline-block',
|
|
71
|
+
margin: '10px',
|
|
72
|
+
},
|
|
64
73
|
});
|
|
65
74
|
|
|
66
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
75
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
67
76
|
export const headerStyles = css({
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
78
|
+
button: {
|
|
79
|
+
margin: '5px',
|
|
80
|
+
},
|
|
71
81
|
});
|
|
72
82
|
|
|
73
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
83
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
74
84
|
export const fileStateWrapperStyles = css({
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
85
|
+
border: `1px solid ${token('color.border', '#ccc')}`,
|
|
86
|
+
margin: '10px',
|
|
87
|
+
padding: '10px',
|
|
88
|
+
width: '500px',
|
|
79
89
|
});
|
|
80
90
|
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
81
92
|
export const uploadTouchWrapperStyles = css({
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
93
|
+
height: '100%',
|
|
94
|
+
width: '100%',
|
|
95
|
+
display: 'flex',
|
|
96
|
+
flexDirection: 'column',
|
|
97
|
+
flexWrap: 'nowrap',
|
|
98
|
+
alignItems: 'center',
|
|
99
|
+
justifyContent: 'center',
|
|
100
|
+
alignContent: 'center',
|
|
90
101
|
});
|
|
91
102
|
|
|
92
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
103
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
93
104
|
export const rowStyles = css({
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
105
|
+
flexDirection: 'row',
|
|
106
|
+
justifyContent: 'center',
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
108
|
+
'> *': {
|
|
109
|
+
marginRight: '10px',
|
|
110
|
+
},
|
|
99
111
|
});
|
|
100
112
|
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
101
114
|
export const responseStyles = css({
|
|
102
|
-
|
|
103
|
-
|
|
115
|
+
fontFamily: 'monospace',
|
|
116
|
+
whiteSpace: 'pre',
|
|
104
117
|
});
|
|
@@ -1,82 +1,89 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
3
|
import { jsx } from '@emotion/react';
|
|
3
4
|
import { type ChangeEvent, type ReactNode } from 'react';
|
|
4
5
|
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
cardsWrapperStyles,
|
|
7
|
+
fileInputStyles,
|
|
8
|
+
fileStateWrapperStyles,
|
|
9
|
+
fileWrapperStyles,
|
|
10
|
+
headerStyles,
|
|
11
|
+
imagePreviewStyles,
|
|
12
|
+
metadataWrapperStyles,
|
|
13
|
+
previewWrapperStyles,
|
|
14
|
+
responseStyles,
|
|
15
|
+
rowStyles,
|
|
16
|
+
uploadTouchWrapperStyles,
|
|
17
|
+
wrapperStyles,
|
|
17
18
|
} from './styles';
|
|
18
19
|
import { type FileStatus } from '../src';
|
|
19
20
|
|
|
20
21
|
export const Wrapper = ({ children }: { children: ReactNode }) => {
|
|
21
|
-
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
23
|
+
return <div css={wrapperStyles}>{children}</div>;
|
|
22
24
|
};
|
|
23
25
|
|
|
24
26
|
interface ImagePreviewProps {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
src: string;
|
|
28
|
+
alt: string;
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
export const ImagePreview = ({ src, alt }: ImagePreviewProps) => {
|
|
30
|
-
|
|
32
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
33
|
+
return <img css={imagePreviewStyles} src={src} alt={alt} />;
|
|
31
34
|
};
|
|
32
35
|
|
|
33
36
|
export const PreviewWrapper = ({ children }: { children: ReactNode }) => {
|
|
34
|
-
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
38
|
+
return <div css={previewWrapperStyles}>{children}</div>;
|
|
35
39
|
};
|
|
36
40
|
|
|
37
41
|
export const MetadataWrapper = ({ children }: { children: ReactNode }) => {
|
|
38
|
-
|
|
42
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
43
|
+
return <pre css={metadataWrapperStyles}>{children}</pre>;
|
|
39
44
|
};
|
|
40
45
|
|
|
41
46
|
type FileInputProps = {
|
|
42
|
-
|
|
43
|
-
|
|
47
|
+
type: string;
|
|
48
|
+
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
44
49
|
};
|
|
45
50
|
|
|
46
51
|
export const FileInput = ({ type, onChange }: FileInputProps) => {
|
|
47
|
-
|
|
52
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
53
|
+
return <input css={fileInputStyles} type={type} onChange={onChange} />;
|
|
48
54
|
};
|
|
49
55
|
|
|
50
|
-
export const FileWrapper = ({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}: {
|
|
54
|
-
children: ReactNode;
|
|
55
|
-
status: FileStatus;
|
|
56
|
-
}) => {
|
|
57
|
-
return <div css={fileWrapperStyles(status)}>{children}</div>;
|
|
56
|
+
export const FileWrapper = ({ children, status }: { children: ReactNode; status: FileStatus }) => {
|
|
57
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
58
|
+
return <div css={fileWrapperStyles(status)}>{children}</div>;
|
|
58
59
|
};
|
|
59
60
|
|
|
60
61
|
export const CardsWrapper = ({ children }: { children: ReactNode }) => {
|
|
61
|
-
|
|
62
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
63
|
+
return <div css={cardsWrapperStyles}>{children}</div>;
|
|
62
64
|
};
|
|
63
65
|
|
|
64
66
|
export const Header = ({ children }: { children: ReactNode }) => {
|
|
65
|
-
|
|
67
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
68
|
+
return <div css={headerStyles}>{children}</div>;
|
|
66
69
|
};
|
|
67
70
|
|
|
68
71
|
export const FileStateWrapper = ({ children }: { children: ReactNode }) => {
|
|
69
|
-
|
|
72
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
73
|
+
return <div css={fileStateWrapperStyles}>{children}</div>;
|
|
70
74
|
};
|
|
71
75
|
|
|
72
76
|
export const UploadTouchWrapper = ({ children }: { children: ReactNode }) => {
|
|
73
|
-
|
|
77
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
78
|
+
return <div css={uploadTouchWrapperStyles}>{children}</div>;
|
|
74
79
|
};
|
|
75
80
|
|
|
76
81
|
export const Row = ({ children }: { children: ReactNode }) => {
|
|
77
|
-
|
|
82
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
83
|
+
return <div css={rowStyles}>{children}</div>;
|
|
78
84
|
};
|
|
79
85
|
|
|
80
86
|
export const Response = ({ children }: { children: ReactNode }) => {
|
|
81
|
-
|
|
87
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
88
|
+
return <div css={responseStyles}>{children}</div>;
|
|
82
89
|
};
|