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

Commit ee7e6e4

Browse files
author
Michael Dougall
committed
chore: adds react flip toolkit examples
1 parent c3c41d5 commit ee7e6e4

9 files changed

Lines changed: 1959 additions & 6 deletions

File tree

‎packages/yubaba-examples/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react": "^16.4.x",
1515
"react-body-classname": "^1.2.0",
1616
"react-dom": "^16.4.x",
17+
"react-flip-toolkit": "^6.3.0",
1718
"react-router-dom": "^4.3.1",
1819
"react-select": "^2.1.2",
1920
"styled-components": "^3.4.5",

‎packages/yubaba-examples/src/transformation/search-react-flip-toolkit/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 { Flipper, Flipped } from 'react-flip-toolkit';
4+
import { Toggler } from 'yubaba-common';
5+
import * as Styled from './styled';
6+
7+
storiesOf('yubaba-examples/Transformation/Search/react-flip-toolkit', module).add('Default', () => (
8+
<Styled.Banner>
9+
<Styled.Container>
10+
<Styled.Header>Find help and support</Styled.Header>
11+
<Toggler>
12+
{({ shown, toggle }) => (
13+
<Flipper flipKey={shown}>
14+
{shown && (
15+
<React.Fragment>
16+
<Styled.Blanket onClick={() => toggle()} />
17+
18+
<Styled.StickyContainer>
19+
<Styled.Container>
20+
<Flipped flipId="input">
21+
<Styled.StickyInput autoFocus placeholder="Search for anything..." />
22+
</Flipped>
23+
</Styled.Container>
24+
25+
<Flipped flipId="background">
26+
<Styled.InputBackground />
27+
</Flipped>
28+
</Styled.StickyContainer>
29+
</React.Fragment>
30+
)}
31+
32+
<Styled.RelativeContainer>
33+
{!shown ? (
34+
<Flipped flipId="input">
35+
<Styled.Input onClick={() => toggle()} placeholder="Search for anything..." />
36+
</Flipped>
37+
) : (
38+
// We want to not remove this so we still have it taking up space. Looks like there isn't
39+
// an easy way to keep this element around with react-flip-toolkit.
40+
<Styled.Input
41+
onClick={() => toggle()}
42+
placeholder="Search for anything..."
43+
style={{ opacity: 0 }}
44+
/>
45+
)}
46+
47+
{shown || (
48+
<Flipped flipId="background">
49+
<Styled.InputStaticBackground />
50+
</Flipped>
51+
)}
52+
</Styled.RelativeContainer>
53+
</Flipper>
54+
)}
55+
</Toggler>
56+
</Styled.Container>
57+
</Styled.Banner>
58+
));

‎packages/yubaba-examples/src/transformation/search-react-flip-toolkit/styled.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import styled from 'styled-components';
2+
3+
export const Blanket = styled.div`
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
bottom: 0;
9+
background-color: rgba(0, 0, 0, 0.8);
10+
z-index: 800;
11+
`;
12+
13+
export const Input = styled.input`
14+
display: block;
15+
width: 100%;
16+
font-size: 20px;
17+
padding: 20px;
18+
border-radius: 3px;
19+
border: 0;
20+
background-color: white;
21+
z-index: 2;
22+
position: relative;
23+
24+
:focus {
25+
outline: 0;
26+
}
27+
`;
28+
29+
export const StickyInput = styled(Input)`
30+
margin-top: 20px;
31+
`;
32+
33+
export const InputBackground = styled.div`
34+
background-color: white;
35+
height: 100px;
36+
position: absolute;
37+
left: 0;
38+
right: 0;
39+
top: 0;
40+
z-index: -1;
41+
`;
42+
43+
export const Banner = styled.div`
44+
height: 60vh;
45+
min-height: 400px;
46+
background-color: #2eb886;
47+
padding: 50px;
48+
box-sizing: border-box;
49+
display: flex;
50+
align-items: center;
51+
margin-bottom: 70vh;
52+
53+
* {
54+
box-sizing: border-box;
55+
}
56+
`;
57+
58+
export const Header = styled.h1`
59+
font-size: 30px;
60+
color: white;
61+
font-family: Roboto, HelveticaNeue, Arial, sans-serif;
62+
font-weight: 400;
63+
`;
64+
65+
export const Container = styled.div`
66+
width: 100%;
67+
max-width: 800px;
68+
margin: 0 auto;
69+
`;
70+
71+
export const StickyContainer = styled.div`
72+
position: fixed;
73+
top: 0;
74+
left: 0;
75+
right: 0;
76+
z-index: 900;
77+
`;
78+
79+
export const InputStaticBackground = styled.div`
80+
background-color: white;
81+
position: absolute;
82+
top: 0;
83+
left: 0;
84+
right: 0;
85+
bottom: 0;
86+
z-index: 1;
87+
border-radius: 3px;
88+
`;
89+
90+
export const RelativeContainer = styled.div`
91+
position: relative;
92+
border-radius: 3px;
93+
`;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Baba, { FLIPMove as Move } from 'yubaba';
44
import { Toggler } from 'yubaba-common';
55
import * as Styled from './styled';
66

