2.0.0 release A.K.A Typescript rewrite (#88)

* Migrate to typescript

* Switch build step to Bili

* Add eslint config

* More cleaning

* Switch doc to TS

* Fix docs typing

* Update dist structure

* Update version

* try fixing codesandbox ci

* Update build package.json file

* extends main tsconfig for docs

.circleci/config.yml

@@ -17,6 +17,10 @@ jobs:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache ## cache both yarn and Cypress
+      - run:
+          name: Run linting
+          command: |
+            yarn lint
       - run:
           name: Run unit tests
           command: |

.codesandbox/ci.json

@@ -1,3 +1,6 @@
 {
-  "sandboxes": ["v69ly910ql"]
+  "sandboxes": ["v69ly910ql"],
+  "publishDirectory": {
+    "react-easy-crop": "dist"
+  }
 }

.eslintignore

@@ -0,0 +1,3 @@
+docs/.cache
+dist
+.yalc

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "prettier/react"
+  ],
+  "plugins": ["@typescript-eslint/eslint-plugin"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/ban-ts-ignore": 0
+  }
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 ricardo.ch
+Copyright (c) 2020 ricardo.ch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

bili.config.ts

@@ -0,0 +1,29 @@
+import { Config } from 'bili'
+
+const config: Config = {
+  input: {
+    index: 'src/index.tsx',
+  },
+  output: {
+    format: ['cjs', 'umd', 'umd-min', 'esm'],
+    moduleName: 'ReactEasyCrop',
+    sourceMap: true,
+  },
+  globals: {
+    react: 'React',
+  },
+  extendConfig(config, { format }) {
+    if (format.startsWith('umd')) {
+      config.output.fileName = 'umd/react-easy-crop[min].js'
+    }
+    if (format === 'esm') {
+      config.output.fileName = '[name].module.js'
+    }
+    return config
+  },
+  env: {
+    NODE_ENV: 'production',
+  },
+}
+
+export default config

docs/gatsby-config.js

@@ -6,6 +6,7 @@ module.exports = {
     author: `@ricardo-ch`,
   },
   plugins: [
+    `gatsby-plugin-typescript`,
     `gatsby-plugin-react-helmet`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,

docs/package.json

@@ -13,9 +13,8 @@
     "deploy": "yarn build --prefix-paths && gh-pages -d public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "@material-ui/lab": "^3.0.0-alpha.30",
+    "@material-ui/core": "^4.8.2",
+    "@material-ui/icons": "^4.5.1",
     "gatsby": "^2.2.5",
     "gatsby-image": "^2.0.34",
     "gatsby-plugin-manifest": "^2.0.24",
@@ -24,18 +23,23 @@
     "gatsby-plugin-prefetch-google-fonts": "^1.4.0",
     "gatsby-plugin-react-helmet": "^3.0.10",
     "gatsby-plugin-sharp": "^2.0.30",
+    "gatsby-plugin-typescript": "^2.1.23",
     "gatsby-source-filesystem": "^2.0.27",
     "gatsby-transformer-sharp": "^2.1.17",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-easy-crop": "^1.16.1",
+    "react-easy-crop": "2.0.0-beta.1",
     "react-helmet": "^5.2.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ricardo-ch/react-easy-crop"
   },
   "devDependencies": {
+    "@types/node": "^13.1.2",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-helmet": "^5.0.14",
     "gh-pages": "^2.0.1"
   }
 }

docs/src/components/CodeSandboxes/index.js → docs/src/components/CodeSandboxes/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
+import FilledInput from '@material-ui/core/FilledInput'
 import FormControl from '@material-ui/core/FormControl'
 import InputLabel from '@material-ui/core/InputLabel'
 import MenuItem from '@material-ui/core/MenuItem'
-import FilledInput from '@material-ui/core/FilledInput'
 import Select from '@material-ui/core/Select'
