react-compare-slider - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0-beta.0

package.json

 {
   "name": "react-compare-slider",
-  "version": "2.2.0",
+  "version": "3.0.0-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nerdyman/react-compare-slider.git"
+    "url": "git+https://github.com/nerdyman/react-compare-slider.git",
+    "directory": "lib"
   },
@@ -23,2 +24,3 @@ "homepage": "https://react-compare-slider.vercel.app",
     "video",
+    "canvas",
     "component",
@@ -30,22 +32,18 @@ "image comparison",
   ],
+  "engines": {
+    "node": ">=16.9.0"
+  },
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/react-compare-slider.esm.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
   "files": [
     "dist"
   ],
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "NODE_ENV=production tsdx build",
-    "dedupe-types": "rm -rf node_modules && yarn remove @types/react && yarn && yarn add --dev @types/react && npx yarn-deduplicate --packages @types/react yarn.lock",
-    "release": "yarn build && np --no-2fa",
-    "test": "CI=true tsdx test --color",
-    "test:watch": "tsdx test",
-    "test:coverage": "CI=true tsdx test --color --coverage",
-    "lint": "tsdx lint",
-    "lint-staged": "lint-staged",
-    "storybook": "start-storybook -p 6006 --ci",
-    "storybook:build": "build-storybook"
-  },
   "browserslist": {
@@ -56,3 +54,4 @@ "production": [
       "last 2 firefox versions",
-      "last 2 safari versions",
+      "safari >= 15.6",
+      "ios >= 15.6",
       "not dead",
@@ -68,29 +67,5 @@ "not ie > 0",
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "jest": {
-    "verbose": true,
-    "setupFilesAfterEnv": [
-      "./test/setupTests.ts"
-    ]
-  },
-  "lint-staged": {
-    "**/*.{js,jsx,ts,tsx}": [
-      "pretty-quick --staged",
-      "eslint --config ./.eslintrc.precommit.js --fix",
-      "yarn test --bail --findRelatedTests"
-    ]
-  },
   "np": {
-    "yarn": true
+    "pnpm": true
   },
-  "prettier": {
-    "printWidth": 90,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "peerDependencies": {
@@ -101,48 +76,24 @@ "react": ">=16.8",
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "^11.0.0",
-    "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.1.4",
-    "@storybook/addon-actions": "^6.2.0-alpha.10",
-    "@storybook/addon-console": "^1.2.2",
-    "@storybook/addon-controls": "^6.2.0-alpha.10",
-    "@storybook/addon-docs": "^6.2.0-alpha.10",
-    "@storybook/addon-storysource": "^6.2.0-alpha.10",
-    "@storybook/addon-viewport": "^6.2.0-alpha.10",
-    "@storybook/addons": "^6.2.0-alpha.10",
-    "@storybook/preset-typescript": "3.0.0",
-    "@storybook/react": "^6.2.0-alpha.10",
-    "@storybook/theming": "^6.2.0-alpha.10",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "^3.7.0",
-    "@types/jest": "^26.0.19",
-    "@types/node": "^14.14.17",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/resize-observer-browser": "^0.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "@typescript-eslint/parser": "^4.11.1",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.16.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jest-dom": "^3.6.5",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.10.1",
-    "google-maps-react": "^2.0.6",
-    "husky": "^4.3.6",
-    "lint-staged": "^10.5.3",
-    "np": "^7.2.0",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
-    "remark-codesandbox": "^0.10.0",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "browserslist": "^4.22.1",
+    "concurrently": "^8.2.2",
+    "esbuild-plugin-browserslist": "^0.9.1",
+    "np": "^8.0.4",
+    "publint": "^0.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tslib": "~2.6.2",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
   },
-  "dependencies": {}
-}
+  "scripts": {
+    "dev": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"tsup --watch\" \"pnpm run check:types --watch --preserveWatchOutput\"",
+    "build": "pnpm run check:types && NODE_ENV=production tsup",
+    "release": "cp ../README.md ../LICENSE . && pnpm run -w lint && pnpm run -w test && pnpm run build && pnpm run check && np --no-tests --no-cleanup",
+    "check": "concurrently -n \"package,types\" -c \"blue,magenta\" \"pnpm run check:package\" \"pnpm run check:types\"",
+    "check:package": "attw -P . --ignore-rules cjs-resolves-to-esm && publint",
+    "check:types": "tsc --noEmit"
+  }
+}

README.md

@@ -5,23 +5,11 @@ <div align="center">
 
-[![Example](./example/default-handle-capture.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
+[![Example](https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/docs/hero.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 
-<a href="https://github.com/nerdyman/react-compare-slider/blob/master/LICENSE">
-  <img src="https://img.shields.io/npm/l/react-compare-slider.svg" alt="License MIT" />
-</a>
-<a href="https://npmjs.com/package/react-compare-slider">
-  <img src="https://img.shields.io/npm/v/react-compare-slider.svg" alt="NPM package" />
-</a>
-<a href="https://bundlephobia.com/result?p=react-compare-slider">
-  <img src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" alt="Bundle size" />
-</a>
+<a href="https://github.com/nerdyman/react-compare-slider/blob/main/LICENSE"><img alt="License MIT" src="https://img.shields.io/npm/l/react-compare-slider.svg" /></a>
+<a href="https://npmjs.com/package/react-compare-slider"><img  alt="npm version" src="https://img.shields.io/npm/v/react-compare-slider.svg" /></a>
+<a href="https://bundlephobia.com/result?p=react-compare-slider"><img alt="Bundle size" src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" /></a>
 <br/>
-<a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild">
-  <img src="https://img.shields.io/github/workflow/status/nerdyman/react-compare-slider/build" alt="Build Status" />
-</a>
-<a href="https://codeclimate.com/github/nerdyman/react-compare-slider">
-  <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" />
-</a>
-<a href="https://react-compare-slider.vercel.app">
-  <img src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" alt="Demos" />
-</a>
+<a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild"><img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" /></a>
+<a href="https://codeclimate.com/github/nerdyman/react-compare-slider/code?q=lib"><img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" /></a>
+<a href="https://react-compare-slider.vercel.app"><img  alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" /></a>
 
@@ -36,7 +24,7 @@ </div>
 - Supports landscape and portrait orientations
+- Accessible &ndash; screen reader and keyboard support out of the box
 - Simple API
 - Unopinionated & fully customizable &ndash; optionally use your own components and styles
-- Responsive, fluid
-- [Teeny-tiny](https://bundlephobia.com/result?p=react-compare-slider)
-- Zero dependencies
+- Responsive & fluid with intrinsic sizing
+- Teeny-tiny, zero dependencies
 - Type safe
@@ -46,5 +34,5 @@
 
-- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-intro--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos)
-- CodeSandbox: [basic editable demo](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l)
-- [Local example](./example)
+- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-introduction--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos), [custom recipies](https://react-compare-slider.vercel.app/?path=/story/recipies), [custom handles](https://react-compare-slider.vercel.app/?path=/story/handles)
+- CodeSandbox: [basic demo](https://codesandbox.io/p/sandbox/github/nerdyman/react-compare-slider/tree/main/docs/example?file=/src/App.tsx:1,1)
+- [Local example](./docs/example)
 
@@ -56,5 +44,7 @@ ## Usage
 ```sh
+npm install react-compare-slider
+# or
 yarn add react-compare-slider
-# OR
-npm install react-compare-slider
+# or
+pnpm add react-compare-slider
 ```
@@ -64,3 +54,3 @@
 
-You *may* use `ReactCompareSliderImage` to render images or use your own custom
+You _may_ use `ReactCompareSliderImage` to render images or use your own custom
 components.
@@ -71,6 +61,10 @@
 
-<ReactCompareSlider
-  itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
-  itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
-/>
+export const Example = () => {
+  return (
+    <ReactCompareSlider
+      itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
+      itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
+    />
+  );
+};
 ```
@@ -82,40 +76,30 @@
 
-| Prop | Type | Required | Default value | Description |
-|------|------|:--------:|---------------|-------------|
-| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
-| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` |   | `false` | Whether the slider should follow the pointer on hover. |
-| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` |   | `undefined` | Custom handle component. |
-| `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
-| `itemTwo`   | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
-| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean`  |   | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
-| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)  | `function`  |   | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
-| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean`   |   | `false` | Whether to use portrait orientation. |
-| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position)  | `number`    |   | `50` | Initial percentage position of divide (`0-100`). |
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | :------: | ------- | ----------- |
+| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page)                   | `number`    |              | `0`           | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).       |
+| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean`   |              | `false`       | Whether the slider should follow the pointer on hover.                                                |
+| [`disabled`](https://react-compare-slider.vercel.app/?path=/story/docs-disabled--page)                   | `boolean`    |              | `false`           |  Whether to disable slider movement (items are still interactable).       |
+| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page)                                 | `ReactNode` |              | `undefined`   | Custom handle component.                                                                              |
+| `itemOne`                                                                                                           | `ReactNode` |      ✓       | `undefined`   | First component to show in slider.                                                                    |
+| `itemTwo`                                                                                                           | `ReactNode` |      ✓       | `undefined`   | Second component to show in slider.                                                                   |
+| [`keyboardIncrement`](https://react-compare-slider.vercel.app/?path=/story/docs-keyboard-increment--page)                                                                                                 | `` number\|`${number}%` `` |               | `5%`                                                                                                  | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed. |
+| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page)      | `boolean`   |              | `false`       | Whether to only change position when handle is interacted with (useful for touch devices).            |
+| [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)                | `function`  |              | `undefined`   | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
+| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait)                                  | `boolean`   |              | `false`       | Whether to use portrait orientation.                                                                  |
+| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position)                                  | `number`    |              | `50`          | Initial percentage position of divide (`0-100`).                                                      |
+| [`transition`](https://react-compare-slider.vercel.app/?path=/story/demos--transition)                                  | `string`    |              | `undefined`          | Shorthand CSS `transition` property to apply to handle movement. E.g. `.5s ease-in-out`                                                      |
 
-See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.
+[API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.
 
-## Extending
+<br />
 
-### Custom Items
+## Real World Examples
 
-The library supports all types of React components.
+- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
+- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
+- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2)
 
-- [Google Maps Demo](https://react-compare-slider.vercel.app/?path=/story/demos-custom-components--google-maps)
-
-Custom components can apply the same base styles as `ReactCompareSliderImage` 
-by using the [`styleFitContainer` CSS utility](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page#stylefitcontainer).
-
-### Custom Handles
-
-[![Custom Handles](./example/custom-handle-capture.gif)](https://react-compare-slider.vercel.app/?path=/story/demos-handles--individual-styles)
-
-See the [Handles docs](https://react-compare-slider.vercel.app/?path=/docs/docs-handles--page) for more information.
-
 ## Requirements
 
 - React 16.8+
-- The [latest two versions of each major browser](./package.json#L49) are officially supported &ndash; try [version 1.2.1](https://www.npmjs.com/package/react-compare-slider/v/1.2.1) if you require legacy Edge support
-
-## Notes
-
-Bootstrapped with [TSDX](https://github.com/formium/tsdx).
+- The [latest two versions](./lib/package.json#L55) of each major browser are officially supported

New alerts

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

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

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

13

decreased by-70.45%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

57258

decreased by-65.38%

Number of package files

6

decreased by-64.71%

Lines of code

30

decreased by-97.05%

Number of lines in readme file

99

decreased by-13.91%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes