@snack-uikit/attachment 0.0.1-preview-8b6f4393.0

package/dist/helperComponents/Text/index.js

@@ -0,0 +1 @@
+export * from './Text';

package/dist/helperComponents/Text/styles.module.css

@@ -0,0 +1,16 @@
+.wrapper{
+  width:var(--size-attachment-container-square, 80px);
+  height:var(--size-attachment-container-square, 80px);
+}
+.wrapper .main{
+  display:flex;
+}
+.wrapper .hover{
+  display:none;
+}
+.wrapper:hover .hover, .wrapper:focus-visible .hover{
+  display:flex;
+}
+.wrapper:hover .main, .wrapper:focus-visible .main{
+  display:none;
+}

package/dist/helperComponents/TextBlock/TextBlock.d.ts

@@ -0,0 +1,5 @@
+import { AttachmentProps } from '../../types';
+export type TextBlockProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'> & {
+    align?: 'center' | 'left';
+};
+export declare function TextBlock({ title, description, error, className, align }: TextBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/TextBlock/TextBlock.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useAttachmentContext } from '../../contexts';
+import { Text } from '../Text';
+import styles from './styles.module.css';
+export function TextBlock({ title, description, error, className, align = 'left' }) {
+    const { size } = useAttachmentContext();
+    return (_jsxs("div", { className: cn(styles.content, className), "data-size": size, "data-align": align, children: [_jsx(Text, { className: styles.title, text: title }), _jsx(Text, { className: styles.description, text: description }), _jsx(Text, { className: styles.error, text: error })] }));
+}

package/dist/helperComponents/TextBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './TextBlock';

package/dist/helperComponents/TextBlock/index.js

@@ -0,0 +1 @@
+export * from './TextBlock';

package/dist/helperComponents/TextBlock/styles.module.css

