react-carousel 2.0: Introduce carousel plugins

RobertHebel commented 4 years ago

Deployed to https://beghp.github.io/gh-pages-rc-15

This breaking change introduces carousel plugins a new way to modify and extend react-carousel behavior. You can find more details about this feature in the new section in docs

Proposed v1 -> v2 migration guide

Carousel components have been rewritten to hooks
introduce recoil library to manage carousel state from plugins
introduce yarn workspaces to simplify installing, building & deploying react-carousel
introduce pre-commit and pre-push hooks to verify whether lint and tests commands are passing
Rewrite unit and e2e tests
Introduce prettier

brainhub-devops commented 4 years ago

	Warnings
:warning:	MODULE : node_modules/valid-url \| LICENSE : MIT* \| LICENSE_FILE : node_modules/valid-url/LICENSE \| REPOSITORY: https://github.com/ogt/valid-url \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/trim \| LICENSE : MIT* \| LICENSE_FILE : node_modules/trim/Readme.md \| REPOSITORY: undefined \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/rx-lite \| LICENSE : Apache License, Version 2.0 \| LICENSE_FILE : node_modules/rx-lite/readme.md \| REPOSITORY: https://github.com/Reactive-Extensions/RxJS \| PUBLISHER : Cloud Programmability Team \| EMAIL : undefined \| URL : https://github.com/Reactive-Extensions/RxJS/blob/master/authors.txt
:warning:	MODULE : node_modules/rx-lite-aggregates \| LICENSE : Apache License, Version 2.0 \| LICENSE_FILE : node_modules/rx-lite-aggregates/readme.md \| REPOSITORY: https://github.com/Reactive-Extensions/RxJS \| PUBLISHER : Cloud Programmability Team \| EMAIL : undefined \| URL : https://github.com/Reactive-Extensions/RxJS/blob/master/authors.txt
:warning:	MODULE : node_modules/rc \| LICENSE : (BSD-2-Clause OR MIT OR Apache-2.0) \| LICENSE_FILE : node_modules/rc/LICENSE.APACHE2 \| REPOSITORY: https://github.com/dominictarr/rc \| PUBLISHER : Dominic Tarr \| EMAIL : dominic.tarr@gmail.com \| URL : dominictarr.com
:warning:	MODULE : node_modules/xhr/node_modules/process \| LICENSE : MIT* \| LICENSE_FILE : node_modules/xhr/node_modules/process/LICENSE \| REPOSITORY: https://github.com/shtylman/node-process \| PUBLISHER : Roman Shtylman \| EMAIL : shtylman@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/potrace \| LICENSE : GPL-2.0 \| LICENSE_FILE : node_modules/potrace/LICENSE \| REPOSITORY: https://github.com/tooolbox/node-potrace \| PUBLISHER : mattmc \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/object-component \| LICENSE : MIT* \| LICENSE_FILE : node_modules/object-component/Readme.md \| REPOSITORY: undefined \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/node-forge \| LICENSE : (BSD-3-Clause OR GPL-2.0) \| LICENSE_FILE : node_modules/node-forge/LICENSE \| REPOSITORY: https://github.com/digitalbazaar/forge \| PUBLISHER : Digital Bazaar, Inc. \| EMAIL : support@digitalbazaar.com \| URL : http://digitalbazaar.com/
:warning:	MODULE : node_modules/map-stream \| LICENSE : Custom: https://github.com/dominictarr/event-stream \| LICENSE_FILE : node_modules/map-stream/LICENCE \| REPOSITORY: https://github.com/dominictarr/map-stream \| PUBLISHER : Dominic Tarr \| EMAIL : dominic.tarr@gmail.com \| URL : http://dominictarr.com
:warning:	MODULE : node_modules/jsonify \| LICENSE : Public Domain \| LICENSE_FILE : node_modules/jsonify/README.markdown \| REPOSITORY: https://github.com/substack/jsonify \| PUBLISHER : Douglas Crockford \| EMAIL : undefined \| URL : http://crockford.com/
:warning:	MODULE : node_modules/json-schema \| LICENSE : AFLv2.1,BSD \| LICENSE_FILE : node_modules/json-schema/README.md \| REPOSITORY: https://github.com/kriszyp/json-schema \| PUBLISHER : Kris Zyp \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/indexof \| LICENSE : MIT* \| LICENSE_FILE : node_modules/indexof/Readme.md \| REPOSITORY: undefined \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/glob-to-regexp \| LICENSE : BSD* \| LICENSE_FILE : node_modules/glob-to-regexp/README.md \| REPOSITORY: https://github.com/fitzgen/glob-to-regexp \| PUBLISHER : Nick Fitzgerald \| EMAIL : fitzgen@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/font-awesome \| LICENSE : (OFL-1.1 AND MIT) \| LICENSE_FILE : node_modules/font-awesome/README.md \| REPOSITORY: https://github.com/FortAwesome/Font-Awesome \| PUBLISHER : Dave Gandy \| EMAIL : dave@fontawesome.io \| URL : http://twitter.com/davegandy
:warning:	MODULE : node_modules/expand-template \| LICENSE : (MIT OR WTFPL) \| LICENSE_FILE : node_modules/expand-template/LICENSE \| REPOSITORY: https://github.com/ralphtheninja/expand-template \| PUBLISHER : LM \| EMAIL : ralphtheninja@riseup.net \| URL : undefined
:warning:	MODULE : node_modules/exif-parser \| LICENSE : MIT* \| LICENSE_FILE : node_modules/exif-parser/LICENSE.md \| REPOSITORY: https://github.com/bwindels/exif-parser \| PUBLISHER : Bruno Windels \| EMAIL : bruno.windels@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/css-select/node_modules/domutils \| LICENSE : BSD* \| LICENSE_FILE : node_modules/css-select/node_modules/domutils/LICENSE \| REPOSITORY: https://github.com/FB55/domutils \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/html-dom-parser/node_modules/domhandler \| LICENSE : BSD* \| LICENSE_FILE : node_modules/html-dom-parser/node_modules/domhandler/LICENSE \| REPOSITORY: https://github.com/fb55/DomHandler \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/eslint-plugin-import/node_modules/doctrine \| LICENSE : BSD \| LICENSE_FILE : node_modules/eslint-plugin-import/node_modules/doctrine/LICENSE.BSD \| REPOSITORY: https://github.com/eslint/doctrine \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/css-select \| LICENSE : BSD* \| LICENSE_FILE : node_modules/css-select/LICENSE \| REPOSITORY: https://github.com/fb55/css-select \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/react-live/node_modules/create-react-context \| LICENSE : MIT* \| LICENSE_FILE : node_modules/react-live/node_modules/create-react-context/LICENSE \| REPOSITORY: https://github.com/thejameskyle/create-react-context \| PUBLISHER : James Kyle \| EMAIL : me@thejameskyle.com \| URL : undefined
:warning:	MODULE : node_modules/component-props \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-props/Readme.md \| REPOSITORY: https://github.com/component/props \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/component-inherit \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-inherit/Readme.md \| REPOSITORY: https://github.com/component/inherit \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/component-bind \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-bind/Readme.md \| REPOSITORY: https://github.com/component/bind \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/callsite \| LICENSE : MIT* \| LICENSE_FILE : node_modules/callsite/Readme.md \| REPOSITORY: undefined \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/better-assert \| LICENSE : MIT* \| LICENSE_FILE : node_modules/better-assert/Readme.md \| REPOSITORY: https://github.com/visionmedia/better-assert \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/async-foreach \| LICENSE : MIT* \| LICENSE_FILE : node_modules/async-foreach/LICENSE-MIT \| REPOSITORY: https://github.com/cowboy/javascript-sync-async-foreach \| PUBLISHER : "Cowboy" Ben Alman \| EMAIL : undefined \| URL : http://benalman.com/
:warning:	MODULE : node_modules/@mikaelkristiansson/domready \| LICENSE : MIT* \| LICENSE_FILE : node_modules/@mikaelkristiansson/domready/LICENSE \| REPOSITORY: https://github.com/mikaelkristiansson/domready \| PUBLISHER : Mikael Kristiansson \| EMAIL : undefined \| URL : undefined

