react-select-pure - npm Package Compare versions

Comparing version 0.0.2-alpha.0 to 0.0.3-alpha.0

CHANGELOG.md

@@ -6,2 +6,29 @@ # Change Log
 
+## [0.0.3-alpha.0](https://github.com/dudyn5ky1/select-pure/compare/react-select-pure@0.0.2...react-select-pure@0.0.3-alpha.0) (2021-10-30)
+
+
+### Features
+
+* **react-select-pure:** add a basic React wrapper for select-pure ([2e39f66](https://github.com/dudyn5ky1/select-pure/commit/2e39f6629764e6879fdd165406e0fbb001665800))
+
+
+
+
+
+## [0.0.2](https://github.com/dudyn5ky1/select-pure/compare/react-select-pure@0.0.2-alpha.1...react-select-pure@0.0.2) (2021-05-01)
+
+**Note:** Version bump only for package react-select-pure
+
+
+
+
+
+## [0.0.2-alpha.1](https://github.com/dudyn5ky1/select-pure/compare/react-select-pure@0.0.2-alpha.0...react-select-pure@0.0.2-alpha.1) (2021-04-27)
+
+**Note:** Version bump only for package react-select-pure
+
+
+
+
+
 ## 0.0.2-alpha.0 (2021-04-27)
@@ -8,0 +35,0 @@

package.json

 {
   "name": "react-select-pure",
-  "version": "0.0.2-alpha.0",
+  "version": "0.0.3-alpha.0",
   "description": "React wrapper for SelectPure component",
+  "main": "./lib/cjs/SelectPure.js",
+  "module": "./lib/esm/SelectPure.js",
+  "types": "./lib/esm/SelectPure.d.ts",
   "author": {
@@ -11,3 +14,6 @@ "name": "Maksym Dudynskyi",
   "scripts": {
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs"
   },
@@ -18,3 +24,15 @@ "repository": {
   },
-  "license": "MIT"
+  "license": "MIT",
+  "peerDependencies": {
+    "@types/react": "^17.0.33",
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "react": "^16.8.0",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "select-pure": "^2.1.2-alpha.0"
+  }
 }

README.md

@@ -1,3 +0,99 @@
-# React SelectPure component
+# React wrapper for a custom JavaScript `<select>` component. Easy-to-use, accessible, mobile friendly and super efficient.
 
-### WIP
+[![npm version](https://img.shields.io/npm/v/react-select-pure.svg)](https://www.npmjs.com/package/react-select-pure)
+[![npm](https://img.shields.io/npm/dm/react-select-pure.svg)](https://www.npmjs.com/package/react-select-pure)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/react-select-pure)
+
+## Description
+
+SelectPure is a Web Component (Custom Element) which makes it super easy to use and customize. Main goal is to use extended API of the native HTML `<select>` element and provide additional features, like autocomplete, custom styling and many more. The package itself is stable to be used, however, if you've found any issues, please report them [here](https://github.com/dudyn5ky1/react-select-pure/issues) or create a PR of your own.
+
+## Demo
+
+Interactive demo with many examples is available [here](https://www.webcomponents.org/element/select-pure).
+
+## Usage
+
+SelectPure is very easy to use. At first you have to install a package
+
+```bash
+yarn add react-select-pure
+```
+or
+
+```bash
+npm i react-select-pure --save
+```
+
+then include it in your JavaScript file:
+
+```javascript
+import { SelectPure } from "react-select-pure";
+```
+
+```JSX
+<SelectPure
+  name="country"
+  id="country"
+  options={[
+    { value: "", disabled: true, hideen: true, label: "-- Please select a country --" },
+    { value: "UA", label: "Ukrane" },
+    { value: "PL", label: "Poland" },
+    { value: "DE", label: "Germany" },
+    { value: "US", label: "USA" },
+    { value: "RU", label: "Russia", disabled: true }
+  ]}
+/>
+```
+
+### Attributes
+
+`<select-pure>` supports the following attributes: `name`, `id`, `multiple`, `default-label` and `disabled`.
+
+`<option-pure>` supports `value`, `label`, `disabled`, `selected` and `hidden` attributes.
+
+### Custom styles
+
+SelectPure offers high level of customisation. You can match any design you want by just providing a simple set of css variables. Below you can find their names and default values that are included in the package.
+
+```css
+select-pure {
+  --select-height: 44px;
+  --select-width: 100%;
+  --border-radius: 4px;
+  --border-width: 1px;
+  --border-color: #000;
+  --padding: 0 10px;
+  --dropdown-z-index: 2;
+  --disabled-background-color: #bdc3c7;
+  --disabled-color: #ecf0f1;
+  --background-color: #fff;
+  --color: #000;
+  --hover-background-color: #e3e3e3;
+  --hover-color: #000;
+  --selected-background-color: #e3e3e3;
+  --selected-color: #000;
+  --dropdown-gap: 0;
+  --font-size: 14px;
+  --font-family: inherit;
+  --font-weight: 400;
+  --select-outline: 2px solid #e3e3e3;
+  --dropdown-items: 4;
+}
+```
+
+### `<form>` support
+
+If you place `<SelectPure />` inside a `<form>` and specify a `name` or `id` props, it will then append a hidden `input` with a given name inside a `<form>` and trigger `change` event, when value is selected.
+
+## TODO
+
+- [ ] Multiple support
+- [ ] Default label support
+- [ ] Write tests
+- [ ] Callbacks
+- [ ] Methods
+
+## License
+
+```MIT```

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

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7377

increased by783.47%

Number of package files

11

increased by266.67%

Lines of code

92

increased byInfinity%

Number of lines in readme file

100

increased by2400%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased byInfinity%

Dev dependency count

3

increased byInfinity%

Dependency changes

• + Addedselect-pure@^2.1.2-alpha.0

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@17.0.83(transitive)

• + Added@types/scheduler@0.16.8(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedautobind-decorator@2.4.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedselect-pure@2.1.4(transitive)