7+
const DURATION = 400;
8+
79
storiesOf('yubaba-examples/Transformation/Search', module).add('Default', () => (
810
<Styled.Banner>
911
<Styled.Container>
@@ -18,7 +20,7 @@ storiesOf('yubaba-examples/Transformation/Search', module).add('Default', () =>
1820
<Styled.StickyContainer>
1921
<Styled.Container>
2022
<Baba name="search-bar">
21-
<Move zIndex={802}>
23+
<Move zIndex={802} duration={DURATION}>
2224
{baba => (
2325
<Styled.StickyInput
2426
autoFocus
@@ -32,7 +34,7 @@ storiesOf('yubaba-examples/Transformation/Search', module).add('Default', () =>
3234
</Styled.Container>
3335

3436
<Baba name="search-bar-bg">
35-
<Move zIndex={801}>
37+
<Move zIndex={801} duration={DURATION}>
3638
{baba => <Styled.InputBackground style={baba.style} innerRef={baba.ref} />}
3739
</Move>
3840
</Baba>
@@ -42,7 +44,7 @@ storiesOf('yubaba-examples/Transformation/Search', module).add('Default', () =>
4244

4345
<Styled.RelativeContainer>
4446
<Baba name="search-bar" in={!shown}>
45-
<Move zIndex={802}>
47+
<Move zIndex={802} duration={DURATION}>
4648
{baba => (
4749
<Styled.Input
4850
onClick={() => toggle()}
@@ -58,7 +60,7 @@ storiesOf('yubaba-examples/Transformation/Search', module).add('Default', () =>
5860
</Baba>
5961

6062
<Baba name="search-bar-bg" in={!shown}>
61-
<Move zIndex={801}>
63+
<Move zIndex={801} duration={DURATION}>
6264
{baba => (
6365
<Styled.InputStaticBackground
6466
style={{

‎packages/yubaba-examples/src/transformation/select-react-flip-toolkit/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-react-flip-toolkit/stories.tsx‎

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

‎packages/yubaba-examples/src/transformation/select-react-flip-toolkit/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+
`;

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import { Toggler } from 'yubaba-common';
66
import * as Styled from './styled';
77
import data from './data';
88

9+
const DURATION = 350;
10+
911
storiesOf('yubaba-examples/Transformation/Select', module).add('Default', () => (
1012
<Toggler>
1113
{({ shown, toggle }) =>
1214
shown ? (
1315
<Baba name={`item-${shown}`}>
14-
<Move>
16+
<Move duration={DURATION}>
1517
{baba => (
1618
<div {...baba}>
1719
<Select
@@ -37,7 +39,7 @@ storiesOf('yubaba-examples/Transformation/Select', module).add('Default', () =>
3739
<Styled.List>
3840
{data.map((item, index) => (
3941
<Baba key={index} name={`item-${index}`}>
40-
<Move>
42+
<Move duration={DURATION}>
4143
{baba => (
4244
<Styled.Value
4345
onClick={() => toggle(`${index}`)}

0 commit comments

Comments
 (0)