react-var-ui - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/react-var-ui.cjs.development.js

@@ -332,2 +332,6 @@ 'use strict';
 
+  if (!value) {
+    return result;
+  }
+
   for (var i = 0; i < value.length; i++) {
@@ -345,2 +349,6 @@ var decimalPlaces = step[i].toString().split('.')[1].length;
 function percentValue(value, min, max) {
+  if (!value) {
+    return [50, 50];
+  }
+
   var result = [0, 0];
@@ -347,0 +355,0 @@

dist/react-var-ui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("lodash.clonedeep")),a=e(require("lodash.set")),l=e(require("lodash.result")),u=require("react-color"),o=t.createContext(void 0);function c(e,n,r){var a=t.useContext(o);return[t.useMemo((function(){var t;return null!=(t=null==a?void 0:a.getValue(e))?t:n}),[a,e,n]),t.useCallback((function(t){e&&a&&a.setValue(e,t),null==r||r(t)}),[e,a,r])]}var i=function(e){var t=e.children;return n.createElement("label",{className:"react-var-ui-label "+(e.className||"")},n.createElement("span",null,e.label),t)},s=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},n.createElement("path",{fillRule:"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"}))},v=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},n.createElement("path",{fillRule:"evenodd",d:"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"}))};function m(e,t,n,r,a){var l=r.toString().split(".")[1].length;return e=Math.round(e/r)*r,e=Math.max(t,e),e=Math.min(n,e),a?Math.round(e):parseFloat(e.toFixed(l))}function d(e,t,n,r){for(var a=[0,0],l=0;l<e.length;l++){var u=r[l].toString().split(".")[1].length;a[l]=Math.round(e[l]/r[l])*r[l],a[l]=Math.max(t[l],a[l]),a[l]=Math.min(n[l],a[l]),a[l]=parseFloat(a[l].toFixed(u))}return a}exports.VarBase=i,exports.VarCategory=function(e){var t=e.children;return n.createElement("div",{className:"react-var-ui-category"},n.createElement("div",{className:"react-var-ui-category-title"},e.label),!!t&&n.createElement("div",null,t))},exports.VarColor=function(e){var r=e.label,a=c(e.path,e.value,e.onChange),l=a[0],o=a[1],s=t.useState(!1),v=s[0],m=s[1],d=t.useCallback((function(){return m((function(e){return!e}))}),[m]),f=t.useCallback((function(){return m(!1)}),[m]);return n.createElement(i,{label:r},n.createElement("span",null,n.createElement("span",{className:"react-var-ui-color-value"},l),n.createElement("div",{className:"react-var-ui-color"},n.createElement("div",{className:"react-var-ui-color-swatch",onClick:d},n.createElement("div",{className:"react-var-ui-color-color",style:{background:l}})),v?n.createElement("div",{className:"react-var-ui-color-popover"},n.createElement("div",{className:"react-var-ui-color-cover",onClick:f}),n.createElement(u.SketchPicker,{color:l,onChange:function(e){return o(e.hex)}})):null)))},exports.VarSelect=function(e){var t=e.label,r=e.options,a=c(e.path,e.value,e.onChange),l=a[1];return n.createElement(i,{label:t},n.createElement("span",null,n.createElement("select",{value:a[0],onChange:function(e){return l(e.target.value)}},r.map((function(e){var t;return n.createElement("option",{key:e.key,value:null!=(t=e.value)?t:e.key},e.label)})))))},exports.VarSlider=function(e){var r=e.label,a=e.path,l=e.value,u=e.onChange,o=e.min,d=e.max,f=e.step,p=e.integer,h=e.defaultValue,E=e.showInput,g=e.showButtons,C=t.useRef(null),b=c(a,l,u),x=b[0],k=b[1],L=t.useMemo((function(){return m(x,o,d,f,!!p)}),[x,o,d,f,p]),N=t.useMemo((function(){return(L-o)/(d-o)*100}),[L,o,d]),w=t.useState(!1),M=w[0],V=w[1],y=t.useCallback((function(e){if(C.current){var t=C.current.getBoundingClientRect(),n=m(o+(e-t.left)/t.width*(d-o),o,d,f,!!p);k(n)}}),[k,p,o,d,f]);return t.useEffect((function(){if(M){var e=function(e){e.preventDefault(),e.stopPropagation(),y(e.clientX)},t=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&y(t.clientX)},n=function(){V(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",t),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n)}}})),n.createElement(i,{label:r},n.createElement("div",{className:"react-var-ui-slider"},n.createElement("div",{className:"react-var-ui-slider-track",ref:C,onClick:function(e){return y(e.clientX)},onDoubleClick:function(){return h&&k(h)},onMouseDown:function(e){e.preventDefault(),V(!0)},onTouchStart:function(e){e.preventDefault(),V(!0)}},n.createElement("div",{className:"react-var-ui-slider-content",style:{width:N+"%"}})),E?n.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:o,max:d,step:f,value:L,onChange:function(e){return k(p?parseInt(e.target.value):parseFloat(e.target.value))}}):n.createElement("span",null,L),g&&n.createElement(n.Fragment,null,n.createElement("button",{title:"Increase",onClick:function(){return k(m(x+f,o,d,f,!!p))}},n.createElement(v,null)),n.createElement("button",{title:"Decrease",onClick:function(){return k(m(x-f,o,d,f,!!p))}},n.createElement(s,null)))))},exports.VarToggle=function(e){var t=e.label,r=c(e.path,e.value,e.onChange),a=r[1];return n.createElement(i,{label:t},n.createElement("span",null,n.createElement("div",{className:"react-var-ui-toggle"},n.createElement("input",{type:"checkbox",checked:r[0],onChange:function(e){return a(e.target.checked)}}),n.createElement("span",{className:"react-var-ui-toggle-helper"}))))},exports.VarUI=function(e){var u=e.values,c=e.updateValues,i=e.children,s=t.useCallback((function(e){return e?l(u,e):void 0}),[u]),v=t.useCallback((function(e,t){c(a(r(u),e,t))}),[u,c]),m=t.useMemo((function(){return{values:u,getValue:s,setValue:v}}),[u,s,v]);return n.createElement(o.Provider,{value:m},n.createElement("div",{className:"react-var-ui"},i))},exports.VarUIContext=o,exports.VarXY=function(e){var r=e.label,a=e.path,l=e.value,u=e.onChange,o=e.defaultValue,s=void 0===o?[0,0]:o,v=e.min,m=void 0===v?[-1,-1]:v,f=e.max,p=void 0===f?[1,1]:f,h=e.step,E=void 0===h?[.01,.01]:h,g=t.useRef(null),C=c(a,l,u),b=C[0],x=C[1],k=t.useMemo((function(){return d(b,m,p,E)}),[b,m,p,E]),L=t.useMemo((function(){return function(e,t,n){for(var r=[0,0],a=0;a<e.length;a++)r[a]=(e[a]-t[a])/(n[a]-t[a])*100;return r}(k,m,p)}),[k,m,p]),N=t.useState(!1),w=N[0],M=N[1],V=t.useCallback((function(e,t){if(g.current){var n=g.current.getBoundingClientRect();console.log(n,e,t);var r=d([m[0]+(e-n.left)/n.width*(p[0]-m[0]),m[1]+(t-n.top)/n.height*(p[1]-m[1])],m,p,E);x(r)}}),[x,m,p,E]),y=t.useCallback((function(){void 0!==s&&x(s)}),[s,x]);return t.useEffect((function(){if(w){var e=function(e){e.preventDefault(),e.stopPropagation(),V(e.clientX,e.clientY)},t=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&V(t.clientX,t.clientY)},n=function(){M(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",t),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n)}}})),n.createElement(i,{label:r},n.createElement("span",{className:"react-var-ui-xy-value"},k[0],", ",k[1]),n.createElement("div",{className:"react-var-ui-xy"},n.createElement("div",{className:"react-var-ui-xy-space",ref:g,onClick:function(e){return V(e.clientX,e.clientY)},onDoubleClick:y,onMouseDown:function(e){e.preventDefault(),M(!0)},onTouchStart:function(e){e.preventDefault(),M(!0)}},n.createElement("div",{className:"react-var-ui-xy-control",style:{top:L[1]+"%",left:L[0]+"%"}}))))},exports.useVarUIValue=c;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("lodash.clonedeep")),a=e(require("lodash.set")),l=e(require("lodash.result")),u=require("react-color"),o=t.createContext(void 0);function c(e,n,r){var a=t.useContext(o);return[t.useMemo((function(){var t;return null!=(t=null==a?void 0:a.getValue(e))?t:n}),[a,e,n]),t.useCallback((function(t){e&&a&&a.setValue(e,t),null==r||r(t)}),[e,a,r])]}var i=function(e){var t=e.children;return n.createElement("label",{className:"react-var-ui-label "+(e.className||"")},n.createElement("span",null,e.label),t)},s=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},n.createElement("path",{fillRule:"evenodd",d:"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"}))},v=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"currentColor",viewBox:"0 0 16 16"},n.createElement("path",{fillRule:"evenodd",d:"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"}))};function m(e,t,n,r,a){var l=r.toString().split(".")[1].length;return e=Math.round(e/r)*r,e=Math.max(t,e),e=Math.min(n,e),a?Math.round(e):parseFloat(e.toFixed(l))}function d(e,t,n,r){var a=[0,0];if(!e)return a;for(var l=0;l<e.length;l++){var u=r[l].toString().split(".")[1].length;a[l]=Math.round(e[l]/r[l])*r[l],a[l]=Math.max(t[l],a[l]),a[l]=Math.min(n[l],a[l]),a[l]=parseFloat(a[l].toFixed(u))}return a}exports.VarBase=i,exports.VarCategory=function(e){var t=e.children;return n.createElement("div",{className:"react-var-ui-category"},n.createElement("div",{className:"react-var-ui-category-title"},e.label),!!t&&n.createElement("div",null,t))},exports.VarColor=function(e){var r=e.label,a=c(e.path,e.value,e.onChange),l=a[0],o=a[1],s=t.useState(!1),v=s[0],m=s[1],d=t.useCallback((function(){return m((function(e){return!e}))}),[m]),f=t.useCallback((function(){return m(!1)}),[m]);return n.createElement(i,{label:r},n.createElement("span",null,n.createElement("span",{className:"react-var-ui-color-value"},l),n.createElement("div",{className:"react-var-ui-color"},n.createElement("div",{className:"react-var-ui-color-swatch",onClick:d},n.createElement("div",{className:"react-var-ui-color-color",style:{background:l}})),v?n.createElement("div",{className:"react-var-ui-color-popover"},n.createElement("div",{className:"react-var-ui-color-cover",onClick:f}),n.createElement(u.SketchPicker,{color:l,onChange:function(e){return o(e.hex)}})):null)))},exports.VarSelect=function(e){var t=e.label,r=e.options,a=c(e.path,e.value,e.onChange),l=a[1];return n.createElement(i,{label:t},n.createElement("span",null,n.createElement("select",{value:a[0],onChange:function(e){return l(e.target.value)}},r.map((function(e){var t;return n.createElement("option",{key:e.key,value:null!=(t=e.value)?t:e.key},e.label)})))))},exports.VarSlider=function(e){var r=e.label,a=e.path,l=e.value,u=e.onChange,o=e.min,d=e.max,f=e.step,p=e.integer,h=e.defaultValue,E=e.showInput,g=e.showButtons,C=t.useRef(null),b=c(a,l,u),x=b[0],k=b[1],L=t.useMemo((function(){return m(x,o,d,f,!!p)}),[x,o,d,f,p]),N=t.useMemo((function(){return(L-o)/(d-o)*100}),[L,o,d]),w=t.useState(!1),M=w[0],V=w[1],y=t.useCallback((function(e){if(C.current){var t=C.current.getBoundingClientRect(),n=m(o+(e-t.left)/t.width*(d-o),o,d,f,!!p);k(n)}}),[k,p,o,d,f]);return t.useEffect((function(){if(M){var e=function(e){e.preventDefault(),e.stopPropagation(),y(e.clientX)},t=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&y(t.clientX)},n=function(){V(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",t),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n)}}})),n.createElement(i,{label:r},n.createElement("div",{className:"react-var-ui-slider"},n.createElement("div",{className:"react-var-ui-slider-track",ref:C,onClick:function(e){return y(e.clientX)},onDoubleClick:function(){return h&&k(h)},onMouseDown:function(e){e.preventDefault(),V(!0)},onTouchStart:function(e){e.preventDefault(),V(!0)}},n.createElement("div",{className:"react-var-ui-slider-content",style:{width:N+"%"}})),E?n.createElement("input",{className:"react-var-ui-slider-input",type:"number",min:o,max:d,step:f,value:L,onChange:function(e){return k(p?parseInt(e.target.value):parseFloat(e.target.value))}}):n.createElement("span",null,L),g&&n.createElement(n.Fragment,null,n.createElement("button",{title:"Increase",onClick:function(){return k(m(x+f,o,d,f,!!p))}},n.createElement(v,null)),n.createElement("button",{title:"Decrease",onClick:function(){return k(m(x-f,o,d,f,!!p))}},n.createElement(s,null)))))},exports.VarToggle=function(e){var t=e.label,r=c(e.path,e.value,e.onChange),a=r[1];return n.createElement(i,{label:t},n.createElement("span",null,n.createElement("div",{className:"react-var-ui-toggle"},n.createElement("input",{type:"checkbox",checked:r[0],onChange:function(e){return a(e.target.checked)}}),n.createElement("span",{className:"react-var-ui-toggle-helper"}))))},exports.VarUI=function(e){var u=e.values,c=e.updateValues,i=e.children,s=t.useCallback((function(e){return e?l(u,e):void 0}),[u]),v=t.useCallback((function(e,t){c(a(r(u),e,t))}),[u,c]),m=t.useMemo((function(){return{values:u,getValue:s,setValue:v}}),[u,s,v]);return n.createElement(o.Provider,{value:m},n.createElement("div",{className:"react-var-ui"},i))},exports.VarUIContext=o,exports.VarXY=function(e){var r=e.label,a=e.path,l=e.value,u=e.onChange,o=e.defaultValue,s=void 0===o?[0,0]:o,v=e.min,m=void 0===v?[-1,-1]:v,f=e.max,p=void 0===f?[1,1]:f,h=e.step,E=void 0===h?[.01,.01]:h,g=t.useRef(null),C=c(a,l,u),b=C[0],x=C[1],k=t.useMemo((function(){return d(b,m,p,E)}),[b,m,p,E]),L=t.useMemo((function(){return function(e,t,n){if(!e)return[50,50];for(var r=[0,0],a=0;a<e.length;a++)r[a]=(e[a]-t[a])/(n[a]-t[a])*100;return r}(k,m,p)}),[k,m,p]),N=t.useState(!1),w=N[0],M=N[1],V=t.useCallback((function(e,t){if(g.current){var n=g.current.getBoundingClientRect();console.log(n,e,t);var r=d([m[0]+(e-n.left)/n.width*(p[0]-m[0]),m[1]+(t-n.top)/n.height*(p[1]-m[1])],m,p,E);x(r)}}),[x,m,p,E]),y=t.useCallback((function(){void 0!==s&&x(s)}),[s,x]);return t.useEffect((function(){if(w){var e=function(e){e.preventDefault(),e.stopPropagation(),V(e.clientX,e.clientY)},t=function(e){e.preventDefault(),e.stopPropagation();var t=e.touches[0];t&&V(t.clientX,t.clientY)},n=function(){M(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",t),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n)}}})),n.createElement(i,{label:r},n.createElement("span",{className:"react-var-ui-xy-value"},k[0],", ",k[1]),n.createElement("div",{className:"react-var-ui-xy"},n.createElement("div",{className:"react-var-ui-xy-space",ref:g,onClick:function(e){return V(e.clientX,e.clientY)},onDoubleClick:y,onMouseDown:function(e){e.preventDefault(),M(!0)},onTouchStart:function(e){e.preventDefault(),M(!0)}},n.createElement("div",{className:"react-var-ui-xy-control",style:{top:L[1]+"%",left:L[0]+"%"}}))))},exports.useVarUIValue=c;
 //# sourceMappingURL=react-var-ui.cjs.production.min.js.map

dist/react-var-ui.esm.js

@@ -325,2 +325,6 @@ import React, { createContext, useContext, useMemo, useCallback, useState, useRef, useEffect } from 'react';
 
+  if (!value) {
+    return result;
+  }
+
   for (var i = 0; i < value.length; i++) {
@@ -338,2 +342,6 @@ var decimalPlaces = step[i].toString().split('.')[1].length;
 function percentValue(value, min, max) {
+  if (!value) {
+    return [50, 50];
+  }
+
   var result = [0, 0];
@@ -340,0 +348,0 @@

package.json

 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "BSD-3-Clause-Clear",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -8,2 +8,8 @@ <h1 align="center">react-var-ui</h1>
 <p align="center">
+  <a href="https://demo.matsz.dev/react-var-ui/">
+    <img src="https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshot.png" alt="Screenshot">
+  </a>
+</p>
+
+<p align="center">
 <img alt="workflow" src="https://img.shields.io/github/workflow/status/mat-sz/react-var-ui/CI">
@@ -21,2 +27,26 @@ <a href="https://npmjs.com/package/react-var-ui">
 
+## Installation
+
+Install `react-var-ui` with either npm or yarn:
+
+```
+yarn add react-var-ui
+# or
+npm install react-var-ui
+```
+
+Then include the CSS with:
+
+```css
+/* In your CSS/SCSS file: */
+@import 'react-var-ui/dist/index.css';
+```
+
+or:
+
+```js
+// In your JS/TS file (assuming your bundler supports loading CSS files):
+import 'react-var-ui/dist/index.css';
+```
+
 ## Example usage
@@ -23,0 +53,0 @@

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

142514

increased by0.94%

Lines of code

1000

increased by1.21%

Number of lines in readme file

100

increased by42.86%

No dependency changes