feat(box): implemented box component with styled component

Author: codebender828

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.6.3",
+    "@styled-system/should-forward-prop": "^5.1.2",
     "@vue/composition-api": "^0.3.2",
     "core-js": "^2.6.5",
     "css-loader": "^3.2.0",

src/App.vue

@@ -1,36 +1,71 @@
 <template>
-  <div>
+  <theme-provider :theme="theme">
     {{ state.greeting }}
-    <Button>{{ state.buttonText }}</Button>
-    <Button @click="increment" variant="ghost" color="success" size="lg" > Increment </Button>
-    <Button @click="increment" variant="flat" color="warning" size="lg" > Increment </Button>
-    <Button @click="increment" variant="ghost" color="danger" size="md" > Increment </Button>
-    <Button @click="increment" variant="link" color="dark" size="lg" > Increment </Button>
+    <Button variant="ghost" color="success" size="lg" @click="increment">{{ state.buttonText }}</Button>
     <br>
     <h1>{{ state.count }}</h1>
-  </div>
+    <br>
+    <Box
+      :w="['auto']"
+      px="5"
+      py="5"
+      shadow="lg"
+      my="5"
+      mb="5"
+      rounded="sm"
+      background-color="yellow.200"
+      color="yellow.700"
+    >
+      This is the new box component
+    </Box>
+    <Box
+      @click="increment"
+      w="auto"
+      background-color="indigo.700"
+      shadow="md"
+      px="4"
+      py="4"
+      rounded="lg"
+      d="flex"
+      color="indigo.100"
+    >
+      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>
+  </theme-provider>
 </template>
 
 <script>
+import ThemeProvider from './components/ThemeProvider'
 import Button from './components/Button'
-import { useIncrement as useFeature } from './use-increment'
+import Box from './components/Box'
+import theme from './lib/theme'
+import { useIncrement } from './use-increment'
 
 export default {
   setup () {
-    const { state, increment } = useFeature()
+    const { state, increment } = useIncrement()
 
     return {
       state,
-      increment
+      increment,
+      theme
     }
   },
   name: 'App',
   components: {
-    Button
+    Button,
+    ThemeProvider,
+    Box
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+html,
+body {
+  font-family: Rubik, sans-serif
+}
+.top-box {
+  margin-bottom: 100px;
+}
 </style>

src/components/Box/config.js

@@ -0,0 +1,143 @@
+import { system } from 'styled-system'
+/**
+ * This configuration is meant for the intent of:
+ *  - creating new custom properties for certian styled props
+ *  - creating shorthand properties for some long attribute names.
+ */
+export const config = {
+  roundedTop: {
+    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
+    scale: 'radii'
+  },
+  roundedBottom: {
+    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+    scale: 'radii'
+  },
+  roundedLeft: {
+    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+    scale: 'radii'
+  },
+  roundedRight: {
+    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
+    scale: 'radii'
+  },
+  roundedTopRight: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
+  roundedTopLeft: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  roundedBottomRight: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii'
+  },
+  roundedBottomLeft: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii'
+  },
+  rounded: {
+    property: 'borderRadius',
+    scale: 'radii'
+  },
+  d: {
+    property: 'display'
+  },
+  w: {
+    property: 'width',
+    scale: 'sizes'
+  },
+  minW: {
+    property: 'minWidth',
+    scale: 'sizes'
+  },
+  maxW: {
+    property: 'maxWidth',
+    scale: 'sizes'
+  },
+  h: {
+    property: 'height',
+    scale: 'sizes'
+  },
+  minH: {
+    property: 'minHeight',
+    scale: 'sizes'
+  },
+  maxH: {
+    property: 'maxHeight',
+    scale: 'sizes'
+  },
+  bgImg: {
+    property: 'backgroundImage'
+  },
+  bgImage: {
+    property: 'backgroundImage'
+  },
+  bgSize: {
+    property: 'backgroundSize'
+  },
+  bgPos: {
+    property: 'backgroundPosition'
+  },
+  bgRepeat: {
+    property: 'backgroundRepeat'
+  },
+  pos: {
+    property: 'position'
+  },
+  flexDir: {
+    property: 'flexDirection'
+  },
+  shadow: {
+    property: 'boxShadow',
+    scale: 'shadows'
+  },
+  textDecoration: { property: 'textDecoration' },
+  overflowX: true,
+  overflowY: true,
+  textTransform: true,
+  animation: true,
+  appearance: true,
+  transform: true,
+  transformOrigin: true,
+  visibility: true,
+  whiteSpace: true,
+  userSelect: true,
+  pointerEvents: true,
+  wordBreak: true,
+  overflowWrap: true,
+  textOverflow: true,
+  boxSizing: true,
+  cursor: true,
+  resize: true,
+  transition: true,
+  listStyleType: true,
+  listStylePosition: true,
+  listStyleImage: true,
+  fill: {
+    property: 'fill',
+    scale: 'colors'
+  },
+  stroke: {
+    property: 'stroke',
+    scale: 'colors'
+  },
+  objectFit: true,
+  objectPosition: true,
+  backgroundAttachment: {
+    property: 'backgroundAttachment'
+  },
+  outline: true,
+  float: true,
+  willChange: true
+}
+
+config.bgAttachment = config.backgroundAttachment
+config.textDecor = config.textDecoration
+config.listStylePos = config.listStylePosition
+config.listStyleImg = config.listStyleImage
+
+const styledConfig = system(config)
+
+export default styledConfig

src/components/Box/index.js

@@ -1 +1,67 @@
-// import styled from 'vue-styled-components'
+import styled from 'vue-styled-components'
+import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system'
+import { baseBoxProps } from './props'
+import styledConfig from './config'
+
+const baseEllipsis = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}
+
+/**
+ * @description Truncates text if `truncate` is set to true.
+ * @param {Object} props Props
+ */
+const truncate = props => {
+  if (props.truncate) {
+    if (!props.lineClamp) {
+      return baseEllipsis
+    }
+  }
+}
+
+/**
+ * @description Clamps text based on number of lines.
+ * @param {Object} props Props
+ */
+const clamp = props => {
+  if (props.lineClamp) {
+    return {
+      ...baseEllipsis,
+      '-webkit-box-orient': 'vertical',
+      '-webkit-line-clamp': `${props.lineClamp}`
+    }
+  }
+}
+
+// TODO: Implement Ripple (For Button)
+
+/**
+ * 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
+ * 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
+
+})(
+  layout,
+  color,
+  space,
+  background,
+  border,
+  borderRadius,
+  grid,
+  position,
+  shadow,
+  typography,
+  flexbox,
+  styledConfig,
+  truncate,
+  clamp
+)
+
+export default Box