lerna: split up bulk of packages

packages/roleypoly-ui/components/header/auth.js

@@ -0,0 +1,100 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon, { Logomark } from './common'
+import { type User } from '../../stores/user'
+import DiscordIcon from '../discord-guild-pic'
+import styled from 'styled-components'
+import { Hide } from '../../kit/media'
+import Link from 'next/link'
+import { connect } from 'react-redux'
+import { getCurrentServerState } from '../../stores/currentServer'
+
+const temporaryServer = {
+  id: '423497622876061707',
+  name: 'Placeholder',
+  icon: '8d03476c186ec8b2f6a1a4f5e55b13fe'
+}
+
+const LogoBox = styled.a`
+  flex: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const StyledServerPic = styled(DiscordIcon)`
+  border-radius: 100%;
+  box-shadow: 0 0 1px rgba(0,0,0,0.1);
+  border: 1px solid rgba(0,0,0,0.25);
+  height: 35px;
+  width: 35px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const StyledAvatar = styled.img`
+  border-radius: 100%;
+  border: 1px solid var(--c-green);
+  height: 35px;
+  width: 35px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ServerSelector = (props) => <div {...props}>
+  <div>
+    <StyledServerPic {...props} />
+  </div>
+  <div>
+    { props.name }
+  </div>
+</div>
+
+const StyledServerSelector = styled(ServerSelector)`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+`
+
+const UserSection = ({ user, ...props }) => <div {...props}>
+  <Hide.SM>{ user.username }</Hide.SM>
+  <StyledAvatar src={user.avatar} />
+</div>
+
+const StyledUserSection = styled(UserSection)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+`
+
+const Spacer = styled.div`
+  flex: 1;
+`
+
+const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User, isOnServer: boolean, currentServer: * }> = ({ user, isOnServer, currentServer = temporaryServer }) => (
+  <HeaderBarCommon noBackground={false}>
+    <>
+      <Link href='/'>
+        <LogoBox>
+          <Logomark />
+        </LogoBox>
+      </Link>
+      { isOnServer ? <StyledServerSelector name={currentServer.name} id={currentServer.id} icon={currentServer.icon} /> : <Spacer /> }
+      <StyledUserSection user={user} />
+    </>
+  </HeaderBarCommon>
+)
+
+const mapStateToProps = (state, { router }) => ({
+  isOnServer: router.pathname === '/_internal/_server',
+  currentServer: router.pathname === '/_internal/_server' ? getCurrentServerState(state, router.query.id).server : {}
+})
+
+export default connect(mapStateToProps)(HeaderBarAuth)

packages/roleypoly-ui/components/header/common.js

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import styled from 'styled-components'
+import * as logo from '../logo'
+
+export type CommonProps = {
+  children: React.Element<any>,
+  noBackground: boolean
+}
+
+const Header = styled.div`
+  background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark);' : 'var(--c-1);'}
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+`
+
+const HeaderInner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 960px;
+  width: 100vw;
+  margin: 0 auto;
+  height: 50px;
+  padding: 3px 5px;
+  position: relative;
+  top: -1px;
+
+  & > div {
+    margin: 0 0.5em;
+  }
+`
+
+export const Logotype = styled(logo.Logotype)`
+  height: 30px;
+`
+
+export const Logomark = styled(logo.Logomark)`
+  width: 40px;
+  height: 40px;
+`
+//
+const DebugBreakpoints = dynamic(() => import('../../kit/debug-breakpoints'))
+
+const HeaderBarCommon = ({ children, noBackground = false }: CommonProps) => (
+  <Header noBackground={noBackground}>
+    { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
+    <HeaderInner>
+      { children }
+    </HeaderInner>
+  </Header>
+)
+
+export default HeaderBarCommon

packages/roleypoly-ui/components/header/unauth.js

@@ -0,0 +1,53 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon, { Logotype, type CommonProps } from './common'
+import styled from 'styled-components'
+import Link from 'next/link'
+
+const LogoBox = styled.a`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`
+
+const LoginButton = styled.a`
+  cursor: pointer;
+  background-color: transparent;
+  display: block;
+  padding: 0.3em 1em;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.75);
+    background-color: var(--c-green);
+    border-color: rgba(0,0,0,0.25);
+    text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
+  }
+
+  &:active {
+    transform: translateY(0px);
+    box-shadow: none;
+  }
+`
+
+const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props) => (
+  <HeaderBarCommon {...props}>
+    <>
+      <Link href='/' prefetch>
+        <LogoBox>
+          <Logotype />
+        </LogoBox>
+      </Link>
+      <Link href='/auth/login' prefetch>
+        <LoginButton>Sign in →</LoginButton>
+      </Link>
+    </>
+  </HeaderBarCommon>
+)
+
+export default HeaderBarUnauth