Generated by :no_entry_sign: dangerJS against 385bb5668ef85bb2ac56146040e5175c798b28f4

brainhub-devops-2 commented 4 years ago

	Warnings
:warning:	MODULE : node_modules/valid-url \| LICENSE : MIT* \| LICENSE_FILE : node_modules/valid-url/LICENSE \| REPOSITORY: https://github.com/ogt/valid-url \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/trim \| LICENSE : MIT* \| LICENSE_FILE : node_modules/trim/Readme.md \| REPOSITORY: undefined \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/rx-lite \| LICENSE : Apache License, Version 2.0 \| LICENSE_FILE : node_modules/rx-lite/readme.md \| REPOSITORY: https://github.com/Reactive-Extensions/RxJS \| PUBLISHER : Cloud Programmability Team \| EMAIL : undefined \| URL : https://github.com/Reactive-Extensions/RxJS/blob/master/authors.txt
:warning:	MODULE : node_modules/rx-lite-aggregates \| LICENSE : Apache License, Version 2.0 \| LICENSE_FILE : node_modules/rx-lite-aggregates/readme.md \| REPOSITORY: https://github.com/Reactive-Extensions/RxJS \| PUBLISHER : Cloud Programmability Team \| EMAIL : undefined \| URL : https://github.com/Reactive-Extensions/RxJS/blob/master/authors.txt
:warning:	MODULE : node_modules/rc \| LICENSE : (BSD-2-Clause OR MIT OR Apache-2.0) \| LICENSE_FILE : node_modules/rc/LICENSE.APACHE2 \| REPOSITORY: https://github.com/dominictarr/rc \| PUBLISHER : Dominic Tarr \| EMAIL : dominic.tarr@gmail.com \| URL : dominictarr.com
:warning:	MODULE : node_modules/xhr/node_modules/process \| LICENSE : MIT* \| LICENSE_FILE : node_modules/xhr/node_modules/process/LICENSE \| REPOSITORY: https://github.com/shtylman/node-process \| PUBLISHER : Roman Shtylman \| EMAIL : shtylman@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/potrace \| LICENSE : GPL-2.0 \| LICENSE_FILE : node_modules/potrace/LICENSE \| REPOSITORY: https://github.com/tooolbox/node-potrace \| PUBLISHER : mattmc \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/object-component \| LICENSE : MIT* \| LICENSE_FILE : node_modules/object-component/Readme.md \| REPOSITORY: undefined \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/node-forge \| LICENSE : (BSD-3-Clause OR GPL-2.0) \| LICENSE_FILE : node_modules/node-forge/LICENSE \| REPOSITORY: https://github.com/digitalbazaar/forge \| PUBLISHER : Digital Bazaar, Inc. \| EMAIL : support@digitalbazaar.com \| URL : http://digitalbazaar.com/
:warning:	MODULE : node_modules/map-stream \| LICENSE : Custom: https://github.com/dominictarr/event-stream \| LICENSE_FILE : node_modules/map-stream/LICENCE \| REPOSITORY: https://github.com/dominictarr/map-stream \| PUBLISHER : Dominic Tarr \| EMAIL : dominic.tarr@gmail.com \| URL : http://dominictarr.com
:warning:	MODULE : node_modules/jsonify \| LICENSE : Public Domain \| LICENSE_FILE : node_modules/jsonify/README.markdown \| REPOSITORY: https://github.com/substack/jsonify \| PUBLISHER : Douglas Crockford \| EMAIL : undefined \| URL : http://crockford.com/
:warning:	MODULE : node_modules/json-schema \| LICENSE : AFLv2.1,BSD \| LICENSE_FILE : node_modules/json-schema/README.md \| REPOSITORY: https://github.com/kriszyp/json-schema \| PUBLISHER : Kris Zyp \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/indexof \| LICENSE : MIT* \| LICENSE_FILE : node_modules/indexof/Readme.md \| REPOSITORY: undefined \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/glob-to-regexp \| LICENSE : BSD* \| LICENSE_FILE : node_modules/glob-to-regexp/README.md \| REPOSITORY: https://github.com/fitzgen/glob-to-regexp \| PUBLISHER : Nick Fitzgerald \| EMAIL : fitzgen@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/font-awesome \| LICENSE : (OFL-1.1 AND MIT) \| LICENSE_FILE : node_modules/font-awesome/README.md \| REPOSITORY: https://github.com/FortAwesome/Font-Awesome \| PUBLISHER : Dave Gandy \| EMAIL : dave@fontawesome.io \| URL : http://twitter.com/davegandy
:warning:	MODULE : node_modules/expand-template \| LICENSE : (MIT OR WTFPL) \| LICENSE_FILE : node_modules/expand-template/LICENSE \| REPOSITORY: https://github.com/ralphtheninja/expand-template \| PUBLISHER : LM \| EMAIL : ralphtheninja@riseup.net \| URL : undefined
:warning:	MODULE : node_modules/exif-parser \| LICENSE : MIT* \| LICENSE_FILE : node_modules/exif-parser/LICENSE.md \| REPOSITORY: https://github.com/bwindels/exif-parser \| PUBLISHER : Bruno Windels \| EMAIL : bruno.windels@gmail.com \| URL : undefined
:warning:	MODULE : node_modules/css-select/node_modules/domutils \| LICENSE : BSD* \| LICENSE_FILE : node_modules/css-select/node_modules/domutils/LICENSE \| REPOSITORY: https://github.com/FB55/domutils \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/html-dom-parser/node_modules/domhandler \| LICENSE : BSD* \| LICENSE_FILE : node_modules/html-dom-parser/node_modules/domhandler/LICENSE \| REPOSITORY: https://github.com/fb55/DomHandler \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/eslint-plugin-import/node_modules/doctrine \| LICENSE : BSD \| LICENSE_FILE : node_modules/eslint-plugin-import/node_modules/doctrine/LICENSE.BSD \| REPOSITORY: https://github.com/eslint/doctrine \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/css-select \| LICENSE : BSD* \| LICENSE_FILE : node_modules/css-select/LICENSE \| REPOSITORY: https://github.com/fb55/css-select \| PUBLISHER : Felix Boehm \| EMAIL : me@feedic.com \| URL : undefined
:warning:	MODULE : node_modules/react-live/node_modules/create-react-context \| LICENSE : MIT* \| LICENSE_FILE : node_modules/react-live/node_modules/create-react-context/LICENSE \| REPOSITORY: https://github.com/thejameskyle/create-react-context \| PUBLISHER : James Kyle \| EMAIL : me@thejameskyle.com \| URL : undefined
:warning:	MODULE : node_modules/component-props \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-props/Readme.md \| REPOSITORY: https://github.com/component/props \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/component-inherit \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-inherit/Readme.md \| REPOSITORY: https://github.com/component/inherit \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/component-bind \| LICENSE : MIT* \| LICENSE_FILE : node_modules/component-bind/Readme.md \| REPOSITORY: https://github.com/component/bind \| PUBLISHER : undefined \| EMAIL : undefined \| URL : undefined
:warning:	MODULE : node_modules/callsite \| LICENSE : MIT* \| LICENSE_FILE : node_modules/callsite/Readme.md \| REPOSITORY: undefined \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/better-assert \| LICENSE : MIT* \| LICENSE_FILE : node_modules/better-assert/Readme.md \| REPOSITORY: https://github.com/visionmedia/better-assert \| PUBLISHER : TJ Holowaychuk \| EMAIL : tj@vision-media.ca \| URL : undefined
:warning:	MODULE : node_modules/async-foreach \| LICENSE : MIT* \| LICENSE_FILE : node_modules/async-foreach/LICENSE-MIT \| REPOSITORY: https://github.com/cowboy/javascript-sync-async-foreach \| PUBLISHER : "Cowboy" Ben Alman \| EMAIL : undefined \| URL : http://benalman.com/
:warning:	MODULE : node_modules/@mikaelkristiansson/domready \| LICENSE : MIT* \| LICENSE_FILE : node_modules/@mikaelkristiansson/domready/LICENSE \| REPOSITORY: https://github.com/mikaelkristiansson/domready \| PUBLISHER : Mikael Kristiansson \| EMAIL : undefined \| URL : undefined

