@innocuous/components - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/components.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -9,2 +11,8 @@
 
+var Button = function Button(props) {
+  return React__default.createElement("button", Object.assign({}, props, {
+    disabled: props.isDisabled
+  }));
+};
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -25,28 +33,2 @@ if (source == null) return {};
 
-function Button(_ref) {
-  var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? undefined : _ref$className,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      _ref$isFullWidth = _ref.isFullWidth,
-      onClick = _ref.onClick,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$dataTestid = _ref['data-testid'],
-      dataTestID = _ref$dataTestid === void 0 ? undefined : _ref$dataTestid,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "isDisabled", "isFullWidth", "onClick", "tabIndex", "type", "data-testid"]);
-
-  return React__default.createElement("button", Object.assign({
-    className: className,
-    disabled: isDisabled,
-    onClick: onClick,
-    tabIndex: tabIndex,
-    type: type,
-    "data-testid": dataTestID
-  }, props), children);
-}
-
 function Image(_ref) {
@@ -64,4 +46,4 @@ var alt = _ref.alt,
 
-  var ImageWhenJavaScriptDisabled = function ImageWhenJavaScriptDisabled() {
-    return React__default.createElement("noscript", null, React__default.createElement("img", Object.assign({
+  var SimpleImage = function SimpleImage() {
+    return React__default.createElement("img", Object.assign({
       alt: alt,
@@ -73,9 +55,17 @@ height: height,
       width: width
-    }, rest)));
+    }, rest));
   };
 
+  var ImageWithNoJavaScript = function ImageWithNoJavaScript() {
+    return React__default.createElement("noscript", null, React__default.createElement(SimpleImage, null));
+  };
+
   if (!isLazyLoaded) {
-    return React__default.createElement(ImageWhenJavaScriptDisabled, null);
-  }
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(ImageWithNoJavaScript, null), React__default.createElement(SimpleImage, null));
+  } // The condition is based on a static property.
+  // The hook will be called in the same order.
 
+  /* eslint-disable react-hooks/rules-of-hooks */
+
+
   var imageElementRef = React.useRef(null);
@@ -85,2 +75,4 @@ var isIntersecting = hooks.useIsIntersecting(imageElementRef, {
   });
+  /* eslint-enable react-hooks/rules-of-hooks */
+
   var sourceProperties = isIntersecting ? {
@@ -93,3 +85,3 @@ 'data-src': undefined,
   };
