@wireapp/react-ui-kit - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

demo/Demo.jsx

@@ -22,13 +22,2 @@ /*
   Bold,
-  Button,
-  ButtonLink,
-  COLOR,
-  Checkbox,
-  Column,
-  Columns,
-  Container,
-  ContainerMD,
-  ContainerSM,
-  ContainerXS,
-  Form,
   H1,
@@ -39,15 +28,15 @@ H2,
   Heading,
-  Input,
   Line,
   Link,
-  Loading,
-  Logo,
   Muted,
   Paragraph,
-  Select,
   Small,
   Text,
   Uppercase,
-} from '../src/';
+} from '@wireapp/react-ui-kit/dist/Text';
+import {Button, ButtonLink, Checkbox, Form, Input, Select} from '@wireapp/react-ui-kit/dist/Form';
+import {COLOR, Logo} from '@wireapp/react-ui-kit/dist/Identity';
+import {Column, Columns, Container, ContainerMD, ContainerSM, ContainerXS} from '@wireapp/react-ui-kit/dist/Grid';
 import Color from 'color';
+import {Loading} from '@wireapp/react-ui-kit/dist/Progress';
 import React from 'react';
@@ -67,5 +56,6 @@
           <Loading />
+          <Loading progress={0.33} />
+          <Loading progress={0.66} />
         </Column>
       </Columns>
-
       <H1>Grid</H1>
@@ -72,0 +62,0 @@ <Line />

demo/index.jsx

@@ -20,3 +20,2 @@ /*
 
-import {baseStyles, normalizeStyles} from '../src/';
 import {AppContainer} from 'react-hot-loader';
@@ -28,4 +27,2 @@ import Demo from './Demo';
 function render(Component) {
-  normalizeStyles();
-  baseStyles();
   ReactDOM.render(
@@ -32,0 +29,0 @@ <AppContainer>

dist/Base.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  body {\n    font-family: ', ';\n    font-weight: 300;\n    color: $text-color;\n    line-height: 1.5;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n'], ['\n  body {\n    font-family: ', ';\n    font-weight: 300;\n    color: $text-color;\n    line-height: 1.5;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  * {\n    box-sizing: border-box;\n  }\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;\n    font-weight: 300;\n    color: ', ';\n    line-height: 1.5;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n'], ['\n  * {\n    box-sizing: border-box;\n  }\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;\n    font-weight: 300;\n    color: ', ';\n    line-height: 1.5;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n  }\n']);
 
-var _variables = require('./variables');
+var _Identity = require('./Identity');
 
@@ -16,2 +16,2 @@ var _styledComponents = require('styled-components');
 
-exports.default = (0, _styledComponents.css)(_templateObject, _variables.FONT.fontFamily);
+exports.default = (0, _styledComponents.css)(_templateObject, _Identity.COLOR.GRAY_DARKEN_72);

dist/index.js

@@ -6,9 +6,6 @@ 'use strict';
 });
-exports.COLOR = exports.baseStyles = exports.normalizeStyles = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['', ''], ['', '']);
+var _Form = require('./Form');
 
-var _Button = require('./Button');
-
-Object.keys(_Button).forEach(function (key) {
+Object.keys(_Form).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -18,3 +15,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _Button[key];
+      return _Form[key];
     }
@@ -24,5 +21,5 @@ });
 
-var _Heading = require('./Heading');
+var _Grid = require('./Grid');
 
-Object.keys(_Heading).forEach(function (key) {
+Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -32,3 +29,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _Heading[key];
+      return _Grid[key];
     }
@@ -38,5 +35,5 @@ });
 
-var _Logo = require('./Logo');
+var _Identity = require('./Identity');
 
-Object.keys(_Logo).forEach(function (key) {
+Object.keys(_Identity).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,3 +43,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _Logo[key];
+      return _Identity[key];
     }
@@ -52,5 +49,5 @@ });
 
-var _Container = require('./Container');
+var _Progress = require('./Progress');
 
-Object.keys(_Container).forEach(function (key) {
+Object.keys(_Progress).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -60,3 +57,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _Container[key];
+      return _Progress[key];
     }
@@ -66,26 +63,2 @@ });
 
-var _Column = require('./Column');
-
-Object.keys(_Column).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Column[key];
-    }
-  });
-});
-
-var _Line = require('./Line');
-
-Object.keys(_Line).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Line[key];
-    }
-  });
-});
-
 var _Text = require('./Text');
@@ -103,114 +76,8 @@
 
-var _Paragraph = require('./Paragraph');
+var _globalStyles = require('./globalStyles');
 
-Object.keys(_Paragraph).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Paragraph[key];
-    }
-  });
-});
+var _globalStyles2 = _interopRequireDefault(_globalStyles);
 
-var _Input = require('./Input');
-
-Object.keys(_Input).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Input[key];
-    }
-  });
-});
-
-var _Select = require('./Select');
-
-Object.keys(_Select).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Select[key];
-    }
-  });
-});
-
-var _Loading = require('./Loading');
-
-Object.keys(_Loading).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Loading[key];
-    }
-  });
-});
-
-var _Checkbox = require('./Checkbox');
-
-Object.keys(_Checkbox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Checkbox[key];
-    }
-  });
-});
-
-var _Form = require('./Form');
-
-Object.keys(_Form).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Form[key];
-    }
-  });
-});
-
-var _Link = require('./Link');
-
-Object.keys(_Link).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Link[key];
-    }
-  });
-});
-
-var _variables = require('./variables');
-
-Object.defineProperty(exports, 'COLOR', {
-  enumerable: true,
-  get: function get() {
-    return _variables.COLOR;
-  }
-});
-
-var _Base = require('./Base');
-
-var _Base2 = _interopRequireDefault(_Base);
-
-var _styledComponents = require('styled-components');
-
-var _styledNormalize = require('styled-normalize');
-
-var _styledNormalize2 = _interopRequireDefault(_styledNormalize);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var normalizeStyles = exports.normalizeStyles = function normalizeStyles() {
-  return (0, _styledComponents.injectGlobal)(_templateObject, _styledNormalize2.default);
-};
-var baseStyles = exports.baseStyles = function baseStyles() {
-  return (0, _styledComponents.injectGlobal)(_templateObject, _Base2.default);
-};
+(0, _globalStyles2.default)();

package.json

 {
-  "name": "@wireapp/react-ui-kit",
-  "version": "0.0.1",
-  "main": "./dist/index.js",
-  "repository": "https://github.com/wireapp/wire-web-packages/tree/master/packages/react-ui-kit",
-  "scripts": {
-    "clear": "rimraf dist",
-    "dist": "yarn clear && yarn babel src --out-dir dist --no-comments",
-    "fix:script": "yarn test --fix",
-    "fix": "yarn fix:script",
-    "precommit": "lint-staged",
-    "start": "yarn start:demo",
-    "start:static": "gulp",
-    "start:demo": "webpack-dev-server",
-    "test": "eslint -c .eslintrc.yaml --ignore-path .gitignore --ignore-path .prettierignore '**/*.{js,jsx}'",
-    "preversion": "yarn test",
-    "version": "yarn dist"
-  },
   "dependencies": {
@@ -30,3 +13,2 @@ "color": "2.0.1",
     "babel-core": "6.26.0",
-    "babel-eslint": "8.0.2",
     "babel-loader": "7.1.2",
@@ -38,12 +20,5 @@ "babel-plugin-transform-class-properties": "6.24.1",
     "browser-sync": "2.18.13",
-    "eslint": "4.10.0",
-    "eslint-config-prettier": "2.7.0",
-    "eslint-plugin-prettier": "2.3.1",
-    "eslint-plugin-react": "7.4.0",
     "gulp": "3.9.1",
     "gulp-plumber": "1.1.0",
     "gulp-sass": "3.1.0",
-    "husky": "0.14.3",
-    "lint-staged": "4.3.0",
-    "prettier": "1.8.1",
     "react-hot-loader": "3.1.2",
@@ -53,3 +28,17 @@ "rimraf": "2.6.2",
     "webpack-dev-server": "2.9.4"
-  }
+  },
+  "license": "GPL-3.0",
+  "main": "./dist/index.js",
+  "name": "@wireapp/react-ui-kit",
+  "repository": "https://github.com/wireapp/wire-web-packages/tree/master/packages/react-ui-kit",
+  "scripts": {
+    "clear": "rimraf dist",
+    "dist": "yarn clear && yarn babel src --out-dir dist --no-comments",
+    "prepare": "yarn dist && node scripts/prepare.js",
+    "start": "yarn start:demo",
+    "start:static": "gulp",
+    "start:demo": "webpack-dev-server",
+    "version": "yarn dist"
+  },
+  "version": "0.0.2"
 }

