[WIP]: Add FIle Card Demo Page and also make the FileCard component

src/components/demo-components/file-card-demo/CodeJSFileCardBasic.jsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileCardBasic = (props) => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeJSFileCardBasic;
+
+const splittedCodeJS = `<>
+  {value ? (
+    <FileMosaic {...value} onDelete={removeFile} />
+  ) : (
+    <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+  )}
+  <FileMosaic {...sampleFileProps} />
+</>
+
+// file props
+const sampleFileProps = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
+
+export default function App() {
+  const [value, setValue] = React.useState(undefined);
+
+  const updateFiles = (incommingFiles) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <div style={{display:"flex", gap:"10px"}}>
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} info/>
+      ) : (
+        <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+      )}
+      <FileMosaic {...sampleFileProps} info/>
+    </div>
+  );
+};`;
+
+const splittedCodeTS = `<>
+  {value ? (
+    <FileMosaic {...value} onDelete={removeFile} info/>
+  ) : (
+    <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+  )}
+  <FileMosaic {...sampleFileProps} info/>
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps:ExtFile = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
+
+export default function App() {
+  const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <div style={{display:"flex", gap:"10px"}}>
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} info/>
+      ) : (
+        <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+      )}
+      <FileMosaic {...sampleFileProps} info/>
+    </div>
+  );
+};`;

src/components/demo-components/file-card-demo/DemoFileCardBasic.jsx

+import * as React from "react";
+import { FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
+
+const sampleFileProps = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
+const DemoFileCardBasic = (props) => {
+  const [value, setValue] = React.useState(undefined);
+
+  const updateFile = (incommingFiles) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <>
+      {value ? (
+        <FileCard {...value} onDelete={removeFile} info/>
+      ) : (
+        <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+      )}
+      <FileCard {...sampleFileProps} info/>
+    </>
+  );
+};
+export default DemoFileCardBasic;

src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx

 import * as React from "react";
-import { FileInputButton, FileMosaic } from "../../../files-ui";
+import { FileCard, FileInputButton, FileMosaic } from "../../../files-ui";
 import { ExtFile } from "../../../files-ui/core";
 
-interface DemoFileMosaicImagePreviewProps {}
+interface DemoFileMosaicImagePreviewProps {
+  card?: boolean;
+}
 
 const sampleFileProps: ExtFile = {
   id: "fileId",
@@ -24,10 +26,25 @@ const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
   const removeFile = () => {
     setValue(undefined);
   };
+  if (props.card)
+    return (
+      <>
+        {value ? (
+          <FileCard {...value} onDelete={removeFile} info preview />
+        ) : (
+          <FileInputButton
+            value={value ? [value] : []}
+            onChange={updateFile}
+            accept="image/*"
+          />
+        )}
+        <FileCard {...sampleFileProps} info />
+      </>
+    );
   return (
     <>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} info preview/>
+        <FileMosaic {...value} onDelete={removeFile} info preview />
       ) : (
         <FileInputButton
           value={value ? [value] : []}
@@ -35,7 +52,7 @@ const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
           accept="image/*"
         />
       )}
-      <FileMosaic {...sampleFileProps} info/>
+      <FileMosaic {...sampleFileProps} info />
     </>
   );
 };

src/files-ui/components/file-item/components/FileCard/FileCard.tsx → src/files-ui/components/file-card/FileCard.tsx

@@ -2,15 +2,18 @@ import * as React from "react";
 import { FileCardProps, FileCardPropsDefault } from "./FileCardProps";
 import "./FileCard.scss";
 import "./FileCardPaper.scss";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import useFileItemInitializer from "../../hooks/useFileItemInitializer";
