├── .babelrc ├── .eslintrc ├── .flowconfig ├── .gitignore ├── LICENSE ├── README.md ├── components ├── AppFooter.fixture.js ├── AppFooter.js ├── AppMenuDrawer.fixture.js ├── AppMenuDrawer.js ├── AppNavTransition.fixture.js ├── AppNavTransition.js ├── AppNavigation.fixture.js ├── AppNavigation.js ├── AppStarRating.fixture.js ├── AppStarRating.js ├── AppStats.fixture.js ├── AppStats.js ├── Content.fixture.js ├── Content.js ├── Hr.fixture.js ├── Hr.js ├── IconBase.fixture.js ├── IconBase.js ├── IconCalendar.js ├── IconMail.js ├── IconMapPin.js ├── IconStarEmpty.js ├── IconStarFull.js ├── Link.fixture.js ├── Link.js ├── Main.fixture.js ├── Main.js ├── Paragraph.fixture.js ├── Paragraph.js ├── Places.fixture.js ├── Places.js ├── Sidebar.fixture.js ├── Sidebar.js ├── Top.fixture.js └── Top.js ├── cosmos.config.js ├── cosmos.proxies.js ├── flow-typed ├── next.js.flow └── npm │ ├── babel-plugin-preval_vx.x.x.js │ ├── react-spring_vx.x.x.js │ └── styled-components_v3.x.x.js ├── package.json ├── pages ├── _app.js ├── _document.js ├── _styles.js ├── group.js ├── index.js └── place.js ├── static ├── JosefinSans-Bold.ttf ├── JosefinSans-Regular.ttf ├── PlayfairDisplay-Regular.ttf ├── README.md ├── burmuda.jpg ├── favicon.ico ├── hawaii1.jpg ├── hawaii2.jpg ├── hawaii3.jpg ├── hawaii4.jpg ├── hawaii5.jpg ├── hawaii6.jpg ├── header1.jpg ├── header2.jpg ├── header3.jpg ├── honolulu.jpg ├── peru.jpg ├── profile1.jpg ├── profile2.jpg ├── profile3.jpg ├── profile4.jpg ├── profile5.jpg ├── santorini.jpg └── shanghai.jpg ├── tools ├── data.js ├── firstName.js ├── links.js └── types.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [ 4 | "macros", 5 | "preval", 6 | "transform-flow-strip-types", 7 | [ 8 | "styled-components", 9 | { 10 | "ssr": true, 11 | "displayName": true, 12 | "preprocess": false 13 | } 14 | ] 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint" 3 | } 4 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/@mapbox/* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .next 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Xavier Cazalot 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Page Transitions Travelapp 2 | 3 | ### Fork 4 | 5 | 👋, hello there! This repository is a rewrite with React & Next.js of [Sarah Drasner](https://twitter.com/sarah_edo)'s orginal work with [Vue & Nuxt](https://github.com/sdras/page-transitions-travelapp). 6 | 7 | Live demo: [https://page-transitions.now.sh](https://page-transitions.now.sh) 8 | 9 | ### Original 10 | 11 | This demo shows an example of how to achieve native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue. 12 | 13 | Article explaining the demo is available at 14 | [https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web](https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web) 15 | 16 | Live demo at 17 | [https://page-transitions.com/](https://page-transitions.com/) 18 | 19 | See the page transitions travel app demo for a real-life use case: [https://github.com/sdras/page-transitions-travelapp](https://github.com/sdras/page-transitions-travelapp) 20 | 21 | ## Build Setup 22 | 23 | ```bash 24 | # install dependencies 25 | $ npm install # Or yarn install 26 | 27 | # serve with hot reload at localhost:3000 28 | $ npm run dev 29 | 30 | # build for production and launch server 31 | $ npm run build 32 | $ npm start 33 | ``` 34 | 35 | For detailed explanation on how things work, checkout the [Next.js docs](https://github.com/zeit/next.js). 36 | -------------------------------------------------------------------------------- /components/AppFooter.fixture.js: -------------------------------------------------------------------------------- 1 | import AppFooter from './AppFooter'; 2 | 3 | export default { 4 | component: AppFooter, 5 | }; 6 | -------------------------------------------------------------------------------- /components/AppFooter.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | export default () => ( 5 | 34 | ); 35 | 36 | const Footer = styled.footer` 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: center; 41 | padding: 10px; 42 | background: black; 43 | color: white; 44 | text-align: center; 45 | letter-spacing: 0.03em; 46 | margin-top: 30px; 47 | width: 100%; 48 | `; 49 | 50 | const Anchor = styled.a` 51 | &, 52 | &:visited, 53 | &:active { 54 | color: white; 55 | font-weight: bold; 56 | text-decoration: none; 57 | padding-left: 6px; 58 | } 59 | `; 60 | -------------------------------------------------------------------------------- /components/AppMenuDrawer.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { createFixture } from 'react-cosmos'; 4 | import AppMenuDrawer from './AppMenuDrawer'; 5 | import data from '../tools/data'; 6 | 7 | const [user] = data.users; 8 | 9 | export default [ 10 | createFixture({ 11 | component: AppMenuDrawer, 12 | name: 'opening', 13 | props: { 14 | open: true, 15 | selectedUser: user, 16 | }, 17 | }), 18 | createFixture({ 19 | component: AppMenuDrawer, 20 | name: 'closing', 21 | props: { 22 | open: false, 23 | selectedUser: user, 24 | }, 25 | }), 26 | ]; 27 | -------------------------------------------------------------------------------- /components/AppMenuDrawer.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import styled from 'styled-components'; 5 | import { Spring, Trail } from 'react-spring'; 6 | import Link from './Link'; 7 | import { linksList } from '../tools/links'; 8 | import firstName from '../tools/firstName'; 9 | import type { User } from '../tools/types'; 10 | 11 | type Props = { 12 | open: boolean, 13 | selectedUser: User, 14 | }; 15 | 16 | export default class AppMenuDrawer extends React.Component { 17 | render() { 18 | const { open, selectedUser } = this.props; 19 | return ( 20 | 24 | {style => ( 25 | 31 | href)} 35 | delay={100} 36 | > 37 | {linksList.map(([href, name]) => styles => ( 38 |
39 | 40 | {firstName(selectedUser.name)} 41 | 's {name} 42 | 43 |
44 | ))} 45 | 46 | 47 | )} 48 | 49 | ); 50 | } 51 | } 52 | 53 | const Drawer = styled.div` 54 | transform-origin: 100% 0%; 55 | background: rgba(0, 0, 0, 0.8); 56 | line-height: 1.8; 57 | text-align: right; 58 | position: absolute; 59 | right: 0px; 60 | top: 45px; 61 | padding: 20px; 62 | border-radius: 4px; 63 | z-index: 10000; /* lol */ 64 | 65 | > *:not(:last-child) { 66 | margin-bottom: 6px; 67 | } 68 | `; 69 | -------------------------------------------------------------------------------- /components/AppNavTransition.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { createFixture } from 'react-cosmos'; 4 | import AppNavTransition from './AppNavTransition'; 5 | import data from '../tools/data'; 6 | import { linksList } from '../tools/links'; 7 | 8 | const [user] = data.users; 9 | 10 | export default linksList.map(([href, name], index) => 11 | createFixture({ 12 | component: AppNavTransition, 13 | name: 'route: ' + name, 14 | props: { 15 | pathname: href, 16 | users: data.users, 17 | selectedUser: user, 18 | indexedUser: 0, 19 | addFollower: () => {}, 20 | removeFollower: () => {}, 21 | changeUser(number, fn) { 22 | fn(); 23 | }, 24 | }, 25 | }) 26 | ); 27 | -------------------------------------------------------------------------------- /components/AppNavTransition.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import styled, { css } from 'styled-components'; 5 | import { Transition, Spring } from 'react-spring'; 6 | 7 | import IconBase from './IconBase'; 8 | import IconMail from './IconMail'; 9 | import IconMapPin from './IconMapPin'; 10 | import IconCalendar from './IconCalendar'; 11 | import type { User } from '../tools/types'; 12 | 13 | type Props = { 14 | users: Array, 15 | selectedUser: User, 16 | indexedUser: number, 17 | pathname: string, 18 | addFollower: () => void, 19 | removeFollower: () => void, 20 | changeUser: (number, () => void) => void, 21 | }; 22 | 23 | type State = { 24 | following: boolean, 25 | saved: boolean, 26 | showSave: boolean, 27 | }; 28 | 29 | export default class AppNavTransition extends React.Component { 30 | state = { 31 | following: false, 32 | saved: false, 33 | showSave: false, 34 | }; 35 | 36 | elements = {}; 37 | 38 | changeUser = (i: number) => () => { 39 | this.props.changeUser(i, () => { 40 | if (this.props.pathname === '/group') { 41 | const el = this.elements.profile0; 42 | el.style.transform = `translate3d(${-70 + 43 | this.props.indexedUser * 55}px, -70px, 0) scale(0.25)`; 44 | } 45 | }); 46 | }; 47 | 48 | toggleFollow = () => { 49 | this.setState( 50 | state => ({ following: !state.following }), 51 | () => { 52 | if (this.state.following) { 53 | this.props.addFollower(); 54 | } else { 55 | this.props.removeFollower(); 56 | } 57 | } 58 | ); 59 | }; 60 | 61 | addPlace = () => { 62 | if (!this.state.saved && this.props.pathname !== '/') { 63 | this.setState({ saved: true, showSave: true }, () => { 64 | setTimeout(() => { 65 | this.setState({ showSave: false }); 66 | }, 1000); 67 | }); 68 | } else { 69 | this.setState({ saved: false, showSave: false }); 70 | } 71 | }; 72 | 73 | render() { 74 | const { users, selectedUser, pathname } = this.props; 75 | const { following, saved, showSave } = this.state; 76 | 77 | return ( 78 |
79 | {users.map((user, i) => ( 80 | (this.elements[`profile${i}`] = element)} 87 | > 88 | 89 | 90 | 91 | ))} 92 | 93 | 100 | 101 | 102 | {pathname === '/group' ? ( 103 | {selectedUser.trips[0]} 104 | ) : ( 105 | {selectedUser.name} 106 | )} 107 | 108 | 109 | 110 | {pathname === '/' ? ( 111 | 117 | 118 | 119 | ) : ( 120 | 130 | {styles => ( 131 | 136 | 150 | 164 | 165 | )} 166 | 167 | )} 168 | 169 | 170 | 175 | {showSave && (styles => Saved!)} 176 | 177 | 178 | 205 |
206 | ); 207 | } 208 | } 209 | 210 | const groupMixin = (top: string, left: string) => ` 211 | position: absolute; 212 | top: ${top}; 213 | left: ${left}; 214 | display: block; 215 | backface-visibility: hidden; 216 | transform: translateZ(0); 217 | transition: 0.4s all ease-out; 218 | `; 219 | 220 | const onlineMixin = (size: string, position: string, border: string) => ` 221 | position: absolute; 222 | background: #07dc3c; 223 | border-radius: 50% 50%; 224 | width: ${size}; 225 | height: ${size}; 226 | right: ${position}; 227 | bottom: ${position}; 228 | border: ${border}; 229 | opacity: 0; 230 | `; 231 | 232 | // prettier-ignore 233 | const Button = styled.button` 234 | margin-bottom: 10px; 235 | background: ${props => (props.isActive ? 'rgb(5, 134, 106)' : 'orangered')}; 236 | border: 0; 237 | cursor: pointer; 238 | padding: 6px 8px; 239 | font-size: 16px; 240 | color: white; 241 | border-radius: 4px; 242 | 243 | font-weight: bold; 244 | width: 150px; 245 | transition: 1s all ease; 246 | 247 | ${groupMixin('320px', '220px')} 248 | 249 | ${props => { 250 | if (props.pathname === "/place") { 251 | return ` 252 | transform: translate3d(-215px, -80px, 0); 253 | `; 254 | } 255 | 256 | if (props.pathname === "/group") { 257 | return ` 258 | opacity: 0; 259 | transition: none; 260 | `; 261 | } 262 | }} 263 | 264 | &:focus { 265 | outline: 1px dotted rgb(5, 134, 106); 266 | } 267 | `; 268 | 269 | const FloatingMetaNav = styled.p` 270 | text-align: right; 271 | position: absolute; 272 | right: 0; 273 | top: 250px; 274 | color: white; 275 | `; 276 | 277 | const SaveInfo = styled.div` 278 | color: white; 279 | position: absolute; 280 | top: 194px; 281 | font-size: 20px; 282 | right: 56px; 283 | text-align: right; 284 | opacity: 0; 285 | `; 286 | 287 | const profileTranslations = [ 288 | [-70, -70, 0], 289 | [-15, -70, 0], 290 | [40, -70, 0], 291 | [95, -70, 0], 292 | ]; 293 | 294 | const ProfilePhoto = styled.div` 295 | width: 200px; 296 | ${groupMixin('150px', '0')} 297 | ${({ secondary }) => 298 | secondary && 299 | ` 300 | opacity: 0; 301 | transition: none; 302 | `} 303 | ${({ pathname, secondary }) => { 304 | if (!secondary && pathname === '/place') { 305 | return ` 306 | transform: translate3d(-20px, -100px, 0) scale(0.75); 307 | `; 308 | } 309 | 310 | if (!secondary && pathname === '/') { 311 | return `transform: translate3d(0, 0, 0) scale(1);`; 312 | /* 313 | .index .profile-photo.profile-0 { 314 | transform: translate3d(0, 0, 0) scale(1) !important; 315 | } 316 | */ 317 | } 318 | 319 | if (pathname === '/group') { 320 | return ` 321 | transform: translate3d(-70px, -70px, 0) scale(0.25); 322 | transition: 0.4s all ease-in-out; 323 | opacity: 1; 324 | border-radius: 50% 50%; 325 | &:hover { 326 | transition: 0.4s all ease-in-out; 327 | border: 10px solid white; 328 | } 329 | `; 330 | } 331 | }} 332 | ${({ index, secondary }) => 333 | secondary && 334 | `transform: translate3d(${profileTranslations[index] 335 | .map(n => `${n}px`) 336 | .join(', ')}) scale(0.25); 337 | `} 338 | `; 339 | 340 | const Image = styled.img` 341 | border-radius: 4px; 342 | transition: 0.4s all ease; 343 | width: 100%; 344 | cursor: pointer; 345 | ${props => props.pathname === '/group' && `border-radius: 50% 50%;`}; 346 | `; 347 | 348 | const Online = styled.div` 349 | ${onlineMixin('40px', '10px', '2px solid black')} ${props => 350 | props.pathname === '/group' && `opacity: 1;`}; 351 | `; 352 | 353 | const ProfileName = styled.h2` 354 | font-size: 35px; 355 | ${groupMixin('355px', '0')} 356 | ${({ pathname }) => pathname !== '/' && `color: white;`} 357 | ${({ pathname }) => 358 | pathname === '/place' && 359 | `transform: translate3d(140px, -125px, 0) scale(0.75);`} 360 | ${({ pathname }) => 361 | pathname === '/group' && `transform: translate3d(0px, -125px, 0);`} 362 | `; 363 | 364 | const SideIcon = styled.div` 365 | position: absolute; 366 | top: 220px; 367 | right: 0; 368 | display: block; 369 | transition: 0.4s all ease-out; 370 | padding: 12px 12px 9px; 371 | border-radius: 50% 50%; 372 | cursor: pointer; 373 | background: ${props => 374 | props.pathname !== '/' 375 | ? `rgba(255, 255, 255, 0.9)` 376 | : `rgba(255, 255, 255, 0.3)`}; 377 | ${props => 378 | props.pathname !== '/' && 379 | ` 380 | transform: translate3d(0, -40px, 0); 381 | @media screen and (max-width: 600px) { 382 | transform: translate3d(0, -65px, 0); 383 | padding: 14px 14px 12px; 384 | } 385 | `}; 386 | `; 387 | 388 | const Aside = styled.aside` 389 | @media screen and (max-width: 600px) { 390 | display: none; 391 | } 392 | `; 393 | -------------------------------------------------------------------------------- /components/AppNavigation.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { createFixture } from 'react-cosmos'; 4 | import AppNavigation from './AppNavigation'; 5 | import data from '../tools/data'; 6 | import { linksList } from '../tools/links'; 7 | 8 | const [user] = data.users; 9 | 10 | export default linksList.map(([href, name], index) => 11 | createFixture({ 12 | component: AppNavigation, 13 | name: 'route: ' + name, 14 | props: { 15 | pathname: href, 16 | users: data.users, 17 | selectedUser: user, 18 | indexedUser: 0, 19 | addFollower: () => {}, 20 | removeFollower: () => {}, 21 | changeUser(number, fn) { 22 | fn(); 23 | }, 24 | }, 25 | }) 26 | ); 27 | -------------------------------------------------------------------------------- /components/AppNavigation.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import { Transition, Trail, Spring } from 'react-spring'; 4 | import styled from 'styled-components'; 5 | import TweenMax, { Sine } from 'gsap'; 6 | 7 | import AppMenuDrawer from './AppMenuDrawer'; 8 | import AppNavTransition from './AppNavTransition'; 9 | import AppStats from './AppStats'; 10 | import IconBase from './IconBase'; 11 | import Link from './Link'; 12 | import links, { linksList } from '../tools/links'; 13 | import firstName from '../tools/firstName'; 14 | import type { User } from '../tools/types'; 15 | 16 | type Props = { 17 | users: Array, 18 | selectedUser: User, 19 | indexedUser: number, 20 | pathname: string, 21 | addFollower: () => void, 22 | removeFollower: () => void, 23 | changeUser: (number, () => void) => void, 24 | }; 25 | 26 | type State = { 27 | isMenuOpened: boolean, 28 | }; 29 | 30 | export default class AppNavigation extends React.Component { 31 | state = { 32 | isMenuOpened: false, 33 | }; 34 | 35 | toggleMenu = () => { 36 | this.setState(state => ({ isMenuOpened: !state.isMenuOpened })); 37 | }; 38 | 39 | render() { 40 | const { 41 | selectedUser, 42 | indexedUser, 43 | users, 44 | addFollower, 45 | removeFollower, 46 | changeUser, 47 | pathname, 48 | } = this.props; 49 | const { isMenuOpened } = this.state; 50 | const index = 1 + linksList.findIndex(([href]) => href === pathname); 51 | 52 | return ( 53 |
54 | 55 | 61 | {styles => } 62 | 63 | 64 | 65 | 113 | 114 |
115 | ); 116 | } 117 | } 118 | 119 | const Header = styled.header` 120 | width: 100vw; 121 | height: 300px; 122 | position: relative; 123 | 124 | &:before { 125 | content: ''; 126 | z-index: 10; 127 | position: absolute; 128 | top: 0; 129 | right: 0; 130 | bottom: 0; 131 | left: 0; 132 | background: radial-gradient( 133 | ellipse at center, 134 | rgba(0, 0, 0, 0) 0%, 135 | rgba(0, 0, 0, 0) 36%, 136 | rgba(0, 0, 0, 0.65) 100% 137 | ); 138 | filter: progid:DXImageTransform.Microsoft.gradient( 139 | startColorstr='#00000000', 140 | endColorstr='#a6000000', 141 | GradientType=1 142 | ); 143 | opacity: 0.6; 144 | } 145 | &:after { 146 | content: ''; 147 | position: absolute; 148 | z-index: -1; 149 | top: 0; 150 | right: 0; 151 | bottom: 0; 152 | left: 0; 153 | background: #000; 154 | } 155 | `; 156 | 157 | const BackgroundOverflowControl = styled.div` 158 | position: absolute; 159 | width: 100vw; 160 | height: 300px; 161 | overflow: hidden; 162 | top: 0; 163 | `; 164 | 165 | const Background = styled.div` 166 | background: url('/static/header${props => 167 | props.imageIndex}.jpg') center center; 168 | background-size: cover; 169 | width: 100vw; 170 | height: 300px; 171 | position: absolute; 172 | top: 0; 173 | `; 174 | 175 | const Wrapper = styled.div` 176 | width: 100vw; 177 | position: relative; 178 | z-index: 1000; 179 | background: rgba(4, 67, 98, 0.25); 180 | 181 | @media screen and (max-width: 1030px) { 182 | padding: 0 20px; 183 | } 184 | `; 185 | 186 | const Nav = styled.nav` 187 | max-width: 1000px; 188 | margin: 0 auto; 189 | position: relative; 190 | `; 191 | 192 | const List = styled.ul` 193 | list-style: none; 194 | padding: 15px 0; 195 | 196 | @media screen and (max-width: 600px) { 197 | display: none; 198 | } 199 | `; 200 | 201 | const Item = styled.li` 202 | display: inline-block; 203 | margin-right: 40px; 204 | `; 205 | 206 | const Menu = styled.div` 207 | position: absolute; 208 | right: 0; 209 | top: 8px; 210 | cursor: pointer; 211 | `; 212 | -------------------------------------------------------------------------------- /components/AppStarRating.fixture.js: -------------------------------------------------------------------------------- 1 | import AppStarRating from './AppStarRating'; 2 | 3 | export default { 4 | component: AppStarRating, 5 | }; 6 | -------------------------------------------------------------------------------- /components/AppStarRating.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import IconBase from './IconBase'; 4 | import IconStarFull from './IconStarFull'; 5 | import IconStarEmpty from './IconStarEmpty'; 6 | 7 | export default () => { 8 | const seqN = Array(4).fill(null); 9 | 10 | return ( 11 | 12 | {seqN.map((_, n) => ( 13 | 14 | 15 | 16 | ))} 17 | 18 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | const Wrapper = styled.div` 25 | margin: 10px 0; 26 | `; 27 | -------------------------------------------------------------------------------- /components/AppStats.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { createFixture } from 'react-cosmos'; 4 | import AppStats from './AppStats'; 5 | import data from '../tools/data'; 6 | 7 | export default data.users.map(user => 8 | createFixture({ 9 | component: AppStats, 10 | name: user.name, 11 | props: { 12 | selectedUser: user, 13 | }, 14 | }) 15 | ); 16 | -------------------------------------------------------------------------------- /components/AppStats.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import styled from 'styled-components'; 5 | import type { User } from '../tools/types'; 6 | 7 | type Props = { 8 | selectedUser: User, 9 | }; 10 | export default class AppStats extends React.Component { 11 | render() { 12 | const { selectedUser } = this.props; 13 | return ( 14 | 15 | 16 |

{selectedUser.bio}

17 | 18 |
19 | Followers 20 |
21 | {selectedUser.followers} 22 |
23 |
24 | Following 25 |
26 | {selectedUser.following} 27 |
28 | 29 | ); 30 | } 31 | } 32 | 33 | const Stats = styled.div` 34 | font-family: 'Playfair Display', serif; 35 | display: flex; 36 | position: absolute; 37 | right: 0; 38 | top: 330px; 39 | width: 60%; 40 | justify-content: space-between; 41 | line-height: 1.2; 42 | 43 | @media screen and (max-width: 600px) { 44 | display: none; 45 | } 46 | 47 | @media screen and (max-width: 980px) { 48 | justify-content: flex-end; 49 | 50 | > * { 51 | padding-left: 20px; 52 | } 53 | } 54 | `; 55 | 56 | const Bio = styled.div` 57 | width: 60%; 58 | line-height: 1.4; 59 | 60 | @media screen and (max-width: 980px) { 61 | display: none; 62 | } 63 | `; 64 | 65 | const LargeText = styled.span` 66 | font-size: 40px; 67 | `; 68 | -------------------------------------------------------------------------------- /components/Content.fixture.js: -------------------------------------------------------------------------------- 1 | import Content from './Content'; 2 | 3 | export default { 4 | component: Content, 5 | props: { 6 | children: 'Pipo pipo, pipo.', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Content = styled.div` 4 | width: 60%; 5 | 6 | @media screen and (max-width: 600px) { 7 | width: 100%; 8 | } 9 | `; 10 | 11 | Content.displayName = 'Content'; 12 | 13 | export default Content; 14 | -------------------------------------------------------------------------------- /components/Hr.fixture.js: -------------------------------------------------------------------------------- 1 | import Hr from './Hr'; 2 | 3 | export default { 4 | component: Hr, 5 | }; 6 | -------------------------------------------------------------------------------- /components/Hr.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Hr = styled.hr` 4 | border-top: 1px solid #ddd; 5 | border-bottom: none; 6 | margin-top: 15px; 7 | `; 8 | 9 | Hr.displayName = 'Hr'; 10 | 11 | export default Hr; 12 | -------------------------------------------------------------------------------- /components/IconBase.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import { createFixture } from 'react-cosmos'; 4 | import preval from 'babel-plugin-preval/macro'; 5 | import IconBase from './IconBase'; 6 | 7 | const iconsFilenames = preval` 8 | const fs = require('fs'); 9 | 10 | module.exports = fs.readdirSync(__dirname).filter(file => file.includes('Icon') && !file.includes('Base')); 11 | `; 12 | 13 | export default iconsFilenames.map(filename => { 14 | // $FlowFixMe 15 | const Icon = require(`./${filename}`).default; 16 | 17 | const name = filename.slice(4, -3); 18 | 19 | return createFixture({ 20 | component: IconBase, 21 | name, 22 | props: { 23 | iconName: name, 24 | iconColor: 'orangered', 25 | children: , 26 | width: 100, 27 | height: 100, 28 | }, 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /components/IconBase.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import styled from 'styled-components'; 5 | 6 | type Props = { 7 | children: React.Node, 8 | width?: number, 9 | height?: number, 10 | iconName?: string, 11 | iconColor?: string, 12 | style?: { [string]: string | number }, 13 | }; 14 | 15 | export default class Icon extends React.Component { 16 | static defaultProps = { 17 | width: 18, 18 | height: 18, 19 | iconName: 'box', 20 | iconColor: 'currentColor', 21 | }; 22 | 23 | render() { 24 | const { width, height, iconName, iconColor, children, style } = this.props; 25 | return ( 26 | 35 | 36 | {iconName} icon 37 | 38 | {children} 39 | 40 | ); 41 | } 42 | } 43 | 44 | const FormattedSvg = styled.svg` 45 | display: inline-block; 46 | vertical-align: baseline; 47 | /* 48 | Sarah in the original app about the next line: 49 | "yes, I'm that particular about formatting" 50 | Xavier adapting to NextJS: 51 | "🙌" 52 | */ 53 | margin-bottom: -2px; 54 | `; 55 | -------------------------------------------------------------------------------- /components/IconCalendar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 | 5 | ); 6 | -------------------------------------------------------------------------------- /components/IconMail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 | 5 | ); 6 | -------------------------------------------------------------------------------- /components/IconMapPin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 | 5 | 6 | 7 | 8 | ) -------------------------------------------------------------------------------- /components/IconStarEmpty.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 | 5 | ) -------------------------------------------------------------------------------- /components/IconStarFull.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 | 5 | ) -------------------------------------------------------------------------------- /components/Link.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { createFixture } from 'react-cosmos'; 4 | import Link from './Link'; 5 | 6 | export default createFixture({ 7 | component: Link, 8 | props: { 9 | href: '/', 10 | children: 'Click Me', 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /components/Link.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import NextLink from 'next/link'; 4 | import styled from 'styled-components'; 5 | 6 | type Props = { 7 | children: React.Node, 8 | href: string, 9 | color?: string, 10 | active?: boolean, 11 | }; 12 | export default class Link extends React.Component { 13 | render() { 14 | const { children, href, color, active } = this.props; 15 | return ( 16 | 17 | 18 | {children} 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | const Anchor = styled.a` 26 | &, 27 | &:visited, 28 | &:active { 29 | color: ${props => (props.color ? props.color : 'orangered')}; 30 | text-decoration: none; 31 | cursor: pointer; 32 | } 33 | 34 | ${props => props.active && `font-weight: bold;`}; 35 | `; 36 | -------------------------------------------------------------------------------- /components/Main.fixture.js: -------------------------------------------------------------------------------- 1 | import Main from './Main'; 2 | 3 | export default { 4 | component: Main, 5 | props: { 6 | children: 'Main frame in a primary context', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Main = styled.main` 4 | max-width: 1000px; 5 | margin: 0 auto; 6 | display: flex; 7 | justify-content: space-between; 8 | 9 | @media screen and (max-width: 1030px) { 10 | padding: 0 20px; 11 | } 12 | 13 | @media screen and (max-width: 600px) { 14 | flex-direction: column; 15 | } 16 | `; 17 | 18 | Main.displayName = 'Main'; 19 | 20 | export default Main; 21 | -------------------------------------------------------------------------------- /components/Paragraph.fixture.js: -------------------------------------------------------------------------------- 1 | import Paragraph from './Paragraph'; 2 | 3 | export default { 4 | component: Paragraph, 5 | props: { 6 | children: 'Paraphrase a sentence', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Paragraph.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Paragraph = styled.p` 4 | margin: 10px 0; 5 | `; 6 | 7 | Paragraph.displayName = 'Paragraph'; 8 | 9 | export default Paragraph; 10 | -------------------------------------------------------------------------------- /components/Places.fixture.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { createFixture } from 'react-cosmos'; 3 | import Places from './Places'; 4 | import data from '../tools/data'; 5 | 6 | export default createFixture({ 7 | component: Places, 8 | props: { 9 | places: data.places, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /components/Places.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from 'react'; 3 | import styled from 'styled-components'; 4 | 5 | import Top from './Top'; 6 | import Paragraph from './Paragraph'; 7 | import Hr from './Hr'; 8 | 9 | import type { Place } from '../tools/types'; 10 | 11 | type Props = { 12 | places: Array, 13 | }; 14 | 15 | export default class Places extends React.Component { 16 | render() { 17 | return this.props.places.map(place => ( 18 | 19 | {place.name} 20 | 21 | {place.name} 22 | 23 | {place.description} 24 |
25 | 26 | )); 27 | } 28 | } 29 | 30 | const Item = styled.div` 31 | padding: 10px 0; 32 | `; 33 | 34 | const Image = styled.img` 35 | float: left; 36 | margin: 0 15px 15px 0; 37 | `; 38 | -------------------------------------------------------------------------------- /components/Sidebar.fixture.js: -------------------------------------------------------------------------------- 1 | import Top from './Top'; 2 | 3 | export default { 4 | component: Top, 5 | props: { 6 | children: 'Siding, baring, whatever', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Sidebar = styled.aside` 4 | width: 35%; 5 | padding: 20px; 6 | margin: 40px 0 0 20px; 7 | background: #eee; 8 | float: right; 9 | 10 | @media screen and (max-width: 600px) { 11 | width: 100%; 12 | margin: 10px 0; 13 | } 14 | `; 15 | 16 | Sidebar.displayName = 'Sidebar'; 17 | 18 | export default Sidebar; 19 | -------------------------------------------------------------------------------- /components/Top.fixture.js: -------------------------------------------------------------------------------- 1 | import Top from './Top'; 2 | 3 | export default { 4 | component: Top, 5 | props: { 6 | children: "I'm a top paragraph", 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /components/Top.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Top = styled.p` 4 | margin: 30px 0 0; 5 | text-transform: uppercase; 6 | font-size: 14px; 7 | color: #666; 8 | padding: 0; 9 | `; 10 | 11 | Top.displayName = 'Top'; 12 | 13 | export default Top; 14 | -------------------------------------------------------------------------------- /cosmos.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: 'static', 3 | publicUrl: '/static/', 4 | globalImports: ['./pages/_styles.js'], 5 | }; 6 | -------------------------------------------------------------------------------- /cosmos.proxies.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Router from 'next/router'; 3 | 4 | class NextJSProxy extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.__realRouter = Router.router; 9 | Router.router = createRouterMock(); 10 | } 11 | 12 | componentWillUnmount() { 13 | if (this.__realRouter) { 14 | Router.router = this.__realRouter; 15 | } 16 | } 17 | 18 | render() { 19 | const { nextProxy, ...rest } = this.props; 20 | const { value: NextProxy, next } = nextProxy; 21 | 22 | return ; 23 | } 24 | } 25 | 26 | function createRouterMock() { 27 | return { 28 | push: () => {}, 29 | prefetch: () => {}, 30 | replace: () => {}, 31 | }; 32 | } 33 | 34 | export default [NextJSProxy]; 35 | -------------------------------------------------------------------------------- /flow-typed/next.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | declare module 'next' { 4 | declare type NextApp = { 5 | prepare(): Promise, 6 | getRequestHandler(): any, 7 | render(req: any, res: any, pathname: string, query: any): any, 8 | renderToHTML(req: any, res: any, pathname: string, query: string): string, 9 | renderError(err: Error, req: any, res: any, pathname: any, query: any): any, 10 | renderErrorToHTML( 11 | err: Error, 12 | req: any, 13 | res: any, 14 | pathname: string, 15 | query: any 16 | ): string, 17 | }; 18 | declare module.exports: (...opts: any) => NextApp; 19 | } 20 | 21 | declare module 'next/head' { 22 | declare module.exports: Class>; 23 | } 24 | 25 | declare module 'next/link' { 26 | declare module.exports: Class< 27 | React$Component<{ href: string, prefetch?: boolean }, any> 28 | >; 29 | } 30 | 31 | declare module 'next/error' { 32 | declare module.exports: Class>; 33 | } 34 | 35 | declare module 'next/router' { 36 | declare module.exports: { 37 | route: string, 38 | pathname: string, 39 | query: Object, 40 | onRouteChangeStart: ?(url: string) => void, 41 | onRouteChangeComplete: ?(url: string) => void, 42 | onRouteChangeError: ?( 43 | err: Error & { cancelled: boolean }, 44 | url: string 45 | ) => void, 46 | push(url: string, as: ?string): Promise, 47 | replace(url: string, as: ?string): Promise, 48 | }; 49 | } 50 | 51 | declare module 'next/document' { 52 | declare export var Head: Class>; 53 | declare export var Main: Class>; 54 | declare export var NextScript: Class>; 55 | declare export default Class> & { 56 | getInitialProps: (ctx: { 57 | pathname: string, 58 | query: any, 59 | req?: any, 60 | res?: any, 61 | jsonPageRes?: any, 62 | err?: any, 63 | }) => Promise, 64 | renderPage(cb: Function): void, 65 | }; 66 | } 67 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-preval_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 3704e85519de91e96a3b6f1d1a865b76 2 | // flow-typed version: <>/babel-plugin-preval_v3.0.0/flow_v0.78.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-preval' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-preval' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-preval/dist/helpers' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-plugin-preval/dist/index' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-plugin-preval/dist/macro' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-plugin-preval/dist/object-to-ast' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-plugin-preval/macro' { 42 | declare module.exports: any; 43 | } 44 | 45 | // Filename aliases 46 | declare module 'babel-plugin-preval/dist/helpers.js' { 47 | declare module.exports: $Exports<'babel-plugin-preval/dist/helpers'>; 48 | } 49 | declare module 'babel-plugin-preval/dist/index.js' { 50 | declare module.exports: $Exports<'babel-plugin-preval/dist/index'>; 51 | } 52 | declare module 'babel-plugin-preval/dist/macro.js' { 53 | declare module.exports: $Exports<'babel-plugin-preval/dist/macro'>; 54 | } 55 | declare module 'babel-plugin-preval/dist/object-to-ast.js' { 56 | declare module.exports: $Exports<'babel-plugin-preval/dist/object-to-ast'>; 57 | } 58 | declare module 'babel-plugin-preval/macro.js' { 59 | declare module.exports: $Exports<'babel-plugin-preval/macro'>; 60 | } 61 | -------------------------------------------------------------------------------- /flow-typed/npm/react-spring_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 8f26f5d847057c9312ad517585cda858 2 | // flow-typed version: <>/react-spring_v5.6.6/flow_v0.78.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'react-spring' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'react-spring' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'react-spring/dist/addons.cjs' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'react-spring/dist/addons' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'react-spring/dist/addons.umd' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'react-spring/dist/konva.cjs' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'react-spring/dist/konva' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'react-spring/dist/native.cjs' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'react-spring/dist/native' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'react-spring/dist/universal.cjs' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'react-spring/dist/universal' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'react-spring/dist/web.cjs' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'react-spring/dist/web' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'react-spring/dist/web.umd' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'react-spring/src/addons/Easing' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'react-spring/src/addons/index' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'react-spring/src/addons/OscillatorAnimation' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module 'react-spring/src/addons/TimingAnimation' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module 'react-spring/src/animated/Animated' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module 'react-spring/src/animated/AnimatedArray' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module 'react-spring/src/animated/AnimatedController' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module 'react-spring/src/animated/AnimatedInterpolation' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module 'react-spring/src/animated/AnimatedProps' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module 'react-spring/src/animated/AnimatedStyle' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module 'react-spring/src/animated/AnimatedTracking' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module 'react-spring/src/animated/AnimatedValue' { 118 | declare module.exports: any; 119 | } 120 | 121 | declare module 'react-spring/src/animated/AnimatedWithChildren' { 122 | declare module.exports: any; 123 | } 124 | 125 | declare module 'react-spring/src/animated/Animation' { 126 | declare module.exports: any; 127 | } 128 | 129 | declare module 'react-spring/src/animated/createAnimatedComponent' { 130 | declare module.exports: any; 131 | } 132 | 133 | declare module 'react-spring/src/animated/Globals' { 134 | declare module.exports: any; 135 | } 136 | 137 | declare module 'react-spring/src/animated/Interpolation' { 138 | declare module.exports: any; 139 | } 140 | 141 | declare module 'react-spring/src/animated/SpringAnimation' { 142 | declare module.exports: any; 143 | } 144 | 145 | declare module 'react-spring/src/Keyframes' { 146 | declare module.exports: any; 147 | } 148 | 149 | declare module 'react-spring/src/Spring' { 150 | declare module.exports: any; 151 | } 152 | 153 | declare module 'react-spring/src/targets/konva/index' { 154 | declare module.exports: any; 155 | } 156 | 157 | declare module 'react-spring/src/targets/native/AnimatedTransform' { 158 | declare module.exports: any; 159 | } 160 | 161 | declare module 'react-spring/src/targets/native/index' { 162 | declare module.exports: any; 163 | } 164 | 165 | declare module 'react-spring/src/targets/shared/colors' { 166 | declare module.exports: any; 167 | } 168 | 169 | declare module 'react-spring/src/targets/shared/constants' { 170 | declare module.exports: any; 171 | } 172 | 173 | declare module 'react-spring/src/targets/shared/helpers' { 174 | declare module.exports: any; 175 | } 176 | 177 | declare module 'react-spring/src/targets/shared/interpolation' { 178 | declare module.exports: any; 179 | } 180 | 181 | declare module 'react-spring/src/targets/shared/normalizeColors' { 182 | declare module.exports: any; 183 | } 184 | 185 | declare module 'react-spring/src/targets/universal/index' { 186 | declare module.exports: any; 187 | } 188 | 189 | declare module 'react-spring/src/targets/web/fix-auto' { 190 | declare module.exports: any; 191 | } 192 | 193 | declare module 'react-spring/src/targets/web/globals' { 194 | declare module.exports: any; 195 | } 196 | 197 | declare module 'react-spring/src/targets/web/index' { 198 | declare module.exports: any; 199 | } 200 | 201 | declare module 'react-spring/src/targets/web/Parallax' { 202 | declare module.exports: any; 203 | } 204 | 205 | declare module 'react-spring/src/Trail' { 206 | declare module.exports: any; 207 | } 208 | 209 | declare module 'react-spring/src/Transition' { 210 | declare module.exports: any; 211 | } 212 | 213 | // Filename aliases 214 | declare module 'react-spring/dist/addons.cjs.js' { 215 | declare module.exports: $Exports<'react-spring/dist/addons.cjs'>; 216 | } 217 | declare module 'react-spring/dist/addons.js' { 218 | declare module.exports: $Exports<'react-spring/dist/addons'>; 219 | } 220 | declare module 'react-spring/dist/addons.umd.js' { 221 | declare module.exports: $Exports<'react-spring/dist/addons.umd'>; 222 | } 223 | declare module 'react-spring/dist/konva.cjs.js' { 224 | declare module.exports: $Exports<'react-spring/dist/konva.cjs'>; 225 | } 226 | declare module 'react-spring/dist/konva.js' { 227 | declare module.exports: $Exports<'react-spring/dist/konva'>; 228 | } 229 | declare module 'react-spring/dist/native.cjs.js' { 230 | declare module.exports: $Exports<'react-spring/dist/native.cjs'>; 231 | } 232 | declare module 'react-spring/dist/native.js' { 233 | declare module.exports: $Exports<'react-spring/dist/native'>; 234 | } 235 | declare module 'react-spring/dist/universal.cjs.js' { 236 | declare module.exports: $Exports<'react-spring/dist/universal.cjs'>; 237 | } 238 | declare module 'react-spring/dist/universal.js' { 239 | declare module.exports: $Exports<'react-spring/dist/universal'>; 240 | } 241 | declare module 'react-spring/dist/web.cjs.js' { 242 | declare module.exports: $Exports<'react-spring/dist/web.cjs'>; 243 | } 244 | declare module 'react-spring/dist/web.js' { 245 | declare module.exports: $Exports<'react-spring/dist/web'>; 246 | } 247 | declare module 'react-spring/dist/web.umd.js' { 248 | declare module.exports: $Exports<'react-spring/dist/web.umd'>; 249 | } 250 | declare module 'react-spring/src/addons/Easing.js' { 251 | declare module.exports: $Exports<'react-spring/src/addons/Easing'>; 252 | } 253 | declare module 'react-spring/src/addons/index.js' { 254 | declare module.exports: $Exports<'react-spring/src/addons/index'>; 255 | } 256 | declare module 'react-spring/src/addons/OscillatorAnimation.js' { 257 | declare module.exports: $Exports<'react-spring/src/addons/OscillatorAnimation'>; 258 | } 259 | declare module 'react-spring/src/addons/TimingAnimation.js' { 260 | declare module.exports: $Exports<'react-spring/src/addons/TimingAnimation'>; 261 | } 262 | declare module 'react-spring/src/animated/Animated.js' { 263 | declare module.exports: $Exports<'react-spring/src/animated/Animated'>; 264 | } 265 | declare module 'react-spring/src/animated/AnimatedArray.js' { 266 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedArray'>; 267 | } 268 | declare module 'react-spring/src/animated/AnimatedController.js' { 269 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedController'>; 270 | } 271 | declare module 'react-spring/src/animated/AnimatedInterpolation.js' { 272 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedInterpolation'>; 273 | } 274 | declare module 'react-spring/src/animated/AnimatedProps.js' { 275 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedProps'>; 276 | } 277 | declare module 'react-spring/src/animated/AnimatedStyle.js' { 278 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedStyle'>; 279 | } 280 | declare module 'react-spring/src/animated/AnimatedTracking.js' { 281 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedTracking'>; 282 | } 283 | declare module 'react-spring/src/animated/AnimatedValue.js' { 284 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedValue'>; 285 | } 286 | declare module 'react-spring/src/animated/AnimatedWithChildren.js' { 287 | declare module.exports: $Exports<'react-spring/src/animated/AnimatedWithChildren'>; 288 | } 289 | declare module 'react-spring/src/animated/Animation.js' { 290 | declare module.exports: $Exports<'react-spring/src/animated/Animation'>; 291 | } 292 | declare module 'react-spring/src/animated/createAnimatedComponent.js' { 293 | declare module.exports: $Exports<'react-spring/src/animated/createAnimatedComponent'>; 294 | } 295 | declare module 'react-spring/src/animated/Globals.js' { 296 | declare module.exports: $Exports<'react-spring/src/animated/Globals'>; 297 | } 298 | declare module 'react-spring/src/animated/Interpolation.js' { 299 | declare module.exports: $Exports<'react-spring/src/animated/Interpolation'>; 300 | } 301 | declare module 'react-spring/src/animated/SpringAnimation.js' { 302 | declare module.exports: $Exports<'react-spring/src/animated/SpringAnimation'>; 303 | } 304 | declare module 'react-spring/src/Keyframes.js' { 305 | declare module.exports: $Exports<'react-spring/src/Keyframes'>; 306 | } 307 | declare module 'react-spring/src/Spring.js' { 308 | declare module.exports: $Exports<'react-spring/src/Spring'>; 309 | } 310 | declare module 'react-spring/src/targets/konva/index.js' { 311 | declare module.exports: $Exports<'react-spring/src/targets/konva/index'>; 312 | } 313 | declare module 'react-spring/src/targets/native/AnimatedTransform.js' { 314 | declare module.exports: $Exports<'react-spring/src/targets/native/AnimatedTransform'>; 315 | } 316 | declare module 'react-spring/src/targets/native/index.js' { 317 | declare module.exports: $Exports<'react-spring/src/targets/native/index'>; 318 | } 319 | declare module 'react-spring/src/targets/shared/colors.js' { 320 | declare module.exports: $Exports<'react-spring/src/targets/shared/colors'>; 321 | } 322 | declare module 'react-spring/src/targets/shared/constants.js' { 323 | declare module.exports: $Exports<'react-spring/src/targets/shared/constants'>; 324 | } 325 | declare module 'react-spring/src/targets/shared/helpers.js' { 326 | declare module.exports: $Exports<'react-spring/src/targets/shared/helpers'>; 327 | } 328 | declare module 'react-spring/src/targets/shared/interpolation.js' { 329 | declare module.exports: $Exports<'react-spring/src/targets/shared/interpolation'>; 330 | } 331 | declare module 'react-spring/src/targets/shared/normalizeColors.js' { 332 | declare module.exports: $Exports<'react-spring/src/targets/shared/normalizeColors'>; 333 | } 334 | declare module 'react-spring/src/targets/universal/index.js' { 335 | declare module.exports: $Exports<'react-spring/src/targets/universal/index'>; 336 | } 337 | declare module 'react-spring/src/targets/web/fix-auto.js' { 338 | declare module.exports: $Exports<'react-spring/src/targets/web/fix-auto'>; 339 | } 340 | declare module 'react-spring/src/targets/web/globals.js' { 341 | declare module.exports: $Exports<'react-spring/src/targets/web/globals'>; 342 | } 343 | declare module 'react-spring/src/targets/web/index.js' { 344 | declare module.exports: $Exports<'react-spring/src/targets/web/index'>; 345 | } 346 | declare module 'react-spring/src/targets/web/Parallax.js' { 347 | declare module.exports: $Exports<'react-spring/src/targets/web/Parallax'>; 348 | } 349 | declare module 'react-spring/src/Trail.js' { 350 | declare module.exports: $Exports<'react-spring/src/Trail'>; 351 | } 352 | declare module 'react-spring/src/Transition.js' { 353 | declare module.exports: $Exports<'react-spring/src/Transition'>; 354 | } 355 | -------------------------------------------------------------------------------- /flow-typed/npm/styled-components_v3.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d8b3a2051d4c9ebaeefb2b3b045f7b14 2 | // flow-typed version: 123fc9bb3c/styled-components_v3.x.x/flow_>=v0.75.x 3 | 4 | // @flow 5 | 6 | type $npm$styledComponents$Interpolation = ((executionContext: C) => string) | string | number; 7 | type $npm$styledComponents$NameGenerator = (hash: number) => string; 8 | 9 | type $npm$styledComponents$TaggedTemplateLiteral = {| (Array, $npm$styledComponents$Interpolation): R |}; 10 | 11 | // ---- FUNCTIONAL COMPONENT DEFINITIONS ---- 12 | type $npm$styledComponents$ReactComponentFunctional = 13 | & { defaultProps: DefaultProps } 14 | & $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps 15 | 16 | type $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps = 17 | React$StatelessFunctionalComponent 18 | 19 | // ---- CLASS COMPONENT DEFINITIONS ---- 20 | class $npm$styledComponents$ReactComponent extends React$Component { 21 | static defaultProps: DefaultProps 22 | } 23 | type $npm$styledComponents$ReactComponentClass = Class<$npm$styledComponents$ReactComponent> 24 | type $npm$styledComponents$ReactComponentClassUndefinedDefaultProps = Class> 25 | 26 | // ---- COMPONENT FUNCTIONS INPUT (UNION) & OUTPUT (INTERSECTION) ---- 27 | type $npm$styledComponents$ReactComponentUnion = 28 | $npm$styledComponents$ReactComponentUnionWithDefaultProps 29 | 30 | type $npm$styledComponents$ReactComponentUnionWithDefaultProps = 31 | | $npm$styledComponents$ReactComponentFunctional 32 | | $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps 33 | | $npm$styledComponents$ReactComponentClass 34 | | $npm$styledComponents$ReactComponentClassUndefinedDefaultProps 35 | 36 | type $npm$styledComponents$ReactComponentIntersection = 37 | & $npm$styledComponents$ReactComponentFunctional 38 | & $npm$styledComponents$ReactComponentClass; 39 | 40 | // ---- WITHCOMPONENT ---- 41 | type $npm$styledComponents$ReactComponentStyledWithComponent = < 42 | Props, DefaultProps, 43 | Input: 44 | | ComponentList 45 | | $npm$styledComponents$ReactComponentStyled 46 | | $npm$styledComponents$ReactComponentUnionWithDefaultProps 47 | >(Input) => $npm$styledComponents$ReactComponentStyled 48 | 49 | // ---- STATIC PROPERTIES ---- 50 | type $npm$styledComponents$ReactComponentStyledStaticProps = {| 51 | attrs: (AdditionalProps) => $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteral, 52 | extend: $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteral, 53 | |} 54 | 55 | type $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent = {| 56 | withComponent: $npm$styledComponents$ReactComponentStyledWithComponent, 57 | attrs: (AdditionalProps) => $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent, 58 | extend: $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent, 59 | |} 60 | 61 | // ---- STYLED FUNCTION ---- 62 | // Error: styled(CustomComponent).withComponent('a') 63 | // Ok: styled('div').withComponent('a') 64 | type $npm$styledComponents$Call = 65 | & (ComponentListKeys => $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent<{}, ComponentListKeys>) 66 | & (($npm$styledComponents$ReactComponentUnion) => $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteral) 67 | 68 | // ---- STYLED COMPONENT ---- 69 | type $npm$styledComponents$ReactComponentStyled = 70 | & $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent 71 | & $npm$styledComponents$ReactComponentIntersection 72 | 73 | // ---- TAGGED TEMPLATE LITERAL ---- 74 | type $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteral = 75 | & $npm$styledComponents$ReactComponentStyledStaticProps 76 | & $npm$styledComponents$TaggedTemplateLiteral<$npm$styledComponents$ReactComponentStyled> 77 | 78 | type $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent = 79 | & $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent 80 | & $npm$styledComponents$TaggedTemplateLiteral<$npm$styledComponents$ReactComponentStyled> 81 | 82 | // ---- WITHTHEME ---- 83 | type $npm$styledComponents$WithThemeReactComponentClass = < 84 | InputProps: { theme: $npm$styledComponents$Theme }, 85 | InputDefaultProps: {}, 86 | OutputProps: $Diff, 87 | OutputDefaultProps: InputDefaultProps & { theme: $npm$styledComponents$Theme }, 88 | >($npm$styledComponents$ReactComponentClass) => $npm$styledComponents$ReactComponentClass 89 | 90 | type $npm$styledComponents$WithThemeReactComponentClassUndefinedDefaultProps = < 91 | InputProps: { theme: $npm$styledComponents$Theme }, 92 | OutputProps: $Diff, 93 | >($npm$styledComponents$ReactComponentClassUndefinedDefaultProps) => $npm$styledComponents$ReactComponentClass 94 | 95 | type $npm$styledComponents$WithThemeReactComponentFunctional = < 96 | InputProps: { theme: $npm$styledComponents$Theme }, 97 | InputDefaultProps: {}, 98 | OutputProps: $Diff, 99 | OutputDefaultProps: InputDefaultProps & { theme: $npm$styledComponents$Theme }, 100 | >($npm$styledComponents$ReactComponentFunctional) => $npm$styledComponents$ReactComponentFunctional 101 | 102 | type $npm$styledComponents$WithThemeReactComponentFunctionalUndefinedDefaultProps = < 103 | InputProps: { theme: $npm$styledComponents$Theme }, 104 | OutputProps: $Diff 105 | >($npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps) => $npm$styledComponents$ReactComponentFunctional 106 | 107 | type $npm$styledComponents$WithTheme = 108 | & $npm$styledComponents$WithThemeReactComponentClass 109 | & $npm$styledComponents$WithThemeReactComponentClassUndefinedDefaultProps 110 | & $npm$styledComponents$WithThemeReactComponentFunctional 111 | & $npm$styledComponents$WithThemeReactComponentFunctionalUndefinedDefaultProps 112 | 113 | // ---- MISC ---- 114 | type $npm$styledComponents$Theme = {[key: string]: mixed}; 115 | type $npm$styledComponents$ThemeProviderProps = { 116 | theme: $npm$styledComponents$Theme | ((outerTheme: $npm$styledComponents$Theme) => void) 117 | }; 118 | 119 | class Npm$StyledComponents$ThemeProvider extends React$Component<$npm$styledComponents$ThemeProviderProps> {} 120 | 121 | class Npm$StyledComponents$StyleSheetManager extends React$Component<{ sheet: mixed }> {} 122 | 123 | class Npm$StyledComponents$ServerStyleSheet { 124 | instance: StyleSheet 125 | collectStyles: (children: any) => React$Node 126 | getStyleTags: () => string 127 | getStyleElement: () => React$Node 128 | interleaveWithNodeStream: (readableStream: stream$Readable) => stream$Readable 129 | } 130 | 131 | type $npm$styledComponents$StyledComponentsComponentListKeys = 132 | $Subtype<$Keys<$npm$styledComponents$StyledComponentsComponentList>> 133 | 134 | type $npm$styledComponents$StyledComponentsComponentListValue = 135 | $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent<{}, $npm$styledComponents$StyledComponentsComponentListKeys> 136 | 137 | // ---- COMPONENT LIST ---- 138 | type $npm$styledComponents$StyledComponentsComponentList = {| 139 | a: $npm$styledComponents$StyledComponentsComponentListValue, 140 | abbr: $npm$styledComponents$StyledComponentsComponentListValue, 141 | address: $npm$styledComponents$StyledComponentsComponentListValue, 142 | area: $npm$styledComponents$StyledComponentsComponentListValue, 143 | article: $npm$styledComponents$StyledComponentsComponentListValue, 144 | aside: $npm$styledComponents$StyledComponentsComponentListValue, 145 | audio: $npm$styledComponents$StyledComponentsComponentListValue, 146 | b: $npm$styledComponents$StyledComponentsComponentListValue, 147 | base: $npm$styledComponents$StyledComponentsComponentListValue, 148 | bdi: $npm$styledComponents$StyledComponentsComponentListValue, 149 | bdo: $npm$styledComponents$StyledComponentsComponentListValue, 150 | big: $npm$styledComponents$StyledComponentsComponentListValue, 151 | blockquote: $npm$styledComponents$StyledComponentsComponentListValue, 152 | body: $npm$styledComponents$StyledComponentsComponentListValue, 153 | br: $npm$styledComponents$StyledComponentsComponentListValue, 154 | button: $npm$styledComponents$StyledComponentsComponentListValue, 155 | canvas: $npm$styledComponents$StyledComponentsComponentListValue, 156 | caption: $npm$styledComponents$StyledComponentsComponentListValue, 157 | cite: $npm$styledComponents$StyledComponentsComponentListValue, 158 | code: $npm$styledComponents$StyledComponentsComponentListValue, 159 | col: $npm$styledComponents$StyledComponentsComponentListValue, 160 | colgroup: $npm$styledComponents$StyledComponentsComponentListValue, 161 | data: $npm$styledComponents$StyledComponentsComponentListValue, 162 | datalist: $npm$styledComponents$StyledComponentsComponentListValue, 163 | dd: $npm$styledComponents$StyledComponentsComponentListValue, 164 | del: $npm$styledComponents$StyledComponentsComponentListValue, 165 | details: $npm$styledComponents$StyledComponentsComponentListValue, 166 | dfn: $npm$styledComponents$StyledComponentsComponentListValue, 167 | dialog: $npm$styledComponents$StyledComponentsComponentListValue, 168 | div: $npm$styledComponents$StyledComponentsComponentListValue, 169 | dl: $npm$styledComponents$StyledComponentsComponentListValue, 170 | dt: $npm$styledComponents$StyledComponentsComponentListValue, 171 | em: $npm$styledComponents$StyledComponentsComponentListValue, 172 | embed: $npm$styledComponents$StyledComponentsComponentListValue, 173 | fieldset: $npm$styledComponents$StyledComponentsComponentListValue, 174 | figcaption: $npm$styledComponents$StyledComponentsComponentListValue, 175 | figure: $npm$styledComponents$StyledComponentsComponentListValue, 176 | footer: $npm$styledComponents$StyledComponentsComponentListValue, 177 | form: $npm$styledComponents$StyledComponentsComponentListValue, 178 | h1: $npm$styledComponents$StyledComponentsComponentListValue, 179 | h2: $npm$styledComponents$StyledComponentsComponentListValue, 180 | h3: $npm$styledComponents$StyledComponentsComponentListValue, 181 | h4: $npm$styledComponents$StyledComponentsComponentListValue, 182 | h5: $npm$styledComponents$StyledComponentsComponentListValue, 183 | h6: $npm$styledComponents$StyledComponentsComponentListValue, 184 | head: $npm$styledComponents$StyledComponentsComponentListValue, 185 | header: $npm$styledComponents$StyledComponentsComponentListValue, 186 | hgroup: $npm$styledComponents$StyledComponentsComponentListValue, 187 | hr: $npm$styledComponents$StyledComponentsComponentListValue, 188 | html: $npm$styledComponents$StyledComponentsComponentListValue, 189 | i: $npm$styledComponents$StyledComponentsComponentListValue, 190 | iframe: $npm$styledComponents$StyledComponentsComponentListValue, 191 | img: $npm$styledComponents$StyledComponentsComponentListValue, 192 | input: $npm$styledComponents$StyledComponentsComponentListValue, 193 | ins: $npm$styledComponents$StyledComponentsComponentListValue, 194 | kbd: $npm$styledComponents$StyledComponentsComponentListValue, 195 | keygen: $npm$styledComponents$StyledComponentsComponentListValue, 196 | label: $npm$styledComponents$StyledComponentsComponentListValue, 197 | legend: $npm$styledComponents$StyledComponentsComponentListValue, 198 | li: $npm$styledComponents$StyledComponentsComponentListValue, 199 | link: $npm$styledComponents$StyledComponentsComponentListValue, 200 | main: $npm$styledComponents$StyledComponentsComponentListValue, 201 | map: $npm$styledComponents$StyledComponentsComponentListValue, 202 | mark: $npm$styledComponents$StyledComponentsComponentListValue, 203 | menu: $npm$styledComponents$StyledComponentsComponentListValue, 204 | menuitem: $npm$styledComponents$StyledComponentsComponentListValue, 205 | meta: $npm$styledComponents$StyledComponentsComponentListValue, 206 | meter: $npm$styledComponents$StyledComponentsComponentListValue, 207 | nav: $npm$styledComponents$StyledComponentsComponentListValue, 208 | noscript: $npm$styledComponents$StyledComponentsComponentListValue, 209 | object: $npm$styledComponents$StyledComponentsComponentListValue, 210 | ol: $npm$styledComponents$StyledComponentsComponentListValue, 211 | optgroup: $npm$styledComponents$StyledComponentsComponentListValue, 212 | option: $npm$styledComponents$StyledComponentsComponentListValue, 213 | output: $npm$styledComponents$StyledComponentsComponentListValue, 214 | p: $npm$styledComponents$StyledComponentsComponentListValue, 215 | param: $npm$styledComponents$StyledComponentsComponentListValue, 216 | picture: $npm$styledComponents$StyledComponentsComponentListValue, 217 | pre: $npm$styledComponents$StyledComponentsComponentListValue, 218 | progress: $npm$styledComponents$StyledComponentsComponentListValue, 219 | q: $npm$styledComponents$StyledComponentsComponentListValue, 220 | rp: $npm$styledComponents$StyledComponentsComponentListValue, 221 | rt: $npm$styledComponents$StyledComponentsComponentListValue, 222 | ruby: $npm$styledComponents$StyledComponentsComponentListValue, 223 | s: $npm$styledComponents$StyledComponentsComponentListValue, 224 | samp: $npm$styledComponents$StyledComponentsComponentListValue, 225 | script: $npm$styledComponents$StyledComponentsComponentListValue, 226 | section: $npm$styledComponents$StyledComponentsComponentListValue, 227 | select: $npm$styledComponents$StyledComponentsComponentListValue, 228 | small: $npm$styledComponents$StyledComponentsComponentListValue, 229 | source: $npm$styledComponents$StyledComponentsComponentListValue, 230 | span: $npm$styledComponents$StyledComponentsComponentListValue, 231 | strong: $npm$styledComponents$StyledComponentsComponentListValue, 232 | style: $npm$styledComponents$StyledComponentsComponentListValue, 233 | sub: $npm$styledComponents$StyledComponentsComponentListValue, 234 | summary: $npm$styledComponents$StyledComponentsComponentListValue, 235 | sup: $npm$styledComponents$StyledComponentsComponentListValue, 236 | table: $npm$styledComponents$StyledComponentsComponentListValue, 237 | tbody: $npm$styledComponents$StyledComponentsComponentListValue, 238 | td: $npm$styledComponents$StyledComponentsComponentListValue, 239 | textarea: $npm$styledComponents$StyledComponentsComponentListValue, 240 | tfoot: $npm$styledComponents$StyledComponentsComponentListValue, 241 | th: $npm$styledComponents$StyledComponentsComponentListValue, 242 | thead: $npm$styledComponents$StyledComponentsComponentListValue, 243 | time: $npm$styledComponents$StyledComponentsComponentListValue, 244 | title: $npm$styledComponents$StyledComponentsComponentListValue, 245 | tr: $npm$styledComponents$StyledComponentsComponentListValue, 246 | track: $npm$styledComponents$StyledComponentsComponentListValue, 247 | u: $npm$styledComponents$StyledComponentsComponentListValue, 248 | ul: $npm$styledComponents$StyledComponentsComponentListValue, 249 | var: $npm$styledComponents$StyledComponentsComponentListValue, 250 | video: $npm$styledComponents$StyledComponentsComponentListValue, 251 | wbr: $npm$styledComponents$StyledComponentsComponentListValue, 252 | 253 | // SVG 254 | circle: $npm$styledComponents$StyledComponentsComponentListValue, 255 | clipPath: $npm$styledComponents$StyledComponentsComponentListValue, 256 | defs: $npm$styledComponents$StyledComponentsComponentListValue, 257 | ellipse: $npm$styledComponents$StyledComponentsComponentListValue, 258 | g: $npm$styledComponents$StyledComponentsComponentListValue, 259 | image: $npm$styledComponents$StyledComponentsComponentListValue, 260 | line: $npm$styledComponents$StyledComponentsComponentListValue, 261 | linearGradient: $npm$styledComponents$StyledComponentsComponentListValue, 262 | mask: $npm$styledComponents$StyledComponentsComponentListValue, 263 | path: $npm$styledComponents$StyledComponentsComponentListValue, 264 | pattern: $npm$styledComponents$StyledComponentsComponentListValue, 265 | polygon: $npm$styledComponents$StyledComponentsComponentListValue, 266 | polyline: $npm$styledComponents$StyledComponentsComponentListValue, 267 | radialGradient: $npm$styledComponents$StyledComponentsComponentListValue, 268 | rect: $npm$styledComponents$StyledComponentsComponentListValue, 269 | stop: $npm$styledComponents$StyledComponentsComponentListValue, 270 | svg: $npm$styledComponents$StyledComponentsComponentListValue, 271 | text: $npm$styledComponents$StyledComponentsComponentListValue, 272 | tspan: $npm$styledComponents$StyledComponentsComponentListValue, 273 | |} 274 | 275 | type $npm$styledComponents$StyledComponentsNativeComponentListKeys = 276 | $Subtype<$Keys<$npm$styledComponents$StyledComponentsNativeComponentList>> 277 | 278 | type $npm$styledComponents$StyledComponentsNativeComponentListValue = 279 | $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent<{}, $npm$styledComponents$StyledComponentsNativeComponentListKeys> 280 | 281 | type $npm$styledComponents$StyledComponentsNativeComponentList = {| 282 | ActivityIndicator: $npm$styledComponents$StyledComponentsNativeComponentListValue, 283 | ActivityIndicatorIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 284 | ART: $npm$styledComponents$StyledComponentsNativeComponentListValue, 285 | Button: $npm$styledComponents$StyledComponentsNativeComponentListValue, 286 | DatePickerIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 287 | DrawerLayoutAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 288 | FlatList: $npm$styledComponents$StyledComponentsNativeComponentListValue, 289 | Image: $npm$styledComponents$StyledComponentsNativeComponentListValue, 290 | ImageBackground: $npm$styledComponents$StyledComponentsNativeComponentListValue, 291 | ImageEditor: $npm$styledComponents$StyledComponentsNativeComponentListValue, 292 | ImageStore: $npm$styledComponents$StyledComponentsNativeComponentListValue, 293 | KeyboardAvoidingView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 294 | ListView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 295 | MapView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 296 | Modal: $npm$styledComponents$StyledComponentsNativeComponentListValue, 297 | Navigator: $npm$styledComponents$StyledComponentsNativeComponentListValue, 298 | NavigatorIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 299 | Picker: $npm$styledComponents$StyledComponentsNativeComponentListValue, 300 | PickerIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 301 | ProgressBarAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 302 | ProgressViewIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 303 | RecyclerViewBackedScrollView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 304 | RefreshControl: $npm$styledComponents$StyledComponentsNativeComponentListValue, 305 | SafeAreaView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 306 | ScrollView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 307 | SectionList: $npm$styledComponents$StyledComponentsNativeComponentListValue, 308 | SegmentedControlIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 309 | Slider: $npm$styledComponents$StyledComponentsNativeComponentListValue, 310 | SliderIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 311 | SnapshotViewIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 312 | StatusBar: $npm$styledComponents$StyledComponentsNativeComponentListValue, 313 | SwipeableListView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 314 | Switch: $npm$styledComponents$StyledComponentsNativeComponentListValue, 315 | SwitchAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 316 | SwitchIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 317 | TabBarIOS: $npm$styledComponents$StyledComponentsNativeComponentListValue, 318 | Text: $npm$styledComponents$StyledComponentsNativeComponentListValue, 319 | TextInput: $npm$styledComponents$StyledComponentsNativeComponentListValue, 320 | ToastAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 321 | ToolbarAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 322 | Touchable: $npm$styledComponents$StyledComponentsNativeComponentListValue, 323 | TouchableHighlight: $npm$styledComponents$StyledComponentsNativeComponentListValue, 324 | TouchableNativeFeedback: $npm$styledComponents$StyledComponentsNativeComponentListValue, 325 | TouchableOpacity: $npm$styledComponents$StyledComponentsNativeComponentListValue, 326 | TouchableWithoutFeedback: $npm$styledComponents$StyledComponentsNativeComponentListValue, 327 | View: $npm$styledComponents$StyledComponentsNativeComponentListValue, 328 | ViewPagerAndroid: $npm$styledComponents$StyledComponentsNativeComponentListValue, 329 | VirtualizedList: $npm$styledComponents$StyledComponentsNativeComponentListValue, 330 | WebView: $npm$styledComponents$StyledComponentsNativeComponentListValue, 331 | |} 332 | 333 | declare module 'styled-components' { 334 | declare export type Interpolation = $npm$styledComponents$Interpolation; 335 | declare export type NameGenerator = $npm$styledComponents$NameGenerator; 336 | declare export type Theme = $npm$styledComponents$Theme; 337 | declare export type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps; 338 | declare export type TaggedTemplateLiteral = $npm$styledComponents$TaggedTemplateLiteral; 339 | declare export type ComponentListKeys = $npm$styledComponents$StyledComponentsComponentListKeys; 340 | 341 | declare export type ReactComponentFunctional = $npm$styledComponents$ReactComponentFunctional; 342 | declare export type ReactComponentFunctionalUndefinedDefaultProps = $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps; 343 | declare export type ReactComponentClass = $npm$styledComponents$ReactComponentClass; 344 | declare export type ReactComponentClassUndefinedDefaultProps = $npm$styledComponents$ReactComponentClassUndefinedDefaultProps; 345 | declare export type ReactComponentUnion = $npm$styledComponents$ReactComponentUnion; 346 | declare export type ReactComponentIntersection = $npm$styledComponents$ReactComponentIntersection; 347 | declare export type ReactComponentStyledStaticProps = $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent; 348 | declare export type ReactComponentStyled = $npm$styledComponents$ReactComponentStyled; 349 | declare export type ReactComponentStyledTaggedTemplateLiteral = $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent; 350 | 351 | declare export var css: TaggedTemplateLiteral>; 352 | declare export var injectGlobal: TaggedTemplateLiteral; 353 | declare export var keyframes: TaggedTemplateLiteral; 354 | declare export var withTheme: $npm$styledComponents$WithTheme; 355 | declare export var ServerStyleSheet: typeof Npm$StyledComponents$ServerStyleSheet; 356 | declare export var StyleSheetManager: typeof Npm$StyledComponents$StyleSheetManager; 357 | declare export var ThemeProvider: typeof Npm$StyledComponents$ThemeProvider; 358 | 359 | declare export default { 360 | css: TaggedTemplateLiteral>, 361 | ...$npm$styledComponents$StyledComponentsComponentList, 362 | ...$npm$styledComponents$StyledComponentsNativeComponentList, 363 | } & { 364 | [[call]]: $npm$styledComponents$Call 365 | } 366 | } 367 | 368 | declare module 'styled-components/native' { 369 | declare export type Interpolation = $npm$styledComponents$Interpolation; 370 | declare export type NameGenerator = $npm$styledComponents$NameGenerator; 371 | declare export type Theme = $npm$styledComponents$Theme; 372 | declare export type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps; 373 | declare export type TaggedTemplateLiteral = $npm$styledComponents$TaggedTemplateLiteral; 374 | declare export type NativeComponentListKeys = $npm$styledComponents$StyledComponentsNativeComponentListKeys; 375 | 376 | declare export type ReactComponentFunctional = $npm$styledComponents$ReactComponentFunctional; 377 | declare export type ReactComponentFunctionalUndefinedDefaultProps = $npm$styledComponents$ReactComponentFunctionalUndefinedDefaultProps; 378 | declare export type ReactComponentClass = $npm$styledComponents$ReactComponentClass; 379 | declare export type ReactComponentClassUndefinedDefaultProps = $npm$styledComponents$ReactComponentClassUndefinedDefaultProps; 380 | declare export type ReactComponentUnion = $npm$styledComponents$ReactComponentUnion; 381 | declare export type ReactComponentIntersection = $npm$styledComponents$ReactComponentIntersection; 382 | declare export type ReactComponentStyledStaticProps = $npm$styledComponents$ReactComponentStyledStaticPropsWithComponent; 383 | declare export type ReactComponentStyled = $npm$styledComponents$ReactComponentStyled; 384 | declare export type ReactComponentStyledTaggedTemplateLiteral = $npm$styledComponents$ReactComponentStyledTaggedTemplateLiteralWithComponent; 385 | 386 | declare export var keyframes: TaggedTemplateLiteral; 387 | declare export var withTheme: $npm$styledComponents$WithTheme; 388 | declare export var ThemeProvider: typeof Npm$StyledComponents$ThemeProvider; 389 | declare export default { 390 | css: TaggedTemplateLiteral>, 391 | ...$npm$styledComponents$StyledComponentsNativeComponentList, 392 | } & { 393 | [[call]]: $npm$styledComponents$Call 394 | } 395 | } 396 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "page-transitions-react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "cosmos": "cosmos", 8 | "dev": "next", 9 | "glow": "glow", 10 | "start": "next start", 11 | "build": "next build" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "gsap": "^1.20.4", 18 | "mapbox-gl": "^0.45.0-beta.1", 19 | "next": "^6.1.1", 20 | "react": "^16.4.2", 21 | "react-dom": "^16.4.2", 22 | "react-spring": "^5.6.6", 23 | "react-transition-group": "^2.3.1", 24 | "styled-components": "^3.4.2" 25 | }, 26 | "devDependencies": { 27 | "babel-eslint": "^8.2.6", 28 | "babel-plugin-preval": "^3.0.0", 29 | "babel-plugin-styled-components": "^1.5.1", 30 | "babel-plugin-transform-flow-strip-types": "^6.22.0", 31 | "flow-bin": "^0.78.0", 32 | "flow-typed": "^2.5.1", 33 | "glow": "^1.2.2", 34 | "html-webpack-plugin": "^3.2.0", 35 | "react-cosmos": "4.7.0-2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import App, { Container } from 'next/app'; 2 | import React from 'react'; 3 | import styled from 'styled-components'; 4 | import { Transition } from 'react-spring'; 5 | import AppNavigation from '../components/AppNavigation'; 6 | import AppFooter from '../components/AppFooter'; 7 | import data from '../tools/data'; 8 | import './_styles'; 9 | 10 | export default class MyApp extends App { 11 | state = { 12 | indexedUser: 0, 13 | ...data, 14 | }; 15 | 16 | addFollower = () => { 17 | this.setState(state => ({ 18 | users: [ 19 | ...state.users.slice(0, state.indexedUser), 20 | { 21 | ...state.users[state.indexedUser], 22 | followers: state.users[state.indexedUser].followers + 1, 23 | }, 24 | ...state.users.slice(state.indexedUser + 1), 25 | ], 26 | })); 27 | }; 28 | 29 | removeFollower = () => { 30 | this.setState(state => ({ 31 | users: [ 32 | ...state.users.slice(0, state.indexedUser), 33 | { 34 | ...state.users[state.indexedUser], 35 | followers: state.users[state.indexedUser].followers - 1, 36 | }, 37 | ...state.users.slice(state.indexedUser + 1), 38 | ], 39 | })); 40 | }; 41 | 42 | changeUser = (index, cb) => { 43 | this.setState(() => ({ indexedUser: index }), cb); 44 | }; 45 | 46 | render() { 47 | const { Component, pageProps } = this.props; 48 | const selectedUser = this.state.users[this.state.indexedUser]; 49 | 50 | return ( 51 | 52 |
53 | 61 | 67 | {style => ( 68 | 69 | 74 | 75 | 76 | )} 77 | 78 |
79 | 80 | ); 81 | } 82 | } 83 | 84 | const Positioner = styled.div` 85 | position: absolute; 86 | display: flex; 87 | flex-direction: column; 88 | align-items: center; 89 | width: 100%; 90 | `; 91 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Head, Main, NextScript } from 'next/document'; 2 | import { ServerStyleSheet } from 'styled-components'; 3 | export default class MyDocument extends Document { 4 | static getInitialProps({ renderPage }) { 5 | const sheet = new ServerStyleSheet(); 6 | const page = renderPage(App => props => 7 | sheet.collectStyles() 8 | ); 9 | const styleTags = sheet.getStyleElement(); 10 | return { ...page, styleTags }; 11 | } 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 24 | {this.props.styleTags} 25 | 26 | 27 |
28 | 29 | 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/_styles.js: -------------------------------------------------------------------------------- 1 | import { injectGlobal } from 'styled-components'; 2 | 3 | injectGlobal` 4 | @font-face { 5 | font-family: 'Josefin Sans'; 6 | src: url('/static/JosefinSans-Regular.ttf'); 7 | } 8 | 9 | @font-face { 10 | font-family: 'Josefin Sans'; 11 | src: url('/static/JosefinSans-Bold.ttf'); 12 | font-weight: bold; 13 | } 14 | 15 | @font-face { 16 | font-family: 'Playfair Display'; 17 | src: url('/static/PlayfairDisplay-Regular.ttf'); 18 | } 19 | 20 | body { 21 | background: white; 22 | color: #333; 23 | font-family: 'Josefin Sans', serif; 24 | font-size: 16px; 25 | word-spacing: 1px; 26 | -ms-text-size-adjust: 100%; 27 | -webkit-text-size-adjust: 100%; 28 | -moz-osx-font-smoothing: grayscale; 29 | -webkit-font-smoothing: antialiased; 30 | box-sizing: border-box; 31 | line-height: 1.2; 32 | overflow-x: hidden; 33 | } 34 | 35 | *, 36 | *:before, 37 | *:after { 38 | box-sizing: border-box; 39 | margin: 0; 40 | } 41 | 42 | h1, 43 | h2, 44 | h3, 45 | h4 { 46 | font-family: 'Playfair Display', serif; 47 | font-weight: normal; 48 | } 49 | `; 50 | -------------------------------------------------------------------------------- /pages/group.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import IconBase from '../components/IconBase'; 3 | import IconCalendar from '../components/IconCalendar'; 4 | import Main from '../components/Main'; 5 | import Content from '../components/Content'; 6 | import Top from '../components/Top'; 7 | import Hr from '../components/Hr'; 8 | import Sidebar from '../components/Sidebar'; 9 | 10 | const boxGridStyles = [ 11 | { gridColumn: '1 / 5' }, 12 | { 13 | gridColumn: '1 / 3', 14 | gridRow: '2 / 4', 15 | }, 16 | { gridColumn: '3 / 5' }, 17 | ]; 18 | 19 | export default () => ( 20 |
21 | 22 | Group Activities 23 |

4 Person Trip to Hawaii

24 |
25 | 26 | {Array(5) 27 | .fill(null) 28 | .map((_, index) => ( 29 | 30 | ))} 31 | 32 | 33 | 34 | 35 |

36 | 37 | 38 | {' '} 39 | Schedule 40 |

41 | Sunday 42 | 43 | Arrival: We settled in and decided to go snorkeling. We saw spotted 44 | dolphins, tons of whales - one whale went right under the boat, and, of 45 | course, plenty of sea turtles. The snorkeling area is a little small and 46 | can get crowded, but we still had great opportunities to watch the 47 | turtles. The crew was terrific - Jason, Jackson, and Shane. We would 48 | definitely recommend this activity, and will do it again if we ever get 49 | back to Hawaii! 50 | 51 | Monday 52 | 53 | After such an exciting first day, we decided to take it a bit easier and 54 | just get a nice lunch as our day activity. Had a wonderful time getting 55 | an opportunity to walk around a few blocks of Ala Moana and sampling 56 | some of the local eats that you can't really get back home. Every stop 57 | had something new and interesting to try, and there wasn't a single 58 | thing I tried that I really disliked. 59 | 60 | 61 |
62 | ); 63 | 64 | const Wrapper = styled.div` 65 | margin: 10px 0 20px 0; 66 | width: 100%; 67 | display: grid; 68 | grid-gap: 10px; 69 | grid-template-columns: repeat(4, 24%); 70 | grid-template-rows: repeat(3, 120px); 71 | justify-content: center; 72 | align-content: end; 73 | `; 74 | 75 | const Box = styled.div` 76 | border-radius: 3px; 77 | background: url('/static/hawaii${props => 78 | props.index}.jpg') center center no-repeat; 79 | background-size: cover; 80 | `; 81 | 82 | const TopText = styled.p` 83 | padding-bottom: 10px; 84 | `; 85 | 86 | const Text = styled.p` 87 | padding-bottom: 10px; 88 | `; 89 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import IconBase from '../components/IconBase'; 5 | import IconMapPin from '../components/IconMapPin'; 6 | import Main from '../components/Main'; 7 | import Paragraph from '../components/Paragraph'; 8 | import Content from '../components/Content'; 9 | import Places from '../components/Places'; 10 | import Sidebar from '../components/Sidebar'; 11 | 12 | export default class Index extends React.Component { 13 | mapContainer = React.createRef(); 14 | 15 | // componentDidMount() { 16 | // const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js'); 17 | // mapboxgl.accessToken = 18 | // 'pk.eyJ1Ijoic2RyYXNuZXIiLCJhIjoiY2pmZzBqZmptMjI1eTMzbWl1bGExMHppZyJ9.diPXryPOiyMuqcV4mpNOlg'; 19 | // const map = new mapboxgl.Map({ 20 | // container: this.mapContainer.current, 21 | // style: 'mapbox://styles/sdrasner/cjfg0watl6rkv2sllf6hepdd5', 22 | // }); 23 | // } 24 | 25 | render() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | {' '} 36 | Checked in at Honolulu location 37 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | 44 | const CustomMain = styled(Main)` 45 | padding-top: 20px; 46 | border-top: 1px solid #ddd; 47 | margin-top: 120px; 48 | `; 49 | 50 | const CustomSidebar = styled(Sidebar)` 51 | background: transparent; 52 | `; 53 | -------------------------------------------------------------------------------- /pages/place.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import IconBase from '../components/IconBase'; 3 | import IconMapPin from '../components/IconMapPin'; 4 | import AppStarRating from '../components/AppStarRating'; 5 | import Main from '../components/Main'; 6 | import Content from '../components/Content'; 7 | import Top from '../components/Top'; 8 | import Paragraph from '../components/Paragraph'; 9 | import Sidebar from '../components/Sidebar'; 10 | import Places from '../components/Places'; 11 | 12 | export default ({ users, places, selectedUser }) => ( 13 |
14 | 15 | 16 | {selectedUser.name} 17 | 's Places 18 | 19 | {places[0].name} 20 | 21 | Rating: {places[0].rating} 22 | 23 | 24 | 25 | {places[0].description} 26 | 27 | 28 | 29 |

Other Trips

30 | 31 | 32 |
33 | ); 34 | 35 | const Heading = styled.h1` 36 | font-size: 45px; 37 | padding-bottom: 10px; 38 | border-bottom: 1px solid #ddd; 39 | `; 40 | 41 | const Image = styled.div` 42 | background: url('/static/header1.jpg') center center; 43 | background-size: cover; 44 | width: 100%; 45 | height: 240px; 46 | `; 47 | -------------------------------------------------------------------------------- /static/JosefinSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/JosefinSans-Bold.ttf -------------------------------------------------------------------------------- /static/JosefinSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/JosefinSans-Regular.ttf -------------------------------------------------------------------------------- /static/PlayfairDisplay-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/PlayfairDisplay-Regular.ttf -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/burmuda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/burmuda.jpg -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/favicon.ico -------------------------------------------------------------------------------- /static/hawaii1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii1.jpg -------------------------------------------------------------------------------- /static/hawaii2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii2.jpg -------------------------------------------------------------------------------- /static/hawaii3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii3.jpg -------------------------------------------------------------------------------- /static/hawaii4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii4.jpg -------------------------------------------------------------------------------- /static/hawaii5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii5.jpg -------------------------------------------------------------------------------- /static/hawaii6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/hawaii6.jpg -------------------------------------------------------------------------------- /static/header1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/header1.jpg -------------------------------------------------------------------------------- /static/header2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/header2.jpg -------------------------------------------------------------------------------- /static/header3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/header3.jpg -------------------------------------------------------------------------------- /static/honolulu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/honolulu.jpg -------------------------------------------------------------------------------- /static/peru.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/peru.jpg -------------------------------------------------------------------------------- /static/profile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/profile1.jpg -------------------------------------------------------------------------------- /static/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/profile2.jpg -------------------------------------------------------------------------------- /static/profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/profile3.jpg -------------------------------------------------------------------------------- /static/profile4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/profile4.jpg -------------------------------------------------------------------------------- /static/profile5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/profile5.jpg -------------------------------------------------------------------------------- /static/santorini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/santorini.jpg -------------------------------------------------------------------------------- /static/shanghai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xavxyz/nextjs-page-transitions/718bf051cbba895cd458a5ce1d0636d7e5f96243/static/shanghai.jpg -------------------------------------------------------------------------------- /tools/data.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import type { User, Place } from './types'; 3 | 4 | const data: { 5 | users: Array, 6 | places: Array, 7 | } = { 8 | users: [ 9 | { 10 | name: 'Sophia Gonzalez', 11 | img: '/static/profile2.jpg', 12 | location: 'San Francisco', 13 | bio: 14 | 'Had a brief careerwith jack-in-the-boxes in Phoenix, AZ. Spent several months managing squirt guns and implementing toy elephants.', 15 | following: 789, 16 | followers: 2748, 17 | photos: 94, 18 | days: 32, 19 | trips: ['Honolulu', 'Burmuda', 'Los Cabos', 'San Antonio'], 20 | }, 21 | { 22 | name: 'Ben Allen', 23 | img: '/static/profile3.jpg', 24 | location: 'Boston', 25 | bio: 26 | 'Bacon nerd. Freelance twitter practitioner. Social media nerd. Pop culture junkie. Proud alcohol advocate. Food geek.', 27 | following: 140, 28 | followers: 789, 29 | photos: 32, 30 | days: 5, 31 | trips: ['Honolulu', 'Peru', 'San Francisco'], 32 | }, 33 | { 34 | name: 'Jill Fernandez', 35 | img: '/static/profile4.jpg', 36 | location: 'Seattle', 37 | bio: 38 | 'Prone to fits of apathy. Writer. Devoted gamer. Web scholar. Hipster-friendly music advocate. Problem solver. Student. Twitter fanatic.', 39 | following: 590, 40 | followers: 1705, 41 | photos: 45, 42 | days: 12, 43 | trips: ['Honolulu', 'Tokyo', 'Osaka'], 44 | }, 45 | { 46 | name: 'Cynthia Obel', 47 | img: '/static/profile5.jpg', 48 | location: 'Kentucky', 49 | bio: 50 | 'Producing at the fulcrum of modernism and purpose to craft an compelling and authentic narrative. My opinions belong to myself.', 51 | following: 590, 52 | followers: 1705, 53 | photos: 45, 54 | days: 12, 55 | trips: ['Honolulu', 'Tokyo', 'Osaka'], 56 | }, 57 | ], 58 | places: [ 59 | { 60 | name: 'Honolulu', 61 | stars: 4, 62 | rating: 8.9, 63 | img: '/static/honolulu.jpg', 64 | description: 65 | 'Ocean breezes rustle palm trees along the harborfront, while in the cool, mist-shrouded Koʻolau Range, forested hiking trails offer postcard city views. At sunset, cool off with an amble around Magic Island or splash in the ocean at Ala Moana Beach.', 66 | }, 67 | { 68 | name: 'Santorini', 69 | stars: 4, 70 | rating: 7.8, 71 | img: '/static/santorini.jpg', 72 | description: 73 | 'With multicoloured cliffs soaring above a sea-drowned caldera, Santorini looks like a giant slab of layered cake. The main island of Thira will take your breath away with its snow-drift of white Cycladic houses lining the cliff tops and, in places, spilling like icy cornices down the terraced rock.', 74 | }, 75 | { 76 | name: 'Cusco', 77 | stars: 3, 78 | rating: 7.4, 79 | img: '/static/peru.jpg', 80 | description: 81 | 'Wandered the cobblestone streets and quaint lanes of the town, which has been designated a UNESCO World Heritage site. A walking tour revealed historic architecture, colonial landmarks and alluring shops and restaurants.', 82 | }, 83 | ], 84 | }; 85 | 86 | export default data; 87 | -------------------------------------------------------------------------------- /tools/firstName.js: -------------------------------------------------------------------------------- 1 | export default function firstName(input: string): string { 2 | const lastIndex = input.lastIndexOf(' '); 3 | return input.substring(0, lastIndex); 4 | } 5 | -------------------------------------------------------------------------------- /tools/links.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | // the following works, but is kind of useless in this case, 4 | // as I need a custom "verbose name" for each path 5 | // anyway that was my first time using babel macros, 6 | // this is... d o p e 7 | 8 | // import preval from 'babel-plugin-preval/macro'; 9 | // const paths: Array<{ pathname: string, name: string }> = preval` 10 | // const path = require('path'); 11 | // const fs = require('fs'); 12 | 13 | // module.exports = fs.readdirSync(path.resolve('./pages')) 14 | // .filter(file => !file.includes('_')) 15 | // .map(pageFile => pageFile.slice(0,-3)) 16 | // .map(name => ({ 17 | // pathname: name === 'index' ? '/' : '/' + name, 18 | // name: name, 19 | // })); 20 | // `; 21 | 22 | type Links = {| 23 | '/': string, 24 | '/place': string, 25 | '/group': string, 26 | |}; 27 | 28 | const links: Links = { 29 | '/': 'Home', 30 | '/place': 'Places', 31 | '/group': 'Group Trips', 32 | }; 33 | 34 | // see https://github.com/facebook/flow/issues/2221 35 | export const linksList: Array = Object.entries(links); 36 | 37 | export default links; 38 | -------------------------------------------------------------------------------- /tools/types.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export type User = { 4 | name: string, 5 | img: string, 6 | location: string, 7 | bio: string, 8 | following: number, 9 | followers: number, 10 | photos: number, 11 | days: number, 12 | trips: Array, 13 | }; 14 | 15 | export type Place = { 16 | name: string, 17 | stars: number, 18 | rating: number, 19 | img: string, 20 | description: string, 21 | }; 22 | --------------------------------------------------------------------------------