From 15e174431c7e077d3611e7830da80430d4cd82f4 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Sun, 25 Feb 2018 21:23:07 +0000 Subject: [PATCH 1/7] Add initial theme --- frontend/package.json | 4 +++- frontend/src/index.tsx | 11 ++++++++++- frontend/src/styled/index.ts | 5 +++++ frontend/src/theme/index.ts | 3 +++ frontend/yarn.lock | 16 ++++++++++++++++ 5 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 frontend/src/styled/index.ts create mode 100644 frontend/src/theme/index.ts diff --git a/frontend/package.json b/frontend/package.json index 846c3a6d93..665a259e9c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,11 +4,13 @@ "private": true, "dependencies": { "emotion": "^9.0.2", + "emotion-theming": "^9.0.0", "modern-normalize": "^0.4.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-emotion": "^9.0.2", - "react-scripts-ts": "2.13.0" + "react-scripts-ts": "2.13.0", + "styled-system": "^2.1.1" }, "scripts": { "start": "react-scripts-ts start", diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3f17f12c15..c796b7316c 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,6 +2,15 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; +import { ThemeProvider } from 'emotion-theming'; + +import { theme } from './theme'; + import 'modern-normalize'; -ReactDOM.render(, document.getElementById('root') as HTMLElement); +ReactDOM.render( + + + , + document.getElementById('root') as HTMLElement +); diff --git a/frontend/src/styled/index.ts b/frontend/src/styled/index.ts new file mode 100644 index 0000000000..6bfa106c96 --- /dev/null +++ b/frontend/src/styled/index.ts @@ -0,0 +1,5 @@ +import styled, { ThemedReactEmotionInterface } from 'react-emotion'; + +import { Theme } from '../theme'; + +export default styled as ThemedReactEmotionInterface; diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts new file mode 100644 index 0000000000..a880a36f0b --- /dev/null +++ b/frontend/src/theme/index.ts @@ -0,0 +1,3 @@ +export const theme = {}; + +export type Theme = typeof theme; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a88d940769..df7e58b3e5 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3075,6 +3075,12 @@ emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" +emotion-theming@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-9.0.0.tgz#3b7dd07ceae70aab98280e81df8bfd7f9254d5c3" + dependencies: + hoist-non-react-statics "^2.3.1" + emotion-utils@^9.0.1: version "9.0.1" resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-9.0.1.tgz#db1034410d8ac4e399845d346471c3f2db5124d7" @@ -4123,6 +4129,10 @@ hoist-non-react-statics@1.x.x, hoist-non-react-statics@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" +hoist-non-react-statics@^2.3.1: + version "2.5.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" + home-or-tmp@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-1.0.0.tgz#4b9f1e40800c3e50c6c27f781676afcce71f3985" @@ -8142,6 +8152,12 @@ style-loader@^0.20.2: loader-utils "^1.1.0" schema-utils "^0.4.3" +styled-system@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.1.1.tgz#ec7cd9c25f8413662c90a3ff1b6660cf8d744163" + dependencies: + prop-types "^15.6.0" + stylis-rule-sheet@^0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f" From 5d784217880d4777da1d59821c96138de4533090 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Sun, 25 Feb 2018 21:49:35 +0000 Subject: [PATCH 2/7] Add theme wrapper to storybook --- frontend/.storybook/config.js | 6 +++++- frontend/.storybook/wrapper.js | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 frontend/.storybook/wrapper.js diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js index 3fc3ca29f4..785e2a010f 100644 --- a/frontend/.storybook/config.js +++ b/frontend/.storybook/config.js @@ -1,11 +1,15 @@ -import { configure } from "@storybook/react"; +import { configure, addDecorator as add } from '@storybook/react'; import 'modern-normalize'; +import { wrapper } from './wrapper'; + function loadStories() { require("../src/stories/index.tsx"); require("../src/stories/navbar/index.tsx"); require("../src/stories/logo/index.tsx"); } +add(wrapper()); + configure(loadStories, module); diff --git a/frontend/.storybook/wrapper.js b/frontend/.storybook/wrapper.js new file mode 100644 index 0000000000..dd38165fe4 --- /dev/null +++ b/frontend/.storybook/wrapper.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { ThemeProvider } from 'emotion-theming'; + +import { theme } from '../src/theme'; + +export function wrapper() { + return story => { + return ( + +
{story()}
+ + ); + }; +} From 52e4a7eb4655c5196a6bf13c860912dad6cb671e Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Sun, 25 Feb 2018 21:49:59 +0000 Subject: [PATCH 3/7] Add initial box component --- frontend/.storybook/config.js | 7 +- frontend/src/components/box/index.tsx | 30 ++ frontend/src/stories/box/index.tsx | 25 ++ frontend/src/theme/index.ts | 48 ++- frontend/src/typings/styled-system/index.d.ts | 322 ++++++++++++++++++ 5 files changed, 428 insertions(+), 4 deletions(-) create mode 100644 frontend/src/components/box/index.tsx create mode 100644 frontend/src/stories/box/index.tsx create mode 100644 frontend/src/typings/styled-system/index.d.ts diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js index 785e2a010f..e4bf040b6f 100644 --- a/frontend/.storybook/config.js +++ b/frontend/.storybook/config.js @@ -5,9 +5,10 @@ import 'modern-normalize'; import { wrapper } from './wrapper'; function loadStories() { - require("../src/stories/index.tsx"); - require("../src/stories/navbar/index.tsx"); - require("../src/stories/logo/index.tsx"); + require('../src/stories/index.tsx'); + require('../src/stories/navbar/index.tsx'); + require('../src/stories/logo/index.tsx'); + require('../src/stories/box/index.tsx'); } add(wrapper()); diff --git a/frontend/src/components/box/index.tsx b/frontend/src/components/box/index.tsx new file mode 100644 index 0000000000..1063121ef5 --- /dev/null +++ b/frontend/src/components/box/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { + space, + width, + fontSize, + color, + boxShadow, + SpaceProps, + WidthProps, + FontSizeProps, + ColorProps, + BoxShadowProps +} from 'styled-system'; + +import styled from '../../styled'; + +type BoxProps = SpaceProps & + WidthProps & + FontSizeProps & + ColorProps & + BoxShadowProps; + +export const Box: React.SFC = styled('div')` + ${space} + ${width} + ${fontSize} + ${color} + ${boxShadow} +`; diff --git a/frontend/src/stories/box/index.tsx b/frontend/src/stories/box/index.tsx new file mode 100644 index 0000000000..e51a17ce8b --- /dev/null +++ b/frontend/src/stories/box/index.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Box } from '../../components/box'; + +storiesOf('Box', module) + .add('plain', () => Hello world) + .add('font size', () => Hello world) + .add('complex', () => ( + + Hello world + + )) + .add('padding', () => ( + // padding: 32px (theme.space[3]) + Hello world + )) + .add('color', () => ( + // color + Hello world + )) + .add('background color', () => ( + // background color + Hello world + )); diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts index a880a36f0b..03671b3bd8 100644 --- a/frontend/src/theme/index.ts +++ b/frontend/src/theme/index.ts @@ -1,3 +1,49 @@ -export const theme = {}; +const breakpoints = ['40em', '52em', '64em']; + +const colors = { + text: '#024', + blue: '#EFEFEF', + + dark: { + blue: '#058' + }, + + gray: ['#333', '#666', '#999', '#ccc', '#eee', '#f6f6f6'] +}; + +const space = [0, 4, 8, 16, 32, 64, 128, 256, 512]; + +const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 96, 128]; + +const lineHeights = [1, 1.125, 1.25, 1.5]; + +const fontWeights = { + normal: 500, + bold: 700 +}; + +const letterSpacings = { + normal: 'normal', + caps: '0.25em' +}; + +const radii = [0, 2, 4, 8]; + +const borders = [0, '1px solid', '2px solid']; + +const shadows = [`0 1px 2px 0 ${colors.text}`, `0 1px 4px 0 ${colors.text}`]; + +export const theme = { + breakpoints, + colors, + space, + fontSizes, + lineHeights, + fontWeights, + letterSpacings, + radii, + borders, + shadows +}; export type Theme = typeof theme; diff --git a/frontend/src/typings/styled-system/index.d.ts b/frontend/src/typings/styled-system/index.d.ts new file mode 100644 index 0000000000..1b32f5d6b5 --- /dev/null +++ b/frontend/src/typings/styled-system/index.d.ts @@ -0,0 +1,322 @@ +declare namespace StyledSystem { + export interface BaseTheme { + breakpoints?: number[]; + space?: number[]; + fontSizes?: number[]; + colors?: { + [name: string]: string; + }; + } + + type ResponsiveValue = T | (T | null)[]; + + // + // Core + // + + export type SpaceValue = number | string; + export type ResponsiveSpaceValue = ResponsiveValue; + + export interface SpaceProps { + m?: ResponsiveSpaceValue; + mt?: ResponsiveSpaceValue; + mr?: ResponsiveSpaceValue; + mb?: ResponsiveSpaceValue; + ml?: ResponsiveSpaceValue; + mx?: ResponsiveSpaceValue; + my?: ResponsiveSpaceValue; + p?: ResponsiveSpaceValue; + pt?: ResponsiveSpaceValue; + pr?: ResponsiveSpaceValue; + pb?: ResponsiveSpaceValue; + pl?: ResponsiveSpaceValue; + px?: ResponsiveSpaceValue; + py?: ResponsiveSpaceValue; + } + + export function space(...args: any[]): any; + + export type WidthValue = number | string; + export type ResponsiveWidthValue = ResponsiveValue; + + export interface WidthProps { + width?: ResponsiveWidthValue; + } + + export function width(...args: any[]): any; + + export type FontSizeValue = number | string; + export type ResponsiveFontSizeValue = ResponsiveValue; + + export interface FontSizeProps { + fontSize?: ResponsiveFontSizeValue; + } + + export function fontSize(...args: any[]): any; + + export type ColorValue = string; + export type ResponsiveColorValue = ResponsiveValue; + + export interface ColorProps { + color?: ResponsiveColorValue; + bg?: ResponsiveColorValue; + } + + export function color(...args: any[]): any; + + // + // Extras + // + + export type TextAlignValue = + | 'left' + | 'right' + | 'center' + | 'justify' + | 'justify-all' + | 'start' + | 'end' + | 'match-parent'; + export type ResponsiveTextAlignValue = ResponsiveValue; + + export interface TextAlignProps { + align?: ResponsiveTextAlignValue; + } + + export function textAlign(...args: any[]): any; + + export type FontWeightValue = + | 'normal' + | 'bold' + | 'lighter' + | 'bolder' + | 100 + | 200 + | 300 + | 400 + | 500 + | 600 + | 700 + | 800 + | 900; + + export interface FontWeightProps { + fontWeight?: FontWeightValue; + } + + export function fontWeight(...args: any[]): any; + + export type AlignItemsValue = + | 'normal' + | 'stretch' + | 'center' + | 'start' + | 'end' + | 'flex-start' + | 'flex-end' + | 'self-start' + | 'self-end' + | 'left' + | 'right' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'safe center' + | 'unsafe center'; + export type ResponsiveAlignItemsValue = ResponsiveValue; + + export interface AlignItemsProps { + align?: ResponsiveAlignItemsValue; + } + + export function alignItems(...args: any[]): any; + + export type JustifyContentValue = + | 'center' + | 'start' + | 'end' + | 'flex-start' + | 'flex-end' + | 'left' + | 'right' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'space-between' + | 'space-around' + | 'space-evenly' + | 'stretch' + | 'safe center' + | 'unsafe center'; + export type ResponsiveJustifyContentValue = ResponsiveValue< + JustifyContentValue + >; + + export interface JustifyContentProps { + justify?: ResponsiveJustifyContentValue; + } + + export function justifyContent(...args: any[]): any; + + export interface FlexWrapProps { + wrap?: boolean; + } + + export function flexWrap(...args: any[]): any; + + export type FlexDirectionValue = + | 'row' + | 'row-reverse' + | 'column' + | 'column-reverse'; + export type ResponsiveFlexDirectionValue = ResponsiveValue< + FlexDirectionValue + >; + + export interface FlexDirectionProps { + flexDirection?: ResponsiveFlexDirectionValue; + } + + export function flexDirection(...args: any[]): any; + + export type FlexValue = string; + export type ResponsiveFlexValue = ResponsiveValue; + + export interface FlexProps { + flex?: ResponsiveFlexValue; + } + + export function flex(...args: any[]): any; + + export type AlignSelfValue = + | 'auto' + | 'normal' + | 'center' + | 'start' + | 'end' + | 'self-start' + | 'self-end' + | 'flex-start' + | 'flex-end' + | 'left' + | 'right' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'stretch' + | 'safe center' + | 'unsafe center'; + export type ResponsiveAlignSelfValue = ResponsiveValue; + + export interface AlignSelfProps { + alignSelf?: ResponsiveAlignSelfValue; + } + + export function alignSelf(...args: any[]): any; + + export type BorderRadiusValue = number; + + export interface BorderRadiusProps { + borderRadius?: BorderRadiusValue; + } + + export function borderRadius(...args: any[]): any; + + export type BorderColorValue = string; + + export interface BorderColorProps { + borderColor?: BorderColorValue; + } + + export function borderColor(...args: any[]): any; + + export type BorderWidthValue = number; + + export interface BorderWidthProps { + borderWidth?: BorderWidthValue; + borderTop?: boolean; + borderRight?: boolean; + borderBottom?: boolean; + borderLeft?: boolean; + } + + export function borderWidth(...args: any[]): any; + + export type BoxShadowValue = number; + + export interface BoxShadowProps { + boxShadow?: BoxShadowValue; + } + + export function boxShadow(...args: any[]): any; + + export type PseudoStyleValue = { + color?: string; + backgroundColor?: string; + borderColor?: string; + boxShadow?: number; + }; + + export type HoverValue = PseudoStyleValue; + + export interface HoverProps { + hover?: HoverValue; + } + + export function hover(...args: any[]): any; + + export type FocusValue = PseudoStyleValue; + + export interface FocusProps { + focus?: FocusValue; + } + + export function focus(...args: any[]): any; + + export type ActiveValue = PseudoStyleValue; + + export interface ActiveProps { + active?: ActiveValue; + } + + export function active(...args: any[]): any; + + export type DisabledValue = PseudoStyleValue; + + export interface DisabledProps { + disabledStyle?: DisabledValue; + } + + export function disabled(...args: any[]): any; + + // + // Utilities + // + + export function theme(keys: string): any; + + export function cleanElement(component: any): any; + + export function removeProps(props: any): any; + + // + // Low-level style functions + // + + export interface LowLevelStyleFunctionArguments { + prop: string; + cssProperty: string; + key?: string; + numberToPx?: boolean; + } + + export function style(args: LowLevelStyleFunctionArguments): any; + + export function responsiveStyle(args: LowLevelStyleFunctionArguments): any; + + export function pseudoStyle(args: LowLevelStyleFunctionArguments): any; +} + +declare module 'styled-system' { + export = StyledSystem; +} From d1259f26c5636322d433b42190043d7f2516b2f8 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 16 Mar 2018 21:38:12 +0100 Subject: [PATCH 4/7] Add initial typography components --- frontend/.storybook/config.js | 1 + frontend/package.json | 1 + frontend/src/components/typography/index.tsx | 65 +++++++++++++++++++ frontend/src/stories/typography/index.tsx | 29 +++++++++ frontend/src/theme/index.ts | 25 ++++--- frontend/src/typings/recompose/index.d.ts | 2 + frontend/src/typings/styled-system/index.d.ts | 6 ++ frontend/yarn.lock | 17 ++++- 8 files changed, 135 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/typography/index.tsx create mode 100644 frontend/src/stories/typography/index.tsx create mode 100644 frontend/src/typings/recompose/index.d.ts diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js index e4bf040b6f..1f43de45e6 100644 --- a/frontend/.storybook/config.js +++ b/frontend/.storybook/config.js @@ -9,6 +9,7 @@ function loadStories() { require('../src/stories/navbar/index.tsx'); require('../src/stories/logo/index.tsx'); require('../src/stories/box/index.tsx'); + require('../src/stories/typography/index.tsx'); } add(wrapper()); diff --git a/frontend/package.json b/frontend/package.json index 665a259e9c..ce07ac1c18 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "react-dom": "^16.2.0", "react-emotion": "^9.0.2", "react-scripts-ts": "2.13.0", + "recompose": "^0.26.0", "styled-system": "^2.1.1" }, "scripts": { diff --git a/frontend/src/components/typography/index.tsx b/frontend/src/components/typography/index.tsx new file mode 100644 index 0000000000..8da0fda218 --- /dev/null +++ b/frontend/src/components/typography/index.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { withTheme } from 'emotion-theming'; +import withProps from 'recompose/withProps'; + +import { Theme } from '../../theme'; + +import { + space, + fontSize, + color, + lineHeight, + LineHeightProps, + SpaceProps, + FontSizeProps, + ColorProps, + BoxShadowProps +} from 'styled-system'; + +import styled from '../../styled'; + +type TypographyProps = SpaceProps & + FontSizeProps & + LineHeightProps & + ColorProps & + BoxShadowProps; + +const BaseTypography = styled('h1')` + ${space} + ${fontSize} + ${lineHeight} + ${color} +`; + +interface TitleProps { + level: 1 | 2 | 3 | 4 | 5 | 6; + children: React.ReactNode; +} + +// TODO spacing etc +const BaseTitle = ({ + theme, + level, + children +}: TitleProps & { theme: Theme }) => { + // ugly, but works :) + const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements; + const name = `title${level}`; + + const X = BaseTypography.withComponent(tagName); + + return ( + + {children} + + ); +}; + +export const Title = withTheme(BaseTitle); + +const BaseParagraph = withProps({ + fontSize: 'body', + lineHeight: 'body' +})(BaseTypography.withComponent('p')); + +export const Paragraph = withTheme<{}, Theme>(BaseParagraph); diff --git a/frontend/src/stories/typography/index.tsx b/frontend/src/stories/typography/index.tsx new file mode 100644 index 0000000000..e318be0e06 --- /dev/null +++ b/frontend/src/stories/typography/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Title, Paragraph } from '../../components/typography'; + +storiesOf('Typography', module) + .add('titles', () => ( +
+ Title 1 + Title 2 + Title 3 +
+ )) + .add('paragraphs', () => ( +
+ + Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima + dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia + benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum + quis impera fabula lacuna lorem medius ora. + + + Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima + dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia + benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum + quis impera fabula lacuna lorem medius ora. + +
+ )); diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts index 03671b3bd8..253b360aab 100644 --- a/frontend/src/theme/index.ts +++ b/frontend/src/theme/index.ts @@ -1,21 +1,28 @@ const breakpoints = ['40em', '52em', '64em']; const colors = { - text: '#024', - blue: '#EFEFEF', + text: '#333333', + blue: '#0c67ff', - dark: { - blue: '#058' - }, - - gray: ['#333', '#666', '#999', '#ccc', '#eee', '#f6f6f6'] + grey: '#f4f4f4', + white: '#ffffff' }; const space = [0, 4, 8, 16, 32, 64, 128, 256, 512]; -const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 96, 128]; +const fontSizes = { + title1: 45.234335104, + title2: 31.990336, + title3: 22.624, + body: 16 +}; -const lineHeights = [1, 1.125, 1.25, 1.5]; +const lineHeights = { + title1: 1.1, + title2: 1.2, + title3: 1.3, + body: 1.4 +}; const fontWeights = { normal: 500, diff --git a/frontend/src/typings/recompose/index.d.ts b/frontend/src/typings/recompose/index.d.ts new file mode 100644 index 0000000000..6d98e5fec2 --- /dev/null +++ b/frontend/src/typings/recompose/index.d.ts @@ -0,0 +1,2 @@ +declare module 'recompose'; +declare module 'recompose/withProps'; diff --git a/frontend/src/typings/styled-system/index.d.ts b/frontend/src/typings/styled-system/index.d.ts index 1b32f5d6b5..b135598faa 100644 --- a/frontend/src/typings/styled-system/index.d.ts +++ b/frontend/src/typings/styled-system/index.d.ts @@ -106,6 +106,12 @@ declare namespace StyledSystem { export function fontWeight(...args: any[]): any; + export interface LineHeightProps { + lineHeight?: number | string; + } + + export function lineHeight(...args: any[]): any; + export type AlignItemsValue = | 'normal' | 'stretch' diff --git a/frontend/yarn.lock b/frontend/yarn.lock index df7e58b3e5..8f4f830654 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2150,6 +2150,10 @@ chalk@~0.4.0: has-color "~0.1.0" strip-ansi "~0.1.0" +change-emitter@^0.1.2: + version "0.1.6" + resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" + chardet@^0.4.0: version "0.4.2" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2" @@ -3509,7 +3513,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" dependencies: @@ -7203,6 +7207,15 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" +recompose@^0.26.0: + version "0.26.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30" + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + symbol-observable "^1.0.4" + recursive-readdir@2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99" @@ -8234,7 +8247,7 @@ sw-toolbox@^3.4.0: path-to-regexp "^1.0.1" serviceworker-cache-polyfill "^4.0.0" -symbol-observable@^1.0.3: +symbol-observable@^1.0.3, symbol-observable@^1.0.4: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" From 84838a70f5b1d441132d2d51bc4fb0180b1a0fd8 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 16 Mar 2018 21:49:06 +0100 Subject: [PATCH 5/7] Use reset css instead of modern normalize --- frontend/.storybook/config.js | 2 +- frontend/package.json | 2 +- frontend/src/index.tsx | 2 +- frontend/yarn.lock | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js index 1f43de45e6..72f4f170e4 100644 --- a/frontend/.storybook/config.js +++ b/frontend/.storybook/config.js @@ -1,6 +1,6 @@ import { configure, addDecorator as add } from '@storybook/react'; -import 'modern-normalize'; +import 'reset-css'; import { wrapper } from './wrapper'; diff --git a/frontend/package.json b/frontend/package.json index ce07ac1c18..6ba76941ee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,12 +5,12 @@ "dependencies": { "emotion": "^9.0.2", "emotion-theming": "^9.0.0", - "modern-normalize": "^0.4.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-emotion": "^9.0.2", "react-scripts-ts": "2.13.0", "recompose": "^0.26.0", + "reset-css": "^3.0.0", "styled-system": "^2.1.1" }, "scripts": { diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index c796b7316c..a3356af9a2 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -6,7 +6,7 @@ import { ThemeProvider } from 'emotion-theming'; import { theme } from './theme'; -import 'modern-normalize'; +import 'reset-css'; ReactDOM.render( diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8f4f830654..bbf5176e6a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5733,10 +5733,6 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd dependencies: minimist "0.0.8" -modern-normalize@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.4.0.tgz#1ccbc52861e1bce258144d28e890dc709b120ed2" - move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -7457,6 +7453,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +reset-css@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-3.0.0.tgz#9b421d34fefc6e5d5b915ee7bfd72b1bc19cfbb0" + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" From 402b2ed265e1dfee5e50fb02c85fe5c1b5591f22 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 16 Mar 2018 23:01:31 +0100 Subject: [PATCH 6/7] Add titles font --- frontend/.storybook/preview-head.html | 1 + frontend/public/index.html | 2 ++ frontend/src/components/typography/index.tsx | 6 +++++- frontend/src/theme/index.ts | 5 +++++ frontend/src/typings/styled-system/index.d.ts | 6 ++++++ 5 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 frontend/.storybook/preview-head.html diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html new file mode 100644 index 0000000000..1744f2945e --- /dev/null +++ b/frontend/.storybook/preview-head.html @@ -0,0 +1 @@ + diff --git a/frontend/public/index.html b/frontend/public/index.html index e8128ed074..d31c6e7287 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -6,6 +6,8 @@ + +