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

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.2.0...@vtex/admin-ui-system@0.3.0) (2020-11-19)
+
+
+### Features
+
+* **box:** allow polymorphism ([2ce788d](https://github.com/vtex/onda/commit/2ce788d8e239be1ce209c50d23792d289436e17c))
+
+
+
+
+
 # [0.2.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.1.0...@vtex/admin-ui-system@0.2.0) (2020-11-18)
@@ -8,0 +19,0 @@

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

@@ -129,17 +129,2 @@ 'use strict';
  */
-// export function createElement<T>(params: CreateElementParams<T>) {
-//   const { children, component, htmlProps, element, ref } = params
-//   /** ⤵️ Render props composition */
-//   if (isFunction(children)) {
-//     return children(htmlProps)
-//   }
-//   const safeProps = cleanProps(htmlProps, availableStyleProps)
-//   return React.createElement(
-//     component,
-//     // ✨ Reakit as composition
-//     // 🚫 components, just plain elements
-//     { as: element, ...safeProps, ref },
-//     children ?? safeProps?.children
-//   )
-// }
 
@@ -154,3 +139,4 @@ function createElementFactory(coreProps) {
         _params$state = params.state,
-        state = _params$state === void 0 ? {} : _params$state;
+        state = _params$state === void 0 ? {} : _params$state,
+        swallow = params.swallow;
     /** ⤵️ Render props composition */
@@ -162,4 +148,4 @@
 
-    var safeProps = cleanProps(htmlProps, coreProps);
-    var componentProps = merge(safeProps, state);
+    var elementProps = swallow ? htmlProps : cleanProps(htmlProps, coreProps);
+    var componentProps = merge(elementProps, state);
     return React.createElement(component, // ✨ Reakit as composition
@@ -171,3 +157,3 @@ // 🚫 components, just plain elements
       ref: ref
-    }), children !== null && children !== void 0 ? children : safeProps === null || safeProps === void 0 ? void 0 : safeProps.children);
+    }), children !== null && children !== void 0 ? children : elementProps === null || elementProps === void 0 ? void 0 : elementProps.children);
   };
