From 45a3b00f8b60925461379db91e095e8fdd76f231 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Thu, 7 Mar 2019 13:17:15 +0100 Subject: [PATCH] feat: introduce universal system --- .eslintrc.js | 1 + docs/system/GettingStarted.mdx | 65 +++++++++++ docs/system/Props.mdx | 109 ++++++++++++++++++ docs/system/Styled.mdx | 92 +++++++++++++++ .../System.mdx => system/Utilities.mdx} | 61 ++++------ doczrc.js | 2 + jest.config.js | 2 +- packages/shared/core/index.js | 1 + packages/system/src/cx.js | 3 + packages/system/src/index.js | 2 + packages/system/src/style.js | 58 ++++++++-- packages/system/src/style.test.js | 78 ++++++++++++- packages/system/src/styles/borders.js | 20 ++++ packages/system/src/universalSystem.js | 4 + 14 files changed, 449 insertions(+), 49 deletions(-) create mode 100644 docs/system/GettingStarted.mdx create mode 100644 docs/system/Props.mdx create mode 100644 docs/system/Styled.mdx rename docs/{basics/System.mdx => system/Utilities.mdx} (85%) create mode 100644 packages/system/src/cx.js create mode 100644 packages/system/src/universalSystem.js diff --git a/.eslintrc.js b/.eslintrc.js index 94d30572d..ee4d318bc 100644 --- a/.eslintrc.js +++ b/.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'] }], diff --git a/docs/system/GettingStarted.mdx b/docs/system/GettingStarted.mdx new file mode 100644 index 000000000..7ff4665c1 --- /dev/null +++ b/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: + + + + + +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. + + + {() => { + const MyBox = styled.div( + system({ + backgroundColor: 'primary', + width: { sm: 1, md: 0.5 }, + height: 100, + mx: 'auto', + p: 2, + }), + ) + return + }} + + +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) diff --git a/docs/system/Props.mdx b/docs/system/Props.mdx new file mode 100644 index 000000000..de6eca1c9 --- /dev/null +++ b/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' + +; +``` + +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; +` + + +// 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} +` + + + +``` + +[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 ( + + + + ) +} + +; +``` diff --git a/docs/system/Styled.mdx b/docs/system/Styled.mdx new file mode 100644 index 000000000..fac756f0c --- /dev/null +++ b/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 ( +