[FEATURE]: Add localization feature. Now supporting english and spanish

Author: JinSSJ3

CHANGELOG.md

@@ -3,23 +3,33 @@
 <p align="center">
 <img align="center" height="120" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">
 
-<h1 align="center">  Dropzone UI</h1>
+<h1 align="center">  Dropzone-UI</h1>
 
 </p>
 
 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.
 
+<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)
+
+### Features
+
+- Improve Readme.md
+- Add localization for spanish and english
+- Add Readme_es.md file
+
 <a name="1.2.10"></a>
 
-## [1.2.10](https://github.com/glicht/npm-get-version/compare/v1.0.1...v1.0.2) (2021-09-21)
+## [1.2.10](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-21)
 
 ### Features
 
 - Improve Readme.md
 - Add quiality badge
 <a name="1.2.9"></a>
 
-## [1.2.9](https://github.com/glicht/npm-get-version/compare/v1.0.1...v1.0.2) (2021-09-12)
+## [1.2.9](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-12)
 
 ### Features
 
@@ -31,7 +41,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 <a name="1.1.28"></a>
 
-## [1.1.28](https://github.com/glicht/npm-get-version/compare/v1.0.1...v1.0.2) (2021-09-09)
+## [1.1.28](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-09)
 
 ### Features
 
@@ -40,7 +50,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 <a name="1.0.28"></a>
 
-## [1.0.28](https://github.com/glicht/npm-get-version/compare/v1.0.1...v1.0.2) (2021-09-08)
+## [1.0.28](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.1...v1.0.2) (2021-09-08)
 
 ### Features
 
@@ -53,12 +63,12 @@ All notable changes to this project will be documented in this file. See [standa
 
 <a name="1.0.1"></a>
 
-## [1.0.1](https://github.com/glicht/npm-get-version/compare/v1.0.0...v1.0.1) (2021-08-28)
+## [1.0.1](https://github.com/dropzone-ui/dropzone-ui/compare/v1.0.0...v1.0.1) (2021-08-28)
 
 ### Features
 
 - README improvements
 
 <a name="1.0.0"></a>
 
-# [1.0.0](https://github.com/glicht/npm-get-version/compare/v0.1.2...v1.0.0) (2021-08-28)
+# [1.0.0](https://github.com/dropzone-ui/dropzone-ui/compare/v0.1.2...v1.0.0) (2021-08-28)

README.md

@@ -1,12 +1,15 @@
 :rocket: [Spanish](./README_ES.md)
 
 <p align="center">
-<img align="center" height="150" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">
+<img align="center" height="128" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">
 
 <h1 align="center">  Dropzone-UI </h1>
 
+[React](https://reactjs.org/) set of components for managing file uploads, image previews on user inteface. Components were made inspired on other existing libraries (however, those are **not** dependencies because the idea is to take many good related libraries only as **reference** and **create** something **new** ). Google's Material design principles were also considered in development. Indeed, icons come from [Material design icons](https://fonts.google.com/icons).
+
 </p>
 
+
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/dropzone-ui/blob/HEAD/LICENSE)
 [![npm latest package](https://img.shields.io/npm/v/dropzone-ui.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/dropzone-ui)
 [![dependencies Status](https://status.david-dm.org/gh/dropzone-ui/dropzone-ui.svg)](https://david-dm.org/dropzone-ui/dropzone-ui)
@@ -18,10 +21,6 @@
 [![install size](https://packagephobia.com/badge?p=dropzone-ui)](https://packagephobia.com/result?p=dropzone-ui)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-## Description
-
-Dropzone UI is a mini set of [React](https://reactjs.org/) components for managing file uploads, image previews and all with **little** code needed. Components were made inspired on other existing libraries (however, those are **not** dependencies in order avoid increasing the package size and the idea is to **create** something **new** having many good existing libraries only as **reference**). Also, google's Material design principles were considered in development. Indeed, all the icons involved are material design icons.
-
 ## Sample result:
 
 On `Drag`, `Drop` and `Upload`. (also changing view mode from `grid` to `list`).
@@ -37,7 +36,7 @@ Did you like the project? Don't forget to give us a :star: star on :octocat: [gi
 
 dropzone-ui is available as an [npm package](https://www.npmjs.com/package/dropzone-ui).
 
-For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be installed together
+For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be installed in conjuction with `dropzone-ui`.
 
 ```sh
 // with npm

README_ES.md

@@ -1,4 +1,4 @@
-:rocket:[English](./README.md)
+:rocket:[English](https://github.com/dropzone-ui/dropzone-ui#readme)
 
 <p align="center">
 <img align="center" height="128" src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png" alt="dropone-ui-logo">
@@ -7,6 +7,8 @@
 
 </p>
 
+Dropzone UI es un pequeño set de componentes [React](https://reactjs.org/) para manejar cargas de archivo, vista previa de imágenes en la interfaz gráfica. Componentes fueron hechos inspirados en otras librerias existentes (sin embargo, estas **no** son dependencias , ya que la idea es tomar como **referencia** varias librerias buenas y **crear** algo **nuevo**). Pricipios de Material Design de Google fueron considerados en el desarrollo. De hecho, todos los iconos son [Material design icons](https://fonts.google.com/icons).
+
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/dropzone-ui/blob/HEAD/LICENSE)
 [![npm latest package](https://img.shields.io/npm/v/dropzone-ui.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/dropzone-ui)
 [![dependencies Status](https://status.david-dm.org/gh/dropzone-ui/dropzone-ui.svg)](https://david-dm.org/dropzone-ui/dropzone-ui)
@@ -18,9 +20,6 @@
 [![install size](https://packagephobia.com/badge?p=dropzone-ui)](https://packagephobia.com/result?p=dropzone-ui)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-
-Dropzone UI es un pequeño set de componentes [React](https://reactjs.org/) para manejar cargas de archivo, vista previa de imágenes y todo con **poco** codigo requerido. Componentes fueron hechos inspirados en otras librerias existentes (sin embargo, estas **no** son dependencas para evitar el incremento del tamaño del paquete y la idea es **crear** algo **nuevo** teniendo solo como **referencia** varias librerias buenas ). Además, tambien se siguen los pricipios de Material Design de Google. De hecho, todos los iconos utilizados son iconos de material design.
-
 ## Ejemplo de resultado:
 
 En operaciones `Drag`, `Drop` y `Upload`. (también cambiando el modo de vista de `grid` a `list`).
@@ -32,19 +31,18 @@ En operaciones `Drag`, `Drop` y `Upload`. (también cambiando el modo de vista d
 
 </p>
 
-## Installacion
-
-dropzone-ui is available as an [npm package](https://www.npmjs.com/package/dropzone-ui).
+## Installación
 
-For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be installed together
+dropzone-ui está disponible como un [paquete npm](https://www.npmjs.com/package/dropzone-ui).
+Para subir archivos a un servidor, la dependencia peer [axios](https://www.npmjs.com/package/axios) debe ser instalada en conjunto con `dropzone-ui`
 
 ```sh
-// with npm
+// con npm
 npm i dropzone-ui axios
 ```
 
 ```sh
-// with yarn
+// con yarn
 yarn add dropzone-ui axios
 ```
 
@@ -73,7 +71,7 @@ Function App() {
 ReactDOM.render(<App />, document.querySelector("#app"));
 ```
 
-Si, esto es todo lo que necesitas para iniciarte en estos demos interactivos:
+Si, esto es todo lo que necesitas para iniciarte como puedes observar en estos demos interactivos:
 | Nombre | Enlace a Codesandbox |
 |-|-|
 |Dropzone Ejemplo básico|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-3j01v?file=/src/index.js)|
@@ -83,10 +81,10 @@ Si, esto es todo lo que necesitas para iniciarte en estos demos interactivos:
 |InputFileButton & FileItemContainer|[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inputbutton-example-poqsn?file=/src/App.js)|
 |Ejemplo de servidor de carga de archivos | https://github.com/dropzone-ui/file-upload-server-side/tree/main/expressjs |
 
-# API de los Componentes de Dropzone UI
+# API de los Componentes Dropzone-UI
 
 - [\<Dropzone/>](#dropzone-api)
-- [\<FileItem />](#fileitem-api)
+- [\<FileItem />](#fileitem-api) 
 - [\<FullScreenPreview />](#fullscreenpreview-api)
 - [\<FileItemContainer />](#fileitemcontainer-api)
 - [\<InputButton />](#inputbutton-api)

build/components/dropzone/components/Dropzone/DropzoneProps.d.ts

@@ -1,4 +1,5 @@
 import { OverridableProps } from "@unlimited-react-components/kernel";
+import { Localization } from "../../../../localization/localization";
 import { FileItemContainerProps } from "../../../file-item/components/FileItemContainer/FileItemContainerProps";
 import { FileValidated } from "../utils/validation.utils";
 export interface DropzoneProps extends OverridableProps {
@@ -139,5 +140,11 @@ export interface DropzoneProps extends OverridableProps {
      * This will make dropzone to simulate a server upload
      */
     fakeUploading?: boolean;
+    /**
+    * language to be used
+    * for now
+    * only English and Spanish is supported
+    */
+    localization?: Localization;
 }
 export declare const DropzonePropsDefault: DropzoneProps;

build/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooterProps.d.ts

@@ -1,4 +1,11 @@
+import { Localization } from "../../../../localization/localization";
 export interface DropzoneFooterProps {
     accept?: string;
     message?: string;
+    /**
+    * language to be used
+    * for now
+    * only English and Spanish is supported
+    */
+    localization?: Localization;
 }

build/components/dropzone/components/DropzoneHeader/DropzoneHeader.d.ts

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Localization } from "../../../../localization/localization";
 import { FileItemContainerProps } from "../../../file-item/components/FileItemContainer/FileItemContainerProps";
 export interface DropzoneHeaderProps {
     maxFileSize?: number;
@@ -10,6 +11,12 @@ export interface DropzoneHeaderProps {
     onChangeView?: Function;
     onUploadStart?: Function;
     urlPresent?: boolean;
+    /**
+     * language to be used
+     * for now
+     * only English and Spanish is supported
+     */
+    localization?: Localization;
 }
 declare const DropzoneHeader: FC<DropzoneHeaderProps>;
 export default DropzoneHeader;

build/components/file-item/components/FileItem/FileItemProps.d.ts

@@ -1,3 +1,4 @@
+import { Localization } from "../../../../localization/localization";
 import { PaperProps } from "../../../paper/components/PaperProps";
 export interface FileItemValidator {
     /**
@@ -76,6 +77,12 @@ export interface FileItemProps extends PaperProps {
      * be presented in the real image resolution
      */
     hd?: boolean | undefined;
+    /**
+     * language to be used
+     * for now
+     * only English and Spanish is supported
+     */
+    localization?: Localization;
 }
 /**
  * Base default props

build/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.d.ts

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Localization } from "../../../../localization/localization";
 declare const FileItemFullInfoLayer: FC<FileItemFullInfoLayerProps>;
 export default FileItemFullInfoLayer;
 export interface FileItemFullInfoLayerProps {
@@ -10,4 +11,10 @@ export interface FileItemFullInfoLayerProps {
     onClose: Function;
     uploadMessage?: string;
     uploadStatus?: undefined | "uploading" | "success" | "error";
+    /**
+     * language to be used
+     * for now
+     * only English and Spanish is supported
+     */
+    localization: Localization;
 }

build/components/file-item/components/FileItemMainLayer/FileItemMainLayer.d.ts

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Localization } from "../../../../localization/localization";
 export interface FileItemMainLayerProps {
     showInfo: boolean;
     onOpenInfo: Function;
@@ -10,6 +11,12 @@ export interface FileItemMainLayerProps {
     isImage: boolean;
     uploadStatus?: undefined | "uploading" | "success" | "error";
     sizeFormatted: string;
+    /**
+     * language to be used
+     * for now
+     * only English and Spanish is supported
+     */
+    localization: Localization;
 }
 declare const FileItemMainLayer: FC<FileItemMainLayerProps>;
 export default FileItemMainLayer;

build/components/file-item/components/FileItemStatus/FileItemStatusProps.d.ts

@@ -1,3 +1,4 @@
+import { Localization } from "../../../../localization/localization";
 export interface FileItemStatusProps {
     /**
      * whether show a valid or rejected message
@@ -12,4 +13,10 @@ export interface FileItemStatusProps {
      * A message for the status item
      */
     message?: string;
+    /**
+    * language to be used
+    * for now
+    * only English and Spanish is supported
+    */
+    localization: Localization;
 }