feat(app): setup linting, tailwind, and chakra in next app

+ prettier setup

app/.eslintignore

@@ -0,0 +1,7 @@
+/*.js
+/*.ts
+/test/*
+/dist/*
+/coverage/*
+/node_modules/*
+/__mocks__/**/*.js

app/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["next", "prettier"]
+}

app/.prettierignore

@@ -0,0 +1,4 @@
+/dist/*
+/build/*
+/coverage/*
+

app/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // ...require("../.prettierrc.js"),
+  singleQuote: false,
+};

app/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

app/next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+};

app/package.json

@@ -1,21 +1,37 @@
 {
+  "name": "@dpopp/app",
   "private": true,
+  "version": "0.0.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "clean": "rimraf node_modules",
+    "lint": "next lint && prettier --check .",
+    "lint:fix": "next lint && prettier --write .",
+    "test": "jest"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "framer-motion": "^6.3.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^12.1.5",
     "@types/node": "17.0.4",
     "@types/react": "17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "^10.4.0",
+    "eslint": "^8.13.0",
+    "eslint-config-next": "^12.1.5",
+    "eslint-config-prettier": "^8.5.0",
     "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.1",
     "tailwindcss": "^3.0.7",
     "typescript": "4.5.4"

app/pages/_app.tsx

@@ -1,8 +1,19 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { ChakraProvider } from "@chakra-ui/react";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    // <UserContext.Provider value={stateMemo}>
+    <ChakraProvider>
+      <div className="font-librefranklin font-miriam-libre min-h-default min-h-max bg-violet-700 text-gray-100">
+        <div className="container mx-auto px-5 py-2">
+          <Component {...pageProps} />
+        </div>
+      </div>
+    </ChakraProvider>
+    // </UserContext.Provider>
+  );
 }
 
-export default MyApp
+export default MyApp;

app/pages/api/hello.ts

@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }

app/pages/index.tsx

@@ -1,6 +1,6 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
 
 const Home: NextPage = () => {
   return (
@@ -12,14 +12,14 @@ const Home: NextPage = () => {
 
       <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
         <h1 className="text-6xl font-bold">
-          Welcome to{' '}
+          Welcome to{" "}
           <a className="text-blue-600" href="https://nextjs.org">
             Next.js!
           </a>
         </h1>
 
         <p className="mt-3 text-2xl">
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className="rounded-md bg-gray-100 p-3 font-mono text-lg">
             pages/index.tsx
           </code>
@@ -75,12 +75,12 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

app/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

app/tailwind.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};

lerna.json

@@ -1,5 +1,5 @@
 {
-  "packages": ["old-app", "schemas", "iam", "identity", "types"],
+  "packages": ["old-app", "app", "schemas", "iam", "identity", "types"],
   "npmClient": "yarn",
   "version": "independent",
   "useWorkspaces": true,