diff --git a/UI/.babelrc b/UI/.babelrc index 571c6da..dac5dd0 100644 --- a/UI/.babelrc +++ b/UI/.babelrc @@ -1,5 +1,8 @@ { "presets": [ "next/babel", "@babel/preset-flow" + ], + "plugins": [ + [ "styled-components", { "ssr": true } ] ] } diff --git a/UI/components/global-colors.js b/UI/components/global-colors.js index 938e9f2..3ab116c 100644 --- a/UI/components/global-colors.js +++ b/UI/components/global-colors.js @@ -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 = () => - -export default Colors +` diff --git a/UI/components/header/common.js b/UI/components/header/common.js index f80c712..370c1ce 100644 --- a/UI/components/header/common.js +++ b/UI/components/header/common.js @@ -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 } -const HeaderBarCommon: React.StatelessFunctionalComponent = ({ children }) => ( -
- { children } -
+const Header = styled.div` +` + +const HeaderInner = styled.div`` + +const HeaderBarCommon = ({ children }: CommonProps) => ( +
+ + { (process.env.NODE_ENV === 'development') && } + { children } + +
) export default HeaderBarCommon diff --git a/UI/components/layout.js b/UI/components/layout.js new file mode 100644 index 0000000..d8c89dd --- /dev/null +++ b/UI/components/layout.js @@ -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, user: User }) => <> + + +
+ + {children} +
+ + +export default Layout diff --git a/UI/kit/debug-breakpoints.js b/UI/kit/debug-breakpoints.js new file mode 100644 index 0000000..2ff106f --- /dev/null +++ b/UI/kit/debug-breakpoints.js @@ -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 + { Object.keys(breakpoints).map((x, i, a) => {x}) } + +} + +export default DebugFloater diff --git a/UI/kit/media.js b/UI/kit/media.js new file mode 100644 index 0000000..d9f95f3 --- /dev/null +++ b/UI/kit/media.js @@ -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') +} diff --git a/UI/pages/_app.js b/UI/pages/_app.js index 910d719..30f8ecd 100644 --- a/UI/pages/_app.js +++ b/UI/pages/_app.js @@ -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 ( @@ -64,9 +64,10 @@ class RoleypolyApp extends App { Roleypoly - - - + + + + ) } diff --git a/UI/pages/_document.js b/UI/pages/_document.js new file mode 100644 index 0000000..542898c --- /dev/null +++ b/UI/pages/_document.js @@ -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() + }) + + const initialProps = await Document.getInitialProps(ctx) + return { + ...initialProps, + styles: <>{initialProps.styles}{sheet.getStyleElement()} + } + } finally { + sheet.seal() + } + } +} diff --git a/UI/pages/_test/landing-mock.js b/UI/pages/_test/landing-mock.js index 92391bd..62b9778 100644 --- a/UI/pages/_test/landing-mock.js +++ b/UI/pages/_test/landing-mock.js @@ -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 { - static async getInitialProps (ctx: PageProps): Promise { - const rpc = withCookies(ctx) - - return { - user: await rpc.getCurrentUser() - } - } +export default class LandingTest extends React.Component { render () { - return
- -
+ return
} } diff --git a/UI/pages/index.js b/UI/pages/index.js index 1d1ef8b..b652d95 100644 --- a/UI/pages/index.js +++ b/UI/pages/index.js @@ -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 = () => ( -
- -
+

Hi there.

) export default Home diff --git a/flow-typed/npm/babel-plugin-styled-components_vx.x.x.js b/flow-typed/npm/babel-plugin-styled-components_vx.x.x.js new file mode 100644 index 0000000..6627102 --- /dev/null +++ b/flow-typed/npm/babel-plugin-styled-components_vx.x.x.js @@ -0,0 +1,130 @@ +// flow-typed signature: c631579d6a793a28b84aea5aeb008715 +// flow-typed version: <>/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'>; +} diff --git a/flow-typed/npm/erlpack_vx.x.x.js b/flow-typed/npm/erlpack_vx.x.x.js index 2bddf1b..bc65a6d 100644 --- a/flow-typed/npm/erlpack_vx.x.x.js +++ b/flow-typed/npm/erlpack_vx.x.x.js @@ -1,5 +1,5 @@ -// flow-typed signature: 261645a6d1133fb1d26bb2c9286e35b1 -// flow-typed version: <>/erlpack_vgithub:discordapp/erlpack/flow_v0.94.0 +// flow-typed signature: 3328f30279a7faaae4973b8156a23bdc +// flow-typed version: <>/erlpack_vhammerandchisel/erlpack/flow_v0.94.0 /** * This is an autogenerated libdef stub for: diff --git a/flow-typed/npm/koa_v2.0.x.js b/flow-typed/npm/koa_v2.x.x.js similarity index 94% rename from flow-typed/npm/koa_v2.0.x.js rename to flow-typed/npm/koa_v2.x.x.js index 3053289..ee40df2 100644 --- a/flow-typed/npm/koa_v2.0.x.js +++ b/flow-typed/npm/koa_v2.x.x.js @@ -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, ip: $PropertyType, - [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|Object, // https://github.com/crypto-utils/keygrip middleware: Array, - name?: string, // optionally give your application a name proxy: boolean, // when true proxy header fields will be trusted request: Request, response: Response, diff --git a/flow-typed/npm/styled-components_v4.x.x.js b/flow-typed/npm/styled-components_v4.x.x.js new file mode 100644 index 0000000..54598e9 --- /dev/null +++ b/flow-typed/npm/styled-components_v4.x.x.js @@ -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 = + | ((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 = (strings : string[], ...interpolations : Interpolation[]) => R + + declare export type CSSConstructor = TaggedTemplateLiteral + declare export type KeyFramesConstructor = TaggedTemplateLiteral + declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral> + + declare interface Tag { + 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; + 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}; // eslint-disable-line flowtype/no-weak-types + deferred: { [string]: string[] | void }; + rehydratedNames: { [string]: boolean }; + ignoreRehydratedNames: { [string]: boolean }; + tags: Tag[]; // eslint-disable-line flowtype/no-weak-types + importRuleTag: Tag; // eslint-disable-line flowtype/no-weak-types + capacity: number; + clones: StyleSheet[]; + + constructor(?HTMLElement) : this; + rehydrate() : this; + clone() : StyleSheet; + sealAllTags() : void; + makeTag(tag : ?Tag) : Tag; // eslint-disable-line flowtype/no-weak-types + getImportRuleTag() : Tag; // eslint-disable-line flowtype/no-weak-types + getTagForId(id : string): Tag; // 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>(WrappedComponent: Component) : React$ComponentType<$Diff>, 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; + declare export type StyledComponentType = { + [[call]]: TaggedTemplateLiteral, + +attrs: (attributes: A | (props: React$ElementConfig) => A) => TaggedTemplateLiteral, A>>> + }; + + declare type StyledComponentList = { + a: StyledComponentType>, + abbr: StyledComponentType>, + address: StyledComponentType>, + area: StyledComponentType>, + article: StyledComponentType>, + aside: StyledComponentType>, + audio: StyledComponentType>, + b: StyledComponentType>, + base: StyledComponentType>, + bdi: StyledComponentType>, + bdo: StyledComponentType>, + big: StyledComponentType>, + blockquote: StyledComponentType>, + body: StyledComponentType>, + br: StyledComponentType>, + button: StyledComponentType>, + canvas: StyledComponentType>, + caption: StyledComponentType>, + cite: StyledComponentType>, + code: StyledComponentType>, + col: StyledComponentType>, + colgroup: StyledComponentType>, + data: StyledComponentType>, + datalist: StyledComponentType>, + dd: StyledComponentType>, + del: StyledComponentType>, + details: StyledComponentType>, + dfn: StyledComponentType>, + dialog: StyledComponentType>, + div: StyledComponentType>, + dl: StyledComponentType>, + dt: StyledComponentType>, + em: StyledComponentType>, + embed: StyledComponentType>, + fieldset: StyledComponentType>, + figcaption: StyledComponentType>, + figure: StyledComponentType>, + footer: StyledComponentType>, + form: StyledComponentType>, + h1: StyledComponentType>, + h2: StyledComponentType>, + h3: StyledComponentType>, + h4: StyledComponentType>, + h5: StyledComponentType>, + h6: StyledComponentType>, + head: StyledComponentType>, + header: StyledComponentType>, + hgroup: StyledComponentType>, + hr: StyledComponentType>, + html: StyledComponentType>, + i: StyledComponentType>, + iframe: StyledComponentType>, + img: StyledComponentType>, + input: StyledComponentType>, + ins: StyledComponentType>, + kbd: StyledComponentType>, + keygen: StyledComponentType>, + label: StyledComponentType>, + legend: StyledComponentType>, + li: StyledComponentType>, + link: StyledComponentType>, + main: StyledComponentType>, + map: StyledComponentType>, + mark: StyledComponentType>, + menu: StyledComponentType>, + menuitem: StyledComponentType>, + meta: StyledComponentType>, + meter: StyledComponentType>, + nav: StyledComponentType>, + noscript: StyledComponentType>, + object: StyledComponentType>, + ol: StyledComponentType>, + optgroup: StyledComponentType>, + option: StyledComponentType>, + output: StyledComponentType>, + p: StyledComponentType>, + param: StyledComponentType>, + picture: StyledComponentType>, + pre: StyledComponentType>, + progress: StyledComponentType>, + q: StyledComponentType>, + rp: StyledComponentType>, + rt: StyledComponentType>, + ruby: StyledComponentType>, + s: StyledComponentType>, + samp: StyledComponentType>, + script: StyledComponentType>, + section: StyledComponentType>, + select: StyledComponentType>, + small: StyledComponentType>, + source: StyledComponentType>, + span: StyledComponentType>, + strong: StyledComponentType>, + style: StyledComponentType>, + sub: StyledComponentType>, + summary: StyledComponentType>, + sup: StyledComponentType>, + table: StyledComponentType>, + tbody: StyledComponentType>, + td: StyledComponentType>, + textarea: StyledComponentType>, + tfoot: StyledComponentType>, + th: StyledComponentType>, + thead: StyledComponentType>, + time: StyledComponentType>, + title: StyledComponentType>, + tr: StyledComponentType>, + track: StyledComponentType>, + u: StyledComponentType>, + ul: StyledComponentType>, + var: StyledComponentType>, + video: StyledComponentType>, + wbr: StyledComponentType>, + + // SVG + circle: StyledComponentType>, + clipPath: StyledComponentType>, + defs: StyledComponentType>, + ellipse: StyledComponentType>, + g: StyledComponentType>, + image: StyledComponentType>, + line: StyledComponentType>, + linearGradient: StyledComponentType>, + mask: StyledComponentType>, + path: StyledComponentType>, + pattern: StyledComponentType>, + polygon: StyledComponentType>, + polyline: StyledComponentType>, + radialGradient: StyledComponentType>, + rect: StyledComponentType>, + stop: StyledComponentType>, + svg: StyledComponentType>, + text: StyledComponentType>, + tspan: StyledComponentType> + } + + declare export default StyledComponentList & { + [[call]]: (S) => $ElementType, + [[call]]:

>(C) => StyledComponentType + }; +} + + + +declare module 'styled-components/native' { + + declare export type Interpolation = + | ((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 = (strings : string[], ...interpolations : Interpolation[]) => R + + declare export type CSSConstructor = TaggedTemplateLiteral + declare export type KeyFramesConstructor = TaggedTemplateLiteral + declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral> + + declare interface Tag { + 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; + 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}; // eslint-disable-line flowtype/no-weak-types + deferred: { [string]: string[] | void }; + rehydratedNames: { [string]: boolean }; + ignoreRehydratedNames: { [string]: boolean }; + tags: Tag[]; // eslint-disable-line flowtype/no-weak-types + importRuleTag: Tag; // eslint-disable-line flowtype/no-weak-types + capacity: number; + clones: StyleSheet[]; + + constructor(?HTMLElement) : this; + rehydrate() : this; + clone() : StyleSheet; + sealAllTags() : void; + makeTag(tag : ?Tag) : Tag; // eslint-disable-line flowtype/no-weak-types + getImportRuleTag() : Tag; // eslint-disable-line flowtype/no-weak-types + getTagForId(id : string): Tag; // 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>(WrappedComponent: Component) : React$ComponentType<$Diff>, 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; + declare export type StyledComponentType = { + [[call]]: TaggedTemplateLiteral, + +attrs: (attributes: A) => TaggedTemplateLiteral, A>>> + }; + + declare type StyledComponentList = { + ActivityIndicator: StyledComponentType>, + ActivityIndicatorIOS: StyledComponentType>, + ART: StyledComponentType>, + Button: StyledComponentType>, + DatePickerIOS: StyledComponentType>, + DrawerLayoutAndroid: StyledComponentType>, + Image: StyledComponentType>, + ImageBackground: StyledComponentType>, + ImageEditor: StyledComponentType>, + ImageStore: StyledComponentType>, + KeyboardAvoidingView: StyledComponentType>, + ListView: StyledComponentType>, + MapView: StyledComponentType>, + Modal: StyledComponentType>, + NavigatorIOS: StyledComponentType>, + Picker: StyledComponentType>, + PickerIOS: StyledComponentType>, + ProgressBarAndroid: StyledComponentType>, + ProgressViewIOS: StyledComponentType>, + ScrollView: StyledComponentType>, + SegmentedControlIOS: StyledComponentType>, + Slider: StyledComponentType>, + SliderIOS: StyledComponentType>, + SnapshotViewIOS: StyledComponentType>, + Switch: StyledComponentType>, + RecyclerViewBackedScrollView: StyledComponentType>, + RefreshControl: StyledComponentType>, + SafeAreaView: StyledComponentType>, + StatusBar: StyledComponentType>, + SwipeableListView: StyledComponentType>, + SwitchAndroid: StyledComponentType>, + SwitchIOS: StyledComponentType>, + TabBarIOS: StyledComponentType>, + Text: StyledComponentType>, + TextInput: StyledComponentType>, + ToastAndroid: StyledComponentType>, + ToolbarAndroid: StyledComponentType>, + Touchable: StyledComponentType>, + TouchableHighlight: StyledComponentType>, + TouchableNativeFeedback: StyledComponentType>, + TouchableOpacity: StyledComponentType>, + TouchableWithoutFeedback: StyledComponentType>, + View: StyledComponentType>, + ViewPagerAndroid: StyledComponentType>, + WebView: StyledComponentType>, + FlatList: StyledComponentType>, + SectionList: StyledComponentType>, + VirtualizedList: StyledComponentType>, + } + + declare export default StyledComponentList & { + [[call]]: (S) => $ElementType, + [[call]]:

>(C) => StyledComponentType + }; +} diff --git a/package.json b/package.json index e98bf2c..0376246 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index d8f4fc3..4a304b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"