Merge pull request #19 from files-ui/30-feat-add-context-for-darkmode-and-custom-image-icons

30 feat add context for darkmode and custom image icons

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/dropzone-demo/AdvancedDropzoneCodeJS.jsx

@@ -19,10 +19,10 @@ const splittedCodeJS = `<Dropzone
   onChange={updateFiles}
   minHeight="195px"
   value={extFiles}
+  accept="image/*, video/*"
   maxFiles={3}
-  // FmaxFileSize={2998000 * 20}
+  maxFileSize={2 * 1024*1024}
   label="Drag'n drop files here or click to browse"
-  // accept=".png,image/*, video/*"
   uploadConfig={{
     // autoUpload: true
     url: BASE_URL + "/file/28048465460",
@@ -124,10 +124,10 @@ export default function AdvancedDropzoneDemo() {
         onChange={updateFiles}
         minHeight="195px"
         value={extFiles}
+        accept="image/*, video/*"
         maxFiles={3}
-      // FmaxFileSize={2998000 * 20}
+        maxFileSize={2 * 1024*1024}
         label="Drag'n drop files here or click to browse"
-      // accept=".png,image/*, video/*"
         uploadConfig={{
           // autoUpload: true
           url: BASE_URL + "/file/28048465460",

src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx

@@ -63,8 +63,9 @@ export default function AdvancedDropzoneDemo() {
         onChange={updateFiles}
         minHeight="195px"
         value={extFiles}
+        accept="image/*, video/*"
         maxFiles={3}
-        // FmaxFileSize={2998000 * 20}
+        maxFileSize={2 * 1024*1024}
         label="Drag'n drop files here or click to browse"
         // accept=".png,image/*, video/*"
         uploadConfig={{
@@ -92,7 +93,6 @@ export default function AdvancedDropzoneDemo() {
             onAbort={handleAbort}
             onCancel={handleCancel}
             resultOnTooltip
-            alwaysActive
             preview
             info
           />

src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx

@@ -5,8 +5,8 @@ const BasicDropzoneCode = ({ splittedOnly = false, button = false }) => {
       splittedOnly={splittedOnly}
       codeCompleteJS={button ? completeCodeJSButton : completeCodeJS}
       codeCompleteTS={button ? completeCodeTSButton : completeCodeTS}
-      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
-      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxJS="https://codesandbox.io/s/basic-demo-js-blssi1"
+      codeSandboxTS="https://codesandbox.io/s/basic-demo-js-blssi1"
       codeSplittedJS={button ? splittedCodeJSButton : splittedCodeJS}
       codeSplittedTS={button ? splittedCodeTSButton : splittedCodeTS}
     />

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

@@ -48,6 +48,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
               onDelete={removeFile}
               info
               elevation={elevation as FileCardProps["elevation"]}
+              darkMode={false}
             />
           ))}
         </div>
@@ -88,7 +89,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           flexGrow: 1,
         }}
       >
-        <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+        <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode={false}/>
       </div>
       <div
         style={{

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

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoGlobalConfig = ({ card = false }) => {
+  if (!card)
+    return (
+      <ShowDemoCode
+        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}
+      />
+    );
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJSCard}
+      codeCompleteTS={completeCodeTSCard}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJSCard}
+      codeSplittedTS={splittedCodeTSCard}
+    />
+  );
+};
+export default CodeDemoGlobalConfig;
+
+const splittedCodeJS = `<FilesUiProvider
+    config={{
+        localization: localization,
+        darkMode: darkModeOn,
+        icons: otherIcons ,
+    }}
+>
+{/** components here */}
+</FilesUiProvider>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `
+import * as React from "react";
+import {
+  Dropzone,
+  FileMosaic,
+  FilesUiProvider,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+  const [localization, setLocalization] = React.useState(undefined);
+
+  const [darkModeOn, setDarkModeOn] = React.useState(false);
+  const [otherIcons, setOtherIcons] = React.useState(true);
+
+  const hadleSelect = (value) => {
+    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 className="demo-controls-container">
+        <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>
+
+      <div
+        className="demo-localization-container"
+        style={{
+          backgroundColor: darkModeOn ? "#121212" : "white",
+        }}
+      >
+        <div className="dropzone-filemosaic-container">
+          <Dropzone
+            value={[]}
+            accept={"image/*"}
+            maxFileSize={28 * 1024 * 1024}
+            maxFiles={10}
+          ></Dropzone>
+        </div>
+
+        <div className="dropzone-filemosaic-container">
+          {extFiles.map((extFile, index) => (
+            <FileMosaic key={index} {...extFile} onDelete={() => {}} info />
+          ))}
+        </div>
+      </div>
+    </FilesUiProvider>
+  );
+};
+export default DemoGlobalConfig;
+
+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= [
+  {
+    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",
+  },
+];
+`;
+const completeCodeTS = `import * as React from "react";
+import {
+  Dropzone,
+  ExtFile,
+  FileMosaic,
+  Localization,
+  FilesUiProvider,
+  IconsSet,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+  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: IconsSet = {
+    //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 className="demo-controls-container">
+        <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>
+
+      <div
+        className="demo-localization-container"
+        style={{
+          backgroundColor: darkModeOn ? "#121212" : "white",
+        }}
+      >
+        <div className="dropzone-filemosaic-container">
+          <Dropzone
+            value={[]}
+            accept={"image/*"}
+            maxFileSize={28 * 1024 * 1024}
+            maxFiles={10}
+          ></Dropzone>
+        </div>
+
+        <div className="dropzone-filemosaic-container">
+          {extFiles.map((extFile, index) => (
+            <FileMosaic key={index} {...extFile} onDelete={() => {}} info />
+          ))}
+        </div>
+      </div>
+    </FilesUiProvider>
+  );
+};
+export default DemoGlobalConfig;
+
+interface LanguageItem {
+  language: string;
+  value: Localization;
+}
+
+const languages: LanguageItem = [
+  { 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",
+  },
+];`;
+
+const splittedCodeJSCard = splittedCodeJS;
+const splittedCodeTSCard = splittedCodeJS;
+const completeCodeTSCard = `import * as React from "react";
+import {
+  ExtFile,
+  Localization,
+  FileInputButton,
+  FileCard,
+  FilesUiProvider,
+  IconsSet,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+  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: IconsSet = {
+    //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 className="demo-controls-container">
+            <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>
+        <div
+            className="demo-localization-container"
+            style={{
+                backgroundColor: darkModeOn ? "#121212" : "white",
+            }}
+        >
+            <div className="inputbutton-container">
+                <FileInputButton value={[]} />
+            </div>
+            <div className="filecard-container">
+                {extFiles.map((extFile, index) => (
+                    <FileCard key={index} {...extFile} 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",
+  },
+];`;
+const completeCodeJSCard = `import * as React from "react";
+import {
+  FileInputButton,
+  FileCard,
+  FilesUiProvider,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+  const [localization, setLocalization] = React.useState(undefined);
+
+  const [darkModeOn, setDarkModeOn] = React.useState(false);
+  const [otherIcons, setOtherIcons] = React.useState(true);
+
+  const hadleSelect = (value) => {
+    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 className="demo-controls-container">
+            <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>
+        <div
+            className="demo-localization-container"
+            style={{
+                backgroundColor: darkModeOn ? "#121212" : "white",
+            }}
+        >
+            <div className="inputbutton-container">
+                <FileInputButton value={[]} />
+            </div>
+            <div className="filecard-container">
+                {extFiles.map((extFile, index) => (
+                    <FileCard key={index} {...extFile} onDelete={() => {}} info />
+                ))}
+            </div>
+        </div>
+    </FilesUiProvider>
+};
+export default DemoGlobalConfig;
+
+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 = [
+  {
+    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/DemoGlobalConfig.tsx

+import * as React from "react";
+import {
+  Dropzone,
+  ExtFile,
+  FileMosaic,
+  Localization,
+  FileInputButton,
+  FileCard,
+  FilesUiProvider,
+  IconsSet,
+} from "../../../files-ui";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+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: IconsSet = {
+    //local resource
+    docx: "/other_icons/wordicon.png",
+    //external resource
+    pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+  };
+  if (props.card)
+    return (
+      <FilesUiProvider
+        config={{
+          localization: localization,
+          darkMode: darkModeOn,
+          icons: otherIcons ? iconsConfig : undefined,
+        }}
+      >
+        <div className="demo-controls-container">
+          <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>
+        <div
+          className="demo-localization-container"
+          style={{
+            backgroundColor: darkModeOn ? "#121212" : "white",
+          }}
+        >
+          <div className="inputbutton-container">
+            <FileInputButton value={[]} />
+          </div>
+          <div className="filecard-container">
+            {extFiles.map((extFile, index) => (
+              <FileCard key={index} {...extFile} onDelete={() => {}} info />
+            ))}
+          </div>
+        </div>
+      </FilesUiProvider>
+    );
+  return (
+    <FilesUiProvider
+      config={{
+        localization: localization,
+        darkMode: darkModeOn,
+        icons: otherIcons ? iconsConfig : undefined,
+      }}
+    >
+      <div className="demo-controls-container">
+        <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>
+
+      <div
+        className="demo-localization-container"
+        style={{
+          backgroundColor: darkModeOn ? "#121212" : "white",
+        }}
+      >
+        <div className="dropzone-filemosaic-container">
+          <Dropzone
+            value={[]}
+            accept={"image/*"}
+            maxFileSize={28 * 1024 * 1024}
+            maxFiles={10}
+          ></Dropzone>
+        </div>
+
+        <div className="dropzone-filemosaic-container">
+          {extFiles.map((extFile, index) => (
+            <FileMosaic key={index} {...extFile} 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/DemoGlobals.css

+.demo-controls-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    width: 100%;
+    gap: 5px;
+}
+
+.demo-localization-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 50vh;
+    padding: 10px;
+}
+
+.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/data/FilesUiConfigAPIRows.tsx

+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const FilesUiConfigAPIRows = [
+  {
+    name: "success",
+    type: <TypeHighlight np>boolean</TypeHighlight>,
+    default: <TypeHighlight np></TypeHighlight>,
+    description: <>If true, it means that the request was successful.</>,
+  },
+  {
+    name: "message",
+    type: <TypeHighlight np>string</TypeHighlight>,
+    default: <TypeHighlight np></TypeHighlight>,
+    description: <>A message that describes the result of the request.</>,
+  },
+  {
+    name: "payload",
+    type: <TypeHighlight np>Object</TypeHighlight>,
+    default: <TypeHighlight np></TypeHighlight>,
+    description: <>The response of the server.</>,
+  },
+];

src/data/IconsMapAPIRows.tsx

+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const IconsMapAPIRows = [
+  {
+    name: "success",
+    type: <TypeHighlight np>boolean</TypeHighlight>,
+    default: <TypeHighlight np></TypeHighlight>,
+    description: <>If true, it means that the request was successful.</>,
+  },
+  
+];

src/files-ui/FilesUiProvider/FilesUIConfig.ts

+import { IconsMap, Localization } from "../core";
+
+export type FilesUIConfig = {
+    /**
+     * If true, dark mode colors are used in FileMosaic and FIleCard components.
+     */
+    darkMode?: boolean;
+    /**
+     * Set of icons to override the existing ones
+     */
+    icons?: IconsSet;
+    /**
+     * The language in which text labels are shown.
+     * @default "EN-en"
+     */
+    localization?: Localization;
+    //fontFamily?:string;
+}
+
+export type IconsSet = IconsMap;
\ No newline at end of file

src/files-ui/FilesUiProvider/FilesUiContext.ts

+import React from "react";
+import { FilesUIConfig } from "./FilesUIConfig";
+
+export const FilesUiContext: React.Context<FilesUIConfig>
+    = React.createContext({});
\ No newline at end of file

src/files-ui/FilesUiProvider/FilesUiProvider.tsx

+import * as React from "react";
+import { FilesUIConfig } from "./FilesUIConfig";
+import { FilesUiContext } from "./FilesUiContext";
+
+interface FilesUiProviderProps {
+  children: React.ReactNode;
+  config?: FilesUIConfig;
+}
+const FilesUiProvider: React.FC<FilesUiProviderProps> = (
+  props: FilesUiProviderProps
+) => {
+  const { children, config } = props;
+  return (
+    <FilesUiContext.Provider value={config || {}}>
+      {children}
+    </FilesUiContext.Provider>
+  );
+};
+export default FilesUiProvider;

src/files-ui/FilesUiProvider/index.ts

+export { default as FilesUiProvider } from "./FilesUiProvider";
+export * from "./FilesUiProvider";
+
+export type { IconsSet, FilesUIConfig } from "./FilesUIConfig";
\ No newline at end of file

src/files-ui/components/download-hidden/DownloadHidden.tsx

 import * as React from "react";
-import { handleClickUtil } from "../../core";
+//import { handleClickUtil } from "../../core";
 export type DownloadHiddenProps = {
   downloadUrl?: string;
   anchorRef: React.RefObject<HTMLAnchorElement>;
@@ -23,6 +23,7 @@ const DownloadHidden: React.FC<DownloadHiddenProps> = (
         href={downloadUrl}
         download={fileName}
         hidden
+        rel={"noopener noreferrer"}
         onClick={handleClick}
       >
         download_file

src/files-ui/components/dropzone/DropzoneRipple.scss

 // RIPPLE
-.dropzone-ui-base-ripple-absolute {
+.filesui-base-ripple-absolute {
   position: absolute;
   display: none;
   width: 100%;
@@ -9,7 +9,7 @@
   box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
-  .dropzone-ui-base-ripple-relative {
+  .filesui-base-ripple-relative {
     width: 100%;
     height: 100%;
     position: relative;

src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss

-.dropzone-ui-disabled-root{
+.filesui-disabled-root{
     position: absolute;
     width: 100%;
     height: 100%;

src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx

 import * as React from "react";
-import { addClassName, handleClickUtil, handleDragUtil, handleDropUtil } from "../../../../core";
+import {
+  addClassName,
+  //handleClickUtil,
+  //handleDragUtil,
+  //handleDropUtil,
+} from "../../../../core";
+import { handleClickUtil, handleDragUtil, handleDropUtil } from "../../../../files-ui-react/utils";
 import "./DropzoneDisabledLayer.scss";
 export declare type DropzoneDisabledLayerProps = {
   open?: boolean;
@@ -28,8 +34,11 @@ const DropzoneDisabledLayer: React.FC<DropzoneDisabledLayerProps> = (
     evt: React.DragEvent<HTMLDivElement>
   ): Promise<void> => {
     handleDropUtil(evt);
-  }
-  const finalDisabledLayerClassName:string = addClassName("dropzone-ui-disabled-root",className);
+  };
+  const finalDisabledLayerClassName: string = addClassName(
+    "filesui-disabled-root",
+    className
+  );
   if (open) {
     return (
       <div

src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx

@@ -3,10 +3,11 @@ import {
   addClassName,
   DropzoneLocalizerSelector,
   FunctionLabel,
-  handleClickUtil,
+  //handleClickUtil,
   Localization,
   LocalLabels,
 } from "../../../../core";
+import { handleClickUtil } from "../../../../files-ui-react/utils";
 import { FooterConfig } from "../dropzone/DropzoneProps";
 
 export interface DropzoneFooterProps extends FooterConfig {
@@ -48,7 +49,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
   }
   const finalClassName = resetStyles
     ? className
-    : addClassName("files-ui-footer" + " " + firstClassName, className);
+    : addClassName(`files-ui-footer ${firstClassName}`, className);
 
   const finalStyle = resetStyles
     ? style