onno-react - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

cjs/index.js

@@ -55,7 +55,2 @@ "use strict"
 }
-const uniq = (list) =>
-  list.reduce((a, v) => {
-    if (a.indexOf(v) === -1) a.push(v)
-    return a
-  }, [])
 
@@ -68,3 +63,16 @@ const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
 const push = Array.prototype.push
-function render(keys, value) {
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
+function unique(renderers, initial = []) {
+  return renderers.reduce((collection, renderer) => {
+    if (renderer.options.renderers) {
+      unique(renderer.options.renderers, initial)
+    } else if (collection.indexOf(renderer) === -1) {
+      collection.push(renderer)
+    }
+    return collection
+  }, initial)
+}
+function renderStyle(keys, value) {
   if (isNil(value) || !isArray(keys) || !keys.length) return null
@@ -76,8 +84,36 @@ return keys.reduce((s, k) => {
 }
+function transformStyle(renderers) {
+  const renderer = compose(renderers)
+  const { propsKeys, styleKeys } = renderer.options
+  const transform = (styleObject) => {
+    const renderedStyle = renderer(styleObject)
+    const mergedStyle = renderedStyle && merge(renderedStyle)
+    return Object.keys(styleObject).reduce((result, key) => {
+      const hasPropsKey = propsKeys.includes(key)
+      const hasStyleKey = styleKeys.includes(key)
+      if (hasPropsKey && !hasStyleKey) delete result[key]
+      const value = result[key]
+      if (isObject(value)) result[key] = transform(value)
+      return result
+    }, Object.assign({}, styleObject, mergedStyle))
+  }
+  return transform
+}
 function style(options) {
-  const { propsKeys, styleKeys, themeKeys, transform, defaults } = options
+  const {
+    propsKeys,
+    styleKeys,
+    themeKeys,
+    transform,
+    renderers,
+    defaults
+  } = options
+  const transformer = isArray(renderers) && transformStyle(renderers)
+  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
+  if (isUndefined(styleKeys)) options.styleKeys = keys
   const renderValue = (value, theme) => {
     if (!isUndefined(resolve(themeKeys, theme))) {
       const mappedKeys = themeKeys.map((k) => `${k}.${value}`)
-      const themeValue = resolve(mappedKeys, theme)
+      const lookupKeys = value === "." ? themeKeys : mappedKeys
+      const themeValue = resolve(lookupKeys, theme)
       if (!isNil(themeValue)) value = themeValue
@@ -92,4 +128,3 @@ } else if (defaults) {
     } else {
-      const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-      return render(keys, value)
+      return renderStyle(keys, value)
     }
@@ -103,4 +138,8 @@ }
     const pushStyle = (value, query) => {
-      const result = renderValue(value, theme)
-      return result && styles.push(query ? { [query]: result } : result)
+      let result = renderValue(value, theme)
+      if (result) {
+        if (transformer) result = transformer(result)
+        if (query) result = { [query]: result }
+        styles.push(result)
+      }
     }
@@ -120,12 +159,13 @@ if (isObject(propsValue)) {
   }
+  renderProps.type = "style"
   renderProps.options = options
-  renderProps.composed = false
   return renderProps
 }
 function compose(...args) {
-  const renderers = uniq(toArray(args))
+  const renderers = unique(toArray(args))
   const options = {
     propsKeys: [],
     styleKeys: [],
-    themeKeys: []
+    themeKeys: [],
+    renderers
   }
@@ -138,18 +178,22 @@ renderers.forEach((fn) =>
   )
-  KEYS.forEach((key) => (options[key] = uniq(options[key])))
   const renderProps = (props) => {
-    const result = []
-    renderers.forEach((fn) => {
-      const r = fn(props)
-      if (r) push.apply(result, r)
-    })
+    const result = renderers.reduce((styles, renderer) => {
+      const output = renderer(props)
+      if (output) push.apply(styles, output)
+      return styles
+    }, [])
     return result.length ? result : null
   }
+  renderProps.type = "compose"
   renderProps.options = options
-  renderProps.composed = true
   return renderProps
 }
-const extend = (a) => (b) => style(Object.assign({}, a, b))
-const variant = (options) =>
-  style(Object.assign({}, options, { styleKeys: null }))
+function variant(options) {
+  const renderProps = style(Object.assign({}, options, { styleKeys: null }))
+  renderProps.type = "variant"
+  return renderProps
+}
+function extend(a) {
+  return (b) => style(Object.assign({}, a, b))
+}
 
@@ -272,3 +316,3 @@ const alignContent = style({
   propsKeys: ["borderRadius", "rad"],
-  themeKeys: ["borderRadii", "radii"],
+  themeKeys: ["borderRadii", "sizes"],
   transform: addPcOrPx,
@@ -682,13 +726,33 @@ defaults: PX_SCALE
 
+const globalSet = compose([
+  border,
+  borderRadius,
+  boxShadow,
+  colorSet,
+  opacity,
+  spaceSet,
+  sizeSet,
+  textSet,
+  transition
+])
+
+const globalStyle = variant({
+  propsKeys: ["globalStyle", "gst"],
+  themeKeys: ["globalStyles"],
+  renderers: [globalSet]
+})
 const buttonStyle = variant({
   propsKeys: ["buttonStyle", "bst"],
-  themeKeys: ["buttonStyles"]
+  themeKeys: ["buttonStyles"],
+  renderers: [globalSet]
 })
 const colorStyle = variant({
   propsKeys: ["colorStyle", "cst"],
-  themeKeys: ["colorStyles"]
+  themeKeys: ["colorStyles"],
+  renderers: [colorSet]
 })
 const textStyle = variant({
   propsKeys: ["textStyle", "tst"],
-  themeKeys: ["textStyles"]
+  themeKeys: ["textStyles"],
+  renderers: [textSet]
 })
@@ -767,2 +831,4 @@
 exports.get = get
+exports.globalSet = globalSet
+exports.globalStyle = globalStyle
 exports.grid = grid
@@ -816,2 +882,3 @@ exports.gridArea = gridArea
 exports.maxWidth = maxWidth
+exports.merge = merge
 exports.minHeight = minHeight
@@ -842,3 +909,3 @@ exports.minWidth = minWidth
 exports.propTypes = propTypes
-exports.render = render
+exports.renderStyle = renderStyle
 exports.resolve = resolve
@@ -862,4 +929,5 @@ exports.right = right
 exports.transformSet = transformSet
+exports.transformStyle = transformStyle
 exports.transition = transition
-exports.uniq = uniq
+exports.unique = unique
 exports.variant = variant
@@ -866,0 +934,0 @@ exports.verticalAlign = verticalAlign

esm/index.js

@@ -51,7 +51,2 @@ import { oneOfType, number, string, objectOf, arrayOf } from "prop-types"
 }
-const uniq = (list) =>
-  list.reduce((a, v) => {
-    if (a.indexOf(v) === -1) a.push(v)
-    return a
-  }, [])
 
@@ -64,3 +59,16 @@ const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
 const push = Array.prototype.push
-function render(keys, value) {
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
+function unique(renderers, initial = []) {
+  return renderers.reduce((collection, renderer) => {
+    if (renderer.options.renderers) {
+      unique(renderer.options.renderers, initial)
+    } else if (collection.indexOf(renderer) === -1) {
+      collection.push(renderer)
+    }
+    return collection
+  }, initial)
+}
+function renderStyle(keys, value) {
   if (isNil(value) || !isArray(keys) || !keys.length) return null
@@ -72,8 +80,36 @@ return keys.reduce((s, k) => {
 }
+function transformStyle(renderers) {
+  const renderer = compose(renderers)
+  const { propsKeys, styleKeys } = renderer.options
+  const transform = (styleObject) => {
+    const renderedStyle = renderer(styleObject)
+    const mergedStyle = renderedStyle && merge(renderedStyle)
+    return Object.keys(styleObject).reduce((result, key) => {
+      const hasPropsKey = propsKeys.includes(key)
+      const hasStyleKey = styleKeys.includes(key)
+      if (hasPropsKey && !hasStyleKey) delete result[key]
+      const value = result[key]
+      if (isObject(value)) result[key] = transform(value)
+      return result
+    }, Object.assign({}, styleObject, mergedStyle))
+  }
+  return transform
+}
 function style(options) {
-  const { propsKeys, styleKeys, themeKeys, transform, defaults } = options
+  const {
+    propsKeys,
+    styleKeys,
+    themeKeys,
+    transform,
+    renderers,
+    defaults
+  } = options
+  const transformer = isArray(renderers) && transformStyle(renderers)
+  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
+  if (isUndefined(styleKeys)) options.styleKeys = keys
   const renderValue = (value, theme) => {
     if (!isUndefined(resolve(themeKeys, theme))) {
       const mappedKeys = themeKeys.map((k) => `${k}.${value}`)
-      const themeValue = resolve(mappedKeys, theme)
+      const lookupKeys = value === "." ? themeKeys : mappedKeys
+      const themeValue = resolve(lookupKeys, theme)
       if (!isNil(themeValue)) value = themeValue
@@ -88,4 +124,3 @@ } else if (defaults) {
     } else {
-      const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-      return render(keys, value)
+      return renderStyle(keys, value)
     }
@@ -99,4 +134,8 @@ }
     const pushStyle = (value, query) => {
-      const result = renderValue(value, theme)
-      return result && styles.push(query ? { [query]: result } : result)
+      let result = renderValue(value, theme)
+      if (result) {
+        if (transformer) result = transformer(result)
+        if (query) result = { [query]: result }
+        styles.push(result)
+      }
     }
@@ -116,12 +155,13 @@ if (isObject(propsValue)) {
   }
+  renderProps.type = "style"
   renderProps.options = options
-  renderProps.composed = false
   return renderProps
 }
 function compose(...args) {
-  const renderers = uniq(toArray(args))
+  const renderers = unique(toArray(args))
   const options = {
     propsKeys: [],
     styleKeys: [],
-    themeKeys: []
+    themeKeys: [],
+    renderers
   }
@@ -134,18 +174,22 @@ renderers.forEach((fn) =>
   )
-  KEYS.forEach((key) => (options[key] = uniq(options[key])))
   const renderProps = (props) => {
-    const result = []
-    renderers.forEach((fn) => {
-      const r = fn(props)
-      if (r) push.apply(result, r)
-    })
+    const result = renderers.reduce((styles, renderer) => {
+      const output = renderer(props)
+      if (output) push.apply(styles, output)
+      return styles
+    }, [])
     return result.length ? result : null
   }
+  renderProps.type = "compose"
   renderProps.options = options
-  renderProps.composed = true
   return renderProps
 }
-const extend = (a) => (b) => style(Object.assign({}, a, b))
-const variant = (options) =>
-  style(Object.assign({}, options, { styleKeys: null }))
+function variant(options) {
+  const renderProps = style(Object.assign({}, options, { styleKeys: null }))
+  renderProps.type = "variant"
+  return renderProps
+}
+function extend(a) {
+  return (b) => style(Object.assign({}, a, b))
+}
 
@@ -268,3 +312,3 @@ const alignContent = style({
   propsKeys: ["borderRadius", "rad"],
-  themeKeys: ["borderRadii", "radii"],
+  themeKeys: ["borderRadii", "sizes"],
   transform: addPcOrPx,
@@ -678,13 +722,33 @@ defaults: PX_SCALE
 
+const globalSet = compose([
+  border,
+  borderRadius,
+  boxShadow,
+  colorSet,
+  opacity,
+  spaceSet,
+  sizeSet,
+  textSet,
+  transition
+])
+
+const globalStyle = variant({
+  propsKeys: ["globalStyle", "gst"],
+  themeKeys: ["globalStyles"],
+  renderers: [globalSet]
+})
 const buttonStyle = variant({
   propsKeys: ["buttonStyle", "bst"],
-  themeKeys: ["buttonStyles"]
+  themeKeys: ["buttonStyles"],
+  renderers: [globalSet]
 })
 const colorStyle = variant({
   propsKeys: ["colorStyle", "cst"],
-  themeKeys: ["colorStyles"]
+  themeKeys: ["colorStyles"],
+  renderers: [colorSet]
 })
 const textStyle = variant({
   propsKeys: ["textStyle", "tst"],
-  themeKeys: ["textStyles"]
+  themeKeys: ["textStyles"],
+  renderers: [textSet]
 })
@@ -761,2 +825,4 @@
   get,
+  globalSet,
+  globalStyle,
   grid,
@@ -810,2 +876,3 @@ gridArea,
   maxWidth,
+  merge,
   minHeight,
@@ -836,3 +903,3 @@ minWidth,
   propTypes,
-  render,
+  renderStyle,
   resolve,
@@ -856,4 +923,5 @@ right,
   transformSet,
+  transformStyle,
   transition,
-  uniq,
+  unique,
   variant,
@@ -860,0 +928,0 @@ verticalAlign,

package.json

 {
   "name": "onno-react",
   "license": "MIT",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Onno propTypes for React",
@@ -30,6 +30,6 @@ "homepage": "https://github.com/wagerfield/onno/tree/master/packages/onno-react#readme",
     "@types/prop-types": "15.7.1",
-    "onno": "0.0.13",
+    "onno": "0.0.14",
     "prop-types": "15.7.2"
   },
-  "gitHead": "357b87bfdc12b5b797a31d40dbb25c770c4f692d"
+  "gitHead": "4c5ee213e4a5d03518f17c1a2428763792ff4df7"
 }

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

48538

increased by8.11%

Lines of code

1824

increased by7.93%

Dependency changes

• + Addedcsstype@2.6.5(transitive)

• + Addedonno@0.0.14(transitive)

• - Removedcsstype@2.6.4(transitive)

• - Removedonno@0.0.13(transitive)

• Updatedonno@0.0.14