src/Base.js

@@ -20,10 +20,13 @@ /*
 
-import {FONT} from './variables';
+import {COLOR} from './Identity';
 import {css} from 'styled-components';
 
 export default css`
+  * {
+    box-sizing: border-box;
+  }
   body {
-    font-family: ${FONT.fontFamily};
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
     font-weight: 300;
-    color: $text-color;
+    color: ${COLOR.GRAY_DARKEN_72};
     line-height: 1.5;
@@ -30,0 +33,0 @@ -moz-osx-font-smoothing: grayscale;

src/index.js

@@ -20,23 +20,10 @@ /*
 
-import baseStyle from './Base';
-import {injectGlobal} from 'styled-components';
-import styledNormalize from 'styled-normalize';
+import setGlobalStyles from './globalStyles';
 
-export const normalizeStyles = () => injectGlobal`${styledNormalize}`;
-export const baseStyles = () => injectGlobal`${baseStyle}`;
+setGlobalStyles();
 
-export * from './Button';
-export * from './Heading';
-export * from './Logo';
-export * from './Container';
-export * from './Column';
-export * from './Line';
+export * from './Form';
+export * from './Grid';
+export * from './Identity';
+export * from './Progress';
 export * from './Text';
-export * from './Paragraph';
-export * from './Input';
-export * from './Select';
-export * from './Loading';
-export * from './Checkbox';
-export * from './Form';
-export * from './Link';
-export {COLOR} from './variables';

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

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

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129080

increased by6.49%

Dev dependency count

15

decreased by-34.78%

Number of package files

77

increased by26.23%

Lines of code

2539

increased by9.3%

Worsened metrics

Number of low license alerts

3

increased by50%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes