@vtex/admin-ui-system - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0-experimental.0

CHANGELOG.md

@@ -6,3 +6,18 @@ # Change Log
 
+# [0.7.0-experimental.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.6.0...@vtex/admin-ui-system@0.7.0-experimental.0) (2020-12-28)
+
+
+### Features
+
+* **system-styles:** add logic to recognize default values from styles properties ([9394420](https://github.com/vtex/onda/commit/9394420ff73a18aa36b03cd162520e5422f422d1))
+
+
+
+
+
+<<<<<<< HEAD
 # [0.6.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.5.1...@vtex/admin-ui-system@0.6.0) (2020-12-28)
+=======
+## [0.5.2-experimental.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.5.1...@vtex/admin-ui-system@0.5.2-experimental.0) (2020-12-23)
+>>>>>>> chore(release): publish [skip ci]
 
@@ -12,3 +27,7 @@
 
+<<<<<<< HEAD
 * **admin-ui-sytem:** rename createElement as jsx. Allow clasNames on styled components with cx func ([6eccbbb](https://github.com/vtex/onda/commit/6eccbbb97782587ef629d13cc944d9254f246125))
+=======
+* **system-styles:** add logic to recognize default values from styles properties ([d94b762](https://github.com/vtex/onda/commit/d94b7623af02b7069a50b781ec632ec915c26594))
+>>>>>>> chore(release): publish [skip ci]
 
@@ -15,0 +34,0 @@

dist/admin-ui-system.cjs.development.js

@@ -366,5 +366,20 @@ 'use strict';
       if (isObjectScale) {
-        value = styles(value)(theme);
-        Object.assign(result, value);
-        delete result[prop];
+        var defaultValue = value["default"];
+
+        if (defaultValue) {
+          if (typeof defaultValue === 'object') {
+            value = styles(defaultValue)(theme);
+            Object.assign(result, value);
+            delete result[prop];
+          } else {
+            var _value;
+
+            value = (_value = {}, _value[prop] = defaultValue, _value);
+            Object.assign(result, value);
+          }
+        } else {
+          value = styles(value)(theme);
+          Object.assign(result, value);
+          delete result[prop];
+        }
       }
@@ -371,0 +386,0 @@

dist/admin-ui-system.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 r=e(require("react")),t=require("@theme-ui/core"),o=require("@emotion/css"),n=e(require("lodash.get")),i=e(require("lodash.pick")),s=e(require("lodash.omit")),a=e(require("lodash.merge")),d=e(require("@emotion/is-prop-valid")),c=e(require("tiny-invariant")),l=require("@theme-ui/match-media"),p=require("@emotion/react"),u=require("@theme-ui/color");function b(){return(b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var g=function(e){return"function"==typeof e},f=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function m(e,r){var t={};for(var o in e)d(o)&&!r.includes(o)&&(t[o]=e[o]);return t}var h=function(e,r){var t;return b({},e,((t={})[r]=function(e,r){if("number"!=typeof r||r>=0){if("string"==typeof r&&r.startsWith("-")){var t=r.substring(1);return"-"+n(e,t,t)}return n(e,r,r)}var o=Math.abs(r),i=n(e,o,o);return"string"==typeof i?"-"+i:-1*Number(i)},t))},y={bg:"backgroundColor",fontSettings:"fontVariationSettings"},S=[40,52,64].map((function(e){return e+"em"})),v={space:[0,4,8,16,32,64,128,256,512],fontSizes:[12,14,16,20,24,32,48,64,72]},x={marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],size:["width","height"]},B=["margin","marginTop","marginRight","marginBottom","marginLeft","marginX","marginY","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","top","bottom","left","right"].reduce(h,{}),k={color:"colors",backgroundColor:"colors",borderColor:"colors",caretColor:"colors",columnRuleColor:"colors",opacity:"opacities",transition:"transitions",margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:"space",marginY:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:"space",paddingY:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",scrollPadding:"space",scrollPaddingTop:"space",scrollPaddingRight:"space",scrollPaddingBottom:"space",scrollPaddingLeft:"space",scrollPaddingX:"space",scrollPaddingY:"space",inset:"space",insetBlock:"space",insetBlockEnd:"space",insetBlockStart:"space",insetInline:"space",insetInlineEnd:"space",insetInlineStart:"space",top:"space",right:"space",bottom:"space",left:"space",gridGap:"space",gridColumnGap:"space",gridRowGap:"space",gap:"space",columnGap:"space",rowGap:"space",fontFamily:"fonts",fontSize:"fontSizes",fontWeight:"fontWeights",lineHeight:"lineHeights",letterSpacing:"letterSpacings",border:"border",borderTop:"borders",borderRight:"borders",borderBottom:"borders",borderLeft:"borders",borderWidth:"borderWidths",borderStyle:"borderStyles",borderRadius:"radii",borderTopRightRadius:"radii",borderTopLeftRadius:"radii",borderBottomRightRadius:"radii",borderBottomLeftRadius:"radii",borderTopWidth:"borderWidths",borderTopColor:"colors",borderTopStyle:"borderStyles",borderBottomWidth:"borderWidths",borderBottomColor:"colors",borderBottomStyle:"borderStyles",borderLeftWidth:"borderWidths",borderLeftColor:"colors",borderLeftStyle:"borderStyles",borderRightWidth:"borderWidths",borderRightColor:"colors",borderRightStyle:"borderStyles",borderBlock:"borders",borderBlockEnd:"borders",borderBlockEndStyle:"borderStyles",borderBlockEndWidth:"borderWidths",borderBlockStart:"borders",borderBlockStartStyle:"borderStyles",borderBlockStartWidth:"borderWidths",borderBlockStyle:"borderStyles",borderBlockWidth:"borderWidths",borderEndEndRadius:"radii",borderEndStartRadius:"radii",borderInline:"borders",borderInlineEnd:"borders",borderInlineEndStyle:"borderStyles",borderInlineEndWidth:"borderWidths",borderInlineStart:"borders",borderInlineStartStyle:"borderStyles",borderInlineStartWidth:"borderWidths",borderInlineStyle:"borderStyles",borderInlineWidth:"borderWidths",borderStartEndRadius:"radii",borderStartStartRadius:"radii",outlineColor:"colors",boxShadow:"shadows",textShadow:"shadows",zIndex:"zIndices",width:"sizes",minWidth:"sizes",maxWidth:"sizes",height:"sizes",minHeight:"sizes",maxHeight:"sizes",flexBasis:"sizes",size:"sizes",blockSize:"sizes",inlineSize:"sizes",maxBlockSize:"sizes",maxInlineSize:"sizes",minBlockSize:"sizes",minInlineSize:"sizes",fill:"colors",stroke:"colors",fontVariationSettings:"fontSettings",text:"text"},z=function e(r){return void 0===r&&(r={}),function(t){void 0===t&&(t={});var o=b({},v,"theme"in t?t.theme:t),i={},s="function"==typeof r?r(o):r;s.themeKey&&delete(s=b({},n(o,s.themeKey),s)).themeKey;var a=function(e){return function(r){var t={},o=[null].concat((r&&r.breakpoints||S).map((function(e){return"@media screen and (min-width: "+e+")"})));for(var n in e){var i=n,s=e[i];if("function"==typeof s&&(s=s(null!=r?r:{})),null!=s)if(Array.isArray(s))for(var a=0;a<s.slice(0,o.length).length;a++){var d,c=o[a];c?(t[c]=null!==(d=t[c])&&void 0!==d?d:{},null!=s[a]&&(t[c][i]=s[a])):t[i]=s[a]}else t[i]=s}return t}}(s)(o);for(var d in a){var c=a[d],l="function"==typeof c?c(o):c;if(l&&"object"==typeof l)i[d]=e(l)(o);else{var p=d in y?y[d]:d,u=n(o,p in k?k[p]:void 0,n(o,p,{})),g=n(B,p,n)(u,l,l),f=g&&"object"==typeof g;if(f&&(g=e(g)(o),Object.assign(i,g),delete i[p]),p in x)for(var m=x[p],h=0;h<m.length;h++)i[m[h]]=g;else f||(i[p]=g)}}return i}};function R(e){return function(o){return r.createElement(t.ThemeProvider,{theme:e},o.children)}}function W(e){return{stylesOf:function(r){return n(e,r,{})},cn:function(r){var t=z(r)(e);return o.css(t)}}}function I(){var e=t.useThemeUI().theme;return(f(e)||!e)&&c(!1),e}Object.keys(u).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return u[e]}})})),Object.defineProperty(exports,"cx",{enumerable:!0,get:function(){return o.cx}}),exports.get=n,exports.pick=i,exports.omit=s,exports.isPropValid=d,Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return p.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return p.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return p.keyframes}}),exports.cleanProps=function(e,r){void 0===r&&(r=[]);var t=m(e,r);return s.apply(void 0,[t].concat(r))},exports.createSystem=function(e){var r=R(e),t=W(e);return{ThemeProvider:r,cn:t.cn,stylesOf:t.stylesOf}},exports.createThemeConsumers=W,exports.createThemeProvider=R,exports.forwardRef=function(e){return r.forwardRef(e)},exports.isFunction=g,exports.isObjectEmpty=f,exports.jsx=function(e){var t=e.children,o=e.component,n=e.props,i=e.element,s=e.ref;return g(t)?t(n):r.createElement(o,b({as:i},n,{ref:s}),null!=t?t:null==n?void 0:n.children)},exports.merge=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return a.apply(void 0,[{}].concat(r))},exports.pickHTMLProps=m,exports.styles=z,exports.transformScale=h,exports.useClassName=function(e){return(0,W(I()).cn)(e)},exports.useResponsiveValue=function(e){var r=Array.isArray(e)?e:[e];return l.useResponsiveValue(r)},exports.useTheme=I;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=require("@theme-ui/core"),o=require("@emotion/css"),n=e(require("lodash.get")),i=e(require("lodash.pick")),s=e(require("lodash.omit")),a=e(require("lodash.merge")),d=e(require("@emotion/is-prop-valid")),c=e(require("tiny-invariant")),l=require("@theme-ui/match-media"),p=require("@emotion/react"),u=require("@theme-ui/color");function b(){return(b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var g=function(e){return"function"==typeof e},f=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function m(e,r){var t={};for(var o in e)d(o)&&!r.includes(o)&&(t[o]=e[o]);return t}var h=function(e,r){var t;return b({},e,((t={})[r]=function(e,r){if("number"!=typeof r||r>=0){if("string"==typeof r&&r.startsWith("-")){var t=r.substring(1);return"-"+n(e,t,t)}return n(e,r,r)}var o=Math.abs(r),i=n(e,o,o);return"string"==typeof i?"-"+i:-1*Number(i)},t))},y={bg:"backgroundColor",fontSettings:"fontVariationSettings"},S=[40,52,64].map((function(e){return e+"em"})),v={space:[0,4,8,16,32,64,128,256,512],fontSizes:[12,14,16,20,24,32,48,64,72]},x={marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],size:["width","height"]},B=["margin","marginTop","marginRight","marginBottom","marginLeft","marginX","marginY","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","top","bottom","left","right"].reduce(h,{}),k={color:"colors",backgroundColor:"colors",borderColor:"colors",caretColor:"colors",columnRuleColor:"colors",opacity:"opacities",transition:"transitions",margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:"space",marginY:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:"space",paddingY:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",scrollPadding:"space",scrollPaddingTop:"space",scrollPaddingRight:"space",scrollPaddingBottom:"space",scrollPaddingLeft:"space",scrollPaddingX:"space",scrollPaddingY:"space",inset:"space",insetBlock:"space",insetBlockEnd:"space",insetBlockStart:"space",insetInline:"space",insetInlineEnd:"space",insetInlineStart:"space",top:"space",right:"space",bottom:"space",left:"space",gridGap:"space",gridColumnGap:"space",gridRowGap:"space",gap:"space",columnGap:"space",rowGap:"space",fontFamily:"fonts",fontSize:"fontSizes",fontWeight:"fontWeights",lineHeight:"lineHeights",letterSpacing:"letterSpacings",border:"border",borderTop:"borders",borderRight:"borders",borderBottom:"borders",borderLeft:"borders",borderWidth:"borderWidths",borderStyle:"borderStyles",borderRadius:"radii",borderTopRightRadius:"radii",borderTopLeftRadius:"radii",borderBottomRightRadius:"radii",borderBottomLeftRadius:"radii",borderTopWidth:"borderWidths",borderTopColor:"colors",borderTopStyle:"borderStyles",borderBottomWidth:"borderWidths",borderBottomColor:"colors",borderBottomStyle:"borderStyles",borderLeftWidth:"borderWidths",borderLeftColor:"colors",borderLeftStyle:"borderStyles",borderRightWidth:"borderWidths",borderRightColor:"colors",borderRightStyle:"borderStyles",borderBlock:"borders",borderBlockEnd:"borders",borderBlockEndStyle:"borderStyles",borderBlockEndWidth:"borderWidths",borderBlockStart:"borders",borderBlockStartStyle:"borderStyles",borderBlockStartWidth:"borderWidths",borderBlockStyle:"borderStyles",borderBlockWidth:"borderWidths",borderEndEndRadius:"radii",borderEndStartRadius:"radii",borderInline:"borders",borderInlineEnd:"borders",borderInlineEndStyle:"borderStyles",borderInlineEndWidth:"borderWidths",borderInlineStart:"borders",borderInlineStartStyle:"borderStyles",borderInlineStartWidth:"borderWidths",borderInlineStyle:"borderStyles",borderInlineWidth:"borderWidths",borderStartEndRadius:"radii",borderStartStartRadius:"radii",outlineColor:"colors",boxShadow:"shadows",textShadow:"shadows",zIndex:"zIndices",width:"sizes",minWidth:"sizes",maxWidth:"sizes",height:"sizes",minHeight:"sizes",maxHeight:"sizes",flexBasis:"sizes",size:"sizes",blockSize:"sizes",inlineSize:"sizes",maxBlockSize:"sizes",maxInlineSize:"sizes",minBlockSize:"sizes",minInlineSize:"sizes",fill:"colors",stroke:"colors",fontVariationSettings:"fontSettings",text:"text"},z=function e(r){return void 0===r&&(r={}),function(t){void 0===t&&(t={});var o=b({},v,"theme"in t?t.theme:t),i={},s="function"==typeof r?r(o):r;s.themeKey&&delete(s=b({},n(o,s.themeKey),s)).themeKey;var a=function(e){return function(r){var t={},o=[null].concat((r&&r.breakpoints||S).map((function(e){return"@media screen and (min-width: "+e+")"})));for(var n in e){var i=n,s=e[i];if("function"==typeof s&&(s=s(null!=r?r:{})),null!=s)if(Array.isArray(s))for(var a=0;a<s.slice(0,o.length).length;a++){var d,c=o[a];c?(t[c]=null!==(d=t[c])&&void 0!==d?d:{},null!=s[a]&&(t[c][i]=s[a])):t[i]=s[a]}else t[i]=s}return t}}(s)(o);for(var d in a){var c=a[d],l="function"==typeof c?c(o):c;if(l&&"object"==typeof l)i[d]=e(l)(o);else{var p=d in y?y[d]:d,u=n(o,p in k?k[p]:void 0,n(o,p,{})),g=n(B,p,n)(u,l,l),f=g&&"object"==typeof g;if(f){var m,h=g.default;h?"object"==typeof h?(g=e(h)(o),Object.assign(i,g),delete i[p]):((m={})[p]=h,g=m,Object.assign(i,g)):(g=e(g)(o),Object.assign(i,g),delete i[p])}if(p in x)for(var z=x[p],R=0;R<z.length;R++)i[z[R]]=g;else f||(i[p]=g)}}return i}};function R(e){return function(o){return r.createElement(t.ThemeProvider,{theme:e},o.children)}}function W(e){return{stylesOf:function(r){return n(e,r,{})},cn:function(r){var t=z(r)(e);return o.css(t)}}}function I(){var e=t.useThemeUI().theme;return(f(e)||!e)&&c(!1),e}Object.keys(u).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return u[e]}})})),Object.defineProperty(exports,"cx",{enumerable:!0,get:function(){return o.cx}}),exports.get=n,exports.pick=i,exports.omit=s,exports.isPropValid=d,Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return p.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return p.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return p.keyframes}}),exports.cleanProps=function(e,r){void 0===r&&(r=[]);var t=m(e,r);return s.apply(void 0,[t].concat(r))},exports.createSystem=function(e){var r=R(e),t=W(e);return{ThemeProvider:r,cn:t.cn,stylesOf:t.stylesOf}},exports.createThemeConsumers=W,exports.createThemeProvider=R,exports.forwardRef=function(e){return r.forwardRef(e)},exports.isFunction=g,exports.isObjectEmpty=f,exports.jsx=function(e){var t=e.children,o=e.component,n=e.props,i=e.element,s=e.ref;return g(t)?t(n):r.createElement(o,b({as:i},n,{ref:s}),null!=t?t:null==n?void 0:n.children)},exports.merge=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return a.apply(void 0,[{}].concat(r))},exports.pickHTMLProps=m,exports.styles=z,exports.transformScale=h,exports.useClassName=function(e){return(0,W(I()).cn)(e)},exports.useResponsiveValue=function(e){var r=Array.isArray(e)?e:[e];return l.useResponsiveValue(r)},exports.useTheme=I;
 //# sourceMappingURL=admin-ui-system.cjs.production.min.js.map