-import { withStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import React, { useState } from 'react'
 
 const sandboxes = [
   { id: 'v69ly910ql', title: 'Basic with hooks' },
@@ -14,22 +14,25 @@ const sandboxes = [
   { id: '53w20p2o3n', title: 'With round crop area and no grid' },
 ]
 
-const styles = theme => ({
-  formControl: {
-    marginBottom: theme.spacing.unit,
-    minWidth: 280,
-  },
-})
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    formControl: {
+      marginBottom: theme.spacing(1),
+      minWidth: 280,
+    },
+  })
+)
 
-const CodeSandboxes = ({ classes }) => {
+const CodeSandboxes: React.FC = props => {
+  const classes = useStyles(props)
   const [sandbox, setSandbox] = useState('v69ly910ql')
   return (
     <div>
       <FormControl variant="filled" className={classes.formControl}>
         <InputLabel htmlFor="sandbox-example">Example</InputLabel>
         <Select
           value={sandbox}
-          onChange={e => setSandbox(e.target.value)}
+          onChange={e => setSandbox(String(e.target.value))}
           input={<FilledInput name="example" id="sandbox-example" />}
         >
           {sandboxes.map(s => (
@@ -57,4 +60,4 @@ const CodeSandboxes = ({ classes }) => {
   )
 }
 
-export default withStyles(styles)(CodeSandboxes)
+export default CodeSandboxes

docs/src/components/Demo/ImgDialog/index.tsx

@@ -0,0 +1,64 @@
+import AppBar from '@material-ui/core/AppBar'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import Slide from '@material-ui/core/Slide'
+import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core/styles'
+import Toolbar from '@material-ui/core/Toolbar'
+import Typography from '@material-ui/core/Typography'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+import CloseIcon from '@material-ui/icons/Close'
+import React from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    appBar: {
+      position: 'relative',
+    },
+    flex: {
+      flex: 1,
+    },
+    img: {
+      display: 'block',
+      margin: 'auto',
+      maxWidth: '100%',
+      maxHeight: '100%',
+    },
+  })
+)
+
+type Props = {
+  img: HTMLImageElement['src'] | null
+  onClose: () => void
+}
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />
+}
+
+const ImgDialog = ({ img, onClose, ...rest }: Props) => {
+  const classes = useStyles(rest)
+  const theme = useTheme()
+  const isAtLeastXs = useMediaQuery(theme.breakpoints.up('xs'))
+  return (
+    <Dialog
+      fullScreen={!isAtLeastXs}
+      open={!!img}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <AppBar className={classes.appBar}>
+        <Toolbar>
+          <IconButton color="inherit" onClick={onClose} aria-label="Close">
+            <CloseIcon />
+          </IconButton>
+          <Typography variant="h6" color="inherit" className={classes.flex}>
+            Cropped image
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <img src={img} alt="Cropped" className={classes.img} />
+    </Dialog>
+  )
+}
+
+export default ImgDialog

docs/src/components/Demo/cropImage.js → docs/src/components/Demo/cropImage.ts

@@ -1,8 +1,10 @@
-function getRadianAngle(degreeValue) {
+import { Area } from 'react-easy-crop/dist/types'
+
+function getRadianAngle(degreeValue: number) {
   return (degreeValue * Math.PI) / 180
 }
 
-export const createImage = url =>
+export const createImage = (url: string): Promise<HTMLImageElement> =>
   new Promise((resolve, reject) => {
     const image = new Image()
     image.addEventListener('load', () => resolve(image))
@@ -13,11 +15,12 @@ export const createImage = url =>
 
 /**
  * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
- * @param {File} image - Image File url
- * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop
- * @param {number} rotation - optional rotation parameter
  */
-export default async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {
+export default async function getCroppedImg(
+  imageSrc: string,
+  pixelCrop: Area,
+  rotation = 0
+): Promise<string> {
   const image = await createImage(imageSrc)
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')