From 76b20551c771711d0341a8dec5906efbf2750005 Mon Sep 17 00:00:00 2001 From: Jerko Steiner Date: Sun, 3 Nov 2019 14:42:43 -0400 Subject: [PATCH] Add Column/Columns/Container --- package-lock.json | 26 +++++++++++ package.json | 1 + packages/client/src/components/Container.tsx | 48 ++++++++++++++++++++ packages/client/src/components/Section.tsx | 5 ++ packages/client/src/components/index.ts | 2 + packages/client/src/crumbs/Crumb.tsx | 22 ++++----- packages/client/src/login/LoginForm.tsx | 20 ++++---- packages/client/src/login/RegisterForm.tsx | 2 +- packages/client/src/team/TeamList.tsx | 6 ++- packages/client/src/theme/theme.ts | 46 +++++++++++++++++++ packages/jsonrpc/src/jsonrpc.ts | 1 + 11 files changed, 152 insertions(+), 27 deletions(-) create mode 100644 packages/client/src/components/Container.tsx create mode 100644 packages/client/src/components/Section.tsx diff --git a/package-lock.json b/package-lock.json index 5b626c1..121888c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3ee7ac2..9f55da0 100644 --- a/package.json +++ b/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", diff --git a/packages/client/src/components/Container.tsx b/packages/client/src/components/Container.tsx new file mode 100644 index 0000000..8b4b65c --- /dev/null +++ b/packages/client/src/components/Container.tsx @@ -0,0 +1,48 @@ +import styled from 'styled-components' + +export function keys(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` + 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, +} diff --git a/packages/client/src/components/Section.tsx b/packages/client/src/components/Section.tsx new file mode 100644 index 0000000..765bea7 --- /dev/null +++ b/packages/client/src/components/Section.tsx @@ -0,0 +1,5 @@ +import styled from 'styled-components' + +export const Section = styled.div` + padding: 3rem 0; +` diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts index 0832bd6..3fc44db 100644 --- a/packages/client/src/components/index.ts +++ b/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' diff --git a/packages/client/src/crumbs/Crumb.tsx b/packages/client/src/crumbs/Crumb.tsx index 45c9efd..2c4aa9f 100644 --- a/packages/client/src/crumbs/Crumb.tsx +++ b/packages/client/src/crumbs/Crumb.tsx @@ -28,19 +28,17 @@ export class Crumb extends React.PureComponent { render() { return ( -
    - - Home + + Home + + {this.props.links.map((link, i) => ( + + {link.name} - {this.props.links.map((link, i) => ( - - {link.name} - - ))} - - {this.props.current} - -
+ ))} + + {this.props.current} + ) } diff --git a/packages/client/src/login/LoginForm.tsx b/packages/client/src/login/LoginForm.tsx index 55d40d3..47a4a50 100644 --- a/packages/client/src/login/LoginForm.tsx +++ b/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 { />
- +
-

+

Don't have an account? Sign up!

diff --git a/packages/client/src/login/RegisterForm.tsx b/packages/client/src/login/RegisterForm.tsx index 2754972..fa4c09c 100644 --- a/packages/client/src/login/RegisterForm.tsx +++ b/packages/client/src/login/RegisterForm.tsx @@ -28,7 +28,7 @@ export class RegisterForm extends React.PureComponent { >

{this.props.error}

{ Teams -   New + diff --git a/packages/client/src/theme/theme.ts b/packages/client/src/theme/theme.ts index d7a5875..de59786 100644 --- a/packages/client/src/theme/theme.ts +++ b/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 = diff --git a/packages/jsonrpc/src/jsonrpc.ts b/packages/jsonrpc/src/jsonrpc.ts index 035439d..1763f85 100644 --- a/packages/jsonrpc/src/jsonrpc.ts +++ b/packages/jsonrpc/src/jsonrpc.ts @@ -100,6 +100,7 @@ async function validateServiceContext< async function doValidate(validate: Validate) { const success = await validate(context) if (!success) { + // TODO make this an error like 401 throw createError(ERROR_INVALID_REQUEST, { id, data: null,