Types, locales packages, readme

packages/@uppy/image-editor/README.md

@@ -1,13 +1,13 @@
-# @uppy/file-input
+# @uppy/image-editor
 
 <img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="120" alt="Uppy logo: a superman puppy in a pink suit" align="right">
 
-<a href="https://www.npmjs.com/package/@uppy/file-input"><img src="https://img.shields.io/npm/v/@uppy/file-input.svg?style=flat-square"></a>
+<a href="https://www.npmjs.com/package/@uppy/image-editor"><img src="https://img.shields.io/npm/v/@uppy/image-editor.svg?style=flat-square"></a>
 <a href="https://travis-ci.org/transloadit/uppy"><img src="https://img.shields.io/travis/transloadit/uppy/master.svg?style=flat-square" alt="Build Status"></a>
 
-FileInput is the most barebones UI for selecting files—it shows a single button that, when clicked, opens up the browser’s file selector.
+Image Editor is an image cropping and editing plugin for Uppy. Designed to be used with the Dashboard UI (can in theory work without it).
 
-**[Read the docs](https://uppy.io/docs/fileinput)** | **[Try it](https://uppy.io/examples/xhrupload/)**
+**[Read the docs](https://uppy.io/docs/image-editor)** | **[Try it](https://uppy.io/examples/dashboard/)**
 
 Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service.
 
@@ -15,18 +15,21 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 
 ```js
 const Uppy = require('@uppy/core')
-const FileInput = require('@uppy/file-input')
+const Dashboard = require('@uppy/dashboard')
+const ImageEditor = require('@uppy/image-editor')
 
 const uppy = Uppy()
-uppy.use(FileInput, {
-  // Options
+uppy.use(Dashboard)
+uppy.use(ImageEditor, { 
+  target: Dashboard,
+  quality: 0.7
 })
 ```
 
 ## Installation
 
 ```bash
-$ npm install @uppy/file-input --save
+$ npm install @uppy/image-editor --save
 ```
 
 We recommend installing from npm and then using a module bundler such as [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/).
@@ -35,7 +38,7 @@ Alternatively, you can also use this plugin in a pre-built bundle from Transload
 
 ## Documentation
 
-Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/fileinput).
+Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/image-editor).
 
 ## License
 

packages/@uppy/image-editor/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "preact": "8.2.9",
-    "cropperjs": "1.5.6"
+    "cropperjs": "1.5.7"
   },
   "peerDependencies": {
     "@uppy/core": "^1.0.0"

packages/@uppy/image-editor/types/index.d.ts

@@ -1,16 +1,15 @@
 import Uppy = require('@uppy/core')
-import FileInputLocale = require('./generatedLocale')
+import ImageEditorLocale = require('./generatedLocale')
 
-declare module FileInput {
-  export interface FileInputOptions extends Uppy.PluginOptions {
-    replaceTargetContent?: boolean
+declare module ImageEditor {
+  export interface ImageEditorOptions extends Uppy.PluginOptions {
+    cropperOptions?: object
+    quality?: number,
     target?: Uppy.PluginTarget
-    pretty?: boolean
-    inputName?: string
-    locale?: FileInputLocale
+    locale?: ImageEditorLocale
   }
 }
 
-declare class FileInput extends Uppy.Plugin<FileInput.FileInputOptions> {}
+declare class ImageEditor extends Uppy.Plugin<ImageEditor.ImageEditorOptions> {}
 
-export = FileInput
+export = ImageEditor

packages/@uppy/image-editor/types/index.test-d.ts

@@ -1 +1 @@
-import FileInput = require('../')
+import ImageEditor = require('../')

packages/@uppy/locales/src/en_US.js

@@ -10,6 +10,9 @@ en_US.strings = {
   addingMoreFiles: 'Adding more files',
   allowAccessDescription: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
   allowAccessTitle: 'Please allow access to your camera',
+  aspectRatioLandscape: 'Crop landscape (16:9)',
+  aspectRatioPortrait: 'Crop portrait (9:16)',
+  aspectRatioSquare: 'Crop square',
   authenticateWith: 'Connect to %{pluginName}',
   authenticateWithTitle: 'Please authenticate with %{pluginName} to select files',
   back: 'Back',
@@ -52,6 +55,7 @@ en_US.strings = {
   },
   filter: 'Filter',
   finishEditingFile: 'Finish editing file',
+  flipHorizontal: 'Flip horizonal',
   folderAdded: {
     '0': 'Added %{smart_count} file from %{folder}',
     '1': 'Added %{smart_count} files from %{folder}'
@@ -88,6 +92,9 @@ en_US.strings = {
   resumeUpload: 'Resume upload',
   retry: 'Retry',
   retryUpload: 'Retry upload',
+  revert: 'Revert',
+  rotate: 'Rotate',
+  save: 'Save',
   saveChanges: 'Save changes',
   selectAllFilesFromFolderNamed: 'Select all files from folder %{name}',
   selectFileNamed: 'Select file %{name}',
@@ -141,7 +148,9 @@ en_US.strings = {
   youHaveToAtLeastSelectX: {
     '0': 'You have to select at least %{smart_count} file',
     '1': 'You have to select at least %{smart_count} files'
-  }
+  },
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out'
 }
 
 en_US.pluralize = function (count) {

packages/uppy/index.js

@@ -42,5 +42,6 @@ exports.Form = require('@uppy/form')
 exports.GoldenRetriever = require('@uppy/golden-retriever')
 exports.ReduxDevTools = require('@uppy/redux-dev-tools')
 exports.ThumbnailGenerator = require('@uppy/thumbnail-generator')
+exports.ImageEditor = require('@uppy/image-editor')
 
 exports.locales = {}

packages/uppy/index.mjs

@@ -40,3 +40,4 @@ export { default as Form } from '@uppy/form'
 export { default as GoldenRetriever } from '@uppy/golden-retriever'
 export { default as ReduxDevTools } from '@uppy/redux-dev-tools'
 export { default as ThumbnailGenerator } from '@uppy/thumbnail-generator'
+export { default as ImageEditor } from '@uppy/image-editor'