refactor(props): filtering props with lodash-es

Author: codebender828

package.json

@@ -18,6 +18,7 @@
     "core-js": "^2.6.5",
     "css-loader": "^3.2.0",
     "esm": "^3.2.25",
+    "lodash-es": "^4.17.15",
     "register-service-worker": "^1.6.2",
     "style-loader": "^1.0.0",
     "vue": "^2.6.10",

src/App.vue

@@ -14,13 +14,20 @@
       mb="5"
       rounded="sm"
       background-color="blue.200"
+      border-left="4px"
       color="blue.700"
+      font-family="body"
     >
       This is box component
     </Box>
-    <Box>
+    <Box bg="yellow.200" border-left="4px" font-family="body" rounded="md" shadow="md" p="3" color="yellow.800">
+      <Box font-family="heading" font-size="3xl" mb="2">Random Title</Box>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis incidunt dolor impedit facilis doloribus accusamus aspernatur autem amet voluptate aliquid asperiores, repellendus tempora reiciendis. Aliquid sunt quasi rem magnam, voluptate cumque libero necessitatibus ut minima numquam fugiat? Blanditiis unde earum sint labore quidem quod adipisci quae incidunt dolorum rerum, laboriosam ipsa consectetur, laborum dolore porro quaerat debitis iusto qui pariatur dicta! Quo ab exercitationem possimus, facere vero perferendis quam illum expedita dolores qui tenetur voluptatem sequi eos reprehenderit ut excepturi, ratione nostrum dolor officia labore quis? Dolor, beatae! Eaque autem vero libero. Veritatis placeat blanditiis error, deleniti autem ab quaerat?
     </Box>
+
+    <Box bg="red.200" border-left="4px" my="5" rounded="md" shadow="md" p="3" color="red.800">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis incidunt
+    </Box>
   </theme-provider>
 </template>
 

src/components/Box/index.js

@@ -1,6 +1,7 @@
 import styled from 'vue-styled-components'
+import pickBy from 'lodash-es/pickBy'
 import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system'
-import { baseBoxProps } from './props'
+import allProps from './props'
 import styledConfig from './config'
 
 const baseEllipsis = {
@@ -59,23 +60,19 @@ const system = compose(
  * @returns {Object} Sanitized props object with defined values.
  */
 function cleanProps (props) {
-  for (const prop in props) {
-    if (/* props[prop] === null|| */ props[prop] === undefined) {
-      delete props[prop]
-    }
-  }
-  return props
+  const pure = pickBy(props, (prop) => !!prop)
+  return pure
 }
 
 /**
  * Note: All styled components in vue-styled-components forward all their props.
- * If the prop is not registered in the child, it is then it is bound as a native
+ * If the prop is not registered in the component, it is then it is bound as a native
  * HTML attribute
  * @see https://github.com/styled-components/vue-styled-components#passed-props
  * TODO: Will need to revisit this for Image component.
  */
 const Box = styled('div', {
-  ...baseBoxProps
+  ...allProps
 })`
   ${props => {
     const sanitizedProps = cleanProps(props)

src/components/Box/props.js

@@ -11,6 +11,7 @@ export const baseBoxProps = {
   truncate: [Boolean, Number],
   px: [Number, String, Array],
   py: [Number, String, Array],
+  m: [Number, String, Array],
   mt: [Number, String, Array],
   mr: [Number, String, Array],
   ml: [Number, String, Array],
@@ -44,8 +45,20 @@ const allProps = {
   d: [String, Array],
   lineClamp: [String, Number, Array],
   truncate: [Boolean, Number],
+  p: [Number, String, Array],
+  pt: [Number, String, Array],
+  pr: [Number, String, Array],
+  pb: [Number, String, Array],
+  pl: [Number, String, Array],
   px: [Number, String, Array],
   py: [Number, String, Array],
+  m: [Number, String, Array],
+  mt: [Number, String, Array],
+  mr: [Number, String, Array],
+  ml: [Number, String, Array],
+  mb: [Number, String, Array],
+  mx: [Number, String, Array],
+  my: [Number, String, Array],
   rounded: [String, Array],
   roundedTop: [String, Array],
   roundedBottom: [String, Array],
@@ -55,6 +68,8 @@ const allProps = {
   roundedTopLeft: [String, Array],
   roundedBottomRight: [String, Array],
   roundedBottomLeft: [String, Array],
+  border: [String, Array],
+  borderLeft: [String, Array],
   shadow: [Number, String, Array],
   backgroundColor: String,
   pos: [String, Array],
@@ -65,6 +80,9 @@ const allProps = {
   bgPos: [String, Array],
   bgRepeat: [String, Array],
   borderWidth: [String, Array],
+  fontFamily: [String, Array],
+  fontSize: [String, Array],
+  textAlign: [String, Array],
   textDecoration: [String, Array],
   overflowX: [String, Array],
   overflowY: [String, Array],

src/lib/theme/borders.js

@@ -8,4 +8,10 @@ const borders = {
   '4px': '4px solid'
 }
 
+export const borderWidths = {
+  'sm': '1px',
+  'md': '2px',
+  'lg': '4px'
+}
+
 export default borders

src/lib/theme/index.js

@@ -1,6 +1,6 @@
 import colors from './colors'
 import typography from './typography'
-import borders from './borders'
+import borders, { borderWidths } from './borders'
 import opacity from './opacity'
 import radii from './radii'
 import shadows from './shadows'
@@ -12,6 +12,7 @@ const space = baseSizes
 const theme = {
   colors,
   borders,
+  borderWidths,
   opacity,
   radii,
   shadows,

yarn.lock

@@ -9024,6 +9024,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"