Merge pull request #1 from Baspa/typescript

Upgrade to Yarn and Typescript

.eslintrc

@@ -1,11 +1,12 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
   "extends": [
     "standard",
     "standard-react",
     "plugin:prettier/recommended",
     "prettier/standard",
-    "prettier/react"
+    "prettier/react",
+    "plugin:@typescript-eslint/eslint-recommended"
   ],
   "env": {
     "node": true

README.md

@@ -44,25 +44,17 @@ Show images that are transformed using [Uploadcare](https://uploadcare.com/?via=
 
 ```bash
 npm install --save react-uploadcare-transformations
+# or 
+yarn add react-uploadcare-transformations 
 ```
 
 ## Usage
 
-<ol>
-    <li>
-        Include the <code>UCImage</code> component.
-    </li>
-     <li>
-        Get the UUID of the file you want to show.
-    </li>
-     <li>
-        Set your CDN url (optional).
-    </li>
-     <li>
-        Create the transformation URL by adding one or more transformations to the component. Simply add an object with the correct values. You can add as much transformation methods as you want. 
-    </li>
-    <li>The component outputs an image. Want to add your own classes to the image? Simply add the <code>classname</code> property!</li>
-</ol>
+1.  Include the `UCImage` component.
+2.  Get the UUID of the file you want to show.
+3.  Set your CDN url (optional).
+4.  Create the transformation URL by adding one or more transformations to the component. Simply add an object with the correct values. You can add as much transformation methods as you want.
+5.  The component outputs an image. Want to add your own classes to the image? Simply add the `classname` property!
 
 ```jsx
 import React from 'react'
@@ -381,10 +373,6 @@ const = () => {
   )
 }
 ```
-
-
-
-
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

example/README.md

@@ -1,5 +1,5 @@
 This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-It is linked to the react-uploadcare-transformations package in the parent directory for development purposes.
+It is linked to the react-uploadcare-transformations-2 package in the parent directory for development purposes.
 
 You can run `npm install` and then `npm start` to test your package.

example/package.json

@@ -10,9 +10,17 @@
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
+    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "file:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
+    "@types/jest": "file:../node_modules/@types/jest",
+    "@types/node": "file:../node_modules/@types/node",
+    "@types/react": "file:../node_modules/@types/react",
+    "@types/react-dom": "file:../node_modules/@types/react-dom",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
     "react-scripts": "file:../node_modules/react-scripts",
+    "typescript": "file:../node_modules/typescript",
     "react-uploadcare-transformations": "file:.."
   },
   "devDependencies": {
@@ -21,10 +29,16 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

example/src/App.js → example/src/App.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import { UCTransformation } from 'react-uploadcare-transformations'
-import 'react-uploadcare-transformations/dist/index.css'
+import { UCImage } from 'react-uploadcare-transformations'
 
 const App = () => {
   return (
-    <UCTransformation
+    <UCImage
       uuid='83c3bad4-b4bc-4cea-8702-88ee61b0b015'
       preview={{ width: 300, height: 300 }}
       setFill={{ color: 'ff0000' }}
@@ -14,3 +13,4 @@ const App = () => {
 }
 
 export default App
+

example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

example/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

example/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "jsx": "react",
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
+}