Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit 7bc0b8c

Browse files
gregbergegregberge
authored
feat: popover, tooltips, responsive grid, hooks (#122)
BREAKING CHANGE: - React v16.8+ is now required (hooks inside) - Grid, Col and Row `gutter` prop is now based on system, **be careful**! - Toggler now returns an array `[toggled, onToggle]` instead of an object
1 parent b0ed0b6 commit 7bc0b8c

34 files changed

+3053
-2840
lines changed

‎.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = {
66
browser: true,
77
jest: true,
88
},
9+
plugins: ['react-hooks'],
910
rules: {
1011
'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
1112
'react/forbid-prop-types': 'off',
@@ -15,6 +16,9 @@ module.exports = {
1516
'react/destructuring-assignment': 'off',
1617
'react/forbid-foreign-prop-types': 'off',
1718

19+
'react-hooks/rules-of-hooks': 'error',
20+
'react-hooks/exhaustive-deps': 'warn',
21+
1822
'import/prefer-default-export': 'off',
1923
'import/no-extraneous-dependencies': 'off',
2024

‎config/rollup.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,18 @@ export const getRollupConfig = ({
2424
exclude: 'node_modules/**',
2525
configFile: path.join(pwd, '../../babel.config.js'),
2626
}),
27-
...(
28-
copyTypeScriptDefs
29-
? [
27+
...(copyTypeScriptDefs
28+
? [
3029
copy({
3130
files: `${CORE_DIR}/*.d.ts`,
3231
dest: `${DIST_DIR}/shared`,
3332
}),
3433
copy({
3534
files: `${SOURCE_DIR}/*.d.ts`,
36-
dest: DIST_DIR
37-
})
35+
dest: DIST_DIR,
36+
}),
3837
]
39-
: []
40-
),
38+
: []),
4139
],
4240
}
4341

