Skip to content
This repository was archived by the owner on Apr 14, 2020. It is now read-only.

Commit 46424c6

Browse files
itsdougesitsdouges
committed
chore: adds new transformation example
1 parent d837f4e commit 46424c6

5 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎packages/yubaba-examples/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react-body-classname": "^1.2.0",
1616
"react-dom": "^16.4.x",
1717
"react-router-dom": "^4.3.1",
18+
"react-select": "^2.1.2",
1819
"styled-components": "^3.4.5",
1920
"yubaba": "^1.4.0",
2021
"yubaba-common": "^1.3.0"

‎packages/yubaba-examples/src/transformation/select/data.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default [
2+
{
3+
title: 'Software licensing',
4+
description: 'Anything surrounding software you use on a daily basis.',
5+
},
6+
{
7+
title: 'Hardware support',
8+
description: 'Anything surrounding software you use on a daily basis.',
9+
},
10+
{
11+
title: 'Forgot your password',
12+
description: 'Anything surrounding software you use on a daily basis.',
13+
},
14+
{
15+
title: 'Requesting new software',
16+
description: 'Anything surrounding software you use on a daily basis.',
17+
},
18+
{
19+
title: 'Software licensing',
20+
description: 'Anything surrounding software you use on a daily basis.',
21+
},
22+
];

‎packages/yubaba-examples/src/transformation/select/stories.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import Select from 'react-select';
4+
import Baba, { FLIPMove as Move } from 'yubaba';
5+
import { Toggler } from 'yubaba-common';
6+
import * as Styled from './styled';
7+
import data from './data';
8+
9+
storiesOf('yubaba-examples/Transformation/Select', module).add('Default', () => (
10+
<Toggler>
11+
{({ shown, toggle }) =>
12+
shown ? (
13+
<Baba name={`item-${shown}`}>
14+
<Move>
15+
{baba => (
16+
<div {...baba}>
17+
<Select
18+
autoFocus
19+
isSearchable={false}
20+
value={{}}
21+
styles={{
22+
singleValue: () => ({}),
23+
}}
24+
onKeyDown={() => toggle()}
25+
formatOptionLabel={() => (
26+
<Styled.Value>
27+
{data[+shown].title}
28+
<Styled.Description>{data[+shown].description}</Styled.Description>
29+
</Styled.Value>
30+
)}
31+
/>
32+
</div>
33+
)}
34+
</Move>
35+
</Baba>
36+
) : (
37+
<Styled.List>
38+
{data.map((item, index) => (
39+
<Baba key={index} name={`item-${index}`}>
40+
<Move>
41+
{baba => (
42+
<Styled.Value
43+
onClick={() => toggle(`${index}`)}
44+
style={baba.style}
45+
innerRef={baba.ref}
46+
>
47+
{item.title}
48+
<Styled.Description>{item.description}</Styled.Description>
49+
</Styled.Value>
50+
)}
51+
</Move>
52+
</Baba>
53+
))}
54+
</Styled.List>
55+
)
56+
}
57+
</Toggler>
58+
));

‎packages/yubaba-examples/src/transformation/select/styled.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from 'styled-components';
2+
3+
export const Value = styled.div`
4+
display: block;
5+
border-radius: 3px;
6+
padding: 20px 15px;
7+
font-family: Roboto, HelveticaNeue, Arial, sans-serif;
8+
cursor: pointer;
9+
background-color: white;
10+
`;
11+
12+
export const Description = styled.small`
13+
display: block;
14+
`;
15+
16+
export const List = styled.div`
17+
padding: 10px;
18+
19+
${Value} {
20+
margin-bottom: 10px;
21+
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
22+
transition: box-shadow 200ms ease-in-out;
23+
padding: 20px 25px;
24+
25+
:hover {
26+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
27+
}
28+
}
29+
`;

‎yarn.lock‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1845,6 +1845,23 @@ babel-plugin-check-es2015-constants@^6.22.0:
18451845
dependencies:
18461846
babel-runtime "^6.22.0"
18471847

