td-stylekit - npm Package Compare versions

Comparing version 0.1.12 to 0.2.0

dist/es/Button/Button.js

@@ -11,3 +11,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import PropTypes from 'prop-types';
-import Colors from '../Colors';
+import { theme } from '../ThemeProvider';
 
@@ -17,3 +17,3 @@ var styles = {
     alignItems: 'center',
-    backgroundColor: Colors.PrimaryContrast,
+    backgroundColor: theme.color.PrimaryContrast,
     border: '1px solid transparent',
@@ -43,8 +43,8 @@ borderRadius: '0.25rem',
   primary: {
-    backgroundColor: Colors.Primary,
-    color: Colors.PrimaryContrast,
+    backgroundColor: theme.color.Primary,
+    color: theme.color.PrimaryContrast,
     borderColor: 'transparent'
   },
   outline: {
-    borderColor: Colors.Primary
+    borderColor: theme.color.Primary
   }
@@ -51,0 +51,0 @@ };

dist/es/index.js

@@ -1,6 +0,7 @@
-import Colors from './Colors';
 import Header from './Header';
 import Text from './Text';
 import Button from './Button';
+import View from './View';
+import ThemeProvider, { theme } from './ThemeProvider';
 
-export { Colors, Header, Text, Button };
+export { Header, Text, Button, View, ThemeProvider, theme };

dist/es/Text/Text.js

@@ -1,41 +0,21 @@
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+import glamorous, { Span } from 'glamorous';
+import { border, spacing } from '../mixins';
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var Text = glamorous(Span, {
+  displayName: 'Text',
+  filterProps: [].concat(_toConsumableArray(border.props), _toConsumableArray(spacing.props))
+})(
+// default styles
+function (_ref) {
+  var theme = _ref.theme;
+  return {
+    color: theme.color.LightPrimary,
+    fontSize: theme.fontSize[2]
+  };
+},
+// mixins
+border, spacing);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-var Text = function (_Component) {
-  _inherits(Text, _Component);
-
-  function Text() {
-    _classCallCheck(this, Text);
-
-    return _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).apply(this, arguments));
-  }
-
-  _createClass(Text, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        null,
-        this.props.children
-      );
-    }
-  }]);
-
-  return Text;
-}(Component);
-
-Text.propTypes = {
-  /** content */
-  children: PropTypes.node.isRequired
-};
-
-
 export default Text;

package.json

 {
   "name": "td-stylekit",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "module": "dist/es/index.js",
@@ -9,7 +9,11 @@ "scripts": {
     "test": "jest --env=jsdom",
+    "tdd": "yarn test --watch",
     "docs:start": "start-storybook --port 9001 --config-dir .storybook --static-dir docs/assets",
     "predocs:build": "rimraf dist-docs",
-    "docs:build": "build-storybook --config-dir .storybook --static-dir docs/assets --output-dir dist-docs"
+    "docs:build": "build-storybook --config-dir .storybook --static-dir docs/assets --output-dir dist-docs",
+    "lint": "eslint --ignore-path .gitignore ."
   },
   "dependencies": {
+    "glamor": "^2.20.40",
+    "glamorous": "^4.11.2",
     "keymirror": "^0.1.1",
@@ -38,4 +42,20 @@ "prop-types": "^15.6.0"
     "cross-env": "^5.1.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.0",
+    "eslint": "^4.14.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-standard": "^11.0.0-beta.0",
+    "eslint-config-standard-jsx": "^4.0.2",
+    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-prettier": "^2.4.0",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-td": "^1.0.3",
     "file-loader": "1.1.5",
     "jest": "21.2.1",
+    "jest-glamor-react": "^3.3.0",
     "marksy": "^5.0.0",
@@ -56,4 +76,6 @@ "raf": "^3.4.0",
     "setupFiles": [
-      "raf/polyfill"
+      "raf/polyfill",
+      "<rootDir>/config/jest/setup.js"
     ],
+    "setupTestFrameworkScriptFile": "<rootDir>/config/jest/setupFramework.js",
     "testMatch": [
@@ -63,3 +85,3 @@ "<rootDir>/src/**/__tests__/**/*.js?(x)",
     ],
-    "testEnvironment": "node",
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost",
@@ -84,4 +106,8 @@ "transform": {
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "plugin:td/recommended",
+    "env": {
+      "browser": true,
+      "jest": true
+    }
   }
 }

README.md

 # td-stylekit
 Common set of components and styles to be used across frontend products as well as documentation based on these components.
+
+## Installation
+
+```
+yarn add td-stylekit react react-dom
+```
+
+## Usage
+
+```javascript
+import React from 'react'
+import { Text, ThemeProvider } from 'td-stylekit'
+
+return () => (
+    <ThemeProvider>
+        <Text>text</Text>
+    </ThemeProvider>
+)
+```
+
+## Scripts
+
+script       | description
+-------------|--------------------------------------
+`build`      | generate a production build of module
+`test`       | run unit tests
+`docs:start` | start dev documentation server
+`docs:build` | generate static build of docs
+
+
+## Release
+
+```
+yarn version
+git push --follow-tags
+```

No alert changes

Improved metrics

Total package byte prevSize

296333

increased by10.7%

Number of package files

20

increased by33.33%

Lines of code

542

increased by22.07%

Number of lines in readme file

38

increased by1166.67%

Worsened metrics

Dependency count

6

increased by50%

Dev dependency count

42

increased by61.54%

Dependency changes

• + Addedglamor@^2.20.40

• + Addedglamorous@^4.11.2

• + Addedasap@2.0.6(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedbrcast@3.0.2(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfast-memoize@2.5.2(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedglamor@2.20.40(transitive)

• + Addedglamorous@4.13.1(transitive)

• + Addedhtml-element-attributes@1.3.1(transitive)

• + Addedhtml-tag-names@1.1.5(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedinline-style-prefixer@3.0.8(transitive)

• + Addedis-function@1.0.2(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedreact-html-attributes@1.4.6(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsvg-tag-names@1.1.2(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)