-  return React__default.createElement(React.Fragment, null, React__default.createElement(ImageWhenJavaScriptDisabled, null), React__default.createElement("img", Object.assign({
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ImageWithNoJavaScript, null), React__default.createElement("img", Object.assign({
     alt: alt,
@@ -106,5 +98,5 @@ height: height,
   var children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
-
-  return React__default.createElement("span", Object.assign({}, rest, {
+      testID = _ref['data-testid'];
+  return React__default.createElement("span", {
+    "data-testid": testID,
     style: {
@@ -120,3 +112,3 @@ border: 0,
     }
-  }), children);
+  }, children);
 }
@@ -123,0 +115,0 @@

dist/components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@innocuous/hooks");function n(e,t){if(null==e)return{};var i,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)t.indexOf(i=s[r])>=0||(n[i]=e[i]);return n}exports.Button=function(e){var t=e.children,r=e.className,s=void 0===r?void 0:r,a=e.isDisabled,c=void 0!==a&&a,d=e.onClick,l=e.tabIndex,o=void 0===l?0:l,u=e.type,h=void 0===u?"button":u,v=e["data-testid"],b=void 0===v?void 0:v,f=n(e,["children","className","isDisabled","isFullWidth","onClick","tabIndex","type","data-testid"]);return i.createElement("button",Object.assign({className:s,disabled:c,onClick:d,tabIndex:o,type:h,"data-testid":b},f),t)},exports.Image=function(e){var s=e.alt,a=e.firstPaintSource,c=e.height,d=e.isLazyLoaded,l=void 0===d||d,o=e.sizes,u=e.src,h=e.srcSet,v=e.width,b=n(e,["alt","firstPaintSource","height","isLazyLoaded","sizes","src","srcSet","width"]),f=function(){return i.createElement("noscript",null,i.createElement("img",Object.assign({alt:s,height:c,sizes:o,src:u,srcSet:h,width:v},b)))};if(!l)return i.createElement(f,null);var g=t.useRef(null),m=r.useIsIntersecting(g,{shouldObserveOnce:!0})?{"data-src":void 0,src:u}:{"data-src":u,src:a||void 0};return i.createElement(t.Fragment,null,i.createElement(f,null),i.createElement("img",Object.assign({alt:s,height:c,ref:g,sizes:o,srcSet:h,width:v},b,m)))},exports.ScreenReaderOnly=function(e){var t=e.children,r=n(e,["children"]);return i.createElement("span",Object.assign({},r,{style:{border:0,clip:"rect( 0, 0, 0, 0 )",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px"}}),t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@innocuous/hooks");exports.Button=function(e){return r.createElement("button",Object.assign({},e,{disabled:e.isDisabled}))},exports.Image=function(e){var i=e.alt,s=e.firstPaintSource,a=e.height,l=e.isLazyLoaded,c=void 0===l||l,u=e.sizes,o=e.src,d=e.srcSet,h=e.width,f=function(e,t){if(null==e)return{};var r,n,i={},s=Object.keys(e);for(n=0;n<s.length;n++)t.indexOf(r=s[n])>=0||(i[r]=e[r]);return i}(e,["alt","firstPaintSource","height","isLazyLoaded","sizes","src","srcSet","width"]),g=function(){return r.createElement("img",Object.assign({alt:i,height:a,sizes:u,src:o,srcSet:d,width:h},f))},m=function(){return r.createElement("noscript",null,r.createElement(g,null))};if(!c)return r.createElement(r.Fragment,null,r.createElement(m,null),r.createElement(g,null));var p=t.useRef(null),b=n.useIsIntersecting(p,{shouldObserveOnce:!0})?{"data-src":void 0,src:o}:{"data-src":o,src:s||void 0};return r.createElement(r.Fragment,null,r.createElement(m,null),r.createElement("img",Object.assign({alt:i,height:a,ref:p,sizes:u,srcSet:d,width:h},f,b)))},exports.ScreenReaderOnly=function(e){return r.createElement("span",{"data-testid":e["data-testid"],style:{border:0,clip:"rect( 0, 0, 0, 0 )",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px"}},e.children)};
 //# sourceMappingURL=components.cjs.production.min.js.map

dist/components.esm.js

@@ -1,4 +0,10 @@
-import React, { useRef, Fragment } from 'react';
+import React, { useRef } from 'react';
 import { useIsIntersecting } from '@innocuous/hooks';
 
+var Button = function Button(props) {
+  return React.createElement("button", Object.assign({}, props, {
+    disabled: props.isDisabled
+  }));
+};
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19,28 +25,2 @@ if (source == null) return {};
 