@@ -0,0 +1,68 @@
+.content{
+  overflow:hidden;
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:flex-start;
+}
+.content[data-align=left]{
+  text-align:left;
+}
+.content[data-align=center]{
+  max-width:100%;
+  text-align:center;
+}
+.content[data-size=s] .title{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description,
+.content[data-size=s] .error{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .title{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.content[data-size=m] .description,
+.content[data-size=m] .error{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+
+.title,
+.description,
+.error{
+  overflow:hidden;
+  width:100%;
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #33333b);
+}
+
+.description{
+  color:var(--sys-neutral-text-light, #868892);
+}
+
+.error{
+  color:var(--sys-red-text-support, #ab423e);
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Actions';
+export * from './TextBlock';

package/dist/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './Actions';
+export * from './TextBlock';

package/dist/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function getBaseFileName(fileName?: string): string | undefined;
+export declare function getFileExtension(fileName?: string): string | undefined;
+export declare function isFileImage(file: File): RegExpMatchArray | null;

package/dist/helpers.js

@@ -0,0 +1,18 @@
+export function getBaseFileName(fileName) {
+    if (!fileName) {
+        return fileName;
+    }
+    const parts = fileName.split('.');
+    parts.pop();
+    // Для отображения названия файлов без имени (например, .bashrc, .gitignore)
+    if (parts.length === 1 && parts[0] === '')
+        return fileName;
+    return parts.join('.');
+}
+export function getFileExtension(fileName) {
+    var _a;
+    return (_a = fileName === null || fileName === void 0 ? void 0 : fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+}
+export function isFileImage(file) {
+    return file.type.match(/image\/(png|jpg|jpeg|gif|webp|bmp|svg)/i);
+}

package/dist/hooks.d.ts

@@ -0,0 +1,4 @@
+export declare function useImage(file?: File): {
+    imageData: string | undefined;
+    loading: boolean;
+};

package/dist/hooks.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { isFileImage } from './helpers';
+export function useImage(file) {
+    const [imageData, setImageData] = useState(undefined);
+    const [loading, setIsLoading] = useState(false);
+    useEffect(() => {
+        if (file && isFileImage(file)) {
+            const reader = new FileReader();
+            reader.onloadstart = () => {
+                setIsLoading(true);
+            };
+            reader.onloadend = () => {
+                setIsLoading(false);
+                const { result } = reader;
+                if (result) {
+                    setImageData(result.toString());
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+        else {
+            setImageData(undefined);
+        }
+    }, [file]);
+    return { imageData, loading };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { AttachmentSquareProps, AttachmentProps } from './types';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import { CardProps } from '@snack-uikit/card';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type Size = 's' | 'm';
+export type AttachmentCommonProps = WithSupportProps<{
+    /** Файл */
+    file?: File;
+    /** Колбек на клик по кнопке скачивания */
+    onDownload?(file?: File | undefined): void;
+    /** Колбек на клик по кнопке удаления */
+    onDelete?(file?: File | undefined): void;
+    /**
+     * Заголовок
+     * @default file.name
+     */
+    title?: string;
+    /**
+     * Описание
+     * @default file.type
+     */
+    description?: string;
+    /** Сообщение об ошибке */
+    error?: string;
+    /**
+     * Вариант обрезания строки:
+     * <br> - `End` - с конца;
+     * <br> - `Middle` - по середине
+     * */
+    truncateVariant?: TruncateStringProps['variant'];
+    /** Управление состоянием загрузки */
+    loading?: boolean;
+    /**
+     * Объект сопоставления расширения файла и отображаемой иконки
+     * @defaultIcon FileSVG
+     */
+    extension2Icon?: Record<string, IconPredefinedProps['icon']>;
+}> & Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
+export type AttachmentSquareProps = AttachmentCommonProps;
+export type AttachmentProps = AttachmentCommonProps & {
+    /** Размер */
+    size?: Size;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@snack-uikit/attachment",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Attachment",
+  "version": "0.0.1-preview-8b6f4393.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://cloud-ru-tech.github.io/snack-uikit/packages/attachment",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit/tree/master",
+    "directory": "packages/attachment"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.17.1",
+    "@snack-uikit/card": "0.12.13",
+    "@snack-uikit/icon-predefined": "0.5.1",
+    "@snack-uikit/icons": "0.21.0",
+    "@snack-uikit/loaders": "0.5.2",
+    "@snack-uikit/truncate-string": "0.4.14",
+    "@snack-uikit/utils": "3.3.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "22c140322d6f41f78990eaf8ae6a9b38ea039247"
+}

package/src/components/Attachment/Attachment.tsx

@@ -0,0 +1,55 @@
+import { Card } from '@snack-uikit/card';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { AttachmentContext } from '../../contexts';
+import { Actions, TextBlock } from '../../helperComponents';
+import { getBaseFileName, getFileExtension } from '../../helpers';
+import { useImage } from '../../hooks';
+import { AttachmentProps } from '../../types';
+import { Emblem } from './components/Emblem';
+import styles from './styles.module.scss';
+
+export function Attachment({
+  file,
+  loading,
+  extension2Icon,
+  title: titleProp,
+  description: descriptionProp,
+  error,
+  disabled,
+  truncateVariant,
+  checked,
+  multipleSelection,
+  onDownload,
+  onDelete,
+  onClick,
+  size = 's',
+  ...rest
+}: AttachmentProps) {
+  const { loading: loadingImage, imageData } = useImage(file);
+  const isLoading = loading || loadingImage;
+
+  const title = titleProp || getBaseFileName(file?.name);
+  const description = descriptionProp || getFileExtension(file?.name);
+
+  return (
+    <Card
+      {...extractSupportProps(rest)}
+      outline
+      disabled={disabled}
+      checked={checked}
+      multipleSelection={multipleSelection}
+      size={size}
+      onClick={!isLoading && !disabled ? onClick : undefined}
+      header={
+        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size }}>
+          <div className={styles.composition} data-size={size}>
+            <Emblem title={title} loading={isLoading} extension2Icon={extension2Icon} imageData={imageData} />
+            <TextBlock title={title} description={description} error={error} />
+            <Actions hideDownload={isLoading} />
+          </div>
+        </AttachmentContext.Provider>
+      }
+    />
+  );
+}

package/src/components/Attachment/components/Emblem/Emblem.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { FileSVG } from '@snack-uikit/icons';
+import { Spinner } from '@snack-uikit/loaders';
+
+import { useAttachmentContext } from '../../../../contexts';
+import { getFileExtension } from '../../../../helpers';
+import { AttachmentProps } from '../../../../types';
+import styles from './styled.module.scss';
+
+export type EmblemProps = {
+  imageData?: string;
+} & Pick<AttachmentProps, 'extension2Icon' | 'loading' | 'title'>;
+
+export function Emblem({ loading, extension2Icon, imageData, title }: EmblemProps) {
+  const { file, size } = useAttachmentContext();
+
+  const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
+
+  if (loading) {
+    return (
+      <IconPredefined size={size} icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
+    );
+  }
+
+  if (imageData) {
+    return (
+      <IconPredefined
+        size={size}
+        icon={() => <img src={imageData} alt={title} data-size={size || undefined} className={styles.img} />}
+        decor={false}
+        shape='square'
+      />
+    );
+  }
+
+  return (
+    <IconPredefined
+      size={size}
+      icon={extension2Icon?.[extension] ?? FileSVG}
+      decor
+      appearance='neutral'
+      shape='square'
+    />
+  );
+}

package/src/components/Attachment/components/Emblem/index.ts

@@ -0,0 +1 @@
+export * from './Emblem';

package/src/components/Attachment/components/Emblem/styled.module.scss

@@ -0,0 +1,16 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+$sizes: 's', 'm';
+
+.img {
+  overflow: hidden;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  object-fit: cover;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($attachment, 'composition', 'start-item', $size);
+    }
+  }
+}

package/src/components/Attachment/components/index.ts

@@ -0,0 +1 @@
+export * from './Emblem';

package/src/components/Attachment/index.ts

@@ -0,0 +1 @@
+export * from './Attachment';

package/src/components/Attachment/styles.module.scss

@@ -0,0 +1,20 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+$sizes: 's', 'm';
+
+.composition {
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+
+  box-sizing: border-box;
+  width: 100%;
+  margin: calc(0px - $dimension-050m);
+  padding: $dimension-050m;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($attachment, 'composition', $size);
+    }
+  }
+}

package/src/components/AttachmentSquare/AttachmentSquare.tsx

@@ -0,0 +1,56 @@
+import { Card } from '@snack-uikit/card';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { AttachmentContext } from '../../contexts';
+import { getBaseFileName, getFileExtension } from '../../helpers';
+import { useImage } from '../../hooks';
+import { AttachmentSquareProps } from '../../types';
+import { HoverContent, LoadingContent, MainContent } from './components';
+import styles from './styles.module.scss';
+
+export function AttachmentSquare({
+  file,
+  loading,
+  extension2Icon,
+  title: titleProp,
+  description: descriptionProp,
+  error,
+  disabled,
+  truncateVariant,
+  checked,
+  multipleSelection,
+  onDownload,
+  onDelete,
+  onClick,
+  ...rest
+}: AttachmentSquareProps) {
+  const { loading: loadingImage, imageData } = useImage(file);
+  const isLoading = loading || loadingImage;
+
+  const title = titleProp || getBaseFileName(file?.name);
+  const description = descriptionProp || getFileExtension(file?.name);
+
+  return (
+    <Card
+      {...extractSupportProps(rest)}
+      outline
+      disabled={disabled}
+      size='s'
+      className={styles.wrapper}
+      checked={checked}
+      multipleSelection={multipleSelection}
+      onClick={!isLoading && !disabled ? onClick : undefined}
+      header={
+        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size: 's' }}>
+          {!isLoading && !disabled && (
+            <MainContent title={title} extension2Icon={extension2Icon} imageData={imageData} className={styles.main} />
+          )}
+          {!isLoading && (
+            <HoverContent title={title} description={description} error={error} className={styles.hover} />
+          )}
+          {isLoading && <LoadingContent />}
+        </AttachmentContext.Provider>
+      }
+    />
+  );
+}

package/src/components/AttachmentSquare/components/HoverContent/HoverContent.tsx

@@ -0,0 +1,24 @@
+import cn from 'classnames';
+
+import { useAttachmentContext } from '../../../../contexts';
+import { Actions, TextBlock } from '../../../../helperComponents';
+import { AttachmentProps } from '../../../../types';
+import styles from '../styles.module.scss';
+
+type HoverContentProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'>;
+
+export function HoverContent({ title, description, error, className = '' }: HoverContentProps) {
+  const { disabled } = useAttachmentContext();
+
+  return (
+    <div
+      className={cn(styles.composition, {
+        [className]: !disabled,
+      })}
+    >
+      <TextBlock title={title} error={error} description={!error ? description : undefined} align='center' />
+
+      <Actions />
+    </div>
+  );
+}

package/src/components/AttachmentSquare/components/HoverContent/index.ts

@@ -0,0 +1 @@
+export * from './HoverContent';

package/src/components/AttachmentSquare/components/LoadingContent/LoadingContent.tsx

@@ -0,0 +1,14 @@
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { Spinner } from '@snack-uikit/loaders';
+
+import { Actions } from '../../../../helperComponents';
+import styles from '../styles.module.scss';
+
+export function LoadingContent() {
+  return (
+    <div className={styles.composition}>
+      <IconPredefined size='s' icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
+      <Actions hideDownload />
+    </div>
+  );
+}

package/src/components/AttachmentSquare/components/LoadingContent/index.ts

@@ -0,0 +1 @@
+export * from './LoadingContent';

package/src/components/AttachmentSquare/components/MainContent/MainContent.tsx

@@ -0,0 +1,44 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { Card } from '@snack-uikit/card';
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { FileSVG } from '@snack-uikit/icons';
+
+import { useAttachmentContext } from '../../../../contexts';
+import { TextBlock } from '../../../../helperComponents';
+import { getFileExtension } from '../../../../helpers';
+import { AttachmentProps } from '../../../../types';
+import styles from '../styles.module.scss';
+
+type MainContentProps = {
+  imageData?: string;
+} & Pick<AttachmentProps, 'title' | 'extension2Icon' | 'className'>;
+
+export function MainContent({ title, extension2Icon, imageData, className }: MainContentProps) {
+  const { file } = useAttachmentContext();
+
+  const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
+
+  if (imageData) {
+    return (
+      <div className={cn(styles.composition, className)}>
+        <Card.Image src={imageData} alt={file?.name ?? 'file'} mode='background' hideFading />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(styles.composition, className)}>
+      <TextBlock title={title} align='center' />
+
+      <IconPredefined
+        size='s'
+        icon={extension2Icon?.[extension] ?? FileSVG}
+        decor
+        appearance='neutral'
+        shape='square'
+      />
+    </div>
+  );
+}

package/src/components/AttachmentSquare/components/MainContent/index.ts

@@ -0,0 +1 @@
+export * from './MainContent';

package/src/components/AttachmentSquare/components/index.ts

@@ -0,0 +1,3 @@
+export * from './LoadingContent';
+export * from './HoverContent';
+export * from './MainContent';

package/src/components/AttachmentSquare/components/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+.composition {
+  @include composite-var($attachment-composition-s);
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: content-box;
+  width: 100%;
+  margin: calc(0px - $dimension-050m);
+  padding: $dimension-050m;
+
+  text-align: center;
+}

package/src/components/AttachmentSquare/index.ts

@@ -0,0 +1 @@
+export * from './AttachmentSquare';

package/src/components/AttachmentSquare/styles.module.scss

@@ -0,0 +1,25 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
+
+.wrapper {
+  @include composite-var($attachment-container-square);
+
+  .main {
+    display: flex;
+  }
+
+  .hover {
+    display: none;
+  }
+
+  &:hover,
+  &:focus-within,
+  &:focus-visible {
+    .hover {
+      display: flex;
+    }
+
+    .main {
+      display: none;
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AttachmentSquare';
+export * from './Attachment';

package/src/contexts.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+import { AttachmentProps } from './types';
+
+export type AttachmentContextType = Pick<
+  AttachmentProps,
+  'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'disabled'
+>;
+
+export const AttachmentContext = createContext<AttachmentContextType>({});
+
+export function useAttachmentContext() {
+  return useContext(AttachmentContext);
+}