@soul-refiner/design-system 2.2.7 → 2.2.8

package/dist/components/actions/upload/upload.js

@@ -1,5 +1,5 @@
 "use client";
-"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js"),box=require("../../atoms/box/box.js"),button=require("../button/button.js"),upload_audio=require("../../../icons/special/upload_audio.js"),upload_file=require("../../../icons/special/upload_file.js"),upload_image=require("../../../icons/special/upload_image.js"),upload_video=require("../../../icons/special/upload_video.js"),modal=require("../../surfaces/modal/modal.js"),heading=(require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js")),paragraph=require("../../atoms/typography/paragraph.js"),validations=(require("../../atoms/typography/typography.js"),require("./validations.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Upload=({background:e="hue-blue-3",borderColor:t="hue-blue-2",children:a,iconColor:l="primary-blue-2",multiple:i,onDrop:o,size:r="large",subtext:d,text:n,type:u,height:c,validation:s,validationMessage:p})=>{const f=React__default.default.useRef(null),[m,g]=React__default.default.useState(!1);const[_,h]=React__default.default.useState([]);var x={audio:{icon:{"fit-content":28,large:28,small:28},height:{"fit-content":281,large:281,small:75}},file:{icon:{"fit-content":68,large:68,small:57},height:{"fit-content":281,large:281,small:75}},image:{icon:{"fit-content":162,large:162,small:57},height:{"fit-content":281,large:281,small:75}},video:{icon:{"fit-content":140,large:140,small:57},height:{"fit-content":336,large:562,small:75}}},l={color:l,size:x[u].icon[r]},l={audio:React__default.default.createElement(upload_audio.UploadAudio,{...l}),file:React__default.default.createElement(upload_file.UploadFile,{...l}),image:React__default.default.createElement(upload_image.UploadImage,{...l}),video:React__default.default.createElement(upload_video.UploadVideo,{...l})};const $=(e,t)=>{0===e.length&&o?o(t):h(e)},v=()=>{f.current&&(f.current.value="")};return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<_.length},React__default.default.createElement(modal.Modal.Content,{footer:React__default.default.createElement(box.Box,{$display:"flex",$justify:"center",$gap:16,sx:"position: relative; width: 100%;"},React__default.default.createElement(button.Button,{fluid:!0,size:"small",type:"primary",onClick:()=>h([])},"Close")),header:React__default.default.createElement(heading.H,{$bold:!0,$color:"grey-2",$fontSize:20},"Can't read files")},React__default.default.createElement(box.Box,{$align:"flex-start",$display:"flex",$dir:"column",$gap:32,sx:"width: 500px"},React__default.default.createElement(paragraph.P,{$textClampLines:10},p)))),React__default.default.createElement(Wrapper,{$background:e,$borderColor:t,$draggingOver:m,$height:c||x[u].height[r],$size:r,onDragOver:e=>{e.preventDefault(),g(!0)},onDragLeave:e=>{e.preventDefault(),g(!1)},onDrop:e=>{e.preventDefault(),g(!1);e=e.dataTransfer.files;const t=new DataTransfer;Array.from(e).forEach(e=>{t.items.add(e)});e=f.current;null!==e&&(e.files=t.files,o)&&o(e.files)}},React__default.default.createElement(box.Box,{$align:"center",$borderRadius:"medium",$dir:"column",$display:"flex",$gap:16,$justify:"center",sx:"height: 100%; width: 100%; svg { flex-shrink: 0; };"},l[u],"small"!==r&&React__default.default.createElement(box.Box,{$align:"center",$dir:"column",$display:"flex",$gap:8,$justify:"center",sx:"width: 100%;"},React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},n,React__default.default.createElement(button.Button,{onClick:()=>f.current?.click(),size:"small",sx:"display: inline;",type:"text"},"Browse")),React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},d)),React__default.default.createElement(Input,{"data-testid":"dropzone-upload-input",ref:f,type:"file",multiple:i,accept:{video:"video/*",audio:"audio/*",image:"image/*",file:".xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,"}[u],name:"Files",onChange:async()=>{var e=f.current;if(e?.files?.length){for(const r of e.files){var t=[];if(s){var{width:a,height:l,format:i,size:o}=s,i=await validations.validateFormat(r,i),i=(i&&t.push(i),await validations.validateSize(r,o)),o=(i&&t.push(i),await validations.validateDimensions(r,a,l));if(0<o.length&&t.push(...o),0<t.length)return void $(t,e.files)}}$([],e.files)}}}))),React__default.default.Children.map(a,e=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{handleUpload:()=>f.current?.click(),removeFileFromState:v}):e))},Wrapper=styled.styled.div`
+"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js"),box=require("../../atoms/box/box.js"),button=require("../button/button.js"),upload_audio=require("../../../icons/special/upload_audio.js"),upload_file=require("../../../icons/special/upload_file.js"),upload_image=require("../../../icons/special/upload_image.js"),upload_video=require("../../../icons/special/upload_video.js"),modal=require("../../surfaces/modal/modal.js"),heading=(require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js")),paragraph=require("../../atoms/typography/paragraph.js"),validations=(require("../../atoms/typography/typography.js"),require("./validations.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Upload=({background:e="hue-blue-3",borderColor:t="hue-blue-2",children:a,iconColor:l="primary-blue-2",multiple:i,onDrop:o,size:r="large",subtext:d,text:n,type:u,height:c,validation:s,validationMessage:p})=>{const f=React__default.default.useRef(null),[m,g]=React__default.default.useState(!1);const[_,h]=React__default.default.useState([]);var x={audio:{icon:{"fit-content":28,large:28,small:28},height:{"fit-content":281,large:281,small:75}},file:{icon:{"fit-content":68,large:68,small:57},height:{"fit-content":281,large:281,small:75}},image:{icon:{"fit-content":162,large:162,small:57},height:{"fit-content":281,large:281,small:75}},video:{icon:{"fit-content":140,large:140,small:57},height:{"fit-content":336,large:562,small:75}}},l={color:l,size:x[u].icon[r]},l={audio:React__default.default.createElement(upload_audio.UploadAudio,{...l}),file:React__default.default.createElement(upload_file.UploadFile,{...l}),image:React__default.default.createElement(upload_image.UploadImage,{...l}),video:React__default.default.createElement(upload_video.UploadVideo,{...l})};const $=(e,t)=>{0===e.length&&o?o(t):h(e)},v=()=>{f.current&&(f.current.value="")};return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<_.length},React__default.default.createElement(modal.Modal.Content,{footer:React__default.default.createElement(box.Box,{$display:"flex",$justify:"center",$gap:16,sx:"position: relative; width: 100%;"},React__default.default.createElement(button.Button,{fluid:!0,size:"small",type:"primary",onClick:()=>h([])},"Close")),header:React__default.default.createElement(heading.H,{$bold:!0,$color:"grey-2",$fontSize:20},"Can't read files")},React__default.default.createElement(box.Box,{$align:"flex-start",$display:"flex",$dir:"column",$gap:32,sx:"width: 500px"},React__default.default.createElement(paragraph.P,{$textClampLines:10},p)))),React__default.default.createElement(Wrapper,{$background:e,$borderColor:t,$draggingOver:m,$height:c||x[u].height[r],$size:r,onDragOver:e=>{e.preventDefault(),g(!0)},onDragLeave:e=>{e.preventDefault(),g(!1)},onDrop:e=>{e.preventDefault(),g(!1);e=e.dataTransfer.files;const t=new DataTransfer;Array.from(e).forEach(e=>{t.items.add(e)});e=f.current;null!==e&&(e.files=t.files,o)&&o(e.files)}},React__default.default.createElement(box.Box,{$align:"center",$borderRadius:"medium",$dir:"column",$display:"flex",$gap:16,$justify:"center",sx:"height: 100%; width: 100%; svg { flex-shrink: 0; };"},l[u],"small"!==r&&React__default.default.createElement(box.Box,{$align:"center",$dir:"column",$display:"flex",$gap:8,$justify:"center",sx:"width: 100%;"},React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},n,React__default.default.createElement(button.Button,{onClick:()=>f.current?.click(),size:"small",sx:"display: inline;",type:"text"},"Browse")),React__default.default.createElement(paragraph.P,{$textAlign:"center",sx:"width: 100%;"},d)),React__default.default.createElement(Input,{"data-testid":"dropzone-upload-input",ref:f,type:"file",multiple:i,accept:{video:"video/*",audio:"audio/*",image:"image/*",file:".xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,"}[u],name:"Files",onChange:async()=>{var e=f.current;if(e?.files?.length){for(const i of e.files){var t=[];if(s){var{format:a,size:l}=s,l=(a&&(a=await validations.validateFormat(i,a))&&t.push(a),l&&(a=await validations.validateSize(i,l))&&t.push(a),await validations.validateDimensions(i,s));if(0<l.length&&t.push(...l),0<t.length)return void $(t,e.files)}}$([],e.files)}}}))),React__default.default.Children.map(a,e=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{handleUpload:()=>f.current?.click(),removeFileFromState:v}):e))},Wrapper=styled.styled.div`
   box-sizing: border-box;
   width: ${({$size:e})=>"large"===e?"100%":"fit-content"===e?"fit-content":"134px"};
   height: ${({$height:e})=>e}px;