-function Button(_ref) {
-  var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? undefined : _ref$className,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-      _ref$isFullWidth = _ref.isFullWidth,
-      onClick = _ref.onClick,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$dataTestid = _ref['data-testid'],
-      dataTestID = _ref$dataTestid === void 0 ? undefined : _ref$dataTestid,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "isDisabled", "isFullWidth", "onClick", "tabIndex", "type", "data-testid"]);
-
-  return React.createElement("button", Object.assign({
-    className: className,
-    disabled: isDisabled,
-    onClick: onClick,
-    tabIndex: tabIndex,
-    type: type,
-    "data-testid": dataTestID
-  }, props), children);
-}
-
 function Image(_ref) {
@@ -58,4 +38,4 @@ var alt = _ref.alt,
 
-  var ImageWhenJavaScriptDisabled = function ImageWhenJavaScriptDisabled() {
-    return React.createElement("noscript", null, React.createElement("img", Object.assign({
+  var SimpleImage = function SimpleImage() {
+    return React.createElement("img", Object.assign({
       alt: alt,
@@ -67,9 +47,17 @@ height: height,
       width: width
-    }, rest)));
+    }, rest));
   };
 
+  var ImageWithNoJavaScript = function ImageWithNoJavaScript() {
+    return React.createElement("noscript", null, React.createElement(SimpleImage, null));
+  };
+
   if (!isLazyLoaded) {
-    return React.createElement(ImageWhenJavaScriptDisabled, null);
-  }
+    return React.createElement(React.Fragment, null, React.createElement(ImageWithNoJavaScript, null), React.createElement(SimpleImage, null));
+  } // The condition is based on a static property.
+  // The hook will be called in the same order.
 
+  /* eslint-disable react-hooks/rules-of-hooks */
+
+
   var imageElementRef = useRef(null);
@@ -79,2 +67,4 @@ var isIntersecting = useIsIntersecting(imageElementRef, {
   });
+  /* eslint-enable react-hooks/rules-of-hooks */
+
   var sourceProperties = isIntersecting ? {
@@ -87,3 +77,3 @@ 'data-src': undefined,
   };
-  return React.createElement(Fragment, null, React.createElement(ImageWhenJavaScriptDisabled, null), React.createElement("img", Object.assign({
+  return React.createElement(React.Fragment, null, React.createElement(ImageWithNoJavaScript, null), React.createElement("img", Object.assign({
     alt: alt,
@@ -100,5 +90,5 @@ height: height,
   var children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
-
-  return React.createElement("span", Object.assign({}, rest, {
+      testID = _ref['data-testid'];
+  return React.createElement("span", {
+    "data-testid": testID,
     style: {
@@ -114,3 +104,3 @@ border: 0,
     }
-  }), children);
+  }, children);
 }
@@ -117,0 +107,0 @@

dist/index.d.ts

@@ -1,3 +0,3 @@
-export { Button } from './components';
-export { Image } from './components';
-export { ScreenReaderOnly } from './components';
+export { Button, Props as ButtonProps } from './Button/Button';
+export { Image, Props as ImageProps, AccessibleImageProps } from './Image/Image';
+export { ScreenReaderOnly, Props as ScreenReaderOnlyProps, } from './ScreenReaderOnly/ScreenReaderOnly';

package.json

 {
   "name": "@innocuous/components",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A set of harmless React components.",
@@ -12,4 +12,4 @@ "license": "MIT",
   "main": "dist/index.js",
-  "umd:main": "dist/innocuous.umd.production.js",
-  "module": "dist/innocuous.es.production.js",
+  "umd:main": "dist/components.umd.production.js",
+  "module": "dist/components.es.production.js",
   "typings": "dist/index.d.ts",
@@ -21,17 +21,8 @@ "files": [
     "build": "tsdx build",
+    "build:storybook": "build-storybook",
     "lint": "tsdx lint",
     "start": "tsdx watch",
+    "storybook": "start-storybook -p 6006",
     "test": "tsdx test --env=jsdom"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "peerDependencies": {
@@ -42,32 +33,11 @@ "react": ">=16.8.6",
   "dependencies": {
-    "@innocuous/hooks": "^2.1.0"
+    "@innocuous/hooks": "^2.1.1"
   },
-  "devDependencies": {
-    "@testing-library/react": "^9.1.0",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.1",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-test-renderer": "^16.9.0",
-    "husky": "^3.0.3",
-    "np": "^5.0.3",
-    "prettier": "^1.18.2",
-    "pretty-quick": "^1.11.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-test-renderer": "^16.9.0",
-    "tsdx": "^0.9.0",
-    "tslib": "^1.10.0",
-    "typescript": "^3.6.2"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/innocuous-tech/components.git"
+    "url": "https://github.com/innocuous-tech/core.git",
+    "directory": "packages/components"
   },
-  "bugs": {
-    "url": "https://github.com/innocuous-tech/components/issues"
-  },
-  "homepage": "https://github.com/innocuous-tech/components#readme"
+  "homepage": "https://github.com/innocuous-tech/core/tree/master/packages/components",
+  "gitHead": "7e788e793158321596f3551a0e2fb93d61d09bc5"
 }

README.md

@@ -7,2 +7,4 @@ # Innocuous > Components
 
+![Build Status](https://github.com/innocuous-tech/components/workflows/Node%20CI/badge.svg)
+
 ## Installation
@@ -9,0 +11,0 @@

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 bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30359

5%

Dev dependency count

0

-100%

Lines of code

276

1.85%

Number of lines in readme file

64

3.23%

Worsened metrics

Number of package files

18

-18.18%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  @innocuous/hooks@^2.1.1