Merge pull request #237 from graphcool/refactor/to-sc

Work In Progress: Refactor to use Styled Components

Author: timsuchanek

packages/graphql-playground/.babelrc

@@ -6,6 +6,7 @@
   ],
   "plugins": [
     "styled-jsx-postcss/babel",
-    "babel-plugin-styled-components"
+    "babel-plugin-styled-components",
+    "babel-plugin-polished"
   ]
 }

packages/graphql-playground/package.json

@@ -46,6 +46,7 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-loader": "^6.2.10",
+    "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.3.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-es2016": "^6.16.0",
@@ -71,6 +72,7 @@
     "lint-staged": "^4.0.2",
     "node-noop": "^1.0.0",
     "object-assign": "4.1.0",
+    "polished": "^1.9.0",
     "postcss-cssnext": "^2.9.0",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-import": "^9.1.0",
@@ -95,6 +97,7 @@
     "tslint-graphcool-frontend": "^0.0.3",
     "tslint-loader": "^3.5.3",
     "typescript": "^2.6.1",
+    "typescript-styled-plugin": "^0.2.0",
     "url-loader": "0.5.7",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.3",
@@ -139,6 +142,7 @@
     "seamless-immutable": "^7.0.1",
     "styled-components": "^2.2.3",
     "styled-jsx-postcss": "git+https://github.com/timsuchanek/styled-jsx-postcss#build3",
