smooth-code · gregberge · Mar 20, 2019 · Mar 20, 2019
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
     browser: true,
     jest: true,
   },
+  plugins: ['react-hooks'],
   rules: {
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
     'react/forbid-prop-types': 'off',
@@ -15,6 +16,9 @@ module.exports = {
     'react/destructuring-assignment': 'off',
     'react/forbid-foreign-prop-types': 'off',
 
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': 'off',
 

diff --git a/config/rollup.js b/config/rollup.js
@@ -24,20 +24,18 @@ export const getRollupConfig = ({
         exclude: 'node_modules/**',
         configFile: path.join(pwd, '../../babel.config.js'),
       }),
-      ...(
-        copyTypeScriptDefs
-          ? [
+      ...(copyTypeScriptDefs
+        ? [
             copy({
               files: `${CORE_DIR}/*.d.ts`,
               dest: `${DIST_DIR}/shared`,
             }),
             copy({
               files: `${SOURCE_DIR}/*.d.ts`,
-              dest: DIST_DIR
-            })
+              dest: DIST_DIR,
+            }),
           ]
-          : []
-      ),
+        : []),
     ],
   }
 
@@ -63,6 +61,7 @@ export const getRollupConfig = ({
   const globals = {
     classnames: 'classNames',
     polished: 'polished',
+    'popper.js': 'Popper',
     'prop-types': 'PropTypes',
     'emotion-theming': 'emotionTheming',
     '@emotion/core': 'emotion',

diff --git a/docs/basics/Grid.mdx b/docs/basics/Grid.mdx
@@ -305,16 +305,36 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ## Custom gutter
 
-To change default custom gutter, use `gridGutter` in theme.
+To change default custom gutter, use `gridGutter` in theme. Gutter is based on system, please refer to [system documentation](/docs-system-utilities#space) to know more about system.
 
 You can also specify a custom gutter using `gutter` property on `Grid`, `Row` and `Col`.
 
 <Playground>
-  <Grid gutter={5}>
-    <Row gutter={5}>
-      <Col gutter={5}>{`5px gutter`}</Col>
-      <Col gutter={5}>{`5px gutter`}</Col>
-      <Col gutter={5}>{`5px gutter`}</Col>
+  <Grid gutter={2}>
+    <Row gutter={2}>
+      <Col gutter={2}>{`16px gutter`}</Col>
+      <Col gutter={2}>{`16px gutter`}</Col>
+      <Col gutter={2}>{`16px gutter`}</Col>
+    </Row>
+  </Grid>
+</Playground>
+
+### Responsive gutter
+
+With power of system, it is possible to specify a gutter by size of screen.
+
+<Playground>
+  <Grid gutter={{ xs: 1, md: 2 }}>
+    <Row gutter={{ xs: 1, md: 2 }}>
+      <Col
+        gutter={{ xs: 1, md: 2 }}
+      >{`8px gutter on mobile, 16px on desktop`}</Col>
+      <Col
+        gutter={{ xs: 1, md: 2 }}
+      >{`8px gutter on mobile, 16px on desktop`}</Col>
+      <Col
+        gutter={{ xs: 1, md: 2 }}
+      >{`8px gutter on mobile, 16px on desktop`}</Col>
     </Row>
   </Grid>
 </Playground>
@@ -508,7 +528,7 @@ Grid defaults can be customized in theme, these are defaults:
 
 ```js
 export const gridColumns = 12
-export const gridGutter = 16
+export const gridGutter = 1
 
 export const breakpoints = {
   // Extra small screen / phone

diff --git a/docs/components/Modal.mdx b/docs/components/Modal.mdx
@@ -47,7 +47,7 @@ You can toggle a modal from a `Button` using the `Toggler`.
 
 <Playground>
   <Toggler>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <div>
         <Button variant="primary" onClick={() => onToggle(true)}>
           Open modal
@@ -135,7 +135,7 @@ When modals become too long for the user’s viewport or device, they scroll ind
 
 <Playground>
   <Toggler>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <div>
         <Button variant="primary" onClick={() => onToggle(true)}>
           Open modal

diff --git a/docs/components/Popover.mdx b/docs/components/Popover.mdx
@@ -0,0 +1,51 @@
+---
+name: Popover
+menu: Components
+---
+
+import { PropsTable, Playground } from 'docz'
+import { BlockList, PropDesc, getSystemPropDesc } from '@docs/utils'
+import { Popover, Toggler, Button, Box } from '@smooth-ui/core-sc'
+
+# Popover
+
+Add a `<Popover />` in a component and it will automatically be displayed. Popover is controlled. If you are looking for an automatic behaviour on `mouseover` / `mouseout`, see [Tooltip](/docs-components-tooltip).
+
+## Example
+
+<Playground>
+  <Box p={30}>
+    <Toggler>
+      {([visible, toggleVisible]) => (
+        <Button onClick={() => toggleVisible()}>
+          Show popover
+          <Popover
+            placement="bottom"
+            onClick={e => e.stopPropagation()}
+            onHide={() => toggleVisible(false)}
+            visible={visible}
+          >
+            <Box m={1} p={4} background="white" border="1px solid black">
+              This is a popover!
+            </Box>
+          </Popover>
+        </Button>
+      )}
+    </Toggler>
+  </Box>
+</Playground>
+
+## API
+
+### Popover
+
+<PropsTable
+  of={PropDesc({
+    children: PropDesc.node,
+    onHide: PropDesc.func,
+    placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
+    visible: PropDesc.bool,
+    hideOnClickOutside: PropDesc.bool.defaultTo(true),
+    ...getSystemPropDesc(Popover),
+  })}
+/>
diff --git a/docs/components/Tooltip.mdx b/docs/components/Tooltip.mdx
@@ -0,0 +1,38 @@
+---
+name: Tooltip
+menu: Components
+---
+
+import { PropsTable, Playground } from 'docz'
+import { BlockList, PropDesc, getSystemPropDesc } from '@docs/utils'
+import { Tooltip, Button, Box } from '@smooth-ui/core-sc'
+
+# Tooltip
+
+Add a `<Tooltip />` in a component and it will automatically be displayed. It is recommended to add tooltip on interactive and focusable components like buttons or links.
+
+## Example
+
+<Playground>
+  <Box p={30}>
+    <Button>
+      Button with tooltip
+      <Tooltip placement="top">Top</Tooltip>
+      <Tooltip placement="right">Right</Tooltip>
+      <Tooltip placement="bottom">Bottom</Tooltip>
+      <Tooltip placement="left">Left</Tooltip>
+    </Button>
+  </Box>
+</Playground>
+
+## API
+
+### Tooltip
+
+<PropsTable
+  of={PropDesc({
+    children: PropDesc.node,
+    placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
+    ...getSystemPropDesc(Tooltip),
+  })}
+/>
diff --git a/docs/utilities/Toggler.mdx b/docs/utilities/Toggler.mdx
@@ -13,7 +13,7 @@ Toggler is a render-props component that provide a toggle behaviour.
 
 <Playground>
   <Toggler>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
     )}
   </Toggler>
@@ -23,7 +23,7 @@ Toggler is a render-props component that provide a toggle behaviour.
 
 <Playground>
   <Toggler>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <div className="block-list">
         <div>{toggled ? '🌞' : '🌛'}</div>
         <div>
@@ -45,7 +45,7 @@ You can define the default `toggled` value using `defaultToggled` property.
 
 <Playground>
   <Toggler defaultToggled>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
     )}
   </Toggler>
@@ -57,7 +57,7 @@ You can listen when the element is toggled using `onToggle` property.
 
 <Playground>
   <Toggler onToggle={toggled => console.log('Toggled', toggled)}>
-    {({ toggled, onToggle }) => (
+    {([toggled, onToggle]) => (
       <Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
     )}
   </Toggler>

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "build": "lerna run build",
     "build:docs": "yarn build && docz build && cp _redirects .docz/dist",
     "build:watch": "WATCH_MODE=true lerna run --parallel build -- --watch",
-    "ci": "yarn lint && yarn test && yarn build && yarn tsc:check && bundlesize",
+    "ci": "yarn lint && yarn test && yarn build && bundlesize && yarn tsc:check || true",
     "dev": "docz dev",
     "format": "prettier --write \"**/*.{js,json,md,mdx}\"",
     "lint": "eslint .",
@@ -18,33 +18,33 @@
   "bundlesize": [
     {
       "path": "./packages/core-em/dist/smooth-ui-core-em.min.js",
-      "maxSize": "23 kB"
+      "maxSize": "25 kB"
     },
     {
       "path": "./packages/core-sc/dist/smooth-ui-core-sc.min.js",
-      "maxSize": "21 kB"
+      "maxSize": "23 kB"
     }
   ],
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.4.0",
     "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "@emotion/core": "^10.0.7",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/core": "^10.0.9",
+    "@emotion/styled": "^10.0.9",
     "@material-ui/system": "^3.0.0-alpha.2",
-    "@types/react": "^16.7.22",
-    "@types/styled-components": "^4.1.6",
+    "@types/react": "^16.8.8",
+    "@types/styled-components": "^4.1.12",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.0.0",
+    "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "babel-plugin-emotion": "^10.0.7",
+    "babel-plugin-emotion": "^10.0.9",
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "benchmark": "^2.1.4",
@@ -54,46 +54,44 @@
     "cross-env": "^5.2.0",
     "docz": "^0.13.7",
     "docz-theme-default": "^0.13.7",
-    "emotion-theming": "^10.0.7",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.8.0",
-    "eslint": "^5.13.0",
+    "emotion-theming": "^10.0.9",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.0.0",
+    "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.1",
     "favicons-webpack-plugin": "^0.0.9",
-    "jest": "^24.0.0",
+    "jest": "^24.5.0",
     "jest-styled-components": "^6.3.1",
-    "lerna": "^3.10.8",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-test-renderer": "^16.7.0",
+    "lerna": "^3.13.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-test-renderer": "^16.8.4",
     "remark-external-links": "^4.0.0",
-    "rollup": "^1.1.2",
+    "rollup": "^1.7.0",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-cpy": "^1.1.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-replace": "^2.1.1",
     "rollup-plugin-uglify": "^6.0.2",
     "shx": "^0.3.2",
-    "standard-version": "^4.4.0",
+    "standard-version": "^5.0.2",
     "styled-components": "^4.1.3",
-    "styled-system": "^3.2.1",
-    "typescript": "^3.3.1",
-    "terser": "3.14.1",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "webpack": "^4.29.0"
+    "styled-system": "^4.0.5",
+    "terser": "3.17.0",
+    "typescript": "^3.3.4000",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "webpack": "^4.29.6"
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "polished": "^2.3.3",
-    "prop-types": "^15.6.2",
-    "react-transition-group": "^2.5.3"
-  },
-  "resolutions": {
-    "terser": "3.14.1"
+    "polished": "^3.0.3",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.6.1"
   }
 }