@weareconceptstudio/form 0.0.3 → 0.0.4

package/dist/styles/variables.js

@@ -0,0 +1,246 @@
+import { createGlobalStyle, css } from 'styled-components';
+const FormVariables = createGlobalStyle `${css `
+	:root {
+		//! Fonts
+		--form_Font: ${(props) => `var(--${props.fontFamily})` || `var(--core_Font)`};
+
+		//! Transition
+		--form_trTime: 0.2s;
+
+		//! Line Height
+		--form_lineHeight: 1.5;
+
+		//! Box Shadow
+		--form_boxShadowColor: ${(props) => props.theme.form.colors.boxShadowColor};
+
+		//! Empty Text Color
+		--form_emptyTextColor: ${(props) => props.theme.form.colors.emptyTextColor};
+
+		//! Message colors
+		--form_errorMessageColor: ${(props) => props.theme.form.colors.errorMessageColor};
+		--form_errorMessageBorderColor: ${(props) => props.theme.form.colors.errorMessageBorderColor};
+		--form_errorMessageBgColor: ${(props) => props.theme.form.colors.errorMessageBgColor};
+		--form_successMessageColor: ${(props) => props.theme.form.colors.successMessageColor};
+		--form_successMessageBorderColor: ${(props) => props.theme.form.colors.successMessageBorderColor};
+		--form_successMessageBgColor: ${(props) => props.theme.form.colors.successMessageBgColor};
+
+		/* //! Label */
+		--form_labelColor: ${(props) => props.theme.form.colors.labelColor};
+		--form_labelHoverColor: ${(props) => props.theme.form.colors.labelHoverColor};
+		--form_labelFocusColor: ${(props) => props.theme.form.colors.labelFocusColor};
+		--form_labelActiveColor: ${(props) => props.theme.form.colors.labelActiveColor};
+		--form_labelErrorColor: ${(props) => props.theme.form.colors.labelErrorColor};
+		--form_labelDisabledColor: ${(props) => props.theme.form.colors.labelDisabledColor};
+
+		/* //! Input */
+		--form_inputColor: ${(props) => props.theme.form.colors.inputColor};
+		--form_inputHoverColor: ${(props) => props.theme.form.colors.inputHoverColor};
+		--form_inputFocusColor: ${(props) => props.theme.form.colors.inputFocusColor};
+		--form_inputActiveColor: ${(props) => props.theme.form.colors.inputActiveColor};
+		--form_inputErrorColor: ${(props) => props.theme.form.colors.inputErrorColor};
+		--form_inputDisabledColor: ${(props) => props.theme.form.colors.inputDisabledColor};
+
+		--form_inputPlaceholderColor: ${(props) => props.theme.form.colors.inputPlaceholderColor};
+		--form_inputPlaceholderHoverColor: ${(props) => props.theme.form.colors.inputPlaceholderHoverColor};
+		--form_inputPlaceholderFocusColor: ${(props) => props.theme.form.colors.inputPlaceholderFocusColor};
+		--form_inputPlaceholderActiveColor: ${(props) => props.theme.form.colors.inputPlaceholderActiveColor};
+		--form_inputPlaceholderErrorColor: ${(props) => props.theme.form.colors.inputPlaceholderErrorColor};
+		--form_inputPlaceholderDisabledColor: ${(props) => props.theme.form.colors.inputPlaceholderDisabledColor};
+
+		--form_inputBorderColor: ${(props) => props.theme.form.colors.inputBorderColor};
+		--form_inputBorderHoverColor: ${(props) => props.theme.form.colors.inputBorderHoverColor};
+		--form_inputBorderFocusColor: ${(props) => props.theme.form.colors.inputBorderFocusColor};
+		--form_inputBorderActiveColor: ${(props) => props.theme.form.colors.inputBorderActiveColor};
+		--form_inputBorderErrorColor: ${(props) => props.theme.form.colors.inputBorderErrorColor};
+		--form_inputBorderDisabledColor: ${(props) => props.theme.form.colors.inputBorderDisabledColor};
+
+		--form_inputBgColor: ${(props) => props.theme.form.colors.inputBgColor};
+		--form_inputHoverBgColor: ${(props) => props.theme.form.colors.inputHoverBgColor};
+		--form_inputFocusBgColor: ${(props) => props.theme.form.colors.inputFocusBgColor};
+		--form_inputActiveBgColor: ${(props) => props.theme.form.colors.inputActiveBgColor};
+		--form_inputErrorBgColor: ${(props) => props.theme.form.colors.inputErrorBgColor};
+		--form_inputDisabledBgColor: ${(props) => props.theme.form.colors.inputDisabledBgColor};
+
+		/* //! Select */
+		--form_selectColor: ${(props) => props.theme.form.colors.selectColor};
+		--form_selectHoverColor: ${(props) => props.theme.form.colors.selectHoverColor};
+		--form_selectFocusColor: ${(props) => props.theme.form.colors.selectFocusColor};
+		--form_selectActiveColor: ${(props) => props.theme.form.colors.selectActiveColor};
+		--form_selectErrorColor: ${(props) => props.theme.form.colors.selectErrorColor};
+		--form_selectDisabledColor: ${(props) => props.theme.form.colors.selectDisabledColor};
+
+		--form_selectPlaceholderColor: ${(props) => props.theme.form.colors.selectPlaceholderColor};
+		--form_selectPlaceholderHoverColor: ${(props) => props.theme.form.colors.selectPlaceholderHoverColor};
+		--form_selectPlaceholderFocusColor: ${(props) => props.theme.form.colors.selectPlaceholderFocusColor};
+		--form_selectPlaceholderActiveColor: ${(props) => props.theme.form.colors.selectPlaceholderActiveColor};
+		--form_selectPlaceholderErrorColor: ${(props) => props.theme.form.colors.selectPlaceholderErrorColor};
+		--form_selectPlaceholderDisabledColor: ${(props) => props.theme.form.colors.selectPlaceholderDisabledColor};
+
+		--form_selectBorderColor: ${(props) => props.theme.form.colors.selectBorderColor};
+		--form_selectBorderHoverColor: ${(props) => props.theme.form.colors.selectBorderHoverColor};
+		--form_selectBorderFocusColor: ${(props) => props.theme.form.colors.selectBorderFocusColor};
+		--form_selectBorderActiveColor: ${(props) => props.theme.form.colors.selectBorderActiveColor};
+		--form_selectBorderErrorColor: ${(props) => props.theme.form.colors.selectBorderErrorColor};
+		--form_selectBorderDisabledColor: ${(props) => props.theme.form.colors.selectBorderDisabledColor};
+
+		--form_selectBgColor: ${(props) => props.theme.form.colors.selectBgColor};
+		--form_selectHoverBgColor: ${(props) => props.theme.form.colors.selectHoverBgColor};
+		--form_selectFocusBgColor: ${(props) => props.theme.form.colors.selectFocusBgColor};
+		--form_selectActiveBgColor: ${(props) => props.theme.form.colors.selectActiveBgColor};
+		--form_selectErrorBgColor: ${(props) => props.theme.form.colors.selectErrorBgColor};
+		--form_selectDisabledBgColor: ${(props) => props.theme.form.colors.selectDisabledBgColor};
+
+		--form_selectOptionColor: ${(props) => props.theme.form.colors.selectOptionColor};
+		--form_selectOptionHoverColor: ${(props) => props.theme.form.colors.selectOptionHoverColor};
+		--form_selectOptionFocusColor: ${(props) => props.theme.form.colors.selectOptionFocusColor};
+		--form_selectOptionActiveColor: ${(props) => props.theme.form.colors.selectOptionActiveColor};
+		--form_selectOptionErrorColor: ${(props) => props.theme.form.colors.selectOptionErrorColor};
+		--form_selectOptionDisabledColor: ${(props) => props.theme.form.colors.selectOptionDisabledColor};
+
+		--form_selectOptionBgColor: ${(props) => props.theme.form.colors.selectOptionBgColor};
+		--form_selectOptionHoverBgColor: ${(props) => props.theme.form.colors.selectOptionHoverBgColor};
+		--form_selectOptionFocusBgColor: ${(props) => props.theme.form.colors.selectOptionFocusBgColor};
+		--form_selectOptionActiveBgColor: ${(props) => props.theme.form.colors.selectOptionActiveBgColor};
+		--form_selectOptionErrorBgColor: ${(props) => props.theme.form.colors.selectOptionErrorBgColor};
+		--form_selectOptionDisabledBgColor: ${(props) => props.theme.form.colors.selectOptionDisabledBgColor};
+
+		/* //! Radio */
+		--form_radioBorderColor: ${(props) => props.theme.form.colors.radioBorderColor};
+		--form_radioBorderActiveColor: ${(props) => props.theme.form.colors.radioBorderActiveColor};
+		--form_radioBgColor: ${(props) => props.theme.form.colors.radioBgColor};
+		--form_radioActiveBgColor: ${(props) => props.theme.form.colors.radioActiveBgColor};
+
+		/* //! Upload */
+		--form_uploadBgColor: ${(props) => props.theme.form.colors.uploadBgColor};
+		--form_uploadBorderColor: ${(props) => props.theme.form.colors.uploadBorderColor};
+	}
+
+	/* //! 2560 */
+	@media only screen and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXL}) {
+		:root {
+			--form_p1: 32px;
+			--form_p2: 24px;
+			--form_p3: 20px;
+			--form_p4: 18px;
+			--form_p5: 12px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp4x);
+			--form_errorItemMTop: var(--sp1-5x);
+			--form_globalErrorWrapMarTB: var(--sp7x);
+		}
+	}
+
+	/* //! 2559 - 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeL}) {
+		:root {
+			--form_p1: 24px;
+			--form_p2: 20px;
+			--form_p3: 16px;
+			--form_p4: 16px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp3x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp5x);
+		}
+	}
+
+	/* //! 1919 - 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeM}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 18px;
+			--form_p3: 16px;
+			--form_p4: 14px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2-5x);
+			--form_errorItemMTop: var(--sp1-5x);
+			--form_globalErrorWrapMarTB: var(--sp4x);
+		}
+	}
+
+	/* //! 1509 - 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeS}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 18px;
+			--form_p3: 16px;
+			--form_p4: 14px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp0-5x);
+			--form_globalErrorWrapMarTB: var(--sp4x);
+		}
+	}
+
+	/* //! 1439 - 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXS}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 1279 - 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSize}) {
+		:root {
+			--form_p1: 18px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 1023 - 768 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeS}) {
+		:root {
+			--form_p1: 18px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 767 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeSMin}) {
+		:root {
+			--form_p1: 16px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+`}`;
+export default FormVariables;

package/dist/translations/en.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    serverError: string;
+    globalError: string;
+    validateMessages: {
+        default: string;
+        required: string;
+        enum: string;
+        whitespace: string;
+        date: {
+            format: string;
+            parse: string;
+            invalid: string;
+        };
+        types: {
+            string: string;
+            method: string;
+            array: string;
+            object: string;
+            number: string;
+            date: string;
+            boolean: string;
+            integer: string;
+            float: string;
+            regexp: string;
+            email: string;
+            url: string;
+            hex: string;
+        };
+        string: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        number: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        array: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        pattern: {
+            mismatch: string;
+        };
+    };
+};
+export default _default;

package/dist/translations/en.js

@@ -0,0 +1,52 @@
+const typeTemplate = '{errorKey} is not a valid {type}';
+export default {
+    serverError: 'Ups! there is something wrong with the website administration.',
+    globalError: 'Please double-check the required fields and confirm again.',
+    validateMessages: {
+        default: 'Validation error on field {errorKey}',
+        required: 'Please enter your {errorKey}',
+        enum: '{errorKey} must be one of [{enum}]',
+        whitespace: '{errorKey} cannot be empty',
+        date: {
+            format: '{errorKey} is invalid for format date',
+            parse: '{errorKey} could not be parsed as date',
+            invalid: '{errorKey} is invalid date',
+        },
+        types: {
+            string: typeTemplate,
+            method: typeTemplate,
+            array: typeTemplate,
+            object: typeTemplate,
+            number: typeTemplate,
+            date: typeTemplate,
+            boolean: typeTemplate,
+            integer: typeTemplate,
+            float: typeTemplate,
+            regexp: typeTemplate,
+            email: typeTemplate,
+            url: typeTemplate,
+            hex: typeTemplate,
+        },
+        string: {
+            len: '{errorKey} must be exactly {len} characters',
+            min: '{errorKey} must be at least {min} characters',
+            max: '{errorKey} cannot be longer than ${max} characters',
+            range: '{errorKey} must be between {min} and {max} characters',
+        },
+        number: {
+            len: '{errorKey} must equal {len}',
+            min: '{errorKey} cannot be less than {min}',
+            max: '{errorKey} cannot be greater than {max}',
+            range: '{errorKey} must be between {min} and {max}',
+        },
+        array: {
+            len: '{errorKey} must be exactly {len} in length',
+            min: '{errorKey} cannot be less than {min} in length',
+            max: '{errorKey} cannot be greater than {max} in length',
+            range: '{errorKey} must be between {min} and {max} in length',
+        },
+        pattern: {
+            mismatch: '{errorKey} does not match pattern {pattern}',
+        },
+    },
+};

package/dist/translations/index.d.ts

@@ -0,0 +1,54 @@
+declare const _default: {
+    en: {
+        serverError: string;
+        globalError: string;
+        validateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/translations/index.js

@@ -0,0 +1,2 @@
+import en from './en';
+export default { en };

package/dist/upload/UploadButton/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadButton;
+declare function UploadButton(props: any): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadButton/index.js

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react';
+import { rawFileToAsset } from '../utils';
+import UploadButtonStyle from './style';
+const UploadButton = (props) => {
+    const { accept, disabled, multiple, setFileList } = props;
+    const inputRef = useRef();
+    const handleFiles = async (files) => {
+        const newFiles = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            const newFile = await rawFileToAsset({ rawFile: file });
+            newFiles.push(newFile);
+        }
+        setFileList(newFiles);
+    };
+    const onChange = () => {
+        handleFiles(inputRef.current.files);
+    };
+    const clickHandler = () => {
+        inputRef.current.click();
+    };
+    const dragOverHandler = (e) => {
+        e.preventDefault();
+    };
+    const onDragEnter = (e) => {
+        e.preventDefault();
+    };
+    const dropHandler = (e) => {
+        e.preventDefault();
+        if (e?.dataTransfer?.files) {
+            handleFiles(e.dataTransfer.files);
+        }
+    };
+    return (React.createElement(UploadButtonStyle, { className: 'upload-wrapper', onDrop: dropHandler, onDragOver: dragOverHandler, onDragEnter: onDragEnter, onClick: clickHandler },
+        React.createElement("span", { className: 'upload' },
+            React.createElement("input", { style: { display: 'none' }, ref: inputRef, type: 'file', accept: accept, disabled: disabled, multiple: multiple, onClick: (e) => e.stopPropagation(), onChange: onChange }),
+            React.createElement("button", { type: 'button' },
+                React.createElement("span", null, "x"),
+                React.createElement("div", null, "Upload")))));
+};
+export default UploadButton;

package/dist/upload/UploadButton/style.d.ts

@@ -0,0 +1,2 @@
+export default UploadButtonStyle;
+declare const UploadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/upload/UploadButton/style.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+const UploadButtonStyle = styled.div `
+	width: 100px;
+	height: 100px;
+	text-align: center;
+	background-color: var(--form_uploadBgColor);
+	border: 1px dashed var(--form_uploadBorderColor);
+	border-radius: 8px;
+	cursor: pointer;
+
+	.upload {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		text-align: center;
+	}
+
+	button {
+		border: 0px;
+		background: none;
+	}
+`;
+export default UploadButtonStyle;

package/dist/upload/UploadList/ListItem/index.d.ts

@@ -0,0 +1,5 @@
+export default ListItem;
+declare function ListItem({ item }: {
+    item: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadList/ListItem/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Image } from '@weareconceptstudio/core';
+const ListItem = ({ item }) => {
+    let element;
+    const isImageFileType = (type) => type.indexOf('image/') === 0;
+    if (isImageFileType(item.mime_type)) {
+        element = React.createElement(Image, { src: item.url });
+    }
+    return React.createElement("span", { className: 'list-item-container' }, element);
+};
+export default ListItem;

package/dist/upload/UploadList/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadList;
+declare function UploadList(props: any): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadList/index.js

@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+import ListItem from './ListItem';
+import UploadListItemStyle from './style';
+const UploadList = (props) => {
+    const { items } = props;
+    const renderItems = useMemo(() => {
+        return items.map((item, index) => (React.createElement(ListItem, { key: index, item: item })));
+    }, [items]);
+    return React.createElement(UploadListItemStyle, null, renderItems);
+};
+export default UploadList;

package/dist/upload/UploadList/style.d.ts

@@ -0,0 +1,2 @@
+export default UploadListItemStyle;
+declare const UploadListItemStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/upload/UploadList/style.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+const UploadListItemStyle = styled.div `
+	.list-item-container {
+		display: inline-block;
+		width: 100px;
+		height: 100px;
+
+		.image-cont {
+			padding-top: 100%;
+		}
+	}
+`;
+export default UploadListItemStyle;

package/dist/upload/index.d.ts

@@ -1,3 +1,6 @@
 export default Upload;
-declare const Upload: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+declare function Upload(props: any): React.JSX.Element;
+declare namespace Upload {
+    let displayName: string;
+}
 import React from 'react';

package/dist/upload/index.js

@@ -1,8 +1,18 @@
-import React, { forwardRef } from 'react';
-const Upload = forwardRef((props, forwardRef) => {
-    return (React.createElement("div", null,
-        React.createElement("input", { type: 'file', ...forwardRef })));
-});
+import React, { useState } from 'react';
+import UploadButton from './UploadButton';
+import UploadList from './UploadList';
+const Upload = (props) => {
+    const { accept, disabled, multiple } = props;
+    const [fileList, setFileList] = useState([]);
+    const uploadProps = {
+        accept,
+        disabled,
+        multiple,
+    };
+    return (React.createElement("span", null,
+        React.createElement(UploadButton, { ...uploadProps, setFileList: setFileList }),
+        React.createElement(UploadList, { items: fileList })));
+};
 if (process.env.NODE_ENV !== 'production') {
     Upload.displayName = 'Upload';
 }

package/dist/upload/utils.d.ts

@@ -0,0 +1,9 @@
+export function typeFromMime(mime: any): "document" | "image" | "video" | "audio" | "pdf";
+export function rawFileToAsset({ rawFile, isReplace }: {
+    rawFile: any;
+    isReplace?: boolean;
+}): Promise<{
+    replace: boolean;
+    upload: boolean;
+    filename: any;
+}>;

package/dist/upload/utils.js

@@ -0,0 +1,64 @@
+export const typeFromMime = (mime) => {
+    if (mime.includes('image')) {
+        return 'image';
+    }
+    if (mime.includes('video')) {
+        return 'video';
+    }
+    if (mime.includes('audio')) {
+        return 'audio';
+    }
+    if (mime.includes('pdf')) {
+        return 'pdf';
+    }
+    return 'document';
+};
+export const rawFileToAsset = async ({ rawFile, isReplace = false }) => {
+    const fileName = rawFile.name.split('.').shift();
+    const aggregate_type = typeFromMime(rawFile.type);
+    let data = {};
+    let dimensions = '';
+    if (aggregate_type == 'image') {
+        dimensions = await imageDimensions(rawFile);
+    }
+    data = {
+        size: rawFile.size,
+        createdAt: new Date().toLocaleDateString('fr'),
+        aggregate_type: aggregate_type,
+        url: URL.createObjectURL(rawFile),
+        extension: rawFile.name.split('.').pop(),
+        mime_type: rawFile.type,
+        dimensions: dimensions,
+        alt: fileName,
+        caption: fileName,
+        rawFile,
+        replace: false,
+        upload: true,
+    };
+    if (isReplace) {
+        data.replace = true;
+        data.upload = false;
+    }
+    else {
+        data.filename = fileName;
+        data.replace = false;
+        data.upload = true;
+    }
+    return data;
+};
+const imageDimensions = (file) => new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+        const { naturalWidth: width, naturalHeight: height } = img;
+        resolve(`${width}x${height}`);
+    };
+    img.onerror = () => {
+        useNotification({
+            type: 'warning',
+            message: 'Error',
+            description: 'There was some problem with the image.',
+        });
+        reject('There was some problem with the image.');
+    };
+    img.src = URL.createObjectURL(file);
+});