@@ -174,0 +160,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 t=e(require("react")),r=e(require("lodash.get")),n=e(require("lodash.pick")),o=e(require("lodash.omit")),i=e(require("lodash.merge")),s=e(require("@emotion/is-prop-valid")),a=require("@theme-ui/core"),u=require("@theme-ui/css"),p=require("emotion"),c=e(require("tiny-invariant")),l=require("@theme-ui/match-media"),m=require("@emotion/core"),d=require("@theme-ui/color");function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var y=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return i.apply(void 0,[{}].concat(t))},h=function(e){return"function"==typeof e},v=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function g(e,t){void 0===t&&(t=[]);var r=b(e,t);return o.apply(void 0,[r].concat(t))}function b(e,t){var r={};for(var n in e)s(n)&&!t.includes(n)&&(r[n]=e[n]);return r}function x(e){var t=e.theme,r=void 0===t?{}:t,n=e.styles,o=u.css(void 0===n?{}:n)(r);return p.css(o)}function P(e){var t=e.theme,o=e.props,i=void 0===o?{}:o,s=e.patternKey,a=void 0===s?"patterns":s,u=e.styleKeys,p=void 0===u?[]:u,c=Object.keys(r(t,a,{})),l=n.apply(void 0,[i].concat(c)),m=n.apply(void 0,[i].concat(p));return{patternProps:Object.keys(l).reduce((function(e,n){var o=a+"."+n+"."+r(l,n,"");return f({},e,r(t,o,{}))}),{}),styleProps:m}}var j=["padding","paddingLeft","paddingRight","paddingTop","paddingBottom","margin","marginLeft","marginRight","marginTop","marginBottom","paddingX","paddingY","marginX","marginY","height","width","minHeight","minWidth","maxHeight","maxWidth","tabable","focusable","spacing","size","variant","orientation","wrap","colorMode"];function K(e){var t=e.theme,n=e.patternKey,o=void 0===n?"patterns":n,i=e.styleKeys,s=void 0===i?j:i;return{getClassName:function(e){var n=e.props,i=void 0===n?{}:n,a=e.themeKey,u=r(t,void 0===a?"":a,{}),p=r(i,"styles",{}),c=P({theme:t,props:i,patternKey:o,styleKeys:s}),l=y(u,c.patternProps,c.styleProps,p);return x({theme:t,styles:l})},componentStyles:function(e){var n=r(t,e,{});return x({theme:t,styles:n})},patternStyles:function(e){var r=P({theme:t,props:e,patternKey:o,styleKeys:s}),n=y(r.patternProps,r.styleProps);return x({theme:t,styles:n})},cn:function(e){return x({theme:t,styles:e})}}}function O(){var e=a.useThemeUI().theme;return(v(e)||!e)&&c(!1),e}Object.keys(d).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return d[e]}})})),exports.get=r,exports.pick=n,exports.omit=o,exports.isPropValid=s,Object.defineProperty(exports,"jsx",{enumerable:!0,get:function(){return a.jsx}}),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return m.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return m.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return m.keyframes}}),exports.cleanProps=g,exports.createSystem=function(e){var r,n=e.theme,o=e.patternKey,i=void 0===o?"patterns":o,s=e.styleKeys,u=void 0===s?[]:s,p=function(e){return function(r){return t.createElement(a.ThemeProvider,{theme:e},r.children)}}(n),c=K({theme:n,patternKey:i,styleKeys:u}),l=(r=u,function(e){var n=e.children,o=e.component,i=e.htmlProps,s=e.element,a=e.ref,u=e.state,p=void 0===u?{}:u;if(h(n))return n(i);var c=g(i,r),l=y(c,p);return t.createElement(o,f({as:s},l,{ref:a}),null!=n?n:null==c?void 0:c.children)}),m=f({createElement:l},c);return f({ThemeProvider:p},m)},exports.forwardRef=function(e){return t.forwardRef(e)},exports.isFunction=h,exports.isObjectEmpty=v,exports.merge=y,exports.pickHTMLProps=b,exports.useClassName=function(e){var t=e.props,r=e.themeKey;return(0,K({theme:O()}).getClassName)({props:t,themeKey:r})},exports.useResponsiveValue=function(e){var t=Array.isArray(e)?e:[e];return l.useResponsiveValue(t)},exports.useTheme=O;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=e(require("lodash.get")),n=e(require("lodash.pick")),o=e(require("lodash.omit")),i=e(require("lodash.merge")),s=e(require("@emotion/is-prop-valid")),a=require("@theme-ui/core"),u=require("@theme-ui/css"),p=require("emotion"),c=e(require("tiny-invariant")),l=require("@theme-ui/match-media"),m=require("@emotion/core"),d=require("@theme-ui/color");function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var y=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return i.apply(void 0,[{}].concat(t))},h=function(e){return"function"==typeof e},v=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function g(e,t){void 0===t&&(t=[]);var r=b(e,t);return o.apply(void 0,[r].concat(t))}function b(e,t){var r={};for(var n in e)s(n)&&!t.includes(n)&&(r[n]=e[n]);return r}function x(e){var t=e.theme,r=void 0===t?{}:t,n=e.styles,o=u.css(void 0===n?{}:n)(r);return p.css(o)}function P(e){var t=e.theme,o=e.props,i=void 0===o?{}:o,s=e.patternKey,a=void 0===s?"patterns":s,u=e.styleKeys,p=void 0===u?[]:u,c=Object.keys(r(t,a,{})),l=n.apply(void 0,[i].concat(c)),m=n.apply(void 0,[i].concat(p));return{patternProps:Object.keys(l).reduce((function(e,n){var o=a+"."+n+"."+r(l,n,"");return f({},e,r(t,o,{}))}),{}),styleProps:m}}var j=["padding","paddingLeft","paddingRight","paddingTop","paddingBottom","margin","marginLeft","marginRight","marginTop","marginBottom","paddingX","paddingY","marginX","marginY","height","width","minHeight","minWidth","maxHeight","maxWidth","tabable","focusable","spacing","size","variant","orientation","wrap","colorMode"];function K(e){var t=e.theme,n=e.patternKey,o=void 0===n?"patterns":n,i=e.styleKeys,s=void 0===i?j:i;return{getClassName:function(e){var n=e.props,i=void 0===n?{}:n,a=e.themeKey,u=r(t,void 0===a?"":a,{}),p=r(i,"styles",{}),c=P({theme:t,props:i,patternKey:o,styleKeys:s}),l=y(u,c.patternProps,c.styleProps,p);return x({theme:t,styles:l})},componentStyles:function(e){var n=r(t,e,{});return x({theme:t,styles:n})},patternStyles:function(e){var r=P({theme:t,props:e,patternKey:o,styleKeys:s}),n=y(r.patternProps,r.styleProps);return x({theme:t,styles:n})},cn:function(e){return x({theme:t,styles:e})}}}function O(){var e=a.useThemeUI().theme;return(v(e)||!e)&&c(!1),e}Object.keys(d).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return d[e]}})})),exports.get=r,exports.pick=n,exports.omit=o,exports.isPropValid=s,Object.defineProperty(exports,"jsx",{enumerable:!0,get:function(){return a.jsx}}),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return m.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return m.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return m.keyframes}}),exports.cleanProps=g,exports.createSystem=function(e){var r,n=e.theme,o=e.patternKey,i=void 0===o?"patterns":o,s=e.styleKeys,u=void 0===s?[]:s,p=function(e){return function(r){return t.createElement(a.ThemeProvider,{theme:e},r.children)}}(n),c=K({theme:n,patternKey:i,styleKeys:u}),l=(r=u,function(e){var n=e.children,o=e.component,i=e.htmlProps,s=e.element,a=e.ref,u=e.state,p=void 0===u?{}:u,c=e.swallow;if(h(n))return n(i);var l=c?i:g(i,r),m=y(l,p);return t.createElement(o,f({as:s},m,{ref:a}),null!=n?n:null==l?void 0:l.children)}),m=f({createElement:l},c);return f({ThemeProvider:p},m)},exports.forwardRef=function(e){return t.forwardRef(e)},exports.isFunction=h,exports.isObjectEmpty=v,exports.merge=y,exports.pickHTMLProps=b,exports.useClassName=function(e){var t=e.props,r=e.themeKey;return(0,K({theme:O()}).getClassName)({props:t,themeKey:r})},exports.useResponsiveValue=function(e){var t=Array.isArray(e)?e:[e];return l.useResponsiveValue(t)},exports.useTheme=O;
 //# sourceMappingURL=admin-ui-system.cjs.production.min.js.map

