[FEAT]: Add FileCardComponent MVP

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

 import * as React from "react";
 import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
 
-const CodeJSFileCardBasic = (props) => {
+const CodeJSFileCardBasic = ({ card }) => {
   return (
     <ShowDemoCode
-      codeCompleteJS={completeCodeJS}
-      codeCompleteTS={completeCodeTS}
+      codeCompleteJS={completeCodeJS(card)}
+      codeCompleteTS={completeCodeTS(card)}
       codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
       codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
-      codeSplittedJS={splittedCodeJS}
-      codeSplittedTS={splittedCodeTS}
+      codeSplittedJS={splittedCodeJS(card)}
+      codeSplittedTS={splittedCodeTS(card)}
     />
   );
 };
 export default CodeJSFileCardBasic;
 
-const splittedCodeJS = `<>
+const splittedCodeJS = (card) => `<>
   {value ? (
-    <FileMosaic {...value} onDelete={removeFile} />
+    <${!card ? "FileMosaic" : "FileCard"} {...value} onDelete={removeFile} />
   ) : (
     <FileInputButton value={value ? [value] : []} onChange={updateFile} />
   )}
-  <FileMosaic {...sampleFileProps} />
+  <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} />
 </>
 
 // file props
@@ -32,7 +32,7 @@ const sampleFileProps = {
   name: "file created from props.jsx",
 };`;
 
-const completeCodeJS = `import * as React from "react";
+const completeCodeJS = (card) => `import * as React from "react";
 import { InputButton, FileMosaic } from "@files-ui/react";
 
 const sampleFileProps = {
@@ -55,22 +55,24 @@ export default function App() {
   return (
     <div style={{display:"flex", gap:"10px"}}>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} info/>
+        <${
+          !card ? "FileMosaic" : "FileCard"
+        } {...value} onDelete={removeFile} info/>
       ) : (
         <FileInputButton value={value ? [value] : []} onChange={updateFile} />
       )}
-      <FileMosaic {...sampleFileProps} info/>
+      <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
     </div>
   );
 };`;
 
-const splittedCodeTS = `<>
+const splittedCodeTS = (card) => `<>
   {value ? (
-    <FileMosaic {...value} onDelete={removeFile} info/>
+    <${!card ? "FileMosaic" : "FileCard"} {...value} onDelete={removeFile} info/>
   ) : (
     <FileInputButton value={value ? [value] : []} onChange={updateFile} />
   )}
-  <FileMosaic {...sampleFileProps} info/>
+  <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
 </>
 
 // file props
@@ -80,7 +82,7 @@ const sampleFileProps: ExtFile = {
   type: "text/plain",
   name: "file created from props.jsx",
 };`;
-const completeCodeTS = `import * as React from "react";
+const completeCodeTS = (card) => `import * as React from "react";
 import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
 
 const sampleFileProps:ExtFile = {
@@ -103,11 +105,13 @@ export default function App() {
   return (
     <div style={{display:"flex", gap:"10px"}}>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} info/>
+        <${
+          !card ? "FileMosaic" : "FileCard"
+        } {...value} onDelete={removeFile} info/>
       ) : (
         <FileInputButton value={value ? [value] : []} onChange={updateFile} />
       )}
-      <FileMosaic {...sampleFileProps} info/>
+      <${!card ? "FileMosaic" : "FileCard"} {...sampleFileProps} info/>
     </div>
   );
 };`;

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

 import * as React from "react";
 import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
 
