react-image-turntable - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0

package.json

 {
   "name": "react-image-turntable",
   "description": "Display a set of images as a draggable 360 degree turntable.",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0",
   "repository": {
@@ -19,2 +19,15 @@ "type": "git",
   ],
+  "scripts": {
+    "bootstrap": "corepack disable && corepack enable && pnpm i --frozen-lockfile",
+    "build": "tsup",
+    "dev": "pnpm -r --stream run start",
+    "dx": "npm run bootstrap && pnpm exec husky install",
+    "lint": "eslint . && prettier --check .",
+    "prepare": "husky install",
+    "release": "pnpm run build && np --no-tests --no-cleanup",
+    "size": "size-limit",
+    "start": "tsup --watch",
+    "test": "rm -rf {.nyc_output,coverage} && playwright test && pnpm nyc report --reporter=lcov",
+    "test:debug": "env PWDEBUG=1 NODE_ENV=test playwright test && pnpm nyc report --reporter=lcov"
+  },
   "husky": {
@@ -32,2 +45,5 @@ "hooks": {
   },
+  "np": {
+    "pnpm": true
+  },
   "prettier": {
@@ -42,3 +58,3 @@ "printWidth": 100,
       "path": "dist/index.mjs",
-      "limit": "2 KB"
+      "limit": "1.25 KB"
     }
@@ -55,6 +71,6 @@ ],
     "@types/jest-axe": "^3.5.3",
-    "@types/react": "^18.0.6",
-    "@types/react-dom": "^18.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
     "axe-core": "^4.4.1",
@@ -66,5 +82,6 @@ "axe-playwright": "^1.1.11",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.4.0",
+    "lint-staged": "^12.4.1",
+    "np": "^7.6.1",
     "nyc": "^15.1.0",
@@ -74,23 +91,9 @@ "playwright-core": "^1.21.1",
     "pretty-quick": "^3.1.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "size-limit": "^7.0.8",
     "tslib": "^2.4.0",
     "tsup": "^5.12.6",
-    "typescript": "^4.6.3"
-  },
-  "scripts": {
-    "bootstrap": "corepack disable && corepack enable && pnpm i --frozen-lockfile",
-    "dev": "pnpm -r --stream run start",
-    "dx": "npm run bootstrap && pnpm exec husky install",
-    "start": "tsup --watch",
-    "build": "tsup",
-    "test": "rm -rf {.nyc_output,coverage} && playwright test && pnpm nyc report --reporter=lcov",
-    "test:debug": "env PWDEBUG=1 NODE_ENV=test playwright test && pnpm nyc report --reporter=lcov",
-    "lint": "eslint . && prettier --check .",
-    "prepublish": "pnpm run build",
-    "size": "size-limit",
-    "analyze": "size-limit --why"
-  },
-  "readme": "<div align=\"center\">\n\n# React Image Turntable\n\nDisplay a set of images as a draggable 360 degree turntable.\n\n### [👉 &nbsp; Try the demo &nbsp;👈](https://githubbox.com/nerdyman/react-image-turntable/tree/main/example)\n\n<br />\n\n<a href=\"https://npmjs.com/package/react-image-turntable\">\n  <img src=\"https://img.shields.io/npm/v/react-image-turntable.svg?label=\" alt=\"NPM package\" />\n</a>\n<a href=\"https://github.com/nerdyman/react-image-turntable/blob/main/LICENSE\">\n  <img src=\"https://img.shields.io/npm/l/react-image-turntable.svg?label=\" alt=\"License MIT\" />\n</a>\n<a href=\"https://github.com/nerdyman/react-image-turntable/actions?query=workflow%3Aci\">\n  <img src=\"https://img.shields.io/github/workflow/status/nerdyman/react-image-turntable/ci?label=\" alt=\"CI Status\" />\n</a>\n\n</div>\n\n## Features\n\n- Accessible\n- Responsive & fluid with intrinsic sizing\n- Supports keyboard navigation\n- Teeny Tiny (less than 1kb gzipped)\n- Zero dependencies\n- Type safe\n\n## Install\n\n```sh\nnpm i react-image-turntable\n# Or\nyarn add react-image-turntable\n# Or\npnpm i react-image-turntable\n```\n\n## Usage\n\n### Props\n\n| Props                 | Type       | Required | Default Value | Description                                                                  |\n| --------------------- | :--------- | :------: | :------------ | :--------------------------------------------------------------------------- |\n| `images`              | `string[]` |    ✓     | `undefined`   | List of image `src` attributes.                                              |\n| `initialImageIndex`   | `number`   |          | `0`           | Index of image to show first.                                                |\n| `movementSensitivity` | `number`   |          | `20`          | The amount a \"drag\" has to move before an image changes to next or previous. |\n\n### Example\n\n```ts\nimport React from 'react';\nimport { ReactImageTurntable } from 'react-image-turntable';\n\nconst images = [\n  'https://via.placeholder.com/1200x800?text=1',\n  'https://via.placeholder.com/1200x800?text=2',\n  'https://via.placeholder.com/1200x800?text=3',\n];\n\nexport const Turntable = () => <ReactImageTurntable images={images} />;\n```\n\nAlso see the [example code](./example) in the repo.\n\n### Custom Styling\n\nThe library uses the first image passed to intrinsically size the component, it also exports following\n`className`s to apply custom styles when needed.\n\n| `className`                | Purpose                                                              |\n| :------------------------- | :------------------------------------------------------------------- |\n| `CLASS_NAME_IMG`           | Base class for images.                                               |\n| `CLASS_NAME_IMG_PRIMARY`   | Class of first rendered image (sets the size of the main component). |\n| `CLASS_NAME_IMG_SECONDARY` | Class of subsequent images.                                          |\n\n---\n\n## Contributing\n\nSee the [contributing guide](./CONTRIBUTING.md) to get started.\n\n---\n\n## Browser Support\n\nThe lib is built for ES2021.\n\n## Notes\n\n- It's recommended you use a minimum of 24-36 for a smooth experience\n- Legacy [v2.5.4 Demo](https://codesandbox.io/s/react-image-turntable-riy93)\n- Original version by [@andrewmcoupe](https://github.com/andrewmcoupe)\n"
-}
+    "typescript": "^4.6.4"
+  }
+}