Generated by :no_entry_sign: dangerJS against 9d997af75217bb1da98c9097329cd4279aa4ca37

piotr-s-brainhub commented 4 years ago

@RobertHebel

could you also add the following decisions to the decision log?

using plugins
using recoil

piotr-s-brainhub commented 4 years ago

On the desktop I've found the following 4 issues:

when I place the cursor over the carousel, it escapes to the right
dots don't work
thumbnails sometimes work and sometimes don't
autoplay doesn't work with rtl

Video: https://recordit.co/pYvV6sJ33O

OS: Mac OS X 10.14.6 Browser: Chrome 83.0.4103.116

piotr-s-brainhub commented 4 years ago

On the mobile, I cannot check placing a cursor as there's no cursor, autoplay with rtl doesn't work as well but both dots and thumbnails work correctly in contrary to the desktop.

On the other hand, I've found one bug on the mobile which doesn't occur on the desktop:

click to change switches the slide immediately (jumps) instead of doing an animation

Video: https://drive.google.com/file/d/1oFDKggdOnVH6f-zDgg8oQlq8LA023DF9/view

OS: iOS 12.4.5 Browser: Safari

piotr-s-brainhub commented 4 years ago

fixed: (desktop) when I place the cursor over the carousel, it escapes to the right
fixed: (desktop) dots don't work
fixed: (desktop) thumbnails sometimes work and sometimes don't
still failing: (desktop & mobile) autoplay doesn't work with rtl
fixed: (mobile) click to change switches the slide immediately (jumps) instead of doing an animation
new bug: (desktop) rtl layout initially jumps with no animation and after a few clicks, it starts animating

