Skip to content

Commit

Permalink
Bump site deps
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaredpalmer
jaredpalmer committed Apr 6, 2018
1 parent 14eb509 commit 65aae84
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 36 deletions.
16 changes: 9 additions & 7 deletions website/package.json
View file
Expand Up @@ -16,8 +16,8 @@
"gatsby-plugin-nprogress": "^1.0.7",
"gatsby-plugin-react-helmet": "^1.0.3",
"gatsby-plugin-react-next": "^1.0.3",
"gatsby-plugin-sitemap": "^1.2.11",
"gatsby-plugin-sharp": "^1.6.2",
"gatsby-plugin-sitemap": "^1.2.11",
"gatsby-plugin-twitter": "^1.0.15",
"gatsby-plugin-typescript": "^1.0.1",
"gatsby-remark-autolink-headers": "^1.4.4",
Expand All @@ -43,15 +43,18 @@
"devDependencies": {
"@types/classnames": "^2.2.0",
"@types/node": "^8.0.15",
"@types/react": "16.0.7",
"@types/react-dom": "15.5.5",
"@types/react": "^16.1.0",
"@types/react-dom": "^16.0.4",
"@types/react-helmet": "^5.0.3",
"@types/react-router-dom": "^4.0.7",
"@types/webpack-env": "^1.13.0",
"tslint": "^5.5.0",
"tslint-react": "^3.0.0"
"tslint-react": "^3.0.0",
"typescript": "^2.8.1"
},
"keywords": ["gatsby"],
"keywords": [
"gatsby"
],
"resolutions": {
"gatsby/graphql": "0.10.5",
"gatsby/react": "16.0.0",
Expand All @@ -63,8 +66,7 @@
"deploy": "gatsby build --prefix-paths",
"start": "gatsby develop",
"serve": "gatsby serve",
"format":
"prettier --trailing-comma es5 --no-semi --single-quote --write \"pages/*.js\" \"utils/*.js\" \"wrappers/*.js\" \"html.js\"",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"pages/*.js\" \"utils/*.js\" \"wrappers/*.js\" \"html.js\"",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
27 changes: 23 additions & 4 deletions website/src/components/Nav.tsx
View file
Expand Up @@ -9,6 +9,7 @@ import { media } from 'theme';
import { AppBar } from 'components/AppBar';

const Media = require('react-media');

export interface NavProps {
children?: any;
title: string;
Expand Down Expand Up @@ -45,17 +46,30 @@ export class Nav extends React.Component<NavProps, NavState> {
<Media query={media.greaterThan('small', true)}>
{(isDesktop: boolean) => (
<Block height="100%" flex="1">
{!isDesktop && <AppBar title={title} />}
{!isDesktop &&
!isOpen && (
<AppBar
title={title}
renderLeftArea={() => (
<button onClick={this.toggle}>Menu</button>
)}
/>
)}
<Block paddingTop={isDesktop ? 0 : 50}>
{!isDesktop && isOpen /** destroy errthing when nav is open */ ? (
<Sidebar isDesktop={isDesktop} />
<Sidebar isDesktop={isDesktop} onClose={this.toggle} />
) : (
<Switch>
<Route
path="/docs"
render={(props: RouteComponentProps<any>) => (
<Block>
{isDesktop ? <Sidebar isDesktop={isDesktop} /> : null}
{isDesktop ? (
<Sidebar
isDesktop={isDesktop}
onClose={this.toggle}
/>
) : null}
<SidebarInner>{this.props.children}</SidebarInner>
</Block>
)}
Expand All @@ -64,7 +78,12 @@ export class Nav extends React.Component<NavProps, NavState> {
path="/examples"
render={(props: RouteComponentProps<any>) => (
<Block>
{isDesktop ? <Sidebar isDesktop={isDesktop} /> : null}
{isDesktop ? (
<Sidebar
isDesktop={isDesktop}
onClose={this.toggle}
/>
) : null}
<SidebarInner>{this.props.children}</SidebarInner>
</Block>
)}
Expand Down
27 changes: 18 additions & 9 deletions website/src/components/Sidebar.tsx
View file
Expand Up @@ -11,6 +11,7 @@ import { css } from 'glamor';

export interface SidebarProps {
isDesktop: boolean;
onClose: () => void;
}

export interface SidebarState {}
Expand All @@ -30,21 +31,29 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
left="0"
overflow="scroll"
>
<Block margin="2rem 2rem 0" textAlign="center">
<Mark color={COLORS.black} height={72} width={66} />
<Block>
<Text color="#000" size={3} fontWeight={800}>
Formik
</Text>
{isDesktop ? (
<Block margin="2rem 2rem 0" textAlign="center">
<Mark color={COLORS.black} height={72} width={66} />
<Block>
<Text color="#000" size={3} fontWeight={800}>
Formik
</Text>
</Block>
</Block>
</Block>
) : null}
{isDesktop ? (
<Block margin="2rem 2rem 0">
<button onClick={this.props.onClose}>Close</button>
</Block>
) : null}
<Block>
<Block
component="input"
fontSize="1rem"
margin="1rem auto"
margin="1rem 2rem"
padding=".25rem .5rem"
borderRadius="4px"
width="100%"
outline="0"
border={`1px solid ${COLORS.gray[2]}`}
props={{
Expand Down Expand Up @@ -129,7 +138,7 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
))}
</Block>
))}
<Text size={8} padding="1rem">
<Text size={8} padding="1rem 2rem">
Copyright 2017 Jared Palmer. {`Made with <3 in NYC.`}
</Text>
</Block>
Expand Down
10 changes: 9 additions & 1 deletion website/src/pages/index.tsx
View file
@@ -1,4 +1,6 @@
import * as React from 'react';
import { Block } from 'components/Primitives';
import Link from 'gatsby-link';

// Please note that you can use https://github.com/dotansimha/graphql-code-generator
// to generate all types from graphQL schema
Expand All @@ -18,7 +20,13 @@ export default class Index extends React.Component<IndexPageProps, {}> {
}

render() {
return <div>todo</div>;
return (
<div>
<Block component="h1">Formik</Block>
<Link to="/docs/basics">Basics</Link>
<Link to="/docs/api">API Reference</Link>
</div>
);
}
}

Expand Down
22 changes: 11 additions & 11 deletions website/src/theme.tsx
View file
Expand Up @@ -37,7 +37,7 @@ export const FONTS = {

export const TYPE_SCALE = [72, 64, 48, 32, 24, 20, 16, 14, 12];

const SIZES = {
const SCREENS = {
xsmall: { min: 0, max: 699 },
small: { min: 700, max: 779 },
medium: { min: 780, max: 979 },
Expand All @@ -50,7 +50,7 @@ const SIZES = {
sidebarFixed: { min: 2000, max: Infinity },
};

type Size = keyof typeof SIZES;
type Size = keyof typeof SCREENS;

export const media = {
between(
Expand All @@ -62,15 +62,15 @@ export const media = {
let result: string;
if (excludeLarge) {
result = `@media (min-width: ${
SIZES[smallKey].min
}px) and (max-width: ${SIZES[largeKey].min - 1}px)`;
SCREENS[smallKey].min
}px) and (max-width: ${SCREENS[largeKey].min - 1}px)`;
} else {
if (SIZES[largeKey].max === Infinity) {
result = `@media (min-width: ${SIZES[smallKey].min}px)`;
if (SCREENS[largeKey].max === Infinity) {
result = `@media (min-width: ${SCREENS[smallKey].min}px)`;
} else {
result = `@media (min-width: ${
SIZES[smallKey].min
}px) and (max-width: ${SIZES[largeKey].max}px)`;
SCREENS[smallKey].min
}px) and (max-width: ${SCREENS[largeKey].max}px)`;
}
}

Expand All @@ -82,7 +82,7 @@ export const media = {
},

greaterThan(key: Size, trim: boolean = false) {
let result = `@media (min-width: ${SIZES[key].min}px)`;
let result = `@media (min-width: ${SCREENS[key].min}px)`;

if (trim) {
return result.replace('@media ', '');
Expand All @@ -92,15 +92,15 @@ export const media = {
},

lessThan(key: Size, trim: boolean = false) {
let result = `@media (max-width: ${SIZES[key].min - 1}px)`;
let result = `@media (max-width: ${SCREENS[key].min - 1}px)`;
if (trim) {
return result.replace('@media ', '');
}
return result;
},

size(key: Size, trim: boolean = false) {
const size = SIZES[key];
const size = SCREENS[key];

if (size.min == null) {
return media.lessThan(key, trim);
Expand Down
17 changes: 13 additions & 4 deletions website/yarn.lock
View file
Expand Up @@ -73,10 +73,11 @@
version "8.0.31"
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.31.tgz#d9af61093cf4bfc9f066ca34de0175012cfb0ce9"

"@types/react-dom@15.5.5":
version "15.5.5"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.5.tgz#6b117c7697b61fe74132bfe5c72bceb3319433b8"
"@types/react-dom@^16.0.4":
version "16.0.4"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.4.tgz#2e8fd45f5443780ed49bf2cdd9809e6091177a7d"
dependencies:
"@types/node" "*"
"@types/react" "*"

"@types/react-helmet@^5.0.3":
Expand Down Expand Up @@ -108,10 +109,14 @@
"@types/history" "*"
"@types/react" "*"

"@types/react@*", "@types/react@16.0.7":
"@types/react@*":
version "16.0.7"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.7.tgz#f85b6c33c988a1631e2f32fedae71ec6d9718a0d"

"@types/react@^16.1.0":
version "16.1.0"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.1.0.tgz#6c0e9955ce73f332b4a1948d45decaf18c764c6e"

"@types/tmp@^0.0.32":
version "0.0.32"
resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.32.tgz#0d3cb31022f8427ea58c008af32b80da126ca4e3"
Expand Down Expand Up @@ -9692,6 +9697,10 @@ typescript@^2.2.1:
version "2.5.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"

typescript@^2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.1.tgz#6160e4f8f195d5ba81d4876f9c0cc1fbc0820624"

typography-breakpoint-constants@^0.15.10:
version "0.15.10"
resolved "https://registry.yarnpkg.com/typography-breakpoint-constants/-/typography-breakpoint-constants-0.15.10.tgz#bd5308dd57250e7f28a8c6e1c0e668ddf1178c5c"
Expand Down

0 comments on commit 65aae84

Please sign in to comment.