Add Column/Columns/Container

package-lock.json

@@ -13230,6 +13230,32 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "polished": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-3.4.2.tgz",
+      "integrity": "sha512-9Rch6iMZckABr6EFCLPZsxodeBpXMo9H4fRlfR/9VjMEyy5xpo1/WgXlJGgSjPyVhEZNycbW7UmYMNyWS5MI0g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
+          "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
+      }
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",

package.json

@@ -96,6 +96,7 @@
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
     "pkg": "^4.4.0",
+    "polished": "^3.4.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-hot-loader": "^4.12.15",

packages/client/src/components/Container.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+export function keys<O>(o: O) {
+  return Object.keys(o) as (keyof O)[]
+}
+
+export const Container = styled.div`
+  margin: 0 auto;
+  padding: 0 1rem;
+
+  ${props => keys(props.theme.screen.min)
+    .map(key => `@media(min-width: ${props.theme.screen.min[key]}) {
+      max-width: ${props.theme.container[key]};
+    }`)
+    .join('\n')
+  }
+`
+
+export const Columns = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: -1rem -1rem -1rem -1rem;
+  align-items: center;
+`
+
+export interface ColumnProps {
+  xs?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export const Column = styled.div<ColumnProps>`
+  padding: 1rem;
+
+  width: ${props => props.xs! * 100 / 12}%;
+
+  ${props => keys(props.theme.screen.min)
+    .filter(key => !!props[key])
+    .map(key => `@media(min-width: ${props.theme.screen.min[key]}) {
+      width: ${props[key]! * 100 / 12}%;
+    }`)
+    .join('\n')
+  }
+`
+Column.defaultProps = {
+  xs: 12,
+}

packages/client/src/components/Section.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Section = styled.div`
+  padding: 3rem 0;
+`

packages/client/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Button'
+export * from './Container'
 export * from './Heading'
 export * from './Help'
 export * from './Input'
@@ -7,6 +8,7 @@ export * from './Modal'
 export * from './Panel'
 export * from './Redirect'
 export * from './ReturnHere'
+export * from './Section'
 export * from './TimeAgo'
 export * from './Well'
 export * from './withHistory'

packages/client/src/crumbs/Crumb.tsx

@@ -28,19 +28,17 @@ export class Crumb extends React.PureComponent<CrumbProps> {
   render() {
     return (
       <Breadcrumb>
-        <ul>
-          <BreadcrumbItem>
-            <Link to='/'>Home</Link>
+        <BreadcrumbItem>
+          <Link to='/'>Home</Link>
+        </BreadcrumbItem>
+        {this.props.links.map((link, i) => (
+          <BreadcrumbItem key={i}>
+            <Link to={link.to}>{link.name}</Link>
           </BreadcrumbItem>
-          {this.props.links.map((link, i) => (
-            <BreadcrumbItem key={i}>
-              <Link to={link.to}>{link.name}</Link>
-            </BreadcrumbItem>
-          ))}
-          <BreadcrumbItem>
-            <span>{this.props.current}</span>
-          </BreadcrumbItem>
-        </ul>
+        ))}
+        <BreadcrumbItem>
+          <span>{this.props.current}</span>
+        </BreadcrumbItem>
       </Breadcrumb>
     )
   }

packages/client/src/login/LoginForm.tsx

@@ -1,9 +1,8 @@
+import { Credentials, UserProfile } from '@rondo.dev/common'
 import React from 'react'
-import {FaUser, FaLock} from 'react-icons/fa'
-import {Credentials, UserProfile} from '@rondo.dev/common'
-import {Input} from '../components/Input'
-import {Link} from 'react-router-dom'
-import {Redirect} from '../components/Redirect'
+import { FaLock, FaUser } from 'react-icons/fa'
+import { Link } from 'react-router-dom'
+import { Button, Input, Redirect } from '../components'
 
 export interface LoginFormProps {
   error?: string
@@ -44,15 +43,12 @@ export class LoginForm extends React.PureComponent<LoginFormProps> {
         />
 
         <div className='center'>
-          <input
-            className='button is-primary'
-            name='submit'
-            type='submit'
-            value='Log In'
-          />
+          <Button type='submit'>
+            Log In
+          </Button>
         </div>
 
-        <p className='small center mt-1'>
+        <p>
           Don&apos;t have an account? <Link to='/auth/register'>Sign up!</Link>
         </p>
       </form>

packages/client/src/login/RegisterForm.tsx

@@ -28,7 +28,7 @@ export class RegisterForm extends React.PureComponent<RegisterFormProps> {
       >
         <p className='error has-text-danger'>{this.props.error}</p>
         <Input
-          Icon={FaEnvelope}
+          Icon={FaUser}
           label='Username'
           name='username'
           type='text'

packages/client/src/team/TeamList.tsx

@@ -62,10 +62,12 @@ export class TeamList extends React.PureComponent<TeamListProps> {
           <span className='is-flex is-vcentered'>
             <span>Teams</span>
             <Link
-              className='ml-auto button is-link is-small'
+              className='ml-auto'
               to='/teams/new'
             >
-              <FaPlus />&nbsp; New
+              <Button>
+                <FaPlus />&nbsp; New
+              </Button>
             </Link>
           </span>
         </PanelHeading>

packages/client/src/theme/theme.ts

@@ -18,9 +18,38 @@ declare module 'styled-components' {
       width: string
       radius: string
     }
+    screen: {
+      min: {
+        sm: string
+        md: string
+        lg: string
+      }
+      max: {
+        xs: string
+        sm: string
+        md: string
+      }
+    }
+    container: {
+      sm: string
+      md: string
+      lg: string
+    }
   }
 }
 
+const screen = {
+  sm: 768,
+  md: 992,
+  lg: 1200,
+}
+
+const screenMax = {
+  xs: screen.sm - 1,
+  sm: screen.md - 1,
+  md: screen.lg - 1,
+}
+
 export const theme: DefaultTheme = {
   colors: {
     primary: 'indigo',
@@ -38,6 +67,23 @@ export const theme: DefaultTheme = {
     width: '1px',
     radius: '3px',
   },
+  screen: {
+    min: {
+      sm: screen.sm + 'px',
+      md: screen.md + 'px',
+      lg: screen.lg + 'px',
+    },
+    max: {
+      xs: screenMax.xs + 'px',
+      sm: screenMax.sm + 'px',
+      md: screenMax.md + 'px',
+    },
+  },
+  container: {
+    sm: '100%',
+    md: '960px',
+    lg: '1152px',
+  },
 }
 
 export type ColorScheme =

packages/jsonrpc/src/jsonrpc.ts

@@ -100,6 +100,7 @@ async function validateServiceContext<
   async function doValidate(validate: Validate<Context>) {
     const success = await validate(context)
     if (!success) {
+      // TODO make this an error like 401
       throw createError(ERROR_INVALID_REQUEST, {
         id,
         data: null,