[WIP]: Add localization page completed. Missing to refactor FileCard and...

[WIP]: Add localization page completed. Missing to refactor FileCard and FIleMosaic to display info layer with localization. Also missing Avatar for localization

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization.jsx → src/components/demo-components/localization/CodeJSFileMosaicLocalization.jsx

 import * as React from "react";
 import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
 
-const CodeJSFileMosaicLocalization = (props) => {
+const CodeJSFileMosaicLocalization = ({ 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}
@@ -18,18 +18,18 @@ export default CodeJSFileMosaicLocalization;
 const splittedCodeJS = ``;
 const splittedCodeTS = ``;
 
-
-const completeCodeJS = `import * as React from "react";
-import { FileMosaic } from "@files-ui/react";
+const completeCodeJS = (card) => `import * as React from "react";
+import { ${card ? "FileCard" : `FileMosaic`} } from "@files-ui/react";
+import "./styles.css";
 import { Autocomplete, TextField } from "@mui/material";
 
-const DemoFileMosaicLocalization = () => {
+const App = () => {
   const [localization, setLocalization] = React.useState(undefined);
 
   const hadleSelect = (value) => {
     console.log(value);
     setLocalization(value?.value);
- };
+  };
   return (
     <>
       <Autocomplete
@@ -43,25 +43,48 @@ const DemoFileMosaicLocalization = () => {
         getOptionLabel={(option) => option.language}
         renderInput={(params) => <TextField {...params} label="Localization" />}
       />
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          justifyContent: "space-evenly",
-          width: "100%",
-          gap: "50px",
-        }}
-      >
-        {extFiles.map((extFile, index) => (
-          <FileMosaic
-            key={index}
-            {...extFile}
+      ${
+        !card
+          ? `<div className="demo-localization-container">
+        <div className="dropzone-filemosaic-container">
+          <Dropzone
+            accept={"image/*"}
+            maxFileSize={28 * 1024 * 1024}
+            maxFiles={10}
+            localization={localization}
+          ></Dropzone>
+        </div>
+        <div className="dropzone-filemosaic-container">
+          {extFiles.map((extFile, index) => (
+            <FileMosaic
+              key={index}
+              {...extFile}
+              localization={localization}
+              onDelete={() => {}}
+              info
+            />
+          ))}
+        </div>
+      </div>`
+          : `<div className="demo-localization-container">
+        <div className="inputbutton-container">
+          <FileInputButton
             localization={localization}
-            onDelete={() => {}}
-            info
-          />
-        ))}
-      </div>
+          ></FileInputButton>
+        </div>
+        <div className="filecard-container">
+          {extFiles.map((extFile, index) => (
+            <FileCard
+              key={index}
+              {...extFile}
+              localization={localization}
+              onDelete={() => {}}
+              info
+            />
+          ))}
+        </div>
+      </div>`
+      }
     </>
   );
 };
@@ -88,7 +111,6 @@ const extFiles = [
     id: 1,
     valid: false,
     name: "file_localization.docx",
-
     size: 28 * 1024,
     errors: ["pdf not allowed", "file is too big"],
   },
@@ -138,11 +160,14 @@ const extFiles = [
   },
 ];`;
 
-const completeCodeTS = `import * as React from "react";
-import { ExtFile, FileMosaic, Localization } from "@files-ui/react";
+const completeCodeTS = (card) => `import * as React from "react";
+import { ExtFile, ${
+  card ? "FileCard" : `FileMosaic`
+}, Localization } from "@files-ui/react";
+import "./styles.css";
 import { Autocomplete, TextField } from "@mui/material";
 
-const DemoFileMosaicLocalization = () => {
+const App = () => {
   const [localization, setLocalization] = React.useState<
     Localization | undefined
   >(undefined);
@@ -150,7 +175,7 @@ const DemoFileMosaicLocalization = () => {
   const hadleSelect = (value: LanguageItem | null) => {
     console.log(value);
     setLocalization(value?.value);
- };
+  };
 
   return (
     <>
@@ -165,25 +190,48 @@ const DemoFileMosaicLocalization = () => {
         getOptionLabel={(option) => option.language}
         renderInput={(params) => <TextField {...params} label="Localization" />}
       />
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          justifyContent: "space-evenly",
-          width: "100%",
-          gap: "50px",
-        }}
-      >
-        {extFiles.map((extFile, index) => (
-          <FileMosaic
-            key={index}
-            {...extFile}
+      ${
+        !card
+          ? `<div className="demo-localization-container">
+        <div className="dropzone-filemosaic-container">
+          <Dropzone
+            accept={"image/*"}
+            maxFileSize={28 * 1024 * 1024}
+            maxFiles={10}
+            localization={localization}
+          ></Dropzone>
+        </div>
+        <div className="dropzone-filemosaic-container">
+          {extFiles.map((extFile, index) => (
+            <FileMosaic
+              key={index}
+              {...extFile}
+              localization={localization}
+              onDelete={() => {}}
+              info
+            />
+          ))}
+        </div>
+      </div>`
+          : `<div className="demo-localization-container">
+        <div className="inputbutton-container">
+          <FileInputButton
             localization={localization}
-            onDelete={() => {}}
-            info
-          />
-        ))}
-      </div>
+          ></FileInputButton>
+        </div>
+        <div className="filecard-container">
+          {extFiles.map((extFile, index) => (
+            <FileCard
+              key={index}
+              {...extFile}
+              localization={localization}
+              onDelete={() => {}}
+              info
+            />
+          ))}
+        </div>
+      </div>`
+      }
     </>
   );
 };

src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx → src/components/demo-components/localization/DemoFileMosaicLocalization.tsx

@@ -8,7 +8,7 @@ import {
   FileCard,
 } from "../../../files-ui";
 import { Autocomplete, TextField } from "@mui/material";
-import "./DemoLocalization.scss";
+import "./DemoLocalization.css";
 const DemoFileMosaicLocalization = (props: { card: boolean }) => {
   const [localization, setLocalization] = React.useState<
     Localization | undefined
@@ -32,8 +32,8 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
         renderInput={(params) => <TextField {...params} label="Localization" />}
       />
       {props.card ? (
-        <div className="demo-localization-container-dz-fm">
-          <div className="demo-localization-item">
+        <div className="demo-localization-container">
+          <div className="inputbutton-container">
             <FileInputButton
               //style={{ width: "400px" }}
               value={[]}
@@ -41,7 +41,7 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
             ></FileInputButton>
           </div>
 
-          <div className="demo-localization-item">
+          <div className="filecard-container">
             {extFiles.map((extFile, index) => (
               <FileCard
                 key={index}
@@ -54,19 +54,19 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
           </div>
         </div>
       ) : (
-        <div className="demo-localization-container-dz-fm">
-          <div className="demo-localization-item">
+        <div className="demo-localization-container">
+          <div className="dropzone-filemosaic-container">
             <Dropzone
-              value={extFiles}
+              //value={[]}
               accept={"image/*"}
-              maxFileSize={28*1024*1024}
+              maxFileSize={28 * 1024 * 1024}
               maxFiles={10}
               //style={{ width: "400px" }}
               localization={localization}
             ></Dropzone>
           </div>
 
-          <div className="demo-localization-item">
+          <div className="dropzone-filemosaic-container">
             {extFiles.map((extFile, index) => (
               <FileMosaic
                 key={index}

src/components/demo-components/filemosaic-demo/DemoLocalization.scss → src/components/demo-components/localization/DemoLocalization.css

-.demo-localization-container-dz-fm {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
+.demo-localization-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 50vh;
+}
 
-  .demo-localization-item {
+.dropzone-filemosaic-container {
     width: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 1px;
-  }
-  @media (max-width: 960px) {
-    flex-direction: column;
-    .demo-localization-item {
-      width: 100%;
-    }
-  }
 }
 
-.demo-localization-container-fib-fc {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  .demo-localization-item {
-    width: 50%;
+.inputbutton-container {
+    width: 100px;
+}
+
+.filecard-container {
+    gap: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    gap: 1px;
-  }
-  @media (max-width: 960px) {
-    .demo-localization-item {
-      width: 100%;
-    }
-  }
 }
+
+@media (max-width: 960px) {
+    .demo-localization-container {
+        flex-direction: column;
+    }
+
+    .dropzone-filemosaic-container {
+        width: 100%;
+    }
+
+    .filecard-container {
+        width: 100%;
+        flex-direction: column;
+    }
+}
\ No newline at end of file

src/pages/demo/FileMosaicDemoPage.jsx

@@ -20,8 +20,8 @@ import CodeJSFileMosaicValidation from "../../components/demo-components/filemos
 import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
 import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
 import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
-import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
-import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
 import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
 import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
 import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";

src/pages/localization/LocalizationPage.jsx

@@ -8,13 +8,12 @@ import MainTitle from "../../components/main-title/MainTitle";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
 import Paper from "@mui/material/Paper";
-import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
 import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
-import AnchorToTab from "../../components/util-components/AnchorToTab";
+// import AnchorToTab from "../../components/util-components/AnchorToTab";
 import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
 import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
-import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
-import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
 
 const LocalizationPage = (props) => {
   const [component, setComponent] = React.useState("FileMosaic");
@@ -34,11 +33,11 @@ const LocalizationPage = (props) => {
             locales, follow the instructions below.
           </MainParagraph>
 
-          <section id="locale-text">
+          <section id="locale-texts">
             <SubTitle content="Locale texts" />
             <DescParagraph>
               Files UI components have multilanguage support. You can change the
-              language in wich labels are displayed by setting the{" "}
+              language in wich the labels are displayed by setting the{" "}
               <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
               the following languages are supported:
               <ul>
@@ -53,7 +52,7 @@ const LocalizationPage = (props) => {
                   "Chinnese (traditional)",
                 ].map((x) => (
                   <li>
-                    <TypeHighlight>{x}</TypeHighlight>
+                    <TypeHighlight key={x}>{x}</TypeHighlight>
                   </li>
                 ))}
               </ul>
@@ -93,7 +92,7 @@ export default LocalizationPage;
 const rightMenuItems = [
   {
     id: 0,
-    label: "Complete list",
-    referTo: "/file-icons#complete-list",
+    label: "Locale texts",
+    referTo: "/file-icons#locale-texts",
   },
 ];