package/dist/components/actions/upload/validations.js

@@ -1 +1 @@
-"use strict";var _function=require("../../../utils/function.js");const validateFormat=async(e,t)=>t&&!t.includes(e.type)?"format":null,validateSize=async(e,t)=>t&&e.size>await _function.toBytes(t)?"size":null,validateDimensions=async(i,a,s)=>new Promise(async e=>{if(a&&s){const t=new Image;t.src=URL.createObjectURL(i),t.onload=()=>{t.width>a||t.height>s?(URL.revokeObjectURL(t.src),e(["width","height"])):(URL.revokeObjectURL(t.src),e([]))}}else e([])});exports.validateDimensions=validateDimensions,exports.validateFormat=validateFormat,exports.validateSize=validateSize;
+"use strict";var _function=require("../../../utils/function.js");const validateFormat=async(i,t)=>t&&!t.includes(i.type)?"format":null,validateSize=async(i,t)=>t&&i.size>_function.toBytes(t)?"size":null,validateDimensions=async(i,a)=>new Promise(t=>{const e=new Image;e.src=URL.createObjectURL(i),e.onload=()=>{var i=[];a.width&&e.width!==a.width&&i.push("width"),a.height&&e.height!==a.height&&i.push("height"),a.maxWidth&&e.width>a.maxWidth&&i.push("maxWidth"),a.minWidth&&e.width<a.minWidth&&i.push("minWidth"),a.maxHeight&&e.height>a.maxHeight&&i.push("maxHeight"),a.minHeight&&e.height<a.minHeight&&i.push("minHeight"),URL.revokeObjectURL(e.src),t(i)},e.onerror=()=>{URL.revokeObjectURL(e.src),t(["error loading image"])}});exports.validateDimensions=validateDimensions,exports.validateFormat=validateFormat,exports.validateSize=validateSize;

