From a796a5d24ad476657d4121724628b3171a72de9d Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Mon, 27 Mar 2023 21:55:08 -0500
Subject: [PATCH] [REF]: Improve readme and changelog files
---
CHANGELOG.md | 79 +++++++++++++++++++++++++++++++++++-----------------
README.md | 25 ++++++++++-------
2 files changed, 69 insertions(+), 35 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf347dc..ef69622 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,5 @@
# Change Log
+
<a href="https://www.files-ui.com">
<p align="center">
<img src="https://user-images.githubusercontent.com/43678736/226257748-6ba2f8cf-59c5-40d1-a545-a388ddab0f68.png" width="150" height="150" alt="fui-logo"/>
@@ -10,29 +11,57 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-ui/dropzone-ui-react/releases).
-## [1.0.0](https://github.com/files-ui/files-ui-react/releases/tag/v1.0.0) (2023-03-28)
+## [Files-ui (1.0.0) = Dropzone-ui(7.0.0)](https://github.com/files-ui/files-ui-react/releases/tag/v1.0.0) (2023-03-28)
-## 🧪 New features
+## 🧪 New features and 🛠:hammer: Improvements
-- \<FileMosaic/\>: Added `resultOnToolip` prop. This prop provides another hover interaction. If present or `true`, FileItem will show the file validation status and the upload status on a nice tooltip. Otherwhise, if not present, false or undefined, FileItem will display the result on the InfoLayer. Special thanks to @mateusmx, 👠who suggested this feature🧪.
+- [\<FileMosaic/\>](https://www.files-ui.com/components/filemosaic): This new component replaces the old "FileItem" component.
-- \<FileCard/\>: Added `resultOnToolip` prop. This prop provides another hover interaction. If present or `true`, FileItem will show the file validation status and the upload status on a nice tooltip. Otherwhise, if not present, false or undefined, FileItem will display the result on the InfoLayer. Special thanks to @mateusmx, 👠who suggested this feature🧪.
+ - Dark mode: Now this component can be adpted to a dark mode pages with the respective prop.
+ - New icons: Icons for delete were changed.
+ - For uploading, the loader can support to display the current progress.
-- \<Dropzone/\>: Added `disableScroll` prop. This prop disables the css property `overflow: auto` in FileItemContainer inside Dropzone, when it displays the FileItem list inside of it. It also disables the `maxHeight` property and forces the `view` prop to be `"grid"`. The purpose of this special prop is to allow FileItemContainer to grow at the same time FileItem list increases and prevent triggering scrollbars.
+- [\<FileCard/\>](https://www.files-ui.com/components/filecard): This new component is an alternative version of FileMosaic. It displays the file info in a card. Receives the same props as FileMosaic plus `elevation`.
-## 🛠Fixes or improvements
+- [\<FileInputButton/\>](https://www.files-ui.com/components/dropzone): This component replaces the old "InputButton" component. The features are the same as the dropzone except the header and footer related features. That means that this component now can trigger the upload progress.
+ Validation is optional, so non valid files can be uploaded.
-- \<Dropzone/>: Fixed issue in FileItemContainer that made it to overflow the size of Dropzone.
+- [\<Avatar/\>](https://www.files-ui.com/components/avatar): This new component is designed tohandle the selection of images for changing the avatar. Can recieve as source an string url or even a File.
-## 📚 Improved documentation.
+- [\<FullScreen/\>](https://www.files-ui.com/components/fullscreen): The old components "FullScreenImage" and "FullScreenVideo" have been separated into FUllScreen, ImagePreview and VideoPreview.
-- Added documentation about this new features
+ - FullScreen: component for display in a fullscreen backdrop other components.
+ - [ImagePreview](https://www.files-ui.com/api/imagepreview): component is an \<img/\> tag enhanced to allow as `src` a string url or a ile object.
+ - [VideoPreview](https://www.files-ui.com/api/videopreview): component is an \<video/\> tag enhanced to allow as `src` a string url or a ile object.
+
+- [\<Dropzone/\>](https://www.files-ui.com/components/dropzone): This component has been refactored to improve the design, colors and internal components such us headeror footer.
+
+ - Header and footer can be handled through 2 new props: `headerConfig` and `footerConfig`
+ - Action buttons: these are external buttons thta can trigger the default operations in dropzone.
+ - Uploading: The upload operation now is completele handled using pure javascript without external libraries wich means `axios` is no longer a dependency.
+- `smartImgFit`: This is a special prop for FileMosaic, FileCard and Avatar components that makes someway "smart" the components to fit the images depeding on their orientation ("landscape" or protrait). Square images are hardly afected.
+
+ - How it works?
+
+ - If false, image width will be set to 100%.
+ If present, image will be analized and displayed according to its heigh and width. 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". When orientation is "portrait", height prop will be set to 100%. Some images will show an empty space.
+
+ - If value is "center", image will be centered and will not be displayed complete. This the empty space is avoided. This is achived by giving 100% to width prop if the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
+
+- [FilesUIProvider](https://www.files-ui.com/global-config): Localization and darkMode are props that can be set globally by using the React context API. Also the new feature that comes wit this improvement is that now is possible to set custom file icons for every file type.
+
+- [Download Files](https://www.files-ui.com/global-config): Both FileCard and FileMosaic components are able to perform download from same origin or external resources.
+
+## 📚 Improved documentation.
+- The complete documentation can be found in files-ui [web page](https://www.files-ui.com).
<a name="6.4.0"></a>
-## [6.4.0](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.4.0) (2021-12-12)
+## [6.4.0 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.4.0) (2021-12-12)
## 🧪 New features
@@ -51,7 +80,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="6.3.6"></a>
-## [6.3.6](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.3.6) (2021-07-12)
+## [6.3.6 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.3.6) (2021-07-12)
## 🧪 New features
@@ -69,7 +98,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="6.2.0"></a>
-## [6.2.0](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.2.0) (2021-26-11)
+## [6.2.0 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v6.2.0) (2021-26-11)
### New features
@@ -92,7 +121,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="5.5.6"></a>
-## [5.5.6](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v5.3.0) (2021-26-11)
+## [5.5.6 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui-react/releases/tag/v5.3.0) (2021-26-11)
- 🧪 Added Localization support for ✨ **Russian** and **Chinese** ✨.
- 🛠Fixed small bugs.
@@ -100,7 +129,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="3.0.1"></a>
-## [3.0.1](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v3.0.1) (2021-10-11)
+## [3.0.1 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v3.0.1) (2021-10-11)
### Features
@@ -110,14 +139,14 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="3.0.1"></a>
-## [3.0.1](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v3.0.1) (2021-10-11)
+## [3.0.1 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v3.0.1) (2021-10-11)
### Features
- Translation support for `Portuguese`.
<a name="2.8.1"></a>
-## [2.8.1](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v2.1.1) (2021-10-08)
+## [2.8.1 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.8.1...v2.1.1) (2021-10-08)
### Features
@@ -125,7 +154,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="2.1.1"></a>
-## [2.1.1](https://github.com/dropzone-ui/dropzone-ui/compare/v2.1.1...v2.0.0) (2021-10-01)
+## [2.1.1 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.1.1...v2.0.0) (2021-10-01)
### Features
@@ -133,7 +162,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="2.1.0"></a>
-## [2.1.0](https://github.com/dropzone-ui/dropzone-ui/compare/v2.1.0...v2.0.0) (2021-09-28)
+## [2.1.0 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.1.0...v2.0.0) (2021-09-28)
### Features
@@ -144,7 +173,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="2.0.0"></a>
-## [2.0.0](https://github.com/dropzone-ui/dropzone-ui/compare/v2.0.0...v1.2.10) (2021-09-21)
+## [2.0.0 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v2.0.0...v1.2.10) (2021-09-21)
### Features
@@ -154,7 +183,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="1.2.10"></a>
-## [1.2.10](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-21)
+## [1.2.10 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-21)
### Features
@@ -162,7 +191,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
- Add quiality badge
<a name="1.2.9"></a>
-## [1.2.9](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-12)
+## [1.2.9 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-12)
### Features
@@ -172,7 +201,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="1.1.28"></a>
-## [1.1.28](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-09)
+## [1.1.28 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-09)
### Features
@@ -180,7 +209,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="1.0.28"></a>
-## [1.0.28](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-08)
+## [1.0.28 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-08)
### Features
@@ -193,7 +222,7 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="1.0.1"></a>
-## [1.0.1](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.0...v1.0.1) (2021-08-28)
+## [1.0.1 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.0...v1.0.1) (2021-08-28)
### Features
@@ -201,4 +230,4 @@ Thils file also consider all dropzone-ui [releases](https://github.com/dropzone-
<a name="1.0.0"></a>
-# [1.0.0](https://github.com/dropzone-ui/dropzone-ui/compare/v0.1.2...v1.0.0) (2021-08-28)
+# [1.0.0 dropzone-ui](https://github.com/dropzone-ui/dropzone-ui/compare/v0.1.2...v1.0.0) (2021-08-28)
diff --git a/README.md b/README.md
index 673f63a..349d796 100644
--- a/README.md
+++ b/README.md
@@ -66,28 +66,33 @@ ReactDOM.render(<App />, document.querySelector("#app"));
Yes, it's really all you need to get started as you can see in these live and interactive demos:
-- [basic sample](http://localhost:3000/usage#quick-start) :cake:
-- [advanced sample](http://www.files-ui.com/usage#advanced-example) :hammer:
+- [Basic sample](http://localhost:3000/usage#quick-start) :cake:
+- [Advanced sample](http://www.files-ui.com/usage#advanced-example) :hammer:
## More Previews
-### Image full screen preview
-
-<p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066199-fb7a5bd3-9c7e-4f72-b0ef-7f11d236d38e.png" alt="Image full screen preview" width="100%"/></p>
-
-### Video full screen preview
+<details>
+ <summary>Image full screen preview ðŸ–¼ï¸ </summary>
+ <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066199-fb7a5bd3-9c7e-4f72-b0ef-7f11d236d38e.png" alt="Image full screen preview" width="100%"/></p>
+</details>
+<details>
+ <summary>Video full screen preview ðŸŽžï¸ </summary>
<p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066195-62063300-21e0-48fd-80d8-31b566562fde.png" alt="Video full screen preview" width="100%"/></p>
+</details>
-### File Mosaic, FileInputButotn and Avatar preview
-
+<details>
+ <summary>FileCard, FileInputButton and Avatar preview 🎴 </summary>
<p align="center"><img src="https://user-images.githubusercontent.com/43678736/228063876-5b6d00fe-f0ba-453f-a7ce-c44ba7444417.png" alt="Video full screen preview" width="100%"/></p>
-### DarkMode
+</details>
+<details>
+ <summary>DarkMode 🌙 🌞 </summary>
<p align="center"><img src="https://user-images.githubusercontent.com/43678736/228063883-569ca6f1-6959-45bc-9882-2c447162a00f.png" alt="darkmode 1 preview" width="100%"/></p>
<p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066720-e0bb96ac-3c00-4aa6-80b9-e0b4d0c5f947.png" alt="darkmode 2 preview" width="100%"/></p>
+</details>
## License
--
GitLab