+    "styled-theming": "^2.2.0",
     "subscriptions-transport-ws": "^0.8.1"
   },
   "lint-staged": {

packages/graphql-playground/src/components/CodeGenerationPopup/CodeGenerationPopup.tsx

@@ -6,7 +6,7 @@ import CodeGenerationPopupClientChooser from './CodeGenerationPopupClientChooser
 import { modalStyle } from '../../constants'
 import * as Modal from 'react-modal'
 import { Environment, GraphQLClient } from '../../types'
-import { withTheme, ThemeInterface } from '../Theme'
+import { withTheme, LocalThemeInterface } from '../Theme'
 
 export interface Props {
   query: string
@@ -21,7 +21,7 @@ export interface State {
 }
 
 class CodeGenerationPopup extends React.Component<
-  Props & ThemeInterface,
+  Props & LocalThemeInterface,
   State
 > {
   constructor(props) {

packages/graphql-playground/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx

@@ -3,7 +3,7 @@ import * as cx from 'classnames'
 import { $p } from 'graphcool-styles'
 import { CodeGenerator } from './codeGeneration'
 import { GraphQLClient, Environment } from '../../types'
-import { withTheme, ThemeInterface } from '../Theme'
+import { withTheme, LocalThemeInterface } from '../Theme'
 // tslint:disable-next-line
 const Codemirror: any = require('react-codemirror')
 
@@ -15,7 +15,7 @@ export interface Props {
 }
 
 class CodeGenerationPopupCode extends React.Component<
-  Props & ThemeInterface,
+  Props & LocalThemeInterface,
   {}
 > {
   componentWillMount() {

packages/graphql-playground/src/components/HistoryPopup.tsx

@@ -6,7 +6,7 @@ import HistoryItems from './HistoryPopup/HistoryItems'
 import GraphQLEditor from './Playground/GraphQLEditor'
 import { $v, Icon } from 'graphcool-styles'
 import { modalStyle } from '../constants'
-import { withTheme, ThemeInterface } from './Theme'
+import { withTheme, LocalThemeInterface } from './Theme'
 import * as cn from 'classnames'
 
 export interface Props {
@@ -26,7 +26,7 @@ export interface State {
   searchTerm: string
 }
 
-class HistoryPopup extends React.Component<Props & ThemeInterface, State> {
+class HistoryPopup extends React.Component<Props & LocalThemeInterface, State> {
   constructor(props) {
     super(props)
     this.state = {

packages/graphql-playground/src/components/Permissions/NewPermissionTab.tsx

@@ -6,9 +6,9 @@ import * as cn from 'classnames'
 import { PermissionSession, ServiceInformation } from '../../types'
 import TypeChooser from './TypeChooser'
 import { Button } from '../Button'
-import { ThemeInterface } from '../Theme'
+import { LocalThemeInterface } from '../Theme'
 
-export interface Props extends ThemeInterface {
+export interface Props extends LocalThemeInterface {
   serviceInformation: ServiceInformation
   onNewPermissionTab: (permissionTab: PermissionSession) => void
 }

packages/graphql-playground/src/components/Playground.tsx

@@ -41,7 +41,7 @@ import { isEqual, mapValues } from 'lodash'
 import Share from './Share'
 import NewPermissionTab from './Permissions/NewPermissionTab'
 import { serviceInformationQuery } from './constants'
-import { ThemeProvider, theme as styledTheme } from '../styled'
+import styled, { ThemeProvider, theme as styledTheme } from '../styled'
 
 export type Theme = 'dark' | 'light'
 export type Viewer = 'ADMIN' | 'EVERYONE' | 'USER'
@@ -590,44 +590,9 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       : this.getSimpleEndpoint()
     const isGraphcoolUrl = this.isGraphcoolUrl(selectedEndpointUrl)
     return (
-      <ThemeProvider theme={styledTheme}>
+      <ThemeProvider theme={{ ...styledTheme, mode: theme }}>
         <OldThemeProvider theme={this.state.theme}>
-          <div className={cx('playground')}>
-            <style jsx={true}>{`
-              .playground {
-                @p: .h100, .flex, .flexColumn;
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-                font-family: 'Open Sans', sans-serif;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                color: rgba(0, 0, 0, 0.8);
-                line-height: 1.5;
-                letter-spacing: 0.53px;
-                margin-right: -1px !important;
-              }
-
-              .blur {
-                filter: blur(5px);
-              }
-
-              .graphiqls-container {
-                @p: .relative, .overflowHidden;
-                height: calc(100vh - 57px);
-              }
-
-              .graphiql-wrapper {
-                @p: .w100, .h100, .relative;
-              }
-
-              .playground :global(a:active),
-              .playground :global(a:focus),
-              .playground :global(button:focus),
-              .playground :global(input:focus) {
-                outline: none;
-              }
-            `}</style>
+          <PlaygroundWrapper className="playground">
             <TabBar
               sessions={sessions}
               selectedSessionIndex={selectedSessionIndex}
@@ -640,13 +605,13 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
               tether={this.props.tether}
               isApp={this.props.isApp}
             />
-            <div
+            <GraphiqlsContainer
               className={cx('graphiqls-container', {
                 'docs-graphiql': theme === 'light',
               })}
             >
               {sessions.map((session, index) => (
-                <div
+                <GraphiqlWrapper
                   key={session.id}
                   className={cx('graphiql-wrapper', {
                     active: index === selectedSessionIndex,
@@ -696,9 +661,9 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
                     serviceInformation={this.state.serviceInformation}
                     tracingSupported={Boolean(this.state.tracingSupported)}
                   />
-                </div>
+                </GraphiqlWrapper>
               ))}
-            </div>
+            </GraphiqlsContainer>
             <Settings
               onToggleTheme={this.toggleTheme}
               localTheme={this.state.theme}
@@ -753,7 +718,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
               this.renderUserPopup()}
             {this.state.codeGenerationPopupOpen &&
               this.renderCodeGenerationPopup()}
-          </div>
+          </PlaygroundWrapper>
         </OldThemeProvider>
       </ThemeProvider>
     )
@@ -1685,3 +1650,40 @@ function isSharingAuthorization(sharableSessions: Session[]): boolean {
 
   return false
 }
+
+const PlaygroundWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  margin-right: -1px !important;
+
+  line-height: 1.5;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: 0.53px;
+  color: rgba(0, 0, 0, 0.8);
+
+  a:active,
+  a:focus,
+  button:focus,
+  input:focus {
+    outline: none;
+  }
+`
+
+const GraphiqlsContainer = styled.div`
+  height: calc(100vh - 57px);
+  position: relative;
+  overflow: hidden;
+`
+
+const GraphiqlWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+`

packages/graphql-playground/src/components/Playground/ExecuteButton.tsx

@@ -8,7 +8,7 @@
 
 import * as React from 'react'
 import * as cx from 'classnames'
-import { withTheme, ThemeInterface } from '../Theme'
+import { withTheme, LocalThemeInterface } from '../Theme'
 import * as cn from 'classnames'
 import ExecuteButtonOperation from './ExecuteButtonOperation'
 
@@ -32,7 +32,10 @@ let firstTime = true
  * What a nice round shiny button. Shows a drop-down when there are multiple
  * queries to run.
  */
-class ExecuteButton extends React.Component<Props & ThemeInterface, State> {
+class ExecuteButton extends React.Component<
+  Props & LocalThemeInterface,
+  State
+> {
   constructor(props) {
     super(props)
 

packages/graphql-playground/src/components/Playground/TabBar.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import * as cx from 'classnames'
 import { Session } from '../../types'
 import { Icon } from 'graphcool-styles'
-import { withTheme, OptionalThemeInterface } from '../Theme'
+import { withTheme, OptionalLocalThemeInterface } from '../Theme'
 import Tab from './Tab'
 
-export interface Props extends OptionalThemeInterface {
+export interface Props extends OptionalLocalThemeInterface {
   sessions: Session[]
   selectedSessionIndex: number
   onNewSession: any

packages/graphql-playground/src/components/Popup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as Modal from 'react-modal'
+import styled from '../styled'
 
 export interface Props {
   onRequestClose: () => void
@@ -53,25 +54,10 @@ export default class Popup extends React.Component<Props, {}> {
         style={modalStyle}
         contentLabel="Popup"
       >
-        <style jsx={true}>{`
-          .modal {
-            @p: .br2;
-          }
-          .close {
-            @p: .absolute, .pointer, .pa10;
-            top: -25px;
-            right: -25px;
-            transform: translate(100%, -100%);
-          }
-          .close.inside {
-            @p: .top0, .right0, .pa25;
-            transform: none;
-          }
-        `}</style>
-        <div className="modal">
-          {this.props.children}
-        </div>
+        <ContentWrapper>{this.props.children}</ContentWrapper>
       </Modal>
     )
   }
 }
+
+const ContentWrapper = styled.div``