package/dist/src/components/actions/upload/upload.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { COLORS } from '../../../common/colors';
+import { DimensionOptions } from './validations';
 type UploadTypes = 'audio' | 'image' | 'file' | 'video';
 export interface UploadProps extends React.PropsWithChildren {
     /**
@@ -16,11 +17,9 @@ export interface UploadProps extends React.PropsWithChildren {
     type: UploadTypes;
     height?: number;
     validation?: {
-        width: number;
-        height: number;
-        format: string[];
-        size: string;
-    };
+        format?: string[];
+        size?: string;
+    } & DimensionOptions;
     validationMessage?: string;
 }
 export declare const Upload: ({ background, borderColor, children, iconColor, multiple, onDrop, size, subtext, text, type, height, validation, validationMessage, }: UploadProps) => React.JSX.Element;

package/dist/src/components/actions/upload/validations.d.ts

@@ -12,11 +12,18 @@ export declare const validateFormat: (file: File, format: string[]) => Promise<"
  * @returns A promise that resolves with 'size' if the file exceeds the specified size; otherwise, resolves with null.
  */
 export declare const validateSize: (file: File, size: string) => Promise<"size" | null>;
+export interface DimensionOptions {
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+}
 /**
- * Asynchronously validates the dimensions of a given image file.
+ * Asynchronously validates the dimensions of a given image file against specified constraints.
  * @param file The image file object to be validated.
- * @param width The maximum allowed width.
- * @param height The maximum allowed height.
- * @returns A promise that resolves with an array containing 'width' and/or 'height' if the dimensions exceed the specified limits; otherwise, resolves with an empty array.
+ * @param options The dimension constraints including minimum and maximum widths and heights.
+ * @returns A promise that resolves with an array of strings identifying which dimension limits were exceeded or not met, if any; otherwise, resolves with an empty array.
  */
-export declare const validateDimensions: (file: File, width: number, height: number) => Promise<string[]>;
+export declare const validateDimensions: (file: File, options: DimensionOptions) => Promise<string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",