lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add stories for Box component

master
Loëck Vézien 7 years ago
parent
0b4c252b4e
commit
3c524a493a
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
6 changed files with 180 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .storybook/addons.js
  2. 3
      .storybook/config.js
  3. 2
      package.json
  4. 0
      src/components/base/Box/index.js
  5. 94
      src/components/base/Box/stories.js
  6. 81
      yarn.lock

3
.storybook/addons.js
View File

@ -0,0 +1,3 @@
import '@storybook/addon-actions/register'
import '@storybook/addon-knobs/register'
import '@storybook/addon-options/register'

3
.storybook/config.js
View File

@ -1,5 +1,6 @@
import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import { ThemeProvider } from 'styled-components'
import 'styles/global'
@ -16,4 +17,6 @@ addDecorator(story => (
</ThemeProvider>
))
addDecorator(withKnobs)
configure(loadStories, module)

2
package.json
View File

@ -56,7 +56,9 @@
},
"devDependencies": {
"@storybook/addon-actions": "^3.3.9",
"@storybook/addon-knobs": "^3.3.9",
"@storybook/addon-links": "^3.3.9",
"@storybook/addon-options": "^3.3.9",
"@storybook/addons": "^3.3.9",
"@storybook/react": "^3.3.9",
"babel-core": "^6.26.0",

0
src/components/base/Box.js → src/components/base/Box/index.js
View File

94
src/components/base/Box/stories.js
View File

@ -0,0 +1,94 @@
import React from 'react'
import { select, boolean, number } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'
import styled from 'styled-components'
import Box from 'components/base/Box'
const stories = storiesOf('Box', module)
const align = [
undefined,
'baseline',
'center',
'flex-end',
'flex-start',
'inherit',
'initial',
'stretch',
]
const justify = [
undefined,
'center',
'flex-end',
'flex-start',
'inherit',
'initial',
'space-around',
'space-between',
]
stories.add('basic', () => (
<Box
align={select('align', align, 'center')}
flow={number('flow', undefined)}
grow={boolean('grow', false)}
horizontal={boolean('horizontal', false)}
justify={select('justify', justify, 'center')}
padding={number('padding', undefined)}
relative={boolean('relative', false)}
sticky={boolean('sticky', true)}
>
\o/
</Box>
))
const Container = props => <Box flow={10} {...props} />
const Row = props => <Box horizontal flow={10} {...props} />
const Col = styled(({ color, ...props }) => (
<Box
align="center"
grow
justify="center"
style={{
backgroundColor: color,
}}
{...props}
/>
))`
height: 100px;
`
stories.add('grid example', () => (
<Container>
<Row>
<Col color="blue">1</Col>
<Col color="blue">2</Col>
<Col color="blue">3</Col>
<Col color="blue">4</Col>
<Col color="blue">5</Col>
<Col color="blue">6</Col>
<Col color="blue">7</Col>
<Col color="blue">8</Col>
<Col color="blue">9</Col>
<Col color="blue">10</Col>
</Row>
<Row>
<Col color="red">1</Col>
<Col color="red">2</Col>
<Col color="red">3</Col>
<Col color="red">4</Col>
<Col color="red">5</Col>
<Col color="red">6</Col>
</Row>
<Row>
<Col color="green">1</Col>
<Col color="green">2</Col>
<Col color="green">3</Col>
</Row>
<Row>
<Col color="yellow">1</Col>
</Row>
</Container>
))

81
yarn.lock
View File

@ -115,6 +115,22 @@
react-inspector "^2.2.2"
uuid "^3.1.0"
"@storybook/addon-knobs@^3.3.9":
version "3.3.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.3.9.tgz#855575557868a97c00ce8de8e2e6960f1580f21c"
dependencies:
babel-runtime "^6.26.0"
deep-equal "^1.0.1"
global "^4.3.2"
insert-css "^2.0.0"
lodash.debounce "^4.0.8"
moment "^2.20.1"
prop-types "^15.6.0"
react-color "^2.11.4"
react-datetime "^2.11.1"
react-textarea-autosize "^5.2.1"
util-deprecate "^1.0.2"
"@storybook/addon-links@^3.3.9":
version "3.3.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.9.tgz#13781ac1c21ddfe347ece6ceab8518c8d1f98a0f"
@ -123,6 +139,10 @@
global "^4.3.2"
prop-types "^15.5.10"
"@storybook/addon-options@^3.3.9":
version "3.3.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.3.9.tgz#8dca85ae5c6713ca13bead0e8c39b23c7e2138c0"
"@storybook/addons@^3.3.9":
version "3.3.9"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.9.tgz#356ce7f1de892d88ca4bc5f686d06e07dd8c2108"
@ -2516,7 +2536,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-class@^15.6.2:
create-react-class@^15.5.2, create-react-class@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
dependencies:
@ -4681,6 +4701,10 @@ inquirer@^3.0.6:
strip-ansi "^4.0.0"
through "^2.3.6"
insert-css@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
internal-ip@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@ -5328,7 +5352,7 @@ lodash@^3.10.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -5414,6 +5438,10 @@ marked@^0.3.9:
buffers "~0.1.1"
readable-stream "~1.0.0"
material-colors@^1.2.1:
version "1.2.5"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
math-expression-evaluator@^1.2.14:
version "1.2.17"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@ -5612,6 +5640,10 @@ mkdirp@0.5.0:
dependencies:
minimist "0.0.8"
moment@^2.20.1:
version "2.20.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -5849,6 +5881,10 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@ -6628,7 +6664,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@ -6792,6 +6828,25 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-color@^2.11.4:
version "2.13.8"
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"
dependencies:
lodash "^4.0.1"
material-colors "^1.2.1"
prop-types "^15.5.10"
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-datetime@^2.11.1:
version "2.11.1"
resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.11.1.tgz#11d15081dd7d6729284e21c1b8ea7b975e3bdc7e"
dependencies:
create-react-class "^15.5.2"
object-assign "^3.0.0"
prop-types "^15.5.7"
react-onclickoutside "^6.5.0"
react-docgen@^2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.20.0.tgz#41a6da483a34a4aaed041a9909f5e61864d681cb"
@ -6889,6 +6944,10 @@ react-motion@^0.5.0:
prop-types "^15.5.8"
raf "^3.1.0"
react-onclickoutside@^6.5.0:
version "6.7.1"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
react-portal@^4.0.0:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f"
@ -6959,6 +7018,12 @@ react-style-proptype@^3.0.0:
dependencies:
prop-types "^15.5.4"
react-textarea-autosize@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.2.1.tgz#2b78f9067180f41b08ac59f78f1581abadd61e54"
dependencies:
prop-types "^15.6.0"
react-transition-group@^1.1.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
@ -6989,6 +7054,12 @@ react@^16.1.1, react@^16.2.0:
object-assign "^4.1.1"
prop-types "^15.6.0"
reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
dependencies:
lodash "^4.0.1"
read-config-file@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-2.0.1.tgz#4f6f536508ed8863c50c3a2cfd1dbd82ba961b82"
@ -8180,6 +8251,10 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

Write Preview
Loading…
Cancel
Save