swap to styled-components across the app.

This commit is contained in:
41666 2019-03-11 02:51:36 -05:00
parent 7e0379ec3c
commit df2a27663b
16 changed files with 727 additions and 135 deletions

View file

@ -1,5 +1,8 @@
{
"presets": [
"next/babel", "@babel/preset-flow"
],
"plugins": [
[ "styled-components", { "ssr": true } ]
]
}

View file

@ -1,5 +1,6 @@
// @flow
import * as React from 'react'
// import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
export const colors = {
white: '#efefef',
@ -21,7 +22,7 @@ const getColors = () => {
}).join(' \n')
}
const Colors = () => <style global jsx>{`
export default createGlobalStyle`
body {
margin: 0;
padding: 0;
@ -48,7 +49,7 @@ body {
}
:root {
${getColors()}
${() => getColors()}
}
::selection {
@ -87,6 +88,4 @@ h1,h2,h3,h4,h5,h6 {
opacity: 0;
}
`}</style>
export default Colors
`

View file

@ -1,14 +1,24 @@
// @flow
import * as React from 'react'
import DebugBreakpoints from '../../kit/debug-breakpoints'
import styled from 'styled-components'
export type CommonProps = {
children: React.Element<any>
}
const HeaderBarCommon: React.StatelessFunctionalComponent<CommonProps> = ({ children }) => (
<div>
{ children }
</div>
const Header = styled.div`
`
const HeaderInner = styled.div``
const HeaderBarCommon = ({ children }: CommonProps) => (
<Header>
<HeaderInner>
{ (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
{ children }
</HeaderInner>
</Header>
)
export default HeaderBarCommon

17
UI/components/layout.js Normal file
View file

@ -0,0 +1,17 @@
// @flow
import * as React from 'react'
import GlobalColors from './global-colors'
import SocialCards from './social-cards'
import HeaderBar from '../containers/header-bar'
import { type User } from '../containers/user'
const Layout = ({ children, user }: {children: React.Element<any>, user: User }) => <>
<GlobalColors />
<SocialCards />
<div>
<HeaderBar user={user} />
{children}
</div>
</>
export default Layout

View file

@ -0,0 +1,31 @@
// @flow
import * as React from 'react'
import styled from 'styled-components'
import MediaQuery, { breakpoints } from './media'
const BreakpointDebugFloat = styled.div`
position: absolute;
bottom: 0em;
left: 0;
pointer-events: none;
height: 1.4em;
opacity: 0.4;
font-family: monospace;
`
const Breakpoint = styled.div`
padding: 0.1em;
display: none;
width: 1.5em;
text-align: center;
background-color: hsl(${(props: any) => props.hue}, 50%, 50%);
${(props: any) => MediaQuery({ [props.bp]: `display: inline-block` })}
`
const DebugFloater = () => {
return <BreakpointDebugFloat>
{ Object.keys(breakpoints).map((x, i, a) => <Breakpoint key={x} bp={x} hue={(360 / a.length) * i}>{x}</Breakpoint>) }
</BreakpointDebugFloat>
}
export default DebugFloater

32
UI/kit/media.js Normal file
View file

@ -0,0 +1,32 @@
// @flow
export type MediaQuery = $Shape<{
xs: string,
sm: string,
md: string,
lg: string,
xl: string
}>
export const breakpoints = {
xs: 0,
sm: 544,
md: 768,
lg: 1012,
xl: 1280
}
export default (mq: MediaQuery) => {
const out = []
for (const size in mq) {
if (breakpoints[size] == null) {
continue
}
const inner = mq[size]
out.push(`@media screen and (min-width: ${breakpoints[size]}px) {\n${inner}\n};`)
}
return out.join('\n')
}

View file

@ -1,19 +1,19 @@
import * as React from 'react'
import App, { Container } from 'next/app'
import Head from 'next/head'
import GlobalColors from '../components/global-colors'
import SocialCards from '../components/social-cards'
// import RPCClient from '../rpc'
import Layout from '../components/layout'
import { withCookies } from '../config/rpc'
class RoleypolyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = {}
const rpc = withCookies(ctx)
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
return { pageProps, user: await rpc.getCurrentUser() }
}
componentDidMount () {
@ -54,7 +54,7 @@ class RoleypolyApp extends App {
}
render () {
const { Component, pageProps, router, rpc } = this.props
const { Component, pageProps, router, user } = this.props
return (
<Container>
@ -64,9 +64,10 @@ class RoleypolyApp extends App {
<title key='title'>Roleypoly</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
</Head>
<GlobalColors />
<SocialCards />
<Component {...pageProps} router={router} rpc={rpc} />
<Layout user={user}>
<Component {...pageProps} router={router} />
</Layout>
</Container>
)
}

24
UI/pages/_document.js Normal file
View file

@ -0,0 +1,24 @@
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps (ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: <>{initialProps.styles}{sheet.getStyleElement()}</>
}
} finally {
sheet.seal()
}
}
}

View file

@ -1,26 +1,9 @@
// @flow
import * as React from 'react'
import type { PageProps } from '../../types'
import HeaderBar from '../../containers/header-bar'
import { withCookies } from '../../config/rpc'
import { type UserPartial } from '../../../services/discord'
type InitialProps = {
user: ?UserPartial
}
export default class LandingTest extends React.Component<PageProps & InitialProps> {
static async getInitialProps (ctx: PageProps): Promise<InitialProps> {
const rpc = withCookies(ctx)
return {
user: await rpc.getCurrentUser()
}
}
export default class LandingTest extends React.Component<PageProps> {
render () {
return <div>
<HeaderBar user={this.props.user} />
</div>
return <div />
}
}

View file

@ -1,91 +1,10 @@
import React from 'react'
import Link from 'next/link'
import Head from '../components/head'
import Nav from '../components/nav'
// import Link from 'next/link'
// import Head from '../components/head'
// import Nav from '../components/nav'
const Home = () => (
<div>
<Head title='Home' />
<Nav />
<div className='hero'>
<h1 className='title'>Welcome to Next!</h1>
<p className='description'>
To get started, edit <code>pages/index.js</code> and save to reload.
</p>
<div className='row'>
<Link href='https://github.com/zeit/next.js#getting-started'>
<a className='card'>
<h3>Getting Started &rarr;</h3>
<p>Learn more about Next on Github and in their examples</p>
</a>
</Link>
<Link href='https://open.segment.com/create-next-app'>
<a className='card'>
<h3>Examples &rarr;</h3>
<p>
Find other example boilerplates on the{' '}
<code>create-next-app</code> site
</p>
</a>
</Link>
<Link href='https://github.com/segmentio/create-next-app'>
<a className='card'>
<h3>Create Next App &rarr;</h3>
<p>Was this tool helpful? Let us know how we can improve it</p>
</a>
</Link>
</div>
</div>
<style jsx>{`
.hero {
width: 100%;
color: #333;
}
.title {
margin: 0;
width: 100%;
padding-top: 80px;
line-height: 1.15;
font-size: 48px;
}
.title,
.description {
text-align: center;
}
.row {
max-width: 880px;
margin: 80px auto 40px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.card {
padding: 18px 18px 24px;
width: 220px;
text-align: left;
text-decoration: none;
color: #434343;
border: 1px solid #9b9b9b;
}
.card:hover {
border-color: #067df7;
}
.card h3 {
margin: 0;
color: #067df7;
font-size: 18px;
}
.card p {
margin: 0;
padding: 12px 0 0;
font-size: 13px;
color: #333;
}
`}</style>
</div>
<h1>Hi there.</h1>
)
export default Home

View file

@ -0,0 +1,130 @@
// flow-typed signature: c631579d6a793a28b84aea5aeb008715
// flow-typed version: <<STUB>>/babel-plugin-styled-components_v^1.10.0/flow_v0.94.0
/**
* This is an autogenerated libdef stub for:
*
* 'babel-plugin-styled-components'
*
* Fill this stub out by replacing all the `any` types.
*
* Once filled out, we encourage you to share your work with the
* community by sending a pull request to:
* https://github.com/flowtype/flow-typed
*/
declare module 'babel-plugin-styled-components' {
declare module.exports: any;
}
/**
* We include stubs for each file inside this npm package in case you need to
* require those files directly. Feel free to delete any files that aren't
* needed.
*/
declare module 'babel-plugin-styled-components/lib/css/placeholderUtils' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/index' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/minify/index' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/utils/detectors' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/utils/getName' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/utils/hash' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/utils/options' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/utils/prefixDigit' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/assignStyledRequired' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/displayNameAndId' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/minify' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/pure' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/index' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile' {
declare module.exports: any;
}
declare module 'babel-plugin-styled-components/lib/visitors/transpileCssProp' {
declare module.exports: any;
}
// Filename aliases
declare module 'babel-plugin-styled-components/lib/css/placeholderUtils.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/css/placeholderUtils'>;
}
declare module 'babel-plugin-styled-components/lib/index.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/index'>;
}
declare module 'babel-plugin-styled-components/lib/minify/index.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/minify/index'>;
}
declare module 'babel-plugin-styled-components/lib/utils/detectors.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/detectors'>;
}
declare module 'babel-plugin-styled-components/lib/utils/getName.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/getName'>;
}
declare module 'babel-plugin-styled-components/lib/utils/hash.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/hash'>;
}
declare module 'babel-plugin-styled-components/lib/utils/options.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/options'>;
}
declare module 'babel-plugin-styled-components/lib/utils/prefixDigit.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/prefixDigit'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/assignStyledRequired.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/assignStyledRequired'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/displayNameAndId.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/displayNameAndId'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/minify.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/minify'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/pure.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/pure'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/index.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/templateLiterals/index'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile'>;
}
declare module 'babel-plugin-styled-components/lib/visitors/transpileCssProp.js' {
declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/transpileCssProp'>;
}