-import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
-import { Clear } from "../../../icons";
-import { fileSizeFormater, shrinkWord } from "../../../../core";
-import { mergeProps } from "../../../overridable";
-import { showFileItemComponent } from "../../utils/showFileItemComponent";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import MainLayerBodyNeo from "../FileItemMainLayer/MainLayerBody/MainLayerBodyNeo";
+import FileItemImage from "../file-item/components/FileItemImage/FileItemImage";
+import useFileItemInitializer from "../file-item/hooks/useFileItemInitializer";
+import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
+import { Clear } from "../icons";
+import { fileSizeFormater, shrinkWord } from "../../core";
+import { mergeProps } from "../overridable";
+import { showFileItemComponent } from "../file-item/utils/showFileItemComponent";
+import useFileItemProgress from "../file-item/hooks/useFileItemProgress";
+import MainLayerBodyNeo from "../file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo";
+import useProgress from "../file-mosaic/hooks/useProgress";
+import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
+import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
 
 const setFinalElevation = (elevation: string | number): number => {
   //  let finalElevation: number  = "";
@@ -30,7 +33,7 @@ const setFinalElevation = (elevation: string | number): number => {
 };
 const makeFileCardClassName = (
   elevation: FileCardProps["elevation"],
-  darkMode: boolean,
+  darkMode: boolean | undefined,
   className: string | undefined
 ): string => {
   console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
@@ -51,43 +54,56 @@ const makeFileCardClassName = (
 
 const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
   const {
+    style,
+    className,
+
     file,
     name: propName,
     size: propSize,
     type: propType,
-    onDelete,
-    onSee,
-    onWatch,
-    style,
-    preview,
-    //onlyImage,
-    info,
+
     id,
     valid,
+    errors,
     uploadStatus,
     uploadMessage,
-    hd,
+    progress,
+
+    xhr,
+
     localization,
-    errors,
+    preview,
     imageUrl,
-    elevation,
-    alwaysActive,
-    resultOnTooltip,
+    info,
+    backgroundBlurImage = true,
+    darkMode,
+
+    alwaysActive = true,
+
+    resultOnTooltip = true,
+
     downloadUrl,
-    onDownload,
-    progress,
-    onAbort,
-    xhr,
+
+    onDelete,
     onCancel,
-    showProgress,
-    className,
+    onAbort,
+
+    onDownload,
+    onSee,
+    onWatch,
+
     onDoubleClick,
+    onClick,
     onRightClick,
-    backgroundBlurImage,
-    darkMode,
-  } = mergeProps(props, FileCardPropsDefault);
+
+    elevation=2,
+
+    //} = mergeProps(props, FileCardPropsDefault);
+  } = props;
 
   //ref for anchor element
+  const downloadRef = React.useRef<HTMLAnchorElement>(null);
+
   const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
 
   //className created
@@ -97,12 +113,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     className
   );
 
-  const showFileItem: boolean = showFileItemComponent(
-    file,
-    propName
-    // Boolean(rootClassNameCreated)
-  );
-
   // local properties from file
   const [localName, localType, localSize]: [
     string,
@@ -111,15 +121,16 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
   ] = getLocalFileItemData(file, propName, propType, propSize);
 
   // handle progress
-  const localProgress = useFileItemProgress(progress, showProgress, xhr);
+  const localProgress: number | undefined = useProgress(progress, xhr);
 
   //Initialize File Item
-  const [isImage, isVideo, url, imageSource]: [
+  const [isReady, isImage, isVideo, url, imageSource]: [
+    boolean,
     boolean,
     boolean,
     string,
     string | undefined
-  ] = useFileItemInitializer(
+  ] = useFileMosaicInitializer(
     file,
     propName,
     propType,
@@ -133,7 +144,43 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     ? fileSizeFormater(localSize)
     : "0 KB";
 
+  //alwaysActive
+  const [showInfo, setShowInfo] = React.useState<boolean>(false);
+
+  /********* ALWAYS ACTIVE LOGIC  ***************/
+  //state for actionOnHover
+  const [hovering, setHovering] = React.useState<boolean>(false);
+  const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
+    if (alwaysActive) return;
+    setHovering(true);
+  };
+  const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
+    if (alwaysActive) return;
+    setHovering(false);
+  };
+
+  /***************** HANDLERS **********/
+  //delete file item
+  const handleDelete = (): void => onDelete?.(id);
+
+  //open info layer
+  const handleOpenInfo = (): void => setShowInfo(true);
+
+  //close info layer
+  const handleCloseInfo = (): void => setShowInfo(false);
+
+  const isUploading: boolean = useIsUploading(uploadStatus);
+
+  React.useEffect(() => {
+    //console.log("Change isUploading", isUploading);
+    if (isUploading && showInfo) {
+      handleCloseInfo();
+    }
+    // eslint-disable-next-line
+  }, [isUploading]);
+
   /*************** Click ***************/
+  /*************** CLICK ***************/
   /**
    * TO-DO: Add functionallity on click event
    * @param e event object
@@ -143,44 +190,32 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
   ): void {
     //avoid children to trigger onClick ripple from parent
     e.stopPropagation();
+    onClick?.(e);
   }
+  const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
+    evt: React.MouseEvent
+  ): void => {
+    alert("double click on file");
+    evt.preventDefault();
 
-  /***************** HANDLERS **********/
-  //delete file item
-  const handleDelete = (): void => {
-    onDelete?.(id);
-  };
-  //open info layer
-  /*  const handleOpenInfo = () => {
-    setShowInfo(true);
-  }; */
-  //close info layer
-  /*   const handleCloseInfo = () => {
-    setShowInfo(false);
-  }; */
-  //handle watch video
-  const handleOpenVideo = async () => {
-    if (file) onWatch?.(file);
-  };
-  //open image
-  const handleOpenImage = async () => {
-    if (imageSource) {
-      //  if (hd) {
-      //    const response = await readImagePromise(file);
-      //    onSee?.(response || "");
-      //  } else {
-      onSee?.(imageSource);
-      //}
-    }
+    onDoubleClick?.(evt);
   };
+  function handleRightClick(evt: React.MouseEvent) {
+    // alert("right click!!!!");
+    //get coordinates
+    //zindex
+    //create menu component
+    // evt.preventDefault();
+    onRightClick?.(evt);
+  }
 
-  /********** DOWNLOAD HANDLERS **********/
+  // DOWNLOAD FILE
   /**
    * onDownload, form 1
    * Trigger dowload directly performing a click on anchor element
    */
   const innerDownload = () => {
-    const anchorElement = downloadAnchorRef.current;
+    const anchorElement = downloadRef.current;
     if (anchorElement) {
       anchorElement.click();
     }
@@ -196,42 +231,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
       innerDownload();
     }
   };
