@atlaskit/media-client 17.0.0 → 17.1.2

package/example-helpers/styles.ts

@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+import { FileStatus } from '../src';
+
+export const wrapperStyles = css`
+  display: flex;
+`;
+
+export const imagePreviewStyles = css`
+  width: 300px;
+`;
+
+export const previewWrapperStyles = css`
+  flex: 1;
+`;
+
+export const metadataWrapperStyles = css`
+  width: 400px;
+  overflow: scroll;
+  flex: 1;
+`;
+
+export const fileInputStyles = css`
+  color: transparent;
+`;
+
+export interface FilesWrapperProps {
+  status: FileStatus;
+  key: number;
+}
+
+const statusColorMap: { [key in FileStatus]: string } = {
+  uploading: 'cornflowerblue',
+  processing: 'peachpuff',
+  processed: 'darkseagreen',
+  error: 'indianred',
+  'failed-processing': 'indianred',
+};
+
+export const fileWrapperStyles = (status: FileStatus) => css`
+  padding: 5px;
+  margin: 10px;
+  display: inline-block;
+  width: 315px;
+  background-color: ${statusColorMap[status]};
+`;
+
+export const cardsWrapperStyles = css`
+  width: 900px;
+  padding: 10px;
+  border-right: 1px solid #ccc;
+
+  h1 {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+  }
+
+  > div {
+    width: auto;
+    display: inline-block;
+    margin: 10px;
+  }
+`;
+
+export const headerStyles = css`
+  button {
+    margin: 5px;
+  }
+`;
+
+export const fileStateWrapperStyles = css`
+  border: 1px solid;
+  margin: 10px;
+  padding: 10px;
+  width: 500px;
+`;
+
+export const uploadTouchWrapperStyles = css`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+`;
+
+export const rowStyles = css`
+  flex-direction: row;
+  justify-content: center;
+  > * {
+    margin-right: 10px;
+  }
+`;
+
+export const responseStyles = css`
+  font-family: monospace;
+  white-space: pre;
+`;

package/example-helpers/stylesWrapper.tsx

@@ -0,0 +1,82 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ChangeEvent, ReactNode } from 'react';
+import {
+  cardsWrapperStyles,
+  fileInputStyles,
+  fileStateWrapperStyles,
+  fileWrapperStyles,
+  headerStyles,
+  imagePreviewStyles,
+  metadataWrapperStyles,
+  previewWrapperStyles,
+  responseStyles,
+  rowStyles,
+  uploadTouchWrapperStyles,
+  wrapperStyles,
+} from './styles';
+import { FileStatus } from '../src';
+
+export const Wrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={wrapperStyles}>{children}</div>;
+};
+
+interface ImagePreviewProps {
+  src: string;
+  alt: string;
+}
+
+export const ImagePreview = ({ src, alt }: ImagePreviewProps) => {
+  return <img css={imagePreviewStyles} src={src} alt={alt} />;
+};
+
+export const PreviewWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={previewWrapperStyles}>{children}</div>;
+};
+
+export const MetadataWrapper = ({ children }: { children: ReactNode }) => {
+  return <pre css={metadataWrapperStyles}>{children}</pre>;
+};
+
+type FileInputProps = {
+  type: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const FileInput = ({ type, onChange }: FileInputProps) => {
+  return <input css={fileInputStyles} type={type} onChange={onChange} />;
+};
+
+export const FileWrapper = ({
+  children,
+  status,
+}: {
+  children: ReactNode;
+  status: FileStatus;
+}) => {
+  return <div css={fileWrapperStyles(status)}>{children}</div>;
+};
+
+export const CardsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={cardsWrapperStyles}>{children}</div>;
+};
+
+export const Header = ({ children }: { children: ReactNode }) => {
+  return <div css={headerStyles}>{children}</div>;
+};
+
+export const FileStateWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={fileStateWrapperStyles}>{children}</div>;
+};
+
+export const UploadTouchWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={uploadTouchWrapperStyles}>{children}</div>;
+};
+
+export const Row = ({ children }: { children: ReactNode }) => {
+  return <div css={rowStyles}>{children}</div>;
+};
+
+export const Response = ({ children }: { children: ReactNode }) => {
+  return <div css={responseStyles}>{children}</div>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-client",
-  "version": "17.0.0",
+  "version": "17.1.2",
   "description": "Media API Web Client Library",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "@atlaskit/chunkinator": "^4.0.0",
-    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/chunkinator": "^4.1.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@babel/runtime": "^7.0.0",
     "dataloader": "^2.0.0",
     "deep-equal": "^1.0.1",
@@ -43,25 +43,26 @@
     "xstate": "^4.20.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-core": "^33.0.2",
+    "@emotion/react": "^11.7.1",
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^73.8.0",
+    "@atlaskit/media-card": "^74.1.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/react": "^11.7.1",
     "@types/deep-equal": "^1.0.1",
     "@types/uuid-validate": "^0.0.0",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "resolutions": {
     "lru-fast": "0.2.2"