@convoy/dapper - npm Package Compare versions

Comparing version 1.0.40 to 1.0.48

dist/src/compute.d.ts

@@ -1,2 +0,2 @@
-import { ModeDeclarations, ComputedStyleSheet } from './types';
-export default function compute<Styles extends Object, State>(compiledStyles: Styles, modeDeclarations: ModeDeclarations<State>, state: State): ComputedStyleSheet<keyof Styles>;
+import { CompiledStyleSheet, ComputedStyleSheet, ModeDeclarations } from './types';
+export default function compute<TKeys extends string, State>(compiledStyles: CompiledStyleSheet<TKeys>, modeDeclarations: ModeDeclarations<State>, state: State): ComputedStyleSheet<TKeys>;

dist/src/index.d.ts

@@ -0,9 +1,15 @@
+import reactTo from './reactTo';
 import { Configuration } from './configure';
+import create from './create';
 import { StyleRule } from './types';
-export { StyleRule, Configuration };
+export { Configuration, StyleRule, create as compile, reactTo };
 declare var _default: {
-    compute: <Styles extends Object, State>(compiledStyles: Styles, modeDeclarations: {
+    compute: <TKeys extends string, State>(compiledStyles: {
+        [Key in TKeys]: string | ((modes: {
+            [key: string]: boolean;
+        }) => string);
+    }, modeDeclarations: {
         [key: string]: (state: State) => boolean;
     }, state: State) => {
-        [Key in keyof Styles]: string;
+        [Key in TKeys]: string;
     };
@@ -10,0 +16,0 @@ configure: (cfg: Partial<Configuration>) => void;

dist/src/index.js

 "use strict";
+var reactTo_1 = require("./reactTo");
+exports.reactTo = reactTo_1.default;
 var compute_1 = require("./compute");
 var configure_1 = require("./configure");
 var create_1 = require("./create");
+exports.compile = create_1.default;
 var keyframes_1 = require("./keyframes");
@@ -6,0 +9,0 @@ var renderStatic_1 = require("./renderStatic");

dist/test/browser/app.js

@@ -5,2 +5,4 @@ "use strict";
 var Button_1 = require("./Button");
+var ButtonSimple_1 = require("./ButtonSimple");
+var InheritedButton_1 = require("./InheritedButton");
 var mountNode = document.getElementById('root');
@@ -11,3 +13,8 @@ ReactDOM.render(React.createElement("div", null,
     React.createElement(Button_1.default, { ghost: true }),
-    React.createElement(Button_1.default, { ghost: true, large: true })), mountNode);
+    React.createElement(Button_1.default, { ghost: true, large: true }),
+    React.createElement(ButtonSimple_1.default, null),
+    React.createElement("div", null,
+        React.createElement(InheritedButton_1.default, null),
+        React.createElement(InheritedButton_1.default, null),
+        React.createElement(InheritedButton_1.default, null))), mountNode);
 //# sourceMappingURL=app.js.map

dist/test/browser/Button.d.ts

@@ -23,3 +23,2 @@ /// <reference types="react" />
     };
-    componentWillUpdate(props: Props, state: State): void;
     render(): JSX.Element;
@@ -26,0 +25,0 @@ _renderText(): JSX.Element;

dist/test/browser/Button.js

@@ -56,3 +56,3 @@ "use strict";
         $hovered: {
-            borderRight: '1px solid #000',
+            color: 'white',
         },
@@ -85,3 +85,3 @@ },
         };
-        _this.styles = src_1.default.compute(STYLES, MODES, { props: _this.props, state: _this.state });
+        _this.styles = src_1.reactTo(_this, STYLES, MODES);
         _this._onMouseEnter = function () {
@@ -95,5 +95,2 @@ _this.setState({ hovered: true });
     }
-    Button.prototype.componentWillUpdate = function (props, state) {
-        this.styles = src_1.default.compute(STYLES, MODES, { props: props, state: state });
-    };
     Button.prototype.render = function () {
@@ -100,0 +97,0 @@ return (React.createElement("div", { className: classnames(this.styles.root, this.props.className), onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave }, this._renderText()));

dist/test/browser/ButtonSimple.js

@@ -7,3 +7,3 @@ "use strict";
     root: {
-        display: 'flex',
+        display: 'inline-flex',
         backgroundColor: '#BBB',
@@ -19,3 +19,3 @@ padding: 8,
     Button.prototype.render = function () {
-        return (React.createElement("div", { className: STYLES.root }));
+        return (React.createElement("div", { className: STYLES.root }, "BUTTEN"));
     };
@@ -22,0 +22,0 @@ return Button;

package.json

 {
   "name": "@convoy/dapper",
-  "version": "1.0.40",
+  "version": "1.0.48",
   "description": "Styling library",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

README.md

@@ -7,2 +7,80 @@ # Dapper
 
+## React usage
+
+### Static Styles
+
+```tsx
+import * as dapper from '@convoy/dapper';
+
+const STYLES = dapper.compile({
+  root: {
+    backgroundColor: '#eee',
+  },
+});
+
+export default class Button extends React.Component<Props, State> {
+  styles = dapper.reactTo(this, STYLES);
+
+  render() {
+    return (
+      <div className={this.styles.root} />
+    );
+  }
+}
+```
+
+### Dynamic Styles
+
+```tsx
+import * as dapper from '@convoy/dapper';
+
+interface State {
+  hovered: boolean;
+}
+
+const STYLES = dapper.compile({
+  root: {
+    backgroundColor: '#eee',
+    '$hover': {
+      backgroundColor: '#fff',
+    },
+  },
+  label: {
+    '$hover': {
+      color: '#999',
+    },
+  },
+});
+
+const MODES = {
+  hovered: ({ state }: { state: State }) => state.hovered,
+};
+
+export default class Button extends React.Component<Props, State> {
+  state = { hovered: false };
+  styles = dapper.reactTo(this, STYLES, MODES);
+
+  render() {
+    return (
+      <div
+        className={this.styles.root}
+        onMouseEnter={this._onMouseEnter}
+        onMouseLeave={this._onMouseLeave}
+      >
+        <div className={this.styles.label}>BUTTEN</div>
+      </div>
+    );
+  }
+
+  _onMouseEnter = () => {
+    this.setState({ hovered: true });
+  }
+
+  _onMouseLeave = () => {
+    this.setState({ hovered: false });
+  }
+}
+```
+
+
 ## Basic usage
@@ -23,3 +101,3 @@
 export default class Button extends React.Component<Props, State> {
-  render(): JSX.Element {
+  render() {
     return (
@@ -106,3 +184,3 @@ <div className={STYLES.root} />
 
-  render(): JSX.Element {
+  render() {
     return (
@@ -109,0 +187,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

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

Improved metrics

Total package byte prevSize

99856

increased by11.41%

Number of package files

99

increased by6.45%

Lines of code

1570

increased by12.3%

Number of lines in readme file

261

increased by42.62%

No dependency changes