@os-design/upload 1.0.202 → 1.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/upload",
-  "version": "1.0.202",
+  "version": "1.0.203",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,11 +37,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.199",
-    "@os-design/icons": "^1.0.47",
-    "@os-design/styles": "^1.0.44",
-    "@os-design/theming": "^1.0.42",
-    "@os-design/utils": "^1.0.61",
+    "@os-design/core": "^1.0.200",
+    "@os-design/icons": "^1.0.48",
+    "@os-design/styles": "^1.0.45",
+    "@os-design/theming": "^1.0.43",
+    "@os-design/utils": "^1.0.62",
     "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
@@ -46,5 +54,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "bbd193f118a3128033d4d99ffcb4e96fe06f0dba"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/ImageUpload/index.tsx

@@ -0,0 +1,305 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Button, Image } from '@os-design/core';
+import { Delete, Picture } from '@os-design/icons';
+import {
+  WithSize,
+  resetFocusStyles,
+  sizeStyles,
+  transitionStyles,
+} from '@os-design/styles';
+import { ThemeOverrider, clr } from '@os-design/theming';
+
+import {
+  isTouchDevice,
+  omitEmotionProps,
+  useForwardedState,
+} from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { Accept, useDropzone } from 'react-dropzone';
+import defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'defaultValue' | 'onChange' | 'ref'
+>;
+export interface ImageUploadProps extends JsxDivProps, WithSize {
+  /**
+   * The url of the image.
+   * @default undefined
+   */
+  url?: string;
+  /**
+   * Allowed image formats.
+   * @default undefined
+   */
+  accept?: Accept;
+  /**
+   * The locale of the component.
+   * @default undefined
+   */
+  locale?: ImageUploadLocale;
+  /**
+   * The selected local file, or null if the image is marked as deleted.
+   * @default undefined
+   */
+  value?: File | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: File | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: File | null) => void;
+}
+
+const overlayHasImageStyles = (p) =>
+  p.hasImage &&
+  css`
+    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});
+    color: hsl(0, 0%, 100%);
+  `;
+
+const overlayHasImageHoverStyles = (p) =>
+  p.hasImage &&
+  !p.isDragActive &&
+  css`
+    @media (hover: hover) {
+      opacity: 0;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  `;
+
+interface OverlayProps {
+  isDragActive: boolean;
+  hasImage: boolean;
+}
+export const Overlay = styled(
+  'div',
+  omitEmotionProps('isDragActive', 'hasImage')
+)<OverlayProps>`
+  ${resetFocusStyles};
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  text-align: center;
+  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;
+
+  ${overlayHasImageStyles};
+  ${overlayHasImageHoverStyles}
+  ${transitionStyles('opacity')};
+`;
+
+const contentIsDragActiveStyles = (p) =>
+  p.isDragActive &&
+  css`
+    transform: scale(0.92);
+  `;
+
+type ContentProps = Pick<OverlayProps, 'isDragActive'>;
+const Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`
+  ${contentIsDragActiveStyles};
+  ${transitionStyles('transform')};
+`;
+
+const PictureIcon = styled(Picture)`
+  opacity: 0.8;
+  font-size: 2.5em;
+`;
+
+const Title = styled.div`
+  opacity: 0.8;
+`;
+
+const DeleteButtonContainer = styled.div`
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+`;
+
+const hoverStyles = (p) => css`
+  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};
+`;
+
+const notHasImageStyles = (p) =>
+  !p.hasImage &&
+  css`
+    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};
+    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};
+
+    @media (hover: hover) {
+      &:hover {
+        ${hoverStyles(p)};
+      }
+    }
+  `;
+
+const focusStyles = (p) => css`
+  &:focus-within {
+    & > div {
+      opacity: 1;
+    }
+    ${hoverStyles(p)};
+  }
+`;
+
+const isDragActiveStyles = (p) =>
+  p.isDragActive &&
+  css`
+    ${hoverStyles(p)};
+  `;
+
+const LocalImage = styled.img`
+  width: 100%;
+  vertical-align: top;
+`;
+
+const RemoteImage = styled(Image)`
+  vertical-align: top;
+`;
+
+interface ContainerProps extends WithSize {
+  isDragActive: boolean;
+  hasImage: boolean;
+}
+
+const Container = styled(
+  'div',
+  omitEmotionProps('isDragActive', 'hasImage', 'size')
+)<ContainerProps>`
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;
+  min-height: ${(p) => p.theme.imageUploadMinHeight}em;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${notHasImageStyles};
+  ${focusStyles};
+  ${isDragActiveStyles};
+  ${sizeStyles};
+  ${transitionStyles('border')};
+`;
+
+/**
+ * The component to upload an image.
+ */
+const ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(
+  (
+    {
+      url,
+      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },
+      locale = defaultLocale,
+      value,
+      defaultValue,
+      onChange,
+      size,
+      ...rest
+    },
+    ref
+  ) => {
+    const touchDevice = useMemo(() => isTouchDevice(), []);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      accept,
+      multiple: false,
+      onDrop: ([file]) => setForwardedValue(file),
+    });
+
+    const source = useMemo(() => {
+      if (forwardedValue === null) return null; // If the user select an image
+      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
+      if (url) return url;
+      return null;
+    }, [forwardedValue, url]);
+
+    const hasImage = useMemo(() => !!source, [source]);
+
+    const renderImage = useCallback(() => {
+      if (!source) return null;
+      if (typeof forwardedValue === 'object' && forwardedValue !== null) {
+        return <LocalImage src={source} />;
+      }
+      return <RemoteImage url={source} />;
+    }, [forwardedValue, source]);
+
+    return (
+      <Container
+        isDragActive={isDragActive}
+        hasImage={hasImage}
+        size={size}
+        onMouseDown={(e) => e.preventDefault()}
+        {...rest}
+        ref={ref}
+      >
+        <input {...getInputProps()} />
+        {renderImage()}
+
+        <Overlay
+          isDragActive={isDragActive}
+          hasImage={hasImage}
+          {
+            ...getRootProps({
+              onKeyDown: (e) => {
+                if (e.key === 'Backspace') setForwardedValue(null);
+              },
+            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any
+          }
+        >
+          <Content isDragActive={isDragActive}>
+            <PictureIcon />
+            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>
+          </Content>
+
+          {hasImage && (
+            <ThemeOverrider
+              overrides={{
+                buttonGhostColorText: [0, 0, 100],
+                buttonGhostColorBgHover: [0, 0, 100, 0.1],
+              }}
+            >
+              <DeleteButtonContainer>
+                <Button
+                  type='ghost'
+                  wide='never'
+                  onClick={(e) => {
+                    setForwardedValue(null);
+                    e.stopPropagation();
+                  }}
+                >
+                  <Delete />
+                </Button>
+              </DeleteButtonContainer>
+            </ThemeOverrider>
+          )}
+        </Overlay>
+      </Container>
+    );
+  }
+);
+
+ImageUpload.displayName = 'ImageUpload';
+
+export default ImageUpload;

package/src/ImageUpload/utils/defaultLocale.ts

@@ -0,0 +1,11 @@
+export interface ImageUploadLocale {
+  touchTitle: string;
+  dropTitle: string;
+}
+
+const defaultLocale: ImageUploadLocale = {
+  touchTitle: 'Click here to choose an image',
+  dropTitle: 'Drop an image here or click to choose it',
+};
+
+export default defaultLocale;

package/src/ImageUploadSkeleton/index.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import { Skeleton, SkeletonProps } from '@os-design/core';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+export type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
+
+const StyledImageUploadSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('size')
+)<WithSize>`
+  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;
+  height: ${(p) => p.theme.imageUploadMinHeight}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides an image upload placeholder while a user waits for
+ * the content to load.
+ */
+const ImageUploadSkeleton = forwardRef<
+  HTMLDivElement,
+  ImageUploadSkeletonProps
+>((props, ref) => (
+  <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />
+));
+
+ImageUploadSkeleton.displayName = 'ImageUploadSkeleton';
+
+export default ImageUploadSkeleton;

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './ImageUpload';
+export { default as ImageUpload } from './ImageUpload';
+export * from './ImageUploadSkeleton';
+export { default as ImageUploadSkeleton } from './ImageUploadSkeleton';