WIP: Added theming support with styled components

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

components/FileSystem/index.tsx

@@ -1,6 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import Modal from 'react-modal'
+import styled, { ThemeContext } from 'styled-components'
+import { Theme } from '../../utils/types'
 import { slugify } from '../../utils/helpers'
+import { SecondaryButton, PrimaryButton } from '../../utils/styles'
 
 const customStyle: ReactModal.Styles = {
   overlay: {
@@ -20,6 +23,7 @@ const customStyle: ReactModal.Styles = {
 }
 
 const FileSystem = ({ files, activeFile, setActive, setFiles }) => {
+  const theme: Theme = useContext(ThemeContext)
   const [isModalOpen, setModalStatus] = useState(false)
   const [fileName, setFileName] = useState('')
 
@@ -40,32 +44,28 @@ const FileSystem = ({ files, activeFile, setActive, setFiles }) => {
 
   return (
     <>
-      <section className="files_wrapper">
-        <img src="./teleport-logo-dark.svg" className="logo" />
-        <button className="secondary_button" onClick={() => setModalStatus(true)}>
-          + Add Page
-        </button>
-        <hr />
+      <FilesWrapper {...theme}>
+        <SecondaryButton {...theme} onClick={() => setModalStatus(true)}>
+          Add Page
+        </SecondaryButton>
         <Modal isOpen={isModalOpen} style={customStyle} ariaHideApp={false}>
           <section>
-            <input
+            <FileNameWrapper
               name="File Name"
               value={fileName}
               onChange={(e) => setFileName(e.target.value)}
-              className="filename_wrapper"
               placeholder="Please enter file name"
             />
-            <button className="primary_button" onClick={handleCreateFile}>
+            <PrimaryButton {...theme} onClick={handleCreateFile}>
               Create
-            </button>
+            </PrimaryButton>
           </section>
         </Modal>
         {files &&
           Object.keys(files).length > 0 &&
           Object.values(files).map(({ name, id }, index) => {
             return (
-              <div
-                className="file_icon"
+              <FileIcon
                 key={`${name}-${index}`}
                 onClick={() => setActive(id)}
                 style={{
@@ -74,43 +74,36 @@ const FileSystem = ({ files, activeFile, setActive, setFiles }) => {
                 }}
               >
                 {name}
-              </div>
+              </FileIcon>
             )
           })}
-      </section>
-
-      <style jsx>{`
-        .filename_wrapper {
-          font-size: 14px;
-          padding: 5px 15px;
-        }
-
-        .file_icon {
-          font-size: 14px;
-          text-align: left;
-          text-transform: capitalize;
-          margin-bottom: 10px;
-          padding: 5px 10px;
-          border-radius: 4px;
-          border: 1px solid #ddd;
-          cursor: pointer;
-        }
-
-        .files_wrapper {
-          color: #fff;
-          background-color: #2f3031;
-          padding: 0px 15px;
-          border-right: 0.1px solid #ddd;
-        }
-
-        .logo {
-          width: 125px;
-          height: auto;
-          margin: 15px 0px;
-        }
-      `}</style>
+      </FilesWrapper>
     </>
   )
 }
 
 export default FileSystem
+
+const FilesWrapper = styled.section(
+  (props: Theme) => `
+  width: 350px;
+  background-color: ${props.primaryBackground};
+  padding: 0px 15px;
+`
+)
+
+const FileNameWrapper = styled.input`
+  font-size: 14px;
+  padding: 5px 15px;
+`
+
+const FileIcon = styled.div`
+  font-size: 14px;
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+`

components/Header/index.tsx

@@ -1,14 +1,16 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { createProjectPacker } from '@teleporthq/teleport-project-packer'
 import {
   createReactProjectGenerator,
   ReactTemplate,
 } from '@teleporthq/teleport-project-generator-react'
 import { createCodesandboxPublisher } from '@teleporthq/teleport-publisher-codesandbox'
 import { ProjectUIDL } from '@teleporthq/teleport-types'
+import styled, { ThemeContext } from 'styled-components'
 import { exportJson } from '../../utils/helpers'
-import { Files, BlogMeta, File } from '../../utils/types'
+import { Files, BlogMeta, File, Theme } from '../../utils/types'
 import { generateProjectUIDL } from '../../utils/uidl-utils'
+import { SecondaryButton } from '../../utils/styles'
 
 interface HeaderProps {
   files: Files
@@ -17,6 +19,7 @@ interface HeaderProps {
 }
 
 const Header = ({ files, meta, activeFile }: HeaderProps) => {
+  const theme: Theme = useContext(ThemeContext)
   const { name } = activeFile || { name: `` }
   const downloadProjectUIDL = () => {
     const elm = document.getElementById('download_uidl')
@@ -41,33 +44,27 @@ const Header = ({ files, meta, activeFile }: HeaderProps) => {
 
   return (
     <>
-      <section className="header_wrapper">
-        <div className="open_file_name">{name}</div>
-        <a id="download_uidl" className="secondary_button" onClick={downloadProjectUIDL}>
-          Download UIDL
-        </a>
-        <button className="secondary_button" onClick={exportToSandbox}>
+      <HeaderWrapper className="header_wrapper">
+        <FileName className="open_file_name">{name}</FileName>
+        <SecondaryButton {...theme} onClick={exportToSandbox}>
           Sandbox
-        </button>
-      </section>
-      <style jsx>
-        {`
-          .header_wrapper {
-            display: flex;
-            justify-content: space-around;
-            background-color: #2f3031;
-          }
-
-          .open_file_name {
-            color: #fff;
-            padding-top: 15px;
-            padding-left: 25px;
-            height: 35px;
-          }
-        `}
-      </style>
+        </SecondaryButton>
+      </HeaderWrapper>
     </>
   )
 }
 
 export default Header
+
+const HeaderWrapper = styled.section`
+  display: flex;
+  justify-content: space-around;
+  background-color: #2f3031;
+`
+
+const FileName = styled.div`
+  color: #fff;
+  padding-top: 15px;
+  padding-left: 25px;
+  height: 35px;
+`

package.json

@@ -40,12 +40,15 @@
     "react-ace": "^8.0.0",
     "react-dom": "^16.12.0",
     "react-modal": "^3.11.1",
-    "rollup": "^1.31.0"
+    "rollup": "^1.31.0",
+    "styled-components": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^13.1.8",
     "@types/react": "^16.9.17",
     "@types/react-modal": "^3.10.4",
+    "@types/styled-components": "^4.4.2",
+    "babel-plugin-styled-components": "^1.10.7",
     "husky": "^4.2.1",
     "prettier": "^1.19.1",
     "tslint": "^6.0.0",

pages/_document.tsx

@@ -1,15 +1,18 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
 
 class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const sheet = new ServerStyleSheet()
+    const page = renderPage((App) => (props) => sheet.collectStyles(<App {...props} />))
+    const styleTags = sheet.getStyleElement()
+    return { ...page, styleTags }
+  }
+
   render() {
     return (
       <Html lang="en">
-        <Head>
-          <link
-            href="https://fonts.googleapis.com/css?family=Lato&display=swap"
-            rel="stylesheet"
-          />
-        </Head>
+        <Head>{this.props.styleTags}</Head>
         <body>
           <Main />
           <NextScript />

pages/blog_editor.tsx

@@ -1,15 +1,14 @@
-import { ProjectUIDL } from '@teleporthq/teleport-types'
 import React, { useState, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 import firebase from 'firebase'
+import styled from 'styled-components'
 
-import Header from '../components/Header'
 import FileSystem from '../components/FileSystem'
 import { File, Files, BlogMeta } from '../utils/types'
-import { generateProjectUIDLTemplate } from '../utils/project'
 import preview from '../utils/bundler'
 import fb from '../firebase'
 
+const Header = dynamic(import('../components/Header'), { ssr: false })
 const CodeEditor = dynamic(import('../components/CodeEditor'), { ssr: false })
 
 const BlogEditor = () => {
@@ -115,17 +114,17 @@ const BlogEditor = () => {
 
   return (
     <>
-      <header style={{ margin: 10 }}>
-        {user ? (
+      {/* <header style={{ margin: 10 }}> */}
+      {/* {user ? (
           <span>
             {fb.app.auth().currentUser.displayName} ({fb.app.auth().currentUser.email}){' '}
             <button onClick={signOut}>Log out</button>
           </span>
         ) : (
           <button onClick={logIn}>Log In</button>
-        )}
-      </header>
-      <section className="grid_wrapper">
+        )} */}
+      {/* </header> */}
+      <GridWrapper>
         <FileSystem
           files={files}
           activeFile={getActiveFile()}
@@ -140,35 +139,34 @@ const BlogEditor = () => {
           />
         </section>
         <section>
-          <div className="markdown_render_heading">Preview</div>
-          <div id="output" className="markdown_renderer"></div>
+          <MarkdownRendererHeading>Preview</MarkdownRendererHeading>
+          <MarkdownRenderer id="output" className="markdown_renderer" />
         </section>
-      </section>
-      <style jsx>{`
-        .grid_wrapper {
-          height: 100%;
-          display: grid;
-          grid-template-columns: 150px 50% 38%;
-        }
-
-        .markdown_renderer {
-          font-family: 'Roboto', sans-serif;
-          color: #2c3e50;
-          -webkit-font-smoothing: antialiased;
-          font-size: 16px;
-          padding: 5px;
-        }
-
-        .markdown_render_heading {
-          margin: 10px;
-          padding-bottom: 5px;
-          text-align: left;
-          font-size: 20px;
-          border-bottom: 1px dotted #000;
-        }
-      `}</style>
+      </GridWrapper>
     </>
   )
 }
 
 export default BlogEditor
+
+const GridWrapper = styled.section`
+  height: 100%;
+  display: grid;
+  grid-template-columns: 250px 50% 38%;
+`
+
+const MarkdownRenderer = styled.div`
+  font-family: 'Roboto', sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  padding: 5px;
+`
+
+const MarkdownRendererHeading = styled.div`
+  margin: 10px;
+  padding-bottom: 5px;
+  text-align: left;
+  font-size: 20px;
+  border-bottom: 1px dotted #000;
+`