-  /**
-   * Perform abort event when xhr is given
-   */
-  const handleAbort = (): void => {
-    //trigger abort event
-    xhr?.abort();
-    // handle externally the abort event
-    onAbort?.(id);
-  };
-  /**
-   * Handle onCancel event
-   */
-  const handleCancel = (): void => {
-    // handle externally the cancel event
-    onCancel?.(id);
-  };
-
-  const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
-    evt: React.MouseEvent
-  ): void => {
-    alert("double click on file");
-    evt.preventDefault();
-
-    onDoubleClick?.(evt);
-  };
-  function handleRightClick(evt: React.MouseEvent) {
-    // alert("right click!!!!");
-    //get coordinates
-    //zindex
-    //create menu component
-    // evt.preventDefault();
-    // onRightClick?.(evt);
-  }
-  //console.log("FileItem onCancel", onCancel);
 
-  if (showFileItem) {
+  if (isReady) {
     return (
       <div
         className={finalClassName}

src/files-ui/components/file-card/FileCardProps.ts

+import { FileMosaicPropsMap } from "../file-mosaic/components/file-mosaic/FileMosaicProps";
+
+
+export interface FileCardPropsMap extends FileMosaicPropsMap {
+    elevation?: false | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
+    | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24";
+}
+
+
+export type FileCardProps = {
+    [F in keyof FileCardPropsMap]: FileCardPropsMap[F]
+}
+
+/**
+ * Base default props
+ */
+export const FileCardPropsDefault: FileCardProps = {
+    onDelete: undefined,
+    file: undefined,
+    color: "#071e25",
+    //  validator: undefined,
+    id: undefined,
+    style: {},
+    preview: false,
+    valid: undefined,
+    info: false,
+    //hd: undefined,
+    localization: "EN-en",
+    //onlyImage: false,
+    imageUrl: undefined,
+    errors: undefined,
+    elevation: 2,
+    alwaysActive: undefined,
+    progress: undefined,
+    resultOnTooltip: true,
+    backgroundBlurImage: true,
+    darkMode: false,
+    //fileName: "bottom"
+}

src/files-ui/components/file-item/components/FileCard/FileCardProps.ts

-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileCardPropsMap extends OverridableComponentProps {
-    /**
-    * The file object obtained from client drop or selection
-    */
-    file?: File;
-    /**
-     * The name of the file
-     */
-    name?: string;
-    /**
-     * The file mime type
-     */
-    type?: string;
-    /**
-     * the size of the file in bytes
-     */
-    size?: number;
-    /**
-     * A function of what to do when close button is pressed or clicked
-     */
-    onDelete?: (fileId: number | string | undefined) => void;
-    /**
-     * A function that return a file object when "see" button is pressed or clicked
-     */
-    onSee?: (imageUrl: string) => void;
-    /**
-     * A function that return a file object when "play" button is presssed or clicked
-     */
-    onWatch?: (videoUrl: File) => void;
-    /**
-     * Whether to see as grid or inline (horizontal list)
-     */
-    errors?: string[];
-    /**
-     * individual validator for each file
-     */
-    //validator?: FileItemValidator;
-    /**
-     * identifier for the file
-     */
-    id?: string | number;
-    /**
-     * if true, and if the file is an image,
-     * makes visible the "view" button that will get the image url
-     * Also, it will be visible only when file is valid
-     */
-    preview?: boolean;
-    /**
-    * whether to show a valid or rejected message ("ok", "rejected")
-    * by def. valid is false (if not present, it's false too)
-    * This value wil affect preview behaviour,
-    * If not valid, the preview will not be shown, nor the view button
-    */
-    valid?: boolean | null;
-    /**
-    * This feature is hidden, it is not present on the documentation
-    * because it's experimental. If you found this prop, you can test it 
-    * and comment us if any issue is found. Thanks in advance.
-    * 
-    * Make file name, info layer, size and "valid message"
-    * not visible
-    */
-    //onlyImage?: boolean;
-    /** 
-     * whether to show the info layer or not
-     * also whether to make visible the info button or not ,
-     * Only works when given a image file
-     */
-    info?: boolean;
-    /**
-     * A string representation or web url of the image
-     * that will be set to the "src" prop of an <img/> tag
-     * <img src={`${url}`} />
-     */
-    imageUrl?: string;
-
-
-    elevation: false | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
-    | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24";
-
-    /**
-         * The message from server
-         */
-    uploadMessage?: string;
-    /**
-     * where to place the file name
-     * [in construction]
-     */
-    //fileName?: "bottom" | "inside";
-    /**
-     * The current upload status of the file
-     */
-    uploadStatus?: UPLOADSTATUS;
-    /**
-     * If present, preview on full screen will
-     * be presented in the real image resolution
-     */
-    hd?: boolean | undefined;
-    /**
-     * language to be used
-     * for now
-     * only English and Spanish is supported
-     */
-    localization?: Localization;
-    /**
-    * Flag that determines whether actions are visible always, or only on hover event
-    */
-    alwaysActive?: boolean;
-    /**
-     * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
-     */
-    resultOnTooltip?: boolean;
-    /**
-     * Url to perform a GET request in order to download the file.
-     * This  action is triggered when download button is clicked or pressed.
-     * In case onDownload prop is given
-     */
-    downloadUrl?: string;
-    /**
-     * Event that is triggered when download button is clicked or pressed
-     */
-    onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
-    /**
-     * the current percentage upload progress
-     *
-     */
-    progress?: number;
-    /**
-     * Whether to show progress or not.
-     * @default true if xhr is initialized
-     * @default false if xhr is not given
-     */
-    showProgress?: boolean;
-    /**
-     * abort event
-     */
-    onAbort?: Function;
-    /**
-     * cancel when preparing event
-     */
-    onCancel?: Function;
-    /**
-     * A reference to the XHR object that allows the upload and abort event.
-     *  and progress
-     */
-    xhr?: XMLHttpRequest;
-    /**
-     * Event that is triggered when user duble clicks the component
-     */
-    onDoubleClick?: (evt: React.MouseEvent) => void;
-    /**
-     * Event that is triggered when user duble clicks the component
-     */
-    onRightClick?: (evt: React.MouseEvent) => void;
-    /**
-     * Flag that indicates whether to show a background blur image or not
-     */
-    backgroundBlurImage?: boolean;
-    /**
-    * Flag that indicates whether to activates dark mode for component or not
-    */
-    darkMode: boolean;
-}
-
-
-export type FileCardProps = {
-    [F in keyof FileCardPropsMap]: FileCardPropsMap[F]
-}
-
-/**
- * Base default props
- */
-export const FileCardPropsDefault: FileCardProps = {
-    onDelete: undefined,
-    file: undefined,
-    color: "#071e25",
-    //  validator: undefined,
-    id: undefined,
-    style: {},
-    preview: false,
-    valid: undefined,
-    info: false,
-    hd: undefined,
-    localization: "EN-en",
-    //onlyImage: false,
-    imageUrl: undefined,
-    errors: undefined,
-    elevation: 2,
-    alwaysActive: undefined,
-    progress: undefined,
-    resultOnTooltip: true,
-    backgroundBlurImage: true,
-    darkMode: false,
-    //fileName: "bottom"
-}

src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx

@@ -60,7 +60,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
     onRightClick,
   } = props;
 
-  console.log("FileMosaic progress " + id, progress);
+ // console.log("FileMosaic progress " + id, progress);
   //ref for anchor download element
   const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -87,7 +87,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
   ); */
   const localProgress: number | undefined = useProgress(progress, xhr);
 
-  console.log("FileMosaic progress localProgress " + localProgress);
+  //console.log("FileMosaic progress localProgress " + localProgress);
 
   //Initialize File Item
   const [isReady, isImage, isVideo, url, imageSource]: [

src/files-ui/index.ts

@@ -7,6 +7,9 @@ export * from "./components/avatar/Avatar";
 export { FileItem } from "./components";
 export * from "./components";
 
+export { default as FileCard } from "./components/file-card/FileCard";
+export * from "./components/file-card/FileCard";
+
 export { default as FileMosaic } from "./components/file-mosaic/components/file-mosaic/FileMosaic";
 export * from "./components/file-mosaic/components/file-mosaic/FileMosaic";
 
@@ -21,6 +24,6 @@ export * from "./components/previews/VideoPreview/VideoPreview";
 
 export { useFakeProgress } from "./hooks";
 
-export {createListOfMultiTypeFile} from "./core";
+export { createListOfMultiTypeFile } from "./core";
 
 export type { ExtFile, ExtFileInstance, ExtFileListMap, ExtFileManager, UPLOADSTATUS, Localization } from "./core";
\ No newline at end of file

src/pages/FileCardMock.tsx

 import * as React from "react";
-import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
+import FileCard from "../files-ui/components/file-card/FileCard";
 import { ExtFile } from "../files-ui/core";
 const baseFiles: ExtFile[] = [
   {
@@ -37,7 +37,7 @@ const FileCardMock = ({ darkMode = false, elevation = 2 }) => {
           onSee={handleSee}
           info
           alwaysActive
-          hd
+          //hd
           elevation={2}
           darkMode={darkMode}
           onCancel={()=>{}}

src/pages/demo/FileCardDemoPage.jsx

@@ -12,7 +12,12 @@ import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
 import MainTitle from "../../components/main-title/MainTitle";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
-
+import DemoFileCardBasic from "../../components/demo-components/file-card-demo/DemoFileCardBasic";
+import CodeJSFileCardBasic from "../../components/demo-components/file-card-demo/CodeJSFileCardBasic";
+import { AlertTitle } from "@mui/material";
+import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
+import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
+import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
 
 const FileCardDemoPage = (props) => {
   return (
@@ -20,9 +25,9 @@ const FileCardDemoPage = (props) => {
       <MainContentContainer>
         <MainTitle>FileCard</MainTitle>
         <MainParagraph>
-          File mosaics are compact elements that represent a file in the UI.
-          They can be used for just showing general info of the file, or either
-          allow the user to interact with them.
+          File cards, as well as file mosaics, are compact elements that
+          represent a file in the UI. They can be used for just showing general
+          info of the file, or either allow the user to interact with them.
         </MainParagraph>
         <DescParagraph>
           This widget allow users to see information of Files and / or trigger
@@ -34,10 +39,10 @@ const FileCardDemoPage = (props) => {
           {"<InputButton/>"} components, so some of the behavior demonstrated
           here is not shown in context.{" "}
         </Alert>
-        <section id="basic-filemosaic">
-          <SubTitle content="Basic FileMosaic" />
+        <section id="basic-filecard">
+          <SubTitle content="Basic FileCard" />
           <DescParagraph>
-            The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
+            The <CodeHighlight>FileCard</CodeHighlight> supports displaying
             information from <TypeHighlight>File</TypeHighlight> object or
             individual props.
           </DescParagraph>
@@ -52,27 +57,64 @@ const FileCardDemoPage = (props) => {
             }}
           >
             <Stack spacing={2} direction="row" alignItems={"center"}>
-              <BasicFileMosaicDemo />
+              <DemoFileCardBasic />
             </Stack>
           </Paper>
-          <p></p>
-          {/* <BasicDropzoneCodeJS /> */}
+          <CodeJSFileCardBasic />
+          <Alert severity="info">
+            <AlertTitle> FileInputButton </AlertTitle>
+            For completeness, some of these examples include{" "}
+            <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
+            component for allowing the user to select files. For further
+            information of this component check out the{" "}
+            <a href="/components/fileinputbutton">FileInputButton</a> page.
+          </Alert>
+          <br />
+          <Alert severity="info">
+            <AlertTitle> ExtFile </AlertTitle>
+            {/*  This is an info alert — <strong>check it out!</strong>
+             */}
+            <strong>ExtFile type </strong>
+            is explicity used in the
+            <strong> Typescript</strong> example and is implicity used in the{" "}
+            <strong>Javascript</strong> example for handling the metadata that
+            makes possible the information exchange between components. For
+            further information about this data type check out the{" "}
+            <a href="/types#ext-file">ExtFile-API. </a>
+          </Alert>
         </section>
         <section id="image-preview">
           <SubTitle content="Image preview" />
           <DescParagraph>
             By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
-            <TypeHighlight>true</TypeHighlight> the component will show a image
-            preview using the <CodeHighlight>imageUrl</CodeHighlight>
-            prop or by reading the <TypeHighlight>File</TypeHighlight> object if
-            given (file prop).
+            <TypeHighlight>true</TypeHighlight> the component will show an image
+            preview instead of a file icon.
+            <br />
+            To acomplish this task this component will take the{" "}
+            <CodeHighlight>imageUrl</CodeHighlight>
+            prop or will read the <TypeHighlight>File</TypeHighlight> object if
+            given and if it is an image.
+            <br />
+            Finally, the <TypeHighlight>info</TypeHighlight> prop is used to
+            show the complete information of the file.
           </DescParagraph>
 
-          <Paper variant="outlined" style={{ padding: "25px" }}>
-            {/* <BasicDemoDropzone /> */}
-          </Paper>
-          <p></p>
-          {/* <BasicDropzoneCodeJS /> */}
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicImagePreview card />
+          </DemoContainerFileMosaic>
+
+          <CodeJSFileMosaicImagePreview card/>
+          <Alert severity="info">
+            As you can notice, when
+            <CodeHighlight>{`imageUrl`}</CodeHighlight> prop is present, the{" "}
+            <CodeHighlight>{`preview`}</CodeHighlight> prop is not needed since
+            it has more priority.
+            <br />
+            On the other side, for displaying an image preview as a result of
+            reading an image File it is necesary to set the{" "}
+            <CodeHighlight>{`preview`}</CodeHighlight> prop, otherwise a default
+            image preview will be shown in order to save memory.
+          </Alert>
         </section>
         <section id="validation">
           <SubTitle content="Validation" />
@@ -101,7 +143,7 @@ const rightMenuItems = [
   {
     id: 0,
     label: "Basic file mosaic",
-    referTo: "/components/file-mosaic#basic-filemosaic",
+    referTo: "/components/file-mosaic#basic-filecard",
   },
   {
     id: 1,