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

Commit 2fddeba

Browse files
itsdougesitsdouges
committed
fix: fixes ordering of docs, adds extra content to introduction
1 parent 21b5f99 commit 2fddeba

5 files changed

Lines changed: 208 additions & 175 deletions

File tree

‎packages/yubaba/src/__docs__/1-introduction/docs.mdx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
---
22
name: 1. Introduction
33
route: /
4-
order: 1
4+
order: 5
55
---
66

7+
import EmailChain from '../3-advanced-usage/EmailChain';
8+
79
# yubaba
810

911
is an element animation orchestrator for React.js ✨
1012

13+
[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
14+
15+
<EmailChain />
16+
1117
## Why yubaba?
1218

1319
`yubaba` is as much of a _platform_ as much as it is an **orchestrator**.
@@ -22,16 +28,16 @@ anything!
2228

2329
## Installation
2430

25-
`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) - make sure to use the latest for the best performance.
31+
`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
2632

2733
```bash
28-
npm install yubaba emotion --save
34+
npm install yubaba emotion@9.x.x --save
2935
```
3036

3137
or
3238

3339
```bash
34-
yarn add yubaba emotion
40+
yarn add yubaba emotion@9.x.x
3541
```
3642

3743
> **Tip -** After installing head over to [Getting started](/getting-started) to start learning the basics!

‎packages/yubaba/src/__docs__/2-getting-started/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
name: 2. Getting started
33
route: /getting-started
4-
order: 1
4+
order: 4
55
---
66

77
import { Playground } from 'docz';

‎packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/* eslint-disable import/no-extraneous-dependencies, react/no-array-index-key */
2+
import * as React from 'react';
3+
import * as Common from 'yubaba-common';
4+
import MenuIcon from '@material-ui/icons/Menu';
5+
import SearchIcon from '@material-ui/icons/Search';
6+
import MoreVert from '@material-ui/icons/MoreVert';
7+
import ImageIcon from '@material-ui/icons/Image';
8+
import StarIcon from '@material-ui/icons/StarBorder';
9+
import BackIcon from '@material-ui/icons/ArrowBack';
10+
import { MemoryRouter, Switch, Route } from 'react-router-dom';
11+
import {
12+
AppBar,
13+
Toolbar,
14+
IconButton,
15+
Typography,
16+
List,
17+
Avatar,
18+
ListItem,
19+
ListItemText,
20+
Divider,
21+
} from '@material-ui/core';
22+
import * as Styled from './styled';
23+
import { WrappedBaba as Baba } from '../../Baba';
24+
import RevealMove from '../../animations/RevealMove';
25+
import ConcealMove from '../../animations/ConcealMove';
26+
import FocalTarget from '../../FocalTarget';
27+
28+
const EmailChain = () => {
29+
const home = (props: any) => (
30+
<React.Fragment>
31+
<Typography
32+
gutterBottom
33+
variant="subheading"
34+
color="inherit"
35+
style={{ marginTop: 20, marginLeft: 22 }}
36+
>
37+
Today
38+
</Typography>
39+
40+
<List>
41+
{Styled.data.map((email, index) => (
42+
<React.Fragment key={index}>
43+
<Baba name={`card-${index}`} in={props.in}>
44+
<RevealMove duration={600}>
45+
{baba => (
46+
<div {...baba}>
47+
<ListItem button>
48+
<Avatar>
49+
<ImageIcon />
50+
</Avatar>
51+
<ListItemText
52+
primary={email.title}
53+
secondary={`${email.recipients} - ${email.body}`}
54+
secondaryTypographyProps={{ noWrap: true }}
55+
/>
56+
<Styled.StyledLink to={`/screen/${index}`} />
57+
</ListItem>
58+
</div>
59+
)}
60+
</RevealMove>
61+
</Baba>
62+
<Divider variant="inset" />
63+
</React.Fragment>
64+
))}
65+
</List>
66+
</React.Fragment>
67+
);
68+
69+
const screen = (props: any) => (
70+
<Baba name={`card-${props.index}`}>
71+
<ConcealMove>
72+
{baba => (
73+
<Styled.Screen
74+
innerRef={baba.ref}
75+
style={baba.style}
76+
className={baba.className}
77+
{...props}
78+
>
79+
<ListItem>
80+
<Typography variant="h6">{Styled.data[props.index].title}</Typography>
81+
<IconButton
82+
color="inherit"
83+
aria-label="Menu"
84+
style={{ marginLeft: 'auto', marginRight: '-10px' }}
85+
>
86+
<StarIcon />
87+
</IconButton>
88+
</ListItem>
89+
90+
<Divider />
91+
92+
<FocalTarget>
93+
{targetProps => (
94+
<div ref={targetProps.ref}>
95+
<ListItem>
96+
<Avatar>
97+
<ImageIcon />
98+
</Avatar>
99+
<ListItemText
100+
primary={Styled.data[props.index].title}
101+
secondary={Styled.data[props.index].recipients}
102+
/>
103+
</ListItem>
104+
</div>
105+
)}
106+
</FocalTarget>
107+
108+
<ListItem>
109+
<Typography variant="body1">{Styled.data[props.index].body}</Typography>
110+
</ListItem>
111+
</Styled.Screen>
112+
)}
113+
</ConcealMove>
114+
</Baba>
115+
);
116+
117+
const appBarActions = () => (
118+
<Switch>
119+
<Route
120+
render={() => (
121+
<Styled.LightLink to="/">
122+
<IconButton
123+
color="inherit"
124+
aria-label="Menu"
125+
style={{ marginLeft: '-15px', marginRight: 20 }}
126+
>
127+
<BackIcon />
128+
</IconButton>
129+
</Styled.LightLink>
130+
)}
131+
path="/screen/:index"
132+
/>
133+
134+
<Route
135+
path="*"
136+
render={() => (
137+
<React.Fragment>
138+
<IconButton
139+
color="inherit"
140+
aria-label="Menu"
141+
style={{ marginLeft: '-15px', marginRight: 20 }}
142+
>
143+
<MenuIcon />
144+
</IconButton>
145+
146+
<Typography variant="h6" color="inherit">
147+
Inbox
148+
</Typography>
149+
</React.Fragment>
150+
)}
151+
/>
152+
</Switch>
153+
);
154+
155+
return (
156+
<MemoryRouter>
157+
<Common.SmallViewport
158+
invertColor
159+
appBar={
160+
<AppBar
161+
position="static"
162+
style={{ paddingTop: 26, background: 'rgb(97, 0, 236)', zIndex: 1 }}
163+
>
164+
<Toolbar>
165+
{appBarActions()}
166+
167+
<IconButton color="inherit" aria-label="Menu" style={{ marginLeft: 'auto' }}>
168+
<SearchIcon />
169+
</IconButton>
170+
171+
<IconButton color="inherit" aria-label="Menu" style={{ marginRight: '-15px' }}>
172+
<MoreVert />
173+
</IconButton>
174+
</Toolbar>
175+
</AppBar>
176+
}
177+
>
178+
<Route
179+
render={(props: any) => screen({ index: props.match.params.index })}
180+
path="/screen/:index"
181+
/>
182+
183+
<Route path="/" exact>
184+
{props => home({ in: !!props.match, 'aria-hidden': !props.match })}
185+
</Route>
186+
</Common.SmallViewport>
187+
</MemoryRouter>
188+
);
189+
};
190+
191+
export default EmailChain;

0 commit comments

Comments
 (0)