dist/admin-ui-system.esm.js

@@ -128,17 +128,2 @@ import React from 'react';
  */
-// export function createElement<T>(params: CreateElementParams<T>) {
-//   const { children, component, htmlProps, element, ref } = params
-//   /** ⤵️ Render props composition */
-//   if (isFunction(children)) {
-//     return children(htmlProps)
-//   }
-//   const safeProps = cleanProps(htmlProps, availableStyleProps)
-//   return React.createElement(
-//     component,
-//     // ✨ Reakit as composition
-//     // 🚫 components, just plain elements
-//     { as: element, ...safeProps, ref },
-//     children ?? safeProps?.children
-//   )
-// }
 
@@ -153,3 +138,4 @@ function createElementFactory(coreProps) {
         _params$state = params.state,
-        state = _params$state === void 0 ? {} : _params$state;
+        state = _params$state === void 0 ? {} : _params$state,
+        swallow = params.swallow;
     /** ⤵️ Render props composition */
@@ -161,4 +147,4 @@
 
-    var safeProps = cleanProps(htmlProps, coreProps);
-    var componentProps = merge(safeProps, state);
+    var elementProps = swallow ? htmlProps : cleanProps(htmlProps, coreProps);
+    var componentProps = merge(elementProps, state);
     return React.createElement(component, // ✨ Reakit as composition
@@ -170,3 +156,3 @@ // 🚫 components, just plain elements
       ref: ref
-    }), children !== null && children !== void 0 ? children : safeProps === null || safeProps === void 0 ? void 0 : safeProps.children);
+    }), children !== null && children !== void 0 ? children : elementProps === null || elementProps === void 0 ? void 0 : elementProps.children);
   };
@@ -173,0 +159,0 @@ }

dist/createSystem/createElementFactory.d.ts

@@ -49,2 +49,7 @@ import { Ref, ReactNode, ComponentType, PropsWithChildren, ElementType } from 'react';
     state?: any;
+    /**
+     * If true, will let the props pass throught without cleaning
+     * ! 🚨 use it with caution
+     */
+    swallow?: boolean;
 }

package.json

 {
   "name": "@vtex/admin-ui-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/index.js",
@@ -60,3 +60,3 @@ "module": "dist/admin-ui-system.esm.js",
   },
-  "gitHead": "0cf6a460cf6ecba722b720d2c60a13c625912a5e"
+  "gitHead": "4763eff0d5d0284878d0739a3a46d0605fd53b28"
 }

No alert changes

Worsened metrics

Total package byte prevSize

106366

decreased by-1.78%

Lines of code

1515

decreased by-1.62%

No dependency changes