[WIP][FEAT]: Add Basic avater demo (read only)

src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../../files-ui";
 import AnchorToTab from "../../util-components/AnchorToTab";
 import TypeHighlight from "../../typeHighlight/TypeHighlight";
+import { BIA_URL } from "../../../data/imagesURL";
 
 interface ExtraComponentsMainPageProps {
   darkMode?: boolean;
@@ -23,7 +24,7 @@ const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
   const [isUloading, setIsUploading] = React.useState<boolean>(false);
 
   const [avatarSrc, setAvatarSrc] = React.useState<string | undefined | File>(
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaKgRXvIBtfmfJ49rSmVbPLTgRqPPYjMA_94o0KD4WtHK55Oh_MYbVF8JmPqyddweUx8Y&usqp=CAU"
+    BIA_URL
   );
 
   const handleChange = async (file: File) => {

src/components/demo-components/avatar-demo/BasicDemoAvatar.tsx

 import * as React from "react";
-import { Avatar,ServerResponse, uploadFile } from "../../../files-ui";
-
-const REMOTE =
-  "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+import { Avatar } from "../../../files-ui";
 
 const BasicDemoAvatar = () => {
-  const [avatarSrc, setAvatarSrc] = React.useState<string | undefined>(
-    "https://files-ui-temp-storage.s3.amazonaws.com/3b3b28b79c49f52ef1d89a35337797532b9cf4b5f3a00678e6f775c974dfbd56.png"
-  );
-  const [isUloading, setIsUploading] = React.useState<boolean>(false);
-
-  const handleChange2 = async (file: File) => {
-    const endpoint: string = REMOTE + "/file/28048465460";
-    setIsUploading(true);
-    try {
-      const res: ServerResponse = await uploadFile(file, endpoint);
-      if (!res.success) alert(res.message);
-      else {
-        const { URL } = res.payload;
-        setAvatarSrc(URL);
-      }
-      setIsUploading(false);
-    } catch (error) {
-      console.log("ERROR:", error);
-      alert("ERROR ON UPLOAD");
-      setIsUploading(false);
-    }
-  };
-
   return (
-    <React.Fragment>
-      <Avatar
-        src={avatarSrc}
-        //variant="circle"
-        style={{ width: "280px", height: "280px" }}
-        onChange={handleChange2}
-        isUloading={isUloading}
-      />
-    </React.Fragment>
+    <Avatar
+      readOnly
+      src={
+        "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"
+      }
+      alt="Isabella"
+    />
   );
 };
 export default BasicDemoAvatar;

src/components/demo-components/avatar-demo/CodeDemoAvatarBasic.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoAvatarBasic = () =>{
+    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}
+        />
+      );
+}
+export default CodeDemoAvatarBasic;
+
+
+
+const splittedCodeJS = `<Avatar
+    readOnly
+    src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+    alt="Isabella"
+/>`;
+const completeCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Avatar } from "@files-ui/react";
+const BasicDemoAvatar = () => {
+    return (
+        <Avatar
+            readOnly
+            src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
+            alt="Isabella"
+        />
+    );
+};
+export default BasicDemoAvatar;
+`;
+
+const splittedCodeTS =completeCodeJS;

src/data/imagesURL.js

+export const BIA_URL =
+  "https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg";

src/files-ui/components/avatar/Avatar.tsx

@@ -9,19 +9,23 @@ import InfiniteLoader from "../loader/InfiniteLoader/InfiniteLoader";
 import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
 const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
   const {
-    style,
+    
+    readOnly,
     src,
-    onChange,
     alt,
+    onChange,
     emptyLabel,
     changeLabel,
-    readOnly,
+    
     variant,
     borderRadius,
     uploadingLabel,
     isUloading,
     onError,
+
     smartImgFit,
+
+    style,
   } = mergeProps(props, defaultAvatarProps);
 
   const inputRef: React.RefObject<HTMLInputElement> =

src/files-ui/components/avatar/AvatarProps.ts

@@ -33,7 +33,7 @@ export interface AvatarFullProps extends OverridableComponentProps {
      * If not present, image width will be set to 100%.
      * 
      * If present, image will be analized and displayed according to its heigh and width.
-     * Image width height greater than its width has a "portrait" orientation.
+     * Image with height greater than its width has a "portrait" orientation.
      * Otherwise it has a "landscape" orientation.
      * - If value is "orientation", image will be displayed complete by giving 100% 
      * to width prop if the orientation is "landscape". 

src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx

@@ -26,7 +26,7 @@ interface FileMosaicImageLayerProps {
    * If not present, image width will be set to 100%.
    *
    * If present, image will be analized and displayed according to its heigh and width.
-   * Image width height greater than its width has a "portrait" orientation.
+   * Image with height greater than its width has a "portrait" orientation.
    * Otherwise it has a "landscape" orientation.
    * - If value is "orientation", image will be displayed complete by giving 100%
    * to width prop if the orientation is "landscape".

src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts

@@ -149,7 +149,7 @@ export interface FileMosaicPropsMap extends OverridableComponentProps {
      * If not present, image width will be set to 100%.
      * 
      * If present, image will be analized and displayed according to its heigh and width.
-     * Image width height greater than its width has a "portrait" orientation.
+     * Image with height greater than its width has a "portrait" orientation.
      * Otherwise it has a "landscape" orientation.
      * - If value is "orientation", image will be displayed complete by giving 100% 
      * to width prop if the orientation is "landscape". 

src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts

@@ -35,7 +35,7 @@ export interface ImagePreviewFullProps extends OverridableComponentProps {
      * If not present, image width will be set to 100%.
      * 
      * If present, image will be analized and displayed according to its heigh and width.
-     * Image width height greater than its width has a "portrait" orientation.
+     * Image with height greater than its width has a "portrait" orientation.
      * Otherwise it has a "landscape" orientation.
      * - If value is "orientation", image will be displayed complete by giving 100% 
      * to width prop if the orientation is "landscape". 

src/pages/demo/AvatarDemoPage.tsx

-import { Alert, AlertTitle, Paper } from "@mui/material";
 import * as React from "react";
+import { Paper } from "@mui/material";
 import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
 import BasicDemoAvatar from "../../components/demo-components/avatar-demo/BasicDemoAvatar";
+import CodeDemoAvatarBasic from "../../components/demo-components/avatar-demo/CodeDemoAvatarBasic";
 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";
@@ -13,43 +14,48 @@ import RightMenu from "../../components/RightMenu/RightMenu";
 const rightMenuItems = [
   {
     id: 0,
-    label: "Basic dropzone",
-    referTo: "/components/dropzone#basic-dropzone",
+    label: "Basic avatar",
+    referTo: "/components/avatar#basic-avatar",
   },
   {
     id: 1,
-    label: "Validation",
-    referTo: "/components/dropzone#validation",
+    label: "Picking image file",
+    referTo: "/components/avatar#picking-image-file",
   },
   {
-    id: 1,
-    label: "Custom validation",
-    referTo: "/components/dropzone#custom-validation",
+    id: 3,
+    label: "FallBack",
+    referTo: "/components/avatar#fallback",
   },
   {
-    id: 2,
-    label: "Dropzone events",
-    referTo: "/components/dropzone#dropzone-events",
+    id: 4,
+    label: "Smart image fit",
+    referTo: "/components/filemosaic#smart-image-fit",
   },
   {
-    id: 3,
-    label: "Uploading",
-    referTo: "/components/dropzone#uploading",
+    id: 5,
+    label: "Uploading & loading",
+    referTo: "/components/avatar#uploading",
   },
   {
-    id: 4,
+    id: 6,
+    label: "Variants",
+    referTo: "/components/avatar#variants",
+  },
+  {
+    id: 7,
     label: "Styling",
-    referTo: "/components/dropzone#styling",
+    referTo: "/components/avatar#styling",
   },
   {
-    id: 5,
-    label: "Localization",
-    referTo: "/components/dropzone#localization",
+    id: 8,
+    label: "Labels",
+    referTo: "/components/avatar#labels",
   },
   {
-    id: 6,
-    label: "Dark mode",
-    referTo: "/components/dropzone#dark-mode",
+    id: 9,
+    label: "API",
+    referTo: "/components/filecard#api",
   },
 ];
 
@@ -63,41 +69,17 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
         <MainTitle>Avatar</MainTitle>
 
         <MainParagraph>
-          The "avatar" component is a special file{" "}
-          <CodeHighlight>input</CodeHighlight> designed for setting an image by
-          either dragging and dropping files there or by picking files from a
-          file dialog.
+          This "avatar" component can be used tu just display an image or even
+          can be a special file <CodeHighlight>input</CodeHighlight> designed
+          for setting an image
+          {/* by either dragging and dropping files there or  */}
+          by picking a fils from a file dialog.
         </MainParagraph>
 
-        <DescParagraph>
-          You can consider that this widget is a kind of combination between
-          dropzone and file mosaic components.
-          <ol>
-            <li>The image</li>
-            <li>
-              The file(s) must be validated or not. If validation is required,
-              it can be done by taking into account a predefined set of allowed{" "}
-              <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
-                Common MIME Types
-              </a>
-              ; specifiying the max file size (in bytes) and/or the max amount
-              of files.
-            </li>
-            <li>The file(s) must be uploaded somewhere in the internet.</li>
-          </ol>
-        </DescParagraph>
-        <DescParagraph>
-          It's meant to be an improved version of the "react-dropzone" and
-          "dropzone" packages.
-        </DescParagraph>
-
         <section id="basic-avatar">
-          <SubTitle content="Basic Avatar" />
+          <SubTitle content="Basic Avatar (read only)" />
           <DescParagraph>
-            In this demo we set avatar with the minimun props that allows you to
-            get done fast. These props are{" "}
-            <CodeHighlight>onChange</CodeHighlight> and{" "}
-            <CodeHighlight>value</CodeHighlight>.
+            The most basic use is to set a fixed image from Url.
           </DescParagraph>
           <Paper
             variant="outlined"
@@ -105,34 +87,12 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
               padding: "25px",
               display: "flex",
               width: "100%",
-              alignItems: "center",
+              justifyContent: "center",
             }}
           >
             <BasicDemoAvatar />
           </Paper>
-          {"<BasicDemoAvatarCode/>>"}
-          {/* <BasicDropzoneCodeJS /> */}
-          <Alert severity="info">
-            <AlertTitle> FileMosaic </AlertTitle>
-            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{" "}
-            <a href="/components/filemosaic">FileMosaic</a> page.
-          </Alert>
-          <br />
-          <Alert severity="info">
-            <AlertTitle> ExtFile </AlertTitle>
-            {/*  This is an info alert — <strong>check it out!</strong>
-             */}
-            <strong>ExtFile type </strong>
-            is explicity used in the
-            <strong> Typescript</strong> example and is implicity used in the{" "}
-            <strong>Javascript</strong> example for handling the metadata that
-            makes possible the information exchange between components. For
-            further information about this data type check out the{" "}
-            <a href="/types#ext-file">ExtFile-API. </a>
-          </Alert>
+          <CodeDemoAvatarBasic />
         </section>
       </MainContentContainer>
 

src/pages/demo/FileCardDemoPage.jsx

@@ -328,9 +328,10 @@ const FileCardDemoPage = (props) => {
           <DescParagraph>
             <CodeHighlight>FileCard</CodeHighlight> with
             <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
-            according to its heigh and width. Image width height greater than
-            its width has a "portrait" orientation. Otherwise it has a
-            "landscape" orientation.
+            according to its heigh and width.
+            <br />
+            Image with height greater than its width has a "portrait"
+            orientation. Otherwise it has a "landscape" orientation.
           </DescParagraph>
 
           <DemoContainerFileMosaic>
@@ -410,6 +411,11 @@ const rightMenuItems = [
     label: "Dark mode",
     referTo: "/components/filecard#dark-mode",
   },
+  {
+    id: 7,
+    label: "Smart image fit",
+    referTo: "/components/filemosaic#smart-image-fit",
+  },
   {
     id: 6,
     label: "API",

src/pages/demo/FileMosaicDemoPage.jsx

@@ -343,9 +343,10 @@ const FileMosaicDemoPage = (props) => {
           <DescParagraph>
             <CodeHighlight>FileMosaic</CodeHighlight> with
             <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
-            according to its heigh and width. Image width height greater than
-            its width has a "portrait" orientation. Otherwise it has a
-            "landscape" orientation.
+            according to its heigh and width.
+            <br />
+            Image with height greater than its width has a "portrait"
+            orientation. Otherwise it has a "landscape" orientation.
           </DescParagraph>
 
           <DemoContainerFileMosaic>
@@ -413,6 +414,11 @@ const rightMenuItems = [
     label: "Dark mode",
     referTo: "/components/filemosaic#dark-mode",
   },
+  {
+    id: 7,
+    label: "Smart image fit",
+    referTo: "/components/filemosaic#smart-image-fit",
+  },
   {
     id: 6,
     label: "API",