1848+
babel-plugin-emotion@^9.2.11:
1849+
version "9.2.11"
1850+
resolved "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
1851+
dependencies:
1852+
"@babel/helper-module-imports" "^7.0.0"
1853+
"@emotion/babel-utils" "^0.6.4"
1854+
"@emotion/hash" "^0.6.2"
1855+
"@emotion/memoize" "^0.6.1"
1856+
"@emotion/stylis" "^0.7.0"
1857+
babel-plugin-macros "^2.0.0"
1858+
babel-plugin-syntax-jsx "^6.18.0"
1859+
convert-source-map "^1.5.0"
1860+
find-root "^1.1.0"
1861+
mkdirp "^0.5.1"
1862+
source-map "^0.5.7"
1863+
touch "^2.0.1"
1864+
18481865
babel-plugin-emotion@^9.2.9:
18491866
version "9.2.9"
18501867
resolved "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.9.tgz#7b3c72fd6a333127abafe7fb693bcb421e7f5b9f"
@@ -3449,6 +3466,18 @@ create-ecdh@^4.0.0:
34493466
bn.js "^4.1.0"
34503467
elliptic "^6.0.0"
34513468

3469+
create-emotion@^9.2.12:
3470+
version "9.2.12"
3471+
resolved "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
3472+
dependencies:
3473+
"@emotion/hash" "^0.6.2"
3474+
"@emotion/memoize" "^0.6.1"
3475+
"@emotion/stylis" "^0.7.0"
3476+
"@emotion/unitless" "^0.6.2"
3477+
csstype "^2.5.2"
3478+
stylis "^3.5.0"
3479+
stylis-rule-sheet "^0.0.10"
3480+
34523481
create-emotion@^9.2.6:
34533482
version "9.2.6"
34543483
resolved "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.6.tgz#f64cf1c64cf82fe7d22725d1d77498ddd2d39edb"
@@ -4132,6 +4161,13 @@ emojis-list@^2.0.0:
41324161
version "2.1.0"
41334162
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
41344163

4164+
emotion@^9.1.2:
4165+
version "9.2.12"
4166+
resolved "https://registry.npmjs.org/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
4167+
dependencies:
4168+
babel-plugin-emotion "^9.2.11"
4169+
create-emotion "^9.2.12"
4170+
41354171
emotion@^9.2.9:
41364172
version "9.2.9"
41374173
resolved "https://registry.npmjs.org/emotion/-/emotion-9.2.9.tgz#c2028705acc60a138ecb69d3fc1d2056764f61a1"
@@ -7205,6 +7241,10 @@ mem@^4.0.0:
72057241
mimic-fn "^1.0.0"
72067242
p-is-promise "^1.1.0"
72077243

7244+
memoize-one@^4.0.0:
7245+
version "4.0.3"
7246+
resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz#cdfdd942853f1a1b4c71c5336b8c49da0bf0273c"
7247+
72087248
memory-fs@^0.4.0, memory-fs@~0.4.1:
72097249
version "0.4.1"
72107250
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8920,6 +8960,12 @@ react-icons@^2.2.7:
89208960
dependencies:
89218961
react-icon-base "2.1.0"
89228962

8963+
react-input-autosize@^2.2.1:
8964+
version "2.2.1"
8965+
resolved "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
8966+
dependencies:
8967+
prop-types "^15.5.8"
8968+
89238969
react-inspector@^2.2.2:
89248970
version "2.3.0"
89258971
resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.0.tgz#fc9c1d38ab687fc0d190dcaf133ae40158968fc8"
@@ -8976,6 +9022,18 @@ react-router@^4.3.1:
89769022
prop-types "^15.6.1"
89779023
warning "^4.0.1"
89789024

9025+
react-select@^2.1.2:
9026+
version "2.1.2"
9027+
resolved "https://registry.npmjs.org/react-select/-/react-select-2.1.2.tgz#7a3e4c2b9efcd8c44ae7cf6ebb8b060ef69c513c"
9028+
dependencies:
9029+
classnames "^2.2.5"
9030+
emotion "^9.1.2"
9031+
memoize-one "^4.0.0"
9032+
prop-types "^15.6.0"
9033+
raf "^3.4.0"
9034+
react-input-autosize "^2.2.1"
9035+
react-transition-group "^2.2.1"
9036+
89799037
react-side-effect@^1.1.0:
89809038
version "1.1.5"
89819039
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
@@ -10504,6 +10562,12 @@ touch@^1.0.0:
1050410562
dependencies:
1050510563
nopt "~1.0.10"
1050610564

10565+
touch@^2.0.1:
10566+
version "2.0.2"
10567+
resolved "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
10568+
dependencies:
10569+
nopt "~1.0.10"
10570+
1050710571
tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.4.3:
1050810572
version "2.4.3"
1050910573
resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"

0 commit comments

Comments
 (0)