react-image-turntable - npm Package Compare versions

Comparing version 2.4.1 to 2.5.1

.eslintrc

+{
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
+  "parserOptions": {
+    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module", // Allows for the use of imports
+    "ecmaFeatures": {
+      "jsx": true // Allows for the parsing of JSX
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  },
+  "extends": [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  "rules": {
+    "react/prop-types": 0
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  }
+}

dist/src/Turntable/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./Turntable";
+export * from './Turntable';

dist/src/Turntable/Turntable.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+import React from 'react';
 interface TurntableProps {
@@ -3,0 +3,0 @@ images: string[];

dist/src/Turntable/Turntable.js

@@ -22,7 +22,8 @@ "use strict";
     var _b = useTurntable_1.useTurntable(images), activeImageIndex = _b.activeImageIndex, eventHandlers = _b.eventHandlers;
-    return (react_1.default.createElement("div", __assign({}, eventHandlers, { style: { position: "relative" } }),
-        !images && react_1.default.createElement("h1", null, "Your gonna need to add your images..."),
+    return (react_1.default.createElement("div", __assign({}, eventHandlers, { style: { position: 'relative' } }),
+        !images ||
+            (!images.length && react_1.default.createElement("h1", null, "Your gonna need to add your images...")),
         images &&
             images.map(function (imageSrc, index) { return (react_1.default.createElement("img", { key: imageSrc, src: imageSrc, style: {
-                    position: "absolute",
+                    position: 'absolute',
                     opacity: index === activeImageIndex ? 1 : 0,
@@ -33,4 +34,4 @@ left: 0,
                     bottom: 0,
-                    width: "100%",
+                    width: '100%',
                 }, alt: "turntable image " + index })); })));
 };

dist/src/Turntable/Turntable.test.js

@@ -17,2 +17,6 @@ "use strict";
     });
+    it('should render helper text if no images are passed as props', function () {
+        var getByText = react_2.render(react_1.default.createElement(index_1.Turntable, { images: [] })).getByText;
+        expect(getByText('Your gonna need to add your images...')).toBeTruthy();
+    });
     it('should render 4 images if 4 image URLs are passed as props', function () {
@@ -19,0 +23,0 @@ var container = react_2.render(react_1.default.createElement(index_1.Turntable, { images: mockProps.images })).container;

package.json

 {
   "name": "react-image-turntable",
-  "version": "2.4.1",
+  "version": "2.5.1",
   "homepage": "https://github.com/andrewmcoupe/react-image-turntable",
@@ -9,5 +9,7 @@ "description": "This package aims to display an object in 360 degree perspective with the use of multiple, angled images from around the object itself.",
   "scripts": {
+    "precommit": "npm test",
     "prepublishOnly": "tsc",
     "build": "tsc",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
   },
@@ -33,5 +35,13 @@ "dependencies": {
     "@types/jest": "^25.2.1",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
     "babel-jest": "^25.4.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
     "husky": "^4.2.5",
     "jest": "^25.4.0",
+    "lint-staged": "^10.2.0",
+    "prettier": "^2.0.5",
     "ts-jest": "^25.4.0",
@@ -42,5 +52,10 @@ "typescript": "^3.8.3"
     "hooks": {
-      "pre-commit": "npm test"
+      "pre-commit": "lint-staged && npm run precommit"
     }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "eslint --fix"
+    ]
   }
 }

README.md

@@ -7,2 +7,4 @@ [![andrewmcoupe](https://circleci.com/gh/andrewmcoupe/react-image-turntable.svg?style=shield)](LINK)
 
+### [Try the demo](https://codesandbox.io/s/react-image-turntable-riy93) 👈
+
 This package aims to display an object in 360 degree perspective with the use of multiple, angled images from around the object itself which you need to provide.
@@ -9,0 +11,0 @@

src/Turntable/index.ts

@@ -1,1 +0,1 @@
-export * from "./Turntable";
+export * from './Turntable'

src/Turntable/Turntable.test.tsx

@@ -1,22 +0,28 @@
-import React from 'react';
-import { Turntable } from './index';
-import { render, fireEvent } from '@testing-library/react';
+import React from 'react'
+import { Turntable } from './index'
+import { render } from '@testing-library/react'
 
 const mockProps = {
   images: ['image 1', 'image 2', 'image 3', 'image 4'],
-};
+}
 
 describe('Turntable', () => {
   it('should not render any images if no images are passed as props', () => {
-    const { queryByAltText } = render(<Turntable images={[]} />);
+    const { queryByAltText } = render(<Turntable images={[]} />)
 
-    expect(queryByAltText('turntable image 0')).toBeNull();
-  });
+    expect(queryByAltText('turntable image 0')).toBeNull()
+  })
 
+  it('should render helper text if no images are passed as props', () => {
+    const { getByText } = render(<Turntable images={[]} />)
+
+    expect(getByText('Your gonna need to add your images...')).toBeTruthy()
+  })
+
   it('should render 4 images if 4 image URLs are passed as props', () => {
-    const { container } = render(<Turntable images={mockProps.images} />);
-    const images = container.getElementsByTagName('img');
+    const { container } = render(<Turntable images={mockProps.images} />)
+    const images = container.getElementsByTagName('img')
 
-    expect(images.length).toEqual(mockProps.images.length);
-  });
-});
+    expect(images.length).toEqual(mockProps.images.length)
+  })
+})

src/Turntable/Turntable.tsx

@@ -1,14 +0,15 @@
-import React from "react";
-import { useTurntable } from "../useTurntable";
+import React from 'react'
+import { useTurntable } from '../useTurntable'
 
 interface TurntableProps {
-  images: string[];
+  images: string[]
 }
 
 export const Turntable: React.FC<TurntableProps> = ({ images }) => {
-  const { activeImageIndex, eventHandlers } = useTurntable(images);
+  const { activeImageIndex, eventHandlers } = useTurntable(images)
 
   return (
-    <div {...eventHandlers} style={{ position: "relative" }}>
-      {!images && <h1>Your gonna need to add your images...</h1>}
+    <div {...eventHandlers} style={{ position: 'relative' }}>
+      {!images ||
+        (!images.length && <h1>Your gonna need to add your images...</h1>)}
       {images &&
@@ -20,3 +21,3 @@ images.map((imageSrc, index) => (
             style={{
-              position: "absolute",
+              position: 'absolute',
               opacity: index === activeImageIndex ? 1 : 0,
@@ -27,3 +28,3 @@ left: 0,
               bottom: 0,
-              width: "100%",
+              width: '100%',
             }}
@@ -34,3 +35,3 @@ alt={`turntable image ${index}`}
     </div>
-  );
-};
+  )
+}

tsconfig.json

@@ -10,5 +10,6 @@ {
     "strict": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "noImplicitAny": true
   },
   "exclude": ["node_modules", "dist"]
 }

No alert changes

Improved metrics

Total package byte prevSize

23918

11.33%

Number of package files

26

8.33%

Lines of code

557

2.01%

Number of lines in readme file

39

5.41%

Worsened metrics

Dev dependency count

19

72.73%

No dependency changes