typescript! allow any valid img prop in images list (#24)

* first pass on typescript, fix some issues

* ⬆️ react-use-gesture 9.0.1

* ⬆️ typescript 4.1.4

* add some time buffer when switching between dragging/panning states, add some displayNames

* fix some types

* ⬆️ [email protected]

* drop prop-types peer dep

* add lint stage to travis

* move test files to typescript, add @types/jest, drop unused fields from images type

* update travis

* add build:types command

* setup jest for typescript

* fix tests

* add some test ids for rtl

* update travis config

* write build script and config to generate type def

* comments

* fix ts error, use touches param from Image onDrag

* move prop comments to ts types

* only emit declaration files when building types

* fix linting, use yarn in travis

* oops

* fix install script

* ⬆️ [email protected]

* ⬆️ @babel/[email protected], @babel/[email protected]

* ⬆️ [email protected]

* ⬆️ example/[email protected], example/[email protected]

* fix paging if holding a drag

* cleanup timer in useDoubleClick hook

* fix active drag check, reset memo translateX if drag disabled

* fix drag, drop memo

* ⬆️ eslint@^7.20.0

* export "ImagesListType", allow any valid img attribute in images array

* allow experimental chrome img attr 'loading'

* update comment

* ⬆️ [email protected]

* ⬆️ @rollup/[email protected], @rollup/[email protected], @typescript-eslint/[email protected], @typescript-eslint/[email protected], [email protected]

* add types field to packages.json

* fix build, use babel instead of typescript rollup plugin

* add browserslist file

Author: tim-soft

.babelrc.js

@@ -1,10 +1,8 @@
 module.exports = {
-    presets: ['@babel/env', '@babel/react'],
+    presets: ['@babel/env', '@babel/react', '@babel/preset-typescript'],
     plugins: [
-        ['babel-plugin-styled-components'],
         ['@babel/plugin-proposal-class-properties'],
         ['@babel/plugin-proposal-object-rest-spread'],
-        ['transform-react-remove-prop-types', { removeImport: true }],
         ['@babel/plugin-transform-runtime', { regenerator: false }],
     ],
 };

.browserslistrc

@@ -0,0 +1 @@
+> 0.5%, last 2 versions, Firefox ESR, not dead

.eslintrc.js

@@ -1,40 +1,80 @@
+/* eslint-disable sort-keys */
 /**
  * Configure ESLint
  *
  * https://eslint.org/docs/user-guide/configuring
  */
 module.exports = {
-    parser: 'babel-eslint',
     env: {
         browser: true,
         es6: true,
         jest: true,
     },
-    extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:import/warnings'],
-    plugins: ['prettier', 'jsx-a11y', 'react-hooks', 'import'],
+    extends: [
+        'plugin:react/recommended',
+        'plugin:import/warnings',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+        'prettier/@typescript-eslint',
+    ],
     globals: {
         document: true,
         window: true,
     },
+    parser: '@typescript-eslint/parser',
     parserOptions: {
         sourceType: 'module',
     },
+    plugins: [
+        'prettier',
+        'jsx-a11y',
+        'react',
+        'react-hooks',
+        'import',
+        'sort-destructure-keys',
+        '@typescript-eslint',
+    ],
+    root: true,
     rules: {
-        'react/forbid-prop-types': 0,
-        'react/jsx-filename-extension': 0,
-        'react/react-in-jsx-scope': 0,
-        'class-methods-use-this': 0,
-        'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
-        'react/no-unused-prop-types': 0,
-        'consistent-return': 0,
-        'jsx-a11y/anchor-is-valid': 0,
-        'prettier/prettier': 'error',
-        'react/destructuring-assignment': 0,
-        'react/static-property-placement': 0,
-        'react/jsx-props-no-spreading': 0,
         // Enforce React Hooks rules
         // https://www.npmjs.com/package/eslint-plugin-react-hooks
         'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'warn',
+
+        'sort-destructure-keys/sort-destructure-keys': [
+            'error',
+            { caseSensitive: false },
+        ],
+        'sort-keys': ['error', 'asc', { caseSensitive: false, natural: false }],
+        'sort-vars': [
+            'error',
+            {
+                ignoreCase: true,
+            },
+        ],
+        'react/jsx-sort-props': ['error', { ignoreCase: true }],
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/member-ordering': [
+            'error',
+            {
+                default: {
+                    order: 'alphabetically',
+                },
+                classes: {
+                    order: 'as-written',
+                },
+            },
+        ],
+    },
+    settings: {
+        'import/resolver': {
+            node: true,
+            'eslint-import-resolver-typescript': true,
+        },
+        react: {
+            version: 'detect',
+        },
     },
 };

