feat: introduce universal system (#117)

Author: gregberge

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'no-plusplus': 'off',
     'no-return-assign': 'off',
     'no-param-reassign': 'off',
+    'no-nested-ternary': 'off',
     'no-shadow': 'off',
     'default-case': 'off',
     'no-underscore-dangle': ['off', { allow: ['__smoothUI', '__scTheme'] }],

docs/system/GettingStarted.mdx

@@ -0,0 +1,65 @@
+---
+name: Getting Started
+menu: System
+order: 1
+---
+
+import { Playground } from 'docz'
+import { Box, system, styled } from '@smooth-ui/core-sc'
+
+# System
+
+Smooth UI has a powerful style system that gives you a real styling power, it ensure a consistency in your design and reduce the amount of code to produce things.
+
+## System Props
+
+All Smooth UI components support system props, styling a component can be done by setting props:
+
+<Playground>
+  <Box
+    backgroundColor="primary"
+    width={{ sm: 1, md: 0.5 }}
+    height={100}
+    mx="auto"
+    p={2}
+  />
+</Playground>
+
+The above example create a red `div` with:
+
+- A background with color "primary"
+- A width of `100%` on mobile, `50%` on desktop
+- A height of `100px`
+- A padding of `16px`
+- A `marginLeft` and a `marginRight` of `50%`
+
+[Read more about creating components with system props](/docs-system-props)
+
+## Styled System
+
+The system can also be used to create styled components, it is like an alternative to the traditional CSS. It gives you more power and more consistency by automatically reading values from theme.
+
+<Playground>
+  {() => {
+    const MyBox = styled.div(
+      system({
+        backgroundColor: 'primary',
+        width: { sm: 1, md: 0.5 },
+        height: 100,
+        mx: 'auto',
+        p: 2,
+      }),
+    )
+    return <MyBox />
+  }}
+</Playground>
+
+The above example create a `div` with:
+
+- A background with color "primary"
+- A width of `100%` on mobile, `50%` on desktop
+- A height of `100px`
+- A padding of `16px`
+- A `marginLeft` and a `marginRight` of `50%`
+
+[Read more about using system to create components](/docs-styled-system)

docs/system/Props.mdx

@@ -0,0 +1,109 @@
+---
+name: System props
+menu: System
+order: 2
+---
+
+import { Box } from '@smooth-ui/core-sc'
+
+# System props
+
+System props is an efficient way to style a component without writing any line of CSS. System props components can be created in several ways.
+
+## Use `Box` component (or any Smooth UI component)
+
+The easiest solution is to import the `Box` component from Smooth UI. It is just a simple `div` with system props.
+
+```js
+import { Box } from '@smooth-ui/core-sc'
+
+;<Box
+  backgroundColor="primary"
+  width={{ sm: 1, md: 0.5 }}
+  height={100}
+  mx="auto"
+  p={2}
+/>
+```
+
+The above example create a red `div` with:
+
+- A background with color "primary"
+- A width of `100%` on mobile, `50%` on desktop
+- A height of `100px`
+- A padding of `16px`
+- A `marginLeft` and a `marginRight` of `50%`
+
+> All Smooth UI components implement the system.
+
+## Create a custom component
+
+To create a custom component that implements system props, style a `Box` or use system utilities.
+
+### Style a Box
+
+A `Box` can be styled like any other component, a styled `Box` inherits the system.
+
+```js
+import { Box } from '@smooth-ui/core-sc'
+import styled from 'styled-component'
+
+const RedBox = styled(Box)`
+  background-color: red;
+`
+
+<RedBox border="1px solid blue" />
+// Will display a red box with a blue border
+```
+
+### Use system utilities
+
+All system utilities are accessible in `@smooth-ui/system`. They can be applied on a styled components and give them system props power!
+
+```js
+import system, { borders } from '@smooth-ui/system'
+
+// This component supports all system utilities
+const Box = styled.div`
+  ${system.props}
+`
+
+// This component supports only border utilities
+const BorderBox = styled.div`
+  ${borders.props}
+`
+
+<BorderBox border="1px solid blue" />
+<Box backgroundColor="red" />
+```
+
+[All system utilities](/docs-system-utilities) are documented.
+
+### System on complex components
+
+Even complex components can benefit from the system, it can be applied on a specific part of the component.
+
+```js
+import { spaces, typography } from '@smooth-ui/system'
+
+const Container = styled.div`
+  ${spaces.props}
+
+  input {
+    ${typography.props}
+  }
+`
+
+function RichInput() {
+  return (
+    <Container>
+      <input />
+    </Container>
+  )
+}
+
+;<RichInput
+  fontSize={10} // Applied on `input`
+  px={1} // Applied on `div`
+/>
+```

docs/system/Styled.mdx

@@ -0,0 +1,92 @@
+---
+name: System components
+menu: System
+order: 3
+---
+
+import { Playground } from 'docz'
+import { Box, system, styled } from '@smooth-ui/core-sc'
+
+# System components
+
+System can be use to create styled components, it is like an alternative to the traditional CSS. It gives you more power and more consistency by automatically reading values from theme.
+
+## Use system to create a styled component
+
+```js
+import styled from 'styled-components'
+import system from '@smooth-ui/system'
+
+const Box = styled.div(
+  system({
+    backgroundColor: 'primary',
+    width: { sm: 1, md: 0.5 },
+    height: 100,
+    mx: 'auto',
+    p: 2,
+  }),
+)
+```
+
+The above example create a red `div` with:
+
+- A background with color "primary"
+- A width of `100%` on mobile, `50%` on desktop
+- A height of `100px`
+- A padding of `16px`
+- A `marginLeft` and a `marginRight` of `50%`
+
+> All CSS properties are supported.
+
+## Use props in system
+
+The `system()` returns a function that accepts props. To access props, wrap this function.
+
+```js
+import styled from 'styled-components'
+import system from '@smooth-ui/system'
+
+const Box = styled.div(props =>
+  system({
+    backgroundColor: props.backgroundColor,
+  }),
+)
+```
+
+## Use CSS and system together
+
+Sometimes, using CSS can be useful (media queries, better syntax). System and CSS fits well together.
+
+```js
+import styled from 'styled-components'
+import system from '@smooth-ui/system'
+
+const Box = styled.div`
+  ${system({ px: 1 })}
+
+  @media (min-width: 700px) {
+    ${system({ px: 2 })}
+  }
+`
+```
+
+## Use in CSS prop
+
+System can be used with [emotion css prop](https://emotion.sh/docs/css-prop).
+
+```js
+import system, { cx } from '@smooth-ui/system'
+import { css } from '@emotion/core'
+
+const buttonStyle = css`
+  background-color: hotpink;
+`
+
+function Button(props) {
+  return (
+    <button css={cx([system({ color: 'primary' }), buttonStyle])} {...props} />
+  )
+}
+```
+
+> `cx` is required because emotion does not support function in style array.