@@ -63,6 +61,7 @@ export const getRollupConfig = ({
6361
const globals = {
6462
classnames: 'classNames',
6563
polished: 'polished',
64+
'popper.js': 'Popper',
6665
'prop-types': 'PropTypes',
6766
'emotion-theming': 'emotionTheming',
6867
'@emotion/core': 'emotion',

‎docs/basics/Grid.mdx‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -305,16 +305,36 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
305305

306306
## Custom gutter
307307

308-
To change default custom gutter, use `gridGutter` in theme.
308+
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.
309309

310310
You can also specify a custom gutter using `gutter` property on `Grid`, `Row` and `Col`.
311311

312312
<Playground>
313-
<Grid gutter={5}>
314-
<Row gutter={5}>
315-
<Col gutter={5}>{`5px gutter`}</Col>
316-
<Col gutter={5}>{`5px gutter`}</Col>
317-
<Col gutter={5}>{`5px gutter`}</Col>
313+
<Grid gutter={2}>
314+
<Row gutter={2}>
315+
<Col gutter={2}>{`16px gutter`}</Col>
316+
<Col gutter={2}>{`16px gutter`}</Col>
317+
<Col gutter={2}>{`16px gutter`}</Col>
318+
</Row>
319+
</Grid>
320+
</Playground>
321+
322+
### Responsive gutter
323+
324+
With power of system, it is possible to specify a gutter by size of screen.
325+
326+
<Playground>
327+
<Grid gutter={{ xs: 1, md: 2 }}>
328+
<Row gutter={{ xs: 1, md: 2 }}>
329+
<Col
330+
gutter={{ xs: 1, md: 2 }}
331+
>{`8px gutter on mobile, 16px on desktop`}</Col>
332+
<Col
333+
gutter={{ xs: 1, md: 2 }}
334+
>{`8px gutter on mobile, 16px on desktop`}</Col>
335+
<Col
336+
gutter={{ xs: 1, md: 2 }}
337+
>{`8px gutter on mobile, 16px on desktop`}</Col>
318338
</Row>
319339
</Grid>
320340
</Playground>
@@ -508,7 +528,7 @@ Grid defaults can be customized in theme, these are defaults:
508528

509529
```js
510530
export const gridColumns = 12
511-
export const gridGutter = 16
531+
export const gridGutter = 1
512532

513533
export const breakpoints = {
514534
// Extra small screen / phone

‎docs/components/Modal.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ You can toggle a modal from a `Button` using the `Toggler`.
4747

4848
<Playground>
4949
<Toggler>
50-
{({ toggled, onToggle }) => (
50+
{([toggled, onToggle]) => (
5151
<div>
5252
<Button variant="primary" onClick={() => onToggle(true)}>
5353
Open modal
@@ -135,7 +135,7 @@ When modals become too long for the user’s viewport or device, they scroll ind
135135

136136
<Playground>
137137
<Toggler>
138-
{({ toggled, onToggle }) => (
138+
{([toggled, onToggle]) => (
139139
<div>
140140
<Button variant="primary" onClick={() => onToggle(true)}>
141141
Open modal

‎docs/components/Popover.mdx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
name: Popover
3+
menu: Components
4+
---
5+
6+
import { PropsTable, Playground } from 'docz'
7+
import { BlockList, PropDesc, getSystemPropDesc } from '@docs/utils'
8+
import { Popover, Toggler, Button, Box } from '@smooth-ui/core-sc'
9+
10+
# Popover
11+
12+
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).
13+
14+
## Example
15+
16+
<Playground>
17+
<Box p={30}>
18+
<Toggler>
19+
{([visible, toggleVisible]) => (
20+
<Button onClick={() => toggleVisible()}>
21+
Show popover
22+
<Popover
23+
placement="bottom"
24+
onClick={e => e.stopPropagation()}
25+
onHide={() => toggleVisible(false)}
26+
visible={visible}
27+
>
28+
<Box m={1} p={4} background="white" border="1px solid black">
29+
This is a popover!
30+
</Box>
31+
</Popover>
32+
</Button>
33+
)}
34+
</Toggler>
35+
</Box>
36+
</Playground>
37+
38+
## API
39+
40+
### Popover
41+
42+
<PropsTable
43+
of={PropDesc({
44+
children: PropDesc.node,
45+
onHide: PropDesc.func,
46+
placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
47+
visible: PropDesc.bool,
48+
hideOnClickOutside: PropDesc.bool.defaultTo(true),
49+
...getSystemPropDesc(Popover),
50+
})}
51+
/>

‎docs/components/Tooltip.mdx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Tooltip
3+
menu: Components
4+
---
5+
6+
import { PropsTable, Playground } from 'docz'
7+
import { BlockList, PropDesc, getSystemPropDesc } from '@docs/utils'
8+
import { Tooltip, Button, Box } from '@smooth-ui/core-sc'
9+
10+
# Tooltip
11+
12+
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.
13+
14+
## Example
15+
16+
<Playground>
17+
<Box p={30}>
18+
<Button>
19+
Button with tooltip
20+
<Tooltip placement="top">Top</Tooltip>
21+
<Tooltip placement="right">Right</Tooltip>
22+
<Tooltip placement="bottom">Bottom</Tooltip>
23+
<Tooltip placement="left">Left</Tooltip>
24+
</Button>
25+
</Box>
26+
</Playground>
27+
28+
## API
29+
30+
### Tooltip
31+
32+
<PropsTable
33+
of={PropDesc({
34+
children: PropDesc.node,
35+
placement: PropDesc.oneOf(['top', 'right', 'bottom', 'left']),
36+
...getSystemPropDesc(Tooltip),
37+
})}
38+
/>

‎docs/utilities/Toggler.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Toggler is a render-props component that provide a toggle behaviour.
1313

1414
<Playground>
1515
<Toggler>
16-
{({ toggled, onToggle }) => (
16+
{([toggled, onToggle]) => (
1717
<Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
1818
)}
1919
</Toggler>
@@ -23,7 +23,7 @@ Toggler is a render-props component that provide a toggle behaviour.
2323

2424
<Playground>
2525
<Toggler>
26-
{({ toggled, onToggle }) => (
26+
{([toggled, onToggle]) => (
2727
<div className="block-list">
2828
<div>{toggled ? '🌞' : '🌛'}</div>
2929
<div>
@@ -45,7 +45,7 @@ You can define the default `toggled` value using `defaultToggled` property.
4545

4646
<Playground>
4747
<Toggler defaultToggled>
48-
{({ toggled, onToggle }) => (
48+
{([toggled, onToggle]) => (
4949
<Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
5050
)}
5151
</Toggler>
@@ -57,7 +57,7 @@ You can listen when the element is toggled using `onToggle` property.
5757

5858
<Playground>
5959
<Toggler onToggle={toggled => console.log('Toggled', toggled)}>
60-
{({ toggled, onToggle }) => (
60+
{([toggled, onToggle]) => (
6161
<Button onClick={onToggle}>{toggled ? 'ON' : 'OFF'}</Button>
6262
)}
6363
</Toggler>

‎package.json‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"build": "lerna run build",
88
"build:docs": "yarn build && docz build && cp _redirects .docz/dist",
99
"build:watch": "WATCH_MODE=true lerna run --parallel build -- --watch",
10-
"ci": "yarn lint && yarn test && yarn build && yarn tsc:check && bundlesize",
10+
"ci": "yarn lint && yarn test && yarn build && bundlesize && yarn tsc:check || true",
1111
"dev": "docz dev",
1212
"format": "prettier --write \"**/*.{js,json,md,mdx}\"",
1313
"lint": "eslint .",
@@ -18,33 +18,33 @@
1818
"bundlesize": [
1919
{
2020
"path": "./packages/core-em/dist/smooth-ui-core-em.min.js",
21-
"maxSize": "23 kB"
21+
"maxSize": "25 kB"
2222
},
2323
{
2424
"path": "./packages/core-sc/dist/smooth-ui-core-sc.min.js",
25-
"maxSize": "21 kB"
25+
"maxSize": "23 kB"
2626
}
2727
],
2828
"devDependencies": {
2929
"@babel/cli": "^7.2.3",
30-
"@babel/core": "^7.2.2",
30+
"@babel/core": "^7.4.0",
3131
"@babel/plugin-external-helpers": "^7.2.0",
32-
"@babel/plugin-proposal-class-properties": "^7.3.0",
33-
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
34-
"@babel/plugin-transform-modules-commonjs": "^7.2.0",
35-
"@babel/preset-env": "^7.3.1",
32+
"@babel/plugin-proposal-class-properties": "^7.4.0",
33+
"@babel/plugin-proposal-object-rest-spread": "^7.4.0",
34+
"@babel/plugin-transform-modules-commonjs": "^7.4.0",
35+
"@babel/preset-env": "^7.4.1",
3636
"@babel/preset-react": "^7.0.0",
37-
"@emotion/core": "^10.0.7",
38-
"@emotion/styled": "^10.0.7",
37+
"@emotion/core": "^10.0.9",
38+
"@emotion/styled": "^10.0.9",
3939
"@material-ui/system": "^3.0.0-alpha.2",
40-
"@types/react": "^16.7.22",
41-
"@types/styled-components": "^4.1.6",
40+
"@types/react": "^16.8.8",
41+
"@types/styled-components": "^4.1.12",
4242
"babel-core": "^7.0.0-0",
4343
"babel-eslint": "^10.0.1",
44-
"babel-jest": "^24.0.0",
44+
"babel-jest": "^24.5.0",
4545
"babel-loader": "^8.0.5",
4646
"babel-plugin-annotate-pure-calls": "^0.4.0",
47-
"babel-plugin-emotion": "^10.0.7",
47+
"babel-plugin-emotion": "^10.0.9",
4848
"babel-plugin-styled-components": "^1.10.0",
4949
"babel-plugin-transform-rename-import": "^2.3.0",
5050
"benchmark": "^2.1.4",
@@ -54,46 +54,44 @@
5454
"cross-env": "^5.2.0",
5555
"docz": "^0.13.7",
5656
"docz-theme-default": "^0.13.7",
57-
"emotion-theming": "^10.0.7",
58-
"enzyme": "^3.8.0",
59-
"enzyme-adapter-react-16": "^1.8.0",
60-
"eslint": "^5.13.0",
57+
"emotion-theming": "^10.0.9",
58+
"enzyme": "^3.9.0",
59+
"enzyme-adapter-react-16": "^1.11.2",
60+
"eslint": "^5.15.3",
6161
"eslint-config-airbnb": "^17.1.0",
62-
"eslint-config-prettier": "^4.0.0",
62+
"eslint-config-prettier": "^4.1.0",
6363
"eslint-plugin-import": "^2.16.0",
6464
"eslint-plugin-jsx-a11y": "^6.2.1",
6565
"eslint-plugin-react": "^7.12.4",
66+
"eslint-plugin-react-hooks": "^1.5.1",
6667
"favicons-webpack-plugin": "^0.0.9",
67-
"jest": "^24.0.0",
68+
"jest": "^24.5.0",
6869
"jest-styled-components": "^6.3.1",
69-
"lerna": "^3.10.8",
70-
"react": "^16.7.0",
71-
"react-dom": "^16.7.0",
72-
"react-test-renderer": "^16.7.0",
70+
"lerna": "^3.13.1",
71+
"react": "^16.8.4",
72+
"react-dom": "^16.8.4",
73+
"react-test-renderer": "^16.8.4",
7374
"remark-external-links": "^4.0.0",
74-
"rollup": "^1.1.2",
75+
"rollup": "^1.7.0",
7576
"rollup-plugin-babel": "^4.3.2",
76-
"rollup-plugin-commonjs": "^9.2.0",
77+
"rollup-plugin-commonjs": "^9.2.1",
7778
"rollup-plugin-cpy": "^1.1.0",
78-
"rollup-plugin-node-resolve": "^4.0.0",
79-
"rollup-plugin-replace": "^2.1.0",
79+
"rollup-plugin-node-resolve": "^4.0.1",
80+
"rollup-plugin-replace": "^2.1.1",
8081
"rollup-plugin-uglify": "^6.0.2",
8182
"shx": "^0.3.2",
82-
"standard-version": "^4.4.0",
83+
"standard-version": "^5.0.2",
8384
"styled-components": "^4.1.3",
84-
"styled-system": "^3.2.1",
85-
"typescript": "^3.3.1",
86-
"terser": "3.14.1",
87-
"uglifyjs-webpack-plugin": "^2.1.1",
88-
"webpack": "^4.29.0"
85+
"styled-system": "^4.0.5",
86+
"terser": "3.17.0",
87+
"typescript": "^3.3.4000",
88+
"uglifyjs-webpack-plugin": "^2.1.2",
89+
"webpack": "^4.29.6"
8990
},
9091
"dependencies": {
9192
"classnames": "^2.2.6",
92-
"polished": "^2.3.3",
93-
"prop-types": "^15.6.2",
94-
"react-transition-group": "^2.5.3"
95-
},
96-
"resolutions": {
97-
"terser": "3.14.1"
93+
"polished": "^3.0.3",
94+
"prop-types": "^15.7.2",
95+
"react-transition-group": "^2.6.1"
9896
}
9997
}

0 commit comments

Comments
 (0)