View file

@ -1,5 +1,5 @@
// flow-typed signature: 261645a6d1133fb1d26bb2c9286e35b1
// flow-typed version: <<STUB>>/erlpack_vgithub:discordapp/erlpack/flow_v0.94.0
// flow-typed signature: 3328f30279a7faaae4973b8156a23bdc
// flow-typed version: <<STUB>>/erlpack_vhammerandchisel/erlpack/flow_v0.94.0
/**
* This is an autogenerated libdef stub for:

View file

@ -1,9 +1,14 @@
// flow-typed signature: 22454723de346388533aa45cab75d46c
// flow-typed version: 5a6a98aaa2/koa_v2.0.x/flow_>=v0.93.x
// flow-typed signature: 32108e9dd6c40b60d7f9e87368b6f966
// flow-typed version: 5a6a98aaa2/koa_v2.x.x/flow_>=v0.93.x
/*
* Type def from from source code of koa.
* this: https://github.com/koajs/koa/commit/fabf5864c6a5dca0782b867a263b1b0825a05bf9
* this: https://github.com/koajs/koa/commit/08eb1a20c3975230aa1fe1c693b0cd1ac7a0752b
* previous: https://github.com/koajs/koa/commit/fabf5864c6a5dca0782b867a263b1b0825a05bf9
*
* Changelog
* breaking: remove unused app.name
* breaking: ctx.throw([status], [msg], [properties]) (caused by http-errors (#957) )
**/
declare module 'koa' {
// Currently, import type doesn't work well ?
@ -140,7 +145,7 @@ declare module 'koa' {
request: Request,
// docs/api/response.md#L113.
body: string | Buffer | stream$Stream | JSONObject | null, // JSON contains null
body: string | Buffer | stream$Stream | JSONObject | JSONArray | null, // JSON contains null
etag: string,
header: SimpleHeader,
headers: SimpleHeader, // alias as header
@ -227,10 +232,8 @@ declare module 'koa' {
// context.js#L107
// if (!(err instanceof Error)) err = new Error(`non-error thrown: ${err}`);
onerror: (err?: mixed) => void,
// context.js#L70
throw: (( statusOrErr: string|number|Error, errOrStatus?: string|number|Error,
opts?: {}) => void) &
(( statusOrErr: string|number|Error, opts?: Object) => void),
// context.md#L88
throw: ( status: number, msg?: string, opts?: {} ) => void,
toJSON(): ContextJSON,
inspect(): ContextJSON,
@ -283,7 +286,7 @@ declare module 'koa' {
ips: $PropertyType<Request, 'ips'>,
ip: $PropertyType<Request, 'ip'>,
[key: string]: mixed, // props added by middlewares.
[key: string]: any, // props added by middlewares.
}
declare type Middleware =
@ -300,7 +303,6 @@ declare module 'koa' {
env: string,
keys?: Array<string>|Object, // https://github.com/crypto-utils/keygrip
middleware: Array<Middleware>,
name?: string, // optionally give your application a name
proxy: boolean, // when true proxy header fields will be trusted
request: Request,
response: Response,

View file

@ -0,0 +1,410 @@
// flow-typed signature: 8ae4cfa383fc58443d8d65b5301bf1c1
// flow-typed version: 1a7d5ca288/styled-components_v4.x.x/flow_>=v0.75.x
// @flow
declare module 'styled-components' {
declare export type Interpolation =
| (<P: {}>(executionContext: P) => string)
| CSSRules
| KeyFrames
| string
| number
declare export type CSSRules = Interpolation[]
// This is not exported on purpose, since it's an implementation detail
declare type TaggedTemplateLiteral<R> = (strings : string[], ...interpolations : Interpolation[]) => R
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>
declare interface Tag<T> {
styleTag: HTMLStyleElement | null;
getIds(): string[];
hasNameForId(id: string, name: string): boolean;
insertMarker(id: string): T;
insertRules(id: string, cssRules: string[], name: ?string): void;
removeRules(id: string): void;
css(): string;
toHTML(additionalAttrs: ?string): string;
toElement(): React$Element<*>;
clone(): Tag<T>;
sealed: boolean;
}
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
declare export class StyleSheet {
static get master() : StyleSheet;
static get instance() : StyleSheet;
static reset(forceServer? : boolean) : void;
id : number;
forceServer : boolean;
target : ?HTMLElement;
tagMap : {[string]: Tag<any>}; // eslint-disable-line flowtype/no-weak-types
deferred: { [string]: string[] | void };
rehydratedNames: { [string]: boolean };
ignoreRehydratedNames: { [string]: boolean };
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
capacity: number;
clones: StyleSheet[];
constructor(?HTMLElement) : this;
rehydrate() : this;
clone() : StyleSheet;
sealAllTags() : void;
makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
hasId(id: string) : boolean;
hasNameForId(id: string, name: string) : boolean;
deferredInject(id : string, cssRules : string[]) : void;
inject(id: string, cssRules : string[], name? : string) : void;
remove(id : string) : void;
toHtml() : string;
toReactElements() : React$ElementType[];
}
declare export class KeyFrames {
id : string;
name : string;
rules : string[];
constructor(name : string, rules : string[]) : this;
inject(StyleSheet) : void;
toString() : string;
getName() : string;
}
// I think any is appropriate here?
// eslint-disable-next-line flowtype/no-weak-types
declare export type Theme = {+[string] : any}
declare export var css : CSSConstructor;
declare export var keyframes : KeyFramesConstructor;
declare export var createGlobalStyle : CreateGlobalStyleConstructor
declare export var ThemeProvider : React$ComponentType<{children?: ?React$Node, theme : Theme | (Theme) => Theme}>
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
declare type InjectedProps = { theme : Theme | void }
declare export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
// @HACK This is a cheat to hide that the underlying type is "just a string"
// once we know of a better way, we should be able to update this accordingly.
// I don't think there _is_ a good way, currently.
// @NOTE Also not too sure about the naming of this...
declare export type StyledElementType<T> = T;
declare export type StyledComponentType<C> = {
[[call]]: TaggedTemplateLiteral<C>,
+attrs: <A: {}>(attributes: A | (props: React$ElementConfig<C>) => A) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>
};
declare type StyledComponentList = {
a: StyledComponentType<StyledElementType<'a'>>,
abbr: StyledComponentType<StyledElementType<'abbr'>>,
address: StyledComponentType<StyledElementType<'address'>>,
area: StyledComponentType<StyledElementType<'area'>>,
article: StyledComponentType<StyledElementType<'article'>>,
aside: StyledComponentType<StyledElementType<'aside'>>,
audio: StyledComponentType<StyledElementType<'audio'>>,
b: StyledComponentType<StyledElementType<'b'>>,
base: StyledComponentType<StyledElementType<'base'>>,
bdi: StyledComponentType<StyledElementType<'bdi'>>,
bdo: StyledComponentType<StyledElementType<'bdo'>>,
big: StyledComponentType<StyledElementType<'big'>>,
blockquote: StyledComponentType<StyledElementType<'blockquote'>>,
body: StyledComponentType<StyledElementType<'body'>>,
br: StyledComponentType<StyledElementType<'br'>>,
button: StyledComponentType<StyledElementType<'button'>>,
canvas: StyledComponentType<StyledElementType<'canvas'>>,
caption: StyledComponentType<StyledElementType<'caption'>>,
cite: StyledComponentType<StyledElementType<'cite'>>,
code: StyledComponentType<StyledElementType<'code'>>,
col: StyledComponentType<StyledElementType<'col'>>,
colgroup: StyledComponentType<StyledElementType<'colgroup'>>,
data: StyledComponentType<StyledElementType<'data'>>,
datalist: StyledComponentType<StyledElementType<'datalist'>>,
dd: StyledComponentType<StyledElementType<'dd'>>,
del: StyledComponentType<StyledElementType<'del'>>,
details: StyledComponentType<StyledElementType<'details'>>,
dfn: StyledComponentType<StyledElementType<'dfn'>>,
dialog: StyledComponentType<StyledElementType<'dialog'>>,
div: StyledComponentType<StyledElementType<'div'>>,
dl: StyledComponentType<StyledElementType<'dl'>>,
dt: StyledComponentType<StyledElementType<'dt'>>,
em: StyledComponentType<StyledElementType<'em'>>,
embed: StyledComponentType<StyledElementType<'embed'>>,
fieldset: StyledComponentType<StyledElementType<'fieldset'>>,
figcaption: StyledComponentType<StyledElementType<'figcaption'>>,
figure: StyledComponentType<StyledElementType<'figure'>>,
footer: StyledComponentType<StyledElementType<'footer'>>,
form: StyledComponentType<StyledElementType<'form'>>,
h1: StyledComponentType<StyledElementType<'h1'>>,
h2: StyledComponentType<StyledElementType<'h2'>>,
h3: StyledComponentType<StyledElementType<'h3'>>,
h4: StyledComponentType<StyledElementType<'h4'>>,
h5: StyledComponentType<StyledElementType<'h5'>>,
h6: StyledComponentType<StyledElementType<'h6'>>,
head: StyledComponentType<StyledElementType<'head'>>,
header: StyledComponentType<StyledElementType<'header'>>,
hgroup: StyledComponentType<StyledElementType<'hgroup'>>,
hr: StyledComponentType<StyledElementType<'hr'>>,
html: StyledComponentType<StyledElementType<'html'>>,
i: StyledComponentType<StyledElementType<'i'>>,
iframe: StyledComponentType<StyledElementType<'iframe'>>,
img: StyledComponentType<StyledElementType<'img'>>,
input: StyledComponentType<StyledElementType<'input'>>,
ins: StyledComponentType<StyledElementType<'ins'>>,
kbd: StyledComponentType<StyledElementType<'kbd'>>,
keygen: StyledComponentType<StyledElementType<'keygen'>>,
label: StyledComponentType<StyledElementType<'label'>>,
legend: StyledComponentType<StyledElementType<'legend'>>,
li: StyledComponentType<StyledElementType<'li'>>,
link: StyledComponentType<StyledElementType<'link'>>,
main: StyledComponentType<StyledElementType<'main'>>,
map: StyledComponentType<StyledElementType<'map'>>,
mark: StyledComponentType<StyledElementType<'mark'>>,
menu: StyledComponentType<StyledElementType<'menu'>>,
menuitem: StyledComponentType<StyledElementType<'menuitem'>>,
meta: StyledComponentType<StyledElementType<'meta'>>,
meter: StyledComponentType<StyledElementType<'meter'>>,
nav: StyledComponentType<StyledElementType<'nav'>>,
noscript: StyledComponentType<StyledElementType<'noscript'>>,
object: StyledComponentType<StyledElementType<'object'>>,
ol: StyledComponentType<StyledElementType<'ol'>>,
optgroup: StyledComponentType<StyledElementType<'optgroup'>>,
option: StyledComponentType<StyledElementType<'option'>>,
output: StyledComponentType<StyledElementType<'output'>>,
p: StyledComponentType<StyledElementType<'p'>>,
param: StyledComponentType<StyledElementType<'param'>>,
picture: StyledComponentType<StyledElementType<'picture'>>,
pre: StyledComponentType<StyledElementType<'pre'>>,
progress: StyledComponentType<StyledElementType<'progress'>>,
q: StyledComponentType<StyledElementType<'q'>>,
rp: StyledComponentType<StyledElementType<'rp'>>,
rt: StyledComponentType<StyledElementType<'rt'>>,
ruby: StyledComponentType<StyledElementType<'ruby'>>,
s: StyledComponentType<StyledElementType<'s'>>,
samp: StyledComponentType<StyledElementType<'samp'>>,
script: StyledComponentType<StyledElementType<'script'>>,
section: StyledComponentType<StyledElementType<'section'>>,
select: StyledComponentType<StyledElementType<'select'>>,
small: StyledComponentType<StyledElementType<'small'>>,
source: StyledComponentType<StyledElementType<'source'>>,
span: StyledComponentType<StyledElementType<'span'>>,
strong: StyledComponentType<StyledElementType<'strong'>>,
style: StyledComponentType<StyledElementType<'style'>>,
sub: StyledComponentType<StyledElementType<'sub'>>,
summary: StyledComponentType<StyledElementType<'summary'>>,
sup: StyledComponentType<StyledElementType<'sup'>>,
table: StyledComponentType<StyledElementType<'table'>>,
tbody: StyledComponentType<StyledElementType<'tbody'>>,
td: StyledComponentType<StyledElementType<'td'>>,
textarea: StyledComponentType<StyledElementType<'textarea'>>,
tfoot: StyledComponentType<StyledElementType<'tfoot'>>,
th: StyledComponentType<StyledElementType<'th'>>,
thead: StyledComponentType<StyledElementType<'thead'>>,
time: StyledComponentType<StyledElementType<'time'>>,
title: StyledComponentType<StyledElementType<'title'>>,
tr: StyledComponentType<StyledElementType<'tr'>>,
track: StyledComponentType<StyledElementType<'track'>>,
u: StyledComponentType<StyledElementType<'u'>>,
ul: StyledComponentType<StyledElementType<'ul'>>,
var: StyledComponentType<StyledElementType<'var'>>,
video: StyledComponentType<StyledElementType<'video'>>,
wbr: StyledComponentType<StyledElementType<'wbr'>>,
// SVG
circle: StyledComponentType<StyledElementType<'circle'>>,
clipPath: StyledComponentType<StyledElementType<'clipPath'>>,
defs: StyledComponentType<StyledElementType<'defs'>>,
ellipse: StyledComponentType<StyledElementType<'ellipse'>>,
g: StyledComponentType<StyledElementType<'g'>>,
image: StyledComponentType<StyledElementType<'image'>>,
line: StyledComponentType<StyledElementType<'line'>>,
linearGradient: StyledComponentType<StyledElementType<'linearGradient'>>,
mask: StyledComponentType<StyledElementType<'mask'>>,
path: StyledComponentType<StyledElementType<'path'>>,
pattern: StyledComponentType<StyledElementType<'pattern'>>,
polygon: StyledComponentType<StyledElementType<'polygon'>>,
polyline: StyledComponentType<StyledElementType<'polyline'>>,
radialGradient: StyledComponentType<StyledElementType<'radialGradient'>>,
rect: StyledComponentType<StyledElementType<'rect'>>,
stop: StyledComponentType<StyledElementType<'stop'>>,
svg: StyledComponentType<StyledElementType<'svg'>>,
text: StyledComponentType<StyledElementType<'text'>>,
tspan: StyledComponentType<StyledElementType<'tspan'>>
}
declare export default StyledComponentList & {
[[call]]: <S : string>(S) => $ElementType<StyledComponentList, S>,
[[call]]: <P : {}, C : React$ComponentType<P>>(C) => StyledComponentType<C>
};
}
declare module 'styled-components/native' {
declare export type Interpolation =
| (<P: {}>(executionContext: P) => string)
| CSSRules
| KeyFrames
| string
| number
declare export type CSSRules = Interpolation[]
// This is not exported on purpose, since it's an implementation detail
declare type TaggedTemplateLiteral<R> = (strings : string[], ...interpolations : Interpolation[]) => R
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>
declare interface Tag<T> {
styleTag: HTMLStyleElement | null;
getIds(): string[];
hasNameForId(id: string, name: string): boolean;
insertMarker(id: string): T;
insertRules(id: string, cssRules: string[], name: ?string): void;
removeRules(id: string): void;
css(): string;
toHTML(additionalAttrs: ?string): string;
toElement(): React$Element<*>;
clone(): Tag<T>;
sealed: boolean;
}
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
declare export class StyleSheet {
static get master() : StyleSheet;
static get instance() : StyleSheet;
static reset(forceServer? : boolean) : void;
id : number;
forceServer : boolean;
target : ?HTMLElement;
tagMap : {[string]: Tag<any>}; // eslint-disable-line flowtype/no-weak-types
deferred: { [string]: string[] | void };
rehydratedNames: { [string]: boolean };
ignoreRehydratedNames: { [string]: boolean };
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
capacity: number;
clones: StyleSheet[];
constructor(?HTMLElement) : this;
rehydrate() : this;
clone() : StyleSheet;
sealAllTags() : void;
makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
hasId(id: string) : boolean;
hasNameForId(id: string, name: string) : boolean;
deferredInject(id : string, cssRules : string[]) : void;
inject(id: string, cssRules : string[], name? : string) : void;
remove(id : string) : void;
toHtml() : string;
toReactElements() : React$ElementType[];
}
declare export class KeyFrames {
id : string;
name : string;
rules : string[];
constructor(name : string, rules : string[]) : this;
inject(StyleSheet) : void;
toString() : string;
getName() : string;
}
// I think any is appropriate here?
// eslint-disable-next-line flowtype/no-weak-types
declare export type Theme = {+[string] : any}
declare export var css : CSSConstructor;
declare export var keyframes : KeyFramesConstructor;
declare export var createGlobalStyle : CreateGlobalStyleConstructor
declare export var ThemeProvider : React$ComponentType<{children?: ?React$Node, theme : Theme | (Theme) => Theme}>
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
declare type InjectedProps = { theme : Theme | void }
declare export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
// @HACK This is a cheat to hide that the underlying type is "just a string"
// once we know of a better way, we should be able to update this accordingly.
// I don't think there _is_ a good way, currently.
// @NOTE Also not too sure about the naming of this...
declare export type StyledElementType<T> = T;
declare export type StyledComponentType<C> = {
[[call]]: TaggedTemplateLiteral<C>,
+attrs: <A: {}>(attributes: A) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>
};
declare type StyledComponentList = {
ActivityIndicator: StyledComponentType<React$ComponentType<{}>>,
ActivityIndicatorIOS: StyledComponentType<React$ComponentType<{}>>,
ART: StyledComponentType<React$ComponentType<{}>>,
Button: StyledComponentType<React$ComponentType<{}>>,
DatePickerIOS: StyledComponentType<React$ComponentType<{}>>,
DrawerLayoutAndroid: StyledComponentType<React$ComponentType<{}>>,
Image: StyledComponentType<React$ComponentType<{}>>,
ImageBackground: StyledComponentType<React$ComponentType<{}>>,
ImageEditor: StyledComponentType<React$ComponentType<{}>>,
ImageStore: StyledComponentType<React$ComponentType<{}>>,
KeyboardAvoidingView: StyledComponentType<React$ComponentType<{}>>,
ListView: StyledComponentType<React$ComponentType<{}>>,
MapView: StyledComponentType<React$ComponentType<{}>>,
Modal: StyledComponentType<React$ComponentType<{}>>,
NavigatorIOS: StyledComponentType<React$ComponentType<{}>>,
Picker: StyledComponentType<React$ComponentType<{}>>,
PickerIOS: StyledComponentType<React$ComponentType<{}>>,
ProgressBarAndroid: StyledComponentType<React$ComponentType<{}>>,
ProgressViewIOS: StyledComponentType<React$ComponentType<{}>>,
ScrollView: StyledComponentType<React$ComponentType<{}>>,
SegmentedControlIOS: StyledComponentType<React$ComponentType<{}>>,
Slider: StyledComponentType<React$ComponentType<{}>>,
SliderIOS: StyledComponentType<React$ComponentType<{}>>,
SnapshotViewIOS: StyledComponentType<React$ComponentType<{}>>,
Switch: StyledComponentType<React$ComponentType<{}>>,
RecyclerViewBackedScrollView: StyledComponentType<React$ComponentType<{}>>,
RefreshControl: StyledComponentType<React$ComponentType<{}>>,
SafeAreaView: StyledComponentType<React$ComponentType<{}>>,
StatusBar: StyledComponentType<React$ComponentType<{}>>,
SwipeableListView: StyledComponentType<React$ComponentType<{}>>,
SwitchAndroid: StyledComponentType<React$ComponentType<{}>>,
SwitchIOS: StyledComponentType<React$ComponentType<{}>>,
TabBarIOS: StyledComponentType<React$ComponentType<{}>>,
Text: StyledComponentType<React$ComponentType<{}>>,
TextInput: StyledComponentType<React$ComponentType<{}>>,
ToastAndroid: StyledComponentType<React$ComponentType<{}>>,
ToolbarAndroid: StyledComponentType<React$ComponentType<{}>>,
Touchable: StyledComponentType<React$ComponentType<{}>>,
TouchableHighlight: StyledComponentType<React$ComponentType<{}>>,
TouchableNativeFeedback: StyledComponentType<React$ComponentType<{}>>,
TouchableOpacity: StyledComponentType<React$ComponentType<{}>>,
TouchableWithoutFeedback: StyledComponentType<React$ComponentType<{}>>,
View: StyledComponentType<React$ComponentType<{}>>,
ViewPagerAndroid: StyledComponentType<React$ComponentType<{}>>,
WebView: StyledComponentType<React$ComponentType<{}>>,
FlatList: StyledComponentType<React$ComponentType<{}>>,
SectionList: StyledComponentType<React$ComponentType<{}>>,
VirtualizedList: StyledComponentType<React$ComponentType<{}>>,
}
declare export default StyledComponentList & {
[[call]]: <S : string>(S) => $ElementType<StyledComponentList, S>,
[[call]]: <P : {}, C : React$ComponentType<P>>(C) => StyledComponentType<C>
};
}

View file

@ -46,6 +46,7 @@
"redux-thunk": "^2.3.0",
"sequelize": "^4.43.0",
"socket.io": "^2.2.0",
"styled-components": "^4.1.3",
"superagent": "^4.1.0",
"uuid": "^3.3.2"
},
@ -58,6 +59,7 @@
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-plugin-styled-components": "^1.10.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"chokidar": "^2.1.2",
"eslint-plugin-flowtype": "^3.4.2",

View file

@ -1013,6 +1013,18 @@
dependencies:
"@emotion/memoize" "^0.6.6"
"@emotion/is-prop-valid@^0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
dependencies:
"@emotion/memoize" "0.7.1"
"@emotion/memoize@0.7.1":
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
"@emotion/memoize@^0.6.6":
version "0.6.6"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
@ -1718,7 +1730,7 @@ babel-plugin-react-require@3.0.0:
resolved "https://registry.yarnpkg.com/babel-plugin-react-require/-/babel-plugin-react-require-3.0.0.tgz#2e4e7b4496b93a654a1c80042276de4e4eeb20e3"
integrity sha1-Lk57RJa5OmVKHIAEInbeTk7rIOM=
"babel-plugin-styled-components@>= 1":
"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
@ -8058,6 +8070,23 @@ styled-components@4.1.2:
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
styled-components@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.3.tgz#4472447208e618b57e84deaaeb6acd34a5e0fe9b"
integrity sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@emotion/is-prop-valid" "^0.7.3"
"@emotion/unitless" "^0.7.0"
babel-plugin-styled-components ">= 1"
css-to-react-native "^2.2.2"
memoize-one "^4.0.0"
prop-types "^15.5.4"
react-is "^16.6.0"
stylis "^3.5.0"
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
styled-jsx@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.2.1.tgz#452051fe50df5e9c7c7f3dd20fa46c3060ac65b0"