@teamturing/react-kit 2.52.1 → 2.53.0

package/dist/core/ActionList/ActionListItem.d.ts

@@ -4,7 +4,7 @@ type Props = {
     variant?: 'neutral' | 'danger';
     leadingVisual?: ElementType | ReactNode;
     trailingVisual?: ElementType | ReactNode;
-    description?: string;
+    description?: ReactNode;
     descriptionLayout?: 'inline' | 'block';
     disabled?: boolean;
     selected?: boolean;

package/dist/core/FileItem/index.d.ts

@@ -0,0 +1,25 @@
+import { HTMLProps } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    file: File | Blob;
+    variant?: 'default' | 'thumbnail';
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean;
+    /**
+     *
+     */
+    validationStatus?: 'error' | undefined;
+    /**
+     * 시각적인 후행 부분에 상호작용할 요소를 정의합니다.
+     */
+    trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
+} & SxProp;
+declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default FileItem;
+export type { Props as FileItemProps };

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { default as Drawer } from './core/Drawer';
 export type { DrawerProps, UnstyledDrawerHeaderProps, UnstyledDrawerBodyProps, UnstyledDrawerFooterProps, DrawerHeaderProps, DrawerHeaderIconButtonProps, DrawerBodyProps, DrawerFooterProps, } from './core/Drawer';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';
+export { default as FileItem } from './core/FileItem';
+export type { FileItemProps } from './core/FileItem';
 export { default as Flash } from './core/Flash';
 export type { FlashProps } from './core/Flash';
 export { default as FormControl } from './core/FormControl';

package/dist/index.js

@@ -4716,6 +4716,219 @@ const BaseEmptyState = styled__default.default.div`
   ${sx}
 `;
 
