rebase pull request #13

Author: rouftom

.eslintignore

@@ -0,0 +1,2 @@
+**/*.js
+/dist

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports =  {
+  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
+  extends:  [
+    'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    //'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    //'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  parserOptions:  {
+    ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
+    sourceType:  'module',  // Allows for the use of imports
+    ecmaFeatures:  {
+      jsx:  true,  // Allows for the parsing of JSX
+    },
+  },
+  rules:  {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+  settings:  {
+    react:  {
+      version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+}

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports =  {
+  semi:  false,
+  trailingComma:  'all',
+  singleQuote:  true,
+  printWidth:  120,
+  tabWidth:  2,
+}

CHANGELOG.md

@@ -6,6 +6,57 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 
+## [1.0.0] - 2023-01-08
+
+### Added
+PlaceholderImageDimension
+- Support of typescript
+  
+- Make `onContextReady` callback optional
+
+- Add prop `showPlaceholderImage` to show or hide the placeholder image
+  
+- Add prop `PlaceholderGridProps` to customize the placeholder `Grid` props
+
+- Add prop `LabelsGridProps` to customize the labels `Grid` props
+
+### Changed
+
+- Typecript definition file has been improved
+
+- Update `@babel/core` dependency to v7.20.12 and `rollup` to v3.9.1
+
+- README.md improved by [@mikocot](https://github.com/mikocot) to show a real usecase of the library
+
+### Removed
+
+- `@mui/styles` has been removed
+
+### Fixed
+
+- Improve typo in README.md
+
+### Deprecated
+
+
+## [0.4.1] - 2023-01-05
+
+### Added
+
+- Add `onFilesChange` callback to return files according to getBase64 prop where input files change
+
+- Add project source map files
+
+### Changed
+
+### Removed
+
+### Fixed
+
+- Improve typo in README.md
+
+### Deprecated
+
 
 ## [0.4.0] - 2022-12-31
 
@@ -22,17 +73,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 
 - Project npm packages updated
-  
-- `containerProps` prop replaced with `ContainerProps`
-
-- `bannerProps` prop replaced with `BannerProps`
 
 ### Removed
 
 ### Fixed
 
 ### Deprecated
 
+- `containerProps` prop replaced with `ContainerProps`
+
+- `bannerProps` prop replaced with `BannerProps`
+
 
 ## [0.3.0] - 2022-11-03
 

README.md

@@ -55,6 +55,9 @@ return (
     onError={handleFileUploadError}
     imageSrc={'path/to/custom/image'}
     BannerProps={{ elevation: 0, variant: "outlined" }}
+    showPlaceholderImage={true}
+    PlaceholderGridProps={{ md: 4 }}
+    LabelsGridProps={{ md: 8 }}
     onContextReady={context => {
       // access to component context here
     }}
@@ -71,34 +74,33 @@ return (
     }}
   />
 )
-
 ```
 
 ## 🎨 Possible application
 
 ```javascript
-import React, { useState } from "react";
-import { createRoot } from "react-dom/client";
-import FileUpload from "react-mui-fileuploader";
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+import FileUpload from "react-mui-fileuploader"
 
 function MuiFileUploader() {
-  const [filesToUpload, setFilesToUpload] = useState([]);
+  const [filesToUpload, setFilesToUpload] = useState([])
 
   const handleFilesChange = (files) => {
     // Update chosen files
-    setFilesToUpload([...files]);
+    setFilesToUpload([ ...files ])
   };
 
   const uploadFiles = () => {
     // Create a form and post it to server
-    let formData = new FormData();
-    filesToUpload.forEach((file) => formData.append("files", file));
+    let formData = new FormData()
+    filesToUpload.forEach((file) => formData.append("files", file))
 
     fetch("/file/upload", {
       method: "POST",
       body: formData
-    });
-  };
+    })
+  }
 
   return (
     <>
@@ -109,11 +111,11 @@ function MuiFileUploader() {
       />
       <button onClick={uploadFiles}>Upload</button>
     </>
-  );
+  )
 }
 
-const root = createRoot(document.getElementById("root"));
-root.render(<MuiFileUploader />);
+const root = createRoot(document.getElementById("root"))
+root.render(<MuiFileUploader />)
 ```
 
 [![Edit react-mui-fileuploader example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/thirsty-visvesvaraya-r9u6ho?fontsize=14&hidenavigation=1&theme=dark)
@@ -126,6 +128,7 @@ root.render(<MuiFileUploader />);
 |    multiFile  	|  `boolean` 	|  `false` 	|  Multifile support. Default value  `true` 	|
 |    title  	|  `string` 	|  `false` 	|  Component title 	|
 |    header  	|  `string` 	|  `false` 	|  Banner component big title 	|
+|    showPlaceholderImage  	|  `boolean` 	|  `false` 	|   Show or hide placeholder image | 
 |    imageSrc  	|  `string` 	|  `false` 	|   Banner image placeholder source path | 
 |    imageSrcAlt  	|  `string` 	|  `false` 	|   Banner image placeholder label	|
 |    leftLabel  	|  `string` 	|  `false` 	|  Banner left label  | 
@@ -146,6 +149,8 @@ root.render(<MuiFileUploader />);
 |    BannerProps  	|  `object` 	|  `false` 	|  Banner props. Only MUI props are accepted 	| 
 |    ContainerProps  	|  `object` 	|  `false` 	|  Container props. Only MUI props are accepted 	| 
 |    PlaceholderImageDimension  	|  `object` 	|  `false` 	|  Dimensions (width and height) of the placeholder image. You can specify them in the properties `xs: {width: 64, height: 64}`, `sm: {width: 64, height: 64}`, `md: {width: 64, height: 64}`, `lg: {width: 64, height: 64}`, etc. |
+|    PlaceholderGridProps  	|  `object` 	|  `false` 	|  Customize the placeholder Grid `xs`, `sm`, `md`, `lg`, `xl` sizes |
+|    LabelsGridProps  	|  `object` 	|  `false` 	|  Customize the labels Grid `xs`, `sm`, `md`, `lg`, `xl` sizes |
 
 ## 😁 Authors
 
@@ -177,7 +182,7 @@ root.render(<MuiFileUploader />);
 
 MIT License
 
-Copyright (c) 2022 rouftom
+Copyright (c) 2023 rouftom
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal