initial commit

.env.local.template

@@ -0,0 +1,8 @@
+AUTH0_SECRET=
+AUTH0_BASE_URL=
+AUTH0_ISSUER_BASE_URL=
+AUTH0_CLIENT_ID=
+AUTH0_CLIENT_SECRET=
+AUTH0_AUDIENCE=
+AUTH0_SCOPE=
+DATABASE_URL=

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
+  "rules": {
+    "react/jsx-uses-react": 1,
+    "react/jsx-no-undef": 2,
+    "react/jsx-wrap-multilines": 2,
+    "react/no-string-refs": 0,
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "simple-import-sort/imports": "error"
+  },
+  "plugins": ["import", "@typescript-eslint", "react", "prettier", "simple-import-sort"],
+  "globals": {
+    "expect": true,
+    "describe": true,
+    "it": true,
+    "fixture": true,
+    "test": true,
+    "jest": true,
+    "document": true,
+    "window": true,
+    "fetch": true,
+    "navigator": true
+  }
+}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "requirePragma": false,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[prisma]": {
+    "editor.defaultFormatter": "Prisma.prisma"
+  },
+  "editor.tabSize": 2,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: ['next/babel', '@babel/preset-typescript'],
+  env: {
+    test: {
+      plugins: ['styled-jsx/babel-test']
+    }
+  }
+};

components/card.tsx

@@ -0,0 +1,131 @@
+import { default as MUICard } from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardMedia from '@material-ui/core/CardMedia';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+
+const useStyles = makeStyles({
+  card: {
+    maxWidth: 700,
+    margin: '16px auto',
+    overflow: 'auto'
+  },
+  header: {
+    fontSize: 16
+  },
+  pos: {
+    marginBottom: 12
+  },
+  div: {
+    textAlign: 'left'
+  },
+  pre: {
+    fontSize: 13,
+    whiteSpace: 'pre-wrap'
+  },
+  mediaWrap: {
+    width: '80%',
+    margin: 'auto'
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%' // 16:9
+  },
+  quote: {
+    fontSize: 17,
+    fontWeight: 500,
+    margin: 'auto',
+    width: '80%',
+    padding: '8px',
+    textAlign: 'left'
+  }
+});
+
+function randomPhoto(i: number) {
+  switch (i % 7) {
+    case 0:
+      return 'https://images.unsplash.com/photo-1580757468214-c73f7062a5cb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8MTYlM0E5fGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80';
+    case 1:
+      return 'https://images.unsplash.com/photo-1595835018349-198460e1d309?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80';
+    case 2:
+      return 'https://images.unsplash.com/photo-1599522336242-0db868a98cb1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80';
+    case 3:
+      return 'https://images.unsplash.com/photo-1610037391125-8ce522f92a07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80';
+    case 4:
+      return 'https://images.unsplash.com/photo-1517147304304-313dc873b3d4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80';
+    case 5:
+      return 'https://images.unsplash.com/photo-1604348033618-3e42a96a2c1d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1780&q=80';
+    case 6:
+      return 'https://images.unsplash.com/photo-1557331670-5346fb439f59?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80';
+    case 7:
+      return 'https://images.unsplash.com/photo-1581194898056-92c4db54f64d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80';
+    default:
+      return 'https://images.unsplash.com/photo-1581194898056-92c4db54f64d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80';
+  }
+}
+
+interface CardProps {
+  title?: string;
+  header?: React.ReactNode;
+  headerActions?: React.ReactNode;
+  actions?: React.ReactNode;
+  json?: string;
+  body?: React.ReactNode;
+  includePhoto?: boolean;
+  photoIndex?: number;
+}
+
+export default function Card(props: CardProps): React.ReactElement {
+  const { title, header, headerActions, actions, json, body, includePhoto, photoIndex } = props;
+
+  const cardClasses = useStyles();
+  const cardContent = (
+    <CardContent>
+      {title && (
+        <Typography className={cardClasses.pos} color="textPrimary">
+          {title}
+        </Typography>
+      )}
+      {json && (
+        <div className={cardClasses.div}>
+          <pre className={cardClasses.pre} data-testid="profile">
+            {json}
+          </pre>
+        </div>
+      )}
+      {body && (
+        <Typography className={cardClasses.quote} variant="body2" color="textSecondary" component="p">
+          {'"'}
+          {body}
+          {'"'}
+        </Typography>
+      )}
+    </CardContent>
+  );
+  return (
+    <MUICard className={cardClasses.card}>
+      {header && (
+        <CardHeader
+          className={cardClasses.header}
+          action={headerActions}
+          title={header}
+          titleTypographyProps={{ className: cardClasses.header }}
+        />
+      )}
+      {includePhoto && (
+        <CardActionArea>
+          <div className={cardClasses.mediaWrap}>
+            <CardMedia className={cardClasses.media} image={randomPhoto(photoIndex ?? 0)} title="Quote Icon" />
+          </div>
+          {cardContent}
+        </CardActionArea>
+      )}
+      {!includePhoto && cardContent}
+      {actions && <CardActions>{actions}</CardActions>}
+    </MUICard>
+  );
+}