@trendmicro/react-buttons - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

 {
   "name": "@trendmicro/react-buttons",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Trend Micro Components: React Buttons",
   "main": "lib/index.js",
   "files": [
+    "dist",
     "lib"
   ],
   "scripts": {
-    "prepublish": "npm run lint && npm test && npm run build && npm run build-examples",
-    "build": "rm -f lib/*; babel --out-dir ./lib ./src",
+    "prepublish": "npm run lint && npm test && npm run clean && npm run build && npm run build-examples",
+    "clean": "rm -f {lib,dist}/*",
+    "build": "webpack && npm run cleancss",
     "build-examples": "cd examples; webpack; cp -af index.html ../docs/index.html",
+    "cleancss": "cleancss -o dist/react-buttons.min.css dist/react-buttons.css",
     "demo": "http-server -p 8000 docs/",
@@ -50,6 +53,7 @@ "lint": "eslint ./src",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^0.14.0 || ^15.0.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "classnames": "^2.2.5"
+  },
   "devDependencies": {
@@ -64,3 +68,3 @@ "babel-cli": "~6.18.0",
     "babel-preset-stage-0": "~6.16.0",
-    "classnames": "~2.2.5",
+    "clean-css": "~3.4.21",
     "coveralls": "~2.11.15",
@@ -74,2 +78,3 @@ "css-loader": "~0.26.1",
     "eslint-plugin-react": "~6.8.0",
+    "extract-text-webpack-plugin": "~1.0.1",
     "http-server": "~0.9.0",
@@ -76,0 +81,0 @@ "imports-loader": "~0.7.0",

README.md

@@ -13,2 +13,11 @@ # react-buttons [![build status](https://travis-ci.org/trendmicro-frontend/react-buttons.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-buttons) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-buttons/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-buttons?branch=master)
 
+At this point you can import `@trendmicro/react-buttons` and its styles in your application as follows:
+
+```js
+import { Button, ButtonGroup, ButtonToolbar, ButtonDropdown } from '@trendmicro/react-buttons';
+
+// Be sure to include styles at some point, probably during your bootstraping
+import '@trendmicro/react-buttons/dist/react-buttons.css';
+```
+
 ## Usage
@@ -177,8 +186,2 @@
 
-const options = [
-    { label: 'Action', value: 'v1' },
-    { label: 'Another action', value: 'v2' },
-    { label: 'Something else here', value: 'v3' }
-];
-
 #### Single
@@ -190,3 +193,7 @@
     placeholder="Select..."
-    options={options}
+    options={[
+        { label: 'Action', value: 'v1' },
+        { label: 'Another action', value: 'v2' },
+        { label: 'Something else here', value: 'v3' }
+    ]}
     onChange={(selectedOption) => {
@@ -207,6 +214,25 @@ if (selectedOption) {
     placeholder="Select..."
-    options={options}
+    options={[
+        { label: 'Action', value: 'v1' },
+        { label: 'Another action', value: 'v2' },
+        { label: 'Something else here', value: 'v3' }
+    ]}
 />
 ```
 
+#### Fixed width
+```js
+<Button
+    dropdown
+    placeholder="Select..."
+    options={[
+        { label: 'Action', value: 'v1' },
+        { label: 'Another action', value: 'v2' },
+        { label: 'Something else here', value: 'v3' }
+    ]}
+    value="v1"
+    fixedWidth={true}
+/>
+```
+
 #### Text
@@ -218,3 +244,7 @@
     dropdownStyle="text"
-    options={options}
+    options={[
+        { label: 'Action', value: 'v1' },
+        { label: 'Another action', value: 'v2' },
+        { label: 'Something else here', value: 'v3' }
+    ]}
 >
@@ -231,4 +261,8 @@ All Devices
     dropdownStyle="text"
-    options={options}
-    customedValueRenderer={(option) => {
+    options={[
+        { label: 'Action', value: 'v1' },
+        { label: 'Another action', value: 'v2' },
+        { label: 'Something else here', value: 'v3' }
+    ]}
+    customValueRenderer={(option) => {
         return (
@@ -235,0 +269,0 @@ <div>

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

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

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 2 instances 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

417255

increased by915.24%

Lines of code

4812

increased by654.23%

Number of lines in readme file

286

increased by13.49%

Worsened metrics

Dev dependency count

31

increased by3.33%

Number of low supply chain risk alerts

67

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclassnames@^2.2.5

• + Addedclassnames@2.5.1(transitive)

• - Removedreact-dom@15.7.0(transitive)