dist/admin-ui-system.esm.js

@@ -364,5 +364,20 @@ import React from 'react';
       if (isObjectScale) {
-        value = styles(value)(theme);
-        Object.assign(result, value);
-        delete result[prop];
+        var defaultValue = value["default"];
+
+        if (defaultValue) {
+          if (typeof defaultValue === 'object') {
+            value = styles(defaultValue)(theme);
+            Object.assign(result, value);
+            delete result[prop];
+          } else {
+            var _value;
+
+            value = (_value = {}, _value[prop] = defaultValue, _value);
+            Object.assign(result, value);
+          }
+        } else {
+          value = styles(value)(theme);
+          Object.assign(result, value);
+          delete result[prop];
+        }
       }
@@ -369,0 +384,0 @@

package.json

 {
   "name": "@vtex/admin-ui-system",
-  "version": "0.6.0",
+  "version": "0.7.0-experimental.0",
   "main": "dist/index.js",
@@ -58,3 +58,3 @@ "module": "dist/admin-ui-system.esm.js",
   },
-  "gitHead": "62f9c59bef33a2480fa546616318e591edbb0238"
+  "gitHead": "69c4a8669d9e187a9f4f1934124db5daa1693ab7"
 }

src/__tests__/styles.test.ts

@@ -568,1 +568,69 @@ import { styles } from '../styles'
 })
