Merge pull request #14 from vtex-apps/chore/fix-scripts-and-readme

Chore/fix scripts and readme + Update deps

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- Use `useIntl` hook instead of the HOC.
+
+### Fixed
+- `react-intl` typings that was breaking the build.
+
+### Security
+- Bump dependencies versions.
 
 ## [0.4.2] - 2020-04-14
 

docs/README.md

@@ -89,9 +89,7 @@ Note that the `slider-layout` block, exported from the Slider Layout app, is giv
 
 The block still doesn't have CSS Handles for its specific customization.
 
-<<<<<<< HEAD
 All CSS Handles available for the Image block are the ones available for the `slider-layout` block. Take a look at the Customization section in the [**Slider Layout documentation**](https://vtex.io/docs/app/vtex.slider-layout).
-=======
 Note that the `image-slider` uses our `vtex.slider-layout` app, so all the CSS namespaces defined by it are also available for `image-slider`. Take a look at [Slider-Layout](https://vtex.io/docs/app/vtex.slider-layout).
 
 ## Contributors ✨
@@ -107,5 +105,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-
-> > > > > > > bbf1e2d... Update .all-contributorsrc file

package.json

@@ -3,9 +3,9 @@
   "private": true,
   "license": "UNLICENSED",
   "scripts": {
-    "lint": "cd ./react && yarn lint",
-    "format": "prettier --write \"**/*.{ts,js,json}\"",
+    "lint": "eslint --quiet --fix --ext ts,tsx ./react",
     "test": "cd ./react && yarn test",
+    "format": "prettier --write \"**/*.{ts,js,json}\"",
     "lint:locales": "intl-equalizer",
     "locales:fix": "intl-equalizer --fix",
     "verify": "yarn lint && yarn lint:locales && yarn test"
@@ -26,15 +26,15 @@
     ]
   },
   "devDependencies": {
-    "@vtex/intl-equalizer": "^2.3.0",
-    "@vtex/prettier-config": "^0.1.3",
+    "@vtex/intl-equalizer": "^2.4.2",
+    "@vtex/prettier-config": "^0.1.4",
     "eslint": "^6.8.0",
-    "eslint-config-vtex": "^12.2.1",
-    "eslint-config-vtex-react": "^6.2.1",
-    "husky": "^4.2.0",
-    "lint-staged": "^10.0.2",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.5"
+    "eslint-config-vtex": "^12.3.2",
+    "eslint-config-vtex-react": "^6.3.2",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.1.7",
+    "prettier": "^2.0.5",
+    "typescript": "^3.8.3"
   },
   "version": "0.2.0",
   "intl-equalizer": {

react/Image.tsx

@@ -1,6 +1,6 @@
 import React, { ImgHTMLAttributes, Fragment } from 'react'
 import { useCssHandles } from 'vtex.css-handles'
-import { injectIntl, InjectedIntl, defineMessages } from 'react-intl'
+import { useIntl, defineMessages } from 'react-intl'
 import { formatIOMessage } from 'vtex.native-types'
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
@@ -15,26 +15,26 @@ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     openNewTab: boolean
     title: string
   }
-  intl: InjectedIntl
 }
 
 const CSS_HANDLES = ['imageElement', 'imageElementLink'] as const
 
-const Image: StorefrontFunctionComponent<ImageProps> = ({
-  src,
-  alt = '',
-  maxWidth,
-  maxHeight,
-  minWidth,
-  minHeight,
-  width,
-  height,
-  srcSet = '',
-  sizes = '',
-  link,
-  intl,
-  title,
-}) => {
+function Image(props: ImageProps) {
+  const {
+    src,
+    alt = '',
+    maxWidth,
+    maxHeight,
+    minWidth,
+    minHeight,
+    width,
+    height,
+    srcSet = '',
+    sizes = '',
+    link,
+    title,
+  } = props
+  const intl = useIntl()
   const handles = useCssHandles(CSS_HANDLES, {
     migrationFrom: '[email protected]',
   })
@@ -110,4 +110,4 @@ Image.schema = {
   },
 }
 
-export default injectIntl(Image)
+export default Image

react/ImageSlider.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { defineMessages, injectIntl, InjectedIntlProps } from 'react-intl'
+import { defineMessages, useIntl } from 'react-intl'
 import { SliderLayout } from 'vtex.slider-layout'
 import { useDevice } from 'vtex.device-detector'
 import { formatIOMessage } from 'vtex.native-types'
@@ -40,23 +40,24 @@ function getImageUrl(isMobile: boolean, image: string, mobileImage: string) {
   return !!mobileImage && isMobile ? mobileImage : image
 }
 
-const ImageSlider: StorefrontFunctionComponent<Props & InjectedIntlProps> = ({
-  images,
-  height,
-  sliderLayoutConfig = {
-    itemsPerPage: {
-      desktop: 1,
-      tablet: 1,
-      phone: 1,
+function ImageSlider(props: Props) {
+  const {
+    images,
+    height,
+    sliderLayoutConfig = {
+      itemsPerPage: {
+        desktop: 1,
+        tablet: 1,
+        phone: 1,
+      },
+      infinite: true,
+      showNavigationArrows: 'always',
+      showPaginationDots: 'always',
+      usePagination: true,
     },
-    infinite: true,
-    showNavigationArrows: 'always',
-    showPaginationDots: 'always',
-    usePagination: true,
-  },
-  intl,
-}) => {
+  } = props
   const { isMobile } = useDevice()
+  const intl = useIntl()
 
   return (
     <SliderLayout {...sliderLayoutConfig} totalItems={images.length}>
@@ -195,4 +196,4 @@ ImageSlider.schema = {
   },
 }
 
-export default injectIntl(ImageSlider)
+export default ImageSlider

react/package.json

@@ -4,21 +4,15 @@
     "test": "vtex-test-tools test"
   },
   "dependencies": {
-    "@vtex/css-handles": "^1.1.3",
-    "apollo-client": "^2.6.3",
-    "react": "^16.8.6",
-    "react-apollo": "^2.5.8",
-    "react-intl": "^2.9.0"
+    "react": "^16.13.1",
+    "react-intl": "^4.5.0"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.8.22",
-    "@types/react-intl": "^2.3.18",
-    "@vtex/test-tools": "^0.3.2",
-    "eslint": "5.x",
-    "eslint-config-vtex-react": "^5.x",
-    "prettier": "^1.18.2",
-    "typescript": "3.7.3"
+    "@types/jest": "^25.2.1",
+    "@types/react": "^16.9.34",
+    "@vtex/test-tools": "^3.1.0",
+    "typescript": "3.8.3",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.css-handles"
   },
   "version": "0.4.2"
 }