react-responsive-select - npm Package Compare versions

Comparing version 5.1.1 to 6.0.0-aplha.9

package.json

 {
   "name": "react-responsive-select",
-  "version": "5.1.1",
-  "description": "A React customisable, touchable, single-select / multi-select form component. Built with keyboard and screen reader accessibility in mind.",
-  "main": "dist/ReactResponsiveSelect.js",
-  "types": "ts/ReactResponsiveSelect.d.ts",
+  "version": "6.0.0-aplha.9",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/react-responsive-select.esm.js",
+  "author": "Ben Bowes <[e-mail]>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/benbowes/react-responsive-select"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
   "scripts": {
-    "compile": "rm -rf dist ts ts-esm && tsc && tsc -m es6 --outDir ts-esm && webpack --config webpack.output.js --json > stats.json && cp src/ReactResponsiveSelect.css dist/ReactResponsiveSelect.css",
-    "test": "jest",
-    "lint": "tsc --noEmit",
-    "prepublishOnly": "npm run compile",
-    "deploy-storybook": "npm run compile && build-storybook && storybook-to-ghpages",
-    "start": "rm -rf .cache-loader storybook-static && start-storybook -p 6006"
+    "prepublishOnly": "npm run build",
+    "start": "npx styleguidist server",
+    "test": "tsdx test",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "build:styleguide": "npx styleguidist build --ts",
+    "build": "tsdx build --format cjs,esm,umd && npm run copyfiles && npm run deleteUnwantedDistEntries && npm run build:styleguide",
+    "copyfiles": "cp src/react-responsive-select.css dist/react-responsive-select.css",
+    "deleteUnwantedDistEntries": "rm -rf dist/docs && rm -rf dist/__mocks__"
   },
   "husky": {
     "hooks": {
-      "pre-push": "npm run lint && npm test"
+      "pre-commit": "tsdx lint"
     }
   },
+  "prettier": {
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
   "keywords": [
@@ -34,48 +55,26 @@ "select",
   ],
-  "author": "Ben Bowes <[e-mail]>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/benbowes/react-responsive-select"
+  "dependencies": {
+    "singleline": "^2.0.0"
   },
   "peerDependencies": {
-    "react": ">16.0.0"
+    "react": ">=16"
   },
-  "dependencies": {
-    "singleline-next": "^2.0.0"
-  },
   "devDependencies": {
-    "@babel/core": "^7.1.0",
-    "@storybook/addon-info": "^5.1.0-alpha.35",
-    "@storybook/addon-options": "^5.1.0-alpha.35",
-    "@storybook/addons": "^5.1.0-alpha.35",
-    "@storybook/react": "^5.1.0-alpha.35",
-    "@storybook/storybook-deployer": "^2.8.1",
-    "@storybook/theming": "^5.0.10",
-    "@types/jest": "^24.0.11",
-    "@types/react": "^16.8.14",
-    "@types/react-dom": "^16.8.4",
-    "@types/react-test-renderer": "^16.8.1",
-    "@types/storybook__addon-info": "^4.1.1",
-    "@types/storybook__addon-options": "^4.0.1",
-    "@types/storybook__react": "^4.0.1",
-    "acorn": "^6.1.1",
-    "babel-loader": "^8.0.0",
-    "cache-loader": "^1.2.2",
-    "formik": "^1.5.7",
-    "husky": "^2.4.1",
-    "jest": "^24.8.0",
-    "react": "^16.8.5",
-    "react-docgen-typescript-loader": "^3.0.0",
-    "react-dom": "^16.8.5",
-    "react-test-renderer": "^16.5.2",
-    "react-testing-library": "^7.0.0",
-    "ts-jest": "^24.0.2",
-    "ts-loader": "^5.4.5",
-    "tslint": "^5.18.0",
-    "typescript": "^3.0.3",
-    "uglifyjs-webpack-plugin": "^2.1.2",
-    "webpack-cli": "^3.3.2",
-    "yup": "^0.27.0"
+    "@testing-library/react": "^10.4.5",
+    "@types/react": "^16.9.42",
+    "@types/react-dom": "^16.9.8",
+    "css-loader": "^3.6.0",
+    "formik": "^2.1.4",
+    "husky": "^4.2.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-styleguidist": "^11.0.8",
+    "style-loader": "^1.2.1",
+    "ts-loader": "^7.0.5",
+    "tsdx": "^0.13.2",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.6",
+    "webpack": "^4.43.0",
+    "yup": "^0.29.1"
   }
 }

README.md

 # react-responsive-select
+
 ![Build status](https://api.travis-ci.org/benbowes/react-responsive-select.svg?branch=master)
@@ -20,5 +21,3 @@
 - Easy slot-in to your design system
-- No global styling
 
-
 ## Getting started
@@ -30,24 +29,78 @@
 
-Example usage:
+Example usage (Single Select):
 
+```jsx
+import React from 'react';
+import { Select, CaretIcon, ModalCloseButton } from 'react-responsive-select';
+
+// for default styles...
+import 'react-responsive-select/dist/react-responsive-select.css';
+
+const Form = () => (
+  <form>
+    <Select
+      name="carType1"
+      modalCloseButton={<ModalCloseButton />}
+      options={[
+        { value: 'null', text: 'Any' },
+        { value: 'alfa-romeo', text: 'Alfa Romeo' },
+        { value: 'bmw', text: 'BMW' },
+        { value: 'fiat', text: 'Fiat' },
+        { value: 'subaru', text: 'Subaru' },
+        { value: 'suzuki', text: 'Suzuki' },
+        { value: 'tesla', text: 'Tesla' },
+        { value: 'volvo', text: 'Volvo' },
+        { value: 'zonda', text: 'Zonda' },
+      ]}
+      caretIcon={<CaretIcon />}
+      prefix="Car1: "
+      selectedValue="subaru"
+      onChange={(newValue) => console.log('onChange', newValue)}
+      onSubmit={() => console.log('onSubmit')}
+    />
+  </form>
+);
 ```
+
+Example usage (Multi Select):
+
+```jsx
 import React from 'react';
-import RRS from 'react-responsive-select';
- 
-const onChange = (newValue) => console.log('onChange', newValue);
-const onSubmit = () => console.log('onSubmit');
- 
+import { Select, CaretIcon, MultiSelectOptionMarkup, ModalCloseButton } from 'react-responsive-select';
+
+// for default styles...
+import 'react-responsive-select/dist/react-responsive-select.css';
+
 const Form = () => (
   <form>
-    <RRS
-      name="make"
+    <Select
+      multiselect={true}
+      name="make6"
+      selectedValues={['fiat']}
+      modalCloseButton={<ModalCloseButton />}
       options={[
-        { text: 'Any', value: 'null' },
-        { text: 'Oldsmobile', value: 'oldsmobile', markup: <span>Oldsmobile</span> },
-        { text: 'Ford', value: 'ford', markup: <span>Ford</span> }
+        {
+          value: 'any',
+          text: 'Any',
+          markup: <MultiSelectOptionMarkup text="Any" />,
+        },
+        {
+          value: 'fiat',
+          text: 'Fiat',
+          markup: <MultiSelectOptionMarkup text="Fiat" />,
+        },
+        {
+          value: 'subaru',
+          text: 'Subaru',
+          markup: <MultiSelectOptionMarkup text="Subaru" />,
+        },
+        {
+          value: 'suzuki',
+          text: 'Suzuki',
+          markup: <MultiSelectOptionMarkup text="Suzuki" />,
+        },
       ]}
-      selectedValue="oldsmobile"
-      onSubmit={onSubmit}
-      onChange={onChange}
       caretIcon={<CaretIcon />}
+      onChange={(...rest) => console.log(rest)}
+      onSubmit={() => console.log('onSubmit')}
     />
@@ -58,3 +111,3 @@ </form>
 
-## StoryBook Examples & Demo 
+## Examples & Demo
 
@@ -65,30 +118,10 @@ https://benbowes.github.io/react-responsive-select/
 
-https://benbowes.github.io/react-responsive-select/?path=/story/info--api
+https://benbowes.github.io/react-responsive-select/#/API
 
 ## Screen Reader Demo
 
-https://benbowes.github.io/react-responsive-select/?path=/story/info--screen-reader-demo
+https://benbowes.github.io/react-responsive-select/#/Screen%20reader%20demo
 
-## CodeSandbox.io JavaScript Examples
-
-- Single-Select Example: https://codesandbox.io/s/mo8j53wvwp
-- Multi-Select Example https://codesandbox.io/s/multiselect-example-reactresponsiveselect-jo9se
-- Controlled Example https://codesandbox.io/s/controlled-example-reactresponsiveselect-jcp1n
-- Using with Formik Example https://codesandbox.io/s/using-reactresponsiveselect-with-formik-l234rznkl
-
-## TypeScript Examples
-
-- See the StoryBook `*.stories.tsx` files in here: https://github.com/benbowes/react-responsive-select/tree/master/src/stories
-
-## Via CDN
-
-- JS:
-[ReactResponsiveSelect.js on unpkg.com](https://unpkg.com/react-responsive-select@latest/dist/ReactResponsiveSelect.js)
-- CSS:
-[ReactResponsiveSelect.css on unpkg.com](https://unpkg.com/react-responsive-select@latest/dist/ReactResponsiveSelect.css)
-
-The [Codepen examples](https://codepen.io/collection/DrjWEk/) are consuming react-responsive-select via CDN if you'd like a guide.
-
 ## Business Rules
 
 Have a read of [README_BUSINESS_RULES.md](./README_BUSINESS_RULES.md)

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

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

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

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

763356

11.95%

Dev dependency count

16

-50%

Lines of code

5296

12.56%

Number of lines in readme file

124

36.26%

Number of low supply chain risk alerts

2

-33.33%

Worsened metrics

Number of package files

58

-81.99%

Number of low quality alerts

4

300%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  singleline@^2.0.0

• + Added

  singleline@2.0.2
  (transitive)

• - Removed

  singleline-next@^2.0.0

• - Removed

  singleline-next@2.0.0
  (transitive)