+
+test('supports default values', () => {
+  const defaultTheme: Theme = {
+    colors: {
+      blue: {
+        default: 'blue-default',
+        hover: 'blue-hover',
+        secondary: {
+          default: 'blue-secondary-default',
+          hover: 'blue-secondary-hover',
+        },
+      },
+      red: {
+        default: 'red-default',
+        hover: 'red-hover',
+        secondary: {
+          default: 'red-secondary-default',
+          hover: 'red-secondary-hover',
+        },
+      },
+    },
+  }
+
+  const result = styles({
+    bg: 'blue',
+    ':hover': {
+      color: 'red.secondary',
+      borderColor: 'red.secondary.hover',
+    },
+  })(defaultTheme)
+
+  expect(result).toStrictEqual({
+    backgroundColor: 'blue-default',
+    ':hover': {
+      color: 'red-secondary-default',
+      borderColor: 'red-secondary-hover',
+    },
+  })
+})
+
+test('supports default objects', () => {
+  const defaultTheme: Theme = {
+    textFont: {
+      primary: {
+        default: {
+          lineHeight: 'default-lh',
+          fontSettings: 'regular',
+          fontSize: 'default-size',
+        },
+        highlight: {
+          lineHeight: 'highlight-lh',
+          fontSettings: 'regular',
+          fontSize: 2,
+        },
+      },
+    },
+  }
+
+  const result = styles({
+    textFont: 'primary',
+  })(defaultTheme)
+
+  expect(result).toStrictEqual({
+    lineHeight: 'default-lh',
+    fontVariationSettings: 'regular',
+    fontSize: 'default-size',
+  })
+})

src/styles.ts

@@ -98,5 +98,18 @@ import { CSSObject } from '@emotion/css'
     if (isObjectScale) {
-      value = styles(value)(theme)
-      Object.assign(result, value)
-      delete result[prop]
+      const defaultValue = value.default
+
+      if (defaultValue) {
+        if (typeof defaultValue === 'object') {
+          value = styles(defaultValue)(theme)
+          Object.assign(result, value)
+          delete result[prop]
+        } else {
+          value = { [prop]: defaultValue }
+          Object.assign(result, value)
+        }
+      } else {
+        value = styles(value)(theme)
+        Object.assign(result, value)
+        delete result[prop]
+      }
     }
@@ -103,0 +116,0 @@

No alert changes

Improved metrics

Total package byte prevSize

193282

increased by3.09%

Lines of code

3186

increased by3.27%

No dependency changes