[WIP][FEAT]: Add global config page and demo component. Missing the code and...

[WIP][FEAT]: Add global config page and demo component. Missing the code and missing to add these new tyopes FilesUIConfig and IconsConfig

src/components/MainMenu/MainMenuSideBar.tsx

@@ -128,6 +128,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 5,
       onClick: () => navigate("/localization"),
     },
+    
     /* {
       label: "Code Generator",
       index: 7,
@@ -154,6 +155,11 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 9,
       onClick: () => navigate("/file-download"),
     },
+    {
+      label: "Global config",
+      index: 10,
+      onClick: () => navigate("/global-config"),
+    },
   ];
 
   const [quickStartItems /* setQuickStartItems */] =

src/components/demo-components/global-demo/DemoGlobalConfig.tsx

+import * as React from "react";
+import {
+  Dropzone,
+  ExtFile,
+  FileMosaic,
+  Localization,
+  FileInputButton,
+  FileCard,
+  FilesUiProvider,
+} from "../../../files-ui";
+import { Autocomplete, TextField } from "@mui/material";
+import "./DemoLocalization.css";
+import Button from "@mui/material/Button";
+
+const DemoGlobalConfig = (props: { card: boolean }) => {
+  const [localization, setLocalization] = React.useState<
+    Localization | undefined
+  >(undefined);
+
+  const [darkModeOn, setDarkModeOn] = React.useState<boolean>(false);
+  const [otherIcons, setOtherIcons] = React.useState<boolean>(true);
+
+  const hadleSelect = (value: LanguageItem | null) => {
+    console.log(value);
+    setLocalization(value?.value);
+  };
+  const iconsConfig = {
+    //local resource
+    docx: "/other_icons/wordicon.png",
+    //external resource
+    pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+  };
+  return (
+    <FilesUiProvider
+      config={{
+        localization: localization,
+        darkMode: darkModeOn,
+        icons: otherIcons ? iconsConfig : undefined,
+      }}
+    >
+     
+        <div
+          style={{
+            display: "flex",
+            flexWrap:"wrap",
+            justifyContent: "space-evenly",
+            width: "100%",
+            gap:"5px"
+          }}
+        >
+          <Autocomplete
+            disablePortal
+            autoSelect
+            size="small"
+            onChange={(e, value) => hadleSelect(value as LanguageItem)}
+            id="combo-box-demo"
+            options={languages}
+            sx={{ width: 300 }}
+            getOptionLabel={(option) => option.language}
+            renderInput={(params) => (
+              <TextField {...params} label="Localization" />
+            )}
+          />
+          <Button
+            variant="contained"
+            onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+          >
+            {darkModeOn ? "turn on light" : "turn off light"}
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+          >
+            {!otherIcons ? "Other icons" : "Default icons"}
+          </Button>
+        </div>
+
+        {props.card ? (
+          <div
+            className="demo-localization-container"
+            style={{
+              backgroundColor: darkModeOn ? "#121212" : "white",
+              padding: "10px",
+            }}
+          >
+            <div className="inputbutton-container">
+              <FileInputButton
+                //style={{ width: "400px" }}
+                value={[]}
+                //localization={localization}
+              ></FileInputButton>
+            </div>
+
+            <div className="filecard-container">
+              {extFiles.map((extFile, index) => (
+                <FileCard
+                  key={index}
+                  {...extFile}
+                  localization={localization}
+                  onDelete={() => {}}
+                  info
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="demo-localization-container" style={{
+            backgroundColor: darkModeOn ? "#121212" : "white",
+            padding: "10px",
+          }}>
+            <div className="dropzone-filemosaic-container">
+              <Dropzone
+                //value={[]}
+                accept={"image/*"}
+                maxFileSize={28 * 1024 * 1024}
+                maxFiles={10}
+                //style={{ width: "400px" }}
+                localization={localization}
+              ></Dropzone>
+            </div>
+
+            <div className="dropzone-filemosaic-container">
+              {extFiles.map((extFile, index) => (
+                <FileMosaic
+                  key={index}
+                  {...extFile}
+                  localization={localization}
+                  onDelete={() => {}}
+                  info
+                />
+              ))}
+            </div>
+          </div>
+        )}
+    
+    </FilesUiProvider>
+  );
+};
+export default DemoGlobalConfig;
+
+interface LanguageItem {
+  language: string;
+  value: Localization;
+}
+
+const languages = [
+  { language: "Español: ES-es", value: "ES-es" },
+  { language: "English: EN-en", value: "EN-en" },
+  { language: "French: FR-fr", value: "FR-fr" },
+  { language: "Italian: IT-it", value: "IT-it" },
+  { language: "Portuguese: PT-pt", value: "PT-pt" },
+  { language: "Russian: RU-ru", value: "RU-ru" },
+  { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+  { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles: ExtFile[] = [
+  {
+    id: 0,
+    name: "file_global_conf.docx",
+    size: 28 * 1024,
+    errors: ["pdf not allowed", "file is too big"],
+  },
+  {
+    id: 1,
+    valid: false,
+    name: "file_global_conf.docx",
+
+    size: 28 * 1024,
+    errors: ["pdf not allowed", "file is too big"],
+  },
+  {
+    id: 2,
+    valid: true,
+    name: "file_global_conf.docx",
+    size: 28 * 1024,
+  },
+  {
+    id: 3,
+    valid: true,
+    name: "file_global_conf.pdf",
+    type: "application/pdf",
+    size: 28 * 1024,
+    uploadStatus: "preparing",
+  },
+  {
+    id: 4,
+    name: "file_global_conf.pdf",
+    type: "application/pdf",
+    size: 28 * 1024,
+    uploadStatus: "uploading",
+    progress: 28,
+  },
+  {
+    id: 5,
+    valid: true,
+    name: "file_global_conf.docx",
+    size: 28 * 1024,
+    uploadStatus: "aborted",
+    uploadMessage: "Upload was aborted",
+  },
+  {
+    id: 6,
+    valid: false,
+    name: "file_global_conf.pdf",
+    type: "application/pdf",
+    size: 28 * 1024,
+    uploadStatus: "error",
+    uploadMessage: "there was an error on the server",
+  },
+  {
+    id: 7,
+    valid: true,
+    name: "file_global_conf.docx",
+    size: 28 * 1024,
+    uploadStatus: "success",
+    uploadMessage: "files-ui <3",
+  },
+];

src/components/demo-components/global-demo/DemoLocalization.css

+.demo-localization-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 50vh;
+}
+
+.dropzone-filemosaic-container {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1px;
+}
+
+.inputbutton-container {
+    width: 100px;
+}
+
+.filecard-container {
+    gap: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+@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/globals/providers/UserProvider.tsx

@@ -27,11 +27,11 @@ export const UserProvider = (props: {
         <FilesUiProvider
           config={{
             darkMode: usuario.darkMode,
-            icons: {
+            /* icons: {
               png: gradle,
               mp4: "/serverside/springbootjavalogo.png",
               pdf: "https://www.iconpacks.net/icons/2/free-pdf-download-icon-2617-thumb.png",
-            },
+            }, */
           }}
         >
           {children}

src/pages/global-config-page/GlobalConfigPage.tsx

+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
+import { Paper, Alert, AlertTitle } from "@mui/material";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import DemoGlobalConfig from "../../components/demo-components/global-demo/DemoGlobalConfig";
+import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+
+interface GlobalConfigPageProps {}
+const GlobalConfigPage: React.FC<GlobalConfigPageProps> = (
+  props: GlobalConfigPageProps
+) => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
+
+  const [component, setComponent] = React.useState("FileMosaic");
+  const handleChangeComponent = (newVal: string) => {
+    setComponent(newVal);
+  };
+
+  return (
+    <React.Fragment>
+      <MainLayoutPage selectedIndex={10}>
+        <MainContentContainer>
+          <MainTitle>Global configuration</MainTitle>
+          <MainParagraph>
+            There are some params like <CodeHighlight>darkMode</CodeHighlight>{" "}
+            or localization that can be set through a global config.
+            <br />
+            Also, you can add your custom icons sources.
+          </MainParagraph>
+          <DescParagraph>
+            This feature is possible thanks to the{" "}
+            <AnchorToTab href="https://react.dev/reference/react#context-hooks">
+              Context hooks
+            </AnchorToTab>
+            .
+          </DescParagraph>
+          <Alert severity="info">
+            <AlertTitle> FileMosaic </AlertTitle>
+            For using this feature you don't need to be an expert on{" "}
+            <TypeHighlight>React.Context</TypeHighlight>.
+          </Alert>
+          <section id="FilesUiProvider">
+            <SubTitle content="FilesUiProvider" />
+            <DescParagraph>
+              When it comes to Context and Providers you can think that the
+              provider is just the in charge one to pass globally a "prop". So
+              you can avoid the set it individually on every component.
+              <br></br>
+              In the following themo we will set the 3 allowed params:
+              <ul>
+                <li>darkMode</li>
+                <li>localization</li>
+                <li>icons</li>
+              </ul>
+            </DescParagraph>
+
+            <FileCardMosaicSwitch
+              value={component}
+              onChange={handleChangeComponent}
+              withInput
+              row
+            />
+
+            <Paper
+              variant="outlined"
+              style={{
+                padding: "25px 10px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+                gap: "20px",
+              }}
+            >
+              <DemoGlobalConfig card={component === "FileCard"} />
+            </Paper>
+            {/*    <CodeJSFileMosaicLocalization card={component === "FileCard"} /> */}
+
+            <Alert severity="info">
+              <AlertTitle> FileMosaic </AlertTitle>
+              This demo is a combination of 3 samples that you can find For
+              completeness, these examples include{" "}
+              <CodeHighlight>{`<FileMosaic/>`} </CodeHighlight>
+              component for showing the files selected by the user with minimun
+              props too. For further information of this component check out the{" "}
+              <AnchorToTab href="/components/filemosaic">
+                FileMosaic
+              </AnchorToTab>{" "}
+              page.
+            </Alert>
+            <Alert severity="info">
+              <AlertTitle>
+                {" "}
+                config prop on {"<FIlesUiProvider>...</FIlesUiProvider>"}{" "}
+              </AlertTitle>
+              For further information of this data type check out the{" "}
+              <AnchorToTab href="/types#globalconfig">config type</AnchorToTab>{" "}
+              page.
+            </Alert>
+          </section>
+        </MainContentContainer>
+        <RightMenuContainer>
+          <RightMenu
+            width="240px"
+            items={rightMenuItems}
+            selectedItemProp={selectedItem}
+            setSelected={setSelectedItem}
+          />
+        </RightMenuContainer>
+      </MainLayoutPage>
+    </React.Fragment>
+  );
+};
+export default GlobalConfigPage;
+
+const rightMenuItems = [
+  {
+    id: 0,
+    label: "Localization",
+    referTo: "/file-download#samehost",
+  },
+  {
+    id: 1,
+    label: "Dark mode",
+    referTo: "/file-download#samehost",
+  },
+  {
+    id: 2,
+    label: "Custom file icons",
+    referTo: "/file-download#samehost",
+  },
+];

src/routes/MainRouter.jsx

@@ -27,6 +27,7 @@ import VideoPreviewApi from "../pages/api/VideoPreviewApi";
 import ImagePreviewApi from "../pages/api/ImagePreviewApi";
 import FullScreenApi from "../pages/api/FullScreenApi";
 import FullScreenDemoPage from "../pages/demo/FullScreenDemoPage";
+import GlobalConfigPage from "../pages/global-config-page/GlobalConfigPage";
 
 const router = createBrowserRouter([
   {
@@ -155,7 +156,7 @@ const router = createBrowserRouter([
     path: "/file-upload",
     element: <FileUploaderPage />,
   }, */
-
+  { path: "/global-config", element: <GlobalConfigPage /> },
 ]);
 
 const MainRouter = (props) => {