react-image-turntable - npm Package Compare versions

Comparing version 2.5.4 to 3.0.0-alpha.0

dist/index.d.ts

@@ -1,1 +0,17 @@
-export * from "./src/Turntable";
+import { HtmlHTMLAttributes, FC } from 'react';
+
+interface ReactImageTurntableProps {
+    /** List of image `src` attributes. */
+    images: string[];
+    /** Image index to start on at first render. */
+    initialImageIndex?: number;
+    /** The amount a "drag" has to move before an image changes to next or previous */
+    movementSensitivity?: number;
+}
+/** Base props *and* all available HTML element props. */
+declare type ReactImageTurntableFullProps = HtmlHTMLAttributes<HTMLDivElement> & ReactImageTurntableProps;
+
+declare const CLASS_NAME_IMG = "__react-image-turntable__img";
+declare const ReactImageTurntable: FC<ReactImageTurntableFullProps>;
+
+export { CLASS_NAME_IMG, ReactImageTurntable, ReactImageTurntableFullProps, ReactImageTurntableProps };

package.json

 {
   "name": "react-image-turntable",
-  "version": "2.5.4",
-  "homepage": "https://github.com/andrewmcoupe/react-image-turntable",
-  "description": "This package aims to display an object in 360 degree perspective with the use of multiple, angled images from around the object itself.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "precommit": "npm run build && npm test",
-    "prepublishOnly": "tsc",
-    "build": "tsc",
-    "test": "jest",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
+  "description": "Display a set of images as a draggable 360 degree turntable.",
+  "version": "3.0.0-alpha.0",
+  "author": "nerdyman",
+  "license": "MIT",
+  "sideEffects": false,
+  "packageManager": "pnpm@6.32.3",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=16"
   },
-  "dependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+  "browserslist": {
+    "production": [
+      "last 2 chrome versions",
+      "last 2 edge versions",
+      "last 2 firefox versions",
+      "last 2 safari versions",
+      "not dead",
+      "not ie > 0",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
-  "keywords": [
-    "turntable",
-    "product spinner",
-    "image turntable",
-    "react image"
-  ],
-  "author": "Andy Coupe",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.9.0",
-    "@testing-library/react": "^10.0.3",
-    "@testing-library/react-hooks": "^3.2.1",
-    "@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",
-    "typescript": "^3.8.3"
-  },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged && npm run precommit"
+      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": [
+    "**/*.{js,jsx,ts,tsx}": [
+      "pretty-quick --staged",
       "eslint --fix",
-      "prettier --write"
+      "pnpm test --bail"
     ]
-  }
-}
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all"
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.mjs",
+      "limit": "2 KB"
+    }
+  ],
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "eslint": "^8.12.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-testing-library": "^5.2.1",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.2",
+    "pretty-quick": "^3.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^7.0.8",
+    "tslib": "^2.3.1",
+    "tsup": "^5.12.4",
+    "typescript": "^4.6.3"
+  },
+  "scripts": {
+    "bootstrap": "corepack disable && corepack enable && pnpm i --frozen-lockfile",
+    "dx": "npm run bootstrap && pnpm exec husky install",
+    "start": "tsup --watch",
+    "build": "tsup",
+    "test": "jest",
+    "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</div>\n\n## Features\n\n- Accessible\n- Responsive & fluid with intrinsic sizing\n- [Teeny Tiny](https://bundlephobia.com/result?p=react-image-turntable)\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`           | Image index to start on at first render. |\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## Contributing\n\nSee the [contributing guide](./CONTRIBUTING.md) to get started.\n\n---\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"
+}

README.md

@@ -1,40 +0,65 @@
-[![andrewmcoupe](https://circleci.com/gh/andrewmcoupe/react-image-turntable.svg?style=shield)](LINK)
+<div align="center">
 
 # React Image Turntable
 
-###### built with TypeScript
+Display a set of images as a draggable 360 degree turntable.
 
-![](/readme-assets/example.gif)
+### [👉 &nbsp; Try the demo &nbsp;👈](https://githubbox.com/nerdyman/react-image-turntable/tree/main/example)
 
-### [Try the demo](https://codesandbox.io/s/react-image-turntable-riy93) 👈
+</div>
 
-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.
+## Features
 
-A decent looking turntable will require 20-35 angled images from around the object, ordered correctly.
+- Accessible
+- Responsive & fluid with intrinsic sizing
+- [Teeny Tiny](https://bundlephobia.com/result?p=react-image-turntable)
+- Zero dependencies
+- Type Safe
 
-## Installation
+## Install
 
-`npm i react-image-turntable`
+```sh
+npm i react-image-turntable
+# Or
+yarn add react-image-turntable
+# Or
+pnpm i react-image-turntable
+```
 
-or
+## Usage
 
-`yarn add react-image-turntable`
+### Props
 
-## Usage
+| Props               | Type       | Required | Default Value | Description                              |
+| ------------------- | :--------- | :------: | :------------ | :--------------------------------------- |
+| `images`            | `string[]` |    ✓     | `undefined`   | List of image `src` attributes.          |
+| `initialImageIndex` | `number`   |          | `0`           | Image index to start on at first render. |
 
-| Props  |   Type   |
-| ------ | :------: |
-| images | string[] |
+### Example
 
+```ts
+import React from 'react';
+import { ReactImageTurntable } from 'react-image-turntable';
+
+const images = [
+  'https://via.placeholder.com/1200x800?text=1',
+  'https://via.placeholder.com/1200x800?text=2',
+  'https://via.placeholder.com/1200x800?text=3',
+];
+
+export const Turntable = () => <ReactImageTurntable images={images} />;
+```
+
+Also see the [example code](./example) in the repo.
+
+## Contributing
+
+See the [contributing guide](./CONTRIBUTING.md) to get started.
+
 ---
 
-```javascript
-import React from 'react'
-import { Turntable } from 'react-image-turntable'
+## Notes
 
-const myImages = [<YOUR_IMAGE_PATHS>]
-
-const MyTurntable = () => (
-    <Turntable images={myImages} />
-)
-```
+- It's recommended you use a minimum of 24-36 for a smooth experience
+- Legacy [v2.5.4 Demo](https://codesandbox.io/s/react-image-turntable-riy93)
+- Original version by [@andrewmcoupe](https://github.com/andrewmcoupe)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No website

Quality

Package does not have a website.

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27751

increased by35.26%

Dependency count

1

decreased by-50%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

66

increased by60.98%

Worsened metrics

Number of package files

13

decreased by-23.53%

Lines of code

186

decreased by-64.97%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedreact@19.0.0(transitive)

• - Removedreact@^16.8.0

• - Removedreact-dom@^16.8.0

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)