add layout and theme components

mrisoli · mrisoli · commit 3443127be88d · 2019-01-26T23:52:53.000+01:00
diff --git a/.babelrc b/.babelrc
@@ -11,7 +11,7 @@
       "presets": [
         "next/babel",
         "@zeit/next-typescript/babel"
-      ]
+      ],
       "plugins": [["styled-components", { "ssr": true }]]
     },
     "test": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,17 @@
+import App, { Container } from 'next/app'
+import * as React from 'react'
+
+import { Layout } from "../src/components/Layout"
+
+export default class MyApp extends App {
+  public render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </Container>
+    )
+  }
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head'
+import * as React from "react"
+
+import { LayoutProps } from "./types"
+
+import { ThemeProvider } from "../theme/styled-components"
+import { defaultTheme } from "../theme/theme"
+
+export const Layout: React.SFC<LayoutProps> = ({
+  children,
+  title = "Next.js Boilerplate",
+  theme = defaultTheme
+}) => (
+  <ThemeProvider theme={theme}>
+    <React.Fragment>
+    <Head>
+      <title>{title}</title>
+      <meta charSet='utf-8' />
+      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+    </Head>
+
+    {children}
+    </React.Fragment>
+
+  </ThemeProvider>
+);
diff --git a/src/components/types.ts b/src/components/types.ts
@@ -0,0 +1,6 @@
+import { IThemeInterface } from "../theme/types"
+
+export type LayoutProps = {
+  title?: string;
+  theme?: IThemeInterface;
+}
diff --git a/src/theme/styled-components.ts b/src/theme/styled-components.ts
@@ -0,0 +1,15 @@
+import * as styledComponents from "styled-components";
+import { ThemedStyledComponentsModule } from "styled-components";
+
+import { IThemeInterface } from "./types";
+
+const {
+    default: styled,
+    css,
+    createGlobalStyle,
+    keyframes,
+    ThemeProvider
+} = styledComponents as ThemedStyledComponentsModule<IThemeInterface>;
+
+export { css, createGlobalStyle, keyframes, ThemeProvider };
+export default styled;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -0,0 +1,5 @@
+import { IThemeInterface } from "./types";
+
+export const defaultTheme: IThemeInterface = {
+  primaryColor: "#000"
+};
diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -0,0 +1,3 @@
+export interface IThemeInterface {
+  primaryColor: string;
+}
diff --git a/tslint.json b/tslint.json
@@ -2,6 +2,8 @@
   "defaultSeverity": "error",
   "extends": ["tslint:recommended", "tslint-config-prettier"],
   "jsRules": {},
-  "rules": {},
+  "rules": {
+    "interface-over-type-literal": false
+  },
   "rulesDirectory": []
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface IThemeInterface {`
	`2`	`+ primaryColor: string;`
	`3`	`+}`