Merge pull request #1 from bc-chaz/step-1-app-foundation

feat(common): add app foundation

Author: bc-chaz

.babelrc

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

README.md

@@ -0,0 +1,13 @@
+# NextJS Sample App
+
+This demo includes all of the files necessary to get started with a basic, hello world app. This app was built using NextJS, BigDesign, Typescript, and React.
+
+## App Installation
+
+To get the app running locally, follow these instructions:
+
+1. [Use Node 10+](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#checking-your-version-of-npm-and-node-js)
+2. Install npm packages
+    - `npm install`
+3. Start your dev environment
+    - `npm run dev`

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "bc-nextjs-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@bigcommerce/big-design": "^0.27.0",
+    "next": "^10.0.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "typescript": "^4.1.3"
+  }
+}

package.json

@@ -0,0 +1,11 @@
+import { GlobalStyles } from '@bigcommerce/big-design';
+import type { AppProps } from 'next/app';
+
+const MyApp = ({ Component, pageProps }: AppProps) => (
+    <>
+        <GlobalStyles />
+        <Component {...pageProps} />
+    </>
+);
+
+export default MyApp;

pages/_app.tsx

@@ -0,0 +1,32 @@
+// Needed for proper operation of styled components/ BigDesign
+// https://styled-components.com/docs/advanced#nextjs
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

pages/_document.tsx

@@ -0,0 +1,9 @@
+import { Panel, Text } from '@bigcommerce/big-design';
+
+const Index = () => (
+    <Panel header="Homepage" margin="xxLarge">
+        <Text>Hello world</Text>
+    </Panel>
+);
+
+export default Index;

pages/index.tsx

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}