.prettierignore

@@ -5,6 +5,7 @@ coverage/**
 example/node_modules/**
 example/.next/**
 yarn.lock
+yarn-error.log
 .editorconfig
 .eslintignore
 .gitignore

.travis.yml

@@ -1,14 +1,19 @@
 language: node_js
 node_js:
-    - 'node'
     - 'lts/*'
 cache:
+    yarn: true
     directories:
-        - ~/.npm
-install: npm install
-script:
-    - npm run test
-    - npm run build
+        - node_modules
+install: yarn install
+jobs:
+    include:
+        - stage: lint
+          script: yarn lint
+        - stage: test
+          script: yarn test
+        - stage: build
+          script: yarn build
 branches:
     only: master
 notifications:

example/components/GalleryLightbox/components/GridImage.js

@@ -1,20 +1,21 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 /**
  * A single image element in a masonry style image grid
  */
-const GridImage = ({ key, index, left, top, photo, onClick }) => {
-    const { height, width, src, alt, caption } = photo;
+const GridImage = ({ index, key, left, onClick, photo, top }) => {
+    const { alt, caption, height, src, width } = photo;
     return (
         <ImageContainer
-            key={`${key}-${index}`}
             index={index}
+            key={`${key}-${index}`}
             onClick={(e) => onClick(e, { index })}
-            style={{ left, top, height, width }}
+            style={{ height, left, top, width }}
         >
             <OverlayContainer>
-                <Image src={src} alt={alt} caption={caption} />
+                <Image alt={alt} caption={caption} src={src} />
                 <Caption>
                     <h4>{caption}</h4>
                 </Caption>
@@ -24,19 +25,19 @@ const GridImage = ({ key, index, left, top, photo, onClick }) => {
 };
 
 GridImage.propTypes = {
-    key: PropTypes.string.isRequired,
+    containerHeight: PropTypes.number.isRequired,
     index: PropTypes.number.isRequired,
+    key: PropTypes.string.isRequired,
     left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    containerHeight: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
     photo: PropTypes.shape({
         alt: PropTypes.string.isRequired,
         caption: PropTypes.string.isRequired,
         height: PropTypes.number.isRequired,
-        width: PropTypes.number.isRequired,
         src: PropTypes.string.isRequired,
+        width: PropTypes.number.isRequired,
     }).isRequired,
+    top: PropTypes.number.isRequired,
 };
 
 export default GridImage;

example/components/GalleryLightbox/components/LightboxArrowButton.js

@@ -1,14 +1,15 @@
 /* eslint-disable no-shadow */
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 import { animated, useTransition } from '@react-spring/web';
 import ButtonControl from './LightboxButtonControl';
 
-const ArrowButton = ({ position, onClick, disabled }) => {
+const ArrowButton = ({ disabled, onClick, position }) => {
     const transitions = useTransition(!disabled, null, {
-        from: { opacity: 0 },
         enter: { opacity: 1 },
+        from: { opacity: 0 },
         leave: { opacity: 0 },
     });
 
@@ -22,7 +23,7 @@ const ArrowButton = ({ position, onClick, disabled }) => {
                         zIndex: 999,
                     }}
                 >
-                    <Button position={position} type="button" onClick={onClick}>
+                    <Button onClick={onClick} position={position} type="button">
                         {position === 'left' && <IoIosArrowBack />}
                         {position === 'right' && <IoIosArrowForward />}
                     </Button>
@@ -32,9 +33,9 @@ const ArrowButton = ({ position, onClick, disabled }) => {
 };
 
 ArrowButton.propTypes = {
-    position: PropTypes.oneOf(['left', 'right']).isRequired,
-    onClick: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    position: PropTypes.oneOf(['left', 'right']).isRequired,
 };
 
 ArrowButton.defaultProps = {

example/components/GalleryLightbox/components/LightboxHeader.js

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { IoIosClose } from 'react-icons/io';
 import Color from 'color';
 import ButtonControl from './LightboxButtonControl';
 
-const LightboxHeader = ({ galleryTitle, images, currentIndex, onClose }) => (
+const LightboxHeader = ({ currentIndex, galleryTitle, images, onClose }) => (
     <TopHeaderBar>
         <LeftSideDescriptionContainer>
             <GalleryHeading>{galleryTitle}</GalleryHeading>
@@ -25,18 +26,18 @@ const LightboxHeader = ({ galleryTitle, images, currentIndex, onClose }) => (
 );
 
 LightboxHeader.propTypes = {
-    onClose: PropTypes.func.isRequired,
-    galleryTitle: PropTypes.string.isRequired,
     currentIndex: PropTypes.number.isRequired,
+    galleryTitle: PropTypes.string.isRequired,
     images: PropTypes.arrayOf(
         PropTypes.shape({
-            src: PropTypes.string.isRequired,
-            caption: PropTypes.string.isRequired,
             alt: PropTypes.string.isRequired,
-            width: PropTypes.number,
+            caption: PropTypes.string.isRequired,
             height: PropTypes.number,
+            src: PropTypes.string.isRequired,
+            width: PropTypes.number,
         })
     ).isRequired,
+    onClose: PropTypes.func.isRequired,
 };
 
 export default LightboxHeader;

example/components/GalleryLightbox/index.js

@@ -15,11 +15,11 @@ class BlogImageGallery extends React.Component {
         imageMasonryDirection: PropTypes.oneOf(['column', 'row']),
         images: PropTypes.arrayOf(
             PropTypes.shape({
-                src: PropTypes.string.isRequired,
-                caption: PropTypes.string.isRequired,
                 alt: PropTypes.string.isRequired,
-                width: PropTypes.number,
+                caption: PropTypes.string.isRequired,
                 height: PropTypes.number,
+                src: PropTypes.string.isRequired,
+                width: PropTypes.number,
             })
         ).isRequired,
     };
@@ -32,9 +32,9 @@ class BlogImageGallery extends React.Component {
         super();
 
         this.state = {
+            clientSide: false,
             currentImageIndex: 0,
             lightboxIsOpen: false,
-            clientSide: false,
         };
     }
 
@@ -93,52 +93,46 @@ class BlogImageGallery extends React.Component {
     };
 
     render() {
-        const { currentImageIndex, lightboxIsOpen, clientSide } = this.state;
-        const { images, galleryTitle, imageMasonryDirection } = this.props;
+        const { clientSide, currentImageIndex, lightboxIsOpen } = this.state;
+        const { galleryTitle, imageMasonryDirection, images } = this.props;
+
+        // remove the height and width props for the lightbox images array
+        const listboxImages = [...images].map((image) => {
+            const newImage = { ...image };
+            delete newImage.height;
+            delete newImage.width;
+
+            return newImage;
+        });
 
         return (
             <GalleryContainer>
                 {clientSide && (
                     <Gallery
                         columns={this.columnConfig}
+                        direction={imageMasonryDirection}
+                        margin={6}
                         onClick={this.openLightbox}
                         photos={images}
-                        margin={6}
-                        direction={imageMasonryDirection}
                         renderImage={GridImage}
                     />
                 )}
                 <StyledLightbox
+                    currentIndex={currentImageIndex}
+                    galleryTitle={galleryTitle}
+                    images={listboxImages}
                     isOpen={lightboxIsOpen}
                     onClose={this.closeLightbox}
-                    onPrev={this.gotoPrevious}
                     onNext={this.gotoNext}
-                    images={images}
-                    currentIndex={currentImageIndex}
-                    galleryTitle={galleryTitle}
-                    singleClickToZoom
+                    onPrev={this.gotoPrevious}
                     renderHeader={() => (
                         <LightboxHeader
+                            currentIndex={currentImageIndex}
                             galleryTitle={galleryTitle}
                             images={images}
-                            currentIndex={currentImageIndex}
                             onClose={this.closeLightbox}
                         />
                     )}
-                    renderPrevButton={({ canPrev }) => (
-                        <LightboxArrowButton
-                            position="left"
-                            onClick={this.gotoPrevious}
-                            disabled={!canPrev}
-                        />
-                    )}
-                    renderNextButton={({ canNext }) => (
-                        <LightboxArrowButton
-                            position="right"
-                            onClick={this.gotoNext}
-                            disabled={!canNext}
-                        />
-                    )}
                     renderImageOverlay={() => (
                         <ImageOverlay>
                             <p>Create your own UI</p>
@@ -147,6 +141,21 @@ class BlogImageGallery extends React.Component {
                             <FiHeart size="3em" />
                         </ImageOverlay>
                     )}
+                    renderNextButton={({ canNext }) => (
+                        <LightboxArrowButton
+                            disabled={!canNext}
+                            onClick={this.gotoNext}
+                            position="right"
+                        />
+                    )}
+                    renderPrevButton={({ canPrev }) => (
+                        <LightboxArrowButton
+                            disabled={!canPrev}
+                            onClick={this.gotoPrevious}
+                            position="left"
+                        />
+                    )}
+                    singleClickToZoom
                 />
             </GalleryContainer>
         );