README.md

@@ -7,15 +7,24 @@ <div align="center">
 
-### [👉 &nbsp; Try the demo &nbsp;👈](https://githubbox.com/nerdyman/react-image-turntable/tree/main/example)
+<a href="https://codesandbox.io/s/github/nerdyman/react-image-turntable/tree/main/example?file=/src/App.tsx:5537-5598" target="_blank" rel="noopener, noreferrer">
 
+![React Image Turntable with rotating car](https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-image-turntable/capture.gif)
+
+</a>
+
+### [👉 &nbsp; Try the demo &nbsp;👈](https://codesandbox.io/s/github/nerdyman/react-image-turntable/tree/main/example?file=/src/App.tsx:5537-5598)
+
 <br />
 
 <a href="https://npmjs.com/package/react-image-turntable">
-  <img src="https://img.shields.io/npm/v/react-image-turntable.svg?label=" alt="NPM package" />
+  <img src="https://img.shields.io/npm/v/react-image-turntable.svg?label=version" alt="NPM package" />
 </a>
 <a href="https://github.com/nerdyman/react-image-turntable/blob/main/LICENSE">
-  <img src="https://img.shields.io/npm/l/react-image-turntable.svg?label=" alt="License MIT" />
+  <img src="https://img.shields.io/npm/l/react-image-turntable.svg" alt="License MIT" />
 </a>
 <a href="https://github.com/nerdyman/react-image-turntable/actions?query=workflow%3Aci">
-  <img src="https://img.shields.io/github/workflow/status/nerdyman/react-image-turntable/ci?label=" alt="CI Status" />
+  <img src="https://img.shields.io/github/workflow/status/nerdyman/react-image-turntable/ci?label=ci" alt="CI Status" />
 </a>
+<a href="https://codeclimate.com/github/nerdyman/react-image-turntable/test_coverage">
+  <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-image-turntable" />
+</a>
 
@@ -91,3 +100,3 @@ </div>
 
-The lib is built for ES2021.
+The library is built for `ES2021`.
 
@@ -94,0 +103,0 @@ ## Notes

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

106

increased by9.28%

Worsened metrics

Total package byte prevSize

23147

decreased by-26.49%

Dev dependency count

29

increased by3.57%

Number of package files

10

decreased by-9.09%

No dependency changes