feat: add xgrids (bootstrap like grids)

package.json

@@ -6,7 +6,7 @@
   "bundlesize": [
     {
       "path": "./packages/system/dist/xstyled-system.min.js",
-      "maxSize": "4.1 kB"
+      "maxSize": "4.4 kB"
     },
     {
       "path": "./packages/styled-components/dist/xstyled-styled-components.min.js",

packages/system/src/style.js

@@ -39,7 +39,7 @@ function styleFromValue(cssProperties, value, props, themeGet) {
   return null
 }
 
-function createStyleGenerator(getStyle, props, generators) {
+export function createStyleGenerator(getStyle, props, generators) {
   getStyle.meta = {
     props,
     getStyle,
@@ -49,7 +49,7 @@ function createStyleGenerator(getStyle, props, generators) {
   return getStyle
 }
 
-function reduceBreakpoints(props, values, getStyle = identity) {
+export function reduceBreakpoints(props, values, getStyle = identity) {
   const breakpoints = getBreakpoints(props)
   const keys = Object.keys(values)
   let allStyle = {}

packages/system/src/style.test.js

@@ -1,12 +1,36 @@
-import { style } from './style'
+import { style, themeGetter } from './style'
 
 describe('#style', () => {
   const fontFamily = style({
     prop: 'fontFamily',
     key: 'fonts',
   })
 
-  describe('style', () => {
+  describe('#themeGetter', () => {
+    it('reads from theme', () => {
+      const scope = themeGetter({ key: 'scope' })
+      expect(scope('value')({ theme: { scope: { value: 'foo' } } })).toBe('foo')
+    })
+
+    it('uses defaultVariants', () => {
+      const scope = themeGetter({
+        key: 'scope',
+        defaultVariants: { foo: 'bar' },
+      })
+      const theme = { scope: { x: 'y' } }
+      expect(scope('foo')({})).toBe('bar')
+      expect(scope('x')({ theme })).toBe('y')
+    })
+
+    it('supports transform func', () => {
+      const scope = themeGetter({ key: 'scope', transform: x => x + 1 })
+      const theme = { scope: [1] }
+      expect(scope(10)({ theme })).toBe(11)
+      expect(scope(0)({ theme })).toBe(2)
+    })
+  })
+
+  describe('#style', () => {
     it('works without any theme', () => {
       expect(fontFamily({ fontFamily: 'title' })).toEqual({
         fontFamily: 'title',

packages/system/src/styles/index.js

@@ -8,6 +8,7 @@ import { grids } from './grids'
 import { positioning } from './positioning'
 import { space } from './space'
 import { typography } from './typography'
+import { xgrids } from './xgrids'
 
 export * from './backgrounds'
 export * from './basics'
@@ -18,6 +19,7 @@ export * from './layout'
 export * from './positioning'
 export * from './space'
 export * from './typography'
+export * from './xgrids'
 
 export const system = compose(
   backgrounds,
@@ -29,4 +31,5 @@ export const system = compose(
   positioning,
   space,
   typography,
+  xgrids,
 )

packages/system/src/styles/xgrids.js

@@ -0,0 +1,74 @@
+import { createStyleGenerator, reduceBreakpoints, compose } from '../style'
+import { obj } from '../util'
+import { getPercent } from './basics'
+
+export const row = createStyleGenerator(
+  () => ({
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    flexWrap: 'wrap',
+    display: 'flex',
+  }),
+  ['row'],
+)
+
+function getColStyle(props, size) {
+  if (size === true) {
+    return {
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '100%',
+    }
+  }
+
+  if (size === 'auto') {
+    return {
+      flex: `0 0 auto`,
+      maxWidth: 'none',
+      width: 'auto',
+    }
+  }
+
+  const sizeWidth = getPercent(size)(props)
+
+  return {
+    flex: `0 0 ${sizeWidth}`,
+    maxWidth: sizeWidth,
+  }
+}
+
+export const col = createStyleGenerator(
+  props => {
+    const value = props.col
+    const common = {
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '100%',
+    }
+
+    if (obj(value)) {
+      const breakpointsStyle = reduceBreakpoints(
+        props,
+        value,
+        breakpointValue => getColStyle(props, breakpointValue),
+      )
+
+      return {
+        ...common,
+        ...breakpointsStyle,
+      }
+    }
+
+    return {
+      ...common,
+      ...getColStyle(props, value),
+    }
+  },
+  ['col'],
+)
+
+export const xgrids = compose(
+  row,
+  col,
+)

packages/system/src/styles/xgrids.test.js

@@ -0,0 +1,55 @@
+import { xgrids } from './xgrids'
+
+describe('#xgrids', () => {
+  it('supports row', () => {
+    expect(xgrids({ row: true })).toEqual({
+      boxSizing: 'border-box',
+      flexGrow: 1,
+      flexWrap: 'wrap',
+      display: 'flex',
+    })
+  })
+
+  it('supports col', () => {
+    expect(xgrids({ col: 0.2 })).toEqual({
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '20%',
+      flex: '0 0 20%',
+    })
+
+    expect(xgrids({ col: 4 / 12 })).toEqual({
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '33.3333%',
+      flex: '0 0 33.3333%',
+    })
+
+    expect(xgrids({ col: true })).toEqual({
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '100%',
+    })
+
+    expect(xgrids({ col: 'auto' })).toEqual({
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: 'none',
+      flex: '0 0 auto',
+      width: 'auto',
+    })
+
+    expect(xgrids({ col: { xs: 0.2, md: 20 } })).toEqual({
+      boxSizing: 'border-box',
+      flexBasis: 0,
+      flexGrow: 1,
+      maxWidth: '20%',
+      flex: '0 0 20%',
+      '@media (min-width: 768px)': { flex: '0 0 20px', maxWidth: '20px' },
+    })
+  })
+})

packages/system/src/unit.js

@@ -4,4 +4,4 @@ export const unit = unit => value =>
   num(value) && value !== 0 ? `${value}${unit}` : value
 export const px = unit('px')
 export const percent = n =>
-  n !== 0 && n >= -1 && n <= 1 ? `${n * 100}%` : px(n)
+  n !== 0 && n >= -1 && n <= 1 ? `${Math.round(n * 10 ** 6) / 10 ** 4}%` : px(n)

packages/system/src/unit.test.js

@@ -29,6 +29,8 @@ describe('util', () => {
       expect(percent(0.3)).toBe('30%')
       expect(percent('20em')).toBe('20em')
       expect(percent(-0.3)).toBe('-30%')
+      // rounds percent
+      expect(percent(0.3333333333)).toBe('33.3333%')
     })
   })
 })

website/src/pages/docs/system-props.mdx

@@ -128,6 +128,40 @@ Example using `width`:
 <Box width={{ sm: 1, md: 0.5 }} />
 ```
 
+## XGrids
+
+XGrids are [bootstrap like](https://getbootstrap.com/) grids. It gives you powerful responsive grids using flexboxes.
+
+```js
+// A row containing three cols (same size)
+<Box row>
+  <Box col />
+  <Box col />
+  <Box col />
+</Box>
+
+// By default, cols measure 100%, up to "md" breakpoint, they measure "1/3" of the size
+<Box row>
+  <Box col={ xs: 1, md: { 1 / 3 }} />
+  <Box col={ xs: 1, md: { 1 / 3 }} />
+  <Box col={ xs: 1, md: { 1 / 3 }} />
+</Box>
+
+// First col use the size of content, others share the space
+<Box row>
+  <Box col="auto" />
+  <Box col />
+  <Box col />
+</Box>
+
+// Apply a gutter of 2 on each cols, remove gutter on the ends
+<Box row mx={-2}>
+  <Box col px={2} />
+  <Box col px={2} />
+  <Box col px={2} />
+</Box>
+```
+
 ## Typography
 
 Available typography utilities: