[WIP]: Add basic code for FileMosaic

package-lock.json

@@ -19,7 +19,7 @@
         "@types/react": "^18.0.25",
         "axios": "^1.3.1",
         "node-sass": "^7.0.3",
-        "rc-highlight": "^2.3.6",
+        "rc-highlight": "^2.4.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.4.3",
@@ -15537,9 +15537,9 @@
       }
     },
     "node_modules/rc-highlight": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
-      "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
+      "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
       "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
@@ -30064,9 +30064,9 @@
       }
     },
     "rc-highlight": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.6.tgz",
-      "integrity": "sha512-5TEqMz3IlqlMUEnIho+mfu9cyy30ACtnb/pR73TpYN1/16zF4vITiOcFwOQoUAUPEa00QwUBtjSvVnu/+z9CEw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.4.4.tgz",
+      "integrity": "sha512-6+glGJRfsXPxK199qaVyNnT32IyblTBb9KEFJlYo6pt4+RSWntOn4cT/u0i74uN6uVHbvAqSryMJnZvyOMcCJg==",
       "requires": {}
     },
     "react": {

package.json

@@ -14,7 +14,7 @@
     "@types/react": "^18.0.25",
     "axios": "^1.3.1",
     "node-sass": "^7.0.3",
-    "rc-highlight": "^2.3.6",
+    "rc-highlight": "^2.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.4.3",

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

+import * as React from "react";
+import ShowCode from "../../show-code/ShowCode";
+
+const BasicFileMosaicCodeJS = props =>{
+    return(
+        <ShowCode
+        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 BasicFileMosaicCodeJS;
+
+
+const splittedCodeJS = `<>
+  {value ? (
+    <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+  ) : (
+    <InputButton
+        label="Browse File..."
+        onChange={updateFiles}
+        textDecoration="uppercase"
+    />
+  )}
+  <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
+</>`;
+
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "plain/javascript",
+  name: "fileeeeee.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} alwaysActive info />
+        ) : (
+          <InputButton
+            label="Browse File..."
+            onChange={updateFiles}
+            textDecoration="uppercase"
+          />
+        )}
+        <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
+      </div>
+    );
+  };`;
+
+const completeCodeTS = completeCodeJS;
+const splittedCodeTS = splittedCodeJS;

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

 import * as React from "react";
-import { InputButton } from "../../../files-ui";
-import { FileMosaic } from "../../../files-ui/components/file-mosaic";
-const sampleFile = {
+import { InputButton,FileMosaic } from "../../../files-ui";
+
+const sampleFileProps = {
   id: ":0:",
-  name: "",
   size: 28 * 1024 * 1024,
   type: "plain/javascript",
   name: "fileeeeee.jsx",
 };
 const BasicFileMosaicDemo = (props) => {
-  const [value, setValue] = React.useState([]);
+  const [value, setValue] = React.useState(undefined);
 
   const updateFiles = (incommingFiles) => {
     console.log("incomming extFiles", incommingFiles);
-    setValue(incommingFiles);
+
+    setValue(incommingFiles[0]);
   };
   const removeFile = () => {
-    setValue([]);
+    setValue(undefined);
   };
   return (
     <>
-      {value.length > 0 ? (
-        <FileMosaic
-          key={sampleFile.id + ":"}
-          {...value[0]}
-          onDelete={removeFile}
-          info
-          alwaysActive
-        />
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
       ) : (
-        <>
-          <InputButton
-            label="Browse Files..."
-            onChange={updateFiles}
-            textDecoration="uppercase"
-          />
-        </>
+        <InputButton
+          label="Browse File..."
+          onChange={updateFiles}
+          textDecoration="uppercase"
+        />
       )}
-      <FileMosaic
-        key={sampleFile.id}
-        {...sampleFile}
-        onDelete={() => {}}
-        info
-        alwaysActive
-      />
+      <FileMosaic {...sampleFileProps} onDelete={() => {}} alwaysActive info />
     </>
   );
 };

src/pages/demo/FileMosaicDemoPage.jsx

@@ -4,6 +4,7 @@ import Stack from "@mui/material/Stack";
 import * as React from "react";
 import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import BasicFileMosaicCodeJS from "../../components/demo-components/filemosaic-demo/BasicFileMosaicCodeJS";
 import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
 import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -37,7 +38,7 @@ const FileMosaicDemoPage = (props) => {
           <SubTitle content="Basic FileMosaic" />
           <DescParagraph>
             The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
-            information from <TypeHighlight>File</TypeHighlight> object or
+            information from a <TypeHighlight>File</TypeHighlight> object or from
             individual props.
           </DescParagraph>
 
@@ -50,12 +51,12 @@ const FileMosaicDemoPage = (props) => {
               justifyContent: "center",
             }}
           >
-            <Stack spacing={2} direction="row" alignItems={"center"}>
+            <Stack spacing={10} direction="row" alignItems={"center"}>
               <BasicFileMosaicDemo />
             </Stack>
           </Paper>
           <p></p>
-          {/* <BasicDropzoneCodeJS /> */}
+          <BasicFileMosaicCodeJS/>
         </section>
         <section id="image-preview">
           <SubTitle content="Image preview" />