react-select-pure - npm Package Compare versions

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

src/models/index.ts

+export * from "./select-pure.models";
+export * from "./option-pure.models";
+export * from "./select.models";
+export * from "./option.models";

src/models/option-pure.models.ts

+export interface OptionPureProps {
+  children?: any;
+  value: string;
+  label: string;
+  hidden?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+}

src/models/option.models.ts

+export interface OptionProps {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  selected?: boolean;
+}
+

src/models/select-pure.models.ts

+import { ReactElement } from "react";
+
+export interface SelectPureProps {
+  children: ReactElement[];
+  name?: string;
+  id?: string;
+}

src/models/select.models.ts

+interface Option {
+  value: string;
+}
+
+export interface SelectProps {
+  options: Option[];
+  id: string;
+  name: string;
+}
+

src/OptionPure.tsx

+import React from "react";
+import { OptionProps } from "./models";
+
+export const OptionPure = (props: OptionProps) => {
+  const { value, label, selected, disabled, hidden } = props;
+  return (
+    <option-pure
+      value={value}
+      label={label}
+      selected={selected}
+      disabled={disabled}
+      hidden={hidden}
+    />
+  );
+}

src/SelectPure.tsx

+import React from "react";
+import "select-pure";
+
+import { SelectPureProps, OptionPureProps, SelectProps, OptionProps } from "./models";
+import { OptionPure } from "./OptionPure";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "select-pure": SelectPureProps,
+      "option-pure": OptionPureProps
+    }
+  }
+}
+
+export const SelectPure = (props: SelectProps) => {
+  const { options, id, name } = props;
+  return (
+    <select-pure
+      id={id}
+      name={name}
+    >
+      {options.map((optionProps: OptionProps) => <OptionPure {...optionProps} />)}
+    </select-pure>
+  );
+};

tsconfig.json

+{
+  "compilerOptions": {
+    "outDir": "lib/esm",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom", "es2016", "es2017"],
+    "jsx": "react",
+    "declaration": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "lib"]
+}

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```

Fixed alerts

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

783.47%

Number of package files

11

266.67%

Lines of code

92

Infinity%

Number of lines in readme file

100

2400%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

3

Infinity%

Dev dependency count

3

Infinity%

Dependency changes

• + Added

  select-pure@^2.1.2-alpha.0

• + Added

  @lit-labs/ssr-dom-shim@1.5.1
  (transitive)

• + Added

  @lit/reactive-element@1.6.3
  (transitive)

• + Added

  @types/prop-types@15.7.15
  (transitive)

• + Added

  @types/react@17.0.91
  (transitive)

• + Added

  @types/scheduler@0.16.8
  (transitive)

• + Added

  @types/trusted-types@2.0.7
  (transitive)

• + Added

  autobind-decorator@2.4.0
  (transitive)

• + Added

  csstype@3.2.3
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  lit@2.8.0
  (transitive)

• + Added

  lit-element@3.3.3
  (transitive)

• + Added

  lit-html@2.8.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react@16.14.0
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)

• + Added

  select-pure@2.1.4
  (transitive)