piotr-s-brainhub commented 4 years ago

in the following example, rtl infinite autoplay works:

<Carousel
    plugins={[
     'infinite',
     'rtl',
    {
      resolve: autoplayPlugin,
      options: {
        interval: 2000,
        direction: 'left',
      }
    },
  ]}   
  animationSpeed={1000}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

so now everything, besides the issues already existent on v1, works on desktop. However, I found 2 mobile issues (both work on desktop):

rtl autoplay, after moving all the slides, goes back to the opposite direction instead of keeping moving in the same direction
custom arrows are so small that it's extremely difficult to click them

Video: https://drive.google.com/file/d/1dOx29cxFRZvMjcrw5wUoGSxZK9AzjRmx/view

RobertHebel commented 4 years ago

in the following example, rtl infinite autoplay works:
<Carousel
    plugins={[
     'infinite',
     'rtl',
    {
      resolve: autoplayPlugin,
      options: {
        interval: 2000,
        direction: 'left',
      }
    },
  ]}   
  animationSpeed={1000}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>
so now everything, besides the issues already existent on v1, works on desktop. However, I found 2 mobile issues (both work on desktop):

rtl autoplay, after moving all the slides, goes back to the opposite direction instead of keeping moving in the same direction

custom arrows are so small that it's extremely difficult to click them

Video: https://drive.google.com/file/d/1dOx29cxFRZvMjcrw5wUoGSxZK9AzjRmx/view

The first issue isn't a mobile issue but Safari browser issue. It seems swiping left in infinite mode doesn't work. I can also reproduce it on v1. Fixing it is important but shouldn't be a blocker especially it also occurs in v1 now

Custom arrows page is just an example that shows you can create any item for navigation you want. Changing these icons to be more reachable for mobile users would be a nice addition but in beta release, we should focus on urgent issues only

piotr-s-brainhub commented 4 years ago

besides the issues already occurring on v1, I cannot find now any other issues (desktop & mobile)

brainhubeu / react-carousel

react-carousel 2.0: Introduce carousel plugins #586