[WIP]: Add FileCard component and FileCard demo page. Missing to add upload...

[WIP]: Add FileCard component and FileCard demo page. Missing to add upload layer in component. Also missing to decide to delete rightlayer and set abosulte positions for delete button and others. Missing to refactopr some grids flexbox for displaying filecard properly since they are horizontal higher.

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

@@ -4,9 +4,10 @@ import {
   useFakeProgress,
   ExtFile,
   UPLOADSTATUS,
+  FileCard,
 } from "../../../files-ui";
 
-const DemoFileMosaicUploadStatus = () => {
+const DemoFileMosaicUploadStatus = (props:{card?:boolean}) => {
   const progress = useFakeProgress();
 
   const [status1, setStatus1] = React.useState<UPLOADSTATUS>("uploading");
@@ -35,6 +36,32 @@ const DemoFileMosaicUploadStatus = () => {
   const handleAbort = (id: string | number | undefined) => {
     console.log("Upload aborted in file: " + id);
   };
+  if(props.card)
+  return (
+<>
+      <FlexRowContainer card>
+        <FileCard {...preparingFile} />
+        <FileCard {...preparingFile} onCancel={handleCancel} />
+      </FlexRowContainer>
+
+      <FlexRowContainer card>
+        <FileCard {...uploadingFile} />
+        <FileCard {...uploadingFile} progress={progress} />
+        <FileCard {...uploadingFile} onAbort={handleAbort} />
+        <FileCard
+          {...uploadingFile}
+          onAbort={handleAbort}
+          progress={progress}
+        />
+      </FlexRowContainer>
+
+      <FlexRowContainer card>
+        <FileCard {...uploadResultFiles[0]} uploadStatus={status1} />
+        <FileCard {...uploadResultFiles[1]} uploadStatus={status2} />
+        <FileCard {...uploadResultFiles[2]} uploadStatus={status3} />
+      </FlexRowContainer>
+    </>
+  )
   return (
     <>
       <FlexRowContainer>
@@ -63,7 +90,7 @@ const DemoFileMosaicUploadStatus = () => {
 };
 export default DemoFileMosaicUploadStatus;
 
-const FlexRowContainer = (props: { children: React.ReactNode }) => {
+const FlexRowContainer = (props: { children: React.ReactNode, card?:boolean }) => {
   return (
     <div
       style={{
@@ -71,6 +98,7 @@ const FlexRowContainer = (props: { children: React.ReactNode }) => {
         flexWrap: "wrap",
         justifyContent: "space-evenly",
         width: "100%",
+        flexDirection:props.card?"column":"row"
       }}
     >
       {props.children}

src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx

 import * as React from "react";
-import { FileMosaic } from "../../../files-ui";
+import { FileCard, FileMosaic } from "../../../files-ui";
 
 const sampleFilesProps = [
   {
@@ -14,7 +14,7 @@ const sampleFilesProps = [
     type: "image/png",
     name: "valid file created from props.png",
     valid: false,
-    errors: ["File is too big", "File type is not allowed"]
+    errors: ["File is too big", "File type is not allowed"],
   },
   {
     id: "fileId-3",
@@ -25,7 +25,16 @@ const sampleFilesProps = [
   },
 ];
 
-const DemoFileMosaicValidation = () => {
+const DemoFileMosaicValidation = ({ card }) => {
+  if (card)
+    return (
+      <>
+        {sampleFilesProps.map((extFile) => (
+          <FileCard key={extFile.id} {...extFile} info />
+        ))}
+      </>
+    );
+
   return (
     <>
       {sampleFilesProps.map((extFile) => (

src/files-ui/components/file-card/FileCard.scss

@@ -12,7 +12,7 @@
   position: relative;
   font-size: 15px;
   font-weight: 400;
-  width: 380px;
+  width: 350px;
   .files-ui-file-card-main-layer-container {
     width: 380px;
     box-sizing: border-box;
@@ -120,16 +120,11 @@
       justify-content: space-between;
       flex-direction: column;
       padding: 3px;
-      width: 60px;
+      width: 36px;
       //background-color: aquamarine;
       height: 100%;
     }
     .file-card-upload-layer {
-      position: absolute;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
       display: flex;
       box-sizing: border-box;
       //background-color: rgba(0, 0, 0, 0.5);
@@ -153,5 +148,64 @@
       align-items: center;
       justify-content: flex-end;
     }
+    .file-card-info-layer-container {
+      display: flex;
+      box-sizing: border-box;
+      //background-color: rgba(0, 0, 0, 0.5);
+      background: linear-gradient(
+        to right,
+
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.75),
+        rgba(0, 0, 0, 0.9),
+        rgba(0, 0, 0, 0.9),
+        rgba(0, 0, 0, 0.9),
+        rgba(0, 0, 0, 0.9),
+        rgba(0, 0, 0, 0.9),
+        rgba(0, 0, 0, 0.9)
+      );
+      color: rgba(255, 255, 255, 0.8);
+      font-weight: 500;
+      font-size: 1em;
+      overflow: hidden;
+      align-items: center;
+      justify-content: flex-end;
+      .file-card-file-info {
+        width: 250px;
+        height: 100px;
+        text-align: left;
+        scrollbar-width: thin;
+        overflow: auto;
+        scrollbar-color: #646c7fa9 transparent;
+
+        &::-webkit-scrollbar {
+          width: 9px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #646c7fa9;
+          border-radius: 20px;
+          border: transparent;
+        }
+        .files-ui-file-card-info-layer-header {
+          display: flex;
+          width: 100%;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-end;
+        }
+        .heading {
+          font-weight: 600;
+          padding: 0 5px;
+        }
+        .label {
+          padding: 0 5px;
+          font-weight: 399;
+        }
+      }
+    }
   }
 }

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

 import * as React from "react";
-import { FileCardProps, FileCardPropsDefault } from "./FileCardProps";
+import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
-import "./FileCardPaper.scss";
-import FileItemImage from "../file-item/components/FileItemImage/FileItemImage";
-import useFileItemInitializer from "../file-item/hooks/useFileItemInitializer";
+import "./components/FileCardPaper.scss";
 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";
 import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer";
 import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
 import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer";
-import FileCardRightLayer from "./FileCardRightLayer";
+import FileCardRightLayer from "./components/FileCardRightLayer";
+import FileCardInfoLayer from "./components/FileCardInfoLayer";
 
 const setFinalElevation = (elevation: string | number): number => {
   //  let finalElevation: number  = "";
@@ -319,6 +313,16 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
               isActive={alwaysActive || hovering}
             />
           </Layer>
+          <Layer className="file-card-info-layer-container" visible={showInfo}>
+            <FileCardInfoLayer
+              onCloseInfo={handleCloseInfo}
+              valid={valid}
+              localization={localization}
+              localName={localName}
+              sizeFormatted={sizeFormatted}
+              localType={localType}
+            />
+          </Layer>
           <Layer className="file-card-upload-layer" visible={isUploading}>
             Upload Layer
           </Layer>

src/files-ui/components/file-card/components/FileCardInfoLayer.tsx

+import * as React from "react";
+import { FileMosaicInfoLayerProps } from "../../file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps";
+import FileMosaicStatus from "../../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
+import { Cancel } from "../../icons";
+type FileCardInfoLayerProps = FileMosaicInfoLayerProps;
+const FileCardInfoLayer: React.FC<FileCardInfoLayerProps> = (
+  props: FileCardInfoLayerProps
+) => {
+  const {
+    valid,
+    localization,
+    onCloseInfo,
+    uploadStatus,
+    localName,
+    sizeFormatted,
+    localType,
+  } = props;
+  return (
+    <div className="file-card-file-info">
+      <div className="files-ui-file-card-info-layer-header">
+        <Cancel
+          style={{ margin: 0, right: 0, top: 0 }}
+          color="rgba(255,255,255,0.8)"
+          onClick={onCloseInfo}
+          colorFill="black"
+        />
+        <FileMosaicStatus
+          valid={valid}
+          uploadStatus={uploadStatus}
+          localization={localization}
+        />
+      </div>
+      <div className="heading">Name:</div>
+      <div className="label">{localName}</div>
+      <div className="heading">Size:</div>
+      <div className="label">{sizeFormatted}</div>
+      <div className="heading">Type:</div>
+      <div className="label">{localType}</div>
+    </div>
+  );
+};
+export default FileCardInfoLayer;

src/files-ui/components/file-card/FileCardRightLayer.tsx → src/files-ui/components/file-card/components/FileCardRightLayer.tsx

 import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../core";
+import { Localization, UPLOADSTATUS } from "../../../core";
 import {
   Clear,
   DownloadFile,
   InfoDisney,
   PlayIcon,
   Visibility,
-} from "../icons";
+} from "../../icons";
 import "./FileMosaicRightLayer.scss";
 declare type FileCardRightLayerProps = {
   darkMode?: boolean;

src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts

 import { Localization, UPLOADSTATUS } from "../../../../core";
 
-export interface FileMosaicInfoLayerProps{
+export type FileMosaicInfoLayerProps = {
     valid: boolean | null | undefined;
     uploadStatus?: UPLOADSTATUS;
     localization?: Localization;

src/pages/demo/FileCardDemoPage.jsx

@@ -7,7 +7,6 @@ import Stack from "@mui/material/Stack";
 import Alert from "@mui/material/Alert";
 import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
-import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/DemoFileMosaicBasic";
 import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
 import MainTitle from "../../components/main-title/MainTitle";
@@ -21,6 +20,10 @@ import DemoContainerFileMosaic from "../../components/demo-components/filemosaic
 import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
 import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
 import AnchorToTab from "../../components/util-components/AnchorToTab";
+import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
+import CodeJSFileMosaicValidation from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation";
+import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
+import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
 
 const FileCardDemoPage = (props) => {
   return (
@@ -28,42 +31,42 @@ const FileCardDemoPage = (props) => {
       <MainContentContainer>
         <MainTitle>FileCard</MainTitle>
         <MainParagraph>
-          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.
+          File cards are compact elements that represent a file in the UI. They
+          can be used for just showing general info of the file, or either to
+          allow the user to interact with them.
         </MainParagraph>
         <DescParagraph>
-          This widget allow users to see information of Files and / or trigger
-          actions.
+          This widget allow users to see information of{" "}
+          <TypeHighlight> Files</TypeHighlight> and / or trigger actions.
         </DescParagraph>
         <Alert severity="info">
           While included here as a standalone component, the most common use
-          will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "}
-          {"<InputButton/>"} components, so some of the behavior demonstrated
-          here is not shown in context.{" "}
+          will be to display the result of the "onChange" event of{" "}
+          <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
+          <CodeHighlight>{"<InputButton/>"}</CodeHighlight> components, so some
+          of the behavior demonstrated here is not totally shown in context.{" "}
         </Alert>
         <section id="basic-filecard">
           <SubTitle content="Basic FileCard" />
           <DescParagraph>
-            The <CodeHighlight>FileCard</CodeHighlight> supports displaying
-            information from <TypeHighlight>File</TypeHighlight> object or
-            individual props.
+            The <CodeHighlight>FileCard</CodeHighlight> component supports
+            displaying information from a{" "}
+            <TypeHighlight>
+              <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
+                File
+              </AnchorToTab>
+            </TypeHighlight>{" "}
+            object or from given props.
+            <br />
+            Also, the <TypeHighlight>onDelete</TypeHighlight> prop is used to
+            remove the file selection.
           </DescParagraph>
 
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Stack spacing={2} direction="row" alignItems={"center"}>
+          <DemoContainerFileMosaic>
             <DemoFileCardBasic />
-            </Stack>
-          </Paper>
+          </DemoContainerFileMosaic>
           <CodeJSFileCardBasic />
+
           <Alert severity="info">
             <AlertTitle> FileInputButton </AlertTitle>
             For completeness, some of these examples include{" "}
@@ -120,12 +123,107 @@ const FileCardDemoPage = (props) => {
           </Alert>
         </section>
         {/** VALIDATION UPLOAD AND MORE */}
+
+        <section id="validation">
+          <SubTitle content="Validation" />
+          <DescParagraph>
+            The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
+            <TypeHighlight>true</TypeHighlight>,{" "}
+            <TypeHighlight>false</TypeHighlight> or{" "}
+            <TypeHighlight>undefined</TypeHighlight>.
+          </DescParagraph>
+
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicValidation card />
+          </DemoContainerFileMosaic>
+
+          <CodeJSFileMosaicValidation />
+          <Alert severity="info">
+            Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
+            <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set
+            this prop when validating the input from a given criteria. You can
+            see the behaviour mentioned in the following demos:
+            <ul>
+              <li>
+                <AnchorToTab href="/components/dropzone#validation">
+                  Dropzone validation
+                </AnchorToTab>
+              </li>
+              <li>
+                <AnchorToTab href="/components/fileinputbutton#validation">
+                  FileInputButton validation
+                </AnchorToTab>
+              </li>
+            </ul>
+          </Alert>
+        </section>
+
+        <section id="uploading">
+          <SubTitle content="Uploading status" />
+          <DescParagraph>
+            The <CodeHighlight>uploadStatus</CodeHighlight> prop can be set to{" "}
+            <TypeHighlight>"preparing"</TypeHighlight>,{" "}
+            <TypeHighlight>"uploading"</TypeHighlight>,{" "}
+            <TypeHighlight>"aborted"</TypeHighlight>,{" "}
+            <TypeHighlight>"error"</TypeHighlight> or{" "}
+            <TypeHighlight>"success"</TypeHighlight>. Also the{" "}
+            <CodeHighlight>uploadMessage</CodeHighlight> prop is used for
+            displaying the error or success message. Finally, the{" "}
+            <CodeHighlight>progress</CodeHighlight> prop can be used to show the
+            current progress of the upload process.
+            <br />
+            Each of the following examples demonstrates one state combination of
+            the FileMosaic component.
+          </DescParagraph>
+
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "row",
+              gap: "7px",
+              flexWrap: "wrap",
+            }}
+          >
+            <DemoFileMosaicUploadStatus card />
+          </Paper>
+
+          <CodeJSFileMosaicUploadStatus card />
+
+          <Alert severity="info">
+            As you can see, you have full control of the FileCard upload
+            props. You can take advantage of them to ake your own upload
+            function and show the user the progress.
+            <br /> On the other hand, you can also leverage the capability of{" "}
+            <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> and{" "}
+            <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components
+            since they also manage the{" "}
+            <TypeHighlight>{"uploadStatus"}</TypeHighlight>
+            prop for you when upload is enabled. You can see the behaviour
+            mentioned in the following demos:
+            <ul>
+              <li>
+                <AnchorToTab href="/components/dropzone#uploading">
+                  Dropzone upload
+                </AnchorToTab>
+              </li>
+              <li>
+                <AnchorToTab href="/components/fileinputbutton#uploading">
+                  FileInputButton upload
+                </AnchorToTab>
+              </li>
+            </ul>
+          </Alert>
+        </section>
+
         <section id="dark-mode">
           <SubTitle content="Dark mode" />
           <DescParagraph>
-            The <CodeHighlight>FileCard</CodeHighlight> component supports
-            dark mode by setting the prop{" "}
-            <TypeHighlight>darkMode</TypeHighlight> to{" "}
+            The <CodeHighlight>FileCard</CodeHighlight> component supports dark
+            mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
             <TypeHighlight>true</TypeHighlight>.
           </DescParagraph>
 
@@ -217,9 +315,7 @@ const FileCardDemoPage = (props) => {
           </DescParagraph>
           <ul>
             <li>
-              <AnchorToTab href="/api/filecard">
-                {"<FileMosaic/>"}
-              </AnchorToTab>
+              <AnchorToTab href="/api/filecard">{"<FileMosaic/>"}</AnchorToTab>
             </li>
             <li>
               <AnchorToTab href="/api/fileinputbuttom">