-const CodeJSFileMosaicImagePreview = () => {
+const CodeJSFileMosaicImagePreview = (props:{card:boolean}) => {
+  const {card}=props;
   return (
     <ShowDemoCode
-      codeCompleteJS={completeCodeJS}
-      codeCompleteTS={completeCodeTS}
+      codeCompleteJS={completeCodeJS(card)}
+      codeCompleteTS={completeCodeTS(card)}
       codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
       codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
-      codeSplittedJS={splittedCodeJS}
-      codeSplittedTS={splittedCodeTS}
+      codeSplittedJS={splittedCodeJS(card)}
+      codeSplittedTS={splittedCodeTS(card)}
     />
   );
 };
 export default CodeJSFileMosaicImagePreview;
 
-const splittedCodeJS = `<>
+const splittedCodeJS = (card:boolean)=>`<>
   {value ? (
-    <FileMosaic {...value} onDelete={removeFile} info preview/>
+    <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
   ) : (
     <FileInputButton onChange={updateFile} accept="image/*"/>
   )}
-  <FileMosaic {...sampleFileProps} info/>
+  <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
 </>
 
 // file props
@@ -33,7 +34,7 @@ const sampleFileProps = {
     imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
 };`;
 
-const completeCodeJS = `import * as React from "react";
+const completeCodeJS = (card:boolean)=>`import * as React from "react";
 import { InputButton, FileMosaic } from "@files-ui/react";
 
 const sampleFileProps = {
@@ -57,22 +58,22 @@ export default function App() {
   return (
     <div style={{display:"flex", gap:"10px"}}>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} info preview/>
+        <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
       ) : (
         <FileInputButton onChange={updateFile} accept="image/*"/>
       )}
-      <FileMosaic {...sampleFileProps} info/>
+      <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
     </div>
   );
 };`;
 
-const splittedCodeTS = `<>
+const splittedCodeTS = (card:boolean)=>`<>
 {value ? (
-  <FileMosaic {...value} onDelete={removeFile} info preview/>
+  <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
 ) : (
   <FileInputButton onChange={updateFile} accept="image/*"/>
 )}
-<FileMosaic {...sampleFileProps} info/>
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
 </>
 
 // file props
@@ -83,7 +84,7 @@ const sampleFileProps: ExtFile = {
   name: "Thor arrives wakanda.jpg",
   imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
 };`;
-const completeCodeTS = `import * as React from "react";
+const completeCodeTS = (card:boolean)=>`import * as React from "react";
 import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
 
 const sampleFileProps: ExtFile = {
@@ -107,11 +108,11 @@ export default function App() {
   return (
     <div style={{display:"flex", gap:"10px"}}>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} info preview/>
+        <${card?"FileCard":"FileMosaic"} {...value} onDelete={removeFile} info preview/>
       ) : (
         <FileInputButton onChange={updateFile} accept="image/*"/>
       )}
-      <FileMosaic {...sampleFileProps} info/>
+      <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info/>
     </div>
   );
 };`;

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

-import { Paper, Stack } from "@mui/material";
+import { Paper, Stack, Box } from "@mui/material";
 import * as React from "react";
 
-const DemoContainerFileMosaic = ({ children }) => {
+const DemoContainerFileMosaic = ({ children, card }) => {
   return (
     <Paper
       variant="outlined"
@@ -12,15 +12,21 @@ const DemoContainerFileMosaic = ({ children }) => {
         justifyContent: "center",
       }}
     >
-      <Stack
-        spacing={4}
-        direction="row"
-        alignItems={"center"}
-        flexWrap="wrap"
-        justifyContent={"space-evenly"}
+      <Box
+        sx={{
+          display: "flex",
+          gap: "20px",
+          flexWrap: "wrap",
+          flexDirection: { xs: card ? "column" : undefined, md: "row" },
+          justifyContent: {
+            xs: "center",
+            md: "space-evenly",
+          },
+          alignItems: { xs: "center" },
+        }}
       >
         {children}
-      </Stack>
+      </Box>
     </Paper>
   );
 };

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

@@ -6,17 +6,17 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 10px;
+  //margin: 10px;
   min-height: 100px;
   box-sizing: border-box;
   position: relative;
   font-size: 15px;
   font-weight: 400;
-  width: 350px;
+  width: 320px;
   .files-ui-file-card-main-layer-container {
     border-radius: 8px;
     overflow: hidden;
-    width: 380px;
+    width: 320px;
     box-sizing: border-box;
     height: 100px;
     box-sizing: border-box;
@@ -85,9 +85,12 @@
           }
         }
         .file-card-data {
-          line-height: 18px;
+          padding-right: 10px;
+          box-sizing: border-box;
+          line-height: 19px;
           font-weight: 500;
-          width: 250px;
+          //width: 250px;
+          width: calc(100% - 100px);
           //flex-grow: 1;
           word-break: break-all;
           color: black;
@@ -101,12 +104,12 @@
           }
           .file-card-size {
             font-weight: 400;
-            font-size: 0.95rem;
+            font-size: 0.9rem;
           }
           .file-card-name {
             //letter-spacing: 0.09em;
             font-size: 1rem;
-            text-align: center;
+            //text-align: center;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -121,18 +124,6 @@
       }
     }
 