+const FileItem = ({
+  file,
+  variant = 'default',
+  disabled,
+  loading,
+  validationStatus,
+  trailingAction,
+  ...props
+}) => {
+  const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
+  const fileName = 'name' in file ? file.name : '';
+  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : icons.DocumentIcon;
+  const [objectUrl, setObjectUrl] = React.useState('');
+  React.useEffect(() => {
+    setObjectUrl(URL.createObjectURL(file));
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(BaseFile, {
+    variant: variant,
+    disabled: disabled,
+    loading: disabled,
+    validationStatus: validationStatus,
+    trailingAction: trailingAction,
+    ...props,
+    children: variant === 'default' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(FileIcon, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: fileName
+      }), validationStatus === 'error' ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+        icon: icons.ExclamationPointInCircleIcon,
+        size: 24,
+        color: 'icon/danger'
+      }) : loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {
+        width: 24,
+        height: 24
+      }) : null, trailingAction]
+    }) : variant === 'thumbnail' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx("img", {
+        src: objectUrl
+      }) : fileType === 'video' ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: 'file__thumbnail__video',
+        children: [/*#__PURE__*/jsxRuntime.jsx("video", {
+          src: objectUrl
+        }), /*#__PURE__*/jsxRuntime.jsx(icons.VideoIcon, {})]
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: 'file__thumbnail__whatever',
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.DocumentIcon, {})
+      }), validationStatus === 'error' || loading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: 'file__thumbnail__cover',
+        children: validationStatus === 'error' ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+          icon: icons.ExclamationPointInCircleIcon,
+          size: 24,
+          color: 'icon/danger'
+        }) : loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {
+          width: 24,
+          height: 24
+        }) : null
+      }) : null, trailingAction]
+    }) : null
+  });
+};
+const BaseFile = styled__default.default.div({
+  position: 'relative'
+}, ({
+  theme,
+  disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    default: {
+      'backgroundColor': theme.colors['bg/neutral'],
+      'borderRadius': theme.radii.xs,
+      'width': '100%',
+      'height': utils.forcePixelValue(48),
+      'py': 1,
+      'pr': 2,
+      'pl': 4,
+      'display': 'flex',
+      'columnGap': 2,
+      'alignItems': 'center',
+      '& > svg': {
+        width: 24,
+        height: 24,
+        color: theme.colors['icon/neutral/bold']
+      },
+      '& > span': {
+        flex: 1,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.medium,
+        lineHeight: theme.lineHeights[2],
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors['text/neutral/subtle']
+      },
+      ...(disabled ? {
+        '& > svg': {
+          color: theme.colors['icon/disabled']
+        },
+        '& span': {
+          color: theme.colors['text/disabled']
+        }
+      } : {})
+    },
+    thumbnail: {
+      'display': 'flex',
+      'alignItems': 'center',
+      'justifyContent': 'center',
+      'width': utils.forcePixelValue(160),
+      'maxWidth': utils.forcePixelValue(160),
+      'aspectRatio': '16 / 9',
+      'backgroundColor': theme.colors['bg/neutral'],
+      'overflow': 'hidden',
+      'borderRadius': 'xs',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: utils.forcePixelValue(0),
+        right: utils.forcePixelValue(0),
+        bottom: utils.forcePixelValue(0),
+        left: utils.forcePixelValue(0),
+        borderWidth: 1,
+        borderColor: theme.colors['border/neutral'],
+        borderStyle: 'solid',
+        borderRadius: 'xs',
+        pointerEvents: 'none'
+      },
+      '& > .file__thumbnail__cover': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none',
+        backgroundColor: 'bg/neutral'
+      },
+      '& > img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      },
+      '& > .file__thumbnail__video': {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 24,
+          height: 24,
+          color: 'icon/primary'
+        },
+        video: {
+          width: '100%'
+        }
+      },
+      '& > .file__thumbnail__whatever': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          width: 24,
+          height: 24,
+          color: 'icon/neutral/bold'
+        }
+      },
+      '& > button': {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      },
+      ...(disabled ? {} : {})
+    }
+  }
+}), ({
+  theme,
+  variant: propVariant
+}) => variant({
+  prop: 'validationStatus',
+  variants: {
+    error: {
+      ...(propVariant === 'thumbnail' ? {
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: utils.forcePixelValue(0),
+          right: utils.forcePixelValue(0),
+          bottom: utils.forcePixelValue(0),
+          left: utils.forcePixelValue(0),
+          borderWidth: 2,
+          borderColor: theme.colors['border/danger'],
+          borderStyle: 'solid',
+          borderRadius: 'xs',
+          pointerEvents: 'none'
+        }
+      } : {})
+    }
+  }
+}), sx);
+
 const Flash = ({
   variant = 'neutral',
   icon: Icon = variant === 'danger' ? icons.WarningIcon : variant === 'assist' ? icons.TwinkleIcon : variant === 'accent' ? icons.InfoInCircleIcon : icons.InfoInCircleIcon,
@@ -7986,6 +8199,7 @@ exports.Dialog = index$8;
 exports.Drawer = index$7;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
+exports.FileItem = FileItem;
 exports.Flash = index$6;
 exports.FormControl = index$5;
 exports.GradientText = GradientText;

package/esm/core/FileItem/index.js

@@ -0,0 +1,225 @@
+import { ExclamationPointInCircleIcon, VideoIcon, DocumentIcon, PictureIcon } from '@teamturing/icons';
+import { forcePixelValue } from '@teamturing/utils';
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import Spinner from '../Spinner/index.js';
+import StyledIcon from '../StyledIcon/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const FileItem = ({
+  file,
+  variant = 'default',
+  disabled,
+  loading,
+  validationStatus,
+  trailingAction,
+  ...props
+}) => {
+  const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
+  const fileName = 'name' in file ? file.name : '';
+  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : DocumentIcon;
+  const [objectUrl, setObjectUrl] = useState('');
+  useEffect(() => {
+    setObjectUrl(URL.createObjectURL(file));
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, []);
+  return /*#__PURE__*/jsx(BaseFile, {
+    variant: variant,
+    disabled: disabled,
+    loading: disabled,
+    validationStatus: validationStatus,
+    trailingAction: trailingAction,
+    ...props,
+    children: variant === 'default' ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(FileIcon, {}), /*#__PURE__*/jsx("span", {
+        children: fileName
+      }), validationStatus === 'error' ? /*#__PURE__*/jsx(StyledIcon, {
+        icon: ExclamationPointInCircleIcon,
+        size: 24,
+        color: 'icon/danger'
+      }) : loading ? /*#__PURE__*/jsx(Spinner, {
+        width: 24,
+        height: 24
+      }) : null, trailingAction]
+    }) : variant === 'thumbnail' ? /*#__PURE__*/jsxs(Fragment, {
+      children: [fileType === 'image' ? /*#__PURE__*/jsx("img", {
+        src: objectUrl
+      }) : fileType === 'video' ? /*#__PURE__*/jsxs("div", {
+        className: 'file__thumbnail__video',
+        children: [/*#__PURE__*/jsx("video", {
+          src: objectUrl
+        }), /*#__PURE__*/jsx(VideoIcon, {})]
+      }) : /*#__PURE__*/jsx("div", {
+        className: 'file__thumbnail__whatever',
+        children: /*#__PURE__*/jsx(DocumentIcon, {})
+      }), validationStatus === 'error' || loading ? /*#__PURE__*/jsx("div", {
+        className: 'file__thumbnail__cover',
+        children: validationStatus === 'error' ? /*#__PURE__*/jsx(StyledIcon, {
+          icon: ExclamationPointInCircleIcon,
+          size: 24,
+          color: 'icon/danger'
+        }) : loading ? /*#__PURE__*/jsx(Spinner, {
+          width: 24,
+          height: 24
+        }) : null
+      }) : null, trailingAction]
+    }) : null
+  });
+};
+const BaseFile = styled.div({
+  position: 'relative'
+}, ({
+  theme,
+  disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    default: {
+      'backgroundColor': theme.colors['bg/neutral'],
+      'borderRadius': theme.radii.xs,
+      'width': '100%',
+      'height': forcePixelValue(48),
+      'py': 1,
+      'pr': 2,
+      'pl': 4,
+      'display': 'flex',
+      'columnGap': 2,
+      'alignItems': 'center',
+      '& > svg': {
+        width: 24,
+        height: 24,
+        color: theme.colors['icon/neutral/bold']
+      },
+      '& > span': {
+        flex: 1,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.medium,
+        lineHeight: theme.lineHeights[2],
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors['text/neutral/subtle']
+      },
+      ...(disabled ? {
+        '& > svg': {
+          color: theme.colors['icon/disabled']
+        },
+        '& span': {
+          color: theme.colors['text/disabled']
+        }
+      } : {})
+    },
+    thumbnail: {
+      'display': 'flex',
+      'alignItems': 'center',
+      'justifyContent': 'center',
+      'width': forcePixelValue(160),
+      'maxWidth': forcePixelValue(160),
+      'aspectRatio': '16 / 9',
+      'backgroundColor': theme.colors['bg/neutral'],
+      'overflow': 'hidden',
+      'borderRadius': 'xs',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: forcePixelValue(0),
+        right: forcePixelValue(0),
+        bottom: forcePixelValue(0),
+        left: forcePixelValue(0),
+        borderWidth: 1,
+        borderColor: theme.colors['border/neutral'],
+        borderStyle: 'solid',
+        borderRadius: 'xs',
+        pointerEvents: 'none'
+      },
+      '& > .file__thumbnail__cover': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none',
+        backgroundColor: 'bg/neutral'
+      },
+      '& > img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      },
+      '& > .file__thumbnail__video': {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 24,
+          height: 24,
+          color: 'icon/primary'
+        },
+        video: {
+          width: '100%'
+        }
+      },
+      '& > .file__thumbnail__whatever': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          width: 24,
+          height: 24,
+          color: 'icon/neutral/bold'
+        }
+      },
+      '& > button': {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      },
+      ...(disabled ? {} : {})
+    }
+  }
+}), ({
+  theme,
+  variant: propVariant
+}) => variant({
+  prop: 'validationStatus',
+  variants: {
+    error: {
+      ...(propVariant === 'thumbnail' ? {
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: forcePixelValue(0),
+          right: forcePixelValue(0),
+          bottom: forcePixelValue(0),
+          left: forcePixelValue(0),
+          borderWidth: 2,
+          borderColor: theme.colors['border/danger'],
+          borderStyle: 'solid',
+          borderRadius: 'xs',
+          pointerEvents: 'none'
+        }
+      } : {})
+    }
+  }
+}), sx);
+
+export { FileItem as default };

package/esm/index.js

@@ -16,6 +16,7 @@ export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
 export { default as Drawer } from './core/Drawer/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
+export { default as FileItem } from './core/FileItem/index.js';
 export { default as Flash } from './core/Flash/index.js';
 export { default as FormControl } from './core/FormControl/index.js';
 export { default as GradientText } from './core/GradientText/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.52.1",
+  "version": "2.53.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "bc2a674fefa2e1fe34a21754ed2283a04273f0cc"
+  "gitHead": "abcc2cc8d11799d8c8895282864db9a41b34bb57"
 }