-    .files-ui-file-card-right-layer {
-      right: 0;
-      left: unset;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-direction: column;
-      padding: 3px;
-      width: 36px;
-      //background-color: aquamarine;
-      height: 100%;
-    }
     .file-card-upload-layer-container {
       display: flex;
       box-sizing: border-box;
@@ -182,7 +173,7 @@
       align-items: center;
       justify-content: flex-end;
       .file-card-file-info {
-        width: 250px;
+        width: calc(100% - 100px);
         height: 100px;
         text-align: left;
         scrollbar-width: thin;

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

@@ -10,7 +10,7 @@ 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 "./components/FileCardRightLayer";
+import FileCardRightActions from "./components/FileCardRightActions";
 import FileCardInfoLayer from "./components/FileCardInfoLayer";
 import FileMosaicStatus from "../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
 import FileCardUploadLayer from "./components/FileCardUploadLayer";
@@ -38,7 +38,8 @@ const makeFileCardClassName = (
   className: string | undefined
 ): string => {
   console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
-  let finalClassName: string = "files-ui-file-card-main-container files-ui-tooltip card";
+  let finalClassName: string =
+    "files-ui-file-card-main-container files-ui-tooltip card";
 
   if (elevation) {
     finalClassName += " elevation-" + setFinalElevation(elevation);
@@ -296,31 +297,13 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
               </div>
             </div>
           </Layer>
-          <Layer
+
+          {/* <Layer
             className="files-ui-file-card-right-layer"
             visible={!isUploading}
-          >
-            <FileCardRightLayer
-              deleteIcon={onDelete !== undefined}
-              onDelete={handleDelete}
-              darkMode={darkMode}
-              valid={valid}
-              uploadStatus={uploadStatus}
-              localization={localization}
-              sizeFormatted={sizeFormatted}
-              imageIcon={isImage && onSee !== undefined}
-              onSee={() => onSee?.(imageSource)}
-              videoIcon={isVideo && onWatch !== undefined}
-              onWatch={() => onWatch?.(file)}
-              downloadIcon={
-                onDownload !== undefined || downloadUrl !== undefined
-              }
-              onDownload={handleDownload}
-              infoIcon={info !== undefined}
-              onOpenInfo={handleOpenInfo}
-              isActive={alwaysActive || hovering}
-            />
-          </Layer>
+          > */}
+
+          {/* </Layer> */}
 
           <Layer className="file-card-info-layer-container" visible={showInfo}>
             <FileCardInfoLayer
@@ -357,6 +340,26 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
           </Layer>
         </LayerContainer>
 
+        <FileCardRightActions
+          deleteIcon={onDelete !== undefined}
+          onDelete={handleDelete}
+          darkMode={darkMode}
+          valid={valid}
+          uploadStatus={uploadStatus}
+          localization={localization}
+          sizeFormatted={sizeFormatted}
+          imageIcon={isImage && onSee !== undefined}
+          onSee={() => onSee?.(imageSource)}
+          videoIcon={isVideo && onWatch !== undefined}
+          onWatch={() => onWatch?.(file)}
+          downloadIcon={onDownload !== undefined || downloadUrl !== undefined}
+          onDownload={handleDownload}
+          infoIcon={info !== undefined}
+          onOpenInfo={handleOpenInfo}
+          isActive={alwaysActive || hovering}
+          visible={!isUploading && !showInfo}
+        />
+
         <Tooltip
           open={resultOnTooltip}
           uploadStatus={uploadStatus}

src/files-ui/components/file-card/components/FileMosaicRightLayer.scss → src/files-ui/components/file-card/components/FileCardRightActions.scss

 .file-card-right-layer-header {
+  margin-top: 3px;
+  margin-right: 3px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: unset;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  height: 20px;
-  width: 100%;
-
+  gap: 2px;
 }
 .file-card-right-layer-footer {
+  margin-bottom: 3px;
+  margin-right: 3px;
+  left: unset;
+  position: absolute;
+
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 2px;
-  height: 20px;
-  width: 100%;
+  //height: 20px;
+  //width: 100%;
+  bottom: 0;
+  right: 0;
 }

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

@@ -7,8 +7,9 @@ import {
   PlayIcon,
   Visibility,
 } from "../../icons";
-import "./FileMosaicRightLayer.scss";
-declare type FileCardRightLayerProps = {
+import "./FileCardRightActions.scss";
+
+declare type FileCardRightActionsProps = {
   darkMode?: boolean;
   deleteIcon?: boolean;
   onDelete?: Function;
@@ -32,9 +33,10 @@ declare type FileCardRightLayerProps = {
   onOpenInfo: Function | undefined;
 
   isActive?: boolean;
+  visible?: boolean;
 };
-const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
-  props: FileCardRightLayerProps
+const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
+  props: FileCardRightActionsProps
 ) => {
   const {
     darkMode,
@@ -53,8 +55,9 @@ const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
     localization,
     uploadStatus,
     isActive,
+    visible
   } = props;
-
+if(visible)
   return (
     <>
       <div className="file-card-right-layer-header">
@@ -126,6 +129,7 @@ const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
         )}
       </div>
     </>
-  );
+  )
+  return <></>
 };
-export default FileCardRightLayer;
+export default FileCardRightActions;

src/pages/demo/FileCardDemoPage.jsx

@@ -65,7 +65,7 @@ const FileCardDemoPage = (props) => {
           <DemoContainerFileMosaic>
             <DemoFileCardBasic />
           </DemoContainerFileMosaic>
-          <CodeJSFileCardBasic />
+          <CodeJSFileCardBasic card/>
 
           <Alert severity="info">
             <AlertTitle> FileInputButton </AlertTitle>
@@ -133,11 +133,11 @@ const FileCardDemoPage = (props) => {
             <TypeHighlight>undefined</TypeHighlight>.
           </DescParagraph>
 
-          <DemoContainerFileMosaic>
+          <DemoContainerFileMosaic card>
             <DemoFileMosaicValidation card />
           </DemoContainerFileMosaic>
 
-          <CodeJSFileMosaicValidation />
+          <CodeJSFileMosaicValidation card/>
           <Alert severity="info">
             Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "}
             <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set